@charset "utf-8";
/* ===========================================================================
   KoBu, Sushi Omakase Experience, Jacksonville FL
   styles.css
   ---------------------------------------------------------------------------
   ONE stylesheet for all four pages. No framework, no build step, no CDN and
   no web fonts, so the site works from a folder on a desktop, from a USB
   stick, or from a server, with or without an internet connection.

   WHERE THE DESIGN COMES FROM
   Nothing here is a guess. KoBu's brush logo sits on pure black with a red
   hanko seal, and their printed menu heads each section in one of three
   colours in rotation: burnt amber, azure, and that same seal red. Those are
   the only accents used. The wave pattern behind the dark sections is
   seigaiha, the pattern printed behind the koi on their own menu, redrawn
   here in CSS so it costs nothing to load.

   The palette is deliberately dark. KoBu opens at 5 PM and closes at 10 PM;
   it is a night-time room, and the logo is white-on-black. A light theme
   would be fighting the brand, so this commits to one look and paints every
   colour explicitly rather than inheriting anything from the browser.

   HOW TO RETHEME
   Change the values in :root. Never rename the tokens. Every rule downstream
   reads them, so a value swap restyles the whole site and a rename breaks it.
   =========================================================================== */

/* ------------------------------------------------------------------ RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

/* ----------------------------------------------------------------- TOKENS */
:root {
  color-scheme: dark;

  /* Ground. Near-black rather than pure black: on an OLED screen pure black
     makes the section edges disappear entirely, and a hair of value lets the
     raised surfaces read as separate planes. */
  --ink:      #08080A;
  --ink-2:    #0E0E12;   /* raised band */
  --ink-3:    #14141A;   /* card */
  --ink-4:    #1C1C24;   /* input, hover */

  /* Type. Warm off-white, not #fff. Pure white on near-black vibrates and
     reads cheap. This is the colour of unbleached paper. */
  --paper:    #F4F0E9;
  --paper-2:  rgba(244, 240, 233, .74);
  --paper-3:  rgba(244, 240, 233, .52);
  --paper-4:  rgba(244, 240, 233, .34);

  /* The three menu accents, straight off their printed menu. Each has a
     -t variant lifted far enough to stay legible as small text on the dark
     ground; the base value is for fills, rules and seals. */
  --amber:    #E8660A;
  --amber-t:  #F2913C;
  --azure:    #4DA6FF;
  --azure-t:  #7CC0FF;
  --seal:     #C70F2E;
  --seal-t:   #EF5A72;

  --gold:     #B8975A;   /* hairline and ornament gold, from the koi art */

  --line:     rgba(244, 240, 233, .12);
  --line-2:   rgba(244, 240, 233, .22);

  /* Default accent. Sections override it, and everything downstream reads
     var(--acc) so one class on a section recolours its whole interior. */
  --acc:      var(--gold);
  --acc-t:    var(--gold);

  /* Type stacks. No web fonts, so these are built from faces that genuinely
     ship on Windows, macOS and iOS, in descending order of how well they suit
     a brush-lettered Japanese brand. Palatino is calligraphic and sits
     naturally beside the logo; Iowan and Hoefler cover Apple. */
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style",
           "Hoefler Text", Cambria, Georgia, "Times New Roman", serif;
  --sans:  "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue",
           Arial, sans-serif;
  --jp:    "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", "Noto Serif JP",
           var(--serif);

  /* Fluid type scale. clamp() means no breakpoint ever has to restate a size. */
  --t-xs:   .75rem;
  --t-sm:   .875rem;
  --t-base: 1rem;
  --t-lg:   clamp(1.06rem, 1.01rem + .22vw, 1.2rem);
  --t-xl:   clamp(1.3rem,  1.2rem  + .5vw,  1.6rem);
  --t-2xl:  clamp(1.7rem,  1.5rem  + 1vw,   2.4rem);
  --t-3xl:  clamp(2.3rem,  1.9rem  + 2vw,   3.6rem);
  --t-4xl:  clamp(3rem,    2.2rem  + 4vw,   5.6rem);

  /* Spacing, on a consistent ratio so vertical rhythm holds together. */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4.5rem;
  --s9: 6.5rem; --s10: 9rem;

  --wrap: 1240px;
  --wrap-narrow: 760px;

  --r-sm: 2px;   /* almost nothing: the brand is brush and paper, not bubbles */
  --r-md: 3px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------- BASE */
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* the ticker and ornaments extend past the fold */
}

