/* ============================================================
   By Drush — shared design system
   Mirrors DESIGN.md (the locked source of truth) and the as-built
   index.html. Loaded by index.html, shop.html and admin.html.
   Warm near-black canvas, one loud antique-gold accent, loud Anton
   display + Space Mono labels + Archivo body + one Bodoni italic.
   ============================================================ */

:root{
  --bg:#0E0E0E;
  --bg-2:#161514;
  --bg-3:#1C1A18;
  --line:#2A2724;
  --ink:#F5F0E6;
  --ink-dim:#EDE7DB;
  --muted:#9C948A;
  --gold:#C7A24E;        /* gold as TEXT/accent — deepens on light for legibility */
  --gold-hi:#E0C074;     /* brighter gold — hover / focus ring */
  --gold-deep:#9A7434;   /* deep gold-brown — marquee outline */
  --gold-fill:#C7A24E;   /* gold as a FILL (buttons, dot, badges) — vibrant in both themes */
  --on-accent:#0E0E0E;   /* text/icon on a gold fill — dark in both themes */
  /* status colours — desaturated to sit on warm-black without fighting gold */
  --ok:#7FB069;          /* received / published / accepted */
  --warn:#D8A24A;        /* pending / coming soon */
  --info:#6FA8C7;        /* in progress / submitted */
  --danger:#C77B6B;      /* cancelled / rejected */
  --nav-core-h:64px;
  --nav-safe-top:max(env(safe-area-inset-top, 0px), 0px);
  --nav-h:calc(var(--nav-core-h) + var(--nav-safe-top));
  --pad:clamp(20px, 5vw, 80px);
  --maxw:1400px;
}

/* ---------- light theme (opt-in via the storefront toggle) ----------
   A WARM-PAPER inversion of the same system — never pure white, never cool.
   Gold splits roles: --gold deepens so it stays legible AS TEXT on paper,
   while --gold-fill keeps the vibrant antique gold for FILLS. Dark stays the
   default and first impression; this block only applies when store-theme.js
   sets data-theme="light". See docs/demo/DESIGN.md §2. */
[data-theme="light"]{
  --bg:#F4EEE2;          /* warm paper canvas */
  --bg-2:#EBE3D3;        /* raised surface */
  --bg-3:#E4DBC8;        /* card fill */
  --line:#D5C9B2;        /* warm hairline (visible on paper) */
  --ink:#181511;         /* warm near-black text */
  --ink-dim:#332C22;     /* subcopy */
  --muted:#665C4D;       /* warm grey-brown — body-safe contrast on paper */
  --gold:#7C581C;        /* gold-as-text, deepened for AA on paper */
  --gold-fill:#C7A24E;   /* gold-as-fill stays vibrant */
  --gold-hi:#9A7322;     /* hover fill + focus ring on light */
  --gold-deep:#7C581C;   /* marquee outline */
  --on-accent:#1A1510;   /* dark text on a gold fill */
  /* status — deepened so pills read on the paper canvas */
  --ok:#41722E;
  --warn:#8C6011;
  --info:#356F8E;
  --danger:#A8442F;
}
/* Keep the hero a self-contained DARK island in light mode (Option A): the
   gritty photo + light text keep their editorial punch. Re-scoping the tokens
   here makes the whole hero subtree render exactly as in dark mode. */
[data-theme="light"] .hero{
  --bg:#0E0E0E; --bg-2:#161514; --bg-3:#1C1A18; --line:#2A2724;
  --ink:#F5F0E6; --ink-dim:#EDE7DB; --muted:#9C948A;
  --gold:#C7A24E; --gold-hi:#E0C074; --gold-deep:#9A7434;
  color:var(--ink); /* re-resolve inherited text (e.g. bare "By") to the island's light ink */
}
/* Film grain is a brand rule on every page; on paper it reads as texture via
   multiply rather than the dark canvas's overlay. */
