/* site-chrome.css — the homepage menu + footer on every other page (2026-11-01).
 * Loaded by includes/site-chrome.php on wp_enqueue_scripts; never on the
 * homepage (demo3-render.php skips wp_head, and carries its own sheets).
 *
 *   1. what nav.css needs that demo3.css gives it on the homepage: the motion
 *      and radius tokens (DESIGN.md D1/D4), the two faces, .mb2-sr
 *   2. the fixed top bar (.omtb-ih.omtb-sc-bar) — neutral grey glass, R=G=B
 *   3. the footer (.omtb-sf) — the homepage's .mb5-foot rules, scoped, on a
 *      static field (the aura canvas is drawn by native-close.js on the
 *      homepage only), ink #0A0A0A (DESIGN.md: the blue-cast ink is killed)
 * Values: DESIGN.md only.  No grain on type or controls (D3); the footer field
 * carries none at all since fix2 (Carter, 2026-11-01).
 */

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../demo3/fonts/hanken-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../demo3/fonts/hanken-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../demo3/fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../demo3/fonts/instrument-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* the bar's height is a layout contract the old masthead set up: --ih-h (60px)
   is read by site-repair.php's map shell and home-scroll-cinematic.php.
   site-chrome.js publishes the bar's measured rect.bottom as --site-header-h. */
:root { --ih-h: 60px; }
/* ONE content gutter + ONE measure for every page under this chrome (critic r1, 2026-11-02: header 30 ·
   footer 60 · archive 108 · cart 64 · account 26 · grid 16 at 1440).  They are the footer's own numbers, so
   the footer reads them and nothing in it moves; archives, search, cart, account, checkout and product
   line their left edge up with the footer's content edge.  DESIGN.md carries no gutter value — this is
   the chrome region's token, owned here.  The fixed bar keeps its own 30 px inset (Carter-approved). */
:root { --site-gut: clamp(16px, 4.2vw, 72px); --site-max: 1480px; }
@media (min-width: 2200px) { :root { --site-gut: 10vw; --site-max: 2080px; } }
body:not(.home) #content, body:not(.home) main.frame-zero-main { padding-top: var(--ih-h); }

/* ── 1. tokens nav.css reads (homepage: demo3.css :root) — scoped, not global ── */
.mb2-nav-root, .omtb-sf {
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r-ctl: 999px;
  --r-panel: 14px;
  --r-tip: 8px;
  --dur-s: 180ms; --dur-m: 320ms; --dur-l: 600ms;
  --dur-s-out: 120ms; --dur-m-out: 180ms; --dur-l-out: 320ms;
  --sc-ink: #0A0A0A;
  --sc-bone: #EDE7D8;
}
.mb2-nav-root .mb2-sr, .omtb-sf .mb2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mb2-nav-root { font-family: "Instrument Sans", Inter, system-ui, sans-serif; }
.mb2-nav-root svg { overflow: visible; }

