:root {
  --ink: #141414;
  --muted: #9a9a9a;
  --sign: #4a4a4a;
  --max: 518px;   /* scaled with desktop font (440 × 20/17) */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: #fff; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { opacity: 0.55; }

/* ---------- Language switcher ---------- */
.lang {
  position: absolute;
  top: 30px;
  right: 44px;
  z-index: 4;
  display: flex;
  gap: 20px;
}
.lang button {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  line-height: 1;
}
.lang button[aria-current="true"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lang button:hover { opacity: 0.55; }

/* ---------- Content column ---------- */
.wrap {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(110px, 21vh, 220px) 24px 170px;
}

/* ---------- Hero ---------- */
.hero { text-align: center; }
.hero p { margin: 0; }
.title { }
.pilcrow {
  margin: 12px 0;
  color: var(--ink);
}
.tagline { max-width: 24em; margin-inline: auto; }
.pilot .arrow {
  display: inline-block;
  margin-inline-start: 4px;
}
.pilot-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;            /* inherited, so default + hover align */
}
.pilot-link .arrow { text-decoration: underline; }   /* arrow underline (its own, since it's inline-block) */
.pilot-link:hover { opacity: 1; }                     /* no fade on hover */
.pilot-link:hover .arrow { text-decoration: none; }   /* remove the arrow's underline on hover */

/* ---------- FAQ / accordion ---------- */
.faq {
  margin-top: clamp(80px, 14vh, 150px);
  text-align: start;
}
details { margin: 0; }
details + details { margin-top: 34px; }

summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
summary::-webkit-details-marker { display: none; }
summary:focus-visible {
  outline: 2px solid #1a3cff;
  outline-offset: 4px;
}

.sign {
  color: var(--sign);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
details[open] .sign::after  { content: "–"; }
details:not([open]) .sign::after { content: "+"; }

.answer { padding-top: 18px; }
.role {
  color: var(--muted);
  margin: 0 0 2px;
}
.bio { margin: 0 0 24px; }
.answer .bio:last-child { margin-bottom: 0; }

/* ---------- Legal footer (intentionally low-key) ---------- */
.legal {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px 22px;
  text-align: center;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: #cfcfcf;
}
.legal p { margin: 0; }

/* ---------- Doodles ---------- */
.doodles {
  position: absolute;       /* scrolls with the page (not fixed) */
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;            /* fixed reference height: % positions resolve against a
                              constant, so doodles don't shift when a section opens/closes */
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.doodle {
  position: absolute;
  width: 48px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

#d1 { left: 23%;  top: 22%; width: 66px; transform: rotate(-4deg); }  /* atom  */
#d2 { left: 40%;  top: 11%; width: 44px; transform: rotate(6deg); }   /* burst */
#d3 { left: 66%;  top: 18%; width: 78px; transform: rotate(-3deg); }  /* leaf  */
#d4 { left: 85%;  top: 27%; width: 80px; transform: rotate(4deg); }   /* fairy */
#d5 { left: 14%;  top: 46%; width: 46px; }                            /* clef  */
#d6 { left: 74%;  top: 51%; width: 28px; }                            /* burst */
#d7 { left: 25%;  top: 75%; width: 50px; transform: rotate(176deg); } /* scroll*/
#d8 { left: 60%;  top: 92%; width: 56px; transform: rotate(-8deg);    /* star  */
      z-index: 1; pointer-events: none; }                             /* outside .doodles: needs its own layer props */
#d9 { left: 78%;  top: 73%; width: 28px; }                            /* burst */

/* ---------- Doodle fade-in ---------- */
@keyframes doodle-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.doodle {
  opacity: 0;                                    /* hidden until its turn */
  animation: doodle-in 0.35s ease-out forwards;
}
/* clockwise reveal starting from the clef (left mid), 0.7s step between each */
#d5 { animation-delay: 0s;   }  /* left mid    */
#d1 { animation-delay: 0.7s; }  /* upper left  */
#d2 { animation-delay: 1.4s; }  /* top center  */
#d3 { animation-delay: 2.1s; }  /* upper right */
#d4 { animation-delay: 2.8s; }  /* right upper */
#d6 { animation-delay: 3.5s; }  /* right mid   */
#d9 { animation-delay: 4.2s; }  /* right lower */
#d8 { animation-delay: 4.9s; }  /* bottom      */
#d7 { animation-delay: 5.6s; }  /* lower left  */
@media (prefers-reduced-motion: reduce) {
  .doodle { opacity: 1; animation: none; }
}

/* ---------- Desktop type tweaks ---------- */
@media (min-width: 721px) {
  .lang,               /* language switcher */
  .answer { font-size: 18px; }   /* FAQ answer text (roles + bios) */
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; line-height: 1.5; }   /* sections' content + language stay 16 */
  .hero { font-size: 18px; }                     /* main (hero) text */
  summary { font-size: 18px; }                   /* section titles */

  .lang {
    position: static;
    justify-content: center;
    gap: 22px;
    padding-top: 30px;
  }

  .wrap {
    padding: 100px 26px 150px;
  }

  .tagline { max-width: none; }

  details + details { margin-top: 40px; }
  .bio { margin-bottom: 30px; }

  /* doodles: only the six from the reference; rest hidden */
  #d2, #d3, #d9 { display: none; }

  #d1 { left: 5%;   top: 7%;  width: 78px; transform: rotate(-4deg); scale: 70%; }  /* atom  */
  #d4 { left: 77%;  top: 9%;  width: 90px; transform: rotate(4deg);  scale: 70%; }  /* fairy */
  #d5 { left: 10%;  top: 40%; width: 52px; scale: 77%; }                            /* clef  */
  #d6 { left: 86%;  top: 36%; width: 42px; }                                        /* burst */
  #d7 { left: 14%;  top: 93%; width: 40px; transform: rotate(176deg); display: none; } /* scroll (hidden) */
  #d8 { left: 53%;  top: 75%; width: 63px; transform: rotate(-8deg); }              /* star  */

  /* re-step the cascade over only the visible doodles (skip the display:none ones) */
  #d5 { animation-delay: 0s;   }
  #d1 { animation-delay: 0.7s; }
  #d4 { animation-delay: 1.4s; }
  #d6 { animation-delay: 2.1s; }
  #d8 { animation-delay: 2.8s; }
}