/* =============================================================
   INK & BRUSH — the top layer
   -------------------------------------------------------------
   Loaded after sakura-fuse.css. It repaints the chrome and the page
   below the pin in an ink-and-brush language: sumi black ground,
   parchment for reading, one Inuyasha red that is spent sparingly,
   charcoal for structure, muted gold only where something is worth
   marking. Nothing here touches the hero timeline, the four angles,
   the video or the object — those keep the frame they were built for,
   and this file never writes a rule that reaches inside .hero.

   The method is a repaint, not a rewrite: sakura-fuse.css already
   composes the page out of --sakura-* and --crimson-*, so remapping
   those ramps once at the root moves every rule already written
   against them. What follows the palette block is only what the ramp
   cannot say by itself — the paper, the strokes, the sharp edges.

   Hebrew stays Hebrew. Frank Ruhl Libre reads, Heebo labels, and
   Gveret Levin — a genuine Hebrew handwriting face — does the
   wordmark and the pen annotations in the margin.
   ============================================================= */

/* =============================================================
   STANDING ON ITS OWN
   -------------------------------------------------------------
   The _ds design-system directory was removed from the repo, and with it
   the seven token stylesheets and the component bundle index.html used to
   link. This file already redefined the colour ramps, so the palette
   survived — but the fonts, motion, shadows and the base element rules
   did not, and every var() reading them resolved to nothing.

   So they are declared here. Not copied back wholesale: only the fourteen
   tokens the page's own CSS actually reads, resolved to faces this page
   already loads. The kit's Cinzel/Cormorant/Zen Kaku trio is not brought
   back — it was three more webfont families for a page written in Hebrew,
   whose Hebrew glyphs they do not have. Frank Ruhl Libre and Heebo, which
   are already in the document, cover every slot. --font-jp is gone with
   the Japanese it was set for.
   ============================================================= */

