/* ============================================================================
   THE QUIET PROBLEM — site.css
   Direction A: "The Room at Night"

   Structure of this file:
     1.  Tokens (colour, type, spacing)   <- EDIT COLOURS HERE
     2.  Base & typography
     3.  Layout primitives
     4.  Header, quick-exit, theme lamp
     5.  Links, buttons, CTA hierarchy
     6.  Home: hero / permission / loop / turn / portrait / doors / medical
     7.  Footer
     8.  Start Here: the assessment
     9.  Motion & accessibility

   Design rules being enforced here, deliberately:
     - No cards, no rounded rectangles, no drop shadows. Structure comes from
       space, hairlines and luminance.
     - Amber (--accent) appears once or twice per screen. It marks the path.
     - Sage (--sage) is reserved for the medical/safety register. Nothing else.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. TOKENS
   Dark is the committed design, so the bare :root carries the night palette.
   The light palette is a genuine daytime theme, not an afterthought.
   ------------------------------------------------------------------------ */
:root {
  /* — night (default) — */
  --ground:      #101614;
  --ground-deep: #0B100E;   /* the loop band; the darkest surface on the site */
  --surface:     #171F1C;
  --surface-2:   #1E2725;
  --text:        #E5E8E3;
  --text-2:      #BEC6C1;
  --muted:       #8B958F;
  --rule:        #2B3532;
  --rule-soft:   #1E2724;
  --accent:      #DFAE58;   /* lamplight */
  --accent-ink:  #F0CB8C;
  --accent-dim:  rgba(223, 174, 88, 0.16);
  --sage:        #7FAE9B;   /* medical / safety register only */
  --sage-dim:    rgba(127, 174, 155, 0.14);
  --sage-ink:    #A6C9B9;
  --on-sage:     #0E1512;
  --on-accent:   #14100A;
  --lamp:        rgba(223, 174, 88, 0.055);  /* the hero glow */

  /* — type — */
  --f-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — measure & rhythm — */
  --measure: 34rem;                          /* ~66ch at body size */
  --gut:  clamp(1.25rem, 5vw, 2.5rem);
  --band: clamp(4.5rem, 11vw, 9rem);         /* vertical space between bands */

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:      #EFF1EE;
    --ground-deep: #E7EAE6;
    --surface:     #E7EAE6;
    --surface-2:   #DDE1DC;
    --text:        #141E1B;
    --text-2:      #3D4A46;
    --muted:       #626F6A;
    --rule:        #C7CDC7;
    --rule-soft:   #DBE0DA;
    --accent:      #8A6410;
    --accent-ink:  #5E440B;
    --accent-dim:  rgba(138, 100, 16, 0.14);
    --sage:        #2F5C4E;
    --sage-dim:    rgba(47, 92, 78, 0.10);
    --sage-ink:    #23463B;
    --on-sage:     #FFFDF7;
    --on-accent:   #FFFDF7;
    --lamp:        rgba(138, 100, 16, 0.05);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --ground:      #EFF1EE;
  --ground-deep: #E7EAE6;
  --surface:     #E7EAE6;
  --surface-2:   #DDE1DC;
  --text:        #141E1B;
  --text-2:      #3D4A46;
  --muted:       #626F6A;
  --rule:        #C7CDC7;
  --rule-soft:   #DBE0DA;
  --accent:      #8A6410;
  --accent-ink:  #5E440B;
  --accent-dim:  rgba(138, 100, 16, 0.14);
  --sage:        #2F5C4E;
  --sage-dim:    rgba(47, 92, 78, 0.10);
  --sage-ink:    #23463B;
  --on-sage:     #FFFDF7;
  --on-accent:   #FFFDF7;
  --lamp:        rgba(138, 100, 16, 0.05);
  color-scheme: light;
}


/* ---------------------------------------------------------------------------
   2. BASE & TYPOGRAPHY
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (min-width: 800px) { body { font-size: 18px; } }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -0.021em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.05rem, 6.2vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.16; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }
em { font-style: italic; }

.lede {
  font-family: var(--f-display);
  font-size: clamp(1.12rem, 2.4vw, 1.35rem);
  line-height: 1.5;
  color: var(--text-2);
}

/* mono utility label — used for microcopy, prices, diagram labels */
.label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.2rem;
}
.label--accent { color: var(--accent); }

