/* =====================================================================
   CHNAI LAB — Design System (base.css)
   "Specimen" aesthetic: ink-on-warm-paper, one saffron accent, mono labels.
   Original, premium, English-only. Not a generic AI-startup template.
   ===================================================================== */

/* ---------- Tokens ---------- */
/* Brand: deep charcoal-teal ink + a single teal accent on cool paper. */
:root{
  --paper:#F2F3F1;        /* cool light */
  --paper-2:#E7EAE7;      /* panel */
  --ink:#16262A;          /* charcoal-teal (logo ink) */
  --ink-soft:#36484C;
  --muted:#5A6967;        /* cool gray — darkened from #647472 to clear WCAG AA (4.5:1) at small label sizes */
  --hair:rgba(22,38,42,.13);
  --hair-2:rgba(22,38,42,.06);
  --saffron:#2C6E66;      /* TEAL accent (var name kept for compatibility) */
  --saffron-ink:#21564F;
  --good:#2F7D5B;         /* live / good */
  --wait:#9A7B16;         /* research / wait */
  --card:#FAFBF9;
  --shadow:0 1px 0 rgba(22,38,42,.04), 0 18px 40px -28px rgba(22,38,42,.45);

  --serif:"Space Grotesk",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  /* The dark accent was a pastel mint on a ground that was not dark enough to
     carry it, which is why the theme read soft rather than considered. The hue
     is the brand's and stays: what changes is that the ground drops toward
     black, the panels separate from it, and the accent gains chroma and loses
     lightness so it reads as a deliberate colour instead of a wash. */
  --paper:#0B1213;
  --paper-2:#121C1D;
  --ink:#EDF2F0;
  --ink-soft:#BFC9C6;
  --muted:#7E8B88;
  --hair:rgba(232,237,235,.14);
  --hair-2:rgba(232,237,235,.06);
  --saffron:#17B08E;
  --saffron-ink:#3FCBA8;
  --good:#4FBF95;
  --wait:#D6B45A;
  --card:#0F1A1B;
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 26px 60px -34px rgba(0,0,0,.92);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .4s var(--ease),color .4s var(--ease);
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--saffron);color:#fff}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.04;letter-spacing:-.02em;color:var(--ink)}
.display{font-size:clamp(2.6rem,7vw,5.4rem);font-weight:600;letter-spacing:-.035em;line-height:.98}
.h2{font-size:clamp(1.8rem,3.6vw,3rem)}
.h3{font-size:clamp(1.3rem,2.2vw,1.8rem)}
.lede{font-size:clamp(1.05rem,1.6vw,1.4rem);color:var(--ink-soft);line-height:1.5;max-width:46ch}
p{color:var(--ink-soft)}
strong{color:var(--ink);font-weight:600}

/* the signature: mono kicker / metadata labels */
.kicker,.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.kicker .dot{color:var(--saffron)}
.accent{color:var(--saffron)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(64px,10vw,140px)}
.rule{height:1px;background:var(--hair);border:0;width:100%}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:48px}
.sec-head .top{display:flex;align-items:center;gap:14px}
.sec-head .top .line{flex:1;height:1px;background:var(--hair)}
.eyebrow{display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--saffron);display:inline-block}

/* specimen strip — mono metadata row with hairline frame */
.spec{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  padding:10px 14px;border:1px solid var(--hair);border-radius:8px;background:var(--paper-2)}
.spec b{color:var(--ink);font-weight:600}
.spec .sq{width:6px;height:6px;background:var(--saffron);display:inline-block;margin-right:2px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;padding:13px 20px;border-radius:10px;border:1px solid var(--ink);
  transition:transform .25s var(--ease),background .25s,color .25s;will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--saffron);border-color:var(--saffron);color:#fff}
.btn--ghost{border-color:var(--hair);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- Tags / status ---------- */
.tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--hair);border-radius:99px;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.tag::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--muted)}
.tag.is-live::before{background:var(--good)} .tag.is-live{color:var(--good);border-color:color-mix(in oklab,var(--good),transparent 60%)}
.tag.is-research::before{background:var(--wait)} .tag.is-research{color:var(--wait);border-color:color-mix(in oklab,var(--wait),transparent 60%)}
.tag.is-shared::before{background:var(--saffron)} .tag.is-shared{color:var(--saffron);border-color:color-mix(in oklab,var(--saffron),transparent 55%)}

/* ---------- Cards / grid ---------- */
.grid{display:grid;gap:22px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
/* graduated, not binary: desktop columns -> 2-up on tablet/large-phone -> 1-up on phone */
@media(max-width:880px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:26px;position:relative;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.card:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--ink),transparent 70%);box-shadow:var(--shadow)}
.card .num{font-family:var(--mono);font-size:.72rem;color:var(--saffron);letter-spacing:.1em}

/* ---------- Reveal motion ---------- */
/* Scroll-reveal — alive on scroll, but NEVER left hidden (JS drives it; no-JS shows all). */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none}}

/* avatar photos fill their frame everywhere */
.av img,.ua img,.big-av img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ---------- Brand mark ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;letter-spacing:-.02em;font-size:1.05rem;color:var(--ink)}
.brand .mk{height:27px;width:auto;flex:none;display:block}
.brand .wordmark{height:15px;width:auto;display:block}
footer .brand .mk{height:30px}
footer .brand .wordmark{height:19px}
.ptop .brand .wordmark{height:14px}
[data-theme="dark"] .brand .mk,[data-theme="dark"] .brand .wordmark{filter:brightness(0) invert(.94)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--hair);padding-block:64px 40px;background:var(--paper-2)}
footer .grid{align-items:start}
footer a.link{color:var(--muted);font-size:.92rem;display:block;padding:5px 0;transition:color .2s}
footer a.link:hover{color:var(--saffron)}
.foot-tag{font-family:var(--serif);font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:-.03em;color:var(--ink)}

/* ---------- Utilities ---------- */
.stack-sm{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}
.center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}
.maxw-50{max-width:52ch}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.hl{background:linear-gradient(transparent 62%,color-mix(in oklab,var(--saffron),transparent 70%) 0);padding:0 .05em}