/* =========================================================
   YNTR — design system
   "Your name becomes a mark."
   Palette: Obsidian / Ash / Bone / Oxblood / Gold / Graphite
   Type: DM Sans (display + body), system mono (codes/data)
   ========================================================= */

:root{
  --obsidian:#0B0B0D;
  --ash:#141317;
  --ash-2:#1C1B20;
  --graphite:#2B2933;
  --graphite-soft:#232129;
  --bone:#EDE8DF;
  --bone-dim:#a49d92;
  --bone-faint:#726c63;
  --oxblood:#7A1430;
  --oxblood-bright:#A6203F;
  --oxblood-glow:rgba(166,32,63,.35);
  --gold:#B08D57;
  --gold-soft:#8f7448;
  --error:#c0524f;
  --success:#5f8a6c;

  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --container:1240px;
  --radius:2px;
  --radius-lg:6px;
  --nav-h:72px;

  /* Safe-area insets for notch / Dynamic Island / home-indicator when
     installed as a standalone PWA (viewport-fit=cover + apple's
     black-translucent status bar both mean the page draws under the
     notch itself, so every fixed element has to account for this or
     it renders under the cutout / gets clipped by the home indicator). */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --nav-h-total: calc(var(--nav-h) + var(--safe-t));

  --ease:cubic-bezier(.16,.8,.28,1);
}

@media (prefers-color-scheme: light){ :root{ color-scheme: dark; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--obsidian); scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--obsidian);
  color:var(--bone);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

::selection{ background:var(--oxblood); color:var(--bone); }

/* focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ---------- type ---------- */
h1,h2,h3,h4{ margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.01em; color:var(--bone); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}
.eyebrow::before{ content:''; width:1.4em; height:1px; background:var(--gold-soft); display:inline-block; }