h1, h2, h3, h4 { font-weight: 400; line-height: 1.08; letter-spacing: -.015em; }
h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); letter-spacing: -.005em; }
p  { text-wrap: pretty; }

em { font-style: italic; }

::selection { background: var(--seal); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 3px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, .6rem + 2.4vw, 2.5rem); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
  z-index: 200; background: var(--paper); color: var(--ink);
  padding: .7rem 1.3rem; font-family: var(--sans); font-size: var(--t-sm);
  text-decoration: none;
}
.skip:focus { top: .6rem; }

.dim   { color: var(--paper-2); }
.dimmer{ color: var(--paper-3); }
.small { font-size: var(--t-sm); }

/* --------------------------------------------------------------- SEIGAIHA
   青海波, the interlocking wave-scale pattern printed behind the koi on
   KoBu's own menu. Two identical sets of concentric arcs, the second offset
   by half a tile in both axes, which is what makes the scales interlock.
   Drawn with gradients so it is resolution independent and weighs nothing.
   Kept very low contrast: it should be felt, not read.                      */
.seigaiha { position: relative; isolation: isolate; }
.seigaiha::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  --w: rgba(244, 240, 233, .055);
  background-image:
    radial-gradient(circle at 50% 100%,
      transparent 0 21%, var(--w) 21% 22.5%, transparent 22.5% 41%,
      var(--w) 41% 42.5%, transparent 42.5% 61%,
      var(--w) 61% 62.5%, transparent 62.5% 81%,
      var(--w) 81% 82.5%, transparent 82.5%),
    radial-gradient(circle at 50% 100%,
      transparent 0 21%, var(--w) 21% 22.5%, transparent 22.5% 41%,
      var(--w) 41% 42.5%, transparent 42.5% 61%,
      var(--w) 61% 62.5%, transparent 62.5% 81%,
      var(--w) 81% 82.5%, transparent 82.5%);
  background-size: 76px 38px;
  background-position: 0 0, 38px 19px;
}
/* Fade the pattern out top and bottom so bands do not end on a hard seam. */
.seigaiha--fade::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

/* ----------------------------------------------------------------- HEADER */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.site-head.is-stuck {
  background: rgba(8, 8, 10, .86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.head-in {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 88px;
  transition: min-height .4s var(--ease);
}
.site-head.is-stuck .head-in { min-height: 68px; }

.brand { display: block; flex: 0 0 auto; margin-right: auto; text-decoration: none; }
.brand img {
  height: clamp(38px, 30px + 1.6vw, 52px);
  width: auto;
  transition: height .4s var(--ease);
}
.site-head.is-stuck .brand img { height: clamp(32px, 26px + 1.2vw, 42px); }

.nav { display: flex; align-items: center; gap: clamp(1rem, .4rem + 1.6vw, 2.2rem); }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, .4rem + 1.6vw, 2.2rem); }
.nav__list a {
  position: relative;
  font-family: var(--sans); font-size: var(--t-sm);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-2); text-decoration: none;
  padding-block: .4rem;
  transition: color .3s var(--ease);
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--seal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .38s var(--ease);
}
.nav__list a:hover { color: var(--paper); }
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav__list a[aria-current="page"] { color: var(--paper); }

.nav__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-size: var(--t-sm); letter-spacing: .04em;
  color: var(--paper-2); text-decoration: none; white-space: nowrap;
  transition: color .3s var(--ease);
}
.nav__tel:hover { color: var(--paper); }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico--fill { fill: currentColor; stroke: none; }