.fine {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-transform: none;
}

/* The signature: a hairline that fades like light falling off */
.lamprule {
  border: 0;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--rule) 42%, transparent 100%);
  opacity: 0.5;
}

/* placeholders — visible in the build, impossible to ship by accident */
.ph {
  font-family: var(--f-mono);
  font-size: 0.86em;
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  /* Long placeholders must be able to wrap, or they push narrow phones
     sideways. They are temporary text; they do not get to break the layout. */
  overflow-wrap: break-word;
}


/* ---------------------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-inline: var(--gut);
}
.band { padding-block: var(--band); }
.col  { max-width: var(--measure); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--on-accent);
  padding: 0.7rem 1.1rem; z-index: 100; font-weight: 600;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }


/* ---------------------------------------------------------------------------
   4. HEADER · QUICK EXIT · THEME LAMP
   The header does not follow the scroll. Nothing on this site chases him.
   ------------------------------------------------------------------------ */
.site-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1.4rem;
}
.wordmark {
  font-family: var(--f-display);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}
.wordmark:hover { color: var(--accent-ink); }

.site-nav { display: none; gap: 1.6rem; }
@media (min-width: 780px) { .site-nav { display: flex; } }
.site-nav a {
  font-size: 0.86rem;
  color: var(--text-2);
  text-decoration: none;
  padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

.icon-btn {
  appearance: none;
  background: none;
  border: 1px solid var(--rule);
  color: var(--text-2);
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn svg { width: 1.05rem; height: 1.05rem; }

/* Quick exit: for a man reading this on a shared screen. */
.exit-btn { border-color: var(--rule); }
.exit-btn:hover { border-color: var(--text-2); color: var(--text); }


/* ---------------------------------------------------------------------------
   5. LINKS · BUTTONS
   Hierarchy: one amber fill per page (primary), outline (secondary),
   lamplight underline (exploratory — these carry the homepage).
   ------------------------------------------------------------------------ */
a { color: var(--accent-ink); }

.link {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 0.98rem;
  color: var(--text);
  text-decoration: none;
  padding-bottom: 0.22rem;
  background-image: linear-gradient(90deg, var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 260ms ease, color 200ms ease;
}
.link:hover { color: var(--accent-ink); background-size: 100% 2px; }
.link .arrow { display: inline-block; transition: transform 260ms ease; }
.link:hover .arrow { transform: translateX(4px); }

.btn {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 0.85rem 1.5rem;
  text-decoration: none;
  border: 1px solid var(--rule);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
  min-height: 44px;
}
.btn:hover { border-color: var(--accent); color: var(--accent-ink); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-accent); }

.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Headings we move focus to for screen readers are not interactive controls,
   so they take focus silently rather than drawing a ring. */
[tabindex="-1"]:focus { outline: none; }


/* ---------------------------------------------------------------------------
   6. HOME
   ------------------------------------------------------------------------ */

/* --- 6.1 Hero: type on darkness. One lamp. No image, no button. --- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 12vh, 8rem) clamp(4rem, 12vh, 8rem);
}
.hero::before {
  content: "";
  position: absolute;
  top: -22vh; left: -12vw;
  width: min(90vw, 900px); height: min(90vw, 900px);
  background: radial-gradient(circle at 35% 35%, var(--lamp), transparent 62%);
  pointer-events: none;
  z-index: -1;
}
.hero h1 {
  max-width: 19ch;
  margin-bottom: 1.6rem;
}
.hero .sub {
  font-family: var(--f-display);
  text-wrap: pretty;
  font-size: clamp(1.08rem, 2.3vw, 1.3rem);
  line-height: 1.52;
  color: var(--text-2);
  max-width: 40ch;
  margin-bottom: 2.6rem;
}

/* --- 6.2 Permission --- */
.permission p { font-family: var(--f-display); font-size: clamp(1.05rem, 2.1vw, 1.2rem); line-height: 1.58; color: var(--text-2); max-width: 40ch; }
.permission p strong { color: var(--text); font-weight: 400; }

/* --- 6.3 The loop: full-bleed, the darkest band on the site --- */
.loop {
  background: var(--ground-deep);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding-block: var(--band);
  overflow: hidden;
}
.loop h2 { max-width: 18ch; margin-bottom: 1.1rem; }
.loop .intro { max-width: 40ch; color: var(--text-2); }

/* Two columns once there is room: the explanation holds still on the left
   while the loop draws itself on the right. Stacked below that. */
.loop-grid { display: grid; gap: clamp(2.2rem, 5vw, 3rem); }
@media (min-width: 1000px) {
  .loop-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    grid-template-areas: "copy fig" "after fig";
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: 2rem;
    align-items: start;
  }
  .loop-copy   { grid-area: copy; }
  .loop-after  { grid-area: after; }
  .loop-figure { grid-area: fig; align-self: center; }
}
.loop-figure { min-width: 0; }

/* the circular dial — desktop */
.loop-dial { display: none; }
@media (min-width: 760px) { .loop-dial { display: block; } .loop-stack { display: none; } }
.loop-dial svg {
  display: block;
  width: 100%;
  max-width: min(100%, 34rem);
  height: auto;
  margin-inline: auto;
}

.spiral {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p, 0));
}
.ring { fill: none; stroke: var(--rule); stroke-width: 1; opacity: 0.55; }

