/* =========================================================================
   REASONABLE — design system
   Palette + type from the New Void identity (Formular, thermal gradient).
   Fluid rebuild of the fixed 1920 mock. Iterate freely: everything is tokens.
   ========================================================================= */

/* ---- Formular ----------------------------------------------------------
   Drop the licensed files into assets/fonts/ (see DROP_FORMULAR_HERE.txt).
   Until they land, the stack falls back to a neutral grotesque and the site
   still reads correctly. Filenames below are what the build expects.
   ------------------------------------------------------------------------ */
@font-face{
  font-family:"Formular"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/Formular-Light.woff2") format("woff2"),
      url("../fonts/Formular-Light.woff")  format("woff");
}
@font-face{
  font-family:"Formular"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/Formular-Regular.woff2") format("woff2"),
      url("../fonts/Formular-Regular.woff")  format("woff");
}
/* NOTE: Medium (500) + Bold (700) weights not yet supplied. Until they are,
   500 maps to Regular and 700 is browser-synthesised. Drop the files in and
   re-add @font-face rules for weight:500 / weight:700 for full fidelity. */
@font-face{
  font-family:"Formular Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/FormularMono-Regular.woff2") format("woff2"),
      url("../fonts/FormularMono-Regular.woff")  format("woff");
}

:root{
  /* core palette */
  --paper:#F2F2F2;        /* off white  */
  --ink:#191912;          /* asphalt black */
  --stone:#E2E1DD;        /* mid light band (careers) */
  --card:#F7F7F5;         /* raised card on the stone band */
  --hair:rgba(25,25,18,.14);
  --ink-70:rgba(25,25,18,.70);
  --ink-50:rgba(25,25,18,.50);
  --paper-70:rgba(242,242,242,.70);
  --paper-45:rgba(242,242,242,.45);

  /* thermal gradient stops */
  --g-blue:#003E57;
  --g-violet:#6A1E63;
  --g-red:#EB230F;
  --g-orange:#F6641A;
  --g-yellow:#FFCD51;

  /* type */
  --font-display:"Formular","Helvetica Neue","Arial",system-ui,sans-serif;
  --font-mono:"Formular Mono",ui-monospace,"SF Mono","Roboto Mono","Menlo",monospace;
  --ff:"ss01" 1,"ss03" 1,"ss04" 1,"ss05" 1,"ss07" 1,"ss09" 1,"salt" 1;

  /* rhythm */
  --wrap:1360px;
  --gutter:clamp(20px,5vw,92px);
  --section-y:clamp(72px,11vw,168px);
}

/* ---- reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--g-yellow);color:var(--ink)}

html{scroll-behavior:smooth}
body{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---- primitives --------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}

/* display type — the big Formular headings */
.display{
  font-family:var(--font-display);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-0.035em;
  font-feature-settings:var(--ff);
}
.display.med{font-weight:500}
.display.bold{font-weight:700}
.d-1{font-size:clamp(3.1rem,8.2vw,6.3rem)}   /* hero / section heroes ~90px */
.d-2{font-size:clamp(2.5rem,6vw,4.6rem)}
.d-3{font-size:clamp(2rem,4.4vw,3.25rem)}

/* mono labels — letter-spaced uppercase */
.label{
  font-family:var(--font-mono);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:clamp(.72rem,1vw,.82rem);
  line-height:1.5;
  font-feature-settings:"salt" 1;
}
.label.lg{font-size:clamp(.8rem,1.1vw,.95rem)}

/* body copy */
.body{
  font-size:clamp(1.02rem,1.35vw,1.28rem);
  line-height:1.42;
  max-width:40ch;
}
.body.wide{max-width:52ch}
.muted{color:var(--ink-70)}