/* Burger. Hidden on desktop; the nav collapses into a sheet below 960px. */
.burger { display: none; width: 44px; height: 44px; position: relative; z-index: 120; margin-left: auto; }
.burger span {
  position: absolute; left: 11px; width: 22px; height: 1.5px;
  background: var(--paper); transition: transform .34s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .burger { display: block; }
  .brand { margin-right: 0; }
  .head-in { justify-content: space-between; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 84vw);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: var(--s5);
    padding: var(--s8) var(--s6);
    background: var(--ink-2);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform .42s var(--ease);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--s4); width: 100%; }
  .nav__list a { font-size: var(--t-lg); letter-spacing: .06em; }
  .nav::before {   /* seigaiha whisper inside the sheet */
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
    --w: rgba(244,240,233,.05);
    background-image: radial-gradient(circle at 50% 100%, transparent 0 21%, var(--w) 21% 22.5%, transparent 22.5% 41%, var(--w) 41% 42.5%, transparent 42.5% 61%, var(--w) 61% 62.5%, transparent 62.5%);
    background-size: 76px 38px;
  }
  .nav-scrim {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(4, 4, 6, .62);
    opacity: 0; visibility: hidden; transition: opacity .42s var(--ease), visibility .42s;
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

/* ---------------------------------------------------------------- BUTTONS */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.9rem;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: color .34s var(--ease), border-color .34s var(--ease);
}
.btn::after {   /* the wipe that fills the button on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s var(--ease);
}
.btn > * { position: relative; }
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn .ico { width: 1.05em; height: 1.05em; }

.btn--seal { background: var(--seal); color: var(--paper); border-color: var(--seal); }
.btn--seal::after { background: var(--paper); }
.btn--seal:hover, .btn--seal:focus-visible { color: var(--ink); border-color: var(--paper); }

.btn--line { color: var(--paper); border-color: var(--line-2); }
.btn--line::after { background: var(--paper); }
.btn--line:hover, .btn--line:focus-visible { color: var(--ink); border-color: var(--paper); }

.btn--ghost { color: var(--paper-2); border-color: transparent; padding-inline: 0; }
.btn--ghost::after { display: none; }
.btn--ghost:hover { color: var(--paper); }

.btn--lg { padding: 1.1rem 2.3rem; }
.btn--wide { width: 100%; }

.btns { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

/* A plain text link that underlines from the left on hover. */
.tlink {
  position: relative; display: inline-block; text-decoration: none;
  font-family: var(--sans); font-size: var(--t-sm);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc-t); padding-bottom: 2px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .38s var(--ease);
}
.tlink:hover::after { transform: scaleX(1); }

/* ------------------------------------------------------- SECTION FURNITURE */
.band { padding-block: clamp(3.6rem, 2.2rem + 6vw, 8rem); position: relative; }
.band--tight { padding-block: clamp(2.6rem, 1.8rem + 3.4vw, 4.5rem); }
.band--raised { background: var(--ink-2); }
.band--card   { background: var(--ink-3); }

/* Hairline divider between bands of the same colour. */
.band + .band.band--raised, .band--raised + .band { border-top: 1px solid var(--line); }

/* The small letterspaced label above a heading, with a short rule.
   The rule takes the section accent, which is how the printed menu does it. */
.eyebrow {
  display: flex; align-items: center; gap: .85rem;
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--acc-t);
  margin-bottom: var(--s4);
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px; background: currentColor; flex: 0 0 auto; opacity: .8;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ""; width: 34px; height: 1px; background: currentColor; flex: 0 0 auto; opacity: .8;
}

/* Japanese section label. Decorative, and always paired with English text,
   never the only way a section is named. */
.jp {
  font-family: var(--jp);
  font-size: var(--t-sm);
  letter-spacing: .3em;
  color: var(--paper-4);
  margin-bottom: var(--s3);
}
.jp--vert {
  writing-mode: vertical-rl;
  letter-spacing: .34em;
  position: absolute; top: 0; right: 0;
  font-size: var(--t-sm);
}

.head { max-width: 62ch; margin-bottom: var(--s7); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow { justify-content: center; }
.head--center .eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .8; }

.lede { font-size: var(--t-lg); color: var(--paper-2); max-width: 62ch; }

/* A small gold lozenge used as a divider, echoing the diamond on their
   printed menu between the logo and "THE MARK OF TIME". */
.lozenge { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--gold); }
.lozenge::before, .lozenge::after { content: ""; height: 1px; width: clamp(30px, 8vw, 90px); background: currentColor; opacity: .45; }
.lozenge span { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }

/* ------------------------------------------------------------------- HERO
   Deliberately type-led. KoBu's own food photography is honest phone
   photography. Beautiful at card size, but too busy and too flash-lit to
   carry a 5rem headline across it. So the headline sits on the brand's own
   black with the seigaiha behind it, and the one professionally lit
   photograph they own anchors the right-hand column at its native portrait
   aspect. Nothing is upscaled and nothing fights the type.                  */
.hero { position: relative; padding-block: clamp(7rem, 5rem + 10vw, 11rem) clamp(3.5rem, 2rem + 5vw, 6rem); overflow: hidden; }
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.hero__copy { position: relative; }

/* The 古 seal from the logo, oversized and ghosted behind the headline.
   Kept fully inside the copy column: half a glyph bleeding off the edge reads
   as a stray red mark rather than as a seal. */
.hero__seal {
  position: absolute; top: -2.2rem; left: -.4rem; z-index: -1;
  font-family: var(--jp); font-size: clamp(6.5rem, 4rem + 8vw, 11rem);
  line-height: .9; color: var(--seal);
  opacity: .11;
  pointer-events: none; user-select: none;
}

