/* ============================================================
   talp v2 — shared language
   dark instrument register. black reads as ink, not screen.
   one accent per viewport. mechanism carries the emotion.
   ============================================================ */

@font-face{ font-family:'Satoshi'; src:url('fonts/Satoshi-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('fonts/Satoshi-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('fonts/Satoshi-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('fonts/Satoshi-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face{ font-family:'Satoshi'; src:url('fonts/Satoshi-Black.woff2') format('woff2'); font-weight:900; font-display:swap; }

:root{
  /* surfaces */
  --bg:#000; --bg-2:#000; --card:#000; --void:#000;
  --line:rgba(255,255,255,0.10); --line-soft:rgba(255,255,255,0.06);
  /* text */
  --fg:#f3f3f1; --fg-mid:#a7a7a4; --fg-dim:#8c8c89;   /* dim was #6b6b69 (3.9:1); now about 6:1 on black (2026-11-05, review P1) */
  /* accent: used sparingly. one live element per viewport. */
  --blue:#2a2bf2; --blue-soft:rgba(42,43,242,0.35); --green:#18e000;
  /* light moment tokens (applied via .light) */
  --paper:#f4f3ef; --paper-2:#ebeae4; --ink:#131210; --ink-mid:#57544e; --ink-dim:#8c887f;
  --line-ink:rgba(20,18,14,0.14); --line-ink-soft:rgba(20,18,14,0.07);
  /* type */
  --sans:'Satoshi',"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Helvetica Neue",Helvetica,Arial,sans-serif; /* light Helvetica for labels and small print; no mono, no DM Sans */
  /* layout: 1360 max, 64 margin (24 mobile) */
  --pad:48px; --maxw:1360px; --r:22px; --r-sm:14px;
  --edge:var(--pad);   /* the line the wordmark sits on; titles and first columns align to it, at every width */
  --ease:cubic-bezier(0.22,1,0.36,1);

  /* ---------- the type scale (2026-10-07): one scale for the whole site, desktop to phone ----------
     Sizes step down from the body; weight and colour carry most of the contrast, size carries the rest.
     Each token pairs with a line-height and a tracking. Pages set roles with these, never with pixels. */
  --t-display:clamp(40px, 2.2vw + 44px, 76px);   /* the home slogan only: the largest thing on the site */
  --t-statement:clamp(23px, 1.2vw + 17px, 34px);  /* one sentence held in the middle of a screen */
  --t-h1:clamp(28px, 1.1vw + 27px, 43px);         /* the page title, on the edge line under the nav */
  --t-h2:clamp(23px, .7vw + 21px, 31px);          /* a section headline */
  --t-h3:clamp(17px, .2vw + 16px, 19px);          /* a sub-headline, a deck line, a card title */
  --t-lede:clamp(16px, .1vw + 15.5px, 17px);      /* the first paragraph under a title */
  --t-body:clamp(15.5px, .04vw + 15px, 16px);     /* running text: 15.5 at 1440, 15.5 on a phone */
  --t-small:clamp(12.5px, .04vw + 12px, 13px);    /* sources, meta, asides, boxes */
  --t-ui:13.5px;                                  /* nav links, buttons */
  --t-label:11px;                                 /* eyebrows, group labels, footer heads: upper, tracked, dim */
  --t-micro:10.5px;                               /* the tiniest print: errors, sups, tags */
  --t-num:clamp(44px, 1.5vw + 42px, 64px);        /* a figure (the say-do odometers), light weight */
  --lh-display:1.02; --lh-h1:1.05; --lh-h2:1.1; --lh-statement:1.22; --lh-h3:1.3; --lh-lede:1.5; --lh-body:1.55; --lh-small:1.5; --lh-label:1.4;
  --ls-display:-.035em; --ls-h1:-.03em; --ls-h2:-.025em; --ls-statement:-.02em; --ls-h3:-.015em; --ls-lede:-.005em; --ls-body:0; --ls-small:0; --ls-label:.08em;
  --measure:62ch;                                 /* the longest a line of running text runs */
}
@media (max-width:720px){ :root{ --pad:24px; --r:16px; } }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:var(--t-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }
.container{ max-width:calc(var(--maxw) + 2 * var(--edge)); margin:0; padding:0 var(--edge); }

/* ---------- registers ---------- */
.eyebrow{
  font-family:var(--mono); font-size:var(--t-label); letter-spacing:var(--ls-label); line-height:var(--lh-label);
  text-transform:uppercase; color:var(--fg-dim);
}
.snum{ font-family:var(--mono); font-size:var(--t-label); color:var(--fg-dim); letter-spacing:var(--ls-label); }
h1,h2,h3{ font-weight:500; letter-spacing:var(--ls-h2); line-height:var(--lh-h2); }
h1{ font-size:var(--t-h1); letter-spacing:var(--ls-h1); line-height:var(--lh-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:var(--ls-h3); line-height:var(--lh-h3); }
.statement{ font-size:var(--t-statement); letter-spacing:var(--ls-statement); line-height:var(--lh-statement); max-width:30ch; }
.sub{ color:var(--fg-mid); font-size:var(--t-lede); letter-spacing:var(--ls-lede); line-height:var(--lh-lede); max-width:52ch; }

/* ---------- light moment ---------- */
.light{ background:var(--paper); color:var(--ink); }
.light .eyebrow,.light .snum{ color:var(--ink-dim); }
.light .sub{ color:var(--ink-mid); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(5,5,6,0.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.logo svg{ height:22px; width:auto; }
.logo svg path{ fill:var(--fg); }
.nav-links{ display:flex; gap:36px; align-items:center; }
.nav-links a{
  font-size:var(--t-ui); color:var(--fg-mid); letter-spacing:-0.01em; position:relative;
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px;
  background:var(--fg); transition:width .3s var(--ease);
}
.nav-links a:hover{ color:var(--fg); }
.nav-links a:hover::after{ width:100%; }
.nav-links a[aria-current]{ color:var(--fg); }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--t-ui); font-weight:500; letter-spacing:-0.01em;
  border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  color:var(--fg); transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ border-color:var(--fg); }
.btn.solid{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.btn.solid:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
.btn .arr{ transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.light .btn{ border-color:var(--line-ink); color:var(--ink); }
.light .btn:hover{ border-color:var(--ink); }
.light .btn.solid{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* text link with arrow */
.tlink{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:var(--t-small); letter-spacing:0.06em; text-transform:lowercase;
  color:var(--fg-mid); transition:color .25s var(--ease);
}
.tlink:hover{ color:var(--fg); }
.tlink .arr{ transition:transform .3s var(--ease); }
.tlink:hover .arr{ transform:translateX(4px); }
.light .tlink{ color:var(--ink-mid); }
.light .tlink:hover{ color:var(--ink); }

/* ---------- panels: every section is a full page ---------- */
section{ position:relative; }
.stage{ display:flex; flex-direction:column; gap:14px; padding:14px; }
.panel{
  min-height:calc(100vh - 94px);
  border-radius:28px; border:0; background:transparent;
  padding:clamp(28px,4vw,56px);
  display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.panel.light{ background:var(--paper); border-color:transparent; }
.panel-head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; }
.panel-body{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.panel-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.panel.short{ min-height:0; }
@media (max-width:720px){ .stage{ padding:8px; gap:8px; } .panel{ border-radius:20px; min-height:calc(100vh - 82px); } }

/* ---------- cards (her rounded-rect grammar) ---------- */
.card{
  background:var(--card); border:0; border-radius:var(--r);
  padding:clamp(24px,3vw,40px);
}
.light .card{ background:#fff; border-color:var(--line-ink-soft); }

/* ---------- page title: one size and style on every page ---------- */
.page-title{ font-family:var(--sans); font-weight:500; font-size:var(--t-h1); letter-spacing:var(--ls-h1); line-height:var(--lh-h1); margin:0; color:var(--fg); }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding:clamp(56px,8vh,96px) 0 40px; }
.foot-top{ display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; padding-bottom:56px; }
.foot-brand svg{ height:clamp(40px,4.6vw,58px); width:auto; }
.foot-brand svg path{ fill:var(--fg); }
.foot-brand-wrap{ display:flex; flex-direction:column; gap:24px; }
.foot-address{ font-style:normal; font-family:var(--mono); font-weight:300; font-size:var(--t-small); line-height:1.8; color:var(--fg-dim); }
.foot-address a{ color:var(--fg-mid); transition:color .2s var(--ease); }
.foot-address a:hover{ color:var(--fg); }
.foot-col h4{ font-family:var(--mono); font-size:var(--t-label); color:var(--fg-dim); text-transform:lowercase; letter-spacing:0.06em; margin-bottom:18px; }
.foot-col a{ display:block; font-size:var(--t-ui); color:var(--fg-mid); padding:6px 0; transition:color .25s var(--ease); }
.foot-col a:hover{ color:var(--fg); }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--line-soft); padding-top:26px;
  font-family:var(--mono); font-size:var(--t-label); color:var(--fg-dim);
}
.foot-bottom a{ color:var(--fg-dim); } .foot-bottom a:hover{ color:var(--fg); }

/* ---------- reveal on scroll ---------- */
.rv{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* ---------- mobile ---------- */
@media (max-width:860px){
  .nav-links{ display:none; }
  .foot-top{ flex-direction:column; }
}


/* ---------- the void: nothing on the ground, everything floats ----------
   A tab is a translucent pane in black space. Depth comes from light, never from a line:
   a faint fill, a hair of light along the top edge, and a wide soft shadow that darkens the void beneath it. */
.tab{ position:relative; border:0; border-radius:14px; box-sizing:border-box;
  background:rgba(255,255,250,.055);
  backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,250,.11), inset 0 -1px 0 rgba(255,255,250,.025), 0 40px 80px -36px rgba(0,0,0,.95), 0 2px 10px rgba(0,0,0,.5); }
.tab.near{ background:rgba(255,255,250,.10); box-shadow:inset 0 1px 0 rgba(255,255,250,.14), 0 54px 100px -40px rgba(0,0,0,1), 0 3px 14px rgba(0,0,0,.6); }
.tab.far{ background:rgba(255,255,250,.055); box-shadow:inset 0 1px 0 rgba(255,255,250,.07), 0 24px 56px -30px rgba(0,0,0,.9); }
.tab.plane{ background:rgba(255,255,250,.075); box-shadow:inset 0 1px 0 rgba(255,255,250,.16), inset 0 0 0 0 transparent, 0 30px 70px -40px rgba(0,0,0,.9); }