.h-display{
  font-size:clamp(2.6rem,7.5vw,5.6rem);
  font-weight:900;
  line-height:.96;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.h-section{
  font-size:clamp(1.9rem,4.4vw,3rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.015em;
  text-transform:uppercase;
}
.h-card{ font-size:1.3rem; font-weight:700; }

.lede{ font-size:clamp(1.05rem,2vw,1.25rem); color:var(--bone-dim); max-width:52ch; line-height:1.7; }
.muted{ color:var(--bone-dim); }
.faint{ color:var(--bone-faint); }
.mono{ font-family:var(--mono); }

.rule{ height:1px; background:var(--graphite); border:0; margin:0; }
.rule--wide{ width:100%; }

/* ---------- layout ---------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 1.5rem; }
@media (min-width:640px){ .container{ padding:0 2.5rem; } }

.section{ padding:4.5rem 0; position:relative; }
@media (min-width:900px){ .section{ padding:8rem 0; } }
.section--tight{ padding:3rem 0; }
@media (min-width:900px){ .section--tight{ padding:4.5rem 0; } }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  padding:1rem 1.8rem; border-radius:var(--radius); border:1px solid transparent; cursor:pointer;
  transition:transform .35s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--oxblood); color:var(--bone); }
.btn-primary:hover{ background:var(--oxblood-bright); }
.btn-ghost{ background:transparent; color:var(--bone); border-color:var(--graphite); }
.btn-ghost:hover{ border-color:var(--bone-dim); }
.btn-gold{ background:transparent; color:var(--gold); border-color:var(--gold-soft); }
.btn-gold:hover{ background:var(--gold); color:var(--obsidian); }
.btn-block{ width:100%; }
.btn-sm{ padding:.7rem 1.1rem; font-size:.72rem; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }
.btn-icon{ padding:.6rem; border-radius:50%; background:transparent; border:1px solid var(--graphite); color:var(--bone); }

/* ---------- nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h-total); padding-top:var(--safe-t); display:flex; align-items:center;
  background:rgba(11,11,13,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--graphite-soft);
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ font-weight:900; font-size:1.35rem; letter-spacing:.14em; }
.brand small{ display:block; font-family:var(--mono); font-size:.55rem; letter-spacing:.2em; color:var(--gold); font-weight:500; margin-top:1px; }
.nav-links{ display:none; align-items:center; gap:2.2rem; }
.nav-links a{ font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--bone-dim); transition:color .2s; }
.nav-links a:hover, .nav-links a.is-active{ color:var(--bone); }
@media (min-width:960px){ .nav-links{ display:flex; } }

.nav-right{ display:flex; align-items:center; gap:1rem; }
/* The nav countdown pill is redundant with the one already in the
   mobile menu — on narrow viewports there isn't room for brand +
   countdown + cart + hamburger on one line, so hide it here and let
   the mobile menu carry it instead. */
@media (max-width:639px){ .nav-right .countdown{ display:none; } }
@media (max-width:479px){ .brand small{ display:none; } }
.cart-link{ position:relative; display:flex; align-items:center; padding:.4rem; }
.cart-badge{
  position:absolute; top:-2px; right:-4px; background:var(--oxblood); color:var(--bone);
  font-family:var(--mono); font-size:.62rem; min-width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.nav-toggle{ background:none; border:none; color:var(--bone); display:flex; padding:.4rem; }
@media (min-width:960px){ .nav-toggle{ display:none; } }

.mobile-menu{
  position:fixed; inset:var(--nav-h-total) 0 0 0; background:var(--obsidian); z-index:99;
  padding:2rem 1.5rem calc(2rem + var(--safe-b)); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
  overflow-y:auto;
}
.mobile-menu.is-open{ opacity:1; transform:none; pointer-events:auto; }
.mobile-menu a{ display:block; font-size:1.6rem; font-weight:800; text-transform:uppercase; padding:.7rem 0; border-bottom:1px solid var(--graphite-soft); }
.mobile-menu .mobile-meta{ margin-top:2rem; }

/* ---------- countdown pill ---------- */
.countdown{
  display:inline-flex; align-items:center; gap:.55rem; padding:.5rem .9rem;
  border:1px solid var(--graphite); border-radius:999px; font-family:var(--mono); font-size:.72rem; color:var(--bone-dim);
}
.countdown .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.countdown strong{ color:var(--bone); font-weight:700; }

.countdown-block{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.countdown-block .unit{ text-align:center; min-width:64px; }
.countdown-block .num{ font-family:var(--mono); font-size:clamp(1.8rem,5vw,2.8rem); font-weight:700; color:var(--bone); line-height:1; }
.countdown-block .lbl{ font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-faint); margin-top:.4rem; display:block; }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-top:calc(var(--nav-h-total) + 2rem); overflow:hidden; }
.hero-canvas-wrap{ position:absolute; inset:0; z-index:0; }
.hero-canvas-wrap canvas{ width:100% !important; height:100% !important; }
.hero-scrim{ position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse at 50% 30%, rgba(11,11,13,0) 0%, rgba(11,11,13,.55) 62%, rgba(11,11,13,.96) 100%); pointer-events:none; }
.hero-content{ position:relative; z-index:2; width:100%; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.hero-foot{ position:absolute; bottom:2rem; left:0; right:0; z-index:2; }
.hero-foot .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.scroll-cue{ display:flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--bone-faint); }
.scroll-cue .line{ width:1px; height:28px; background:linear-gradient(var(--gold),transparent); animation:dropline 1.8s infinite; }
@keyframes dropline{ 0%{ transform:scaleY(0); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } 50.01%{ transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* ---------- product grid ---------- */
.filter-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.filter-pill{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.5rem 1rem; border:1px solid var(--graphite); border-radius:999px; color:var(--bone-dim); background:transparent; cursor:pointer;
  transition:all .2s var(--ease);
}
.filter-pill.is-active, .filter-pill:hover{ border-color:var(--gold-soft); color:var(--bone); }

.product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.6rem; }

.product-card{
  position:relative; background:var(--ash); border:1px solid var(--graphite-soft); border-radius:var(--radius-lg);
  overflow:hidden; transition:border-color .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.product-card:hover{ border-color:var(--graphite); transform:translateY(-4px); box-shadow:0 20px 30px rgba(0,0,0,.35); }
.product-card-media{
  aspect-ratio:4/5; position:relative; background:radial-gradient(circle at 50% 20%, var(--ash-2), var(--obsidian));
  transition:transform .4s var(--ease);
}
.product-card:hover .product-card-media{ transform:scale(1.03); }
.product-card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:1.6rem; filter:drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
.product-card-sigil{ position:absolute; inset:0; opacity:.5; pointer-events:none; }
.product-card-tag{ position:absolute; top:.9rem; left:.9rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; background:rgba(11,11,13,.7); border:1px solid var(--graphite); padding:.3rem .6rem; border-radius:999px; color:var(--gold); }
.product-card-body{ padding:1.3rem 1.4rem 1.5rem; }
.product-card-body .subtitle{ font-size:.78rem; color:var(--bone-faint); margin-top:.2rem; }
.product-card-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:1rem; }
.price{ font-family:var(--mono); font-weight:700; font-size:1.05rem; color:var(--bone); }
.price-from{ font-family:var(--mono); font-size:.7rem; color:var(--bone-faint); text-transform:uppercase; letter-spacing:.1em; }

/* ---------- product detail ---------- */
.product-layout{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:960px){ .product-layout{ grid-template-columns:1.1fr 1fr; gap:4rem; align-items:flex-start; } }

.viewer{
  position:relative; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden;
  background:radial-gradient(circle at 50% 30%, var(--ash-2), var(--obsidian) 75%);
  border:1px solid var(--graphite-soft);
}
.viewer-sigil{ position:absolute; inset:0; width:100% !important; height:100% !important; opacity:.5; }
.viewer-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:2.5rem;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));
  opacity:0; transition:opacity .45s var(--ease);
}
.viewer-img.is-active{ opacity:1; }
.viewer-hint{ position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-faint); display:flex; gap:.5rem; align-items:center; background:rgba(11,11,13,.6); padding:.4rem .8rem; border-radius:999px; }
.viewer-controls{ position:absolute; top:1rem; right:1rem; display:flex; gap:.5rem; z-index:2; }

