/* ============================================================
   THREAD v2 — style.css
   A long painted canvas unrolled sideways; an embroidery thread
   runs its length and lights up as you go.

   Rebuilt from scratch. What changed from v1, and why it's fast:
   - The moss frame is FIXED to the viewport (four small layers,
     composited once) instead of being metres of blended
     background painted along the whole track.
   - Every botanical except the two bands has a real alpha
     channel (gpt-image-1.5) — no mix-blend-mode stacking-context
     traps. The bands are painted on PURE white, so multiply is
     exact: no halo.
   - Every image carries width/height (no layout shift), lazy
     loads, and the whole payload is WebP.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
  background-color: var(--canvas);
  background-image: url("assets/art/canvas.jpg");
  background-repeat: repeat;
  background-size: 600px;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: transparent;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--moss); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--paper); padding: var(--s-3) var(--s-4);
}
.skip:focus { left: var(--s-4); top: var(--s-4); }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

/* ---------- the fixed moss frame ------------------------------ */
/* Four fixed layers around the viewport. They never move, never
   repaint, and multiply against whatever scrolls beneath them.  */

.frame { position: fixed; pointer-events: none; user-select: none; }

/* The bands are sized so the full painted pattern is visible: the
   foliage tips clear the container's inner edge, while the dense
   base bleeds off the page edge — growing out of it, never chopped. */
.frame--bottom {
  left: 0; right: 0; bottom: 0;
  height: clamp(130px, 21vh, 220px);
  background: url("assets/art/band-a.webp") repeat-x
              left bottom calc(-1 * clamp(18px, 3vh, 33px)) / auto clamp(225px, 36vh, 390px);
  mix-blend-mode: multiply;
  z-index: 6;
}
.frame--top {
  left: 0; right: 0; top: 0;
  height: clamp(150px, 23vh, 240px);
  background: url("assets/art/band-b.webp") repeat-x
              left bottom -10px / auto clamp(260px, 40vh, 430px);
  transform: scaleY(-1);          /* grasses hang down from under the masthead */
  mix-blend-mode: multiply;
  z-index: 6;
}

/* ---------- chrome: masthead ---------------------------------- */

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-5);
  padding: clamp(0.9rem, 0.6rem + 1vw, 1.4rem) var(--gutter) 1rem;
  background: rgba(242,237,225,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}

.mark { line-height: 1.2; margin: 0; }
.mark b {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: var(--t-md); letter-spacing: 0.06em; text-transform: uppercase;
}
.mark span {
  display: block; font-size: var(--t-xs); color: var(--ink-soft);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}

