/* Synthena, the fourth site, the WHITE build (build_v4.py --paper -> site-v4/paper/). Loaded after site.css and tune.css.
   Full white. Sans throughout, the serif only on the science statement. No ornament: no hairlines beside paragraphs, no
   page numbers, no textures. Pictures with 16px corners as Altos. Panels with a picture keep it behind the words; panels
   without one put the words left and a quiet plate right. From his words of 2026-09-24. */
:root{--t-paper:#ffffff;--t-grey:#f2f2f0;--t-line:#e6e6e3;--t-mute:#6b6b6b;--t-ink:#111111;--amber:#b8862b;--t-corner:16;--t-hdr-pill:1;--t-btn-radius:999;
  --t-h-weight:400;--t-h-line:1.08;--t-h-track:-0.012;--t-h-size:56;--t-h-max:64}
body{background:#fff}
h1,h2,h3,.words h1,.words h2,.cards h2.c,.list h1{font-family:var(--t-sans-pick);font-weight:400;letter-spacing:-.012em}
.words p{padding:0;border:0;font-size:clamp(15px,1.2vw,18px);line-height:1.55;max-width:52ch}
.label{font-weight:700;letter-spacing:.08em}

/* header: white when solid; the current page in a black pill as Altos. Inner pages frame their first panel under a white header, so the header is always solid there */
body:not([data-page="index"]) .hdr{background:#fff;color:var(--t-ink)}
body:not([data-page="index"]) .hdr .menu a[aria-current]{background:#111;color:#fff}
body:not([data-page="index"]) .deck>.panel.has-pic:first-child{margin-top:var(--hdr);height:calc(100svh - var(--hdr) - var(--gut));min-height:0}
.hdr.solid,.hdr[data-solid]{background:#fff;color:var(--t-ink)}
.hdr .menu a[aria-current]{background:rgba(255,255,255,.95);color:#111}.hdr.solid .menu a[aria-current],.hdr[data-solid] .menu a[aria-current]{background:#111;color:#fff}

/* placeholders: a plain quiet plate, no words, no texture */
.ph,.tall .ph,.panel .ph.fill,.panel.light .ph.fill{background:var(--t-grey);color:transparent}.ph span{display:none}.ph::after{display:none}
.panel.open .ph.fill{background:#1a1a1e}
.tall,.card .cp,.bigrow .pic,.collage .g{border:0;border-radius:16px}

/* the opening sentence: Altos 1. regular-to-medium weight, left 12 percent, block 60 percent wide, centred a little above the middle */
.film h1{font-family:var(--t-sans-pick);font-weight:500;letter-spacing:-.015em;line-height:1.14;font-size:clamp(30px,3.6vw,52px)}
.film .words{margin-left:calc((12 - var(--t-words-left)) * 1%);max-width:54%;margin-top:34vh}
.film .over::before{display:none}

/* page openings: Altos 5. label and a two-line heading low left; the filter carries the words */
.panel.open .words.low h1{font-size:clamp(30px,3.4vw,50px);max-width:24ch;line-height:1.12}.panel.open .words.low{margin-bottom:9vh}
.panel.open .over::before{display:none}
.panel.open.light{background:#fff}.panel.open.light .ph.fill{background:var(--t-grey)}.panel.open.light .over{color:var(--t-ink);text-shadow:none}.panel.open.light .down{color:var(--t-ink)}

/* panels with a picture: Altos 18. words mid-left at 40 percent, the picture behind, framed on inner pages */
.panel.has-pic .words.mid{max-width:44%}.panel.has-pic .over::before{display:none}.panel.has-pic h2{font-size:clamp(30px,3.4vw,50px)}
.panel.has-pic .dots{margin-top:2.4em}

/* panels without a picture: words left, a quiet plate right */
.panel.light:not(.open):not(.statement){background:#fff;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;padding:calc(var(--t-hdr) * 1px) var(--gut) var(--gut);gap:var(--gut)}
body:not([data-page="index"]) .panel.light:not(.open):not(.statement){margin:0;border-radius:0}
.panel.light:not(.open):not(.statement) .fill,.panel.light:not(.open):not(.statement) .ph.fill{position:relative;inset:auto;grid-column:2;grid-row:1;width:100%;height:100%;border-radius:16px;overflow:hidden;min-height:0}
.panel.light:not(.open):not(.statement) .fill::after{display:none}
.panel.light:not(.open):not(.statement) .fill img,.panel.light:not(.open):not(.statement) .fill video{position:absolute;inset:0}
.panel.light:not(.open):not(.statement) .over{position:relative;inset:auto;grid-column:1;grid-row:1;padding:0 calc(var(--t-col-pad) * 1%);align-items:center;color:var(--t-ink);text-shadow:none}
.panel.light:not(.open):not(.statement) .over::before{display:none}
.panel.light:not(.open):not(.statement) .words.mid{align-self:center;margin-top:0;transform:none;max-width:52ch}
.panel.light .btn{color:var(--t-ink)}.panel.light .btn:hover{background:var(--t-ink);color:#fff}
.panel.light .dots button{border-color:var(--t-ink)}.panel.light .dots button[aria-selected="true"]{background:var(--t-ink)}

/* the statement: white, centred, the one serif moment */
.panel.statement{background:#fff}.panel.statement .fill,.panel.statement .ph.fill{display:none}
.panel.statement .over{color:var(--t-ink);text-shadow:none}.panel.statement .over::before{display:none}
.panel.statement .big{font-family:var(--t-serif-pick);font-style:italic;font-size:clamp(40px,5.6vw,92px);line-height:1.05}

/* two-column slides: Altos 15. the picture 48 percent wide with 16px corners, the words in the other half */
.two{grid-template-columns:48% 1fr;gap:var(--gut)}.two.flip{grid-template-columns:1fr 48%}.two .col{padding:0 6%}.two .col .words{max-width:46ch}
.two .words h2{font-size:clamp(30px,3.2vw,46px)}

/* featured news, last on the home page */
.featured{padding-top:calc(var(--hdr) + 4vh)}.item h3 a{text-decoration:none}

/* focus areas: his reference, kept dark; the cards white */
.focus{background:#0a0a0c}.fcard{background:#f1ede4;border-radius:24px}.focus .fhead h2{color:#fff;font-family:var(--t-sans-pick)}

/* the pipeline: quiet rows, a black fill on the track */
.pipeline .prows,.prow{border-color:var(--t-line)}.track i{background:var(--t-grey)}.track span.on i{background:#111}.prow .stage{color:var(--t-mute)}

/* how we work: three columns, numerals, statements */
.cards{padding:var(--hdr) 6% 6%}.cards h2.c{text-align:left;margin:0 0 .8em;font-size:var(--h);max-width:20ch}
.cards .crow{grid-auto-flow:row;grid-template-columns:repeat(var(--t-cards-n),1fr);grid-auto-columns:auto;gap:0 4%;overflow:visible;border-top:1px solid var(--t-line);counter-reset:rule}
.cards .card{padding:28px 0 0;position:relative;counter-increment:rule}
.cards .card::before{content:counter(rule,decimal-leading-zero);display:block;font-size:13px;letter-spacing:.1em;color:var(--t-mute);margin-bottom:18px}
.cards .card .cp{border-radius:16px;margin-bottom:22px}.cards .card .cp:has(.ph){display:none}
.cards .card h3{font-size:clamp(22px,2.2vw,34px);line-height:1.12;margin:0 0 .5em;font-weight:400;letter-spacing:-.012em}
.cards .card .stage{color:var(--t-mute)}.cards .card p{font-size:clamp(15px,1.15vw,18px);line-height:1.55;color:#333;max-width:34ch}
.cards .nav{display:none}
body[data-page="careers"] .cards .crow{--t-cards-n:3}

/* news tools */
.news #q,.news .filters button{border-radius:999px;background:#fff}.news .filters button[aria-pressed="true"]{background:#111}
.pause[hidden]{display:none}
.ftr{background:#fff;border-color:var(--t-line)}

@media(max-width:1023px){
  .panel.light:not(.open):not(.statement){grid-template-columns:1fr;padding:var(--hdr) 16px 16px}
  .panel.light:not(.open):not(.statement) .fill,.panel.light:not(.open):not(.statement) .ph.fill{grid-column:1;grid-row:2;aspect-ratio:16/10;height:auto}
  .panel.light:not(.open):not(.statement) .over{grid-row:1;padding:16px 4px}
  .film .words{margin-left:0;max-width:100%}.panel.has-pic .words.mid{max-width:90%}
  .cards .crow{grid-template-columns:1fr;gap:24px}.cards .card{border-top:1px solid var(--t-line)}
}
/* sizes after the Altos side-by-side */
.film h1{font-size:clamp(28px,3.2vw,46px)}
#s18 h2{font-size:clamp(26px,2.8vw,40px);max-width:22ch}#s18 .words.mid{margin-top:50vh;max-width:42%}

/* round five */
.panel.light:not(.open):not(.statement) .fill,.panel.light:not(.open):not(.statement) .ph.fill{grid-column:1}
.panel.light:not(.open):not(.statement) .over{grid-column:2}
.panel.bleed{background:#141218;color:#fff}.panel.bleed .ph.fill{background:#141218}.panel.bleed .over{color:#fff}
.panel.bleed .fill::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 12.5%,rgba(0,0,0,0) 75%,rgba(0,0,0,.5) 100%)}
.panel.bleed .words.mid{max-width:44%}.panel.bleed h2{font-size:clamp(30px,3.4vw,50px)}
.panel.bleed.statement .fill,.panel.bleed.statement .ph.fill{display:block}.panel.bleed.statement .over{color:#fff}
.panel.bleed.statement .big{font-family:var(--t-serif-pick);font-style:italic;font-size:clamp(40px,5.6vw,92px);line-height:1.05}
.panel.bleed .read b{color:#fff}
body:not([data-page="index"]) .deck>.panel.has-pic:first-child{scroll-margin-top:var(--hdr)}
.howwework .band{border-radius:16px;margin:0 var(--gut)}
@media(max-width:1023px){.panel.light:not(.open):not(.statement) .fill,.panel.light:not(.open):not(.statement) .ph.fill{grid-column:1;grid-row:2}.panel.light:not(.open):not(.statement) .over{grid-column:1;grid-row:1}}
/* the news screen fits one window: a shorter big picture, tighter gaps, pills never clipped */
.featured{padding:calc(var(--hdr) + 1vh) 6% 3vh;justify-content:flex-start}.featured h2{margin-bottom:.4em}
.bigrow{margin:.6em 0 1.2em;align-items:start}.bigrow .pic{aspect-ratio:auto;height:min(36vh,360px)}
.row3{padding-top:1.2em}.item.big h3{font-size:clamp(20px,1.7vw,26px)}.item h3{margin:.2em 0}.item p{margin-top:.3em}

/* round six */
.panel.light.side-right:not(.open):not(.statement) .fill,.panel.light.side-right:not(.open):not(.statement) .ph.fill{grid-column:2}
.panel.light.side-right:not(.open):not(.statement) .over{grid-column:1}
.howwework{height:100svh;min-height:0;overflow:hidden}
.howwework .band{flex:0 0 46%;height:auto;min-height:0;margin:var(--gut) var(--gut) 0}
.howwework .band .words.low{margin-bottom:5vh}.howwework .band h2{font-size:clamp(28px,3.2vw,46px)}
.howwework .three{flex:1 1 auto;min-height:0;padding:22px 6% 28px;align-content:start}
.howwework .card .cp{aspect-ratio:auto;height:min(24vh,220px)}
.howwework .card h3{margin:.7em 0 .25em;font-size:clamp(18px,1.5vw,23px)}.howwework .card p{font-size:clamp(13.5px,1.02vw,16px)}
@media(max-width:1023px){.howwework{height:auto}.howwework .band{flex:none;height:46svh}.panel.light.side-right:not(.open):not(.statement) .fill,.panel.light.side-right:not(.open):not(.statement) .ph.fill{grid-column:1;grid-row:2}.panel.light.side-right:not(.open):not(.statement) .over{grid-column:1;grid-row:1}}

/* round eight */
:root{--edge:6vw;--t-hdr-pad-x:86}                                   /* one left edge: the logo, the hero, the words on full-bleed screens, the cards */
@media(min-width:1440px){:root{--t-hdr-pad-x:86}}
.hdr .in{padding-left:var(--edge);padding-right:var(--edge);max-width:none}
.film .words{margin-left:0}.film .over,.panel .over{padding-left:var(--edge);padding-right:var(--edge)}
.two .col{padding-left:0;padding-right:0}.two{padding-left:var(--edge);padding-right:var(--edge)}.two .col .words{padding:0 0 0 var(--gut)}.two.flip .col .words,.two .col:first-child .words{padding-left:0}
.panel.light:not(.open):not(.statement){padding-left:var(--edge);padding-right:var(--edge)}.panel.light:not(.open):not(.statement) .over{padding:0 0 0 var(--gut)}.panel.light.side-right:not(.open):not(.statement) .over{padding:0 var(--gut) 0 0}
.focus .fhead,.cards,.pipeline,.featured,.howwework .three{padding-left:var(--edge);padding-right:var(--edge)}
.howwework .band{margin:var(--hdr) var(--edge) 0;flex:0 0 calc(44svh - var(--hdr) + 60px)}.howwework .band .over{padding:0 var(--gut)}
.collage .grid3{gap:24px;padding:calc(var(--t-two-top) * 1px) 0 24px}
@media(max-width:1023px){:root{--edge:16px}}

/* round nine: inner pages frame every panel the same way, with the gutter between stacked panels */
body:not([data-page="index"]) .panel:not(.open):not(.light){margin:var(--gut) var(--gut) 0;height:calc(100svh - var(--gut));min-height:0;border-radius:16px;scroll-margin-top:0}
body:not([data-page="index"]) .deck>.panel.has-pic:first-child{margin:var(--hdr) var(--gut) 0;height:calc(100svh - var(--hdr) - var(--gut));scroll-margin-top:var(--hdr)}

/* bright pictures: ink words, a light filter instead of the dark one */
.bright-pic .over,.bright-pic.howwework .band .over,.bright-pic.howwework .band{color:#111}.bright-pic .band p,.bright-pic .over p{color:#222}
.bright-pic .fill::after,.bright-pic .band .fill::after{background:linear-gradient(to bottom,rgba(255,255,255,.35) 0,rgba(255,255,255,0) 12.5%,rgba(255,255,255,0) 70%,rgba(255,255,255,.45) 100%)}
.bright-pic .btn{color:#111}.bright-pic .down{color:#111}.bright-pic .dots button{border-color:#111}.bright-pic .dots button[aria-selected="true"]{background:#111}
.bright-pic.panel.has-pic .words.mid,.bright-pic.panel.open .words.low{text-shadow:0 1px 18px rgba(255,255,255,.6)}
.panel.light.has-pic-split .fill{position:relative}

/* round ten */
.collage{grid-template-columns:40% 1fr;padding-left:var(--edge);padding-right:var(--edge)}.collage .col .words{padding-left:0}
.jgrid{gap:24px}
/* phones: the white sheet's desktop grids step aside, nothing leaks sideways, the careers mission words go full width */
@media(max-width:1023px){
  html,body{overflow-x:hidden}
  .two,.two.flip,.collage{grid-template-columns:1fr;padding-left:16px;padding-right:16px}.two .col .words{padding:0}
  .frow{width:100%;box-sizing:border-box;padding:0 16px;scroll-padding:0 16px}
  #s18 .words.mid,.panel.has-pic .words.mid,.panel.bleed .words.mid{max-width:100%;margin-top:0}
  .panel.light:not(.open):not(.statement){padding-left:16px;padding-right:16px}.panel.light:not(.open):not(.statement) .over,.panel.light.side-right:not(.open):not(.statement) .over{padding:16px 0}
  .howwework .band{margin:var(--hdr) 16px 0}.howwework .three{padding-left:16px;padding-right:16px}
  .jgrid{padding:16px 0}
}
/* phones, full-bleed screens with words in the middle: the words sit in flow, centred, and the screen grows to fit them */
@media(max-width:1023px){
  .panel.has-pic,.panel.bleed{height:auto;min-height:100svh}
  body:not([data-page="index"]) .panel:not(.open):not(.light){height:auto;min-height:100svh;margin:16px 16px 0}
  body:not([data-page="index"]) .deck>.panel.has-pic:first-child{margin:var(--hdr) 16px 0;height:auto;min-height:calc(100svh - var(--hdr))}
  .panel.has-pic .over,.panel.bleed .over{position:relative;inset:auto;min-height:100svh;display:flex;align-items:center;padding:110px 16px 64px}
  body:not([data-page="index"]) .deck>.panel.has-pic:first-child .over{min-height:calc(100svh - var(--hdr))}
  .panel.has-pic .words.mid,.panel.bleed .words.mid,#s18 .words.mid{position:static;align-self:auto;margin:0;transform:none;max-width:100%}
  .panel.bleed.statement .over{align-items:center;justify-content:center}.panel.bleed.statement .words.centre{position:static;transform:none;margin:0;max-width:100%}
}
@media(max-width:1023px){#s18 .over{align-items:flex-end;padding-bottom:56px}#s18 .fill::after{background:linear-gradient(to bottom,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 12%,rgba(0,0,0,0) 45%,rgba(0,0,0,.72) 100%)}}
@media(max-width:1023px){#s18 h2{font-size:23px;line-height:1.2}#s18 .words.mid p{font-size:14px}#s18 .over{padding-bottom:40px}#s18 .fill img{object-position:50% 0}}
@media(max-width:1023px){#s18 .fill img{height:150%;top:-50%;object-position:50% 50%}}

/* round eleven: news type up, pills lined up, the wordmark's size, the founder */
.item h3{font-size:clamp(18px,1.55vw,24px);line-height:1.25}.item.big h3{font-size:clamp(24px,2.1vw,32px)}.item p{font-size:clamp(14px,1.1vw,17px)}.item .label{font-size:12px}
.row3 .item,.bigrow .item{height:100%}.row3 .item .btn.small{margin-top:auto}.item .btn.small{padding:9px 20px;font-size:14px}.item h3+p,.item h3+.btn{margin-bottom:1em}
.bigrow .item.big{justify-content:center}
.hdr .brand{height:auto}.hdr .brand svg{height:22px;width:auto}.ftr .brand svg{height:22px}
.founder .tall{max-height:78svh}
.frow{grid-auto-columns:min(560px,30vw)}
@media(max-width:1023px){.frow{grid-auto-columns:86vw;padding:0 7vw;scroll-padding:0 7vw}}

/* the London picture: words low left over the dark base of the lectern, a deeper band under them; the wordmark a little larger */
.panel.london .fill img{object-position:60% 50%}.panel.london .fill::after{background:linear-gradient(to bottom,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 55%,rgba(0,0,0,.72) 100%)}
.panel.london .words.low{margin-bottom:8vh;max-width:44%}.panel.london h2{font-size:clamp(28px,3vw,44px)}
.hdr .brand svg{height:28px}.ftr .brand svg{height:26px}

/* the header in the logo's navy; the wordmark navy on white, white on pictures */
:root{--navy:#28415a}
.hdr.solid,.hdr[data-solid],body:not([data-page="index"]) .hdr{color:var(--navy)}
.hdr.solid .menu a[aria-current],.hdr[data-solid] .menu a[aria-current],body:not([data-page="index"]) .hdr .menu a[aria-current]{background:var(--navy);color:#fff}
.hdr.solid .menu .pill,.hdr[data-solid] .menu .pill{border-color:var(--navy)}.hdr.solid .menu .pill:hover{background:var(--navy);color:#fff}
.ftr .brand{color:var(--navy)}.ftr .h{color:var(--navy)}

/* round twelve: the logo reads at a glance, as Altos */
.hdr .brand svg{height:44px}.ftr .brand svg{height:36px}
@media(max-width:1023px){.hdr .brand svg{height:34px}}
.release h1{font-weight:400;letter-spacing:-.012em}.nextband{background:#fff}.relband{background:#f2f2f0}
/* the leadership screen fits one window */
.people{height:auto;min-height:100svh}.person .pp{max-height:44vh}.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* the founder page: one big picture, the text beside it */
.founder-big{grid-template-columns:50% 1fr}.founder-big .tall{margin:var(--hdr) 0 var(--gut) var(--edge);max-height:none}.founder-big .col{padding:var(--hdr) var(--edge) var(--gut) 0}.founder-big .col .words{max-width:52ch}
.founder-big h1{font-size:clamp(34px,4vw,60px);margin:0 0 .2em}.founder-big .role{font-weight:500;margin:0 0 1.2em}.founder-big .words p{font-size:clamp(15px,1.15vw,18px);line-height:1.6;max-width:52ch}.founder-big .degrees{color:var(--t-mute);font-size:15px}
@media(max-width:1023px){.founder-big{grid-template-columns:1fr}.founder-big .tall{margin:var(--hdr) 16px 0;aspect-ratio:3/4}.founder-big .col{padding:24px 16px 40px}}
.founder-big{height:auto;min-height:100svh;overflow:visible}.founder-big .tall{max-height:calc(100svh - var(--hdr) - var(--gut))}

/* round fourteen */
.founder-big .btn{margin-top:1.2em}.ccard{background:#fff}.contactpage .place b{color:var(--navy)}

/* round fifteen */
.cband-top{margin:var(--hdr) var(--gut) 0;border-radius:16px;height:calc(56svh - var(--hdr))}.contactpage{padding-top:48px}.cside .place b{color:var(--navy)}