.product-info .kicker{ margin-bottom:1rem; }
.product-info h1{ font-size:clamp(1.9rem,3.4vw,2.7rem); text-transform:uppercase; margin-bottom:.6rem; }
.product-info .subtitle{ color:var(--bone-faint); margin-bottom:1.4rem; }
.product-info .price{ font-size:1.5rem; margin-bottom:1.6rem; display:block; }
.product-info .desc{ color:var(--bone-dim); margin-bottom:2rem; max-width:56ch; }

.option-group{ margin-bottom:1.6rem; }
.option-label{ display:flex; justify-content:space-between; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:.7rem; }
.swatches{ display:flex; gap:.6rem; flex-wrap:wrap; }
.swatch{
  width:38px; height:38px; border-radius:50%; border:2px solid var(--graphite); cursor:pointer; position:relative;
  transition:border-color .2s;
}
.swatch.is-selected{ border-color:var(--gold); }
.swatch.is-selected::after{ content:''; position:absolute; inset:-5px; border:1px solid var(--gold-soft); border-radius:50%; }
.size-pills{ display:flex; gap:.5rem; flex-wrap:wrap; }
.size-pill{ display:inline-block; min-width:46px; padding:.6rem .5rem; text-align:center; border:1px solid var(--graphite); border-radius:var(--radius); cursor:pointer; font-size:.82rem; font-weight:700; transition:all .2s; }
.size-pill.is-selected{ border-color:var(--gold); background:var(--gold); color:var(--obsidian); }
.size-pill.is-disabled{ opacity:.3; text-decoration:line-through; cursor:not-allowed; }
.size-pill-wrap{ display:inline-flex; }
.size-pill-wrap input:checked + .size-pill{ border-color:var(--gold); background:var(--gold); color:var(--obsidian); }

