/* =========================================================
   vofti.com — shared site CSS
   Extracted from the original single-file index.html so every
   route (/, /papers, /play, /method, /essay, /topic/*) shares
   the same design tokens without each page re-declaring them.
   Keep tokens centralised; scene-specific overrides stay in
   their own page.
   ========================================================= */

:root {
  --ink-black:  #0a0908;
  --ink-paper:  #f3efe7;
  --ink-cream:  #f1ebdc;
  --ink-fawn:   #cfc6b3;
  --ink-stone:  #9a9080;
  --ink-gold:   #caa472;
  --ink-rust:   #7a3a1a;
  --ink-clay:   #3a1f12;
  --ink-soft:   #d8d3c9;
  --ink-deep:   #08070a;
  --ink-graphite: #15110d;
  --hairline-warm:  rgba(202,164,114,0.20);
  --hairline-cool:  rgba(255,255,255,0.08);
  --ink-mute:   #7a6e5a;
  --ink-hover:  #1a1410;
}

html, body { background: var(--ink-black); color: var(--ink-paper); }
body {
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* Horizontal-overflow guard — same belt-and-braces rule the
   homepage already had. Without this, absolutely-positioned
   marginalia push the page wider than the viewport on phones. */
html, body { max-width: 100vw; overflow-x: hidden; }
body, body p, body h1, body h2, body h3, body blockquote { overflow-wrap: anywhere; }

::selection { background: var(--ink-paper); color: var(--ink-black); }
html { scroll-behavior: smooth; }

/* ---------- type system ---------- */

.display {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.88;
}
.eyebrow {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 11px;
}
.mono-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.05em;
  font-size: 10.5px;
  text-transform: uppercase;
}
.editorial { font-family: 'Source Serif 4', Georgia, serif; }
.editorial-italic { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; }

/* ---------- texture ---------- */

.grain::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
}
.paper-grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ---------- shared chrome ---------- */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  mix-blend-mode: difference;
  color: #f3efe7;
}
.site-nav a { color: inherit; text-decoration: none; }
.site-nav-left { display: flex; align-items: baseline; gap: 18px; }
.site-nav-mark {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.04em;
  font-size: 22px;
}
.site-nav-mark .dot { color: var(--ink-gold); }
.site-nav-routes { display: flex; gap: 20px; }
.site-nav-routes a { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.78; transition: opacity .15s; }
.site-nav-routes a:hover { opacity: 1; }
.site-nav-routes a.active { opacity: 1; }
.site-nav-routes a.active::before { content: "·"; margin-right: 6px; color: var(--ink-gold); }
.site-nav-auth { display: flex; gap: 14px; align-items: center; }
.site-nav-auth a { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.site-nav-auth .cta {
  border: 1px solid currentColor;
  padding: 8px 14px;
}

.site-footer {
  background: var(--ink-deep);
  color: var(--ink-fawn);
  padding: 80px 32px 40px;
  border-top: 1px solid var(--hairline-cool);
}
.site-footer-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h4 { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-gold); margin: 0 0 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer a { color: var(--ink-fawn); text-decoration: none; font-size: 13px; }
.site-footer a:hover { color: var(--ink-paper); }
.site-footer-bottom {
  max-width: 1400px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-cool);
  font-size: 11px;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- buttons / CTAs ---------- */

.btn {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 22px;
  transition: transform .15s, background .15s, color .15s;
}
.btn-primary { background: var(--ink-paper); color: var(--ink-black); }
.btn-primary:hover { background: var(--ink-gold); }
.btn-ghost { border: 1px solid currentColor; color: inherit; }
.btn-ghost:hover { background: currentColor; color: var(--ink-black); }

/* ---------- mobile ---------- */

@media (max-width: 767px) {
  html, body { width: 100vw; max-width: 100vw; overflow-x: hidden; }
  body, body * { box-sizing: border-box; }
  .grid > * { min-width: 0; }
  .display { font-size: 38px; line-height: 0.95; letter-spacing: -0.03em; }

  /* Two-row mobile nav: row 1 = mark + auth, row 2 = Papers/Play/Method/Essay.
     `display: contents` on .site-nav-left lifts its children (mark + routes)
     up to .site-nav's flex context so routes can claim a full-width second row
     via order:3 + width:100%. Otherwise nesting would trap it inside left. */
  .site-nav { padding: 10px 14px; flex-wrap: wrap; row-gap: 6px; }
  .site-nav-left { display: contents; }
  .site-nav-mark { font-size: 18px; }
  .site-nav-routes {
    display: flex; order: 3; width: 100%;
    gap: 18px; justify-content: center;
    padding-top: 8px;
    border-top: 1px solid var(--hairline-cool);
  }
  .site-nav-routes a { font-size: 9.5px; letter-spacing: 0.08em; opacity: 0.85; }
  .site-nav-auth a { font-size: 10px; letter-spacing: 0.10em; }
  .site-nav-auth .cta { padding: 5px 9px; }

  .site-footer { padding: 56px 18px 28px; }
  .site-footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ---------- pointer media: touch devices ---------- */
/* Pages can use [data-touch-hide] / [data-touch-show] to swap
   "HOVER · CLICK TO ENTER" → "TAP TO ENTER" without JS. */

@media (hover: none) and (pointer: coarse) {
  [data-touch-hide] { display: none !important; }
}
@media (hover: hover) and (pointer: fine) {
  [data-touch-show] { display: none !important; }
}

/* ---------- a11y utilities ---------- */

.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;
}

/* Visible focus ring for keyboard users — applied broadly so the
   editorial palette doesn't kill keyboard a11y by accident.
   Sharp-edged to match the hairline aesthetic, not rounded. */
:focus-visible {
  outline: 2px solid var(--ink-gold);
  outline-offset: 2px;
}
/* Suppress the default ring only when :focus-visible is supported,
   so mouse-clicks don't paint a gold ring on everything. */
:focus:not(:focus-visible) { outline: none; }

/* Skip-to-content link — visually hidden until focused. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--ink-paper);
  color: var(--ink-black);
  padding: 10px 16px;
  z-index: 1000;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
  html { scroll-behavior: auto; }
}