:root {
  /* ---- type: the faces the page already downloads, nothing new ---- */
  --font-display: "Frank Ruhl Libre", Georgia, serif;
  --font-serif:   "Frank Ruhl Libre", Georgia, serif;
  --font-ui:      "Heebo", system-ui, -apple-system, sans-serif;

  /* ---- motion: nothing snaps ---- */
  --ease-drift:        cubic-bezier(.22,.61,.36,1);
  --ease-in-out-soft:  cubic-bezier(.45,0,.55,1);
  --dur-fast:  220ms;
  --dur-base:  360ms;
  --dur-slow:  640ms;
  --transition-control:
    color var(--dur-fast) var(--ease-drift),
    background-color var(--dur-fast) var(--ease-drift),
    border-color var(--dur-fast) var(--ease-drift),
    box-shadow var(--dur-base) var(--ease-drift),
    transform var(--dur-fast) var(--ease-drift);
  --hover-lift:  translateY(-1px);
  --press-scale: scale(.97);

  /* ---- depth: ambient darkness, no offsets to speak of ---- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.55);
  --shadow-md: 0 8px 28px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 70px rgba(0,0,0,.72);
  --shadow-inset-lip: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.5);
  --scrim-center: radial-gradient(ellipse at center, rgba(8,8,10,.1) 0%, rgba(8,8,10,.78) 100%);

  /* ---- the ground: sumi black, cooled off the mauve it was ---- */
  --ink-1000: #08080a;
  --ink-900:  #0d0d10;
  --ink-800:  #131317;
  --ink-700:  #1b1b20;
  --ink-600:  #26262c;   /* charcoal — the structural grey */
  --ink-500:  #33333b;
  --ink-400:  #45454f;

  /* ---- paper: warm white, never a clinical one ---- */
  --parchment-100: #fdf8ec;
  --parchment-200: #f4ecdb;
  --parchment-300: #ddd2bb;
  --parchment-400: #b9ac93;
  --sumi-ink:      #14110f;

  /* ---- Inuyasha red. One hue, and it is the loudest thing here ---- */
  --red-400: #e8392f;
  --red-500: #cf1f26;
  --red-600: #a8161f;
  --red-700: #7d1018;

  /* ---- muted gold: accents only, never a surface ---- */
  --gold-300: #e2cb96;
  --gold-400: #c2a15e;
  --gold-500: #8f7440;

  /* The sakura ramp is remapped rather than removed: the pinks were the
     interactive hue everywhere below the pin, so pointing them at parchment
     and red carries the whole page over in one move. Light end reads, dark
     end paints. */
  --sakura-100: #fffdf7;
  --sakura-200: var(--parchment-100);
  --sakura-300: #cec2ab;
  --sakura-400: #ded2b8;
  --sakura-500: var(--red-500);
  --sakura-600: var(--red-600);
  --sakura-700: var(--red-700);

  --crimson-400: var(--red-400);
  --crimson-500: var(--red-500);
  --crimson-600: var(--red-600);
  --crimson-700: var(--red-700);
  --crimson-800: #4d0b11;
  --crimson-900: #2b060a;

  /* ---- semantic layer ---- */
  --text-primary:   var(--parchment-100);
  --text-secondary: rgba(244,236,219,.74);
  --text-muted:     rgba(244,236,219,.44);
  --text-accent:    var(--red-400);
  --surface-card:   rgba(19,19,23,.82);
  --surface-glass:  rgba(8,8,10,.72);

  /* Hairlines are ink, not tinted glass — they have to read as a drawn
     line at 1px, which a 16%-alpha pink never did. */
  --border-hairline: rgba(244,236,219,.14);
  --border-strong:   rgba(244,236,219,.34);
  --border-crimson:  rgba(207,31,38,.62);

  --accent-primary: var(--red-500);
  --accent-hot:     var(--red-400);
  --accent-warm:    var(--gold-400);
  --focus-ring:     var(--red-400);

  /* Glow is turned down to nearly nothing. Ink does not glow; it sits on
     paper and absorbs. What is left is only enough to keep white type off
     a flat black plane. */
  --glow-sakura:  rgba(244,236,219,.16);
  --glow-crimson: rgba(207,31,38,.42);
  --glow-gold:    rgba(194,161,94,.32);
  --glow-text:    0 0 24px rgba(0,0,0,.55);
  --glow-soft:    0 0 0 1px rgba(244,236,219,.1);
  --glow-ring:    0 0 0 1px var(--border-strong);
  --glow-hot:     0 0 0 1px var(--border-crimson), 0 0 22px var(--glow-crimson);

  --blur-glass: blur(16px) saturate(.72);

  /* Sharp. Every corner on this page is cut, not rounded — the one
     exception is the seal in the header, which is a circle because the
     ink stroke on it is one. */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;

  /* ---- type ---- */
  --he-hand: "Gveret Levin AlefAlefAlef", "Amatic SC", var(--he-display), cursive;

  --rule-fade: linear-gradient(90deg, rgba(244,236,219,.32), rgba(244,236,219,0));

  /* paper grain, generated rather than fetched — one more request for a
     texture nobody consciously sees is a bad trade */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

::selection { background: var(--red-600); color: var(--parchment-100); }

/* The base element rules the kit's base.css carried. Without them the
   document had no default colour, no link treatment and no focus ring. */
body {
  background: var(--ink-1000);
  color: var(--text-primary);
  font: 400 15px/1.6 var(--he-ui);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
a { color: var(--text-accent); text-decoration: none; border-bottom: 1px solid transparent; transition: var(--transition-control); }
a:hover { color: var(--parchment-100); border-bottom-color: var(--border-strong); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* .orn--moon still names this animation, and ink-brush stills the moon
   anyway — but an undefined keyframe would leave the rule half-applied on
   any future use, so it is declared rather than left dangling. */
@keyframes sn-glow-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* =============================================================
   ATMOSPHERE — what the design system's component used to draw
   -------------------------------------------------------------
   The AtmosphereLayer component went with the bundle. It was two tiled
   plates over the page at low opacity, and the plates themselves are
   still in ds-assets, so this is the whole of it: two divs, no React,
   and no component to resolve at runtime.
   ============================================================= */

.atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  will-change: transform;
}
.atmos--petals {
  background-image: url("ds-assets/textures/petals-on-black.png");
  background-size: 620px auto;
  mix-blend-mode: screen;
  opacity: .1;
  filter: grayscale(1) brightness(1.1);
  animation: atmos-fall 26s linear infinite;
}
.atmos--fog {
  background-image: url("ds-assets/textures/fog-violet.png");
  background-size: cover;
  mix-blend-mode: screen;
  opacity: .14;
  filter: grayscale(1) contrast(1.1);
  animation: atmos-drift 48s ease-in-out infinite alternate;
}
@keyframes atmos-fall  { to { background-position: -120px 620px; } }
@keyframes atmos-drift { to { transform: translate3d(3%, 0, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .atmos--petals, .atmos--fog { animation: none; }
}

/* The kit's outline button, which the second call to action asked for.
   Two classes deep on purpose: .btn--lg paints a filled red plaque and is
   declared further down this file, so a single .btn--outline would lose to
   it on source order. */
.btn.btn--outline {
  background: transparent;
  color: var(--parchment-100);
  box-shadow: inset 0 0 0 1px var(--border-crimson);
  text-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn.btn--outline:hover {
    background: rgba(207,31,38,.12);
    box-shadow: inset 0 0 0 1px var(--red-400);
  }
}

/* The footer's Japanese wordmark is gone, and so is the font it named. */
.foot__jp { display: none; }

}

/* =============================================================
   PAPER — the grain sits over the page, under everything readable
   ============================================================= */

/* Deliberately ::after with a z-index above the sections, and deliberately NOT
   a z-index on .sec: sakura-fuse leaves the sections unpositioned in the stack
   so their screen-blended brush plates still see the ground behind them, and
   giving .sec a z-index would isolate every one of them onto its own black
   backing plate. Real paper grain sits over the ink anyway. */
.content::after,
.foot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 200px 200px;
  opacity: .05;
  mix-blend-mode: overlay;
}

/* The ground loses the pink wash it had at the top and gains a cold ink
   falloff instead, with one bank of red haze low down — the same red the
   robe is, at the opacity of a memory of it. */
/* The red banks are sized in pixels, not percentages. The content column is
   several thousand pixels tall, so a 62%-tall radial is a wash over the whole
   page rather than a glow at the seam — which is what turned the ground brown
   the first time this was tried. */
.content {
  background:
    radial-gradient(90% 240px at 50% 0%, rgba(207,31,38,.06) 0%, rgba(207,31,38,0) 100%),
    radial-gradient(80% 240px at 50% 100%, rgba(207,31,38,.05) 0%, rgba(207,31,38,0) 100%),
    linear-gradient(180deg, var(--ink-1000) 0%, var(--ink-900) 44%, var(--ink-1000) 100%);
}
.page-atmos { opacity: .62; filter: grayscale(.34) contrast(1.06); }

/* =============================================================
   THE HEADER — a minimal sticky bar: seal, wordmark, links
   -------------------------------------------------------------
   It is already position:fixed and already held back by main.js until
   the turn is over (opacity: var(--hud)) — that reveal is the hero's
   and it is left alone. What changes is what the bar IS once it
   arrives: a solid ink rail with a drawn edge, rather than a gradient
   that dissolves upward into nothing.
   ============================================================= */

.nav {
  background: linear-gradient(180deg, rgba(8,8,10,.96) 0%, rgba(8,8,10,.9) 100%);
  border-bottom: 0;
  padding-top: calc(var(--sa-t) + 11px);
  padding-bottom: 11px;
}
/* The rail's bottom edge is a brush stroke, not a border: it thins toward
   both margins the way a drawn line lifts off the paper. */
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(244,236,219,0) 0%,
    rgba(244,236,219,.26) 12%,
    rgba(244,236,219,.26) 88%,
    rgba(244,236,219,0) 100%);
  pointer-events: none;
}

