/* ==========================================================================
   GauravGo — design tokens & primitives
   Spec: DESIGN.md at the repo root. Direction: Editorial Industrial.
   Served once from base.html and cached. Do NOT redeclare these in a template.
   ========================================================================== */

:root {
  /* ---- tonal ramp: cool in shadow, neutral as it rises ---- */
  --d0:#06070A;   /* page ground            */
  --d1:#090B10;   /* recessed bands         */
  --d2:#0E1117;   /* media wells, raised    */
  --d3:#141821;   /* hover / active         */
  --d4:#1B202B;   /* highest surface        */

  /* ---- ink ---- */
  --ink:   rgba(238,242,248,.96);   /* headings                    16.5:1 */
  --ink-2: rgba(238,242,248,.60);   /* secondary / UI               6.6:1 */
  --ink-3: rgba(238,242,248,.48);   /* labels, marginalia           4.9:1 */
  --ink-prose: rgba(238,242,248,.76); /* sustained reading         10.3:1 */
  --rule:  rgba(238,242,248,.10);
  --rule-2:rgba(238,242,248,.20);

  /* ---- accent: one, and at most one accent element per viewport ---- */
  --accent:#38BDF8;
  --accent-ink:#04070A;

  /* ---- semantic (dark ground only; re-derive for any light surface) ---- */
  --ok:#6FB981;
  --warn:#F2C230;
  --err:#E8734B;

  /* ---- type ---- */
  --f:"Archivo","Archivo Fallback","Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,"Roboto Mono","SF Mono",Menlo,Consolas,monospace;

  /* ---- grid ---- */
  --gut:28px;
  --gap:24px;
  --col:96px;

  /* ---- rhythm: every vertical value is a multiple of --bl ---- */
  --bl:8px;

  /* ---- motion ---- */
  --e:cubic-bezier(.16,1,.3,1);
  --t-micro:200ms;
  --t-short:320ms;
  --t-reveal:720ms;

  --header-height:80px;
}

/* ==========================================================================
   Reset — scoped, deliberately small
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
/* Metric-matched fallback for Archivo.

   Without this, the fallback for --f resolved to the generic sans-serif, which
   renders ~6% wider than Archivo. That pushed the hero paragraph (max-width is
   in ch, so the box moves with the font too) to one extra line, and the whole
   hero jumped 27px when Archivo swapped in — 0.121 of the homepage's 0.136 CLS.

   Numbers are measured in-browser, not derived from font tables: the variable
   font's default instance is not what the page actually renders, so hhea
   arithmetic pointed the wrong way. For "Handgloves mixture 12345" at 100px,
   Archivo is 1184.69px and Arial/Liberation Sans is 1189.61px:
     size-adjust      = 1184.69 / 1189.61          =  99.59%
     ascent-override  = (878/1000)  / 0.9959       =  88.16%
     descent-override = (210/1000)  / 0.9959       =  21.09%
   Re-measure these the same way if --f changes. */
@font-face{
  font-family:"Archivo Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Helvetica"),local("Liberation Sans"),local("Roboto");
  size-adjust:99.59%;
  ascent-override:88.16%;
  descent-override:21.09%;
  line-gap-override:0%;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--d0);
  color:var(--ink);
  font-family:var(--f);
  font-size:1.0625rem;
  line-height:1.6470588;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ==========================================================================
   The breakout grid — content on `main`, media escapes to `full`
   ========================================================================== */
.g{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gut),1fr)
    [main-start col-start] repeat(11, minmax(0,var(--col)) [col-start]) minmax(0,var(--col))
    [main-end] minmax(var(--gut),1fr) [full-end];
  column-gap:var(--gap);
}
.m{grid-column:main-start / main-end}

/* ==========================================================================
   Type
   ========================================================================== */
/* Eyebrow. Base tier is quiet but legible; --lead earns an accent anchor and
   full ink so a hero kicker reads as deliberate rather than as faint grey. */
.kick{font-family:var(--mono);font-size:.75rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;color:var(--ink-2)}
.kick b{color:var(--accent);font-weight:500}
.kick--lead{display:inline-flex;align-items:center;gap:14px;color:var(--ink);
  font-size:.8125rem;letter-spacing:.2em}
.kick--lead::before{content:"";width:30px;height:2px;background:var(--accent);flex:none}
.kick--lead em{font-style:normal;color:var(--ink-3)}

/* Wordmark row — nominative use of engine names, set in our own type.
   No third-party logo files, no trademark assets, zero bytes. */
.builtwith{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--bl)*2) calc(var(--bl)*4)}
.builtwith span{font-family:var(--mono);font-size:.8125rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-2);padding:calc(var(--bl)*1.5) 0;
  border-bottom:1px solid var(--rule);transition:color var(--t-micro) var(--e),border-color var(--t-micro) var(--e)}
.builtwith span:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* Display hangs its sidebearing past the text margin — optical alignment. */
.d1{
  font-family:var(--f);
  font-variation-settings:"wdth" 78,"wght" 860;
  font-size:clamp(3.3rem,10.4vw,9.4rem);
  line-height:.845;letter-spacing:-.047em;text-transform:uppercase;
  margin:0 0 0 -.055em;
}
.d2{
  font-family:var(--f);
  font-variation-settings:"wdth" 83,"wght" 790;
  font-size:clamp(2.05rem,5.2vw,4.3rem);
  line-height:.9;letter-spacing:-.04em;text-transform:uppercase;
  margin:0 0 0 -.045em;
}
.sub{
  font-family:var(--f);
  font-variation-settings:"wdth" 97,"wght" 380;
  font-size:clamp(1.15rem,1.85vw,1.55rem);
  line-height:1.25;letter-spacing:-.02em;color:var(--ink-2);margin:0;
}
.h3{font-family:var(--f);font-variation-settings:"wdth" 92,"wght" 660;font-size:1.25rem;line-height:1.2;letter-spacing:-.021em;margin:0}
/* Sustained reading. Brighter than --ink-2 and looser than the global
   line-height, because these are paragraphs rather than interface text. */