.hero h1 { margin-bottom: var(--s5); }
.hero h1 em {
  font-style: italic;
  color: var(--gold);
}

.hero__lede { font-size: var(--t-lg); color: var(--paper-2); max-width: 46ch; margin-bottom: var(--s6); }

.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5);
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: var(--t-sm);
  color: var(--paper-3);
}
.hero__meta a { color: var(--paper-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.hero__meta a:hover { color: var(--paper); border-bottom-color: currentColor; }

/* Hero figure: photograph with a hairline gold frame offset behind it.
   Note the photo is targeted by its own class, not by `.hero__fig img`. The
   koi ornament is also an img inside this figure, and an element-level
   selector here would out-specify .hero__koi and stretch the ornament across
   the whole photograph. */
.hero__fig { position: relative; }
.hero__photo {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-md);
}
.hero__fig::before {   /* offset frame */
  content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 1px solid var(--gold); opacity: .38;
  border-radius: var(--r-md);
  z-index: -1;
}
/* Gold koi ornament, lifted from KoBu's own menu artwork. It hangs off the
   bottom-left corner of the frame so it reads as an applied ornament rather
   than as a watermark printed over the photograph. */
.hero__koi {
  position: absolute; bottom: -2.6rem; left: -4.2rem; z-index: 2;
  width: clamp(88px, 8.5vw, 142px); height: auto;
  aspect-ratio: auto;
  opacity: .9;
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .75));
}

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; gap: var(--s7); }
  .hero__fig { max-width: 420px; margin-inline: auto; order: -1; }
  .hero__fig::before { inset: .8rem -.8rem -.8rem .8rem; }
  /* The figure is centred and the margins are tight here, so the ornament
     would hang half off the screen. Better absent than clipped. */
  .hero__koi { display: none; }
  .hero__seal { left: -1rem; top: -2.4rem; }
}

/* ------------------------------------------------------- OPEN / CLOSED DOT */
.status {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-3);
}
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--paper-4); flex: 0 0 auto; }
.status--open  { color: var(--paper-2); }
.status--open  .status__dot { background: #56C271; box-shadow: 0 0 0 0 rgba(86, 194, 113, .6); animation: pulse 2.4s infinite; }
.status--shut  .status__dot { background: var(--seal-t); }
@keyframes pulse {
  70%  { box-shadow: 0 0 0 8px rgba(86, 194, 113, 0); }
  100% { box-shadow: 0 0 0 0   rgba(86, 194, 113, 0); }
}

/* ----------------------------------------------------------------- TICKER
   A slow marquee of the fish names. Purely decorative, aria-hidden, and it
   stops dead for anyone who has asked for reduced motion.                   */
.ticker {
  border-block: 1px solid var(--line);
  background: var(--ink-2);
  padding-block: var(--s4);
  overflow: hidden;
  display: flex;
}
.ticker__track { display: flex; flex: 0 0 auto; animation: slide 44s linear infinite; }
.ticker__set { display: flex; flex: 0 0 auto; align-items: center; }
.ticker__set span {
  font-family: var(--sans); font-size: var(--t-sm);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--paper-4);
  padding-inline: clamp(1.1rem, .6rem + 1.6vw, 2.2rem);
  display: inline-flex; align-items: center; gap: clamp(1.1rem, .6rem + 1.6vw, 2.2rem);
  white-space: nowrap;
}
.ticker__set span::after {
  content: ""; width: 5px; height: 5px; background: var(--gold);
  transform: rotate(45deg); opacity: .55; flex: 0 0 auto;
}
@keyframes slide { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ------------------------------------------------------------------ STORY
   Two columns: prose against a portrait photograph.                         */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2rem, 1rem + 4vw, 5.5rem);
  align-items: center;
}
.story--flip > *:first-child { order: 2; }
.story__fig { position: relative; }
.story__fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); }
.story__fig figcaption {
  margin-top: var(--s3);
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-4);
}
/* Doubled class so this beats `.story__fig img` outright. Both selectors are
   one class plus one element, so relying on source order alone is fragile. */
.story__fig.story__fig--wide img { aspect-ratio: 3 / 2; }
@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; gap: var(--s6); }
  .story--flip > *:first-child { order: 0; }
  .story__fig { max-width: 460px; }
}

/* A pull quote / statement line, set large in the serif italic. */
.statement {
  font-size: var(--t-2xl); line-height: 1.3; font-style: italic;
  color: var(--paper); max-width: 32ch;
}

