/* User Provided Stylesheet */

/* Google Fonts — Jost (headings/nav) + Libre Franklin (body) */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');

/* Font Awesome CDN */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* MyST CSS presence flag to avoid false "BASE_URL" warning */
:root {
  --has-styling: 1;
}

/* Font overrides */
body {
  font-family: 'Libre Franklin', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
}

/* Profile image (homepage) */
div.profile-pic img {
  border-radius: 500px;
  width: 80%;
  max-width: 190px;
  margin: 0 auto;
  display: block;
}

/* Giscus comment reactions spacing */
.gsc-reactions {
  margin-top: 1em;
}

/* Reduce gap between article header and content (outline/TOC block) */
div.block.my-10 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Bottom padding so content isn't flush against viewport bottom */
article {
  padding-bottom: 4rem;
}

/* Card footer padding */
.card .footer {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Accessible hide utility */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* CV embed */
.embed-container {
  position: relative;
  padding-bottom: 129%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Card hover effect */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Smooth link transitions */
a {
  transition: color 0.2s ease;
}

/* ========================================
   Landing page hero
   ======================================== */

.landing-hero {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 2rem 1rem 1rem;
}

/* Profile image — circular frame */
.landing-hero .profile-frame {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  display: block;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.3);
}

.landing-hero .profile-frame img {
    margin-top: 0px;
}

/* Name heading */
.landing-hero h1 {
  font-family: 'Jost', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 1rem 0 0.5rem;
}

/* Bio paragraph */
.landing-hero p {
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: left;
  margin: 1rem auto 0;
  max-width: 640px;
  --hero-bio-size: 1.05rem;
}

/* Typing effect (word-by-word, CSS-only) */
.landing-hero .typing-words {
  --word-duration: 0.01s;
  font-size: 0;
  position: relative;
  display: inline;
}

.landing-hero .typing-word {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: pre;
  vertical-align: bottom;
  font-size: var(--hero-bio-size);
  line-height: inherit;
  animation: word-reveal var(--word-duration) steps(1, end) forwards;
}

.landing-hero .typing-word:nth-child(1) { animation-delay: 0s; }
.landing-hero .typing-word:nth-child(2) { animation-delay: 0.075s; }
.landing-hero .typing-word:nth-child(3) { animation-delay: 0.15s; }
.landing-hero .typing-word:nth-child(4) { animation-delay: 0.225s; }
.landing-hero .typing-word:nth-child(5) { animation-delay: 0.3s; }
.landing-hero .typing-word:nth-child(6) { animation-delay: 0.375s; }
.landing-hero .typing-word:nth-child(7) { animation-delay: 0.45s; }
.landing-hero .typing-word:nth-child(8) { animation-delay: 0.525s; }
.landing-hero .typing-word:nth-child(9) { animation-delay: 0.6s; }
.landing-hero .typing-word:nth-child(10) { animation-delay: 0.675s; }
.landing-hero .typing-word:nth-child(11) { animation-delay: 0.75s; }
.landing-hero .typing-word:nth-child(12) { animation-delay: 0.825s; }
.landing-hero .typing-word:nth-child(13) { animation-delay: 0.9s; }
.landing-hero .typing-word:nth-child(14) { animation-delay: 0.975s; }
.landing-hero .typing-word:nth-child(15) { animation-delay: 1.05s; }
.landing-hero .typing-word:nth-child(16) { animation-delay: 1.125s; }
.landing-hero .typing-word:nth-child(17) { animation-delay: 1.2s; }
.landing-hero .typing-word:nth-child(18) { animation-delay: 1.275s; }
.landing-hero .typing-word:nth-child(19) { animation-delay: 1.35s; }
.landing-hero .typing-word:nth-child(20) { animation-delay: 1.425s; }
.landing-hero .typing-word:nth-child(21) { animation-delay: 1.5s; }
.landing-hero .typing-word:nth-child(22) { animation-delay: 1.575s; }
.landing-hero .typing-word:nth-child(23) { animation-delay: 1.65s; }
.landing-hero .typing-word:nth-child(24) { animation-delay: 1.725s; }
.landing-hero .typing-word:nth-child(25) { animation-delay: 1.8s; }
.landing-hero .typing-word:nth-child(26) { animation-delay: 1.875s; }
.landing-hero .typing-word:nth-child(27) { animation-delay: 1.95s; }
.landing-hero .typing-word:nth-child(28) { animation-delay: 2.025s; }
.landing-hero .typing-word:nth-child(29) { animation-delay: 2.1s; }
.landing-hero .typing-word:nth-child(30) { animation-delay: 2.175s; }
.landing-hero .typing-word:nth-child(31) { animation-delay: 2.25s; }
.landing-hero .typing-word:nth-child(32) { animation-delay: 2.325s; }
.landing-hero .typing-word:nth-child(33) { animation-delay: 2.4s; }
.landing-hero .typing-word:nth-child(34) { animation-delay: 2.475s; }
.landing-hero .typing-word:nth-child(35) { animation-delay: 2.55s; }
.landing-hero .typing-word:nth-child(36) { animation-delay: 2.625s; }
.landing-hero .typing-word:nth-child(37) { animation-delay: 2.7s; }
.landing-hero .typing-word:nth-child(38) { animation-delay: 2.775s; }
.landing-hero .typing-word:nth-child(39) { animation-delay: 2.85s; }
.landing-hero .typing-word:nth-child(40) { animation-delay: 2.925s; }
.landing-hero .typing-word:nth-child(41) { animation-delay: 3s; }
.landing-hero .typing-word:nth-child(42) { animation-delay: 3.075s; }
.landing-hero .typing-word:nth-child(43) { animation-delay: 3.15s; }
.landing-hero .typing-word:nth-child(44) { animation-delay: 3.225s; }
.landing-hero .typing-word:nth-child(45) { animation-delay: 3.3s; }
.landing-hero .typing-word:nth-child(46) { animation-delay: 3.375s; }
.landing-hero .typing-word:nth-child(47) { animation-delay: 3.45s; }
.landing-hero .typing-word:nth-child(48) { animation-delay: 3.525s; }
.landing-hero .typing-word:nth-child(49) { animation-delay: 3.6s; }
.landing-hero .typing-word:nth-child(50) { animation-delay: 3.675s; }
.landing-hero .typing-word:nth-child(51) { animation-delay: 3.75s; }
.landing-hero .typing-word:nth-child(52) { animation-delay: 3.825s; }
.landing-hero .typing-word:nth-child(53) { animation-delay: 3.9s; }
.landing-hero .typing-word:nth-child(54) { animation-delay: 3.975s; }
.landing-hero .typing-word:nth-child(55) { animation-delay: 4.05s; }
.landing-hero .typing-word:nth-child(56) { animation-delay: 4.125s; }
.landing-hero .typing-word:nth-child(57) { animation-delay: 4.2s; }
.landing-hero .typing-word:nth-child(58) { animation-delay: 4.275s; }
.landing-hero .typing-word:nth-child(59) { animation-delay: 4.35s; }
.landing-hero .typing-word:nth-child(60) { animation-delay: 4.425s; }
.landing-hero .typing-word:nth-child(61) { animation-delay: 4.5s; }
.landing-hero .typing-word:nth-child(62) { animation-delay: 4.575s; }
.landing-hero .typing-word:nth-child(63) { animation-delay: 4.65s; }
.landing-hero .typing-word:nth-child(64) { animation-delay: 4.725s; }
.landing-hero .typing-word:nth-child(65) { animation-delay: 4.8s; }
.landing-hero .typing-word:nth-child(66) { animation-delay: 4.875s; }
.landing-hero .typing-word:nth-child(67) { animation-delay: 4.95s; }

.landing-hero .typing-words::after {
  content: "";
  display: inline-block;
  width: 0.12em;
  height: 1em;
  margin-left: 0.1em;
  background: currentColor;
  vertical-align: -0.1em;
  font-size: var(--hero-bio-size);
  line-height: 1;
  animation: caret-blink 0.9s steps(2, start) infinite;
}

.landing-hero .typing-fallback {
  display: none;
}

@keyframes word-reveal {
  to {
    max-width: 24ch;
    opacity: 1;
  }
}

@keyframes caret-blink {
  0%,
  49% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero .typing-words {
    display: none;
  }
  .landing-hero .typing-fallback {
    display: inline;
  }
}

/* Blog heading */
.landing-hero h2 {
  font-family: 'Jost', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2.5rem;
}

/* Dark mode overrides */
[data-theme="dark"] .landing-hero .profile-frame {
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.8);
}

/* Center landing hero on large screens without breaking sidebar layouts */
@media (min-width: 1024px) {
  article.article-grid > .landing-hero {
    grid-column: page;
    width: min(100%, 900px);
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
  }
}

/* Balance the book-theme grid at >=1024px so content stays centered across zooms */
@media (min-width: 768px) {
  .article-grid {
    grid-template-columns:
      [screen-start] .25rem
      [screen-inset-start] 1fr
      [page-start] 3rem
      [page-inset-start] minmax(4rem, 9rem)
      [body-outset-start] 3rem
      [body-start gutter-left-start] 1rem
      [body-inset-start] minmax(8ch, 10ch)
      [middle-start] minmax(8ch, 10ch)
      [gutter-left-end] minmax(8ch, 10ch) minmax(8ch, 10ch)
      [gutter-right-start] minmax(8ch, 10ch)
      [middle-end] minmax(8ch, 10ch)
      [body-inset-end] 1rem
      [body-end gutter-right-end] 3rem
      [body-outset-end] minmax(4rem, 9rem)
      [page-inset-end] 3rem
      [page-end] 1fr
      [screen-inset-end] .25rem
      [screen-end];
  }
}