[data-theme="light"] body::after{ mix-blend-mode:multiply; opacity:.045 }
/* Frosted nav + mobile dropdown use a light scrim on paper. The dropdown
   override is mobile-only (desktop .nav-links has no background of its own). */
[data-theme="light"] header.nav{ background:rgba(244,238,226,.72) }
@media (max-width:880px){
  [data-theme="light"] .nav-links{ background:rgba(244,238,226,.97) }
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Archivo", system-ui, sans-serif;
  font-size:clamp(15px,1vw + 12px,17px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}

/* film grain overlay — keep on every page (brand rule) */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type helpers ---------- */
.label{font-family:"Space Mono",monospace; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--muted)}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.mono{font-family:"Space Mono",monospace}
.gold{color:var(--gold)}

/* ---------- nav ---------- */
header.nav{
  position:sticky; top:0; z-index:100;
  min-height:var(--nav-h);
  padding-top:var(--nav-safe-top);
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(14,14,14,.72);
  border-bottom:1px solid var(--line);
  transform:translateZ(0);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:var(--nav-core-h); gap:18px}
.brandmark{font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.15rem; letter-spacing:.04em; display:flex; align-items:center; gap:.5ch}
.brandmark .dot{width:9px; height:9px; border-radius:50%; background:var(--gold-fill); display:inline-block}
.nav-links{display:flex; gap:26px; align-items:center}
.nav-links a{font-family:"Space Mono",monospace; font-size:.74rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); transition:color .2s}
.nav-links a:hover, .nav-links a.active{color:var(--ink)}
.nav-cta{
  font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--ink); color:var(--ink); padding:9px 16px; border-radius:2px;
  transition:background .2s,color .2s,border-color .2s; cursor:pointer; background:transparent;
}
.nav-cta:hover{background:var(--gold-fill); border-color:var(--gold-fill); color:var(--on-accent)}
.nav-toggle{display:none; background:transparent; border:1px solid var(--line); border-radius:3px; color:var(--ink); cursor:pointer; padding:0}
.nav-toggle svg{width:22px; height:22px; display:block}
.nav-toggle .ico-close{display:none}
.nav-toggle[aria-expanded="true"] .ico-open{display:none}
.nav-toggle[aria-expanded="true"] .ico-close{display:block}