.p{font-family:var(--f);color:var(--ink-prose);margin:0;line-height:1.72;max-width:64ch}
.p--sm{font-size:.9375rem;line-height:1.75}
.p--lead{font-size:1.15rem;line-height:1.62;color:var(--ink);max-width:52ch}

/* Product and engine names inside prose. Ink only - no weight change.
   Bolding short fragments like 2D/3D/AR/VR speckles the line and fights
   reading; a quiet lift lets them register without breaking the rhythm. */
.tk{color:var(--ink)}
.p--sm{font-size:.9375rem;line-height:1.7066}

/* The second voice: monospace at display scale. Zero download cost. */
.mnum{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.04em}
.mstat{font-family:var(--mono);font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.midx{font-family:var(--mono);font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums;font-weight:500}

/* ==========================================================================
   Controls — zero radius, zero shadow, sitewide
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;
  padding:calc(var(--bl)*2) calc(var(--bl)*3.5);
  background:var(--accent);color:var(--accent-ink);border:0;cursor:pointer;
  transition:filter var(--t-micro) var(--e);
}
.btn:hover{filter:brightness(1.1)}
.btn svg{width:14px;height:14px}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--rule-2)}
.btn--ghost:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);filter:none}
.btn svg{transition:transform var(--t-micro) var(--e)}
.btn:hover svg{transform:translateX(3px)}
.btn--sm{padding:calc(var(--bl)*1.5) calc(var(--bl)*2.5);font-size:.6875rem}

.lnk{
  display:inline-block;
  font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-2);border-bottom:1px solid var(--rule-2);padding-bottom:4px;
  transition:color var(--t-micro) var(--e),border-color var(--t-micro) var(--e);
}
.lnk:hover{color:var(--accent);border-color:var(--accent)}

:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ==========================================================================
   Section rhythm — never place two of the same class adjacently
   ========================================================================== */
.s{position:relative;padding-top:var(--pt);padding-bottom:var(--pb)}
.s--tight{--pt:calc(var(--bl)*12);--pb:calc(var(--bl)*12)}
.s--dense{--pt:calc(var(--bl)*15);--pb:calc(var(--bl)*15)}
.s--open {--pt:calc(var(--bl)*21);--pb:calc(var(--bl)*21)}
.s--vopen{--pt:calc(var(--bl)*28);--pb:calc(var(--bl)*28)}
.s + .s{border-top:1px solid var(--rule)}

/* ==========================================================================
   Editorial detail
   ========================================================================== */
.bigidx{
  position:absolute;right:calc(100% + 26px);top:-.16em;
  font-variation-settings:"wdth" 70,"wght" 860;
  font-size:clamp(4rem,8.6vw,8.6rem);line-height:.76;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px var(--rule-2);
  pointer-events:none;user-select:none;
}
.vlabel{
  position:absolute;left:2px;top:calc(100% + 14px);
  writing-mode:vertical-rl;
  font-family:var(--mono);font-size:.625rem;text-transform:uppercase;letter-spacing:.28em;
  color:var(--ink-3);white-space:nowrap;
}
.quote{border-left:2px solid var(--accent);padding-left:clamp(20px,2.2vw,32px)}

/* ==========================================================================
   Material — three fixed layers, the entire decoration budget
   ========================================================================== */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;mix-blend-mode:overlay;display:none}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 88% at 50% 0%,transparent 36%,rgba(0,0,0,.55) 100%)}
/* Below 1081px every section already collapses to a single column, so the 12
   column tracks carry no layout — but their 13 column-gaps still do. At the
   declared 24px that is 312px of dead width plus 56px of gutter: a 368px
   minimum, which forced a 320px phone to scroll sideways. Shrinking the dead
   space only; the named lines and the desktop grid in DESIGN.md are untouched. */
@media (max-width:1080px){
  :root{--gap:16px;--gut:20px}
}

@media (min-width:900px) and (prefers-reduced-motion:no-preference){.grain{display:block}}

/* ==========================================================================
   Motion — arrival only. Scoped to .js so a script failure never hides content.
   ========================================================================== */
.js .rv-line{display:block;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .js .rv-line > span{display:block;transform:translateY(102%);animation:ggLineUp 1s var(--e) forwards}
  .js .rv-line:nth-child(2) > span{animation-delay:.1s}
  @keyframes ggLineUp{to{transform:translateY(0)}}

  .js .rv{opacity:0;transform:translateY(20px);
    transition:opacity var(--t-reveal) var(--e),transform var(--t-reveal) var(--e)}
  .js .rv.in{opacity:1;transform:none}
  .js .rv-d1{transition-delay:.06s}
  .js .rv-d2{transition-delay:.12s}
  .js .rv-d3{transition-delay:.18s}
  .js .rv-d4{transition-delay:.24s}
  .js .rv-d5{transition-delay:.30s}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}