/* ==========================================================================
   index.html — chapter layouts. Mobile-first.
   ========================================================================== */

/* ---------------- 00 · hero (the brief) ----------------
   Three modes, one markup:
   base            mobile-first stack (phones, tablets)
   ≥1024px         static split: copy left, brief right (reduced motion / no JS / short screens)
   html.hero-seq   desktop scroll sequence — full-width narration on load, then scroll files the brief
                   (class set in <head> before first paint; GSAP owns the transforms) */
.hero {
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(28px, 6vh, 72px));
  padding-bottom: clamp(24px, 5vh, 56px);
}
.hero-stage { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
.hero-copy { min-width: 0; }
.hero-h {
  margin-top: 22px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.02;
  font-size: clamp(30px, 8vw, 60px); color: var(--ink); overflow-wrap: break-word;
}
.hero-close { margin-top: 26px; font-size: clamp(20px, 2.3vw, 28px); line-height: 1.35; font-weight: 300; color: var(--ink); max-width: 30ch; }
.hero-intro { margin-top: 14px; color: var(--muted); max-width: 46ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-cue { display: none; }

/* the load narration — CSS only, so the LCP headline never waits for JS */
.hero-eyebrow { animation: fadeUp 0.9s var(--ease) 0.05s both; }
.hero-h .line > span { animation: rise 1.15s var(--ease) both; }
.hero-h .line:nth-child(1) > span { animation-delay: 0.12s; }
.hero-h .line:nth-child(2) > span { animation-delay: 0.26s; }
.hero-h .line:nth-child(3) > span { animation-delay: 0.4s; }
.hero-h .line:nth-child(4) > span { animation-delay: 0.54s; }
.hero-h .w { animation: toWine 0.9s ease 1.05s both; }
@keyframes toWine { from { color: var(--ink); } to { color: var(--wine); } }
.hero-close { animation: fadeUp 1.1s var(--ease) 0.78s both; }
.hero-intro { animation: fadeUp 1.1s var(--ease) 0.95s both; }
.hero-ctas { animation: fadeUp 1.1s var(--ease) 1.08s both; }

.brief { position: relative; margin: 0 auto 36px; width: min(100%, 420px); aspect-ratio: 520 / 640; }
.brief-folder { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.brief-print {
  position: absolute; left: 12%; top: 25.5%; width: 68%;
  background: #fff; padding: 3.2% 3.2% 11%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 18px 30px -18px rgba(0, 0, 0, 0.45);
  transform: rotate(-2.4deg);
}
.brief-print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; background: #f3f1ee; }
.brief-clip { position: absolute; left: 19%; top: 17.5%; width: 7%; transform: rotate(-6deg); filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.25)); }
.brief-aside { position: absolute; left: 0; right: 0; top: calc(100% + 12px); text-align: center; font-weight: 300; font-size: 15px; color: var(--muted); }
.brief-aside span { color: var(--body); }

.stats {
  margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hair);
}
.stats > div { padding: 22px 12px 0 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; }
.stats dd { margin: 0; font-size: clamp(34px, 6vw, 72px); font-weight: 300; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats dt { margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

.hero-key { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 15px; color: var(--muted); }
.hk-rail { display: inline-flex; gap: 4px; }
.hk-rail i { width: 16px; height: 3px; border-radius: 2px; background: var(--hair); }
.hk-rail i:first-child { background: var(--wine); }

/* static split (desktop without the sequence) */
@media (min-width: 1024px) {
  .hero-stage { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.62fr); }
  .hero-h { font-size: clamp(30px, 2.95vw, 42px); }
  .hero-h .line > span { white-space: nowrap; }
  .brief { width: 100%; margin: 0 0 36px; }
  .hero-foot { grid-column: 1 / -1; }
}

/* the sequence */
@media (min-width: 1024px) {
  html.hero-seq .hero { height: 130svh; padding: 0; }
  html.hero-seq .hero-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  html.hero-seq .hero-stage { display: block; position: relative; height: 100%; }
  html.hero-seq .hero-copy {
    position: absolute; top: 0; bottom: 0; left: var(--gutter); right: var(--gutter);
    display: flex; flex-direction: column; justify-content: center;
    padding-top: var(--nav-h); padding-bottom: 72px;
  }
  html.hero-seq .hero-h {
    align-self: flex-start;
    /* four clean lines filling the content width; the longest line is ~16.4em wide */
    font-size: min(calc((min(100vw, var(--max)) - 2 * var(--gutter)) / 16.6), 104px);
    transform-origin: 0 0;
  }
  html.hero-seq .hero-h .line > span { display: inline-block; white-space: nowrap; }
  html.hero-seq .hero-tail { align-self: flex-start; }
  html.hero-seq .brief { position: absolute; right: var(--gutter); top: 18%; width: min(26vw, 370px, 40svh); margin: 0; visibility: hidden; }
  html.hero-seq .hero-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(22px, 4.5svh, 48px); visibility: hidden; }
  html.hero-seq .hero-foot .stats > div { padding-top: 16px; }
  html.hero-seq .hero-foot .stats dd { font-size: clamp(34px, 4.2vw, 60px); }
  html.hero-seq .hero-key { margin-top: 18px; }
  html.hero-seq .hero-cue { display: block; position: absolute; left: var(--gutter); bottom: clamp(22px, 4.5svh, 48px); }
  html.hero-seq .hero-cue .hc-in { display: inline-flex; gap: 10px; align-items: center; animation: fadeUp 0.9s var(--ease) 1.5s both; }
  html.hero-seq .hero-cue .hc-arr { display: inline-block; animation: nudge 2.4s ease-in-out 2.4s infinite; }
}
@keyframes nudge { 50% { transform: translateY(4px); } }

