/* ============================================================
   lotabin — Design Tokens
   Cinematic monochrome, editorial Japanese minimalism.
   ============================================================ */

:root {
  /* ---- Palette ---- */
  --ink-1000: #07070a;          /* deepest stage black */
  --ink-900:  #0d0d11;          /* primary background  */
  --ink-800:  #14141a;          /* card / muted        */
  --ink-700:  #1c1c24;          /* divider on dark     */
  --ink-500:  #4a4a55;
  --ink-300:  #8c8c96;          /* muted text on dark  */

  --paper-50:  #f6f4ef;         /* warm off-white      */
  --paper-100: #ece7dc;         /* paper, entertainment surface */
  --paper-200: #d8d2c4;
  --paper-300: #b9b1a0;
  --paper-700: #4b4640;
  --paper-900: #1d1a16;

  --silver-100: #e8e8ec;        /* logo silver highlight */
  --silver-300: #b5b7c0;        /* logo silver mid       */
  --silver-500: #6e7178;

  --bronze:     #c8a876;        /* singular warm accent (film stock) */
  --bronze-deep:#9a7d4f;

  /* ---- Semantic ---- */
  --bg:         var(--ink-900);
  --bg-elev:    var(--ink-800);
  --fg:         var(--paper-50);
  --fg-muted:   var(--ink-300);
  --rule:       rgba(246, 244, 239, 0.10);
  --rule-strong:rgba(246, 244, 239, 0.22);
  --accent:     var(--bronze);
  --accent-fg:  var(--ink-1000);

  /* Entertainment lane (paper / warmer) */
  --ent-bg:     var(--paper-100);
  --ent-fg:     var(--paper-900);
  --ent-muted:  var(--paper-700);
  --ent-rule:   rgba(29, 26, 22, 0.14);

  /* ---- Type ---- */
  --font-display: 'Playfair Display', 'Shippori Mincho B1', 'Times New Roman', serif;
  --font-serif:   'Source Serif 4', 'Shippori Mincho B1', Georgia, serif;
  --font-sans:    'Montserrat', 'Noto Sans JP', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* fluid type */
  --fs-eyebrow: clamp(0.70rem, 0.65rem + 0.2vw, 0.78rem);
  --fs-body:    clamp(1.00rem, 0.95rem + 0.25vw, 1.10rem);
  --fs-lead:    clamp(1.15rem, 1.05rem + 0.4vw, 1.40rem);
  --fs-h3:      clamp(1.50rem, 1.30rem + 0.8vw, 2.10rem);
  --fs-h2:      clamp(2.25rem, 1.80rem + 2.2vw, 4.00rem);
  --fs-h1:      clamp(3.25rem, 2.20rem + 5.5vw, 8.50rem);
  --fs-mega:    clamp(4.50rem, 3.20rem + 8.0vw, 12.0rem);

  /* ---- Space (4 / 8) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---- Motion ---- */
  --e-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast:   180ms;
  --d-med:    320ms;
  --d-slow:   620ms;

  /* ---- Z ---- */
  --z-base: 0; --z-raise: 10; --z-sticky: 40; --z-overlay: 100; --z-toast: 1000;
}

/* ============================================================
   Base
   ============================================================ */

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

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "ss01", "ss02", "tnum";
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--bronze); color: var(--ink-1000); }

/* ============================================================
   Typography utilities
   ============================================================ */

.display     { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; line-height: 0.95; }
.display-it  { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }
.serif       { font-family: var(--font-serif); letter-spacing: -0.005em; }
.mono        { font-family: var(--font-mono); letter-spacing: 0.04em; }
.eyebrow     { font-family: var(--font-mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.22em; color: var(--fg-muted); }

.h1   { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 500; line-height: 0.94; letter-spacing: -0.03em; }
.mega { font-family: var(--font-display); font-size: var(--fs-mega); font-weight: 500; line-height: 0.88; letter-spacing: -0.045em; }
.h2   { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; line-height: 1.02; letter-spacing: -0.025em; }
.h3   { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; letter-spacing: -0.018em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--fg); font-weight: 300; max-width: 60ch; }
.muted{ color: var(--fg-muted); }

