/* ============================================================
   FIELD GUIDE — shared design system for darr.me
   Single source of truth. Every page links this file.
   Edit a token here and the whole site updates.
   ------------------------------------------------------------
   Palette: warm rust & pine screenprint  ·  Type: Bricolage /
   Newsreader / Space Mono  ·  Texture: film grain  ·  Motion:
   tactile "snap".  Supports light / dark / system themes.
   ============================================================ */

/* ---- 1. TOKENS ------------------------------------------------ */
:root {
  --paper:#E7DDC9; --paper-2:#DFD3BB; --panel:#E1D4B8;
  --ink:#241E18; --ink-soft:#5A4E40; --hair:#C3B49A;
  --rust:#BC4B22; --pine:#2E5A4C; --denim:#3C6684; --ochre:#CE9427; --brick:#8E3B34;
  --accent:var(--rust); --grain-opacity:0.05;
  --sans:"Bricolage Grotesque",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --maxw:1080px;
  /* Weekend Reel (physical-object colors: kraft folder, instant prints) */
  --hand:"Caveat","Bradley Hand",cursive;
  --kraft:#C9A878; --kraft-ink:#2A2016; --print:#F3ECDD; --print-edge:#E4D9C3; --sharpie:#2A2420; --desk-shadow:rgba(36,30,24,.28);
}
:root:not([data-theme="light"]) { @media (prefers-color-scheme: dark) {
  --paper:#201B16; --paper-2:#2A241D; --panel:#2C2620;
  --ink:#EDE3CF; --ink-soft:#B7A88E; --hair:#493E31;
  --rust:#E0693A; --pine:#5FA285; --denim:#6DA0C0; --ochre:#E4B24A; --brick:#CE6258;
  --grain-opacity:0.07;
  --kraft:#A58760; --print:#E6DDCB; --print-edge:#CFC3AB; --desk-shadow:rgba(0,0,0,.5);
}}
:root[data-theme="dark"] {
  --paper:#201B16; --paper-2:#2A241D; --panel:#2C2620;
  --ink:#EDE3CF; --ink-soft:#B7A88E; --hair:#493E31;
  --rust:#E0693A; --pine:#5FA285; --denim:#6DA0C0; --ochre:#E4B24A; --brick:#CE6258;
  --grain-opacity:0.07;
  --kraft:#A58760; --print:#E6DDCB; --print-edge:#CFC3AB; --desk-shadow:rgba(0,0,0,.5);
}

/* ---- 2. BASE ------------------------------------------------- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; position:relative; }
/* film / paper grain */
body::before { content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:var(--grain-opacity); mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] body::before, :root:not([data-theme="light"]) body::before { mix-blend-mode:screen; }
a { color:inherit; }
img { max-width:100%; }
[hidden]{ display:none !important; }

.wrap { max-width:var(--maxw); margin:0 auto; padding-inline:22px; }
h1,h2,h3 { font-family:var(--sans); text-wrap:balance; margin:0; }
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0; }

/* ---- 3. TOP BAR / NAV --------------------------------------- */
.topbar { position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(6px); border-bottom:1px solid var(--hair); }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; height:56px; }
.brand { font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:.01em; font-size:16px; text-decoration:none; }
.brand .dot { color:var(--rust); }
.nav { display:flex; gap:20px; align-items:center; }
.nav a { font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); }
.nav a:hover { color:var(--rust); }
.nav .themebtn { font-family:var(--mono); font-size:12px; background:transparent; border:1px solid var(--ink); color:var(--ink); border-radius:2px; padding:5px 9px; cursor:pointer; }
.nav .themebtn:hover { background:var(--ink); color:var(--paper); }
/* Phones: the links collapse into the Menu → trail map (built by field-guide.js).
   Without JS the links stay visible, just tighter. */
.nav .menubtn { display:none; font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  background:transparent; border:1px solid var(--ink); color:var(--ink); border-radius:2px; padding:5px 10px; cursor:pointer; }
.nav .menubtn[aria-expanded="true"] { background:var(--ink); color:var(--paper); }
@media (max-width:640px){
  .nav { gap:12px; }
  .nav a { font-size:11px; letter-spacing:.03em; }
  .fg-nav .nav a:not(.themebtn){ display:none; }
  .fg-nav .nav .menubtn { display:inline-block; }
}
/* Trail map — the full-screen phone menu */
.trailmap { position:fixed; left:0; right:0; bottom:0; top:calc(56px + env(safe-area-inset-top,0px)); z-index:49;
  background:var(--paper); overflow-y:auto; overscroll-behavior:contain; border-top:1px solid var(--hair); }
