/* =========================================================================
   ArchiMass — base.css
   Design tokens, reset, typography primitives, buttons, grid overlays.
   ========================================================================= */

:root{
  /* --- Surface: architectural darkness (aligned with the product UI) --- */
  --void:        #070D16;
  --carbon:      #0A1524;
  --graphite:    #142235;
  --slate:       #1C2B3E;

  /* --- Ink -------------------------------------------------------------- */
  --paper:       #EDF4F9;
  --paper-dim:   #A9B8C6;
  --paper-mute:  #7F93A5;

  /* --- Line work (CAD) -------------------------------------------------- */
  --line-1:      rgba(237,244,249,.08);
  --line-2:      rgba(237,244,249,.15);
  --line-3:      rgba(237,244,249,.26);

  /* --- Two controlled accents ------------------------------------------
     instrument : geometry, CAD, measurement, the model
     agent      : AI actions, intent, generated results
     Both match the workspace UI exactly, so product and site read as one. */
  --instrument:  #55D4E8;
  --instrument-d:#2C8497;
  --agent:       #E7A95C;
  --agent-d:     #B47B34;
  --ok:          #1BAF7A;

  /* --- Composite surfaces (themed) -------------------------------------- */
  --sheet-a:     rgba(28,43,62,.72);
  --sheet-b:     rgba(10,21,36,.55);
  --scrim:       rgba(7,13,22,.74);
  --card:        #0A1524;
  --viz-a:       #0C1828;
  --viz-b:       #070D16;
  --solid:       rgba(20,34,53,.9);
  --hero-wash:   rgba(85,212,232,.07);
  --film-wash:   rgba(85,212,232,.12);

  /* --- Type ------------------------------------------------------------- */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--1: clamp(.7rem, .67rem + .16vw, .76rem);
  --step-0:  clamp(.9rem, .87rem + .16vw, .97rem);
  --step-1:  clamp(1.02rem, .96rem + .3vw, 1.18rem);
  --step-2:  clamp(1.32rem, 1.1rem + .9vw, 1.85rem);
  --step-3:  clamp(1.7rem, 1.3rem + 1.9vw, 2.75rem);
  --step-4:  clamp(2.2rem, 1.5rem + 3.3vw, 4.4rem);

  /* --- Rhythm ----------------------------------------------------------- */
  --gutter: clamp(18px, 4vw, 64px);
  --maxw: 1440px;
  --section-pad: clamp(80px, 10vh, 150px);
  --header-h: 64px;
  --page-hero-pad-top: clamp(36px,5vw,72px);
  --page-hero-pad-bottom: clamp(64px,8vw,110px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.02,.2,1);

  color-scheme: dark;
}

/* =========================================================================
   LIGHT THEME
   The same four surfaces and two accents re-stepped for the product's warm
   paper ground (#EDECE6 / #FFFDFA / ink #1B2925 / green #4B8069) so the site
   and the workspace are visibly one product.
   Default is dark; the system preference applies unless the visitor has
   chosen, and the header toggle always wins. (js/theme.js)
   ========================================================================= */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ color-scheme: light; }
}
:root[data-theme="light"]{ color-scheme: light; }

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --void:        #EDECE6;
    --carbon:      #F4F3EE;
    --graphite:    #FFFDFA;
    --slate:       #E9E7DF;

    --paper:       #1B2925;
    --paper-dim:   #4C5A55;
    --paper-mute:  #66716C;

    --line-1:      rgba(27,41,37,.10);
    --line-2:      rgba(27,41,37,.18);
    --line-3:      rgba(27,41,37,.30);

    --instrument:  #2E6D57;
    --instrument-d:#4B8069;
    --agent:       #A2611B;
    --agent-d:     #C98A3E;
    --ok:          #17795A;

    --sheet-a:     rgba(255,253,250,.86);
    --sheet-b:     rgba(244,243,238,.74);
    --scrim:       rgba(237,236,230,.8);
    --card:        #FFFDFA;
    --viz-a:       #FFFDFA;
    --viz-b:       #ECE9E1;
    --solid:       rgba(255,253,250,.92);
    --hero-wash:   rgba(75,128,105,.08);
    --film-wash:   rgba(75,128,105,.10);
  }
}
:root[data-theme="light"]{
  --void:#EDECE6; --carbon:#F4F3EE; --graphite:#FFFDFA; --slate:#E9E7DF;
  --paper:#1B2925; --paper-dim:#4C5A55; --paper-mute:#66716C;
  --line-1:rgba(27,41,37,.10); --line-2:rgba(27,41,37,.18); --line-3:rgba(27,41,37,.30);
  --instrument:#2E6D57; --instrument-d:#4B8069; --agent:#A2611B; --agent-d:#C98A3E; --ok:#17795A;
  --sheet-a:rgba(255,253,250,.86); --sheet-b:rgba(244,243,238,.74); --scrim:rgba(237,236,230,.8);
  --card:#FFFDFA; --viz-a:#FFFDFA; --viz-b:#ECE9E1; --solid:rgba(255,253,250,.92);
  --hero-wash:rgba(75,128,105,.08); --film-wash:rgba(75,128,105,.10);
}
:root[data-theme="dark"]{
  --void:#070D16; --carbon:#0A1524; --graphite:#142235; --slate:#1C2B3E;
  --paper:#EDF4F9; --paper-dim:#A9B8C6; --paper-mute:#7F93A5;
  --line-1:rgba(237,244,249,.08); --line-2:rgba(237,244,249,.15); --line-3:rgba(237,244,249,.26);
  --instrument:#55D4E8; --instrument-d:#2C8497; --agent:#E7A95C; --agent-d:#B47B34; --ok:#1BAF7A;
  --sheet-a:rgba(28,43,62,.72); --sheet-b:rgba(10,21,36,.55); --scrim:rgba(7,13,22,.74);
  --card:#0A1524; --viz-a:#0C1828; --viz-b:#070D16; --solid:rgba(20,34,53,.9);
  --hero-wash:rgba(85,212,232,.07); --film-wash:rgba(85,212,232,.12);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* NOTE: never put overflow-x (clip or hidden) on <html> — it silently breaks
     position:sticky for every descendant, which kills the pinned story stage.
     Horizontal overflow is contained at its source instead (see .films). */
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:var(--f-display);
  font-size:var(--step-0);
  line-height:1.6;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video,canvas,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }

h1,h2,h3,h4{
  margin:0;
  font-weight:600;
  line-height:.98;
  letter-spacing:-.03em;
  text-wrap:balance;
}
h1{ font-size:var(--step-4); font-weight:700; }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); }
p{ margin:0 0 1em; }

/* Shared public-page display typography. Mirrors the landing hero exactly:
   strong opening lines, then a quiet 300-weight closing line. */
.display-title{
  font-size:clamp(2.3rem, 1.25rem + 4.4vw, 5.2rem);
  line-height:1.032;
  letter-spacing:-.045em;
  font-weight:700;
  text-wrap:balance;
}
.display-title__line{ display:block; }
.display-title__line--thin{ font-weight:300; color:var(--paper-dim); }
.display-title__line:not(:first-child){ font-weight:300; color:var(--paper-dim); }
.display-title--auto{ font-weight:300; color:var(--paper-dim); }
.display-title--auto::first-line{ font-weight:700; color:var(--paper); }

/* Shared public-page hero contract. These values intentionally mirror the
   landing hero so every page begins with the same brand, type and rhythm. */
.page-hero__copy{
  display:grid;
  gap:clamp(22px,3vw,40px);
  min-width:0;
}
.page-hero__brandline{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.page-hero__brand{
  font-family:var(--f-mono);
  font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--paper);
}
.page-hero__sub{
  margin:0;
  max-width:46ch;
  color:var(--paper-dim);
  font-size:clamp(.98rem,.92rem+.3vw,1.12rem);
  line-height:1.45;
  letter-spacing:-.01em;
}
.page-hero__sub b{ color:var(--paper); font-weight:500; }
.page-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}
.page-hero__copy > .display-title,
.page-hero__copy > h1{ margin:0; max-width:16ch; }
@media (max-width:720px){
  .display-title{ font-size:clamp(2.1rem,8.6vw,3rem); }
}

::selection{ background:var(--instrument); color:var(--void); }

/* --- Focus: precise, engineered ---------------------------------------- */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--instrument);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--instrument); color:var(--void);
  padding:12px 18px; font-family:var(--f-mono); font-size:var(--step--1);
}
.skip-link:focus{ left:12px; top:12px; }

.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;
}

/* --- Layout primitives --------------------------------------------------- */
.shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ position:relative; padding-block:var(--section-pad); }
.section--tight{ padding-block:clamp(56px,8vh,110px); }

/* --- Technical annotation labels ---------------------------------------- */
.anno{
  font-family:var(--f-mono);
  font-size:var(--step--1);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper-mute);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.anno::before{
  content:"";
  width:22px; height:1px; background:var(--line-3);
}
.anno--instrument{ color:var(--instrument); }
.anno--instrument::before{ background:var(--instrument-d); }
.anno--agent{ color:var(--agent); }
.anno--agent::before{ background:var(--agent-d); }
.anno--plain::before{ display:none; }

.chapter-no{
  font-family:var(--f-mono);
  font-size:clamp(2.2rem,5.4vw,4.4rem);
  line-height:.8;
  font-weight:400;
  color:transparent;
  -webkit-text-stroke:1px var(--line-2);
  letter-spacing:-.04em;
  user-select:none;
}

.lede{
  font-size:clamp(.96rem,.9rem+.26vw,1.08rem);
  color:var(--paper-dim);
  max-width:56ch;
  line-height:1.5;
  letter-spacing:-.01em;
}
.micro{
  font-family:var(--f-mono);
  font-size:var(--step--1);
  color:var(--paper-mute);
  letter-spacing:.04em;
  line-height:1.6;
}