/* ============================================================
   Layout
   ============================================================ */

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--s-5); }
@media (min-width: 768px) { .container { padding: 0 var(--s-7); } }
@media (min-width: 1280px) { .container { padding: 0 var(--s-8); } }

.section { padding: var(--s-10) 0; position: relative; }
@media (max-width: 768px) { .section { padding: var(--s-9) 0; } }

.rule       { border-top: 1px solid var(--rule); }
.rule-strong{ border-top: 1px solid var(--rule-strong); }

/* ============================================================
   Film grain (canvas-free, animated)
   ============================================================ */

.grain::before {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: var(--z-overlay);
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  animation: grainShift 1.6s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%,-1%); }
  60%  { transform: translate(-1%,-3%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0,0); }
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 14px 22px;
  min-height: 48px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--d-med) var(--e-out),
              color var(--d-med) var(--e-out),
              border-color var(--d-med) var(--e-out),
              transform var(--d-fast) var(--e-out);
  white-space: nowrap;
  position: relative;
}
.btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--paper-50);
  color: var(--ink-1000);
}
.btn-primary:hover { background: var(--bronze); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--rule-strong);
}
.btn-ghost:hover { border-color: var(--paper-50); background: rgba(246,244,239,0.04); }

.btn-dark {
  background: var(--ink-1000);
  color: var(--paper-50);
}
.btn-dark:hover { background: var(--bronze-deep); color: var(--ink-1000); }

.btn-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 6px;
  transition: color var(--d-med) var(--e-out), border-color var(--d-med) var(--e-out);
}
.btn-arrow .arr { transition: transform var(--d-med) var(--e-out); }
.btn-arrow:hover { color: var(--bronze); border-color: var(--bronze); }
.btn-arrow:hover .arr { transform: translateX(6px); }

/* ============================================================
   Header / nav
   ============================================================ */

.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--s-5);
  transition: background var(--d-med) var(--e-out), border-color var(--d-med) var(--e-out);
  border-bottom: 1px solid transparent;
}
@media (min-width: 768px) { .site-header { padding: 22px var(--s-7); } }
@media (min-width: 1024px) {
  .site-header { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: var(--s-5); }
  .site-header > .nav-tools { justify-self: end; }
}
.site-header.scrolled {
  background: rgba(13,13,17,0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--rule);
}
.site-header.on-paper {
  color: var(--paper-900);
}
.site-header.on-paper.scrolled {
  background: rgba(236,231,220,0.78);
  border-bottom-color: var(--ent-rule);
}

.brand-mark {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em;
  font-size: 1.25rem;
}
.brand-mark img { height: 32px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.site-header.on-paper .brand-mark img { filter: none; }

.nav-links {
  display: none; gap: var(--s-6); align-items: center;
}
@media (min-width: 1024px) { .nav-links { display: flex; width: 100%; } }
.nav-side { display: inline-flex; align-items: center; gap: var(--s-6); flex: 1 1 0; min-width: 0; }
.nav-side-l { justify-content: flex-end; }
.nav-side-r { justify-content: flex-start; }
.nav-links a,
.nav-links .nav-drop-trigger {
  white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  position: relative;
  transition: color var(--d-med) var(--e-out);
  color: inherit;
  opacity: 0.85;
}
button.nav-drop-trigger {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer;
}
.nav-links a::after,
.nav-links .nav-drop-trigger::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  height: 1px; width: 100%; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-med) var(--e-out);
}
.nav-links a:hover,
.nav-links .nav-drop-trigger:hover { opacity: 1; }
.nav-links a:hover::after,
.nav-links .nav-drop-trigger:hover::after { transform: scaleX(1); }

