/* THAT'S NOT WHAT I MEANT — the page is the quest.
   Hers, 24 September 2026: "make them much more unique... interesting and more
   sophisticated. Make the whole site way more sophisticated."
   So: no boxes, no heavy rules, no cards. Hairlines, hanging numerals, a lot of
   air, and the drawing carrying the argument. Editorial, not interface. */

.q{--gut:clamp(22px,5.5vw,72px)}
body{background:var(--ground);color:var(--ink);
  font-feature-settings:"kern" 1,"liga" 1;-webkit-font-smoothing:antialiased}
.q section{padding:clamp(86px,13vw,190px) var(--gut)}
.q ::selection{background:var(--met);color:#fff}

/* ── the small voice ──────────────────────────────────────────────────── */
.q-eyebrow{font-family:var(--body);font-size:.66rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--soft);margin:0 0 2.4em;font-weight:500}
.q-h2{font-family:var(--head);font-weight:400;font-size:clamp(2rem,5.2vw,3.6rem);
  line-height:1.03;letter-spacing:-.012em;margin:0 0 .7em;max-width:19ch;text-wrap:balance}
.q-h2--wide{max-width:23ch}
.q-prose{font-family:var(--body);font-size:clamp(1rem,1.25vw,1.08rem);line-height:1.8;
  color:var(--soft);margin:0;max-width:52ch;font-weight:400}
.q-prose--mid{margin-bottom:clamp(56px,7vw,96px)}

/* ── the arrival ──────────────────────────────────────────────────────── */
.q-open{padding-top:clamp(34px,5vw,74px);padding-bottom:clamp(70px,10vw,140px)}
.q-open__drawing{width:min(900px,100%);margin:0 auto}
.q-open__drawing svg{display:block;width:100%;height:auto;overflow:visible}
.q-draw__one path,.q-draw__two path{stroke-dasharray:1700;stroke-dashoffset:1700;
  animation:q-ink 2.3s cubic-bezier(.36,.04,.18,1) forwards}
.q-draw__two path{animation-delay:.5s}
.q-thread{stroke-dasharray:2600;stroke-dashoffset:2600;
  animation:q-ink 2.6s ease 1.7s forwards}
@keyframes q-ink{to{stroke-dashoffset:0}}

/* the two of them, side by side, at every width */
.q-open__pair{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,5vw,72px);max-width:min(900px,100%);margin:clamp(4px,1vw,14px) auto 0}
.q-side{margin:0}
.q-side figcaption{font-family:var(--body);font-size:clamp(.52rem,1.4vw,.62rem);
  letter-spacing:.3em;text-transform:uppercase;font-weight:500;margin-bottom:1.5em;
  color:var(--soft)}
.q-side blockquote{margin:0;font-family:var(--head);font-style:italic;
  font-size:clamp(.96rem,2.5vw,1.72rem);line-height:1.26;letter-spacing:-.005em}
.q-side--one{text-align:right}
.q-side--one blockquote{color:var(--one)}
.q-side--two blockquote{color:var(--two)}
.q-rift{display:none}

.q-open__words{text-align:center;margin-top:clamp(56px,9vw,120px)}
.q-name{font-family:var(--head);font-weight:400;margin:0;
  font-size:clamp(2.3rem,8vw,5.6rem);line-height:.98;letter-spacing:-.022em}
.q-line{font-family:var(--body);color:var(--soft);margin:1.7em auto 0;
  font-size:clamp(.95rem,1.4vw,1.06rem);max-width:33ch;line-height:1.7}

/* ── it takes two ─────────────────────────────────────────────────────── */
.q-both{max-width:min(760px,100%);margin:0 auto;text-align:center;
  border-top:1px solid var(--hair)}
.q-both .q-prose{margin:0 auto}
.q-law{font-family:var(--head);font-size:clamp(1.4rem,3.6vw,2.4rem);
  color:var(--met);margin:1.8em 0 0;letter-spacing:-.012em}

/* ── the quest: hanging numerals on a hairline, no boxes ─────────────── */
.q-quest{max-width:min(920px,100%);margin:0 auto;border-top:1px solid var(--hair)}
.q-steps{list-style:none;margin:clamp(46px,6vw,80px) 0 0;padding:0;
  display:grid;gap:clamp(46px,6vw,84px)}
.q-step{position:relative;padding-left:clamp(52px,8vw,110px);
  /* each one sits further in than the last — they are converging */
  margin-left:calc(var(--i) * clamp(0px,2.2vw,40px))}
