/* Heylper — shared design for every inner page.
   The homepage (index.html) is a single-viewport video stage and keeps its
   own styles; everything reachable from it uses this file. Tokens, nav and
   footer are identical to the homepage so the two read as one site. */

:root{
  --ink:#fff;
  --body:rgba(255,255,255,.80);
  --muted:rgba(255,255,255,.55);
  --rule:rgba(255,255,255,.14);
  --rule-strong:rgba(255,255,255,.28);
  --accent:#4ade80;
  --col:680px;
  --gutter:clamp(18px,3.2vw,34px);
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:#000;
  color:var(--ink);
  font-family:-apple-system,system-ui,"Segoe UI",Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---- chrome, identical to the homepage ---- */
.top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:var(--gutter);
  padding-bottom:0;
}
.brand{display:block;color:#fff;text-decoration:none}
.brand img{
  /* The lockup's sign rises above the word, so the header aligns on the
     wordmark's BASELINE, not the image box. An inline image's baseline is its
     bottom margin edge; the word's baseline is 15.2% above the image bottom
     (printed by scripts/build_lockup.py), so this margin moves one onto the other. */
  display:inline-block;height:36px;width:auto;margin-bottom:calc(36px * -0.152);
}
.nav{display:flex;align-items:baseline;gap:clamp(18px,2.4vw,30px)}
.nav a{
  color:rgba(255,255,255,.88);text-decoration:none;
  font-size:clamp(13px,1.35vw,15px);letter-spacing:.01em;
  transition:color .2s ease;
}
.nav a:hover{color:#fff}
.nav a[aria-current]{color:#fff;border-bottom:1px solid var(--rule-strong);padding-bottom:3px}

/* ---- image strip ---- */
.strip{margin:clamp(28px,4vw,48px) 0 0;padding:0 var(--gutter)}
.strip p{
  font-size:clamp(12px,1.25vw,13.5px);
  color:var(--muted);letter-spacing:.02em;margin-bottom:12px;
}
.strip__row{
  display:flex;gap:10px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.strip__row::-webkit-scrollbar{display:none}
.strip__row img{
  flex:0 0 auto;height:clamp(120px,16vw,190px);aspect-ratio:16/9;
  object-fit:cover;border-radius:4px;scroll-snap-align:start;
  filter:saturate(.92);background:#111;
}

/* ---- article column ---- */
.article{
  max-width:var(--col);
  width:100%;
  margin:0 auto;
  padding:clamp(48px,7vw,96px) var(--gutter) clamp(64px,8vw,120px);
  flex:1;
}
.article--wide{max-width:900px}

.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(11px,1.15vw,12.5px);
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
  margin-bottom:clamp(16px,2vw,24px);
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

h1{
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.08;letter-spacing:-.03em;font-weight:600;
  margin-bottom:clamp(22px,3vw,34px);
}
h1 .soft{color:rgba(255,255,255,.55)}

p{font-size:clamp(16px,1.6vw,18px);color:var(--body);margin-bottom:1.25em}
p.lead{font-size:clamp(17px,1.8vw,20px);color:rgba(255,255,255,.88)}
p.meta{font-size:clamp(13px,1.3vw,14.5px);color:var(--muted)}
em{font-style:italic;color:#fff}
strong,b{color:#fff;font-weight:600}
a.inline{
  color:#fff;text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
  transition:border-color .2s ease;
}
a.inline:hover{border-color:#fff}

h2{
  font-size:clamp(1.15rem,2vw,1.35rem);
  font-weight:600;letter-spacing:-.01em;
  margin:clamp(40px,5vw,64px) 0 clamp(14px,1.8vw,20px);
  padding-top:clamp(28px,3.5vw,44px);
  border-top:1px solid var(--rule);
  display:flex;gap:14px;align-items:baseline;
}
h2 .n{
  font-variant-numeric:tabular-nums;color:var(--muted);
  font-weight:500;font-size:.85em;flex:none;
}
h3{
  font-size:clamp(1rem,1.6vw,1.1rem);font-weight:600;
  margin:clamp(32px,4vw,48px) 0 12px;
}
h2 + h3{margin-top:8px}

ul.plain{margin:0 0 1.25em 1.1em;color:var(--body);font-size:clamp(16px,1.6vw,18px)}
ul.plain li{margin-bottom:.5em}

/* two-column definition rows (featured agents, level descriptions) */
.rows{list-style:none;margin:8px 0 1.5em;border-top:1px solid var(--rule)}
.rows li{
  display:grid;grid-template-columns:minmax(110px,150px) 1fr;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--rule);
  font-size:clamp(15px,1.5vw,17px);color:var(--body);
}
.rows b{color:#fff;font-weight:600}

/* link lists (research, open roles) */
.links{list-style:none;margin:6px 0 1.5em}
.links li{
  padding:14px 0;border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
}
.links li:first-child{border-top:1px solid var(--rule)}
.links a{color:#fff;text-decoration:none;font-size:clamp(15px,1.5vw,17px)}
.links a:hover{text-decoration:underline;text-underline-offset:4px}
.links span{font-size:13px;color:var(--muted);white-space:nowrap}

/* arrow link, same as the homepage CTA */
.cta{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:6px;padding-bottom:9px;
  color:#fff;text-decoration:none;
  font-size:clamp(15px,1.5vw,17px);
  border-bottom:1px solid var(--rule-strong);
  transition:border-color .25s ease,gap .25s ease;
  background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;
  font-family:inherit;
}
.cta:hover{border-color:#fff;gap:15px}
.cta svg{transition:transform .25s ease}
.cta:hover svg{transform:translateX(3px)}



.sign{margin-top:clamp(32px,4vw,48px);color:var(--muted)}

.back{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(40px,5vw,64px);
  color:rgba(255,255,255,.7);text-decoration:none;font-size:15px;
  transition:color .2s ease,gap .2s ease;
}
.back:hover{color:#fff;gap:14px}

footer{
  max-width:var(--col);width:100%;margin:0 auto;
  padding:0 var(--gutter) clamp(28px,4vw,44px);
  font-size:13px;color:var(--muted);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.article--wide + footer{max-width:900px}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:#fff}

@media (max-width:600px){
  .rows li{grid-template-columns:1fr;gap:4px}
}

/* ---- long-form paper (research.html) ---- */
.paper h2{display:block}
.paper h2 .n{display:none}
.paper blockquote{
  margin:1.4em 0;padding:4px 0 4px 20px;
  border-left:2px solid var(--rule-strong);
  color:#fff;font-size:clamp(16px,1.6vw,18px);
}
.paper blockquote p{margin-bottom:.6em;color:inherit}
.paper ol,.paper ul{margin:0 0 1.25em 1.2em;color:var(--body);font-size:clamp(16px,1.6vw,18px)}
.paper li{margin-bottom:.5em}
.paper li p{margin-bottom:.4em}
.paper figure{margin:clamp(24px,3vw,36px) 0}
.paper figure img{width:100%;height:auto;border-radius:6px;background:#fff;display:block}
.paper figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.paper code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;color:#fff;background:rgba(255,255,255,.08);padding:1px 5px;border-radius:3px}
.paper pre{background:rgba(255,255,255,.06);padding:16px;border-radius:6px;overflow-x:auto;margin:0 0 1.25em}
.paper pre code{background:none;padding:0;font-size:14px;color:var(--body)}
.paper table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:clamp(14px,1.4vw,16px)}
.paper th,.paper td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--body)}
.paper th{color:#fff;font-weight:600}
.paper hr{border:0;border-top:1px solid var(--rule);margin:clamp(32px,4vw,48px) 0}
.paper .refs{font-size:clamp(14px,1.4vw,15.5px)}
.paper .refs li{margin-bottom:.7em;color:var(--muted)}
.paper .refs a{color:var(--body);text-decoration:none;border-bottom:1px solid var(--rule)}
.paper sup{font-size:.7em}
.byline{font-size:clamp(14px,1.4vw,15.5px);color:var(--muted);margin:-8px 0 clamp(28px,3.5vw,44px)}
.byline b{color:var(--body);font-weight:500}


/* ---- research index: a list of posts, as on a blog ---- */
.posts{list-style:none;margin:clamp(28px,4vw,44px) 0 0;border-top:1px solid var(--rule)}
.posts li{border-bottom:1px solid var(--rule)}
.posts a.post{display:block;padding:clamp(24px,3.2vw,38px) 0;color:inherit;text-decoration:none}
.posts .date{font-size:13px;color:var(--muted);letter-spacing:.02em;margin-bottom:10px}
.posts h2{
  display:block;border:0;padding:0;margin:0 0 10px;
  font-size:clamp(1.2rem,2.3vw,1.55rem);line-height:1.25;letter-spacing:-.015em;
}
.posts p{margin:0 0 16px;font-size:clamp(15px,1.5vw,17px);color:var(--body)}
.posts .more{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#fff;transition:gap .2s ease}
.posts a.post:hover .more{gap:13px}
.posts a.post:hover h2{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}