/* Numbered facts, e.g. 8 seats / 5 courses. */
.facts { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s8); margin-top: var(--s6); }
.facts__n {
  font-size: var(--t-2xl); line-height: 1; color: var(--acc-t);
  font-variant-numeric: lining-nums;
}
.facts__l {
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper-3); margin-top: .5rem;
}

/* -------------------------------------------------------- SIGNATURE CARDS */
.cols { display: grid; gap: clamp(1.3rem, .8rem + 1.8vw, 2.2rem); }
/* 420px, not 320px: at 320 a 1240px wrap fits three tracks and a four-item
   block lands as 3 + 1 instead of the intended 2 x 2. */
.cols--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.cols--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cols--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.sig {
  position: relative;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.sig:hover { border-color: var(--line-2); transform: translateY(-4px); }
.sig__img { overflow: hidden; background: var(--ink-4); }
.sig__img img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .7s var(--ease);
}
.sig:hover .sig__img img { transform: scale(1.05); }
.sig__body { padding: var(--s5); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.sig__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.sig__body h3 { font-size: var(--t-lg); }
.sig__price {
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .06em; color: var(--acc-t); white-space: nowrap;
}
.sig__desc { font-size: var(--t-sm); color: var(--paper-3); font-style: italic; }
.sig__sec {
  margin-top: auto; padding-top: var(--s4);
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: .18em; text-transform: uppercase; color: var(--paper-4);
}

/* --------------------------------------------------------------- FEATURE
   Full-bleed image with copy in a panel. Used for the Omakase Room.         */
.feature { position: relative; overflow: hidden; }
.feature__img { position: absolute; inset: 0; }
.feature__img img { width: 100%; height: 100%; object-fit: cover; }
.feature__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(8,8,10,.95) 0%, rgba(8,8,10,.86) 38%, rgba(8,8,10,.5) 70%, rgba(8,8,10,.42) 100%);
}
.feature__in { position: relative; padding-block: clamp(4rem, 2.6rem + 7vw, 9rem); }
.feature__panel { max-width: 54ch; }
@media (max-width: 700px) {
  .feature__img::after { background: linear-gradient(180deg, rgba(8,8,10,.72) 0%, rgba(8,8,10,.93) 55%); }
}

/* ---------------------------------------------------------------- GALLERY */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(.5rem, .3rem + .8vw, 1rem); }
.gallery figure { position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--ink-3); }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease), filter .5s; filter: saturate(.94); }
.gallery figure:hover img { transform: scale(1.06); filter: saturate(1.06); }

/* ============================== MENU PAGE ============================== */

/* Sticky filter bar. With three menus and well over a hundred items, search
   is the fastest way in, and the chips switch between the menus. */
.menubar {
  position: sticky; top: 68px; z-index: 60;
  background: rgba(8, 8, 10, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s4);
}
.menubar__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 auto; }
.chip {
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-3);
  padding: .5rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: color .3s, border-color .3s, background .3s;
  white-space: nowrap;
}
.chip:hover { color: var(--paper); border-color: var(--line-2); }
.chip[aria-pressed="true"] { color: var(--ink); background: var(--paper); border-color: var(--paper); }

.menufind { flex: 0 1 260px; position: relative; }
.menufind input {
  width: 100%;
  background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--paper);
  font-family: var(--sans); font-size: var(--t-sm);
  padding: .58rem .8rem .58rem 2.1rem;
}
.menufind input::placeholder { color: var(--paper-4); }
.menufind input:focus { border-color: var(--line-2); outline-offset: 1px; }
.menufind .ico {
  position: absolute; left: .72rem; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--paper-4); pointer-events: none;
}
.menucount {
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-4); white-space: nowrap;
}

/* One whole menu: Dining, Late Night or Beverages. A large heading over its
   own run of sections, with clear air between one menu and the next. */
.mmenu { padding-top: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); }
/* With scripting off the menus stack, so they need a divider. With it on,
   only one shows at a time and a divider would just float above it. */
.no-js .mmenu + .mmenu {
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  border-top: 1px solid var(--line-2);
}
.mmenu__head { text-align: center; margin-bottom: var(--s6); }
.mmenu__head h2 { font-size: var(--t-3xl); color: var(--paper); }
.mmenu__note {
  margin-top: var(--s3);
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}

/* The printed pages. Side by side when there is room to read them, one above
   the other on a phone. Each is a link to the full-size image. */