.qty-stepper{ display:inline-flex; align-items:stretch; border:1px solid var(--graphite); border-radius:var(--radius); overflow:hidden; }
.qty-stepper button{ background:transparent; border:none; color:var(--bone); width:40px; font-size:1.1rem; cursor:pointer; }
.qty-stepper button:hover{ background:var(--ash-2); }
.qty-stepper input{ width:48px; border:none; background:transparent; color:var(--bone); text-align:center; font-family:var(--mono); font-size:1rem; }

.preorder-note{ display:flex; gap:.8rem; align-items:flex-start; background:var(--ash); border:1px solid var(--graphite-soft); border-radius:var(--radius); padding:1rem 1.2rem; margin-top:1.8rem; font-size:.85rem; color:var(--bone-dim); }
.preorder-note strong{ color:var(--gold); }

/* ---------- forms ---------- */
.field{ margin-bottom:1.4rem; }
.field label:not(.checkbox-line):not(.radio-card):not(.size-pill-wrap){ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:.5rem; }
.field .hint{ font-size:.76rem; color:var(--bone-faint); margin-top:.4rem; }
.field .error{ font-size:.76rem; color:var(--error); margin-top:.4rem; }
.input, select.input, textarea.input{
  width:100%; background:var(--ash); border:1px solid var(--graphite); border-radius:var(--radius); color:var(--bone);
  padding:.85rem 1rem; font-family:var(--sans); font-size:.95rem; transition:border-color .2s;
}
.input:focus{ border-color:var(--gold-soft); outline:none; }
textarea.input{ resize:vertical; min-height:100px; }
.input.has-error{ border-color:var(--error); }
.field-row{ display:grid; grid-template-columns:1fr; gap:1.2rem; }
@media (min-width:640px){ .field-row-2{ grid-template-columns:1fr 1fr; } .field-row-3{ grid-template-columns:1fr 1fr 1fr; } }

.radio-card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.8rem; }
.radio-card{ position:relative; display:block; }
.radio-card input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.radio-card .card-face{ display:block; border:1px solid var(--graphite); border-radius:var(--radius); padding:.9rem 1rem; text-align:center; font-size:.85rem; font-weight:700; transition:all .2s; }
.radio-card input:checked + .card-face{ border-color:var(--gold); background:var(--ash-2); color:var(--gold); }
.radio-card .card-face small{ display:block; font-weight:400; color:var(--bone-faint); font-size:.7rem; margin-top:.2rem; }
.radio-card.is-swatch{ width:52px; }
.radio-card.is-swatch .card-face{ width:52px; height:52px; border-radius:50%; padding:0; border-width:2px; position:relative; }
.radio-card.is-swatch input:checked + .card-face::after{ content:''; position:absolute; inset:-6px; border:1px solid var(--gold-soft); border-radius:50%; }
.radio-card.is-base{ width:auto; }
.radio-card.is-base .card-face{ padding:.6rem; text-align:left; }
.radio-card.is-base .card-face img{ width:100%; aspect-ratio:4/5; object-fit:contain; background:var(--ash-2); border-radius:var(--radius); margin-bottom:.5rem; padding:.5rem; }
.radio-card.is-base .card-face .name{ font-size:.82rem; font-weight:700; }
.radio-card.is-hidden{ display:none; }

.checkbox-line{ display:flex; align-items:flex-start; gap:.7rem; font-size:.85rem; color:var(--bone-dim); }
.checkbox-line input{ margin-top:.3rem; accent-color:var(--oxblood); width:16px; height:16px; flex-shrink:0; }

/* ---------- bespoke stepper ---------- */
.bespoke-layout{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:1024px){ .bespoke-layout{ grid-template-columns:1fr .85fr; gap:3.5rem; } }