.stage {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  fill: var(--text-2);
  /* each label carries --at: the scroll fraction at which it arrives */
  opacity: clamp(0, calc((var(--p, 0) - var(--at)) * 14), 1);
}
.knot {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  fill: var(--accent);
  text-transform: uppercase;
  opacity: clamp(0, calc((var(--p, 0) - 0.86) * 14), 1);
}
.knot-dot {
  fill: var(--accent);
  opacity: clamp(0, calc((var(--p, 0) - 0.86) * 14), 1);
}
/* the four doors — they arrive last, after the knot */
.door {
  opacity: clamp(0, calc((var(--p, 0) - 0.9) * 16), 1);
}
.door circle { fill: var(--ground-deep); stroke: var(--sage); stroke-width: 1.6; }
.door text {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.05em; fill: var(--sage);
}

/* the vertical sequence — mobile. Same idea, redrawn, not shrunk. */
.loop-stack { position: relative; padding-left: 2.2rem; }
.loop-stack::before {
  content: "";
  position: absolute; left: 0.5rem; top: 0.6rem; bottom: 0.6rem;
  width: 1px; background: var(--rule);
}
.loop-stack::after {
  content: "";
  position: absolute; left: 0.5rem; top: 0.6rem;
  width: 1px; background: var(--accent);
  height: calc(var(--p, 0) * 100%);
  max-height: calc(100% - 1.2rem);
}
.loop-stack li {
  position: relative;
  list-style: none;
  padding-block: 0.62rem;
  font-family: var(--f-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--text-2);
  opacity: clamp(0.18, calc((var(--p, 0) - var(--at)) * 14), 1);
}
.loop-stack li::before {
  content: "";
  position: absolute; left: -1.93rem; top: 1.15rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.loop-stack li.is-door { color: var(--sage); }
.loop-stack li.is-door::before { background: var(--ground-deep); border: 1.5px solid var(--sage); }
.loop-stack ol { margin: 0; padding: 0; }
.loop-stack .rejoin {
  color: var(--accent);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.loop-caption {
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.36;
  color: var(--text);
  max-width: 28ch;
  padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
}

/* --- 6.4 The turn: the page's intellectual hinge --- */
.turn h2 { max-width: 20ch; margin-bottom: 1.4rem; }
.turn .body { color: var(--text-2); max-width: 40ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem 1.2rem; align-items: center; margin-top: 2.2rem; }
.cta-note { margin-top: 0.9rem; max-width: 34rem; }

/* --- 6.5 The man --- */
.man-grid {
  display: grid;
  gap: clamp(1.8rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 860px) { .man-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); } }

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait .ph-note {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
  padding: 1.5rem;
  line-height: 1.7;
}
.creds { margin-top: 1.6rem; }
.creds li {
  list-style: none;
  padding-block: 0.55rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.92rem;
  color: var(--text-2);
}
.creds { padding: 0; }
.creds li:last-child { border-bottom: 1px solid var(--rule-soft); }

.anti-testimonial {
  margin-top: 1.8rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--rule);
  font-family: var(--f-display);
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 34ch;
}