.mpages {
  display: grid; gap: clamp(1rem, .6rem + 1.6vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  max-width: 1200px; margin-inline: auto;
}
.mpage {
  display: block; background: #F8F5EE;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 1px 0 rgba(244, 240, 233, .06), 0 18px 40px -18px rgba(0, 0, 0, .8);
  transition: transform .4s, box-shadow .4s;
}
.mpage:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(244, 240, 233, .1), 0 24px 50px -18px rgba(0, 0, 0, .9); }
.mpage img { display: block; width: 100%; height: auto; }
.mpages__hint {
  margin-top: var(--s4); text-align: center;
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--paper-4);
}

/* The same menu as text, folded away under the pages. */
.mtext { margin-top: var(--s6); border-top: 1px solid var(--line); }
.mtext > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; justify-content: center; gap: var(--s3);
  padding-block: var(--s4);
  font-family: var(--sans); font-size: var(--t-sm); color: var(--paper-3);
}
.mtext > summary::-webkit-details-marker { display: none; }
.mtext > summary::before { content: "+"; color: var(--gold); }
.mtext[open] > summary::before { content: "\2212"; }
.mtext > summary:hover { color: var(--paper); }
.mtext > summary .n {
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-4);
}

/* A menu section. The accent classes are the only difference between them,
   matching the colour rotation printed on KoBu's own menu. */
.mgroup { padding-top: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); }
.mgroup--amber { --acc: var(--amber); --acc-t: var(--amber-t); }
.mgroup--azure { --acc: var(--azure); --acc-t: var(--azure-t); }
.mgroup--seal  { --acc: var(--seal);  --acc-t: var(--seal-t); }

.mgroup__head { margin-bottom: var(--s5); }
.mgroup__title {
  display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.mgroup__title h3 {
  font-family: var(--sans); font-size: var(--t-xl); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--acc-t);
}
.mgroup__title .jp { margin: 0; }
.mgroup__title .n {
  margin-left: auto;
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--paper-4);
}
/* Short accent rule beneath the heading, as printed. */
.mgroup__rule { height: 2px; width: 56px; background: var(--acc); margin-top: -1px; }
.mgroup__blurb { margin-top: var(--s4); font-size: var(--t-sm); color: var(--paper-3); font-style: italic; max-width: 64ch; }
.mgroup__note {
  margin-top: var(--s3);
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--paper-4);
}

.mlist { display: grid; gap: 0; }

/* One menu row: name, dotted leader, price. The leader is a repeating
   gradient rather than a row of full stops, so it stays optically even at
   any width and never wraps to the next line. */
.mitem {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name price" "jp jp" "desc desc";
  column-gap: var(--s3);
  align-items: baseline;
  padding-block: .85rem;
  border-bottom: 1px solid rgba(244, 240, 233, .07);
}
.mitem:last-child { border-bottom: 0; }

/* .mitem sets display:grid above, and an author rule beats the browser's own
   [hidden] { display: none }, so a row hidden by the filter would otherwise
   stay on screen. Say it explicitly. */
.mitem[hidden] { display: none; }
.mitem__name {
  grid-area: name;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: var(--t-lg);
}
/* The Japanese name printed under each dish on the paper menu. */
.mitem__jp {
  grid-area: jp;
  font-family: var(--jp); font-size: var(--t-xs);
  letter-spacing: .12em; color: var(--paper-4);
  margin-top: .15rem;
}
.mitem__desc {
  grid-area: desc;
  font-size: var(--t-sm); font-style: italic; color: var(--paper-3);
  margin-top: .2rem; max-width: 68ch;
}
.mitem__price {
  grid-area: price;
  font-family: var(--sans); font-size: var(--t-base); font-weight: 500;
  color: var(--acc-t); white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
/* Dual price rows (glass / bottle): two fixed columns so every price in
   the section lines up vertically, plus a heading row to say which is which. */
.mitem--dual { grid-template-columns: 1fr 3.6rem 3.6rem; grid-template-areas: "name p1 p2" "jp jp jp" "desc desc desc"; }
.mitem--dual .mitem__p1 { grid-area: p1; }
.mitem--dual .mitem__p2 { grid-area: p2; }
.mitem__p1, .mitem__p2 {
  font-family: var(--sans); font-size: var(--t-base); font-weight: 500;
  color: var(--acc-t); text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.mitem__p2 { color: var(--paper-3); }

.dualhead {
  display: grid; grid-template-columns: 1fr 3.6rem 3.6rem; column-gap: var(--s3);
  padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.dualhead span {
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--paper-4);
  text-align: right;
}
.dualhead span:first-child { text-align: left; }

/* The "served raw" marker. KoBu's printed menu uses a small fish symbol.
   Emoji renders differently on every platform and is announced clumsily by
   screen readers, so this is a drawn marker with a real text label. */
.raw {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  color: var(--azure);
  transform: translateY(1px);
}
/* The symbol is referenced with <use> and carries no .ico class, so it needs
   its own stroke and fill here. Without this it renders as solid black, which
   on this ground is an invisible marker. */
.raw svg {
  width: .95rem; height: .95rem;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.mkt { font-family: var(--sans); font-size: var(--t-sm); letter-spacing: .05em; }

.legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5);
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: var(--t-sm); color: var(--paper-3);
}
.legend > span { display: inline-flex; align-items: center; gap: .5rem; }

.advisory {
  margin-top: var(--s5); padding: var(--s5);
  background: var(--ink-2); border: 1px solid var(--line);
  border-left: 2px solid var(--seal);
  border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--paper-3);
}
.advisory strong {
  display: block; font-family: var(--sans); font-weight: 600;
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-2); margin-bottom: .5rem;
}