.nav__brand {
  flex-direction: row;
  align-items: center;
  gap: 11px;
  min-height: 44px;
}

/* The seal. The source art is an ink circle drawn on white paper with no
   alpha, so it is clipped to a disc — the white square becomes a paper
   medallion, and the drawn enso lands on the clip instead of fighting it.
   The ring outside it is the same ink continuing off the paper. */
.nav__seal {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  /* the artwork's own margin is wider than the ink circle, so it is
     scaled up slightly inside the clip to sit on the stroke */
  transform: scale(1.06);
  background: var(--parchment-100);
  box-shadow:
    0 0 0 1px rgba(244,236,219,.22),
    0 0 0 3px rgba(8,8,10,.9),
    0 0 0 4px rgba(207,31,38,.34);
  -webkit-user-drag: none;
  user-select: none;
}

.nav__brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; }

/* The wordmark is handwritten, and the only handwriting in the chrome —
   which is what makes it read as a signature rather than a font choice. */
.nav__brand-he {
  font: 400 clamp(21px, 2vw, 25px)/1 var(--he-hand);
  letter-spacing: .01em;
  color: var(--parchment-100);
  text-shadow: none;
}
.nav__brand-sub {
  font: 400 9px/1 var(--he-ui);
  letter-spacing: .32em;
  color: var(--parchment-400);
  opacity: .8;
}