/* ---- Nav dropdown banner (How We Craft) ----
   Anchored to the fixed header (not the trigger) so it spans the full
   viewport width. Opens on hover only; mouse clicks don't pin it
   (:has(:focus-visible) keeps it keyboard-accessible without reacting
   to click focus). While it fades out, visibility lingers for --d-med,
   so the pointer can cross the header padding gap and re-catch the
   banner via .nav-drop-menu:hover — no invisible bridge needed. */
/* Full-page blur scrim shown while the "How We Craft" dropdown is open.
   Lives as the header's lowest layer (z-index:-1) so it sits above all page
   content (the header is its own stacking context at z-sticky) but below the
   header's brand / nav / dropdown, which stay crisp on top. */
.site-header::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(13,13,17,0.32);
  backdrop-filter: blur(9px) saturate(115%);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-med) var(--e-out), visibility 0s linear var(--d-med);
}
.site-header:has(.nav-drop:hover)::before,
.site-header:has(.nav-drop:focus-within)::before {
  opacity: 1; visibility: visible;
  transition: opacity var(--d-med) var(--e-out), visibility 0s;
}
.site-header.on-paper::before { background: rgba(236,231,220,0.30); }

.nav-drop { display: inline-flex; position: relative; }
.nav-drop-menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-4px);
  margin-top: 12px;
  min-width: 188px;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 7px;
  background: rgba(13,13,17,0.92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--rule);
  border-radius: 13px;
  box-shadow: 0 20px 54px -14px rgba(0,0,0,0.6);
  opacity: 0; visibility: hidden;
  transition:
    opacity var(--d-med) var(--e-out),
    transform var(--d-med) var(--e-out),
    visibility 0s linear var(--d-med);
}
/* Transparent hover-bridge spanning the gap between trigger and menu, so the
   pointer never leaves a hoverable region when travelling from the
   "How We Craft" trigger down into the open menu. It is part of the menu
   (inherits its visibility), so it only catches the pointer once open. */
.nav-drop-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 18px;
}
.nav-drop:hover .nav-drop-menu,
.nav-links .nav-drop-menu:hover,
.nav-drop:has(:focus-visible) .nav-drop-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity var(--d-med) var(--e-out),
    transform var(--d-med) var(--e-out),
    visibility 0s;
}
.nav-links .nav-drop-menu a {
  padding: 9px 16px;
  white-space: nowrap;
  text-align: center;
  border-radius: 8px;
  opacity: 0.72;
}
.nav-links .nav-drop-menu a::after { display: none; }
.nav-links .nav-drop-menu a:hover { opacity: 1; background: rgba(255,255,255,0.06); }
.site-header.on-paper .nav-drop-menu {
  background: rgba(236,231,220,0.92);
  border-color: var(--ent-rule);
}
.site-header.on-paper .nav-links .nav-drop-menu a:hover { background: rgba(29,26,22,0.06); }

/* Wreath "home" mark in the nav */
.nav-home { display: inline-flex; align-items: center; padding: 0 2px; }
.nav-home::after { display: none !important; }
.nav-home-mark {
  position: relative; display: block; width: 30px; height: 30px;
  background: url("../assets/logotohome-light.png") center / contain no-repeat;
  opacity: 0.85;
  transition: transform 700ms var(--e-out), opacity var(--d-med) var(--e-out);
}
.nav-home-mark::after {
  content: ""; position: absolute; inset: 0;
  background: url("../assets/logotohome-bronze.png") center / contain no-repeat;
  opacity: 0;
  transition: opacity var(--d-med) var(--e-out);
}
.nav-home:hover .nav-home-mark,
.nav-home:focus-visible .nav-home-mark { opacity: 1; transform: rotate(180deg); }
.nav-home:hover .nav-home-mark::after,
.nav-home:focus-visible .nav-home-mark::after { opacity: 1; }

