/* Nash — Daybreak v3 canonical shared layer.
   Every Nash page imports this. Page-specific styles override or extend
   AFTER this stylesheet loads. The tokens, topbar, brand mark, body
   paper-grain, buttons, footer, and motion baseline live here so the
   site stays cohesive even when individual pages diverge.

   Audit reference: docs/SITE-AUDIT-2026-05-21.md (Phase 2). */

/* ─── Tokens — Daybreak v3 ─────────────────────────────────────── */
:root{
  --paper:#FAF6EE;
  --paper2:#F4ECDC;
  --paper3:#E7DFCC;
  --paper-deep:#DDD1B7;

  --ink:#1F1B16;
  --ink2:#3A322A;
  --ink3:#6E5F4D;
  --ink4:#9C8E78;

  --brass:#C28A2A;
  --brass-deep:#9A6B17;
  --brass-soft:#F0DCB0;
  --brass-light:#E2A847;

  --mint:#7FB28C;     --mint-deep:#467959;
  --coral:#D86B5A;    --coral-deep:#A53A2C;
  --amber:#D9A24A;    --amber-deep:#A8780E;
  --sky:#7AA8C9;

  --suit-red:#7A3035;
  --suit-black:#0B0D12;
  --card-face:#EDE6D3;

  --hair:rgba(31,27,22,.08);
  --hair-strong:rgba(31,27,22,.14);
  --shadow-sm:0 1px 2px rgba(31,27,22,.04), 0 6px 18px rgba(31,27,22,.06);
  --shadow-card:var(--shadow-sm);
  --shadow-md:0 8px 28px rgba(31,27,22,.10);
  --shadow-raised:0 2px 6px rgba(31,27,22,.06), 0 12px 32px rgba(31,27,22,.06);
  --shadow-lg:0 24px 60px rgba(31,27,22,.14);
  --shadow-brass:0 14px 40px rgba(194,138,42,.22);

  --serif:'Source Serif 4','Source Serif Pro',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;

  --r-ctrl:12px;
  --r-card:20px;
  --r-shell:28px;

  --ease:cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ─── Reset + base ─────────────────────────────────────────────── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scrollbar-width:none}
::-webkit-scrollbar{display:none}
::selection{background:var(--brass);color:var(--paper)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"ss01","liga","kern";
  opacity:0;transition:opacity .32s var(--ease);   /* page-load fade-in via nash.js */
}
body.is-ready{opacity:1}

/* ─── Body paper-grain — Nash texture ─────────────────────────── */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  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.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;opacity:.045;
}
.wrap{position:relative;z-index:1}

/* ─── Topbar — Nash brand mark + nav ───────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:10px;
  padding-bottom:14px;border-bottom:1px solid var(--hair);
  margin-bottom:14px;
  font-family:var(--sans);font-size:10px;letter-spacing:.08em;
  font-weight:600;color:var(--ink3);text-transform:uppercase;
}
.topbar .mark{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--brass-deep);
  font-family:var(--serif);font-weight:800;font-style:italic;font-size:14px;
  text-transform:none;letter-spacing:0;text-decoration:none;
}
.topbar .mark .diamond{
  font-style:normal;font-weight:400;font-size:9px;line-height:1;
  color:var(--brass);transform:translateY(-1px);
  flex-shrink:0;width:1em;height:1em;
}
.topbar .spacer{flex:1}
.topbar a{
  color:var(--ink3);text-decoration:none;
  font-family:var(--mono);font-size:11px;font-weight:500;
  text-transform:none;letter-spacing:.04em;
  border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease;
}
.topbar a:hover{border-bottom-color:var(--brass);color:var(--ink2)}
.topbar a.mark{border-bottom:0}
.topbar a.mark:hover{border-bottom:0}

/* ─── Brass-italic emphasis (used inside h1/h2/p) ──────────────── */
em{color:var(--brass);font-style:italic;font-weight:inherit}
h1 em,h2 em,h3 em{font-weight:800}

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn{
  appearance:none;border:0;background:transparent;color:inherit;font:inherit;
  cursor:pointer;padding:0;
}
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--brass);color:var(--paper);
  font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-.005em;
  border-radius:var(--r-ctrl);padding:14px 20px;text-decoration:none;
  transition:background .18s var(--ease),transform .12s var(--ease);
  box-shadow:0 1px 0 rgba(31,27,22,.10),0 6px 14px rgba(194,138,42,.18);
}
.btn-primary:hover{background:var(--brass-deep)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{
  background:transparent;color:var(--ink2);
  font-family:var(--sans);font-weight:500;font-size:14px;
  padding:10px 14px;border-radius:var(--r-ctrl);text-decoration:none;
}
.btn-ghost:hover{color:var(--ink);background:var(--paper2)}

/* ─── .pcard — Nash playing card visual (canonical) ────────────── */
.pcard{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:40px;border-radius:6px;
  background:var(--card-face);
  color:var(--suit-black);
  font-family:var(--mono);font-size:14px;font-weight:600;
  border:1px solid rgba(31,27,22,0.06);
}
.pcard.red{color:var(--suit-red);font-weight:700}

/* ─── Footer — A Nash production ───────────────────────────────── */
footer.nash-foot{
  margin-top:64px;padding:32px 28px 48px;
  border-top:1px solid var(--hair);
  text-align:center;color:var(--ink3);
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  position:relative;z-index:2;
}
footer.nash-foot .diamond-mark{
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:14px;color:var(--brass);
}
footer.nash-foot .diamond-mark svg{width:18px;height:18px}
footer.nash-foot a{
  color:var(--ink3);text-decoration:underline;
  text-decoration-color:var(--hair-strong);text-underline-offset:3px;
}
footer.nash-foot a:hover{color:var(--brass-deep);text-decoration-color:var(--brass)}
footer.nash-foot .row{
  margin-top:10px;line-height:1.55;
  text-transform:none;letter-spacing:0;font-size:12px;color:var(--ink3);
}
footer.nash-foot .tagline{
  font-family:var(--serif);font-style:italic;font-weight:700;font-size:15px;
  color:var(--ink2);text-transform:none;letter-spacing:-.005em;margin:0 0 8px;
}
footer.nash-foot .tagline em{color:var(--brass);font-style:italic}

/* ─── Motion utilities ─────────────────────────────────────────── */
/* Word-by-word hero reveal — paired with nash.js splitText() */
.split-word{
  display:inline-block;opacity:0;transform:translateY(8px);
  transition:opacity .52s var(--ease),transform .52s var(--ease);
  will-change:opacity,transform;
}
.split-word.in{opacity:1;transform:translateY(0)}

/* Scroll-triggered reveal — paired with nash.js IntersectionObserver */
.reveal-on-scroll{
  opacity:0;transform:translateY(14px);
  transition:opacity .62s var(--ease),transform .62s var(--ease);
}
.reveal-on-scroll.in{opacity:1;transform:translateY(0)}

/* Magnetic CTA — JS adds inline transforms; CSS just declares intent */
.btn-primary[data-magnetic]{will-change:transform}

/* Honor user motion prefs */
@media (prefers-reduced-motion: reduce){
  body{opacity:1!important;transition:none!important}
  .split-word,.reveal-on-scroll{opacity:1!important;transform:none!important;transition:none!important}
  .btn-primary[data-magnetic]{transform:none!important}
}