.noresults { padding: var(--s8) 0; text-align: center; color: var(--paper-3); }

/* ============================== VISIT PAGE ============================== */
.infogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.info__k {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--acc-t); margin-bottom: var(--s3);
}
.info__k .ico { width: 15px; height: 15px; }
.info a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
.info a:hover { border-bottom-color: currentColor; }

.hourlist { display: grid; gap: 0; max-width: 420px; }
.hourrow {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding-block: .6rem;
  border-bottom: 1px solid rgba(244, 240, 233, .07);
  font-size: var(--t-base);
}
.hourrow:last-child { border-bottom: 0; }
.hourrow dt { color: var(--paper-2); }
.hourrow dd { margin: 0; color: var(--paper-3); font-variant-numeric: lining-nums tabular-nums; }
.hourrow.is-today dt, .hourrow.is-today dd { color: var(--paper); }
.hourrow.is-today dt::after {
  content: "Today";
  margin-left: .7rem; padding: .1rem .45rem;
  font-family: var(--sans); font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); border-radius: var(--r-sm);
  vertical-align: middle;
}

/* -------------------------------------------------------------------- FORM */
.form { display: grid; gap: var(--s5); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--s5); }
.f { display: grid; gap: .45rem; }
.f label {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--paper-2);
}
.f .req { color: var(--seal-t); }
.f input, .f textarea, .f select {
  width: 100%;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--paper);
  font-family: var(--serif); font-size: var(--t-base);
  padding: .8rem .9rem;
  transition: border-color .3s;
}
.f textarea { resize: vertical; min-height: 7rem; }
.f input:hover, .f textarea:hover, .f select:hover { border-color: var(--line-2); }
.f input:focus, .f textarea:focus, .f select:focus { border-color: var(--azure); }
.f input[aria-invalid="true"], .f textarea[aria-invalid="true"] { border-color: var(--seal-t); }
.f__err { font-family: var(--sans); font-size: var(--t-xs); color: var(--seal-t); min-height: 1em; }
.f__hint { font-family: var(--sans); font-size: var(--t-xs); color: var(--paper-4); }
/* Honeypot. Off-screen rather than display:none so bots still fill it in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { font-family: var(--sans); font-size: var(--t-sm); color: var(--paper-2); min-height: 1.4em; }
.form__status.is-err { color: var(--seal-t); }

/* --------------------------------------------------------------- OPENTABLE
   The panel around KoBu's booking widget.

   OpenTable's "standard" embed is a fixed-size box, roughly 224 by 300, and
   it is not responsive. Stretching it is not an option, so the panel centres
   it instead and carries the width itself. That way the section still looks
   deliberate at any screen size rather than leaving a small orphaned box
   floating in a wide column.

   The widget is a third-party iframe: it can be blocked by a privacy
   extension, and it cannot load at all when the site is opened from a folder
   with no internet. So the "Book on OpenTable" button below it is permanent,
   not a fallback. There is always one path to a table that works.           */
.otbook {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s5);
  display: grid;
  gap: var(--s4);
}
.otbook__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.otbook__label {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--seal-t);
}
.otbook__by {
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: .1em; color: var(--paper-4);
}

/* Holds whatever OpenTable injects. min-height reserves the space up front so
   the section does not jump when the iframe finally arrives. */