.topnav { display: flex; gap: clamp(0.9rem, 0.5rem + 1.4vw, 2rem); align-items: baseline; }
.topnav a {
  font-size: var(--t-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.topnav a:hover { border-bottom-color: var(--moss); }
.topnav a[aria-current="page"] { color: var(--moss); border-bottom-color: var(--moss); }

.topbar, .mark b, .mark span, .topnav a, .rail, .rail__where, .rail__pct {
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
body.over-hero .topbar {
  background: rgba(14,20,14,0.55);
  border-bottom-color: rgba(255,255,255,0.16);
}
body.over-hero .mark b, body.over-hero .topnav a { color: #fff; }
body.over-hero .mark span { color: rgba(255,255,255,0.72); }
body.over-hero .topnav a[aria-current="page"] { border-bottom-color: rgba(255,255,255,0.85); }
body.over-hero .topnav a:hover { border-bottom-color: #fff; }
body.over-hero .frame { opacity: 0; }
.frame { transition: opacity var(--dur-slow) var(--ease); }

/* ---------- chrome: the progress rail ------------------------- */

.rail {
  position: fixed; inset: auto 0 0 0; z-index: 21;
  display: flex; align-items: center; gap: var(--s-4);
  padding: 1.2rem var(--gutter) clamp(0.6rem, 0.4rem + 0.8vw, 1rem);
  pointer-events: none;
}
.rail__where {
  flex: 0 0 auto; min-width: 11ch; text-align: left;
  font-size: var(--t-xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink);
}
/* the rail sits over the moss frame — set it on little paper chips
   so it reads over any amount of foliage */
.rail__where, .rail__pct {
  background: rgba(251,248,241,0.92);
  padding: 3px 9px;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(51,48,42,0.18);
}
.rail__line { box-shadow: 0 0 0 3px rgba(251,248,241,0.75); }
body.over-hero .rail__where, body.over-hero .rail__pct {
  background: rgba(14,20,14,0.45); box-shadow: none;
}
body.over-hero .rail__line { box-shadow: none; }
.rail__line {
  position: relative; flex: 1 1 auto; height: 2px;
  background: rgba(51,48,42,0.18); border-radius: 1px;
}
.rail__lit {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: linear-gradient(90deg, var(--moss), var(--ochre));
  border-radius: 1px;
}
.rail__pct {
  flex: 0 0 auto; min-width: 4ch; text-align: center;
  font-size: var(--t-xs); letter-spacing: var(--tracking-caps);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
body.over-hero .rail__where, body.over-hero .rail__pct { color: rgba(255,255,255,0.8); }
body.over-hero .rail__line { background: rgba(255,255,255,0.28); }

/* ---------- the ribbon ---------------------------------------- */

#scroller { position: relative; }
#stage    { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#track {
  position: absolute; top: 0; left: 0; height: 100%;
  display: flex; align-items: stretch;
  will-change: transform;
}

#thread { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; }

/* The thread is real stitch geometry: on top of the fabric it is a
   running stitch; between stitches — and under every text block —
   it passes beneath and shows only as a faint soft ghost. */
.stitch-dim {
  fill: none; stroke: rgba(51,48,42,0.30); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.thread-under {
  fill: none; stroke: rgba(51,48,42,0.055); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.thread-under--zone { stroke: rgba(51,48,42,0.05); }
.thread-under--soft { stroke: rgba(51,48,42,0.028); stroke-width: 4; }  /* the blur, without a filter */
.stitch-lit {
  fill: none; stroke: url(#threadGrad); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(228,170,72,0.45));
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.stitch-lit.on { opacity: 1; }
.thread-tip      { fill: #FFF3D6; stroke: rgba(200,154,60,0.9); stroke-width: 1;
                   transition: opacity var(--dur) var(--ease); }
.thread-tip-glow { fill: url(#tipGlow); transition: opacity var(--dur) var(--ease); }

/* ---------- panels -------------------------------------------- */

.panel {
  position: relative; z-index: 1;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(5.2rem, 12vh, 7rem) clamp(1.4rem, 4vw, 4.5rem) clamp(6rem, 17vh, 9rem);
  min-height: 100%;
}

/* --- hero ---------------------------------------------------- */

.panel--hero { padding: 0; width: 100vw; }
.hero { position: relative; width: 100vw; height: 100%; overflow: hidden; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: var(--overlay-scrim);
}
.hero__body {
  position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter);
  bottom: clamp(4.2rem, 12vh, 7rem); max-width: 880px; color: #fff;
}
.hero__kicker {
  margin: 0 0 var(--s-4); font-size: var(--t-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}
.hero__quote {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.6rem);
  line-height: var(--leading-tight); text-wrap: balance;
}
.hint {
  position: absolute; z-index: 1; right: var(--gutter); bottom: clamp(1.6rem, 5vh, 3rem);
  color: rgba(255,255,255,0.85); font-size: var(--t-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  display: flex; align-items: center; gap: 0.6em;
}
.hint em { font-style: normal; animation: nudge 2.2s var(--ease) infinite; display: inline-block; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(7px); } }

/* --- section openers ----------------------------------------- */

.opener { flex-direction: column; text-align: center; width: max(38vw, 460px); }
.opener h2 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem); line-height: var(--leading-tight);
}
.opener em {
  display: block; margin-top: var(--s-4); font-style: italic;
  color: var(--ink-soft); font-family: var(--font-display); font-size: var(--t-md);
}
.opener .spot { width: clamp(110px, 12vw, 170px); margin: 0 auto var(--s-5); }

/* --- work: big tier ------------------------------------------- */

.work { display: flex; align-items: center; gap: clamp(1.8rem, 3.5vw, 4rem); }

.work__photo { margin: 0; }
.work__photo img {
  width: auto; max-width: min(44vw, 620px);
  box-shadow: var(--shadow-paper);
  background: var(--paper);
}
.work--big .work__photo img {
  height: min(54vh, 600px);
  clip-path: inset(3px);   /* a few of the old scans carry a 1–3px coloured edge */
}

.work__text { max-width: 40ch; }
.work__no {
  margin: 0 0 var(--s-2); font-family: var(--font-display); font-style: italic;
  color: var(--ochre); font-size: var(--t-md);
}
.work__no::after {
  content: ""; display: inline-block; width: 4.5ch; height: 1px;
  background: var(--sage); vertical-align: middle; margin-left: 0.8ch;
}
.work__title {
  margin: 0 0 var(--s-3); font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); line-height: var(--leading-snug);
}
.work__meta {
  margin: 0 0 var(--s-4); font-size: var(--t-xs); color: var(--ink-soft);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.work__caption p { margin: 0 0 var(--s-3); font-size: var(--t-sm); }
.work__caption p:last-child { margin-bottom: 0; }

/* alternating vertical rhythm so the run doesn't march */
.work--v1 { transform: translateY(-2.5vh); }
.work--v2 { transform: translateY(2vh); }
.work--v3 { transform: translateY(-1vh); }
.work--v4 { transform: translateY(3vh); }

/* --- work: medium tier (pinned photographs) ------------------- */
/* 350–450px sources — never blown past their pixels.            */

.work--medium .work__photo img {
  width: auto; max-width: min(34vw, 440px); max-height: 48vh;
  padding: 10px 10px 12px; background: var(--paper);
  box-shadow: var(--shadow-paper);
}
.work--medium .work__photo { position: relative; }
.work--medium .work__photo::before {
  /* a stitched tab holding the photo to the canvas */
  content: ""; position: absolute; top: -13px; left: 50%; width: 44px; height: 26px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(200,154,60,0.28);
  border-left: 1px dashed rgba(51,48,42,0.4);
  border-right: 1px dashed rgba(51,48,42,0.4);
}
.work--medium .work__pair { display: flex; gap: var(--s-5); align-items: flex-start; }
.work--medium .work__pair figure:last-child { transform: translateY(9%) rotate(1.4deg); }
.work--medium .work__pair img { max-width: min(24vw, 330px); max-height: 40vh; }

/* --- work: text-only (sda) ------------------------------------ */

.work--text .work__text { max-width: 46ch; }
.work--text .spot { width: clamp(100px, 10vw, 150px); margin-bottom: var(--s-4); }
.work--text .work__note {
  margin-top: var(--s-4); font-size: var(--t-xs); color: var(--ink-soft);
  font-style: italic;
}

/* --- the also row --------------------------------------------- */

.also__lead { max-width: 30ch; margin-right: clamp(1.5rem, 3vw, 3rem); }
.also__lead h3 {
  margin: 0 0 var(--s-3); font-family: var(--font-display); font-weight: 500;
  font-size: var(--t-lg);
}
.also__lead p { margin: 0; color: var(--ink-soft); font-size: var(--t-sm); }
.also { display: flex; gap: var(--s-5); align-items: flex-start; }
.also figure { margin: 0; width: clamp(150px, 14vw, 210px); }
.also figure:nth-child(even) { transform: translateY(2.2rem); }
.also img {
  width: 100%; padding: 6px; background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.also h4 {
  margin: var(--s-3) 0 0; font-weight: 500; font-size: var(--t-xs);
  letter-spacing: var(--tracking-wide);
}
.also .tiny { margin: var(--s-1) 0 0; font-size: var(--t-xs); color: var(--ink-soft); }

/* --- quotes --------------------------------------------------- */

.panel--quote { width: max(44vw, 520px); }
.bigquote { margin: 0; max-width: 30ch; text-align: center; position: relative; }
.bigquote .spot { width: clamp(90px, 9vw, 140px); margin: 0 auto var(--s-4); }
.bigquote p {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.4rem); line-height: var(--leading-snug);
  text-wrap: balance;
}
.bigquote footer {
  margin-top: var(--s-4); font-size: var(--t-xs); color: var(--ink-soft);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}

/* --- her story: the painted portrait in the hoop -------------- */

.storyintro { display: flex; align-items: center; gap: clamp(2rem, 4vw, 5rem); }
.hoopwrap {
  flex: 0 0 auto;
  width: clamp(270px, 30vw, 420px);
}
.storyintro .prose { max-width: 46ch; }

.prose { max-width: 52ch; }   /* nothing prose-y runs wider than a comfortable measure */
.prose h2 {
  margin: 0 0 var(--s-4); font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
}
.prose p, .statement { font-size: var(--t-sm); }
.statement { margin: 0; }
.statement p { margin: 0 0 var(--s-3); }
.statement p:last-child { margin-bottom: 0; }

/* --- entries (experience / education) ------------------------- */

.cols { display: flex; gap: clamp(1.6rem, 2.6vw, 3rem); align-items: flex-start; }
.entry { width: clamp(220px, 21vw, 300px); }
.entry__period {
  margin: 0 0 var(--s-1); font-size: var(--t-xs); color: var(--ochre);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.entry h3 {
  margin: 0 0 var(--s-1); font-family: var(--font-display); font-weight: 500;
  font-size: var(--t-md); line-height: var(--leading-snug);
}
.entry__role {
  margin: 0 0 var(--s-3); font-size: var(--t-xs); color: var(--ink-soft);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.entry p { font-size: var(--t-sm); margin: 0 0 var(--s-3); }
/* long entries flow their body into two columns so nothing runs
   into the moss on a shallow viewport */
.entry--wide { width: auto; max-width: min(46vw, 600px); }
.entry--wide .entry__body { columns: 2; column-gap: clamp(1.4rem, 2.2vw, 2.4rem); }
.entry--wide .entry__body p { break-inside: avoid-column; }
body.mode-v .entry--wide { max-width: 60ch; }
body.mode-v .entry--wide .entry__body { columns: 1; }
.entry .await {
  border: 1px dashed var(--sage); padding: var(--s-4);
  font-size: var(--t-sm); color: var(--ink-soft); background: rgba(251,248,241,0.5);
}
.entry .await b { display: block; font-weight: 500; color: var(--ink); margin-bottom: var(--s-1); }

/* --- skills / interests --------------------------------------- */

.lists { display: flex; gap: clamp(1.8rem, 3vw, 3.4rem); align-items: flex-start; }
.lists h3 {
  margin: 0 0 var(--s-3); font-family: var(--font-display); font-weight: 500;
  font-size: var(--t-md);
}
.lists ul { margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.lists li { margin-bottom: 0.35em; }
.lists li::before { content: "· "; color: var(--ochre); }
.lists ul.sub { margin-top: var(--s-2); color: var(--ink-soft); font-size: var(--t-xs); }

/* --- the end of the thread ------------------------------------ */

.panel--end { width: 100vw; }
body.mode-v .panel--end { width: auto; }
.end { text-align: center; max-width: 52ch; }
.end h2 {
  margin: 0 0 var(--s-2); font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
}
.end .cred {
  margin: 0 0 var(--s-5); font-size: var(--t-xs); color: var(--ink-soft);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.end dl { margin: 0 0 var(--s-6); }
.end dt {
  font-size: var(--t-xs); color: var(--ink-soft);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-bottom: 2px;
}
.end dd { margin: 0 0 var(--s-4); font-family: var(--font-display); font-size: var(--t-lg); }
.end dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--sage); }
.end dd a:hover { border-bottom-color: var(--moss); color: var(--moss); }
.btnrow { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; text-decoration: none; color: var(--canvas);
  background: var(--moss); padding: 0.8em 1.5em;
  font-size: var(--t-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--moss-deep); }
.btn--ghost { background: transparent; color: var(--moss); border: 1px solid var(--moss); }
.btn--ghost:hover { background: var(--moss); color: var(--canvas); }

/* --- craft page ----------------------------------------------- */

.craft-lead { max-width: 46ch; }
.craft-lead h1 {
  margin: 0 0 var(--s-3); font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.4rem);
}
.craft-lead > p { margin: 0 0 var(--s-3); color: var(--ink-soft); font-size: var(--t-sm); }
.stamp {
  display: inline-block; margin-top: var(--s-2);
  border: 1px dashed var(--sage); color: var(--ink-soft);
  font-size: var(--t-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  padding: 0.5em 0.9em; transform: rotate(-1.6deg);
}

.slot__head { max-width: 34ch; margin-right: clamp(1.6rem, 3vw, 3.2rem); }
.slot__no {
  margin: 0 0 var(--s-2); font-family: var(--font-display); font-style: italic;
  color: var(--ochre); font-size: var(--t-md);
}
.slot__head h2 {
  margin: 0 0 var(--s-3); font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
}
.slot__head .note { margin: 0; font-style: italic; font-family: var(--font-display); font-size: var(--t-md); line-height: var(--leading-snug); }
.slot__head .note::before { content: "“"; color: var(--ochre); }
.slot__head .note::after  { content: "”"; color: var(--ochre); }

.slot__pics { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 2rem); }
.slot__pics figure { margin: 0; flex: 0 0 auto; }
.slot__pics img {
  padding: 8px 8px 10px; background: var(--paper);
  box-shadow: var(--shadow-paper);
}
.slot__pics .pic--tall img { height: min(52vh, 470px); width: auto; }
.slot__pics .pic--wide img { width: min(34vw, 480px); height: auto; }
.slot__pics figure:nth-child(odd)  { transform: rotate(-1.3deg) translateY(-1.5vh); }
.slot__pics figure:nth-child(even) { transform: rotate(1.1deg) translateY(2vh); }
.slot__pics figcaption {
  margin-top: var(--s-2); font-size: var(--t-xs); color: var(--ink-soft);
  text-align: center; max-width: 30ch; margin-left: auto; margin-right: auto;
}

/* No motion on the work itself — the thread is the animation.
   The exceptions: the veil between pages, and the panels riding
   in behind it, below. */

/* ---------- the veil: soft passage between pages --------------- */
/* A canvas-coloured sheet over everything. Pages arrive under it
   (inline script sets .veiled before first paint; app.js lifts it
   once laid out) and leave behind it (.veil-down, then navigate).
   It doubles as the "still working" cover on slow devices. */

html.veiled::after {
  content: ""; position: fixed; inset: 0; z-index: 99;
  background: #F2EDE1 url("assets/art/canvas.jpg") repeat;
  background-size: 600px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 460ms var(--ease);
}
html.veiled.veil-lift::after { opacity: 0; }
html.veiled.veil-down::after { animation: veilDown 250ms var(--ease) both; }
@keyframes veilDown { from { opacity: 0; } to { opacity: 1; } }

/* the panels ride in as the veil lifts */
@media (prefers-reduced-motion: no-preference) {
  #track .panel { animation: panelRise 620ms var(--ease) backwards; }
  #track .panel:nth-of-type(2) { animation-delay: 90ms; }
  #track .panel:nth-of-type(3) { animation-delay: 170ms; }
  #track .panel:nth-of-type(4) { animation-delay: 240ms; }
}
@keyframes panelRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.slot__more {
  margin: var(--s-4) 0 0;
  font-size: var(--t-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.slot__more a {
  color: var(--moss); text-decoration: none;
  border-bottom: 1px solid var(--sage); padding-bottom: 2px;
}
.slot__more a:hover { border-bottom-color: var(--moss); }

/* ---------- craft detail pages (garden.html, …) ---------------- */
/* Always vertical (app.js forces mode-v): a themed page you walk
   down, the section's photos grouped into projects. */

/* .mode-v.page-detail beats the later body.mode-v shorthands */
body.page-detail .panel,
body.mode-v.page-detail .slot { flex-direction: column; align-items: center; }
body.mode-v.page-detail .panel {
  /* room to breathe — content clears the painted depth of the beds */
  padding: clamp(4.5rem, 10vh, 7rem)
           calc(var(--bed, 130px) * 0.60 + 14px)
           clamp(6rem, 13vh, 9rem);
}
body.mode-v.page-detail .panel--end { padding-bottom: clamp(8rem, 16vh, 11rem); }
body.page-detail .craft-lead { text-align: center; max-width: 60ch; }
body.page-detail .slot__head {
  margin: 0 0 var(--s-5); text-align: center; max-width: 44ch;
}
body.page-detail .slot__pics { justify-content: center; }
body.page-detail .proj .slot__pics .pic--tall img { height: auto; max-width: min(56vw, 460px); }
body.page-detail .proj .slot__pics .pic--wide img { width: min(62vw, 620px); }

.backlink {
  margin: 0 0 var(--s-5);
  font-size: var(--t-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.backlink a { color: var(--ink-soft); text-decoration: none; }
.backlink a:hover { color: var(--moss); }

.spot--lead { width: clamp(110px, 14vw, 170px); margin: 0 auto var(--s-4); }
.spot--end  { width: clamp(90px, 10vw, 140px);  margin: 0 auto var(--s-4); }

.note--detail {
  margin: 0; font-style: italic; font-family: var(--font-display);
  font-size: var(--t-md); line-height: var(--leading-snug);
}
.note--detail::before { content: "“"; color: var(--ochre); }
.note--detail::after  { content: "”"; color: var(--ochre); }

/* ---------- vertical mode (narrow / reduced motion) ----------- */

body.mode-v #stage { position: static; height: auto; overflow: visible; }
body.mode-v #track { position: static; display: block; height: auto; transform: none !important; }
body.mode-v .panel { min-height: 0; width: auto !important; padding: clamp(3.4rem, 8vh, 5rem) var(--gutter); }
body.mode-v #track > section:first-of-type { padding-top: 9.5rem; }  /* clear the taller wrapped topbar */
body.mode-v .panel--hero { padding: 0; width: 100% !important; }
body.mode-v .hero { width: 100%; height: 86svh; }
body.mode-v .opener { width: auto; }
body.mode-v .work { flex-direction: column; align-items: flex-start; gap: var(--s-5); transform: none; }
body.mode-v .work--big .work__photo img { height: auto; max-width: 100%; max-height: 74vh; }
body.mode-v .work--medium .work__photo img { max-width: min(88vw, 450px); max-height: none; }
body.mode-v .work--medium .work__pair { flex-wrap: wrap; }
body.mode-v .work--medium .work__pair img { max-width: min(70vw, 350px); max-height: none; }
body.mode-v .also { flex-wrap: wrap; }
body.mode-v .also figure:nth-child(even) { transform: none; }
body.mode-v .cols, body.mode-v .lists { flex-direction: column; }
body.mode-v .entry { width: auto; max-width: 60ch; }
body.mode-v .storyintro { flex-direction: column; align-items: flex-start; }
body.mode-v .slot { flex-direction: column; align-items: flex-start; }
body.mode-v .slot__pics { flex-wrap: wrap; }
body.mode-v .slot__pics .pic--tall img { height: auto; max-width: min(74vw, 400px); }
body.mode-v .slot__pics .pic--wide img { width: min(88vw, 480px); }
body.mode-v .slot__head { margin-right: 0; margin-bottom: var(--s-4); }
body.mode-v .frame--top { display: none; }
body.mode-v .frame--bottom { height: 90px; background-size: auto 200px; }
body.mode-v .hint em { animation-name: nudgeY; }
@keyframes nudgeY { 0%,100% { transform: translateY(0) rotate(90deg); } 50% { transform: translateY(6px) rotate(90deg); } }

@media (prefers-reduced-motion: reduce) {
  .hint em { animation: none; }
}

/* ---------- craft detail themes -------------------------------- */
/* Same fixed-frame trick as the main page, turned to match the
   scroll: detail pages move DOWN, so each craft's band grows in
   from the left and right edges (rotated 90°, mirrored far side)
   and nothing sits across the reading direction.

   Sized like the main page's bands: the dense base bleeds OFF the
   outer edge (never a raw cut or a gutter), and the container is
   wider than the painted depth so the full artwork is visible —
   the empty white rest of the image vanishes under multiply.
   --bed is the displayed width of the band image; the painting
   occupies roughly its first 62%. Each theme supplies --bed-img. */

body.page-detail { --bed: clamp(120px, 24vw, 310px); }
body.page-detail .frame--left, body.page-detail .frame--right {
  top: 0; bottom: 0;
  width: calc(var(--bed) * 0.72);
  background-image: var(--bed-img);
  background-repeat: repeat-y;
  background-position: calc(var(--bed) * -0.06) 0;
  background-size: var(--bed) auto;
  mix-blend-mode: multiply;
  z-index: 6;
}
body.page-detail .frame--left  { left: 0; }
body.page-detail .frame--right { right: 0; transform: scaleX(-1); }

.theme-garden      { --bed-img: url("assets/art/gard-band-side.webp"); }
.theme-sewing      { --bed-img: url("assets/art/sew-band-side.webp"); }
.theme-joinery     { --bed-img: url("assets/art/join-band-side.webp"); }
.theme-stainglass  { --bed-img: url("assets/art/glass-band-side.webp"); }
.theme-photography { --bed-img: url("assets/art/photo-band-side.webp"); }