/* button — bordered, glyph + mono label + hover fill */
.btn{
  --bd:var(--ink);--fg:var(--ink);
  display:inline-flex;align-items:center;gap:2.2em;justify-content:space-between;
  border:2px solid var(--bd);color:var(--fg);
  padding:.95rem 1.25rem;min-width:15rem;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.11em;
  font-size:clamp(.75rem,.95vw,.86rem);
  transition:background .32s cubic-bezier(.4,0,.1,1),color .32s cubic-bezier(.4,0,.1,1);
}
.btn .glyph{width:.72em;height:.72em;flex:none;transition:transform .32s cubic-bezier(.4,0,.1,1)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:hover .glyph{transform:rotate(90deg)}
.btn.on-dark{--bd:var(--paper);--fg:var(--paper)}
.btn.on-dark:hover{background:var(--paper);color:var(--ink)}
.btn .glyph svg,.btn .glyph path{fill:currentColor}

/* small inline geometric glyph (sprite via <use>) */
.g{display:inline-block;vertical-align:middle;width:.62em;height:.62em}
.g svg,.btn .glyph svg{display:block;width:100%;height:100%;fill:currentColor}
.g svg *,.btn .glyph svg *{fill:currentColor}

/* focus */
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:2px solid var(--g-red);outline-offset:3px;border-radius:2px;
}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:absolute;inset:0 0 auto 0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(20px,3vw,34px) var(--gutter);
}
.nav a{display:inline-flex;align-items:center}
.nav .wordmark{height:clamp(20px,2.1vw,26px);width:auto}
.nav .links{display:flex;gap:clamp(20px,3vw,46px);align-items:center}
.nav .links a{position:relative;color:var(--paper-70);transition:color .25s}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--paper)}
.nav .links a::after{
  content:"";position:absolute;left:0;bottom:-.5em;height:1px;width:0;
  background:currentColor;transition:width .3s cubic-bezier(.4,0,.1,1);
}
.nav .links a:hover::after,.nav .links a[aria-current]::after{width:100%}
/* nav on light pages */
.nav.on-light .links a{color:var(--ink-50)}
.nav.on-light .links a:hover,.nav.on-light .links a[aria-current]{color:var(--ink)}