/* cart button (shop nav) */
.cart-btn{position:relative; display:inline-flex; align-items:center; gap:8px}
.cart-btn .count{
  position:absolute; top:-8px; right:-10px; min-width:18px; height:18px; padding:0 5px;
  background:var(--gold-fill); color:var(--on-accent); border-radius:9999px;
  font-family:"Space Mono",monospace; font-size:.62rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.cart-btn .count[hidden]{display:none}

/* theme toggle (storefront light/dark) — pure-CSS crescent/sun, wired by store-theme.js */
.nav-right{display:flex; align-items:center; gap:18px}
.theme-toggle{
  display:inline-grid; place-items:center; width:40px; height:40px; flex:none; padding:0;
  border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--muted);
  cursor:pointer; transition:color .2s, border-color .2s, background .2s, transform .12s;
}
.theme-toggle:hover{color:var(--ink); border-color:var(--ink)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle:focus-visible{outline:3px solid var(--gold-hi); outline-offset:2px}
/* crescent shown in light ("go dark"); sun shown in dark ("go light") */
.t-moon{width:15px; height:15px; border-radius:50%; box-shadow:inset -5px -3px 0 0 currentColor}
.t-sun{display:none; width:7px; height:7px; border-radius:50%; background:currentColor;
  box-shadow:0 -11px,0 11px,-11px 0,11px 0,-8px -8px,8px 8px,-8px 8px,8px -8px}
[data-theme="dark"] .theme-toggle .t-moon{display:none}
[data-theme="dark"] .theme-toggle .t-sun{display:block}

@media (max-width:880px){
  /* Solid (not frosted) on phones so the notch/safe-area strip and the bar
     itself are reliably opaque in every scroll position and in-app browser. */
  header.nav{ background:var(--bg); backdrop-filter:none; }
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px}
  .nav-links{
    position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(14,14,14,.97); backdrop-filter:saturate(140%) blur(12px);
    border-bottom:1px solid var(--line);
    padding:6px var(--pad) 20px; display:none;
  }
  .nav-links.open{display:flex}
  .nav-links .navlink{padding:16px 2px; font-size:.95rem; color:var(--ink); border-bottom:1px solid var(--line)}
  .nav-links .nav-cta{align-self:flex-start; margin-top:16px}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  font-family:"Space Mono",monospace; text-transform:uppercase; letter-spacing:.1em; font-size:.82rem;
  padding:15px 26px; border-radius:3px; border:1px solid transparent;
  transition:transform .2s, background .2s, color .2s, border-color .2s;
}
.btn svg{width:18px; height:18px; flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none}
.btn-gold{background:var(--gold-fill); color:var(--on-accent)}
.btn-gold:hover{background:var(--gold-hi)}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-outline:hover{background:var(--ink); color:var(--bg)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:9px 15px; font-size:.72rem; letter-spacing:.08em}
.btn-block{width:100%}
:where(a,button).btn:focus-visible,
.nav-cta:focus-visible,
.card:focus-visible{outline:3px solid var(--gold-hi); outline-offset:2px}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line); background:var(--bg-2); overflow:hidden; padding:14px 0}
.marquee .track{display:flex; gap:0; white-space:nowrap; width:max-content; animation:scroll 84s linear infinite}
.marquee span{font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.5rem; letter-spacing:.03em; padding:0 28px; color:var(--ink)}
.marquee span.alt{color:var(--bg-2); -webkit-text-stroke:1px var(--gold-deep)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- section scaffold ---------- */
section{padding-block:clamp(64px,9vw,140px)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:46px}
.sec-head .idx{font-family:"Space Mono",monospace; color:var(--gold); font-size:.8rem; letter-spacing:.2em; margin-bottom:14px}
.sec-head h2{font-family:"Anton",sans-serif; text-transform:uppercase; font-size:clamp(2.4rem,6vw,5rem); line-height:.92}
.sec-head .hp{max-width:42ch; color:var(--muted)}
.sec-head .from{font-family:"Space Mono",monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-top:10px; display:block}

/* ---------- statement ---------- */
.statement{border-bottom:1px solid var(--line); background:var(--bg)}
.statement .big{font-family:"Bodoni Moda",serif; font-style:italic; font-size:clamp(1.7rem,4.4vw,3.4rem); line-height:1.18; max-width:20ch}
.statement .big em{color:var(--gold); font-style:italic}
.statement .cols{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:end; margin-top:40px}
.statement .cols .meta p{color:var(--muted); margin-bottom:16px}
.stats{display:flex; gap:40px; flex-wrap:wrap; margin-top:8px}
.stats div .n{font-family:"Anton",sans-serif; font-size:2.4rem; line-height:1}
.stats div .k{font-family:"Space Mono",monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
@media(max-width:760px){ .statement .cols{grid-template-columns:1fr} }

/* ---------- product grid + card ---------- */
.grid{display:grid; gap:14px}
.product-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{position:relative; overflow:hidden; border-radius:4px; background:var(--bg-3); display:block; cursor:pointer; border:1px solid var(--line)}
.card .ph{position:relative; overflow:hidden; aspect-ratio:4/5}
.card img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s; filter:saturate(1.02)}
.card:hover img{transform:scale(1.06)}
.card .cap{position:absolute; inset:auto 0 0 0; padding:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  background:linear-gradient(0deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,0) 100%); pointer-events:none}
.card .cap .nm{font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.15rem; letter-spacing:.02em}
.tag{font-family:"Space Mono",monospace; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(199,162,78,.5); padding:5px 9px; border-radius:2px; white-space:nowrap}
.card .corner{position:absolute; top:12px; left:12px; font-family:"Space Mono",monospace; font-size:.6rem; letter-spacing:.14em; color:var(--on-accent);
  background:var(--gold-fill); padding:5px 9px; border-radius:2px; text-transform:uppercase; z-index:2}