.trailmap[hidden] { display:none; }
.trailmap .wrap { padding-block:22px 40px; }
.trailmap .tm-group + .tm-group { margin-top:26px; }
.trailmap .eyebrow { margin-bottom:6px; }
.trailmap ol, .trailmap ul { list-style:none; margin:0; padding:0; }
.trailmap li { border-bottom:1px dotted var(--hair); }
.trailmap a { display:flex; align-items:baseline; gap:12px; padding:13px 2px; text-decoration:none; color:var(--ink); }
.trailmap .tm-sections a { font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:22px; line-height:1.05; }
.trailmap .tm-sections .no { font-family:var(--mono); font-weight:400; font-size:11px; color:var(--paper); background:var(--ink); border-radius:2px; padding:3px 6px; flex:none; transform:translateY(-3px); }
.trailmap .tm-pages a { flex-direction:column; gap:3px; }
.trailmap .tm-pages .t { font-family:var(--sans); font-weight:700; text-transform:uppercase; font-size:16px; letter-spacing:-.01em; line-height:1.1; }
.trailmap .tm-pages .s { font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--rust); }
.trailmap a[aria-current] .t, .trailmap a[aria-current] { color:var(--rust); }
.trailmap a:active { background:color-mix(in srgb, var(--ochre) 16%, transparent); }
.trailmap .tm-foot { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.trailmap .tm-foot a { display:inline-block; padding:10px 14px; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em;
  border:1.5px solid var(--ink); border-radius:2px; }
.trailmap .tm-foot a.primary { background:var(--ink); color:var(--paper); }
.sa .trailmap:not([hidden]) { animation:tm-open .28s cubic-bezier(.2,.7,.2,1); }
@keyframes tm-open { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0 0 0 0); } }
html.tm-open { overflow:hidden; }
@media (min-width:641px){ .trailmap { display:none !important; } }

/* ---- 4. BUTTONS --------------------------------------------- */
.btn { font-family:var(--mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  padding:11px 16px; border-radius:3px; border:2px solid var(--ink); display:inline-block;
  transition:transform .08s cubic-bezier(.2,.8,.2,1), background .12s, color .12s; }
.btn:active { transform:translateY(1px); }
.btn.primary { background:var(--ink); color:var(--paper); }
.btn.primary:hover { background:var(--rust); border-color:var(--rust); }
.btn.ghost:hover { background:var(--ink); color:var(--paper); }
@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } }

/* ---- 5. SECTION SCAFFOLD ------------------------------------ */
section { border-top:1px solid var(--hair); }
.sec .wrap { padding-block:52px; }
.sechead { display:flex; align-items:baseline; gap:14px; margin-bottom:8px; }
.sechead .no { font-family:var(--mono); font-size:12px; color:var(--paper); background:var(--ink); border-radius:2px; padding:3px 7px; }
.sechead h2 { font-weight:700; font-size:clamp(22px,3.4vw,30px); letter-spacing:-.01em; text-transform:uppercase; }
.seclead { font-size:16px; color:var(--ink-soft); max-width:60ch; margin:0 0 28px; }

