/* ————— Semperr tokens ————— */
:root {
  --ink: #0b1220;
  --ink-soft: #141c2e;
  --ink-line: #1e2640;
  --paper: #f8f6f0;
  --paper-warm: #efeadb;
  --paper-line: #e4dfcf;
  --gold: #c9a961;
  --gold-deep: #a68846;
  --steel: #4a7fc1;
  --steel-deep: #2f5c96;
  --rust: #b8502a;
  --green: #4a7a5c;
  --muted: #6b7388;
  --muted-paper: #7a7466;

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --maxw: 1440px;
  --pad: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* Type */
.h-display { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 0.95; }
.h-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.h-serif { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; }
.t-body { font-size: 16px; line-height: 1.55; color: var(--muted-paper); }
.t-body-ink { font-size: 16px; line-height: 1.55; color: var(--ink); }

/* Grain overlay */
.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* Hairlines */
.hair { border-top: 1px solid var(--paper-line); }
.hair-ink { border-top: 1px solid var(--ink-line); }

/* Utility */
.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.row { display: flex; gap: 24px; }
.col { display: flex; flex-direction: column; }

/* Dark sections */
.dark { background: var(--ink); color: var(--paper); }
.dark .t-body { color: #9099ad; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; }

/* Reveal base */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════
   Mobile reset — @media (max-width: 768px)
   Overrides inline React styles via !important on
   shared classes + kebab-case attribute selectors
   (React serializes inline style to DOM kebab-case).
   Desktop rendering untouched.
   ═══════════════════════════════════════════════ */

.m-only { display: none; }

@media (max-width: 768px) {
  /* Safety: no horizontal overflow from any visual */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }

  /* Container padding */
  :root { --pad: 20px; }

  /* Type — class-based !important beats inline styles */
  .h-display {
    font-size: clamp(38px, 10.5vw, 54px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;
  }
  .h-serif {
    font-size: clamp(22px, 5.5vw, 30px) !important;
    line-height: 1.18 !important;
  }
  .h-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }
  .t-body, .t-body-ink {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Body copy */
  p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  /* All <section> padding reduced — avoids having to pattern-match padding inline */
  section, header, footer {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  header { padding-top: 0; padding-bottom: 0; }

  /* Collapse any inline grid to single column, tighten gap.
     NOTE: React serializes `gridTemplateColumns` as `grid-template-columns` in the DOM. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Fixed container heights that break mobile (kebab-case matches DOM style attribute) */
  [style*="min-height: 7"],
  [style*="min-height: 6"],
  [style*="min-height: 5"],
  [style*="height: 700"],
  [style*="height: 620"],
  [style*="height: 560"] {
    min-height: 0 !important;
  }

  /* Safety for SVGs/images */
  svg, img { max-width: 100% !important; height: auto !important; }

  /* Masthead toggles */
  .mast-nav, .mast-eyebrow, .mast-live, .mast-cta { display: none !important; }
  .mast-burger { display: inline-flex !important; }

  /* Utility classes */
  .m-hide { display: none !important; }
  .m-only { display: block !important; }

  /* Catch inline `clamp(Npx, ...)` display sizes — values stay literal in the DOM */
  [style*="clamp(180px"], [style*="clamp(168px"], [style*="clamp(160px"],
  [style*="clamp(156px"], [style*="clamp(144px"], [style*="clamp(140px"],
  [style*="clamp(132px"], [style*="clamp(128px"], [style*="clamp(124px"],
  [style*="clamp(120px"], [style*="clamp(112px"], [style*="clamp(104px"],
  [style*="clamp(100px"], [style*="clamp(96px"], [style*="clamp(88px"] {
    font-size: 46px !important;
    line-height: 1.02 !important;
  }
  [style*="clamp(80px"], [style*="clamp(76px"], [style*="clamp(72px"],
  [style*="clamp(68px"] {
    font-size: 40px !important;
    line-height: 1.04 !important;
  }
  [style*="clamp(64px"], [style*="clamp(60px"], [style*="clamp(56px"] {
    font-size: 34px !important;
    line-height: 1.04 !important;
  }
  [style*="clamp(52px"], [style*="clamp(48px"] {
    font-size: 30px !important;
  }
  [style*="clamp(44px"], [style*="clamp(42px"], [style*="clamp(40px"] {
    font-size: 26px !important;
  }
  [style*="clamp(38px"], [style*="clamp(36px"] {
    font-size: 22px !important;
  }

  /* Decorative grain — quieter on mobile */
  .grain { opacity: 0.02 !important; }

  /* Common inline fontSize numbers (React -> "font-size: Npx" in DOM) */
  [style*="font-size: 120px"],
  [style*="font-size: 128px"],
  [style*="font-size: 140px"],
  [style*="font-size: 156px"],
  [style*="font-size: 160px"],
  [style*="font-size: 168px"] { font-size: 46px !important; line-height: 1.02 !important; }
  [style*="font-size: 96px"],
  [style*="font-size: 104px"],
  [style*="font-size: 112px"] { font-size: 40px !important; }
  [style*="font-size: 72px"],
  [style*="font-size: 80px"],
  [style*="font-size: 88px"] { font-size: 34px !important; }
  [style*="font-size: 56px"],
  [style*="font-size: 60px"],
  [style*="font-size: 64px"] { font-size: 28px !important; }
  [style*="font-size: 48px"],
  [style*="font-size: 52px"] { font-size: 24px !important; }
}