.q-step::before{content:"";position:absolute;left:0;top:.52em;
  width:clamp(28px,5vw,66px);height:1px;background:var(--hair)}
.q-step__n{position:absolute;left:0;top:calc(.52em - .9em);
  font-family:var(--body);font-size:.64rem;letter-spacing:.2em;font-weight:600;
  color:var(--soft)}
.q-step__who{font-family:var(--body);font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;font-weight:500;margin:0 0 1.1em}
.q-step:nth-child(1) .q-step__who{color:var(--one)}
.q-step:nth-child(2) .q-step__who{color:var(--two)}
.q-step:nth-child(3) .q-step__who,.q-step:nth-child(4) .q-step__who{color:var(--met)}
.q-step:nth-child(1)::before{background:var(--one)}
.q-step:nth-child(2)::before{background:var(--two)}
.q-step:nth-child(3)::before,.q-step:nth-child(4)::before{background:var(--met)}
.q-step__word{font-family:var(--head);font-weight:400;
  font-size:clamp(1.55rem,4vw,2.6rem);line-height:1.04;margin:0 0 .42em;
  letter-spacing:-.015em}
.q-step:nth-child(4) .q-step__word{color:var(--met)}
.q-step__say{font-family:var(--body);font-size:clamp(.96rem,1.2vw,1.04rem);
  line-height:1.78;color:var(--soft);margin:0;max-width:46ch}

/* ── what it costs ────────────────────────────────────────────────────── */
.q-money{max-width:min(920px,100%);margin:0 auto;border-top:1px solid var(--hair)}
.q-ways{display:grid;gap:clamp(40px,5vw,60px)}
@media (min-width:820px){.q-ways{grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3.4vw,52px)}}
.q-way{border-top:1px solid var(--hair);padding:clamp(22px,2.6vw,32px) 0 0}
.q-way h3{font-family:var(--head);font-weight:400;font-size:clamp(1.35rem,2.6vw,1.9rem);
  margin:0 0 .22em;letter-spacing:-.01em}
.q-way__cost{font-family:var(--body);font-weight:500;font-size:.96rem;
  letter-spacing:.06em;margin:0 0 1em;color:var(--one)}
.q-way__say{font-family:var(--body);font-size:.95rem;line-height:1.74;
  color:var(--soft);margin:0}

/* ── the close: one column at last ───────────────────────────────────── */
.q-close{background:var(--met);color:#fff;text-align:center}
.q-close__head{font-family:var(--head);font-weight:400;
  font-size:clamp(2rem,6vw,3.8rem);line-height:1.02;margin:0 auto;max-width:17ch;
  letter-spacing:-.018em;text-wrap:balance}
.q-close__body{font-family:var(--body);color:rgba(255,255,255,.76);
  margin:2em auto 0;font-size:.94rem;letter-spacing:.14em;text-transform:uppercase}

/* ── the bar and the foot, quiet ─────────────────────────────────────── */
.gk-bar{border-bottom:1px solid var(--hair);background:#fff}
.gk-bar__name,.gk-bar a{color:var(--ink)}
.gk-foot,.gk-foot *{color:var(--soft)}

@media (max-width:640px){
  .q-open__drawing{width:106%;margin-inline:-3%}
  .q-open__pair{gap:16px}
  .q-step{margin-left:0;padding-left:44px}
}
@media (prefers-reduced-motion:reduce){
  .q-draw__one path,.q-draw__two path,.q-thread{animation:none;stroke-dashoffset:0}
}


/* ══ THE WALL BETWEEN THEM ═══════════════════════════════════════════════
   Hers, 24 September 2026: "I actually wanted a 3D pebble or stone wall
   between them, just down the middle of the website that disappears as we get
   down the bottom."

   So it stands in the middle of the page, solid and stacked at the top where
   the two of them are still facing each other across it, and course by course
   it opens, thins and goes — until at the foot of the page there is nothing
   between them at all. */
.q{position:relative}
.q-wall-holder{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:clamp(120px,19vw,300px);z-index:0;pointer-events:none;overflow:hidden}
.q-wall-holder svg{width:100%;height:100%;display:block}
.q > section{position:relative;z-index:1}

/* her words keep their own air over it */
.q-open__words,.q-both,.q-quest,.q-money{position:relative}
.q-open__words::before,.q-both::before{content:"";position:absolute;
  inset:-6% -8%;background:radial-gradient(ellipse at center,
  var(--ground) 56%,rgba(255,255,255,0) 78%);z-index:-1}
.q-close{position:relative;z-index:1}