/* --- 6.6 Three doors: horizontal bands, ordered by commitment --- */
.door-band {
  display: grid;
  gap: 0.6rem 2.5rem;
  padding-block: clamp(1.8rem, 4vw, 2.4rem);
  border-top: 1px solid var(--rule-soft);
  align-items: start;
}
.door-band:last-of-type { border-bottom: 1px solid var(--rule-soft); }
@media (min-width: 820px) {
  .door-band { grid-template-columns: 13rem minmax(0, 1fr) auto; align-items: center; }
}
.door-band h3 { font-size: clamp(1.3rem, 2.6vw, 1.55rem); }
.door-band .desc { color: var(--text-2); font-size: 0.96rem; max-width: 42ch; margin: 0; }
.door-band .price {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: block;
  margin-top: 0.5rem;
}
.door-band .action { justify-self: start; }
@media (min-width: 820px) { .door-band .action { justify-self: end; } }

/* --- 6.7 Medical: the sage register. Ends on integrity, not urgency. --- */
.medical {
  background: var(--sage-dim);
  border-left: 3px solid var(--sage);
  padding: clamp(1.6rem, 4vw, 2.4rem);
}
.medical h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin-bottom: 0.9rem; }
.medical p { color: var(--text-2); max-width: 46ch; }


/* ---------------------------------------------------------------------------
   7. FOOTER
   ------------------------------------------------------------------------ */
.site-foot {
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(2.5rem, 6vw, 4rem) 3rem;
  font-size: 0.9rem;
}
.foot-grid { display: grid; gap: 2rem clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 720px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 0.5rem; }
.foot-grid a { color: var(--text-2); text-decoration: none; }
.foot-grid a:hover { color: var(--accent-ink); }
.house-line {
  font-family: var(--f-display);
  font-size: 1.02rem;
  color: var(--muted);
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-soft);
}


/* ---------------------------------------------------------------------------
   8. START HERE — the assessment
   One question per screen. No progress bar (a progress bar makes it a test).
   Nothing is stored, nothing is transmitted.
   ------------------------------------------------------------------------ */
.q-shell { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }

.q-step { display: none; }
.q-step.is-active { display: block; animation: fade-up 340ms ease both; }

.q-step legend,
.q-step .q-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.55rem, 4.4vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 20ch;
  padding: 0;
  margin-bottom: 0.8rem;
}
.q-step fieldset { border: 0; margin: 0; padding: 0; }
.q-hint { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.8rem; max-width: 38ch; }

.opts { display: grid; gap: 0; margin-bottom: 2rem; max-width: 36rem; }
.opt { position: relative; display: block; }
.opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.opt span {
  display: block;
  padding: 0.95rem 1.1rem 0.95rem 2.6rem;
  border-top: 1px solid var(--rule-soft);
  color: var(--text-2);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.45;
  transition: color 180ms ease, background 180ms ease;
  min-height: 44px;
}
.opt:last-child span { border-bottom: 1px solid var(--rule-soft); }
.opt span::before {
  content: "";
  position: absolute;
  left: 0.55rem; top: 1.32rem;
  width: 9px; height: 9px;
  border: 1px solid var(--rule);
  border-radius: 50%;
}
.opt input[type="checkbox"] + span::before { border-radius: 0; }
.opt span:hover { color: var(--text); background: var(--surface); }
.opt input:checked + span { color: var(--text); background: var(--accent-dim); }
.opt input:checked + span::before { background: var(--accent); border-color: var(--accent); }
.opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