/* =========================================================================
   HERO — dark, thermal gradient, glyph field
   ========================================================================= */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(100svh,940px);
  background:var(--ink);color:var(--paper);
  display:flex;align-items:flex-end;
  padding-block:clamp(150px,20vh,240px) clamp(64px,12vh,150px);
}
/* the thermal horizon */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(125% 92% at 84% 128%,
      var(--g-yellow) 0%, var(--g-orange) 9%, var(--g-red) 17%,
      var(--g-violet) 27%, var(--g-blue) 39%, rgba(0,62,87,0) 58%),
    radial-gradient(80% 60% at 12% 6%, rgba(242,242,242,.05), transparent 60%),
    var(--ink);
}
/* fine noise overlay */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.5;mix-blend-mode:overlay;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.hero .wrap{width:100%;position:relative;z-index:2}
.hero h1{max-width:12ch;margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.hero .body{color:var(--paper);opacity:.92;max-width:46ch}

/* glyph field — populated by main.js; screen-blends over the gradient */
.glyphfield{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  mix-blend-mode:screen;
}
.glyphfield .gcell{
  position:absolute;transform:translate(-50%,-50%);
  background:currentColor;
}
.gc-square{}
.gc-circle{border-radius:50%}
.gc-dot{background:radial-gradient(currentColor 46%,transparent 50%)}
.gc-tri{clip-path:polygon(0 0,100% 50%,0 100%)}
.gc-diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.gc-plus{background:
  linear-gradient(currentColor,currentColor) center/100% 30% no-repeat,
  linear-gradient(currentColor,currentColor) center/30% 100% no-repeat}
.gcell.tw{animation:gtw var(--du,7s) ease-in-out var(--dl,0s) infinite}
@keyframes gtw{0%,100%{opacity:var(--o,1)}50%{opacity:.22}}
.glyphfield.built{animation:ffade 1.1s ease both}
@keyframes ffade{from{opacity:0}to{opacity:1}}

/* =========================================================================
   FEATURED POST (NVIDIA)
   ========================================================================= */
.featured{background:var(--paper)}
.split{
  display:grid;gap:clamp(2.5rem,6vw,5.5rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media(min-width:900px){ .split{grid-template-columns:1.05fr .95fr} }
.featured .kicker{margin-bottom:clamp(1.1rem,2.2vw,1.7rem)}
.featured h2{margin-bottom:clamp(1.4rem,3vw,2.1rem)}
.collab{margin-top:clamp(1.6rem,3vw,2.3rem)}
.collab .label{display:block;margin-bottom:.7rem;color:var(--ink-70)}
.nemotron{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:.01em;line-height:1;
}
.nemotron span{color:#868582;font-weight:500}
.featured .readside{display:flex;flex-direction:column;gap:clamp(1.6rem,3vw,2.3rem);padding-top:.4rem}
.featured .readside .body{max-width:46ch}

/* =========================================================================
   CAREERS
   ========================================================================= */
.careers{background:var(--stone)}
.careers .split{grid-template-columns:1fr}
@media(min-width:960px){ .careers .split{grid-template-columns:.85fr 1.15fr} }
.careers h2{margin-bottom:clamp(1rem,2vw,1.5rem)}
.careers .lead{display:flex;flex-direction:column;gap:clamp(1.6rem,3vw,2.4rem)}
.careers .lead .label{color:var(--ink-70)}

/* job card */
.jobcard{
  background:var(--card);border-radius:18px;
  padding:clamp(1.8rem,3.4vw,3.1rem);
  display:flex;flex-direction:column;gap:1.4rem;min-height:clamp(360px,42vw,480px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -30px rgba(25,25,18,.5);
}
.jobcard h3{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.4rem,2.5vw,1.9rem);letter-spacing:-0.02em;line-height:1.15;
}
.jobcard .meta{display:flex;flex-direction:column;gap:.15rem;margin-top:.4rem}
.jobcard .meta .label{letter-spacing:.14em}
.jobcard .locs{margin-top:1.1rem;display:flex;flex-direction:column;gap:.35rem;
  font-size:clamp(1rem,1.3vw,1.18rem)}
.jobcard .locs b{font-weight:700}
.jobcard .cardfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  padding-top:1.4rem;border-top:1px solid var(--hair)}
.jobcard .moreinfo{display:inline-flex;align-items:center;gap:1rem;opacity:.6;
  transition:opacity .25s}
.jobcard .moreinfo:hover{opacity:1}
.jobcard .glyphrow{display:inline-flex;gap:.5rem;align-items:center}
.jobcard .arrows{display:inline-flex;gap:1.3rem;opacity:.55}
.jobcard .arrows button{font-family:var(--font-mono);font-size:1.1rem;transition:transform .2s,opacity .2s;opacity:.9}
.jobcard .arrows button:hover{opacity:1}
.jobcard .arrows button.prev:hover{transform:translateX(-3px)}
.jobcard .arrows button.next:hover{transform:translateX(3px)}

/* role detail (careers page) */
.role{border-top:1px solid var(--ink);padding-top:clamp(1.6rem,3vw,2.6rem);margin-top:1.4rem;
  display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,3rem)}
@media(min-width:900px){ .role{grid-template-columns:.82fr 1.18fr} }
.rolehead h2{margin-bottom:1.1rem}
.roletags{display:flex;gap:.7rem;margin-bottom:1.2rem;flex-wrap:wrap}
.roletags .label{border:1px solid var(--hair);padding:.4em .8em;border-radius:100px;color:var(--ink-70)}
.rolelocs{display:flex;flex-direction:column;gap:.35rem;font-size:clamp(1rem,1.3vw,1.15rem);color:var(--ink-70)}
.rolelocs b{color:var(--ink);font-weight:700}
.rolebody h3.label{margin:1.8rem 0 .8rem;color:var(--ink-70)}
.rolelist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem;max-width:58ch}
.rolelist li{position:relative;padding-left:1.5rem;font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.45}
.rolelist li::before{content:"";position:absolute;left:0;top:.5em;width:.5rem;height:.5rem;background:var(--g-red)}
.ulink{border-bottom:1px solid var(--ink-50)}
.ulink:hover{border-color:var(--ink)}

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact{background:var(--paper);text-align:left}
.contact .big{max-width:20ch}
.contact .link{position:relative;white-space:nowrap}
.contact .link::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.055em;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.4,0,.1,1);
}
.contact .link:hover::after{transform:scaleX(1)}
.contact .rmark{width:clamp(48px,7vw,84px);height:auto;margin-top:clamp(2rem,4vw,0)}
.contact .row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}