/* ---------------- 01 · discovery story ---------------- */
.story { display: grid; gap: 8px; padding-top: clamp(28px, 6vh, 64px); }
.story-plate {
  position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 10px); z-index: 2;
  background: var(--paper); padding-bottom: 10px;
}
.plate-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 16px; background: var(--sheet); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.plate { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s var(--ease); }
.plate[data-on="true"] { opacity: 1; }
.plate-frame:not([data-ready]) .plate:first-child { opacity: 1; }
.plate-cap { margin-top: 12px; }
.story-steps { display: grid; }
.story-step { min-height: 62svh; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding-block: 24px; }
.story-step p { font-size: clamp(18px, 1.9vw, 22px); line-height: 1.62; font-weight: 400; color: var(--body); max-width: 34ch; transition: color 0.6s var(--ease); }
.story-step strong { font-weight: 600; color: var(--ink); }
.js .story-step:not([data-active="true"]) p { color: var(--dim); }
.js .story-step:not([data-active="true"]) strong { color: var(--dim); }

@media (min-width: 960px) {
  .story { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .story-plate { top: calc(50svh - (min(44vw, 620px) * 0.3125) - 20px); padding: 0; background: none; }
  .story-step { min-height: 88svh; }
}

/* ---------------- 02 · architect ---------------- */
/* About · "Developer. Architect. Delivery lead." — three role columns whose lines
   converge on the standard they share. */
.arch-h { --arch-gap: clamp(12px, 3vw, 40px); display: grid; gap: 0; }
.arch-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--arch-gap); }
.arch-role { display: grid; align-content: start; justify-items: center; text-align: center; gap: 10px; min-width: 0; padding-top: 14px; border-top: 1px solid var(--hair); }
.arch-role .line { font-size: clamp(15px, 3.1vw, 34px); line-height: 1.1; text-wrap: balance; }
.arch-role .meta { font-size: 12px; letter-spacing: 0.2em; }
.arch-role .meta .mono { color: var(--wine); margin-right: 6px; font-size: 1em; letter-spacing: 0.05em; }
/* The flow: a node under each role, curves converging on the label (paths are drawn by the
   inline script in about.html; margins put the ends under the outer columns' centres). */
.arch-flow { position: relative; display: block; height: clamp(44px, 6vw, 72px); margin: clamp(14px, 2vw, 22px) calc((100% - 2 * var(--arch-gap)) / 6) 0; }
.arch-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.af-line { fill: none; stroke: var(--wine); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease) 0.35s; }
.af-line:nth-child(2) { transition-delay: 0.2s; }
.af-node { fill: var(--paper); stroke: var(--wine); stroke-width: 1.5; }
.af-pulse { fill: var(--wine); opacity: 0; }
.flow-in .af-line { stroke-dashoffset: 0; }
.flow-in .af-pulse { opacity: 0.85; transition: opacity 0.6s ease 1.8s; }
@media (prefers-reduced-motion: reduce) {
  .af-line { stroke-dashoffset: 0; transition: none; }
  .af-pulse { display: none; }
}
.arch-std { display: grid; justify-items: center; text-align: center; gap: clamp(12px, 1.6vw, 18px); }
@media (max-width: 520px) { .arch-h { --arch-gap: 8px; } .arch-role .meta { letter-spacing: 0.14em; } }
/* "One standard": the label the three lines converge on */
.arch-std .meta {
  color: var(--wine); font-size: clamp(12px, 1.3vw, 15px); letter-spacing: 0.26em;
  padding: 0.75em 1.2em 0.65em 1.46em; border: 1.5px solid var(--wine); background: var(--wine-wash);
}
.arch-std .line { font-size: clamp(30px, 6.4vw, 72px); line-height: 1.02; }
.arch-copy { display: grid; gap: 28px; padding-top: clamp(28px, 5vh, 56px); }
.arch-copy .lede { max-width: 34ch; font-size: clamp(22px, 2.8vw, 34px); line-height: 1.35; color: var(--ink); }
.arch-cols { display: grid; gap: 22px; }
.arch-cols p { color: var(--body); max-width: 60ch; }
@media (min-width: 900px) { .arch-cols { grid-template-columns: 1fr 1fr; gap: 48px; } }

.facets-head { padding-top: clamp(40px, 7vh, 80px); }
.facets { display: grid; gap: 22px; padding-block: 24px 0; }
.quote-tight { padding-block: clamp(56px, 9vh, 100px) clamp(8px, 2vh, 20px); }
.facet {
  display: grid; gap: 26px; align-items: center;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(22px, 4vw, 56px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 30px 60px -40px rgba(0, 0, 0, 0.35);
  transform-origin: 50% 0;
}
.facet-text { display: grid; gap: 14px; align-content: center; }
.facet-h { font-size: clamp(28px, 4.2vw, 52px); }
.facet-text > p:not(.meta) { max-width: 44ch; }
.facet-q { font-size: clamp(19px, 2vw, 24px); line-height: 1.35; font-weight: 600; color: var(--ink); }
.facet-art { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--paper-2); box-shadow: 0 0 0 1px var(--hair-2); }
.facet-art svg { width: 100%; height: 100%; }
@media (min-width: 760px) {
  .facet { position: sticky; top: calc(var(--nav-h) + 28px); min-height: min(74svh, 620px); grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); }
  .facet:nth-child(2) { top: calc(var(--nav-h) + 44px); }
  .facet:nth-child(3) { top: calc(var(--nav-h) + 60px); }
  .facet:nth-child(4) { top: calc(var(--nav-h) + 76px); }
}

/* ---------------- 03 · build — the desk (signature) ---------------- */
.build-title .lede { max-width: 44ch; }
.build-quote { margin: 0; padding-block: clamp(56px, 10vh, 120px) clamp(8px, 3vh, 28px); }