.nav__links a {
  font: 500 11.5px/1 var(--he-ui);
  letter-spacing: .18em;
  color: rgba(244,236,219,.6);
}
.nav__links a.is-active { color: var(--parchment-100); text-shadow: none; }
/* the active mark is a red painted stroke, sitting low like a correction */
.nav__links a.is-active::after {
  left: 9px; right: 9px; bottom: 7px;
  height: 6px;
  background: url("ds-assets/ornaments/brush-swash-red.png") center / 100% 100% no-repeat;
  opacity: .95;
  filter: saturate(1.15) brightness(1.05);
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--parchment-100); }
}

/* =============================================================
   TYPE — engraved serif for the voice, a pen for the margin
   ============================================================= */

.h1, .h2 { text-shadow: 0 2px 26px rgba(0,0,0,.6); }

/* A red under-stroke on the section headings: painted, uneven, and short
   of the word's full width so it reads as a mark left on the page rather
   than a border-bottom. */
.h2 { position: relative; display: inline-block; margin-bottom: 38px; }
.h2::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -14px;
  /* clamped rather than a bare percentage: #s06's heading is a single "?",
     and 62% of it is a 13px speck that reads as dirt on the screen */
  width: clamp(72px, 62%, 140px);
  height: 12px;
  background: url("ds-assets/ornaments/brush-swash-red.png") left center / 100% 100% no-repeat;
  opacity: 1;
  filter: saturate(1.2) brightness(1.08);
  pointer-events: none;
}
.sec--end .h2 { display: inline-block; }

.eyebrow { color: var(--parchment-400); letter-spacing: .3em; }
.eyebrow::before {
  /* the chapter numeral is the one place gold is spent */
  color: var(--gold-400);
  text-shadow: none;
  font-weight: 700;
}

.lede { color: var(--text-secondary); }
.lede a {
  color: var(--parchment-100);
  border-bottom: 1px solid var(--border-crimson);
  padding-bottom: 1px;
}
.lede a:hover { color: var(--red-400); border-bottom-color: var(--red-400); }

/* Pen annotations in the margin. Thin, tilted, low contrast — an aside in
   someone's hand, not a second column of copy. They are decoration and are
   hidden from assistive tech and from any screen too narrow to hold them
   outside the reading column. */
.sec[data-note] { position: relative; }
.sec[data-note]::after {
  content: attr(data-note);
  position: absolute;
  top: clamp(150px, 22vh, 260px);
  /* Placed by its own width so it clears the reading column completely — a
     margin note that overlaps the text it annotates is just a second column. */
  width: 17ch;
  inset-inline-start: calc(-17ch - 40px);
  font: 400 clamp(15px, 1.4vw, 18px)/1.5 var(--he-hand);
  color: rgba(244,236,219,.34);
  transform: rotate(-2.4deg);
  transform-origin: top right;
  text-align: start;
  pointer-events: none;
}
/* below this the margin no longer exists, so the note has nowhere honest to go */
@media (max-width: 1280px) {
  .sec[data-note]::after { display: none; }
}

/* =============================================================
   CONTROLS — a cut plaque with a drawn edge
   ============================================================= */

