/* TenesimBio: tokens and type for the home, For labs and About pages. The header and
   footer every page shares, the blog included, live in frame.css. */
:root{
  --navy:#1B1B3A;        /* brand navy: ink on light, ground on dark */
  --navy-up:#262650;     /* a raised surface on navy */
  --lilac:#A99BE6;       /* mark, top squares */
  --mist:#C5BAEE;        /* mark, middle squares */
  --violet:#7B6FE6;      /* brand accent, the "Bio" */
  --violet-ink:#5546D6;  /* the accent darkened for text on white (AA) */
  --paper:#FAF9FD;      /* the page ground, shared with the blog */
  --radius:16px;         /* panels and cards */
  --radius-s:10px;       /* small squares: step numbers, the highlighted row */
  --haze:#F1EFFA;        /* quiet alternate ground */
  --muted:#5D5D72;
  --hair:#E2E0EE;
  --on-navy:#D9D5F2;     /* body text on navy */

  --display:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Newsreader","Iowan Old Style",Georgia,serif;

  --gutter:clamp(20px,4vw,48px);   /* same as the blog and the shared frame */
  --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{text-wrap:pretty;background:var(--paper);color:var(--navy);font-family:var(--display);font-size:17px;line-height:1.5;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--paper);color:var(--navy);padding:10px 14px;border-radius:8px}
.skip:focus{left:12px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* Running text is set in Newsreader: longer reading, a little more leading. */
.prose{font-family:var(--text);font-size:clamp(18px,1.35vw,20px);line-height:1.62;max-width:36em}
.prose p+p{margin-top:.9em}

/* Headings fill each line before breaking; pretty only avoids a lone last word. */
h1,h2,h3{font-weight:600;letter-spacing:-.022em;line-height:1.04;text-wrap:pretty}
p,li,q{text-wrap:pretty}
h2{font-size:clamp(32px,4.4vw,56px)}
h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.012em;line-height:1.2}
/* A heading set in deliberate lines: each .ln is one line, never split. */
.ln{display:block}
br.m{display:none}
/* short copy in columns and lists: when it needs two lines, make them even */
.steps p,.phases p,.terms p,.bring q,.starts q,.asks span,.loop2 strong,.read-list strong{text-wrap:balance}
/* on a phone a one-sentence subtitle may need two lines: make them even */
@media (max-width:640px){
  br.m{display:inline}
  .page-intro .prose p:only-child,.block-head .prose p:only-child,.panel p,.closing p{text-wrap:balance}
}

/* Buttons: one filled, one quiet. Pill shape echoes the rounded squares of the mark. */
.btn{display:inline-flex;align-items:center;gap:.5em;font:600 16px/1 var(--display);text-decoration:none;
     padding:15px 22px;border-radius:999px;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s}
.btn-solid{background:var(--violet);color:#fff}
.btn-solid:hover{background:#6A5DE0}
.btn-line{border-color:currentColor}
.btn-line:hover{background:rgba(123,111,230,.12)}
/* on a phone, buttons that stack share one width */
@media (max-width:480px){.actions .btn{flex:1 1 100%;justify-content:center}}
.on-navy .btn-solid{background:var(--mist);color:var(--navy)}
.on-navy .btn-solid:hover{background:#fff}

/* Closing contact block, on navy */
.on-navy{background:var(--navy);color:#fff}
.closing{padding:clamp(88px,12vw,160px) 0 clamp(88px,10vw,140px)}
.closing-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end}
.closing h2{font-size:clamp(40px,6.2vw,84px)}
.closing p{color:var(--on-navy);font-family:var(--text);font-size:clamp(19px,1.5vw,22px);margin-top:22px;max-width:30em}
.closing .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.closing .mark{width:clamp(120px,16vw,210px);height:auto}
@media (max-width:720px){.closing-grid{grid-template-columns:1fr}.closing .mark{grid-row:1;width:96px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Page intro: the title block of For labs, About and the article list, set the same way
   on each so the title does not move between pages. */
.page-intro{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--hair)}
.page-intro h1{font-size:clamp(40px,5.2vw,68px);letter-spacing:-.03em;line-height:1.04}
.page-intro .prose{margin-top:20px;color:#33334f}
.page-intro .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.page-intro .btn-line{color:var(--navy)}