/* ── 2. the fixed bar (every page but the homepage) ── */
.omtb-ih.omtb-sc-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;                       /* > 49 (chapters contract); the overlay (50) comes later in the DOM and covers it */
  height: calc(var(--ih-h) + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  /* on the site gutter: the bar's MB mark sits on the same x as the content edge and the footer's mark (critic r2 #6) */
  padding: env(safe-area-inset-top, 0px) var(--site-gut) 0;
  color: var(--sc-bone);
  font: 700 12px/1 "Hanken Grotesk", Inter, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* neutral grey glass: R = G = B, no saturate (DESIGN.md D2, 2026-10-31) */
  background: linear-gradient(180deg, rgba(22, 22, 22, .80), rgba(10, 10, 10, .72));
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: inset 0 -1px 0 rgba(237, 231, 216, .10);
}
.omtb-sc-bar__mark { display: block; width: 44px; height: 30px; color: var(--sc-bone); opacity: .92; border-radius: var(--r-tip); transition: opacity var(--dur-s) var(--ease); }
.omtb-sc-bar__mark svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.omtb-sc-bar__mark:hover { opacity: 1; }
.omtb-sc-bar__fill { flex: 1; }
.omtb-sc-bar__btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-ctl);
  background: transparent; color: rgba(237, 231, 216, .86);
  font: inherit; text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-s-out) var(--ease), background-color var(--dur-s-out) var(--ease);
}
.omtb-sc-bar__btn:hover { color: var(--sc-bone); background-color: rgba(237, 231, 216, .08); transition-duration: var(--dur-s); }
.omtb-sc-bar__btn:focus-visible, .omtb-sc-bar__mark:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(237, 231, 216, .72); }
/* fix2 (Carter: "the icons… are tiny"): one family, 22 px glyphs, 2 px stroke, 44 px hit areas */
.omtb-sc-bar__btn .mb2-ico { display: block; width: 22px; height: 22px; }
.omtb-sc-bar__cart { margin-right: 4px; }
.omtb-sc-bar__seat { flex: none; width: 44px; }          /* the trigger's seat */
/* the trigger, seated in the bar instead of floating at the gutter */
.mb2-nav-root--bar .mb2-nav__trigger {
  top: calc(env(safe-area-inset-top, 0px) + (var(--ih-h) - 44px) / 2);
  right: var(--site-gut);
  width: 44px; height: 44px;
  background: transparent;                /* fix2: the same rest state as search · account · cart beside it */
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
@media (hover: hover) { .mb2-nav-root--bar .mb2-nav__trigger:hover { background-color: rgba(237, 231, 216, .08); box-shadow: none; } }
@media (hover: none) { .mb2-nav-root--bar .mb2-nav__trigger:hover:not([aria-expanded="true"]) { background-color: transparent; box-shadow: none; } }   /* a tap never leaves a sticky disc */
@media (max-width: 699px) {
  .omtb-sc-bar__acct { display: none; }                 /* the phone: search · cart · menu; Account lives in the menu */
}
body.admin-bar .omtb-ih.omtb-sc-bar { top: 32px; }
body.admin-bar .mb2-nav-root--bar .mb2-nav__trigger { top: calc(32px + (var(--ih-h) - 44px) / 2); }
@media (max-width: 782px) {
  body.admin-bar .omtb-ih.omtb-sc-bar { top: 46px; }
  body.admin-bar .mb2-nav-root--bar .mb2-nav__trigger { top: calc(46px + (var(--ih-h) - 44px) / 2); }
}

/* ── 3. the footer — the homepage's .mb5-foot, scoped to .omtb-sf ── */
.omtb-sf {
  --mb5-ink: var(--sc-ink);
  --mb5-bone: #EDE7D8;
  --mb5-bone-86: rgba(237, 231, 216, .86);
  --mb5-bone-70: rgba(237, 231, 216, .70);
  --mb5-ember-t: #FF7D11;
  --mb5-gut: var(--site-gut);
  --mb5-disp: "Hanken Grotesk", Inter, system-ui, sans-serif;
  --mb5-body: "Instrument Sans", Inter, system-ui, sans-serif;
  --mb5-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(100svh, 860px);
  margin: 0;
  padding-block: clamp(120px, 16vh, 220px) clamp(24px, 4vh, 48px);
  box-sizing: border-box;
  overflow: hidden;
  color: var(--mb5-bone);
  font-family: var(--mb5-body);
  text-align: left;
}
.omtb-sf *, .omtb-sf *::before, .omtb-sf *::after { box-sizing: border-box; }
.omtb-sf .mb5-ground { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--mb5-ink); }
.omtb-sf .mb5-film { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%); mask-image: linear-gradient(180deg, transparent, #000 22%); }   /* the footer's top edge is pure ink, flush with the page's */
/* the field (fix2, Carter 2026-11-01: "no blur, just a jittering purple-green thing").
   Cause, measured on live /about/: the two grain layers stepped 22–30 px every
   150 ms (overlay + multiply) over a coloured field whose blobs were only 40 px
   blurred, so the colour itself shimmered.  Now: ink with two deep tints from
   DESIGN.md (Deep Petrol #1A4E50, Dusk Violet #7C6BA6), each a wide ellipse
   blurred 96 px — no edge left to see — and NOTHING animates: no grain layer, no
   drift.  It rasterises once and holds still. */
.omtb-sf .mb5-film::before {
  content: ""; position: absolute; inset: -18% -14% 12%;
  background:
    radial-gradient(58% 62% at 26% 46%, rgba(26, 78, 80, .62), rgba(26, 78, 80, 0) 72%),
    radial-gradient(52% 56% at 76% 40%, rgba(124, 107, 166, .24), rgba(124, 107, 166, 0) 74%);
  filter: blur(96px);
  /* no seam where the page's ink meets the footer: the field rises out of ink */
  -webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 46%);
  mask-image: linear-gradient(180deg, transparent 6%, #000 46%);
}
.omtb-sf .omtb-sf--still .mb5-film::before { display: none; }
.omtb-sf .mb5-grain, .omtb-sf .mb5-vig { position: absolute; pointer-events: none; }
.omtb-sf .mb5-vig { inset: 0; background: radial-gradient(120% 90% at 50% 30%, transparent 34%, rgba(10, 10, 10, .72) 100%), linear-gradient(180deg, transparent 30%, rgba(10, 10, 10, .84) 64%, var(--mb5-ink) 92%); }
/* no grain in the footer field (Carter, fix2): the layers stay in the shared markup for the homepage */
.omtb-sf .mb5-grain { display: none; }

.omtb-sf .mb5-frame { position: relative; z-index: 1; width: min(100% - 2 * var(--mb5-gut), var(--site-max)); margin-inline: auto; }
.omtb-sf .mb5-foot__in { display: flex; flex-direction: column; flex: 1; justify-content: flex-end; gap: clamp(26px, 4vh, 44px); }
.omtb-sf .mb5-foot__hero { --fw: clamp(40px, 6vw, 120px); display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--fw) * .26); }
.omtb-sf .mb5-mark { order: 2; display: block; flex: none; width: auto; height: calc(var(--fw) * .697); margin: 0 0 calc(var(--fw) * .068); color: var(--mb5-bone); fill: currentColor; }
.omtb-sf .mb5-word { margin: 0; font: 800 var(--fw)/.84 var(--mb5-disp); letter-spacing: -.035em; text-transform: uppercase; color: var(--mb5-bone); text-wrap: nowrap; }
.omtb-sf .mb5-word span { display: block; }
/* fix2: the lockup — mark left, line one's cap height and cap line (demo4-close.css carries the derivation) */
.omtb-sf .mb5-foot__hero--lockup { justify-content: flex-start; align-items: flex-start; gap: calc(var(--fw) * .2); }
.omtb-sf .mb5-foot__hero--lockup .mb5-mark { order: 0; margin: calc(var(--fw) * .075) 0 0; }
.omtb-sf .mb5-foot__base { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 96px); row-gap: 36px; align-items: start; padding: clamp(28px, 5.2vh, 56px) 0 clamp(24px, 3vh, 36px); border-top: 1px solid rgba(237, 231, 216, .36); }
.omtb-sf .mb5-news { position: relative; margin: 0; }
.omtb-sf .mb5-news__l { display: block; margin-bottom: 6px; font: 700 11px/1.3 var(--mb5-disp); letter-spacing: .2em; text-transform: uppercase; color: var(--mb5-bone); }
.omtb-sf .mb5-news__row { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(237, 231, 216, .5); transition: border-color .3s var(--mb5-ease); }
.omtb-sf .mb5-news__row:focus-within { border-color: var(--mb5-ember-t); }
.omtb-sf .mb5-news__in { flex: 1; min-width: 0; min-height: 48px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--mb5-bone); font: 400 clamp(16px, 1.2vw, 20px)/1 var(--mb5-body); }
.omtb-sf .mb5-news__in::placeholder { color: var(--mb5-bone-70); opacity: 1; }
.omtb-sf .mb5-news__in:focus { outline: none; }
.omtb-sf .mb5-news__go { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--mb5-ember-t); font: 700 12px/1 var(--mb5-disp); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.omtb-sf .mb5-news__go span { transition: transform .35s var(--mb5-ease); }
.omtb-sf .mb5-news__go:hover span { transform: translateX(5px); }
.omtb-sf .mb5-news__go:focus-visible { outline: 2px solid var(--mb5-ember-t); outline-offset: 3px; }
.omtb-sf .mb5-news__go:disabled { opacity: .6; cursor: progress; }
.omtb-sf .mb5-news__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.omtb-sf .mb5-news__msg { min-height: 1.4em; margin: 10px 0 0; font: 400 13px/1.4 var(--mb5-body); color: var(--mb5-bone-86); }
.omtb-sf .mb5-news__msg.is-bad { color: var(--mb5-ember-t); }
.omtb-sf .mb5-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); padding: 0; }
.omtb-sf .mb5-map__col { display: grid; align-content: start; gap: 2px; }
.omtb-sf .mb5-map__h { margin: 0 0 8px; font: 700 11px/1.3 var(--mb5-disp); letter-spacing: .2em; text-transform: uppercase; color: var(--mb5-bone-86); }
/* links in full bone on ink: 15.6:1 (≥ 7:1, DESIGN contrast floor) */
.omtb-sf .mb5-map a { display: inline-flex; align-items: center; min-height: 32px; color: var(--mb5-bone); text-decoration: none; font: 400 14px/1.3 var(--mb5-body); transition: color .25s linear; }
.omtb-sf .mb5-map a:hover { color: var(--mb5-ember-t); }
.omtb-sf .mb5-map a:focus-visible { outline: 2px solid var(--mb5-ember-t); outline-offset: 2px; border-radius: var(--r-tip); }
.omtb-sf .mb5-legal { grid-column: 1 / -1; display: flex; gap: 16px; margin: 0; font: 700 11px/1.4 var(--mb5-disp); letter-spacing: .18em; text-transform: uppercase; color: var(--mb5-bone-86); }
@media (min-width: 2200px) {
  .omtb-sf .mb5-map a { font-size: 16px; min-height: 36px; }
  .omtb-sf .mb5-map__h, .omtb-sf .mb5-news__l { font-size: 12px; }
  .omtb-sf .mb5-legal { font-size: 13px; }
}
@media (max-width: 1100px) { .omtb-sf .mb5-foot__base { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) {
  .omtb-sf .mb5-foot__hero { --fw: clamp(28px, 8.2vw, 64px); }
  .omtb-sf .mb5-legal { flex-direction: column; gap: 4px; }
}
@media (max-width: 699px) {
  .omtb-sf { padding: 112px 0 28px; min-height: 0; }
  .omtb-sf .mb5-map { gap: 16px; }
}