.q-nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.q-back {
  appearance: none; background: none; border: 0;
  color: var(--muted); font-family: var(--f-body); font-size: 0.88rem;
  cursor: pointer; padding: 0.6rem 0; text-decoration: underline;
  text-underline-offset: 3px;
}
.q-back:hover { color: var(--text-2); }

/* the result */
#result { display: none; }
#result.is-active { display: block; animation: fade-up 420ms ease both; }
.result-body {
  font-family: var(--f-display);
  font-size: clamp(1.06rem, 2.2vw, 1.24rem);
  line-height: 1.55;
  color: var(--text);
  max-width: 40ch;
}
.result-body p { max-width: none; }
.result-next {
  margin-top: 2.4rem;
  padding: clamp(1.4rem, 3.5vw, 2rem);
  background: var(--surface);
  border-left: 3px solid var(--accent);
}
.result-next.is-medical { border-left-color: var(--sage); background: var(--sage-dim); }
/* In the medical route the primary action belongs to the safety register. */
.result-next.is-medical .btn--primary { background: var(--sage); border-color: var(--sage); }
.result-next.is-medical .btn--primary:hover { filter: brightness(1.12); }
.result-next h3 { margin-bottom: 0.6rem; }
.result-next p { color: var(--text-2); font-size: 0.98rem; }

.result-keep {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-soft);
}
.keep-form { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.9rem; }
.keep-form input[type="email"] {
  flex: 1 1 15rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 0.95rem;
  padding: 0.8rem 0.9rem;
  min-height: 44px;
}
.keep-form input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.keep-form input::placeholder { color: var(--muted); }


/* ---------------------------------------------------------------------------
   9. MOTION & ACCESSIBILITY
   Three uses of motion on this site: the loop drawing, text arriving from a
   visible resting state, and link underlines. Nothing else moves.
   ------------------------------------------------------------------------ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 620ms ease, transform 620ms ease;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* The loop is presented complete rather than drawn. */
  .loop { --p: 1 !important; }
}

@media print {
  .site-head, .site-foot, .loop { display: none; }
  body { background: #fff; color: #000; }
}


/* ---------------------------------------------------------------------------
   10. LONG-FORM ARTICLE  (/what-is-happening and the library)
   This is the proof-of-competence layout. It has one job: to be the most
   comfortable thing he has read on a phone all week. Reading measure and
   line-height matter more here than anywhere else on the site.
   ------------------------------------------------------------------------ */
.article-head { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.article-head h1 { max-width: 17ch; }
.article-head .standfirst {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.4vw, 1.34rem);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 42ch;
  margin-top: 1.4rem;
  text-wrap: pretty;
}
.byline {
  margin-top: 2rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Contents rail — appears only where there is room for it. It does not
   follow the scroll on small screens, and it is never a progress bar. */
.article-layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
/* Grid items default to min-width:auto, so a wide figure inside .prose would
   otherwise stretch the whole column — and the contents rail with it — past
   the viewport. This lets the column shrink and the figure scroll instead. */
.article-layout > * { min-width: 0; }
@media (min-width: 1080px) {
  .article-layout { grid-template-columns: 12rem minmax(0, 1fr); }
  .toc { position: sticky; top: 3rem; }
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin-bottom: 0.55rem; }
.toc a {
  display: block;
  font-size: 0.83rem;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  padding-left: 1.5rem;
  position: relative;
}
.toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0;
  font-family: var(--f-mono); font-size: 0.68rem; color: var(--rule);
}
.toc a:hover, .toc a.is-current { color: var(--text); }
.toc a.is-current::before { color: var(--accent); }
@media (max-width: 1079px) {
  .toc {
    border-top: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
    padding-block: 1.4rem;
  }
  /* Single column below the rail breakpoint. Multi-column here forced the
     grid wider than the viewport on narrow phones — not worth the tidiness. */
  .toc li { margin-bottom: 0.7rem; }
  .toc a { font-size: 0.88rem; }
}

/* The prose itself — serif, at reading size, on a short measure. */
.prose { max-width: 36rem; }
.prose > * { max-width: 34rem; }
.prose p {
  font-family: var(--f-display);
  font-size: clamp(1.04rem, 2.1vw, 1.14rem);
  line-height: 1.66;
  color: var(--text-2);
  margin: 0 0 1.15em;
}
.prose p strong, .prose strong { color: var(--text); font-weight: 500; }
.prose h2 {
  font-size: clamp(1.45rem, 3.6vw, 2rem);
  margin: clamp(3rem, 7vw, 4.5rem) 0 1.1rem;
  max-width: 20ch;
  scroll-margin-top: 2rem;
}
.prose h2 .n {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.prose h3 { font-size: clamp(1.1rem, 2.4vw, 1.28rem); margin: 2.2rem 0 0.6rem; }
.prose ul { margin: 0 0 1.3em; padding-left: 1.1em; }
.prose li {
  font-family: var(--f-display);
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--text-2);
  margin-bottom: 0.45em;
}
.prose li::marker { color: var(--accent); }

.prose blockquote, .pull-q {
  margin: 2.2rem 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--accent);
  font-family: var(--f-display);
  font-size: clamp(1.24rem, 3vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--text);
  max-width: 26ch;
}