.step-track{ display:flex; gap:.5rem; margin-bottom:2.5rem; }
.step-track .seg{ flex:1; height:2px; background:var(--graphite); position:relative; overflow:hidden; }
.step-track .seg::after{ content:''; position:absolute; inset:0; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.step-track .seg.is-done::after, .step-track .seg.is-active::after{ transform:scaleX(1); }

.step-panel{ display:none; }
.step-panel.is-active{ display:block; animation:fadein .5s var(--ease); }
@keyframes fadein{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
.step-num{ font-family:var(--mono); color:var(--gold); font-size:.8rem; }
.step-title{ font-size:1.5rem; font-weight:800; text-transform:uppercase; margin:.4rem 0 1.8rem; }

.step-nav{ display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:2.2rem; gap:1rem; }
@media (max-width:479px){ .step-nav .btn{ flex:1 1 100%; } }

.sigil-preview-panel{ background:var(--ash); border:1px solid var(--graphite-soft); border-radius:var(--radius-lg); padding:1.6rem; }
@media (min-width:1024px){ .sigil-preview-panel{ position:sticky; top:calc(var(--nav-h-total) + 1.5rem); } }
.sigil-preview-panel h4{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:1rem; }
.sigil-stage{ position:relative; aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden; background:radial-gradient(circle at 50% 30%, var(--ash-2), var(--obsidian) 75%); margin-bottom:1rem; }
.sigil-stage canvas{ width:100% !important; height:100% !important; }
.sigil-meta{ display:flex; flex-direction:column; gap:.4rem; font-family:var(--mono); font-size:.75rem; color:var(--bone-faint); }
.sigil-meta b{ color:var(--bone); }

/* ---------- cart / checkout ---------- */
.cart-table{ width:100%; border-collapse:collapse; }
.cart-row{ display:grid; grid-template-columns:64px 1fr auto; gap:1rem; align-items:center; padding:1.2rem 0; border-bottom:1px solid var(--graphite-soft); }
.cart-row img{ width:64px; height:76px; object-fit:contain; background:var(--ash-2); border-radius:var(--radius); padding:.4rem; }
.cart-row .name{ font-weight:700; }
.cart-row .meta{ font-size:.78rem; color:var(--bone-faint); margin-top:.2rem; }
.cart-row .line-actions{ display:flex; align-items:center; gap:1rem; }
.cart-remove{ background:none; border:none; color:var(--bone-faint); text-decoration:underline; cursor:pointer; font-size:.75rem; }
.cart-summary{ background:var(--ash); border:1px solid var(--graphite-soft); border-radius:var(--radius-lg); padding:1.6rem; }
@media (min-width:960px){ .cart-summary{ position:sticky; top:calc(var(--nav-h) + 1.5rem); } }
.summary-row{ display:flex; justify-content:space-between; padding:.5rem 0; font-size:.9rem; color:var(--bone-dim); }
.summary-row.total{ color:var(--bone); font-weight:700; font-size:1.1rem; padding-top:1rem; border-top:1px solid var(--graphite-soft); margin-top:.5rem; }
.empty-state{ text-align:center; padding:5rem 1rem; color:var(--bone-faint); }

/* ---------- misc cards / sections ---------- */
.grid-2{ display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:768px){ .grid-2{ grid-template-columns:1fr 1fr; gap:3rem; } }
.grid-3{ display:grid; grid-template-columns:1fr; gap:1.6rem; }
@media (min-width:768px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }

.stat-card{ border-top:1px solid var(--graphite); padding-top:1.2rem; }
.stat-card .num{ font-family:var(--mono); font-size:2.2rem; color:var(--gold); font-weight:700; }
.stat-card .lbl{ color:var(--bone-faint); font-size:.85rem; margin-top:.3rem; }

.process-step{ display:flex; gap:1.4rem; }
.process-step .n{ font-family:var(--mono); font-size:1rem; color:var(--gold); border:1px solid var(--gold-soft); border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.process-step h3{ font-size:1.1rem; margin-bottom:.4rem; }
.process-step p{ color:var(--bone-dim); font-size:.92rem; }

.callout-banner{ background:linear-gradient(120deg, var(--ash) 0%, var(--ash-2) 100%); border:1px solid var(--graphite-soft); border-radius:var(--radius-lg); padding:1.8rem; display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:space-between; }
@media (min-width:640px){ .callout-banner{ padding:2.4rem; } }

.notify-form{ display:flex; gap:.7rem; flex-wrap:wrap; max-width:420px; }
.notify-form .input{ flex:1; min-width:200px; }

.flash{ padding:.9rem 1.2rem; border-radius:var(--radius); font-size:.88rem; margin-bottom:1.5rem; border:1px solid; }
.flash-success{ background:rgba(95,138,108,.1); border-color:var(--success); color:var(--success); }
.flash-error{ background:rgba(192,82,79,.1); border-color:var(--error); color:var(--error); }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--graphite-soft); padding:3.5rem 0 2rem; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:2.4rem; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; } }
.footer-grid h4{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:1rem; }
.footer-grid a{ display:block; font-size:.88rem; color:var(--bone-dim); padding:.35rem 0; transition:color .2s; }
.footer-grid a:hover{ color:var(--bone); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--graphite-soft); font-size:.75rem; color:var(--bone-faint); }