.nav-tools { display: inline-flex; align-items: center; gap: 14px; }

.lang-toggle {
  display: none; /* JA toggle hidden — English-only for now */
  font-family: var(--font-mono); font-size: 0.70rem; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  overflow: hidden;
  height: 32px;
  color: inherit;
}
.lang-toggle button {
  background: transparent; color: inherit; border: 0; cursor: pointer;
  padding: 0 12px; height: 100%;
  transition: background var(--d-med) var(--e-out), color var(--d-med) var(--e-out);
  font: inherit;
}
.lang-toggle button.active { background: var(--paper-50); color: var(--ink-1000); }
.site-header.on-paper .lang-toggle { border-color: var(--ent-rule); }
.site-header.on-paper .lang-toggle button.active { background: var(--ink-1000); color: var(--paper-50); }

/* ---- Agency ⇄ Entertainment mode toggle (right corner) ---- */
.mode-toggle {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  overflow: hidden;
  height: 32px;
  color: inherit;
}
.mode-toggle a {
  display: inline-flex; align-items: center; height: 100%;
  padding: 0 14px;
  color: inherit; text-decoration: none; white-space: nowrap;
  opacity: 0.6;
  transition: background var(--d-med) var(--e-out), color var(--d-med) var(--e-out), opacity var(--d-med) var(--e-out);
}
.mode-toggle a:hover { opacity: 1; }
.mode-toggle a.active { background: var(--paper-50); color: var(--ink-1000); opacity: 1; }
.site-header.on-paper .mode-toggle { border-color: var(--ent-rule); }
.site-header.on-paper .mode-toggle a.active { background: var(--ink-1000); color: var(--paper-50); }
@media (max-width: 1023px) { .mode-toggle { display: none; } }

.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: 999px;
  color: inherit; cursor: pointer;
}
@media (min-width: 1024px) { .menu-btn { display: none; } }

/* Hamburger → X morph (mobile). When the menu opens the two bars slide to
   centre and cross into an X. The button floats above the overlay so it
   stays visible/tappable and doubles as the close control. Desktop never
   opens the overlay (button hidden ≥1024), so this is mobile-only. */
.menu-btn .mb-icon {
  position: relative; display: block; width: 18px; height: 14px;
  transition: transform var(--d-med) var(--e-out);
}
.menu-btn .mb-bar {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--d-med) var(--e-out);
}
.menu-btn .mb-top { top: 3px; }
.menu-btn .mb-bot { bottom: 3px; }
/* Single morphing button: the SAME hamburger transforms into the X when the
   overlay opens (no separate close element). This works because the open-state
   header is lifted above the overlay (see body.menu-open .site-header below),
   so the button paints on top of the panel. The two bars slide to centre and
   cross while the whole icon eases a quarter-turn. */
body.menu-open .menu-btn { border-color: var(--paper-50); background: rgba(246,244,239,0.06); }
body.menu-open .menu-btn .mb-icon { transform: rotate(90deg); }
body.menu-open .menu-btn .mb-top { transform: translateY(3.2px) rotate(45deg); }
body.menu-open .menu-btn .mb-bot { transform: translateY(-3.2px) rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(13,13,17,0.72);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
  display: flex; flex-direction: column; padding: 110px var(--s-5) var(--s-7);
  transform: translateY(-100%);
  transition: transform var(--d-slow) var(--e-out);
  /* Items stay anchored below the header and never scroll up into it — the
     panel is a fixed dropdown, not a scroll region. Short viewports are
     handled by the compacting @media (max-height) rule below. */
  overflow: hidden;
  overscroll-behavior: contain;
}
.mobile-menu.open { transform: translateY(0); }
/* When the overlay is open, keep the header (logo) visible ON TOP of the
   blurred popup and fully transparent — the menu is not cast over it. The
   header sits above the overlay (z-overlay) but below the X button (z-toast),
   so the close control stays tappable. */