.otbook__frame {
  display: flex; align-items: center; justify-content: center;
  min-height: 310px;
  padding-block: var(--s2);
}
.otbook__frame iframe {
  max-width: 100%;
  border: 0;
  color-scheme: normal;   /* let the widget keep its own theme */
}
.otbook__note {
  font-family: var(--sans); font-size: var(--t-sm);
  color: var(--paper-3); text-align: center; max-width: 34ch;
}
.otbook__note a { color: var(--azure-t); }

/* Once the iframe is in, the placeholder text stops taking up a line. */
.otbook__frame.is-loaded .otbook__note { display: none; }
.otbook__frame.is-loaded { min-height: 0; }

.otbook__cta { margin-top: var(--s2); }

/* A compact inline OpenTable button for use in a row of other buttons. */
.btn--ot { background: var(--seal); color: var(--paper); border-color: var(--seal); }
.btn--ot::after { background: var(--paper); }
.btn--ot:hover, .btn--ot:focus-visible { color: var(--ink); border-color: var(--paper); }

@media (max-width: 700px) {
  .otbook { padding: var(--s4); }
}

/* ------------------------------------------------------------------ FOOTER */
.foot { background: var(--ink-2); border-top: 1px solid var(--line); padding-block: var(--s8) var(--s6); }
.foot__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--s7) var(--s6);
}
.foot h2 {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper-4); margin-bottom: var(--s4);
}
.foot__mark { height: 46px; width: auto; margin-bottom: var(--s4); }
.foot p, .foot li, .foot address { font-size: var(--t-sm); color: var(--paper-3); }
.foot__links { display: grid; gap: .55rem; }
.foot a { text-decoration: none; transition: color .3s; }
.foot a:hover { color: var(--paper); }
.foot__social { display: flex; gap: .6rem; margin-top: var(--s4); }
.foot__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--paper-3);
  transition: color .3s, border-color .3s;
}
.foot__social a:hover { color: var(--paper); border-color: var(--line-2); }
.foot__social .ico { width: 17px; height: 17px; }
.foot__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5);
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: var(--t-xs);
  color: var(--paper-4);
}
.foot__legal p { font-size: var(--t-xs); color: var(--paper-4); }

/* ------------------------------------------------------------ SCROLL REVEAL
   Elements marked data-in start faintly offset and settle once seen. The
   .no-js guard below means that if scripting is off they are simply visible;
   content is never hidden behind JavaScript.                                */
[data-in] { opacity: 0; transform: translateY(20px); }
[data-in].is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.no-js [data-in] { opacity: 1; transform: none; }

/* Headline lines that wipe up from a mask. */
.line { display: block; overflow: hidden; }
.line > span {
  display: block;
  transform: translateY(105%);
  animation: rise .95s var(--ease) forwards;
  animation-delay: calc(var(--ld, 0) * 1ms);
}
@keyframes rise { to { transform: translateY(0); } }
.no-js .line > span { transform: none; animation: none; }

/* ------------------------------------------------------------------- PRINT
   People genuinely print restaurant menus. Drop to black on white, unstick
   the bar, hide the furniture, and let the sections break cleanly.          */
@media print {
  :root { --paper: #000; --paper-2: #222; --paper-3: #444; --paper-4: #666;
          --ink: #fff; --ink-2: #fff; --ink-3: #fff; --line: #ccc; --line-2: #999; }
  body { background: #fff; color: #000; }
  .site-head, .menubar, .ticker, .foot__social, .btns, .btn, .skip, .hero__koi, .nav-scrim { display: none !important; }
  .seigaiha::before, .hero__seal { display: none; }
  [data-in] { opacity: 1 !important; transform: none !important; }
  .line > span { transform: none; animation: none; }
  .mmenu + .mmenu { page-break-before: always; border-top: 0; margin-top: 0; }
  /* Print every menu's pages, one page image per sheet. */
  .mmenu[hidden] { display: block; }
  .mmenu__head, .mpages__hint, .mtext { display: none; }
  .mpages { display: block; }
  .mpage { box-shadow: none; page-break-after: always; }
  .mgroup { page-break-inside: avoid; padding-top: 1.4rem; }
  .mitem { page-break-inside: avoid; }
  a { text-decoration: none; }
  .advisory { border: 1px solid #999; }
}

/* --------------------------------------------------------- REDUCED MOTION
   Everything decorative stops. Nothing that carries meaning is removed.     */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-in] { opacity: 1; transform: none; }
  .line > span { transform: none; }
  .ticker__track { animation: none; }
  .status__dot { animation: none; }
}