.btn {
  clip-path: none;               /* the worn polygon read as a bevel, not ink */
  border-radius: 0;
  color: var(--parchment-100);
  background: rgba(19,19,23,.72);
  box-shadow:
    inset 0 0 0 1px rgba(244,236,219,.2),
    inset 0 0 0 4px rgba(8,8,10,0);
  letter-spacing: .2em;
  transition: var(--transition-control);
}
.btn--lg {
  color: var(--parchment-100);
  background: linear-gradient(178deg, var(--red-500), var(--red-700) 96%);
  box-shadow: inset 0 0 0 1px rgba(253,248,236,.22), 0 10px 30px rgba(0,0,0,.5);
  text-shadow: 0 1px 1px rgba(60,8,12,.5);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    color: var(--parchment-100);
    background: rgba(207,31,38,.14);
    box-shadow: inset 0 0 0 1px var(--border-crimson);
  }
  .btn--lg:hover {
    background: linear-gradient(178deg, var(--red-400), var(--red-600) 92%);
    box-shadow: inset 0 0 0 1px rgba(253,248,236,.3), 0 12px 34px rgba(0,0,0,.55);
  }
}
:where(a, button, .btn):focus-visible {
  outline: 2px solid var(--red-400);
  outline-offset: 3px;
}

/* =============================================================
   CARDS — ink panels with a painted corner
   ============================================================= */

.grid article {
  background: linear-gradient(180deg, rgba(24,24,29,.86), rgba(13,13,16,.92));
  border: 1px solid var(--border-hairline);
  border-radius: 0;
  box-shadow: none;
}
/* a red painted tick in the corner, the size of a seal impression */
.grid article::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 3px;
  height: 34px;
  background: linear-gradient(180deg, var(--red-500), rgba(207,31,38,0));
  opacity: .85;
}
.grid article::after {
  background-image: url("ds-assets/ornaments/blossom-branch-ink.png");
  filter: grayscale(1) contrast(1.2);
}
.grid h3 { color: var(--parchment-100); letter-spacing: .01em; }
.grid p { color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) {
  .grid article:hover {
    border-color: var(--border-strong);
    box-shadow: none;
    transform: translateY(-2px);
  }
  .grid article:hover::before { opacity: 1; height: 100%; transition: height var(--dur-slow) var(--ease-drift); }
  .grid article:hover::after { opacity: .3; }
}

#s02 .limits li, #s04 .limits li { border-top-color: var(--border-hairline); }
#s04 .limits li:hover { color: var(--parchment-100); }
#s04 .lede { color: var(--parchment-400); }
#s02 .limits li::before { filter: grayscale(.2) saturate(1.3); }

/* =============================================================
   ORNAMENT — the strokes, drained of colour so only the ink reads
   -------------------------------------------------------------
   Every plate on the sheet was painted for a pink night. Greyscaling
   them turns the brushwork back into brushwork; the red that survives
   is the red this file puts there on purpose.
   ============================================================= */

.orn--tree, .orn--beads, .orn--katana, .orn--lantern {
  filter: grayscale(1) contrast(1.16) brightness(.92);
  opacity: .3;
}
.orn--moon {
  filter: grayscale(1) brightness(1.1);
  opacity: .5;
  animation: none;              /* a pulsing moon is a game HUD, not ink */
}
.orn--torii { filter: grayscale(1) contrast(1.1); opacity: .2; }

/* The closing scrim was a dark radial in a rectangle. Against the old mauve
   ground its corners were invisible; against flat black they draw the
   rectangle itself. Widened past the column and faded out sideways, so the
   protection is still under the type and the box has no edges to see. */