/* after the lid closes: the thesis, still at night — the bug gets fixed, the systems keep running */
.thesis { background: var(--night); color: var(--night-muted); position: relative; }
.thesis-pin { padding-block: clamp(90px, 14vh, 160px); }
.thesis-grid { display: grid; gap: clamp(44px, 7vw, 96px); align-items: center; }
.thesis-copy { margin: 0; display: grid; gap: 24px; min-width: 0; }
.thesis-eyebrow { color: var(--night-muted); }
.thesis-q { margin: 0; font-weight: 300; color: var(--night-ink); font-size: clamp(28px, 7.4vw, 50px); line-height: 1.16; letter-spacing: -0.005em; }
.tq-line { display: block; }
.tw { display: inline-block; }
.tw-target { position: relative; white-space: nowrap; }
.tin { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.tin-txt { display: inline-block; }
.tin-strike { position: absolute; left: -2%; right: -2%; top: 54%; height: 0.06em; min-height: 2px; background: #d98aa6; transform: scaleX(0); transform-origin: 0 50%; }
.squig { position: absolute; left: 0; right: 0; bottom: -0.16em; width: 100%; height: 0.2em; overflow: visible; opacity: 0; }
.squig path { fill: none; stroke: #e06b8e; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.tw-final { position: relative; white-space: nowrap; font-weight: 600; transition: color 0.6s var(--ease); }
.thesis[data-fixed="true"] .tw-final { color: #d98aa6; }
/* no JS or reduced motion: show the fixed sentence, never 'made me indispensable' */
html:not(.js) .tw-final, .thesis[data-static] .tw-final { color: #d98aa6; }
html:not(.js) .tin, .thesis[data-static] .tin { display: none; }

.agent-log {
  background: var(--night-2); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px;
  padding: 18px 20px 14px; font-family: var(--mono); font-size: 12.5px; color: #a39d93;
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9); min-width: 0;
}
.lg-head, .lg-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.lg-head { padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.lg-live { display: inline-flex; align-items: center; gap: 8px; color: var(--night-ink); letter-spacing: 0.04em; }
.lg-live i { width: 7px; height: 7px; border-radius: 50%; background: #6fcf8f; box-shadow: 0 0 0 0 rgba(111, 207, 143, 0.5); animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(111, 207, 143, 0.45); } 80%, 100% { box-shadow: 0 0 0 8px rgba(111, 207, 143, 0); } }
.lg-count b { color: var(--night-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-list { position: relative; height: calc(5 * 34px); overflow: hidden; margin: 6px 0; display: flex; flex-direction: column; justify-content: flex-end; }
.lg-list li { flex: none; }
.lg-list li {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center;
  height: 34px; border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease);
}
.lg-list li.is-new { animation: logIn 0.8s var(--ease) both; }
@keyframes logIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lg-list li.is-new .lg-m { color: var(--night-ink); }
.lg-a { color: #d98aa6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 1.6s ease; }
.lg-t { font-size: 12px; color: #cfc8bc; background: rgba(255, 255, 255, 0.06); padding: 3px 8px; border-radius: 100px; white-space: nowrap; }
.lg-foot { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 12px; }
.lg-foot span { display: inline-flex; align-items: center; gap: 8px; }
.lg-off { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #6b6f78; }

@media (max-width: 520px) {
  .lg-list li { grid-template-columns: 1fr auto; }
  .lg-a { display: none; }
}
@media (min-width: 1000px) {
  /* v6: the thesis is no longer pinned — it plays once when centred */
  .thesis-pin { padding-block: clamp(120px, 18vh, 200px); }
  .thesis-pin > .wrap { width: 100%; }
  .thesis-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr); gap: clamp(48px, 5vw, 72px); }
  .thesis-q { font-size: clamp(34px, 3.75vw, 54px); }
  .agent-log { font-size: 13px; padding: 20px 22px 16px; }
  .lg-list { height: calc(5 * 38px); }
  .lg-list li { height: 38px; }
  .tq-line { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-live i { animation: none; }
}
.desk { position: relative; height: 380svh; margin-top: clamp(40px, 8vh, 96px); }
.desk-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #d8c09a; }
.desk-scene { position: absolute; inset: 0; }
.desk-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.desk-wood, .desk-static { transform: translateZ(0); }

.desk-captions { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(420px, 34vw); display: grid; }
.cap {
  grid-area: 1 / 1; align-self: center;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; padding: 26px 28px 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 30px 70px -30px rgba(0, 0, 0, 0.5);
  display: grid; gap: 10px;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.22s ease-out, transform 0.3s ease-out, visibility 0s linear 0.22s;
}
.cap[data-on="true"] { opacity: 1; visibility: visible; transform: none; transition: opacity 0.55s var(--ease) 0.24s, transform 0.8s var(--ease) 0.24s, visibility 0s linear 0s; }
.no-js .cap:first-child, .cap:first-child:not([data-ready]) { }
.cap-n { color: var(--wine); }
.cap p:not(.meta):not(.replaced) { color: var(--body); font-size: 16px; line-height: 1.6; }
.replaced { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--hair); display: grid; gap: 4px; font-size: 15px; color: var(--muted); }
.replaced { display: block; }
.replaced .meta { display: block; margin-bottom: 4px; }
.replaced .pen { color: var(--muted); }
.cap-final { background: rgba(17, 21, 29, 0.72); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cap-final .cap-n { color: #d98aa6; }
.cap-final-h { color: var(--night-ink); font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; line-height: 1.3; }

.desk-ticks { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; gap: 6px; }
.desk-ticks i { width: 26px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, 0.18); overflow: hidden; position: relative; }
.desk-ticks i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.desk[data-night="true"] .desk-ticks i { background: rgba(255, 255, 255, 0.18); }
.desk[data-night="true"] .desk-ticks i::after { background: var(--night-ink); }

/* no-JS: captions stack readable below the scene */
html:not(.js) .desk { height: auto; }
html:not(.js) .desk-stage { position: relative; height: auto; overflow: visible; background: var(--paper); }
html:not(.js) .desk-scene { position: relative; height: 70svh; }
html:not(.js) .desk-captions { position: static; transform: none; width: auto; padding: 24px var(--gutter); gap: 16px; }
html:not(.js) .cap { grid-area: auto; opacity: 1; visibility: visible; transform: none; }

@media (max-width: 899px) {
  .desk { height: 560svh; }
  .desk-scene { inset: 0 0 auto 0; height: 64svh; }
  .desk-stage { background: var(--paper); }
  .desk-captions { left: 12px; right: 12px; top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: none; width: auto; }
  .cap { padding: 18px 18px 16px; gap: 6px; }
  .cap .h3 { font-size: 18px; }
  .cap p:not(.meta):not(.replaced) { font-size: 14.5px; line-height: 1.5; }
  .replaced { font-size: 13.5px; padding-top: 8px; margin-top: 2px; }
  .desk-ticks { top: calc(64svh - 18px); bottom: auto; }
  .desk[data-night="true"] .desk-stage { background: var(--night); }
}

/* ---------------- 04 · validate ---------------- */
.cases { padding-top: clamp(40px, 7vh, 80px); display: grid; }
.case { border-top: 1px solid var(--hair); }
.case:last-of-type { border-bottom: 1px solid var(--hair); }
.case summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 44px; gap: 8px 20px; align-items: center;
  padding-block: 26px; min-height: 44px;
}
.case summary::-webkit-details-marker { display: none; }
.case-tab { grid-column: 1 / -1; color: var(--wine); }
.case-t { display: grid; gap: 6px; }
.case-t .h3 { font-size: clamp(24px, 3.4vw, 38px); text-transform: uppercase; letter-spacing: 0.01em; }
.case-sub { color: var(--muted); }
.case-plus { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair); position: relative; transition: background var(--d-fast), transform var(--d-base) var(--ease); }
.case-plus::before, .case-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.case-plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--d-base) var(--ease); }
.case[open] .case-plus { background: var(--ink); }
.case[open] .case-plus::before, .case[open] .case-plus::after { background: #fff; }
.case[open] .case-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.case summary:hover .case-plus { transform: rotate(90deg); }
.case-body { display: grid; gap: 22px; padding: 4px 0 34px; }
.case-body .meta { margin-bottom: 8px; color: var(--ink); }
.case-story { display: block; padding-bottom: 20px; border-bottom: 1px dashed var(--hair); font-size: clamp(19px, 2vw, 23px); line-height: 1.45; font-weight: 300; color: var(--ink); max-width: 52ch; }
.case-story .meta { display: block; margin: 0 0 8px; color: var(--wine); }
.case-body p:not(.meta) { max-width: 52ch; }
.case-stack { color: var(--muted); padding-top: 14px; border-top: 1px dashed var(--hair); }
.minis { display: grid; gap: 14px; margin-top: 40px; }
.mini { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; display: grid; gap: 8px; }
.mini p:not(.meta) { color: var(--body); font-size: 15.5px; }
@media (min-width: 800px) {
  .case summary { grid-template-columns: 120px 1fr 44px; }
  .case-tab { grid-column: auto; }
  .case-body { grid-template-columns: 120px repeat(3, minmax(0, 1fr)); gap: 28px; }
  .case-body > div:first-of-type { grid-column: 2; }
  .case-story { grid-column: 2 / -1; max-width: 60ch; }
  .case-stack { grid-column: 2 / -1; }
  .minis { grid-template-columns: 1fr 1fr; }
}

.stories { margin-top: clamp(80px, 14vh, 150px); padding-block: clamp(56px, 9vh, 96px); display: grid; gap: 26px; }
.story-cards { display: grid; gap: 18px; }
.card-note {
  position: relative; padding: 34px 24px 26px; min-height: 220px; border-radius: 4px;
  background:
    linear-gradient(transparent 29px, rgba(122, 32, 64, 0.25) 29px, rgba(122, 32, 64, 0.25) 30px, transparent 30px) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(transparent 0 25px, rgba(80, 110, 150, 0.16) 25px 26px) 0 30px / 100% calc(100% - 30px) no-repeat,
    #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 22px 40px -26px rgba(0, 0, 0, 0.35);
}
.card-note .no { position: absolute; top: 8px; right: 14px; color: var(--muted); font-size: 12px; }
.card-note p { font-size: 17px; line-height: 26px; color: var(--ink); margin-top: 6px; }
.card-note:nth-child(odd) { transform: rotate(-0.8deg); }
.card-note:nth-child(even) { transform: rotate(0.7deg); }
@media (min-width: 700px) { .story-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .story-cards { grid-template-columns: repeat(4, 1fr); } }

.artifacts { padding-block: clamp(64px, 10vh, 110px); }
.art-head { display: grid; gap: 22px; }
.art-phases { display: grid; gap: 34px 28px; margin-top: clamp(40px, 7vh, 72px); }
.art-ph { margin-bottom: 14px; color: var(--ink); }
.art-ph b { color: var(--wine); font-weight: 600; margin-right: 6px; }
.art-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.doc { all: unset; cursor: zoom-in; display: grid; gap: 6px; align-content: start; }
.doc img { width: 100%; height: auto; border-radius: 6px; transition: transform var(--d-base) var(--ease), filter var(--d-base); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.14)); }
.doc:hover img, .doc:focus-visible img { transform: translateY(-4px) rotate(-0.6deg); }
.doc:focus-visible { outline: 2px solid var(--wine); outline-offset: 4px; border-radius: 6px; }
.doc-t { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.doc-n { font-size: 12px; color: var(--muted); line-height: 1.3; }
@media (min-width: 700px) { .art-phases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .art-phases { grid-template-columns: repeat(3, 1fr); } }

.roster-cta { padding-block: clamp(80px, 12vh, 140px); display: grid; gap: 18px; }
.roster-btn {
  all: unset; cursor: pointer; font-size: clamp(24px, 3.6vw, 44px); font-weight: 300; line-height: 1.2; color: var(--ink);
  border-bottom: 1px solid var(--hair); padding-bottom: 18px; max-width: 26ch;
}
.roster-btn:hover .w, .roster-btn:focus-visible .w { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.roster-btn:focus-visible { outline: 2px solid var(--wine); outline-offset: 6px; }
.roster-note { margin: 12px 0 28px; color: var(--muted); }
.roster-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.roster-grid h3 { margin-bottom: 10px; color: var(--wine); }
.roster-grid li { font-size: 17px; padding: 5px 0; border-bottom: 1px solid var(--hair); color: var(--ink); }
.modal-doc { width: min(680px, calc(100vw - 32px)); }
/* The document fits the dialog whole (dialog height − padding − eyebrow and title), so an
   artifact opens with no scrollbar. */
.modal-doc img { width: 100%; height: auto; max-height: calc(min(86svh, 900px) - 2 * clamp(24px, 5vw, 48px) - 84px); object-fit: contain; }

/* ---------------- 05 · handover ---------------- */
.ledger { display: grid; gap: 40px; padding-top: clamp(40px, 7vh, 80px); }
.ledger-rows { display: grid; }
.svc { border-top: 1px solid var(--hair); padding-block: 34px 40px; display: grid; gap: 14px; }
.svc:last-child { border-bottom: 1px solid var(--hair); }
.svc-n { color: var(--muted); }
.svc-n b { color: var(--wine); font-weight: 600; }
.svc-t { font-size: clamp(24px, 3.2vw, 36px); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.1; transition: color var(--d-base) var(--ease); }
.svc-pitch { font-size: clamp(17px, 1.8vw, 20px); font-weight: 300; line-height: 1.55; max-width: 48ch; color: var(--ink); }
.svc-list { display: grid; gap: 8px; margin-top: 6px; }
.svc-list li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; max-width: 60ch; }
.svc-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: var(--wine); }
.svc-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin: 10px 0 0; padding-top: 16px; border-top: 1px dashed var(--hair); }
.svc-terms dt { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.svc-terms dd { margin: 4px 0 0; font-size: 15px; color: var(--ink); }
.ledger-preview { display: none; }
@media (min-width: 1000px) {
  .ledger { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .ledger-preview { display: block; position: sticky; top: calc(var(--nav-h) + 48px); }
  .lp-frame { position: relative; aspect-ratio: 600 / 780; max-height: calc(100svh - var(--nav-h) - 120px); margin-inline: auto; background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px; }
  .lp-frame img { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; opacity: 0; transform: translateY(18px) rotate(1deg); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.2)); }
  .lp-frame img[data-on="true"] { opacity: 1; transform: none; }
  .lp-cap { text-align: center; margin-top: 14px; }
  .js .svc:not([data-active="true"]) .svc-t { color: var(--dim); }
}

.process { padding-top: clamp(90px, 14vh, 160px); display: grid; gap: 22px; }
.gates-line { display: grid; gap: 0; margin-top: 26px; position: relative; }
.gates-line li { position: relative; padding: 0 0 30px 34px; display: grid; gap: 6px; }
.gates-line li::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: -8px; width: 1px; background: var(--hair); }
.gates-line li:last-child::before { display: none; }
.g-post { position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); }
.gates-line .meta b { color: var(--wine); font-weight: 600; }
.gates-line p:not(.meta) { font-size: 15px; color: var(--body); max-width: 30ch; }
@media (min-width: 1000px) {
  .gates-line { grid-template-columns: repeat(6, 1fr); gap: 20px; border-top: 1px solid var(--hair); padding-top: 0; }
  .gates-line li { padding: 38px 0 0; }
  .gates-line li::before { display: none; }
  .g-post { left: 0; top: -14px; width: 2px; height: 28px; border: 0; border-radius: 1px; background: var(--ink); }
}

.hire { padding-top: clamp(40px, 6vh, 80px); display: grid; gap: 22px; }
.options { display: grid; gap: 16px; margin-top: 26px; }
.opt { background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.opt p:not(.meta) { color: var(--body); font-size: 15.5px; }
.opt .btn { margin-top: auto; align-self: flex-start; }
.opt-call { background: var(--ink); color: var(--night-muted); padding: 0; overflow: hidden; border-color: var(--ink); }
.opt-call .h3 { color: var(--night-ink); }
.opt-call p:not(.meta) { color: #cfc8bc; }
.opt-call .meta { color: #a39d93; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.opt-call .pill.hot { background: rgba(217, 138, 166, 0.16); color: #e7a5bd; }
.opt-call .btn-primary { background: var(--night-ink); color: var(--ink); }
.opt-call .btn-primary:hover { background: #fff; color: var(--wine); }
.opt-photo { aspect-ratio: 16 / 10; overflow: hidden; }
.opt-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.opt-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
@media (min-width: 1000px) {
  .options { grid-template-columns: 1fr 1fr 1.15fr; align-items: stretch; }
}

.email-row { display: grid; gap: 14px; justify-items: start; padding-top: clamp(60px, 10vh, 110px); }
.email { font-size: clamp(30px, 7vw, 88px); font-weight: 300; line-height: 1.05; color: var(--ink); overflow-wrap: anywhere; letter-spacing: -0.01em; transition: color var(--d-fast); }
.email:hover { color: var(--wine); }

.faq { padding-block: clamp(60px, 10vh, 110px) clamp(90px, 14vh, 160px); display: grid; gap: 18px; }
.faq-list details { border-top: 1px solid var(--hair); }
.faq-list details:last-child { border-bottom: 1px solid var(--hair); }
.faq-list summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-size: clamp(17px, 1.8vw, 20px); font-weight: 600; color: var(--ink); min-height: 44px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 26px; font-weight: 300; color: var(--wine); transition: transform var(--d-base) var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 22px; max-width: 62ch; color: var(--body); }
@media (min-width: 1000px) { .faq { grid-template-columns: 280px 1fr; gap: 40px; } }

/* ---------------- 06 · AMC (night) ---------------- */
.night { background: var(--night); color: var(--night-muted); }
.night h1, .night h2, .night h3, .night .h2, .night .h3, .night .display { color: var(--night-ink); }
.night .w { color: #d98aa6; }
.night .eyebrow, .night .meta { color: var(--night-muted); }
.night .gate { border-top-color: rgba(255, 255, 255, 0.12); color: var(--night-muted); }
.night .gate .ph { color: var(--night-ink); }
.night .gate .ph b, .night .gate .st .locked, .night .gate .st .ico-lock { color: #d98aa6; }
.night .gate .bar { background: rgba(255, 255, 255, 0.12); }
.night .lede { color: #d9d2c6; }
.night .muted { color: var(--night-muted); }
.night .link { color: var(--night-ink); }
.night .pill { background: rgba(255, 255, 255, 0.08); color: #d9d2c6; }
.night .pill.hot { background: rgba(217, 138, 166, 0.14); color: #e7a5bd; }
.night .pill.ok { background: rgba(111, 207, 143, 0.12); color: #8fd6a7; }
.night .pill .dot { display: none; }
@keyframes pulse { 50% { opacity: 0.35; } }

.now-title { display: grid; gap: 36px; align-items: center; }
.night-desk { border-radius: 18px; overflow: hidden; aspect-ratio: 13 / 10; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.8); }
.night-desk svg { width: 100%; height: 100%; }
.night-desk .led-n { opacity: 0.8; } /* v6: no endless pulse */
@media (min-width: 960px) { .now-title { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.now { padding-top: clamp(40px, 7vh, 80px); display: grid; gap: clamp(64px, 10vh, 120px); }
.log { width: 100%; border-collapse: collapse; }
.log thead th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--night-muted); padding: 0 12px 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.log tbody th { text-align: left; font-weight: 600; color: var(--night-ink); font-size: 18px; padding: 20px 16px 20px 0; vertical-align: top; }
.log td { padding: 20px 16px 20px 0; vertical-align: top; color: #cfc8bc; font-size: 15.5px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.log tbody th { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.log td:last-child { text-align: right; padding-right: 0; }
@media (max-width: 759px) {
  .log thead { display: none; }
  .log, .log tbody, .log tr { display: block; }
  .log tr { padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: grid; gap: 6px; }
  .log tbody th, .log td { padding: 0; border: 0; text-align: left !important; }
}

.listen { display: grid; gap: 22px; }
.listen ul { display: grid; gap: 24px; }
.listen li { display: grid; gap: 8px; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 20px; }
.listen li p { color: #cfc8bc; font-size: 15.5px; }
@media (min-width: 900px) { .listen ul { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.big-q { margin: 0; display: grid; gap: 22px; }
.big-q blockquote { margin: 0; font-size: clamp(28px, 4.6vw, 58px); line-height: 1.16; font-weight: 300; color: var(--night-ink); max-width: 24ch; }
.big-q figcaption { font-size: clamp(17px, 1.8vw, 21px); font-weight: 300; color: #cfc8bc; max-width: 46ch; }
.updated { margin-top: 8px; }
.bigq-wrap { padding-block: clamp(90px, 14vh, 170px); border-top: 1px solid rgba(255, 255, 255, 0.08); }

.cv { padding-block: clamp(100px, 16vh, 180px) clamp(70px, 10vh, 120px); border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: clamp(80px, 12vh, 140px); }
.cv-head { display: grid; gap: 30px; align-items: end; }
.cv-name { margin-top: 18px; margin-bottom: 20px; }
.cv-dl { display: grid; gap: 18px; justify-items: start; }
.cv-strip { font-size: clamp(20px, 2.2vw, 26px); font-weight: 300; color: var(--night-ink); }
@media (min-width: 960px) { .cv-head { grid-template-columns: 1.4fr 0.6fr; } }
.roles { display: grid; margin-top: clamp(50px, 8vh, 90px); }
.role { display: grid; gap: 14px; padding-block: 32px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.role-y { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.role ul { display: grid; gap: 8px; }
.role li { position: relative; padding-left: 22px; color: #cfc8bc; font-size: 15.5px; max-width: 70ch; }
.role li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1px; background: #d98aa6; }
@media (min-width: 900px) {
  .role { grid-template-columns: 260px 1fr; column-gap: 40px; }
  .role-y { grid-row: span 2; align-self: start; flex-direction: column; align-items: flex-start; }
}
.skills { display: grid; gap: 30px; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.skills h3 { margin-bottom: 14px; color: #d98aa6; }
.skills li { color: #cfc8bc; font-size: 15px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
@media (min-width: 900px) { .skills { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.cv-close { margin-top: 40px; color: #cfc8bc; }

.foot { border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* =============================================================================
   Split pages (2026-09-21): the home page's new blocks.
   intro · How I work (a quiet track, no scroll-scrub) · services at a glance · hire.
   Sub-pages reuse the chapter styles above unchanged.
   ========================================================================== */

/* ---------- intro (short about) ---------- */
.intro { padding-top: clamp(96px, 16vh, 180px); }
.intro-grid { display: grid; gap: 28px; }
.intro-copy { display: grid; gap: 18px; max-width: 58ch; }
.intro-copy p:not(.lede) { font-size: 16px; line-height: 1.75; color: var(--body); }
@media (min-width: 960px) {
  .intro-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: end; }
}

/* ---------- How I work ---------- */
.hiw { padding-top: clamp(56px, 9vh, 104px); }
/* the horizon that closes the bio chapter (index.html): faint ranges + the little house */
.horizon {
  position: relative; height: clamp(56px, 7.5vw, 112px); margin-top: clamp(64px, 11vh, 128px); overflow: hidden;
  /* the ranges dissolve into the page instead of ending on a line */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent);
}
.hz-back, .hz-front { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.hz-back { fill: #eef2ec; will-change: transform; }
.hz-front { fill: #e3eadf; }
.hz-house { position: absolute; left: 70%; bottom: 30%; width: clamp(24px, 2.2vw, 34px); height: auto; }
.hiw-head { display: grid; gap: 22px; max-width: 820px; }
.hiw-track { list-style: none; margin: clamp(48px, 7vh, 72px) 0 0; padding: 0 0 0 34px; position: relative; display: grid; gap: 34px; }
/* the rail: grey base + wine progress that draws once when the track comes into view */
.hiw-track::before, .hiw-track::after {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line);
}
.hiw-track::after { background: var(--wine); transform-origin: 50% 0; transform: scaleY(0); transition: transform 1.8s var(--ease); }
.hiw-track.in::after { transform: scaleY(1); }
.hiw-step { position: relative; display: grid; gap: 8px; align-content: start; }
.hiw-node {
  position: absolute; left: -35.5px; top: -0.5px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--paper);
  z-index: 1; /* above the rail, which is drawn by the track's pseudo-elements */
}
.hiw-n { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; color: var(--wine); }
.hiw-name { font-size: clamp(21px, 2vw, 24px); font-weight: 600; line-height: 1.2; color: var(--ink); }
.hiw-what { font-size: 15px; line-height: 1.65; color: var(--body); max-width: 32ch; }
.hiw-out { list-style: none; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid var(--hair-2); display: grid; gap: 6px; }
.hiw-out li { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hiw-out li::before { content: "↳ "; color: var(--wine); letter-spacing: 0; }
.hiw-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--wine); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }

.hiw-step--live .hiw-node { background: var(--wine); border-color: var(--wine); }
.hiw-foot { margin-top: clamp(56px, 8vh, 88px); display: grid; gap: 22px; justify-items: start; }
.hiw-quote { margin: 0; font-size: clamp(20px, 2.4vw, 28px); font-weight: 300; line-height: 1.4; color: var(--ink); max-width: 34ch; }

@media (min-width: 1024px) {
  .hiw-track { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; padding: 42px 0 0; }
  .hiw-track::before, .hiw-track::after { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 1px; }
  .hiw-track::after { transform-origin: 0 50%; transform: scaleX(0); }
  .hiw-track.in::after { transform: scaleX(1); }
  .hiw-node { left: -1.5px; top: -43.5px; }
}

/* entrance: nodes pop in along the rail, then each phase's text settles. Only when JS runs
   and motion is allowed — otherwise everything is simply there. */
@media (prefers-reduced-motion: no-preference) {
  .js .hiw-track .hiw-node { transform: scale(0.3); opacity: 0; transition: transform 0.6s var(--ease), opacity 0.4s; transition-delay: calc(var(--i) * 0.22s + 0.15s); }
  .js .hiw-track .hiw-step > :not(.hiw-node) { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i) * 0.22s + 0.3s); }
  .js .hiw-track.in .hiw-node { transform: none; opacity: 1; }
  .js .hiw-track.in .hiw-step > :not(.hiw-node) { opacity: 1; transform: none; }
  /* v6: no looping "live" ring — AMC is simply the filled node; the pen ticks it like the rest */
}
@keyframes hiw-ring { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes hiw-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---------- services at a glance ---------- */
.glance { padding-top: clamp(96px, 16vh, 180px); }
.glance-head { display: grid; gap: 22px; max-width: 760px; }
.glance-grid { list-style: none; margin: clamp(40px, 6vh, 64px) 0 0; padding: 0; display: grid; gap: 16px; }
.glance-grid a {
  position: relative; display: grid; gap: 12px; align-content: start; height: 100%;
  padding: 26px 26px 56px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform var(--d-fast) var(--ease), border-color var(--d-fast);
}
.glance-grid a:hover, .glance-grid a:focus-visible { transform: translateY(-3px); border-color: var(--ink); }
.glance-grid p:not(.meta) { font-size: 15px; line-height: 1.6; color: var(--body); }
.glance-go { position: absolute; left: 26px; bottom: 20px; color: var(--wine); font-weight: 600; transition: transform var(--d-fast) var(--ease); }
.glance-grid a:hover .glance-go { transform: translateX(4px); }
.glance-more { margin-top: 28px; }
@media (min-width: 720px) { .glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .glance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- hire (home) + sub-page tweaks ---------- */
.hire-home { padding-bottom: clamp(80px, 12vh, 140px); }
.foot-links { line-height: 2; }
.cv-page { padding-top: calc(var(--nav-h) + clamp(24px, 6vh, 64px)); padding-bottom: clamp(40px, 6vh, 80px); }
/* On its own page the CV no longer follows the Now section: no divider or lead-in gap. */
.cv-page .cv { margin-top: 0; border-top: 0; padding-top: clamp(24px, 6vh, 64px); }

/* Pages that open on night (CV, Now): the transparent header needs the light palette until
   it turns white on scroll. */
.page-night { background: var(--night); }
.page-night .nav[data-scrolled="false"] .wordmark { color: var(--night-ink); }
.page-night .nav[data-scrolled="false"] .nav-links a:not(.btn) { color: var(--night-muted); }
.page-night .nav[data-scrolled="false"] .nav-links a:not(.btn):hover,
.page-night .nav[data-scrolled="false"] .nav-links a[aria-current="page"] { color: var(--night-ink); }
.page-night .nav[data-scrolled="false"] .btn-primary { background: var(--night-ink); color: var(--night); }
.page-night .nav[data-scrolled="false"] .btn-primary:hover { background: #fff; color: var(--wine); }
.bigq-sec { padding-top: clamp(24px, 4vh, 48px); padding-bottom: clamp(24px, 4vh, 48px); margin-top: clamp(80px, 12vh, 140px); }

/* ---------- intro: the little hill station ---------- */
.intro-art { display: block; width: min(100%, 300px); height: auto; margin-bottom: 26px; border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 36px -26px rgba(53,70,58,.45); }
@media (prefers-reduced-motion: no-preference) {
  .intro-art .ia-cloud { animation: ia-drift 26s ease-in-out infinite alternate; }
  .intro-art .ia-bird { animation: ia-glide 22s ease-in-out infinite; }
}
@keyframes ia-drift { from { transform: translateX(-8px); } to { transform: translateX(12px); } }
@keyframes ia-glide {
  0%   { transform: translate(-40px, 6px); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translate(40px, -8px); }
  88%  { opacity: 1; }
  100% { transform: translate(120px, 2px); opacity: 0; }
}

/* Work · "Good delivery is 80% deciding, 20% doing." drawn to scale. The segments are 4fr
   and 1fr, the numbers sized like the split, and on arrival deciding fills slowly while
   doing snaps in after it (inline script in work.html). */
.q8020 blockquote { max-width: none; display: grid; gap: clamp(18px, 3vw, 34px); }
.q8020-lead { display: block; font-weight: 300; }
.q8020-bar { display: grid; grid-template-columns: 4fr 1fr; column-gap: 6px; align-items: end; }
.q8020-seg { display: grid; grid-template-rows: auto auto auto auto; align-content: end; min-width: 0; }
.q8020-num { display: block; font-weight: 600; line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.q8020-dec .q8020-num { color: var(--wine); font-size: clamp(56px, 13vw, 168px); }
.q8020-do .q8020-num { color: var(--ink); font-size: clamp(26px, 4.4vw, 58px); }
.q8020-word { display: block; margin: 0.35em 0 0.7em; font-size: clamp(15px, 1.9vw, 24px); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.q8020-dec .q8020-word { color: var(--wine); }
.q8020-track { display: block; height: clamp(10px, 1.3vw, 16px); background: var(--paper-2); overflow: hidden; }
.q8020-fill { display: block; height: 100%; transform-origin: left center; }
.q8020-dec .q8020-fill { background: var(--wine); }
.q8020-do .q8020-fill { background: var(--ink); }
.q8020-ticks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 10px; }
.q8020-ticks > span {
  position: relative; padding: 12px 6px 0; text-align: center;
  font-family: var(--mono); font-size: clamp(10px, 1vw, 12px); line-height: 1.3; letter-spacing: 0; color: var(--muted); font-weight: 400;
}
.q8020-ticks > span::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 8px; background: currentColor; opacity: 0.6; }
.q8020-do .q8020-ticks > span { color: var(--ink); }
.q8020 figcaption { margin-top: clamp(22px, 3vw, 34px); }
.q8020 figcaption a { color: var(--wine); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
/* motion: armed (JS on, motion allowed); the script scales the fills and counts */
.q8020.is-armed .q8020-fill { transform: scaleX(0); }
.q8020.is-armed .q8020-ticks > span, .q8020.is-armed .q8020-do .q8020-num, .q8020.is-armed .q8020-do .q8020-word { opacity: 0; }
.q8020.is-in .q8020-dec .q8020-ticks > span { opacity: 1; transition: opacity 0.5s ease; }
.q8020.is-in .q8020-dec .q8020-ticks > span:nth-child(1) { transition-delay: 0.6s; }
.q8020.is-in .q8020-dec .q8020-ticks > span:nth-child(2) { transition-delay: 1.15s; }
.q8020.is-in .q8020-dec .q8020-ticks > span:nth-child(3) { transition-delay: 1.7s; }
.q8020.is-in .q8020-dec .q8020-ticks > span:nth-child(4) { transition-delay: 2.25s; }
.q8020 .q8020-do.is-go :is(.q8020-num, .q8020-word, .q8020-ticks > span) { opacity: 1; transition: opacity 0.25s ease; }
@media (max-width: 560px) {
  .q8020-bar { column-gap: 4px; }
  .q8020-ticks > span { padding-inline: 2px; font-size: 12px; }
  .q8020-word { letter-spacing: 0.12em; }
}

/* Home · "while I sleep" circled in pen, with a small moon doodle (index.html) */
.pen-mark { position: relative; display: inline-block; }
.pen-loop { position: absolute; left: -0.32em; top: -0.12em; width: calc(100% + 0.62em); max-width: none; height: calc(100% + 0.34em); overflow: visible; pointer-events: none; }
.pen-moon { position: absolute; right: -0.62em; top: -0.34em; width: 0.56em; height: 0.56em; overflow: visible; transform: rotate(-14deg); pointer-events: none; }
/* No vector-effect here: with it, Chrome measures the dash in screen space and the draw-in stops short.
   The loop's viewBox matches the phrase's proportions instead, so the pen stays even. */
.pen-loop path, .pen-moon path { fill: none; stroke: var(--wine); stroke-linecap: round; stroke-linejoin: round; }
.pen-loop path { stroke-width: 1.1; }
.pen-moon path { stroke-width: 1.9; }
.pen-mark.is-armed :is(.pen-loop, .pen-moon) path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pen-mark.is-in .pen-loop path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(0.55, 0.1, 0.3, 1) 0.5s; }
.pen-mark.is-in .pen-moon path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s ease-out 1.55s; }

/* ============================== v6 additions ============================== */
/* six phases: each gate is a checkbox — once the track has drawn, the node fills wine and a
   white tick draws inside it, gate by gate */
.hiw-node { overflow: visible; }
.hiw-tick { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; }
.hiw-tick path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; }
/* the node pops onto the line first, then fills; the tick draws once it is filled */
.js .hiw-track.in .hiw-node {
  background: var(--wine); border-color: var(--wine);
  transition: transform 0.6s var(--ease) calc(var(--i) * 0.22s + 0.15s), opacity 0.4s ease calc(var(--i) * 0.22s + 0.15s),
    background-color 0.3s ease calc(0.9s + var(--i) * 0.22s), border-color 0.3s ease calc(0.9s + var(--i) * 0.22s);
}
html:not(.js) .hiw-node { background: var(--wine); border-color: var(--wine); }
html:not(.js) .hiw-tick path { stroke-dashoffset: 0; }
.hiw-track.in .hiw-tick path { stroke-dashoffset: 0; transition: stroke-dashoffset 0.4s cubic-bezier(0.3, 0.6, 0.3, 1) calc(1.05s + var(--i) * 0.22s); }
@media (prefers-reduced-motion: reduce) { .hiw-track .hiw-node { background: var(--wine); border-color: var(--wine); } .hiw-tick path { stroke-dashoffset: 0; } }

/* thesis: a printed sample brief on the night desk (replaces the live console) */
.morning { margin: 0; background: #f5f2ea; color: #232323; padding: 26px 26px 22px; transform: rotate(2deg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); display: grid; gap: 10px; max-width: 380px; justify-self: center; }
.morning .meta { color: #5e5e5e; }
.mb-date { font-size: 20px; font-weight: 600; color: #0b0b0b; }
.mb-list { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px dashed rgba(0, 0, 0, 0.18); display: grid; gap: 10px; font-size: 16px; line-height: 1.45; }
.mb-list b { color: var(--wine); font-weight: 700; }
.mb-foot { padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, 0.08); }

/* services: what each engagement takes off your list */
.glance-off { margin-top: 10px; display: block; font-size: 15px; color: var(--muted); }
.glance-off .meta { display: block; margin-bottom: 2px; }

/* v6: phones — keep the home under ~14 screens without cutting a chapter */
@media (max-width: 899px) {
  .desk { height: 300svh; }
  .hiw-track { gap: 22px; }
  .hiw-out { padding-top: 8px; }
  .glance-grid { gap: 12px; }
  .glance-grid a { padding: 18px 18px 16px; }
  .glance-go { display: none; }
  .glance-off { margin-top: 6px; }
}