/* Figures. Every diagram on this page is inline SVG: no image request,
   crisp at any size, and it recolours itself with the theme. */
.fig {
  margin: clamp(2.2rem, 5vw, 3.2rem) 0;
  max-width: none;
  width: 100%;
}
.fig .fig-inner {
  background: var(--ground-deep);
  border: 1px solid var(--rule-soft);
  padding: clamp(1rem, 3vw, 1.8rem);
  overflow-x: auto;
}
.fig svg { display: block; width: 100%; min-width: 20rem; height: auto; }
.fig figcaption {
  margin-top: 0.9rem;
  font-family: var(--f-body);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 44ch;
}
.d-line   { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.d-dim    { fill: none; stroke: var(--muted);  stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 5 5; }
.d-rule   { fill: none; stroke: var(--rule);   stroke-width: 1; }
.d-node   { fill: var(--accent); }
.d-node-o { fill: var(--ground-deep); stroke: var(--muted); stroke-width: 1.4; }
.d-box    { fill: none; stroke: var(--rule); stroke-width: 1; }
.d-box-lit{ fill: none; stroke: var(--accent); stroke-width: 1.6; }
.d-t      { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.05em; fill: var(--text-2); }
.d-t-dim  { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.05em; fill: var(--muted); }
.d-t-lit  { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.05em; fill: var(--accent); }
.d-t-sm   { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.04em; fill: var(--muted); }

/* An aside that belongs to the safety register. */
.aside-med {
  margin: 2.4rem 0;
  padding: 1.3rem 1.4rem;
  background: var(--sage-dim);
  border-left: 3px solid var(--sage);
}
.aside-med p { font-family: var(--f-body); font-size: 0.95rem; line-height: 1.6; color: var(--text-2); }
.aside-med p:last-child { margin-bottom: 0; }

/* End-of-article: one invitation, no hard sell. */
.article-end {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--rule);
  max-width: 36rem;
}


/* ---------------------------------------------------------------------------
   11. THE SAFETY REGISTER  (/medical)
   Everywhere else on the site, sage means "this is the truth about limits".
   On the medical page that IS the subject, so the page remaps the accent
   tokens to sage and inherits the whole system unchanged. One class, and the
   lamplight is reserved for the single link back into the rest of the site.
   ------------------------------------------------------------------------ */
body.sage-page, .sage-page {
  --accent:     var(--sage);
  --accent-ink: var(--sage-ink);
  --accent-dim: var(--sage-dim);
  --on-accent:  var(--on-sage);
}

/* The words to use. A page that says "I've written out what to say" has to
   actually hand them over, in a form he can lift. */
