/* =========================================================================
   21G storefront — base. Reset, layout primitives, typography, reveals.
   Ported from 21grams.studio architecture, re-skinned gasoline-minéral.
   ========================================================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}

body{
  background:var(--ink-deep);
  color:var(--ivory);
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,iframe,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;}
::selection{background:var(--ivory);color:var(--ink-deep);}

/* -------------------------------------------------------------- LAYOUT */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.container--narrow{max-width:var(--maxw-narrow);}
.section{position:relative;padding-block:var(--section-y);}
.section--alt{background:var(--ink-graphite);}
.section--tight{padding-block:clamp(3rem,7vw,6rem);}

.grid-2{display:grid;gap:var(--s-12);}
@media(min-width:880px){.grid-2{grid-template-columns:minmax(0,18rem) 1fr;align-items:start;gap:var(--s-24);}}

/* ---------------------------------------------------------- TYPOGRAPHY */
.mono{font-family:var(--font-mono);letter-spacing:0.02em;}
.kicker{
  display:inline-block;font-family:var(--font-body);font-size:var(--t-kicker);
  font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--gasoline-blue-2);
}
.display{
  font-family:var(--font-display);font-size:var(--t-display);font-weight:700;
  line-height:1.03;letter-spacing:-0.02em;color:var(--ivory);
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--ivory);}
.h2{font-family:var(--font-display);font-size:var(--t-h2);font-weight:600;line-height:1.12;letter-spacing:-0.015em;}
.h3{font-family:var(--font-display);font-size:var(--t-h3);font-weight:600;line-height:1.18;}
.sub{font-size:var(--t-sub);line-height:1.5;color:var(--steel-light);max-width:44rem;}
.lead{font-size:var(--t-sub);line-height:1.6;color:var(--ivory);max-width:44rem;}
.dim{color:var(--steel-mid);}
.accent{color:var(--gasoline-blue-2);}
strong,b{color:var(--ivory);font-weight:600;}
.block-head{display:flex;flex-direction:column;gap:var(--s-6);margin-bottom:clamp(2.5rem,6vw,5rem);max-width:62rem;}
.block-head .sub{margin-top:var(--s-2);}

/* --------------------------------------------------------- GRAIN (subtle) */
.grain-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:100;opacity:0.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%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");
}

/* ----------------------------------------------- VIDEO BG (full-frame gradient, NO scrim box) */
.video-bg{position:absolute;inset:0;overflow:hidden;z-index:0;background:var(--ink-deep);}
.video-bg iframe,.video-bg video{
  position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  transform:translate(-50%,-50%);border:none;pointer-events:none;object-fit:cover;
}
.video-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top, rgba(11,14,20,0.72) 0%, rgba(11,14,20,0.18) 38%, rgba(11,14,20,0) 64%);
}
.on-video{text-shadow:0 1px 2px rgba(0,0,0,0.5), 0 2px 18px rgba(0,0,0,0.55), 0 0 60px rgba(0,0,0,0.4);}

/* ------------------------------------------------------------- REVEALS */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--d) var(--ease),transform var(--d) var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* ----------------------------------------------------------- UTILITIES */
.hidden{display:none !important;}
[hidden]{display:none !important;}

/* Keyboard focus — visible on pure black, no box, no colour. Mouse users never see it. */
:focus-visible{outline:2px solid var(--white);outline-offset:3px;border-radius:2px;}
.skip-link{
  position:fixed;top:var(--s-4);left:var(--s-4);z-index:9999;transform:translateY(-200%);
  background:var(--white);color:var(--ink-deep);font-family:var(--font-mono);font-size:0.78rem;
  letter-spacing:0.04em;padding:10px 16px;border-radius:var(--radius-sm);
  transition:transform var(--d-fast) var(--ease-p);
}
.skip-link:focus{transform:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .reveal{opacity:1 !important;transform:none !important;}
}