/* =========================================================================
   FOOTER — dark, giant lockup, inspect/verify/trust
   ========================================================================= */
.sitefooter{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink);color:var(--paper);
  padding-top:clamp(64px,10vw,120px);
}
.sitefooter::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 6% 120%,
      var(--g-yellow) 0%, var(--g-orange) 8%, var(--g-red) 16%,
      var(--g-violet) 26%, var(--g-blue) 40%, rgba(0,62,87,0) 60%),
    var(--ink);
  opacity:.9;
}
.footbar{
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding-bottom:1.4rem;
}
.footbar .motto{display:inline-flex;align-items:center;gap:.85rem;color:var(--paper)}
.footbar .motto .g{opacity:.95}
.footbar .copy{color:var(--paper-70)}
.lockup{width:100%;height:auto;display:block;margin-bottom:-0.5%}
.lockup path{fill:var(--paper)}

/* footer nav (secondary links, useful for a real site) */
.footlinks{display:flex;gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.footlinks a{color:var(--paper-70);transition:color .25s}
.footlinks a:hover{color:var(--paper)}

/* =========================================================================
   REVEAL (progressive; no-JS shows everything)
   ========================================================================= */
.reveal{opacity:0;transform:translateY(18px)}
.revealed .reveal,.reveal.is-in{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.no-js .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* =========================================================================
   ARTICLE (blog post)
   ========================================================================= */
.post{background:var(--paper)}
.post-hero{padding-block:clamp(140px,18vh,220px) clamp(40px,6vw,80px)}
.post-hero .kicker{margin-bottom:1.4rem}
.post-hero h1{max-width:16ch;margin-bottom:1.6rem}
.prose{max-width:68ch;margin-inline:auto;
  font-size:clamp(1.06rem,1.4vw,1.3rem);line-height:1.62}
.prose>*+*{margin-top:1.5em}
.prose h2{font-family:var(--font-display);font-weight:500;letter-spacing:-0.02em;
  font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1;margin-top:2.4em}
.prose h3{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.3rem,2.2vw,1.7rem);margin-top:1.8em}
.prose a{border-bottom:1px solid var(--ink-50)}
.prose a:hover{border-color:var(--ink)}
.prose blockquote{border-left:3px solid var(--g-red);padding-left:1.2em;color:var(--ink-70);font-style:normal}
.prose code{font-family:var(--font-mono);font-size:.86em;background:#e6e6e2;padding:.12em .4em;border-radius:4px}
.prose figure{margin:2em 0}
.prose figcaption{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;
  font-size:.72rem;color:var(--ink-50);margin-top:.7em}
.prose hr{border:0;border-top:1px solid var(--hair);margin:2.6em 0}
.draftnote{border:1px dashed var(--g-red);background:rgba(235,35,15,.05);
  border-radius:10px;padding:1.1em 1.3em;margin:2em 0}
.draftnote .label{color:var(--g-red);margin-bottom:.4em}
.draftnote p{font-size:.92em;color:var(--ink-70);margin:0}
.draftnote p+p{margin-top:.4em}

/* post list */
.postlist{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.postlist a.item{
  display:grid;grid-template-columns:1fr;gap:.6rem;
  padding-block:clamp(1.8rem,3.4vw,2.8rem);border-bottom:1px solid var(--hair);
  transition:padding-left .3s cubic-bezier(.4,0,.1,1);
}
@media(min-width:820px){
  .postlist a.item{grid-template-columns:14rem 1fr auto;align-items:baseline;gap:2.5rem}
}
.postlist a.item:hover{padding-left:.7rem}
.postlist .item h3{font-family:var(--font-display);font-weight:500;letter-spacing:-0.02em;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.12}
.postlist .item .arrow{font-family:var(--font-mono);opacity:.4;transition:opacity .3s,transform .3s}
.postlist a.item:hover .arrow{opacity:1;transform:translateX(4px)}

/* generic light page top spacing when hero is not dark */
.pagetop{padding-top:clamp(140px,16vh,200px)}

/* utility */
.stack-sm{display:flex;flex-direction:column;gap:.8rem}
.mt-s{margin-top:clamp(1.4rem,3vw,2.2rem)}
.center{text-align:center}
.hide{display:none !important}