/* =========================================================================
   DRIVEN EDGE LLC — "Precision Instrument" component + layout styles
   Consumes the semantic tokens in tokens.css.

   System: a spec-sheet / instrument panel. Monospace carries the chrome
   (labels, indices, nav, footer, datasheets); Fraunces serif is the warm
   anchor for headlines; Inter for reading prose. Structure is drawn with
   hairline rules, a measurement ruler, numbered sections, and amber
   registration-mark "reticle" corners on panels — the signature device.
   Amber stays rationed: reticles, links, primary action, section indices.
   ========================================================================= */

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1rem);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:var(--t-body);
  line-height:1.65;
  font-feature-settings:"cv05" 1, "ss01" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  color:var(--text-strong);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-0.012em;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; }
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--primary-hover); }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--amber); color:#fff; }

/* mono helper */
.mono{
  font-family:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- focus visibility ---------- */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}
a:focus-visible,
button:focus-visible{ outline-offset:4px; }

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;
  left:var(--s3); top:-100%;
  z-index:200;
  background:var(--ink);
  color:var(--text-on-dark);
  padding:0.7rem 1.1rem;
  border-radius:var(--r-sm);
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-small);
  font-weight:500;
  transition:top .18s ease;
}
.skip-link:focus{ top:var(--s3); color:var(--text-on-dark); }

/* ---------- layout helpers ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.prose{ max-width:var(--container-prose); }

/* mono kicker / index label  — e.g. "01 / OVERVIEW" */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-eyebrow);
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.kicker .idx{ color:var(--primary); }
.kicker .pip{
  width:6px; height:6px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 3px var(--amber-wash);
}

/* signature device — amber registration-mark corners on panels */
.tick{ position:relative; }
.tick::before,
.tick::after{
  content:"";
  position:absolute;
  width:var(--tick); height:var(--tick);
  border-color:var(--reticle);
  border-style:solid;
  pointer-events:none;
}
.tick::before{ top:-1px; left:-1px; border-width:1px 0 0 1px; }
.tick::after{ bottom:-1px; right:-1px; border-width:0 1px 1px 0; }

/* measurement ruler — full-width hairline with regular ticks */
.ruler{
  height:13px;
  border-bottom:1px solid var(--rule);
  background-image:repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 28px);
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:28px 6px;
}

/* ---------- buttons (squared, mono, spec-style) ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-small);
  font-weight:500;
  letter-spacing:0.04em;
  padding:0.8rem 1.25rem;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn--primary{
  background:var(--primary);
  color:#fff;
  box-shadow:var(--e1);
}
.btn--primary:hover{
  background:var(--primary-hover);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:var(--e2);
}
.btn--ghost{
  background:transparent;
  color:var(--text-strong);
  border-color:var(--rule-strong);
}
.btn--ghost:hover{
  color:var(--text-strong);
  border-color:var(--graphite);
  background:var(--surface);
}
.btn .arrow{ transition:transform .18s ease; }
.btn:hover .arrow{ transform:translateX(3px); }

/* =========================================================================
   MASTHEAD (header)
   ========================================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s4);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:0.65rem;
  color:var(--text-strong);
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  font-size:1.2rem;
  letter-spacing:-0.01em;
}
.brand:hover{ color:var(--text-strong); }
.brand .mark{ flex:0 0 auto; }
.brand__tag{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:0.6rem;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding-left:0.65rem;
  margin-left:0.15rem;
  border-left:1px solid var(--rule-strong);
}

.primary-nav{ display:flex; align-items:center; gap:var(--s5); }
.primary-nav ul{
  display:flex;
  align-items:center;
  gap:var(--s5);
  list-style:none;
  margin:0; padding:0;
}
.primary-nav a:not(.btn){
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  color:var(--text);
  font-size:var(--t-small);
  font-weight:500;
  letter-spacing:0.04em;
  position:relative;
  padding-block:0.25rem;
}
.primary-nav a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:100%; height:1px;
  background:var(--primary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.primary-nav a:not(.btn):hover{ color:var(--text-strong); }
.primary-nav a:not(.btn):hover::after{ transform:scaleX(1); }

/* hamburger */
.nav-toggle{
  display:none;
  width:2.75rem; height:2.75rem;
  align-items:center; justify-content:center;
  background:transparent;
  border:1px solid var(--rule-strong);
  border-radius:var(--r-sm);
  cursor:pointer;
  color:var(--text-strong);
}
.nav-toggle svg{ width:1.25rem; height:1.25rem; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; }
.hero__top{
  /* the masthead ruler strip + coordinates */
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}
.hero__coord{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-eyebrow);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-muted);
  white-space:nowrap;
  padding-bottom:0.1rem;
}
.hero__body{
  padding-block:clamp(3rem, 1.5rem + 7vw, 7rem) var(--section-y);
}
.hero h1{
  font-size:var(--t-hero);
  font-weight:600;
  max-width:16ch;
  margin:var(--s4) 0 var(--s4);
}
.hero h1 .ink{ color:var(--primary); font-style:italic; font-weight:500; }
.hero__readout{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-small);
  letter-spacing:0.02em;
  color:var(--text-muted);
  margin-bottom:var(--s4);
}
.hero__lead{
  font-size:var(--t-lead);
  color:var(--text);
  max-width:54ch;
  line-height:1.55;
  margin-bottom:var(--s6);
}
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); }