.script {
  margin: 2rem 0;
  border: 1px solid var(--rule);
  background: var(--surface);
}
.script-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule-soft);
}
.script-head .label { margin: 0; }
.script-body {
  padding: clamp(1.2rem, 3.5vw, 1.8rem);
  font-family: var(--f-display);
  font-size: clamp(1.06rem, 2.2vw, 1.2rem);
  line-height: 1.55;
  color: var(--text);
}
.script-body p { max-width: 40ch; margin-bottom: 0; }
.script-body p + p { margin-top: 0.9em; }
.copy-btn {
  appearance: none;
  background: none;
  border: 1px solid var(--rule);
  color: var(--text-2);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  min-height: 34px;
  white-space: nowrap;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.copy-btn[data-copied="true"] { border-color: var(--accent); color: var(--accent-ink); }

/* A short numbered list of things, spaced like the door bands. */
.steps { list-style: none; margin: 1.6rem 0 2rem; padding: 0; counter-reset: st; max-width: 38rem; }
.steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.2rem 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule-soft);
  margin: 0;
}
.steps li:last-child { border-bottom: 1px solid var(--rule-soft); }
.steps li::before {
  counter-increment: st;
  content: counter(st, decimal-leading-zero);
  font-family: var(--f-mono); font-size: 0.72rem; color: var(--accent);
  padding-top: 0.35rem;
}
.steps strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.14rem; color: var(--text); margin-bottom: 0.25rem; }
.steps p { font-size: 0.95rem; color: var(--text-2); margin: 0; max-width: 44ch; }


/* ---------------------------------------------------------------------------
   12. WORK WITH ME
   The conversion page. It answers the six questions men actually have, in the
   order they have them, and puts the price where he can read it alone.
   ------------------------------------------------------------------------ */
.facts {
  display: grid;
  gap: 0;
  margin: 2rem 0 0;
  max-width: 44rem;
}
@media (min-width: 720px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; } }
.facts div {
  padding: 1rem 0;
  border-top: 1px solid var(--rule-soft);
}
@media (max-width: 719px) { .facts div:last-child { border-bottom: 1px solid var(--rule-soft); } }
@media (min-width: 720px) { .facts div { border-bottom: 1px solid var(--rule-soft); } }
.facts dt {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem;
}
.facts dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.24rem;
  line-height: 1.25;
  color: var(--text);
}

/* Q&A — the six real questions. Open by default: nothing here is hidden. */
.qa { max-width: 38rem; margin-top: 1rem; }
.qa section { padding-block: clamp(1.8rem, 4vw, 2.4rem); border-top: 1px solid var(--rule-soft); }
.qa section:last-child { border-bottom: 1px solid var(--rule-soft); }
.qa h3 {
  font-size: clamp(1.24rem, 3vw, 1.5rem);
  margin: 0 0 0.9rem;
  max-width: 24ch;
}
.qa p {
  font-family: var(--f-display);
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--text-2);
  max-width: 40ch;
}

/* Where the booking tool goes. */
.booking {
  margin-top: 2rem;
  border: 1px dashed var(--rule);
  background: var(--surface);
  min-height: 16rem;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}
.booking p { font-family: var(--f-mono); font-size: 0.76rem; line-height: 1.8; color: var(--muted); max-width: 34ch; }


/* ---------------------------------------------------------------------------
   13. THE BOOK  (/the-book)
   This page is the one place the site borrows from the printed register:
   a drop cap, a section ornament, a wider leading. The prologue is the best
   sales copy on the site, so it is set to be read rather than skimmed.
   ------------------------------------------------------------------------ */
.book-layout { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.book-layout > * { min-width: 0; }
@media (min-width: 880px) {
  .book-layout { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); }
}

/* A typographic stand-in for the jacket. Replace with the real photograph
   once there is a printed proof — a book on a bedside table, lamp on. */
.cover {
  aspect-ratio: 2 / 3;
  background: var(--ground-deep);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 4vw, 2.2rem);
  position: relative;
  overflow: hidden;
}
.cover::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 22% 18%, var(--lamp), transparent 58%);
  pointer-events: none;
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover .c-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--text);
}
.cover .c-sub {
  font-family: var(--f-body);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-2);
  margin-top: 0.9rem;
  max-width: 24ch;
  text-wrap: pretty;
}
.cover .c-author {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.cover-note {
  margin-top: 0.8rem;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--muted);
}