/* ---- 6. HERO ------------------------------------------------ */
.hero .wrap { padding-block:64px 40px; }
.hero .stamp { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.hero h1 { font-weight:800; font-size:clamp(38px,7vw,76px); line-height:.98; letter-spacing:-.02em; max-width:16ch; }
.hero h1 .hl { color:var(--rust); }
.hero .through { font-family:var(--serif); font-size:clamp(18px,2.4vw,23px); max-width:52ch; margin-top:22px; color:var(--ink); }
.hero .ai { font-family:var(--mono); font-size:13px; letter-spacing:.03em; color:var(--pine); margin-top:16px; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }

/* ---- 7. TRAIL MARKERS / STAT STRIP + RIDGE ------------------ */
.ridge { width:100%; height:auto; display:block; margin:8px 0 0; max-width:760px; }
.markers-strip { display:grid; grid-template-columns:repeat(4,1fr); border:2px solid var(--ink); border-radius:4px; overflow:hidden; max-width:760px; margin-top:14px; }
@media (max-width:520px){ .markers-strip { grid-template-columns:repeat(2,1fr); } }
.stat { padding:16px 14px; border-right:1px solid var(--hair); }
.stat:nth-child(4n){ border-right:0; }
@media (max-width:520px){ .stat:nth-child(2n){ border-right:0; } .stat:nth-child(-n+2){ border-bottom:1px solid var(--hair); } }
.stat .cap { display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.stat .dot { width:9px; height:9px; border-radius:50%; flex:none; }
.stat .wp { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.stat .num { font-family:var(--sans); font-weight:800; color:var(--rust); line-height:1; font-size:clamp(26px,4.4vw,38px); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.stat .num.txt { font-size:clamp(22px,3.6vw,30px); }
.stat .lbl { font-family:var(--mono); font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft); margin-top:9px; line-height:1.45; }
.d-rust{background:var(--rust)} .d-denim{background:var(--denim)} .d-pine{background:var(--pine)} .d-ochre{background:var(--ochre)}

/* ---- 8. PILLARS --------------------------------------------- */
.pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:820px){ .pillars { grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .pillars { grid-template-columns:1fr; } }
.pillar { border-top:3px solid var(--accent); padding-top:12px; }
.pillar:nth-child(2){ border-color:var(--pine); } .pillar:nth-child(3){ border-color:var(--denim); } .pillar:nth-child(4){ border-color:var(--ochre); }
.pillar h3 { font-family:var(--sans); font-weight:700; font-size:17px; text-transform:uppercase; letter-spacing:-.01em; }
.pillar p { font-size:14.5px; color:var(--ink-soft); margin:8px 0 0; }

/* ---- 9. WORK / CASE CARDS ----------------------------------- */
.work { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:820px){ .work { grid-template-columns:1fr; } }
.work.two { grid-template-columns:repeat(2,1fr); }
@media (max-width:600px){ .work.two { grid-template-columns:1fr; } }
.chap { margin:0 0 14px; color:var(--rust); }
.case { background:var(--paper-2); border:1.5px solid var(--ink); border-radius:4px; padding:20px; position:relative;
  box-shadow:3px 3px 0 var(--hair); transition:transform .1s cubic-bezier(.2,.8,.2,1), box-shadow .1s; text-decoration:none; color:inherit; display:block; }
.case:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
@media (prefers-reduced-motion: reduce){ .case{ transition:none; } .case:hover{ transform:none; } }
.case .ct { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.case .pill { font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:2px; color:#F4EBD9; }
.case .soon { font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--hair); border-radius:2px; padding:3px 7px; }
.case h3 { font-family:var(--sans); font-weight:800; font-size:20px; text-transform:uppercase; letter-spacing:-.01em; line-height:1.02; }
.case .res { font-family:var(--mono); font-size:12.5px; color:var(--rust); margin-top:10px; }
.case p { font-size:14.5px; color:var(--ink-soft); margin:8px 0 0; }
.case .go { font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-top:14px; }

/* ---- 10. FRAMED PLATE (Kit / Shelf / Playlist / Lineup) ------ */
.plate { font-family:var(--serif); color:var(--ink); background:var(--panel); border:2px solid var(--ink); border-radius:7px;
  padding:20px 20px 16px; position:relative; box-shadow:5px 5px 0 var(--hair); }
.plate::before { content:""; position:absolute; left:10px; right:10px; top:7px; height:3px;
  background:repeating-linear-gradient(90deg, var(--hair) 0 3px, transparent 3px 6px); opacity:.5; border-radius:2px; }
.plate .rivet { position:absolute; width:7px; height:7px; border-radius:50%; background:radial-gradient(var(--ink) 40%, transparent 60%); opacity:.55; }
.plate .rivet.tl{top:8px;left:9px} .plate .rivet.tr{top:8px;right:9px} .plate .rivet.bl{bottom:8px;left:9px} .plate .rivet.br{bottom:8px;right:9px}
.plate-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:6px; }
.plate-eyebrow { font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.plate-serial { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.plate-title { font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.015em; font-size:clamp(24px,4.6vw,32px); line-height:.96; margin:10px 0 4px; }
.plate-title .amp { color:var(--rust); }
.plate-sub { font-family:var(--serif); font-size:14.5px; color:var(--ink-soft); margin:0 0 14px; }

/* Kit list */
.kit-list { list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.gear { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:13px 6px; border-bottom:1px dotted var(--hair);
  transition:background .12s, transform .08s cubic-bezier(.2,.8,.2,1); }
.gear:hover { background:color-mix(in srgb, var(--ochre) 16%, transparent); transform:translateX(2px); }
@media (prefers-reduced-motion: reduce){ .gear{ transition:none; } .gear:hover{ transform:none; } }
.gear .idx { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--rust); align-self:start; padding-top:2px; }
.gear .nm { font-family:var(--sans); font-weight:700; font-size:16px; letter-spacing:-.01em; text-transform:uppercase; line-height:1.1; }
.gear .ds { font-family:var(--serif); font-size:14px; color:var(--ink-soft); margin-top:2px; line-height:1.35; }
.gear .tag { font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; border-radius:2px; padding:4px 8px; white-space:nowrap; align-self:start; color:#fff; }
.t-daily{background:var(--pine)} .t-flag{background:var(--rust)} .t-build{background:var(--denim)} .t-live{background:var(--brick)}
.kit-layout { display:grid; grid-template-columns:0.82fr 1.18fr; gap:28px; align-items:start; }
@media (max-width:820px){ .kit-layout { grid-template-columns:1fr; } }
.kit-intro h3 { font-family:var(--sans); font-weight:800; text-transform:uppercase; font-size:clamp(24px,3.2vw,32px); letter-spacing:-.01em; line-height:1; color:var(--ink); }
.kit-intro h3 .hl { color:var(--rust); }
.kit-intro p { font-size:16px; color:var(--ink-soft); margin:16px 0 0; max-width:40ch; }
.kit-intro .pull { font-family:var(--mono); font-size:13px; letter-spacing:.03em; color:var(--pine); border-left:3px solid var(--pine); padding-left:12px; margin-top:20px; }

/* Off the clock layout */
.offclock { display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:start; }
@media (max-width:860px){ .offclock { grid-template-columns:1fr; } }
.oc-left { display:flex; flex-direction:column; gap:22px; }

/* Shelf (films) */
.shelf { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:420px){ .shelf { grid-template-columns:repeat(2,1fr); } }
.film { aspect-ratio:2/3; border:2px solid var(--ink); border-radius:4px; position:relative; overflow:hidden; display:flex; flex-direction:column;
  justify-content:space-between; padding:11px 10px; text-decoration:none; color:inherit;
  transition:transform .1s cubic-bezier(.2,.8,.2,1), box-shadow .1s; box-shadow:3px 3px 0 var(--hair); }
.film:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
@media (prefers-reduced-motion: reduce){ .film{ transition:none; } .film:hover{ transform:none; } }
.film::after { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(0,0,0,.14) 1px, transparent 1.5px); background-size:6px 6px; opacity:.5; }
.film .ftop { display:flex; justify-content:space-between; position:relative; z-index:1; }
.film .fno { font-family:var(--mono); font-size:10.5px; font-weight:700; }
.film .ftitle { font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:.98; font-size:clamp(13px,3.2vw,17px); position:relative; z-index:1; }
.film .fmeta { font-family:var(--mono); font-size:9.5px; letter-spacing:.02em; margin-top:6px; line-height:1.5; opacity:.92; position:relative; z-index:1; }
.c-rust{background:var(--rust);color:#F4EBD9} .c-pine{background:var(--pine);color:#F4EBD9} .c-brick{background:var(--brick);color:#F4EBD9} .c-ochre{background:var(--ochre);color:var(--ink)}
.followrow { margin-top:12px; }
.follow { font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; border-bottom:2px solid var(--rust); padding-bottom:1px; }
.follow:hover { color:var(--rust); }

/* Playlist screen */
.pc-screen { background:var(--ink); border-radius:14px; padding:8px; position:relative; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ochre) 30%, transparent); }
.pc-screen iframe { display:block; width:100%; border:0; border-radius:12px; }
.pc-genres { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; }
.pc-genres span { font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--hair); border-radius:2px; padding:3px 8px; color:var(--ink-soft); }

/* Pennants (Lineup) */
.pennants { display:flex; flex-direction:column; gap:11px; }
.pennant { position:relative; height:62px; display:flex; flex-direction:column; justify-content:center; padding:0 42px 0 22px; overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 89% 50%, 100% 100%, 0 100%); color:#F4EBD9; transition:transform .1s cubic-bezier(.2,.8,.2,1); }
.pennant:hover { transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){ .pennant{ transition:none; } .pennant:hover{ transform:none; } }
.pennant::after { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(0,0,0,.16) 1px, transparent 1.5px); background-size:6px 6px; opacity:.5; }
.pennant .team { font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:21px; line-height:1; position:relative; z-index:1; }
.pennant .meta { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; margin-top:4px; opacity:.92; position:relative; z-index:1; }
.pennant .grommet { position:absolute; left:8px; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:rgba(0,0,0,.35); z-index:2; }
.pennant .star { position:absolute; right:50px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.8; z-index:1; }
.p-denim{background:var(--denim)} .p-brick{background:var(--brick)} .p-ochre{background:var(--ochre);color:var(--ink)} .p-rust{background:var(--rust)} .p-pine{background:var(--pine)}
.p-ochre .grommet{background:rgba(0,0,0,.28)}

/* ---- 11. CONTACT + COLOPHON --------------------------------- */
.contact .wrap { padding-block:56px; }
.contact h2 { font-family:var(--sans); font-weight:800; text-transform:uppercase; font-size:clamp(28px,5vw,46px); letter-spacing:-.02em; line-height:1; }
.contact h2 .hl { color:var(--rust); }
.contact p { font-size:17px; color:var(--ink-soft); max-width:48ch; margin:16px 0 0; }
.contact .cta { margin-top:26px; }
.colophon { border-top:1px solid var(--hair); }
.colophon .wrap { padding-block:26px 40px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.colophon .stack { font-family:var(--mono); font-size:12px; color:var(--ink-soft); line-height:1.9; }
.colophon .stack b { color:var(--denim); font-weight:400; }
.colophon .sig { font-family:var(--mono); font-size:12px; color:var(--ink-soft); }

/* ---- 12. CASE-STUDY PAGE ------------------------------------ */
.cs-hero .wrap { padding-block:52px 34px; max-width:720px; }
.backlink { font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; }
.backlink:hover { color:var(--rust); }
.cs-kicker { display:flex; gap:16px; flex-wrap:wrap; margin:24px 0 18px; }
.cs-hero h1 { font-weight:800; font-size:clamp(34px,6vw,64px); line-height:.98; letter-spacing:-.02em; max-width:18ch; }
.cs-hero .lede { font-family:var(--serif); font-size:clamp(18px,2.3vw,22px); color:var(--ink); max-width:56ch; margin-top:20px; }
.cs-hero .headline-metric { display:inline-flex; align-items:baseline; gap:10px; margin-top:24px; border:2px solid var(--ink); border-radius:4px; padding:10px 16px; background:var(--paper-2); }
.cs-hero .headline-metric .n { font-family:var(--sans); font-weight:800; font-size:28px; color:var(--rust); line-height:1; }
.cs-hero .headline-metric .t { font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }

.prose > .wrap { max-width:720px; }
.prose p { font-size:17px; margin:0 0 20px; }
.prose h3 { font-family:var(--sans); font-weight:700; text-transform:uppercase; font-size:20px; letter-spacing:-.01em; margin:38px 0 14px; }
.prose h3 .no { font-family:var(--mono); font-size:12px; color:var(--rust); margin-right:10px; }
.prose ul { padding-left:0; list-style:none; margin:0 0 20px; }
.prose ul li { position:relative; padding-left:24px; margin:0 0 10px; font-size:16.5px; }
.prose ul li::before { content:"→"; position:absolute; left:0; color:var(--rust); font-family:var(--mono); }
.callout { border-left:3px solid var(--rust); padding:4px 0 4px 18px; margin:24px 0; font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ink); max-width:52ch; }
.cs-results { margin:30px 0; }
.cs-nav { border-top:1px solid var(--hair); }
.cs-nav .wrap { padding-block:28px 44px; max-width:720px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cs-nav a { font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; color:var(--ink); border-bottom:2px solid var(--rust); padding-bottom:2px; }
.cs-nav a:hover { color:var(--rust); }

/* placeholder marker for template scaffolding */
.ph { background:color-mix(in srgb, var(--ochre) 30%, transparent); outline:1px dashed var(--ochre); border-radius:2px; padding:0 3px; }

/* ---- 13. STYLE-GUIDE PAGE ----------------------------------- */
.sg-swatches { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:2px; border:2px solid var(--ink); background:var(--ink); }
.sw { padding:18px 14px 12px; min-height:110px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.sw::after { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(0,0,0,.13) 1px, transparent 1.4px); background-size:6px 6px; opacity:.5; }
.sw .cn { font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; position:relative; z-index:1; }
.sw .cx { font-family:var(--mono); font-size:11px; opacity:.85; position:relative; z-index:1; }
.sw.s-paper{background:var(--paper);color:var(--ink)} .sw.s-ink{background:var(--ink);color:var(--paper)}
.sw.s-rust{background:var(--rust);color:#fff} .sw.s-pine{background:var(--pine);color:#fff}
.sw.s-denim{background:var(--denim);color:#fff} .sw.s-ochre{background:var(--ochre);color:var(--ink)} .sw.s-brick{background:var(--brick);color:#fff}
.sg-specimen { border-left:3px solid var(--accent); padding-left:18px; margin:22px 0; }
.sg-specimen .tag { font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:8px; }
.sg-specimen .disp { font-family:var(--sans); font-weight:800; font-size:clamp(28px,5vw,50px); line-height:.95; text-transform:uppercase; letter-spacing:-.02em; }
.sg-specimen .bodyrun { font-family:var(--serif); font-size:17px; max-width:60ch; }
.sg-specimen .monorun { font-family:var(--mono); font-size:14px; }
.sg-note { font-family:var(--mono); font-size:12px; color:var(--ink-soft); background:var(--paper-2); border:1px solid var(--hair); border-radius:3px; padding:12px 14px; margin:16px 0; line-height:1.6; }
.sg-tags { display:flex; gap:8px; flex-wrap:wrap; }


/* ════════════════════════════════════════════════════════════════════════════
   MOTION — shared by every page (v1.8). Pages add html.sa only when motion is
   allowed; without it (no JS, prefers-reduced-motion) everything is the finished still.
   ════════════════════════════════════════════════════════════════════════════ */
  /* ── Reveal-on-entry (plays once). Default markup = finished still. ── */
  .sa [data-rv]:not(.in) { opacity:0; }
  .sa [data-rv].in { animation-duration:.65s; animation-timing-function:cubic-bezier(.2,.7,.2,1); animation-delay:var(--d,0ms); animation-fill-mode:backwards; }
  .sa [data-rv="rise"].in  { animation-name:rv-rise; }
  .sa [data-rv="deal"].in  { animation-name:rv-deal; animation-duration:.75s; }
  .sa [data-rv="stamp"].in { animation-name:rv-stamp; animation-duration:.5s; }
  .sa [data-rv="swing"].in { animation-name:rv-swing; animation-duration:1.3s; animation-timing-function:ease-out; transform-origin:12px 50%; }
  .sa [data-rv="drop"].in  { animation-name:rv-drop; animation-duration:.6s; }
  @keyframes rv-rise  { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
  @keyframes rv-deal  { 0% { opacity:0; transform:translateY(24px) rotate(var(--rot,1.6deg)); }
                        65% { opacity:1; transform:translateY(-3px) rotate(calc(var(--rot,1.6deg) * -.25)); }
                        100% { opacity:1; transform:none; } }
  @keyframes rv-stamp { 0% { opacity:0; transform:scale(1.8) rotate(-12deg); }
                        55% { opacity:1; transform:scale(.9) rotate(2deg); }
                        100% { opacity:1; transform:none; } }
  @keyframes rv-swing { 0% { opacity:0; transform:rotate(-7deg); } 30% { opacity:1; transform:rotate(3deg); }
                        55% { transform:rotate(-1.6deg); } 78% { transform:rotate(.6deg); } 100% { opacity:1; transform:none; } }
  @keyframes rv-drop  { 0% { opacity:0; transform:translateY(-20px) rotate(-3deg); }
                        70% { opacity:1; transform:translateY(2px) rotate(.4deg); } 100% { opacity:1; transform:none; } }
  /* Trail Markers: odometer digits (built by the script; no-JS keeps plain text) */
  .odo { display:inline-block; white-space:nowrap; }
  .odo-c { display:inline-block; height:1.06em; line-height:1.06em; vertical-align:top; overflow:hidden; }
  .odo-s { display:block; will-change:transform; }
  .odo-s > span { display:block; height:1.06em; }
  .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  /* Contact: hand-drawn rust underline under "something" (part of the still) */
  .contact h2 .hl { position:relative; display:inline-block; }
  .contact h2 .hl::after { content:""; position:absolute; left:-2%; right:-2%; bottom:-.16em; height:.2em; background:var(--rust);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 3, 78 12, 118 7 S 178 4, 197 8' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 40 3, 78 12, 118 7 S 178 4, 197 8' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }
  .sa .contact h2 .hl:not(.in)::after { clip-path:inset(0 100% 0 0); }
  .sa .contact h2 .hl.in::after { animation:rv-draw .9s cubic-bezier(.5,.1,.2,1) .25s backwards; }
  @keyframes rv-draw { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }

/* Phone layouts: diagrams ship a portrait twin (.fg-m) that replaces the wide drawing (.fg-d)
   at ≤600px, so labels render ~11–14px instead of 3–5px. CSS-only switch. */
.fg-m { display:none; }
@media (max-width:600px){
  .fg-d { display:none !important; }
  .fg-m { display:block; }
  svg.fg-m { max-width:460px; margin-left:auto; margin-right:auto; }
  /* text lift for the simple wide charts: tiny SVG labels step aside for real text */
  .fg-lab { display:none; }
  .trajectory .be-top { font-size:30px; letter-spacing:.04em; }
  .ridge .marks circle { r:24px; }
  .ridge .marknums text { font-size:24px; }
}
.m-cap { font-family:var(--mono); font-size:12px; letter-spacing:.02em; line-height:1.55; color:var(--ink-soft); margin:10px 0 4px; }
.m-cap b { color:var(--ink); font-weight:700; }


/* ---- WEEKEND REEL (homepage easter egg) ------------------------
   Kraft folder in the Off the Clock header → password dialog →
   scattered instant-film prints → enlarged print. Markup lives in
   index.html (#reel); behavior in field-guide.js (initReel). The
   folder and prints are physical objects, so they keep their own
   colors in both themes; only the kraft/print tokens dim in dark. */
.sechead .rl-trigger { margin-left:auto; align-self:flex-end; }
.rl-trigger { flex:none; display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:0; padding:4px; cursor:pointer; color:var(--ink); }
.rl-trigger svg { width:62px; height:auto; overflow:visible; filter:drop-shadow(2px 2px 0 var(--hair)); }
.rl-trigger .rl-lbl { font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--ink-soft); }
.rl-trigger .rl-peek, .rl-trigger .rl-flap { transition:transform .25s ease; }
.rl-trigger .rl-flap { transform-origin:50% 100%; }
.rl-trigger:focus-visible { outline:2px dashed var(--rust); outline-offset:4px; }
@media (prefers-reduced-motion: no-preference){
  .rl-trigger:hover .rl-peek, .rl-trigger:focus-visible .rl-peek { transform:translateY(-9px) rotate(-4deg); }
  .rl-trigger:hover .rl-flap, .rl-trigger:focus-visible .rl-flap { transform:skewX(-4deg) scaleY(.94); }
}

.rl { position:fixed; inset:0; margin:auto; height:fit-content; border:0; padding:0; background:transparent; color:var(--kraft-ink);
  width:calc(100% - 24px); max-width:980px; max-height:calc(100% - 24px); overflow:visible; touch-action:manipulation; }
html.rl-open, html.rl-open body { overflow:hidden; }
  /* ↑ page stays put behind the folder (iOS jumped to the top) */
.rl:focus { outline:none; }
.rl::backdrop { background:rgba(24,19,14,.62); backdrop-filter:blur(2px); }
.rl-body { position:relative; background:var(--kraft); border-radius:4px 10px 6px 6px; padding:28px clamp(16px,4vw,40px) 36px;
  max-height:calc(100vh - 24px); max-height:calc(100svh - 24px); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  box-shadow:0 30px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.08), inset 0 0 80px rgba(80,50,20,.25); }
.rl-body::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); }
.rl-top { position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; }
.rl-title { font-family:var(--sans); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(26px,4vw,38px); line-height:1; margin:0; color:var(--kraft-ink); }
.rl-sub { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#4B3A26; margin:6px 0 0; }
.rl-stamp { display:inline-block; font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.18em; color:#8E3B34;
  border:2px solid currentColor; padding:2px 8px; transform:rotate(-6deg); opacity:.85; margin-left:10px; vertical-align:middle; }
.rl-chip { font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; cursor:pointer;
  background:var(--print); color:var(--kraft-ink); border:1.5px solid var(--kraft-ink); padding:6px 10px; box-shadow:2px 2px 0 var(--kraft-ink); }
.rl-chip:active { transform:translate(2px,2px); box-shadow:none; }
.rl-chip:focus-visible, .rl-btn:focus-visible { outline:2px solid var(--rust); outline-offset:2px; }

/* lock */
.rl-lock { position:relative; display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; padding:8px 0 4px; }
.rl-lock form { display:flex; flex-direction:column; gap:10px; max-width:360px; }
.rl-lock label { font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#3A2C1C; }
.rl-row { display:flex; gap:8px; }
.rl-lock input { flex:1; min-width:0; font:500 18px var(--mono); padding:10px 12px; background:var(--print); color:var(--kraft-ink); border:1.5px solid var(--kraft-ink); border-radius:0; }
.rl-lock input:focus-visible { outline:2px solid var(--rust); outline-offset:2px; }
.rl-btn { font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  background:#BC4B22; color:#FBF4E6; border:1.5px solid var(--kraft-ink); padding:10px 14px; box-shadow:3px 3px 0 var(--kraft-ink); }
.rl-btn:active { transform:translate(3px,3px); box-shadow:none; }
.rl-btn.ghost { background:transparent; color:var(--kraft-ink); box-shadow:none; border-style:dashed; }
.rl-msg { min-height:1.6em; font-family:var(--hand); font-size:24px; line-height:1.1; color:#6E2A1C; margin:2px 0 0; }
.rl-sticky { width:190px; background:#EBC45A; color:#3A2A10; padding:18px 16px 20px; transform:rotate(3deg); font-family:var(--hand); font-size:25px; line-height:1.05;
  box-shadow:0 10px 14px -8px rgba(0,0,0,.45), inset 0 -14px 20px -16px rgba(0,0,0,.3); }
.rl-sticky small { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; opacity:.7; }
@media (prefers-reduced-motion: no-preference){ .rl-shake { animation:rl-shake .35s; } }
@keyframes rl-shake { 20%,60%{ transform:translateX(-6px); } 40%,80%{ transform:translateX(6px); } }

/* prints */
.rl-prints { position:relative; list-style:none; margin:0; padding:10px 4px 0; display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px; align-items:start; grid-auto-flow:row dense; }
.rl-prints li { --r:0deg; position:relative; transform:rotate(var(--r)); }
.rl-prints li:nth-child(1){--r:-2.5deg} .rl-prints li:nth-child(2){--r:1.8deg; margin-top:14px} .rl-prints li:nth-child(3){--r:-1deg}
.rl-prints li:nth-child(4){--r:2.4deg} .rl-prints li:nth-child(5){--r:-1.8deg; margin-top:10px} .rl-prints li:nth-child(6){--r:1.2deg} .rl-prints li:nth-child(7){--r:-1.4deg}
.rl-prints li.wide { grid-column:span 2; }
.rl-print { display:block; width:100%; border:0; cursor:zoom-in; text-align:left; color:var(--sharpie); position:relative; padding:4.5% 4.5% 0;
  background:linear-gradient(160deg, var(--print) 0%, var(--print) 60%, var(--print-edge) 100%);
  box-shadow:0 1px 1px rgba(0,0,0,.18), 0 10px 18px -6px var(--desk-shadow), inset 0 0 0 1px rgba(90,70,40,.10), inset 0 0 18px rgba(120,95,55,.18);
  transition:box-shadow .22s ease; }
.rl-print::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.28; mix-blend-mode:multiply;
  background:radial-gradient(120% 90% at 100% 0%, transparent 70%, rgba(120,90,40,.35)), radial-gradient(80% 60% at 0% 100%, transparent 70%, rgba(120,90,40,.3)); }
.rl-pic { display:block; aspect-ratio:1/1; background:#3a3128; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }
.wide .rl-pic { aspect-ratio:2.1/1; }
.rl-pic img { width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .6s ease; }
.rl-pic img.rl-loaded { opacity:1; }
.rl-cap { display:block; font-family:var(--hand); font-weight:600; font-size:clamp(20px,2.3vw,26px); line-height:1; padding:12px 4px 16px; min-height:2.3em; transform:rotate(-.6deg); }
.rl-heart { color:#C8321E; font-family:system-ui,sans-serif; font-size:.85em; display:inline-block; transform:rotate(-8deg) translateY(-1px); margin:0 .08em; }
.rl-print:focus-visible { outline:2px dashed var(--kraft-ink); outline-offset:5px; }
.rl-tape { position:absolute; top:-12px; left:50%; width:74px; height:22px; transform:translateX(-50%) rotate(-3deg); z-index:1;
  background:rgba(236,224,190,.72); box-shadow:0 1px 2px rgba(0,0,0,.15); clip-path:polygon(2% 10%,98% 0,100% 90%,0 100%); }
.rl-prints li:nth-child(even) .rl-tape { transform:translateX(-30%) rotate(4deg); }
.rl-prints li:nth-child(3n+2) .rl-tape { display:none; }
.rl-foot { position:relative; font-family:var(--hand); font-size:22px; color:#3A2A18; margin:28px 0 0; text-align:right; transform:rotate(-1deg); }
@media (prefers-reduced-motion: no-preference){
  .rl-prints li { transition:transform .22s ease; }
  .rl-prints li:hover { transform:rotate(0deg) translateY(-4px); z-index:2; }
  .rl-prints li:hover .rl-print { box-shadow:0 1px 1px rgba(0,0,0,.18), 0 22px 30px -10px var(--desk-shadow); }
  .rl-prints.rl-drop li { animation:rl-drop .5s cubic-bezier(.2,.9,.3,1.15) both; animation-delay:calc(var(--i) * 70ms); }
}
@keyframes rl-drop { from{ opacity:0; transform:translateY(-26px) rotate(calc(var(--r) * 3)) scale(1.04); } to{ opacity:1; transform:rotate(var(--r)); } }

/* enlarged print */
.rl-big { position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; }
.rl-big figure { margin:0; max-width:100%; background:linear-gradient(160deg, var(--print), var(--print-edge)); padding:18px 18px 0; transform:rotate(-.8deg);
  box-shadow:0 2px 2px rgba(0,0,0,.2), 0 24px 40px -12px rgba(0,0,0,.5), inset 0 0 22px rgba(120,95,55,.2); }
.rl-big img { display:block; max-width:100%; max-height:min(64dvh,760px); width:auto; height:auto; }
.rl-big figcaption { font-family:var(--hand); font-weight:600; font-size:clamp(24px,3vw,32px); color:var(--sharpie); padding:14px 4px 22px; }
.rl-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; align-items:center; font-family:var(--mono); font-size:12px; color:#3A2A18; letter-spacing:.1em; }

@media (max-width:720px){
  .rl-lock { grid-template-columns:1fr; }
  .rl-sticky { order:-1; width:auto; max-width:240px; font-size:22px; transform:rotate(-1.5deg); }
  .rl-prints { grid-template-columns:1fr 1fr; gap:26px 18px; }
  .rl-cap { font-size:19px; padding:9px 2px 12px; }
  .rl-body { padding:20px 14px 28px; }
  .rl { margin-top:12px; }           /* pin near the top on phones so the keyboard can't cover the form */
  .rl-big figure { padding:10px 10px 0; }
}