#s06::after {
  inset: -12% -34% 0;
  background: radial-gradient(ellipse 74% 66% at 50% 58%,
    rgba(8,8,10,.06) 0%, rgba(8,8,10,.6) 62%, rgba(8,8,10,.88) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

/* THE ROUGH CIRCLE, drawn rather than fetched.
   -------------------------------------------------------------
   enso-ring.png is a pink ring cropped off the sheet with its black ground
   still attached. Multiply hangs the black square on the page; screen keeps
   the square but inverts the problem; and either way the ring underneath is
   pink. A conic gradient gives the thing the plate could not: a stroke that
   loads at the start, thins as it comes round, and lifts off before it closes
   — which is what makes a drawn circle read as drawn. Costs no request.

   The markup is a <span> for this reason: an <img> would still paint its
   own pixels underneath whatever is drawn on top of it. */
.orn--enso {
  top: 6%;
  inset-inline-start: -8%;
  inset-inline-end: auto;
  width: min(300px, 34vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 205deg,
    rgba(244,236,219,0)    0deg,
    rgba(244,236,219,.30)  26deg,
    rgba(244,236,219,.78)  92deg,
    rgba(244,236,219,.62) 208deg,
    rgba(244,236,219,.26) 296deg,
    rgba(244,236,219,0)   336deg);
  /* the stroke itself: a ring with a soft inner and outer edge, so it reads
     as a loaded brush rather than a 4px border */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 58%, #000 63%, #000 70%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 0 58%, #000 63%, #000 70%, transparent 76%);
  mix-blend-mode: normal;
  filter: none;
  opacity: .3;
  transform: rotate(-8deg);
}

/* The chapter divider is drawn here rather than taken off the sheet. Every
   divider plate in the kit is a pink blossom rule — greyscaling one leaves a
   grey blossom, which is a different ornament, not a calligraphic stroke. So:
   a tapered ink stroke, thick at the middle and lifting off the paper at both
   ends, with a red seal set into it. Two background layers and an elliptical
   mask do the whole thing, and it costs no request at all. */
.sec::before {
  width: min(330px, 56%);
  aspect-ratio: auto;
  height: 8px;
  background:
    radial-gradient(circle at 50% 50%, var(--red-500) 0 2.6px, rgba(207,31,38,0) 3px),
    linear-gradient(90deg,
      rgba(244,236,219,0) 0%,
      rgba(244,236,219,.42) 22%,
      rgba(244,236,219,.6) 50%,
      rgba(244,236,219,.4) 78%,
      rgba(244,236,219,0) 100%);
  filter: none;
  mix-blend-mode: normal;
  opacity: .85;
  -webkit-mask-image: radial-gradient(ellipse 50% 46% at 50% 50%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 46% at 50% 50%, #000 58%, transparent 100%);
}

/* =============================================================
   FOOTER
   ============================================================= */

.foot {
  position: relative;
  border-top: 1px solid var(--border-hairline);
  background: linear-gradient(180deg, var(--ink-900), #000);
}
.foot__divider {
  background-image: url("ds-assets/ornaments/divider-brush-wide.png");
  filter: grayscale(1) brightness(1.45);
  opacity: .4;
}
.foot__links a { color: rgba(244,236,219,.58); letter-spacing: .22em; }
.foot__links a:hover { color: var(--parchment-100); }
.foot__org { color: var(--text-muted); letter-spacing: .06em; }

/* Where a Japanese wordmark used to sit. The signature is the same hand
   as the header now, in the same language as the rest of the page. */
.foot__sign {
  display: block;
  font: 400 24px/1 var(--he-hand);
  color: rgba(244,236,219,.3);
  letter-spacing: .02em;
}

/* =============================================================
   HERO CHROME — lettering only. The frame, the angles, the film
   and the object are untouched.
   ============================================================= */

.mark__kanji {
  font: 500 11.5px/1 var(--he-ui);
  letter-spacing: .34em;
  color: rgba(253,248,236,.62);
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
  opacity: .85;
}
.mark__rule { background: linear-gradient(90deg, rgba(244,236,219,.4), rgba(244,236,219,0)); }
.mark__latin {
  font: 400 19px/1 var(--he-hand);
  letter-spacing: .02em;
  color: rgba(253,248,236,.8);
}
.hint__label { color: rgba(253,248,236,.78); }
.hint__arcs, .hint__chev { color: rgba(253,248,236,.72); }
.hint__bloom { background: var(--red-400); box-shadow: 0 0 12px rgba(232,57,47,.6); }
.model-cue {
  border-radius: 0;
  border-color: rgba(244,236,219,.22);
  color: rgba(253,248,236,.86);
}

/* =============================================================
   ADAPTATIONS
   ============================================================= */

/* The ornament is hung deliberately past the edges of the column, and on a
   phone those overhangs were wide enough to give the document a horizontal
   scroll — which in RTL does not just add a scrollbar, it slides the entire
   page sideways and takes the wordmark off the right edge with it. Clip, not
   hidden: clip does not make a scroll container, so nothing inside starts
   trapping scroll. */
.content, .foot { overflow-x: clip; }

@media (max-width: 780px) {
  .nav { gap: 10px; }
  .nav__seal { width: 30px; height: 30px; }
  .nav__brand-sub { display: none; }
  .nav__brand-he { font-size: 20px; }

  /* Seven links will not fit, and wrapping them turned the bar into a
     seven-line menu sitting on top of the page. One row that scrolls, faded
     at both ends so it is visibly scrollable, and the call to action drops —
     it is the first thing in the page below anyway. */
  .nav__links {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { flex: none; padding: 0 9px; white-space: nowrap; }
  .nav > .btn--sm { display: none; }

  .orn--enso { display: none; }
  .h2::after { bottom: -11px; height: 9px; }
  #s06::after { inset: -8% -10% 0; }
}

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

/* =============================================================
   THE OBJECT AT THE FOOT OF THE PAGE
   -------------------------------------------------------------
   A wider frame than the reading column, because the thing in it is the
   only object on the page that is not type. js/turntable.js draws the
   baked frames into a canvas here and adds .is-live once one has landed;
   until then — and for good, if no set was ever baked — the still is what
   shows, so the section is never an empty rectangle.
   ============================================================= */

.sec--object { max-width: 100%; text-align: center; }
.sec--object .eyebrow { justify-content: center; max-width: 76ch; margin-inline: auto; }
.sec--object .h2 { margin-bottom: 34px; }

.turn-stage {
  position: relative;
  width: min(100%, 820px);
  height: clamp(380px, 62vh, 700px);
  margin: 0 auto;
  overflow: hidden;
  touch-action: pan-y;          /* vertical drags still scroll; sideways is ours */
  -webkit-user-select: none;
          user-select: none;
  /* No cursor is set: cursor.js owns the pointer on this site and draws
     its own, and a grab cursor would fight it. */
}
/* The ground it stands on lives on a pseudo-element so it can be faded out
   at the edges. Painted on .turn-stage itself, overflow:hidden cut it into a
   rectangle with two hard vertical sides sitting in the middle of a black
   page — a box around the object instead of a pool of light under it. */
.turn-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(56% 32% at 50% 92%, rgba(207,31,38,.16) 0%, rgba(207,31,38,0) 100%),
    radial-gradient(50% 44% at 50% 44%, rgba(244,236,219,.06) 0%, rgba(244,236,219,0) 100%);
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 55%, #000 42%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 70% at 50% 55%, #000 42%, transparent 100%);
  pointer-events: none;
}

.turn-stage canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 700ms var(--ease-drift);
}
.turn-stage.is-live canvas { opacity: 1; }

.turn-stage__still {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 88%;
  width: auto;
  max-width: 92%;
  object-fit: contain;
  opacity: .9;
  transition: opacity 700ms var(--ease-drift);
  pointer-events: none;
}
.turn-stage.is-live .turn-stage__still { opacity: 0; }

/* The sakura falling through the frame. A tiled plate drifting down at two
   speeds — cheap, and it reads as depth without a particle system. */
.turn-stage__petals {
  position: absolute;
  inset: -10% 0 -10%;
  z-index: 2;
  pointer-events: none;
  background: url("ds-assets/textures/petals-on-black.png") repeat;
  background-size: 520px auto;
  mix-blend-mode: screen;
  opacity: .16;
  animation: turn-petals 22s linear infinite;
  /* the plate is a rectangular crop; it has to dissolve into the ink rather
     than meet it at a straight edge, exactly like every .orn on the page */
  -webkit-mask-image: radial-gradient(ellipse 60% 64% at 50% 50%, #000 46%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 64% at 50% 50%, #000 46%, transparent 100%);
}
@keyframes turn-petals { to { background-position: -90px 900px; } }

.turn-stage__cue {
  margin: 22px 0 0;
  font: 500 10.5px/1 var(--he-ui);
  letter-spacing: .38em;
  text-indent: .38em;
  color: rgba(244,236,219,.4);
  opacity: 0;
  transition: opacity 700ms var(--ease-drift);
}
/* nothing to drag until there is something turning — the cue would be a lie */
.turn-stage.is-live ~ .turn-stage__cue { opacity: 1; }

@media (max-width: 780px) {
  .turn-stage { height: clamp(320px, 52vh, 460px); }
  .turn-stage__cue { letter-spacing: .28em; text-indent: .28em; }
}

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