/* =========================================================================
   DATASHEET — bordered key/value spec grid
   ========================================================================= */
.datasheet{
  margin:var(--s7) 0 0;
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  background:var(--surface);
}
.datasheet > div{
  padding:var(--s4) var(--s4) var(--s5);
  border-right:1px solid var(--rule);
}
.datasheet > div:last-child{ border-right:0; }
.datasheet dt{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-eyebrow);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:0.55rem;
}
.datasheet dd{
  margin:0;
  font-size:var(--t-small);
  color:var(--text);
  line-height:1.5;
}

/* =========================================================================
   SECTION scaffolding — numbered spec sections
   ========================================================================= */
.section{
  padding-block:var(--section-y);
  border-top:1px solid var(--rule);
}
.section__bar{
  display:flex;
  align-items:baseline;
  gap:var(--s4);
  padding-bottom:var(--s4);
  margin-bottom:var(--s6);
  border-bottom:1px solid var(--rule);
}
.section__no{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
  font-weight:500;
  color:var(--primary);
  line-height:1;
  letter-spacing:0.02em;
}
.section__label{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-small);
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--text-strong);
}
.section__meta{
  margin-left:auto;
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-eyebrow);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-muted);
}

/* About */
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(2rem, 1rem + 5vw, 5rem);
  align-items:start;
}
.about-grid h2{ font-size:var(--t-h2); max-width:18ch; margin-bottom:var(--s4); }
.about-grid .body-col p{ font-size:var(--t-lead); color:var(--text); line-height:1.6; }
.about-grid .body-col p + p{ margin-top:var(--s4); }

/* spec panel — "company at a glance" datasheet column */
.spec-panel{
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--surface);
  padding:var(--s5);
}
.spec-panel .spec-panel__cap{
  display:flex; align-items:center; justify-content:space-between;
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-eyebrow);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding-bottom:var(--s3);
  margin-bottom:var(--s3);
  border-bottom:1px solid var(--rule);
}
.spec-panel dl{ margin:0; display:grid; }
.spec-panel dl > div{
  display:grid;
  grid-template-columns:minmax(0,9rem) minmax(0,1fr);
  gap:var(--s3);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--rule);
}
.spec-panel dl > div:last-child{ padding-bottom:0; border-bottom:0; }
.spec-panel dt{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-eyebrow);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--primary);
}
.spec-panel dd{ margin:0; font-size:var(--t-small); color:var(--text); font-weight:500; }

/* =========================================================================
   PRINCIPLES — spec cells in a hairline grid
   ========================================================================= */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  overflow:hidden;
  background:var(--surface);
}
.cell{
  padding:var(--s5);
  border-right:1px solid var(--rule);
  position:relative;
  transition:background-color .22s ease;
}
.cell:last-child{ border-right:0; }
.cell:hover{ background:var(--amber-wash); }
.cell .idx{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-eyebrow);
  letter-spacing:0.14em;
  color:var(--primary);
  margin-bottom:var(--s4);
}
.cell h3{ font-size:var(--t-h3); margin-bottom:var(--s2); max-width:18ch; }
.cell p{ color:var(--text-muted); font-size:var(--t-body); line-height:1.6; }

/* =========================================================================
   CONTACT — dark instrument panel
   ========================================================================= */