body.menu-open .site-header {
  z-index: calc(var(--z-overlay) + 10);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
/* Short viewports — phones held horizontally, small landscape tablets.
   Compact the overlay so every item fits and type scales to the available
   height instead of the (now very wide) width. (Defined AFTER the base
   mobile-menu rules below, so it wins when active.) */
.mobile-menu .menu-group-label {
  display: block;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  opacity: 0.5;
  padding: 18px 0 2px;
}
.mobile-menu a.menu-sub {
  font-size: clamp(2rem, 8vw, 3.4rem);
  padding-left: 20px;
}
.mobile-menu a {
  font-family: "Courier New", Courier, monospace; font-size: clamp(2rem, 8vw, 3.4rem);
  padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--fg);
}

/* ---- Mobile menu: Home + collapsible "How We Craft" + typewriter submenu ---- */
/* Editorial index numbers 01–05 in bronze before each top-level item. */
.mobile-menu { counter-reset: mmitem; }
.mobile-menu > a,
.mobile-menu > .mm-group { counter-increment: mmitem; }
.mobile-menu > a::before,
.mobile-menu .mm-toggle::before {
  content: counter(mmitem, decimal-leading-zero);
  font-family: var(--font-mono); font-weight: 600;
  font-size: 0.32em; letter-spacing: 0.1em;
  color: var(--bronze);
}
.mobile-menu > a::before { margin-right: 0.8em; vertical-align: 0.95em; }
.mobile-menu .mm-toggle::before { align-self: flex-start; margin-top: 0.4em; }
.mobile-menu .mm-group { display: block; }
.mobile-menu .mm-toggle {
  -webkit-appearance: none; appearance: none;
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 0.34em;
  font-family: "Courier New", Courier, monospace; font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1.05;
  padding: 14px 0; color: var(--fg);
  background: none; border: 0; border-bottom: 1px solid var(--rule);
}
.mobile-menu .mm-chevron {
  color: var(--bronze); opacity: 0.72; font-size: 0.82em; line-height: 1;
  display: inline-block; transform-origin: 50% 54%;
  transition: transform var(--d-med) var(--e-out), opacity var(--d-med) var(--e-out);
}
.mobile-menu .mm-group.open .mm-chevron { transform: rotate(90deg); opacity: 1; }

/* close (X) button — viewport-fixed sibling so it never scrolls with the
   menu; shown only while the overlay is open */
.mm-close {
  position: fixed; top: 18px; right: var(--s-5); z-index: var(--z-toast);
  width: 40px; height: 40px;
  display: none; align-items: center; justify-content: center;
  background: rgba(246,244,239,0.06); border: 1px solid var(--paper-50); border-radius: 999px;
  color: var(--paper-50); cursor: pointer;
  opacity: 0; transform: scale(0.85) rotate(-90deg);
  transition: opacity var(--d-med) var(--e-out), transform var(--d-med) var(--e-spring),
              border-color var(--d-med) var(--e-out), background var(--d-med) var(--e-out);
}
/* Retired: the hamburger itself now morphs into the X (single button), so the
   separate close element is hidden. Its [data-menu-close] handler stays wired
   harmlessly in case markup is reused. */
.mm-close { display: none !important; }
body.menu-open .mm-close { display: none !important; }
.mm-close:hover { border-color: var(--paper-50); background: rgba(246,244,239,0.05); }
.mm-close svg { width: 16px; height: 16px; display: block; }
@media (min-width: 768px) { .mm-close { top: 22px; right: var(--s-7); } }