/* ---------- coming-soon band ---------- */
.soon{border:1px dashed var(--line); border-radius:6px; padding:clamp(30px,5vw,60px); background:var(--bg-2);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px}
.soon .badge{font-family:"Space Mono",monospace; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.soon p{color:var(--muted); max-width:52ch}

/* ---------- status pill (admin + tracking) ---------- */
.pill{display:inline-flex; align-items:center; gap:7px; font-family:"Space Mono",monospace; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 10px; border-radius:2px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.pill.is-ok{color:var(--ok); border-color:rgba(127,176,105,.4)}
.pill.is-warn{color:var(--warn); border-color:rgba(216,162,74,.4)}
.pill.is-info{color:var(--info); border-color:rgba(111,168,199,.4)}
.pill.is-danger{color:var(--danger); border-color:rgba(199,123,107,.4)}
.pill.is-gold{color:var(--gold); border-color:rgba(199,162,78,.45)}

/* ---------- form controls (shop + admin) ---------- */
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.field > label, .field-label{font-family:"Space Mono",monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.input, .select, .textarea{
  width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:3px;
  padding:13px 14px; font-family:"Archivo",sans-serif; font-size:.95rem; transition:border-color .2s, box-shadow .2s;
}
.textarea{min-height:90px; resize:vertical; line-height:1.5}
.select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239C948A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px}
.input:focus, .select:focus, .textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(199,162,78,.18)}
.input::placeholder, .textarea::placeholder{color:#6c655d}
.help{font-family:"Space Mono",monospace; font-size:.64rem; letter-spacing:.04em; color:var(--muted)}

/* ---------- overlay / drawer / modal (shop cart, admin forms) ---------- */
.scrim{position:fixed; inset:0; background:rgba(8,8,8,.66); backdrop-filter:blur(2px); z-index:200; opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s}
.scrim.open{opacity:1; visibility:visible}

.drawer{position:fixed; top:0; right:0; bottom:0; width:min(440px,100%); background:var(--bg-2); border-left:1px solid var(--line);
  z-index:210; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.drawer.open{transform:none}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:22px var(--pad-d,24px); border-bottom:1px solid var(--line)}
.drawer-head h3{font-family:"Anton",sans-serif; text-transform:uppercase; font-size:1.5rem; letter-spacing:.02em}
.drawer-body{flex:1; overflow-y:auto; padding:18px 24px}
.drawer-foot{border-top:1px solid var(--line); padding:20px 24px; background:var(--bg)}

.modal{position:fixed; inset:0; z-index:220; display:none; align-items:center; justify-content:center; padding:20px}
.modal.open{display:flex}
.modal-card{position:relative; width:min(560px,100%); max-height:90vh; overflow-y:auto; background:var(--bg-2); border:1px solid var(--line); border-radius:6px; padding:clamp(22px,4vw,38px)}
.modal-card h3{font-family:"Anton",sans-serif; text-transform:uppercase; font-size:clamp(1.6rem,4vw,2.4rem); line-height:.95; margin-bottom:8px}

.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line); border-radius:3px; background:transparent; color:var(--ink); cursor:pointer; transition:border-color .2s, background .2s}
.icon-btn:hover{border-color:var(--ink)}
.icon-btn svg{width:18px; height:18px}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); z-index:300;
  background:var(--ink); color:var(--bg); font-family:"Space Mono",monospace; font-size:.74rem; letter-spacing:.06em;
  padding:13px 20px; border-radius:3px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; max-width:90vw}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding-block:46px}
.foot{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
.foot .brandmark{font-size:1.4rem}
.foot .muted, .foot a.muted{color:var(--muted); font-family:"Space Mono",monospace; font-size:.68rem; letter-spacing:.1em}
.foot a.muted:hover{color:var(--ink)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
  .marquee .track{animation:none}
  .drawer{transition:none}
}