/* The prologue, set as a book page. */
.bookread {
  border-top: 1px solid var(--rule);
  padding-top: clamp(2rem, 5vw, 3rem);
  max-width: 34rem;
}
.bookread .chap-label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.bookread h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-bottom: 1.8rem;
}
.bookread p {
  font-family: var(--f-display);
  font-size: clamp(1.06rem, 2.1vw, 1.16rem);
  line-height: 1.72;
  color: var(--text-2);
  margin: 0 0 1.1em;
  hanging-punctuation: first;
}
.bookread p em { color: var(--text); }
.bookread p strong { color: var(--text); font-weight: 500; }

/* Drop cap on the opening paragraph only. */
.bookread .opening::first-letter {
  float: left;
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.06em 0.1em 0 0;
  color: var(--accent);
  font-weight: 300;
}

/* Section break — a lamplight ornament rather than three asterisks. */
.ornament {
  display: block;
  border: 0;
  height: 1px;
  width: 5rem;
  margin: 2.4rem 0;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.6;
}

.bookread .closing {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3.2vw, 1.7rem);
  line-height: 1.25;
  color: var(--text);
  margin: 2rem 0 1.1rem;
}

/* Contents */
.contents { list-style: none; padding: 0; margin: 1.6rem 0 0; max-width: 34rem; }
.contents li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--text-2);
  margin: 0;
}
.contents li:last-child { border-bottom: 1px solid var(--rule-soft); }
.contents .no {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-top: 0.35rem;
}


/* ---------------------------------------------------------------------------
   14. FOR PARTNERS  (/for-partners)
   The only page on the site addressed to somebody other than him. It keeps
   the same register but says so plainly at the top, because a partner who
   thinks she is reading his mail will not take the advice.
   ------------------------------------------------------------------------ */
.two-lists { display: grid; gap: clamp(2rem, 5vw, 3rem); margin: 2rem 0 0; }
@media (min-width: 780px) { .two-lists { grid-template-columns: 1fr 1fr; } }
.two-lists > div { min-width: 0; }
.two-lists h3 { margin: 0 0 1.2rem; font-size: clamp(1.2rem, 2.6vw, 1.4rem); }
.two-lists ul { list-style: none; margin: 0; padding: 0; }
.two-lists li {
  padding: 0.85rem 0 0.85rem 1.5rem;
  border-top: 1px solid var(--rule-soft);
  position: relative;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}
.two-lists li:last-child { border-bottom: 1px solid var(--rule-soft); }
.two-lists li strong { display: block; color: var(--text); font-weight: 500; margin-bottom: 0.15rem; }
.two-lists li::before {
  position: absolute; left: 0; top: 0.95rem;
  font-family: var(--f-mono); font-size: 0.8rem; line-height: 1;
}
.list-helps li::before   { content: "+"; color: var(--accent); }
.list-hinders li::before { content: "\2013"; color: var(--muted); }

/* The agreement — a set of things two people can decide together. */
.agreement { list-style: none; margin: 1.8rem 0 0; padding: 0; max-width: 36rem; }
.agreement li {
  padding: 0.9rem 0 0.9rem 2rem;
  border-top: 1px solid var(--rule-soft);
  position: relative;
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 2.1vw, 1.12rem);
  line-height: 1.45;
  color: var(--text-2);
  margin: 0;
}
.agreement li:last-child { border-bottom: 1px solid var(--rule-soft); }
.agreement li::before {
  content: "";
  position: absolute; left: 0; top: 1.35rem;
  width: 10px; height: 10px;
  border: 1px solid var(--accent);
}

/* "Send him this" — the page's most useful object. */
.send {
  margin: 2rem 0 0;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
}
.send .send-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.send .send-head .label { margin: 0; color: var(--accent); }
.send .send-body {
  padding: clamp(1.2rem, 3.5vw, 1.7rem);
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 2.1vw, 1.14rem);
  line-height: 1.6;
  color: var(--text);
}
.send .send-body p { max-width: 42ch; margin-bottom: 0; }
.send .send-body p + p { margin-top: 0.85em; }