/* submenu shown only when the group is open (JS toggles inline display) */
.mobile-menu .mm-sub { display: none; }
.mobile-menu .mm-sub-inner { padding-left: 26px; }
.mobile-menu .mm-sub a {
  display: block; white-space: nowrap;
  font-family: "Courier New", Courier, monospace; font-weight: 400;
  font-size: clamp(0.95rem, 4.4vw, 1.35rem); letter-spacing: 0.04em;
  color: var(--fg-muted); padding: 13px 0; border-bottom: 0;
}
.mobile-menu .mm-sub a:last-child { border-bottom: 0; }
.mobile-menu .mm-sub a[aria-current="page"] { color: var(--bronze); }
.mobile-menu .mm-sub a .tw-dash { color: var(--bronze); opacity: 0.55; margin-right: 0.7em; }
.mobile-menu .mm-caret {
  display: inline-block; width: 0.46em; height: 1em; vertical-align: -0.12em;
  margin-left: 1px; border-right: 2px solid var(--bronze);
  animation: mmCaret 0.85s steps(1) infinite;
}
@keyframes mmCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu .mm-caret { animation: none; }
  .mobile-menu .mm-sub { transition: none; }
}

/* Short viewports (small phones / landscape): compact every item so the whole
   menu fits without scrolling and never slides up under the header. Placed
   after the base rules above so it overrides them when active. */
@media (max-height: 720px) {
  .mobile-menu { padding: 100px var(--s-5) var(--s-5); justify-content: flex-start; }
  .mobile-menu .menu-group-label { padding: 5px 0 1px; }
  .mobile-menu a,
  .mobile-menu .mm-toggle,
  .mobile-menu a.menu-sub {
    font-size: clamp(1.25rem, 5.9vh, 2rem); line-height: 1.15; padding: 5px 0;
  }
  .mobile-menu .mm-sub a { font-size: clamp(0.95rem, 3.3vh, 1.2rem); padding: 5px 0; }
}

/* Landscape phones / tablets (≥768px wide): match the overlay's horizontal
   padding to the header's, which steps up to --s-7 at this width — so the menu
   items line up with the brand-mark instead of sitting further left toward the
   notch. Portrait phones (<768px) keep --s-5 on both and stay aligned. The
   overlay is never shown on desktop, so desktop layout is untouched. */
@media (min-width: 768px) {
  .mobile-menu { padding-left: var(--s-7); padding-right: var(--s-7); }
}

/* Phone held horizontally: slim the header banner a little and tuck the open
   overlay just beneath it. Height-gated (+ landscape) so normal desktop
   windows, which are far taller, are never affected. */
@media (orientation: landscape) and (max-height: 480px) {
  .site-header { padding-top: 14px; padding-bottom: 14px; }
  .mobile-menu { padding-top: 84px; }
}

/* ============================================================
   Reveal animations
   ============================================================ */

.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-up   { opacity: 0; transform: translateY(60px); transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); }
.reveal-up.in{ opacity: 1; transform: translateY(0); }

.reveal-fade { opacity: 0; transition: opacity 1100ms var(--e-out); }
.reveal-fade.in { opacity: 1; }

.mask-line { display: block; overflow: hidden; }
.mask-line > span { display: inline-block; transform: translateY(105%); transition: transform 950ms var(--e-out); will-change: transform; }
.mask-line.in > span { transform: translateY(0); }

.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--e-out), transform 700ms var(--e-out); }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 60ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 140ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 220ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 300ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 380ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 460ms; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 540ms; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 620ms; }

/* parallax data attribute hook */
[data-parallax] { will-change: transform; }

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mask-line > span { transform: none !important; }
  .reveal, .reveal-up, .reveal-fade, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .grain::before { animation: none !important; }
}

/* ============================================================
   Misc primitives
   ============================================================ */

.kbd-rule {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 10px;
}
.kbd-rule::before { content:""; width: 28px; height: 1px; background: currentColor; }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.70rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg);
}

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bronze); display: inline-block; }
.dot.live { box-shadow: 0 0 0 0 rgba(200,168,118,0.6); animation: pulseDot 2s infinite; }
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(200,168,118,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(200,168,118,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,168,118,0); }
}