/* --- Status pill: honest labelling of roadmap features ------------------- */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; padding:5px 9px;
  border:1px solid var(--line-2); color:var(--paper-mute);
  background:color-mix(in srgb, var(--paper) 4%, transparent);
}
.pill::before{
  content:""; width:5px; height:5px; background:currentColor;
  transform:rotate(45deg);
}
.pill--live{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 42%, transparent); }
.pill--beta{ color:var(--instrument); border-color:color-mix(in srgb, var(--instrument) 42%, transparent); }
.pill--dev{ color:var(--agent); border-color:color-mix(in srgb, var(--agent) 40%, transparent); }

/* --- Buttons: precise, engineered, never rounded-cute -------------------- */
.btn{
  position:relative;
  isolation:isolate;
  appearance:none; -webkit-appearance:none; border-radius:0;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:0 26px; height:50px;
  font-family:var(--f-mono); font-size:var(--step--1);
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line-2);
  color:var(--paper);
  background:transparent;
  transition:color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
  overflow:hidden;
  white-space:nowrap;
}
.btn::after{
  content:""; position:absolute; inset:0; background:var(--paper);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .4s var(--ease-io);
  z-index:-1;
}
.btn span{ position:relative; z-index:1; }
.btn:hover{ border-color:var(--paper); color:var(--void); }
.btn:hover::after{ transform:scaleY(1); }

.btn--primary{
  background:var(--paper); color:var(--void); border-color:var(--paper);
}
.btn--primary::after{ background:var(--instrument); }
.btn--primary:hover{ color:var(--void); border-color:var(--instrument); }

.btn--ghost{ border-color:var(--line-2); color:var(--paper-dim); }
.btn--sm{ height:40px; padding:0 18px; }

.btn-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:var(--step--1);
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper);
  padding-bottom:6px; border-bottom:1px solid var(--line-2);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.btn-link:hover{ border-color:var(--instrument); color:var(--instrument); }
.btn-link .arrow{ transition:transform .3s var(--ease); }
.btn-link:hover .arrow{ transform:translateX(5px); }

/* --- Architectural grid overlays ----------------------------------------- */
.grid-rule{
  position:absolute; inset:0; pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(to right, var(--line-1) 1px, transparent 1px);
  background-size:calc(100% / 12) 100%;
  mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  opacity:.9;
}
.grid-dot{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size:34px 34px;
  opacity:.35;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 75%);
}

.hairline{ height:1px; background:var(--line-1); border:0; margin:0; }

/* --- Glass sheet: a pane of the Z-stack ---------------------------------- */
.sheet{
  position:relative;
  background:linear-gradient(160deg, var(--sheet-a), var(--sheet-b));
  border:1px solid var(--line-2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.sheet::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(127,147,165,.07), transparent 45%);
}
/* corner ticks — drafting marks */
.ticked::after{
  content:""; position:absolute; inset:7px; pointer-events:none;
  background:
    linear-gradient(var(--line-3),var(--line-3)) 0 0/9px 1px no-repeat,
    linear-gradient(var(--line-3),var(--line-3)) 0 0/1px 9px no-repeat,
    linear-gradient(var(--line-3),var(--line-3)) 100% 0/9px 1px no-repeat,
    linear-gradient(var(--line-3),var(--line-3)) 100% 0/1px 9px no-repeat,
    linear-gradient(var(--line-3),var(--line-3)) 0 100%/9px 1px no-repeat,
    linear-gradient(var(--line-3),var(--line-3)) 0 100%/1px 9px no-repeat,
    linear-gradient(var(--line-3),var(--line-3)) 100% 100%/9px 1px no-repeat,
    linear-gradient(var(--line-3),var(--line-3)) 100% 100%/1px 9px no-repeat;
}

/* --- Selective glow ------------------------------------------------------ */
.glow-instrument{ box-shadow:0 0 0 1px color-mix(in srgb, var(--instrument) 25%, transparent), 0 0 60px -18px color-mix(in srgb, var(--instrument) 55%, transparent); }
.glow-agent{ box-shadow:0 0 0 1px color-mix(in srgb, var(--agent) 25%, transparent), 0 0 60px -18px color-mix(in srgb, var(--agent) 50%, transparent); }

/* --- Utility ------------------------------------------------------------- */
.u-mono{ font-family:var(--f-mono); }
.u-dim{ color:var(--paper-dim); }
.u-mute{ color:var(--paper-mute); }
.u-instrument{ color:var(--instrument); }
.u-agent{ color:var(--agent); }
.u-caps{ text-transform:uppercase; letter-spacing:.16em; }
.u-center{ text-align:center; }
.u-nowrap{ white-space:nowrap; }
.stack-sm > * + *{ margin-top:14px; }
.stack-md > * + *{ margin-top:26px; }
.stack-lg > * + *{ margin-top:44px; }