/* ---------- admin ---------- */
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{ width:220px; flex-shrink:0; background:var(--ash); border-right:1px solid var(--graphite-soft); padding:1.6rem 1.2rem; position:sticky; top:0; height:100vh; }
.admin-sidebar .brand{ margin-bottom:2rem; display:block; }
.admin-sidebar a{ display:block; padding:.7rem .8rem; border-radius:var(--radius); font-size:.85rem; color:var(--bone-dim); margin-bottom:.2rem; }
.admin-sidebar a:hover, .admin-sidebar a.is-active{ background:var(--ash-2); color:var(--bone); }
.admin-main{ flex:1; padding:2.2rem; min-width:0; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; flex-wrap:wrap; gap:1rem; }
.admin-table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.admin-table th{ text-align:left; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-faint); padding:.7rem .8rem; border-bottom:1px solid var(--graphite); }
.admin-table td{ padding:.8rem; border-bottom:1px solid var(--graphite-soft); vertical-align:top; }
.admin-table tr:hover td{ background:var(--ash); }
.badge{ display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--graphite); color:var(--bone-dim); }
.badge-received{ color:var(--gold); border-color:var(--gold-soft); }
.badge-in_review, .badge-pending{ color:#c9a24a; border-color:#c9a24a; }
.badge-in_production, .badge-confirmed, .badge-deposit_paid{ color:#5b8fd6; border-color:#5b8fd6; }
.badge-ready, .badge-paid{ color:var(--success); border-color:var(--success); }
.badge-shipped{ color:var(--bone); border-color:var(--bone-dim); }
.badge-cancelled, .badge-failed{ color:var(--error); border-color:var(--error); }
.admin-card{ background:var(--ash); border:1px solid var(--graphite-soft); border-radius:var(--radius-lg); padding:1.6rem; margin-bottom:1.5rem; }
.admin-login{ min-height:100svh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.admin-login-box{ width:100%; max-width:380px; background:var(--ash); border:1px solid var(--graphite-soft); border-radius:var(--radius-lg); padding:2.4rem; }
.kv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem 1.5rem; margin:1.2rem 0; }
.kv-grid .k{ font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--bone-faint); }
.kv-grid .v{ font-size:.92rem; margin-top:.2rem; }

/* ---------- utilities ---------- */
.text-center{ text-align:center; }
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; } .gap-1{ gap:.6rem; } .gap-2{ gap:1.2rem; } .wrap{ flex-wrap:wrap; }
.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; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--gold); color:var(--obsidian); padding:.8rem 1.2rem; z-index:1000; font-weight:700; }
.skip-link:focus{ left:1rem; top:1rem; }

.page-header{ padding:calc(var(--nav-h) + 3.5rem) 0 2.5rem; }
.page-header .h-section{ margin-top:.6rem; }