.contact{
  background:var(--surface-dark);
  color:var(--text-on-dark);
  border-radius:var(--r-sm);
  padding:clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
  position:relative;
  overflow:hidden;
  box-shadow:var(--e3);
  /* faint instrument grid on the dark panel */
  background-image:
    repeating-linear-gradient(90deg, rgba(244,240,233,0.04) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(244,240,233,0.04) 0 1px, transparent 1px 64px);
}
.contact::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(85% 120% at 100% 0%, rgba(234,115,23,0.18) 0%, transparent 55%);
  pointer-events:none;
}
.contact__inner{ position:relative; max-width:46rem; }
.contact .kicker{ color:var(--amber-glow); margin-bottom:var(--s4); }
.contact .kicker .idx{ color:var(--amber-glow); }
.contact h2{ color:var(--white); font-size:var(--t-h2); max-width:18ch; margin-bottom:var(--s4); }
.contact__readout{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-lead);
  color:var(--text-on-dark);
  margin-bottom:var(--s2);
}
.contact__readout a{ color:var(--amber-glow); text-underline-offset:3px; }
.contact__readout a:hover{ color:#fff; text-decoration:underline; }
.contact p.note{ color:var(--text-on-dark-muted); font-size:var(--t-small); margin-bottom:var(--s6); max-width:44ch; }
.contact__cta{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }
.contact__cta .btn--ghost{ color:var(--text-on-dark); border-color:rgba(244,240,233,0.3); }
.contact__cta .btn--ghost:hover{ color:var(--white); border-color:rgba(244,240,233,0.6); background:rgba(255,255,255,0.04); }

/* =========================================================================
   FOOTER — structured spec footer
   ========================================================================= */
.site-footer{
  padding-block:var(--s6) var(--s6);
  border-top:1px solid var(--rule);
}
.footer-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--s5);
}
.footer-brand{ max-width:36ch; }
.footer-brand .brand{ margin-bottom:var(--s3); }
.footer-legal{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  color:var(--text-muted);
  font-size:var(--t-small);
  line-height:1.7;
}
.footer-legal strong{ color:var(--text); font-weight:600; }
.footer-legal a{ color:var(--primary); font-weight:500; text-underline-offset:3px; }
.footer-legal a:hover{ text-decoration:underline; color:var(--primary-hover); }
.footer-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--s2);
}
.footer-nav a{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  color:var(--text);
  font-size:var(--t-small);
  font-weight:500;
  letter-spacing:0.03em;
}
.footer-nav a:hover{ color:var(--primary); }
.footer-bottom{
  margin-top:var(--s6);
  padding-top:var(--s4);
  border-top:1px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:var(--s3);
  align-items:center;
}
.footer-bottom p,
.footer-bottom .legal{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-eyebrow);
  letter-spacing:0.06em;
  color:var(--text-muted);
}
.footer-bottom .legal{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.footer-bottom .legal a{ color:var(--text-muted); }
.footer-bottom .legal a:hover{ color:var(--primary); }

/* =========================================================================
   LEGAL PAGES (privacy / terms)
   ========================================================================= */
.legal-hero{
  padding-block:clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--s5);
  border-bottom:1px solid var(--rule);
  background:var(--bg-sunken);
}
.legal-hero h1{ font-size:var(--t-h2); max-width:22ch; margin-top:var(--s3); }
.legal-hero .updated{
  margin-top:var(--s3);
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-eyebrow);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.legal-body{ padding-block:var(--s7); }
.legal-body .prose{ margin-inline:auto; }
.legal-body h2{
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-small);
  font-weight:500;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-strong);
  margin-top:var(--s6);
  margin-bottom:var(--s3);
  padding-bottom:var(--s2);
  border-bottom:1px solid var(--rule);
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ margin-bottom:var(--s3); color:var(--text); }
.legal-body ul{ margin:0 0 var(--s3); padding-left:1.25rem; color:var(--text); }
.legal-body li{ margin-bottom:0.4rem; }
.legal-body a{ text-underline-offset:3px; text-decoration:underline; }
.legal-back{
  display:inline-flex; align-items:center; gap:0.5rem;
  margin-top:var(--s6);
  font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size:var(--t-small); font-weight:500;
}

/* =========================================================================
   REVEAL animation — gated behind html.js (content visible without JS)
   ========================================================================= */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .42s ease, transform .42s ease;
}
html.js [data-reveal].is-in{ opacity:1; transform:none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .datasheet{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .datasheet > div:nth-child(2){ border-right:0; }
  .datasheet > div:nth-child(1),
  .datasheet > div:nth-child(2){ border-bottom:1px solid var(--rule); }
  .about-grid{ grid-template-columns:1fr; gap:var(--s5); }
  .grid-3{ grid-template-columns:1fr; }
  .cell{ border-right:0; border-bottom:1px solid var(--rule); }
  .cell:last-child{ border-bottom:0; }
}

@media (max-width:720px){
  .hero__coord{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .primary-nav{
    position:fixed;
    inset:var(--header-h) 0 auto 0;
    visibility:hidden;
    opacity:0;
    transform:translateY(-8px);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    box-shadow:var(--e2);
    padding:var(--s3) var(--gutter) var(--s5);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .primary-nav.is-open{ visibility:visible; opacity:1; transform:none; }
  .primary-nav ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .primary-nav li{ border-bottom:1px solid var(--rule); }
  .primary-nav a:not(.btn){ display:block; padding:var(--s3) 0; font-size:1rem; }
  .primary-nav a:not(.btn)::after{ display:none; }
  .primary-nav .btn{ margin-top:var(--s4); justify-content:center; width:100%; }
  .section__meta{ display:none; }
  .footer-grid{ flex-direction:column; }
}

@media (max-width:460px){
  .datasheet{ grid-template-columns:1fr; }
  .datasheet > div{ border-right:0; border-bottom:1px solid var(--rule); }
  .datasheet > div:last-child{ border-bottom:0; }
  .spec-panel dl > div{ grid-template-columns:1fr; gap:0.3rem; }
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  html.js [data-reveal]{ opacity:1 !important; transform:none !important; }
}