/* Fluent — the site in the grammar of Microsoft's product pages.

   Measured off microsoft.com/surface (Surface Laptop Ultra, October 27,
   2026) and laid over style.css as one layer, so the house system underneath
   is untouched and the whole change is this file plus the font loading.

   What was measured, and what it became here:
   - One sans at a light weight for everything (Segoe Sans 350). Segoe is not
     licensed for other sites, so Windows visitors get their own Segoe UI and
     everyone else gets Selawik, Microsoft's open-source stand-in drawn to
     Segoe's metrics. Hangul falls through to Pretendard Variable, which can
     sit at the same 300/350 weights.
   - Display lines in a square monospace, uppercase (Aux Mono). Share Tech
     Mono is the open face closest to it. The mono carries no Hangul, so it
     takes headings only on the English page; Korean and Chinese headings
     stay in the light sans, at the same place and scale.
   - Black ground (#000) with lifted cards (#1a1a1a, 24px corners, no border,
     no shadow); the light ground is microsoft.com's white with #f2f2f2.
   - Colour is for action only. Microsoft's blue was tried here and given
     back: the lab's yellow (#ffc600) is the action colour, with the house's
     split by ground — a letter in the dark, a fill and a rule on paper.
   - Section headings centred over their content, sections far apart.
   - A flat 54px bar at the top: mark, name, a rule, the second name, then
     the links. It no longer turns into a pill.
*/

@font-face{font-family:Selawik;font-weight:300;font-display:swap;src:url(/assets/fonts/selawik/selawkl.woff2) format("woff2")}
@font-face{font-family:Selawik;font-weight:350;font-display:swap;src:url(/assets/fonts/selawik/selawksl.woff2) format("woff2")}
@font-face{font-family:Selawik;font-weight:400;font-display:swap;src:url(/assets/fonts/selawik/selawk.woff2) format("woff2")}
@font-face{font-family:Selawik;font-weight:600;font-display:swap;src:url(/assets/fonts/selawik/selawksb.woff2) format("woff2")}

/* ---------------- tokens ---------------- */
:root{
  --sans:"Segoe UI Variable Text","Segoe UI",Selawik,"Pretendard Variable",Pretendard,
    "Malgun Gothic","Apple SD Gothic Neo","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  --serif:var(--sans);
  --mono:"Share Tech Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:var(--mono);
  --brand:#ffc600;
  --wordmark:"Cormorant Garamond",Georgia,serif;
  --r-card:24px; --r-media:16px;
  /* the one gap between cards, the value the work and people grids already use */
  --card-gap:clamp(20px,2vw,32px);
  --hdr-h:54px;
  /* dark: the Surface page */
  --ink:#fff; --mid:#b3b3b3; --line:#333; --bg:#000; --card:#1a1a1a; --soft:#141414;
  --hdr:#1a1a1a; --hdr-line:#2b2b2b;
  --accent:#ffc600; --accent-ink:#ffc600; --on-accent:#0f0f0f; --beat:#6fb3a6;
  --accent-rule:transparent; --accent-chip:color-mix(in srgb,#ffc600 15%,transparent);
  --accent-chip-ink:#ffc600;
  --rule:#262626; --grain:0; --wash:9%; --glow:none;
  --scrim:rgba(0,0,0,.62); --on-scrim:#fff;
}
/* No light-preference block: the black ground is the house tone for every
   visitor, whatever the OS asks for. style.css still carries one, and the
   bare :root above, being later, outranks it. Day is the toggle's to give. */
:root:not([data-mode]) .theme svg[data-m="auto"]{display:none}
:root:not([data-mode]) .theme svg[data-m="dark"]{display:block}
:root[data-theme="day"]{
  --ink:#1a1a1a; --mid:#616161; --line:#e0e0e0; --bg:#fff; --card:#f2f2f2; --soft:#f7f7f7;
  --hdr:#fff; --hdr-line:#e6e6e6;
  --accent:#ffc600; --accent-ink:#7d5c00; --on-accent:#0f0f0f; --beat:#1a5f58;
  --accent-rule:#ffc600; --accent-chip:#ffc600; --accent-chip-ink:#0f0f0f;
  --rule:#ebebeb; --grain:0; --wash:7%; --glow:none;
}
:root[data-theme="dark"]{
  --ink:#fff; --mid:#b3b3b3; --line:#333; --bg:#000; --card:#1a1a1a; --soft:#141414;
  --hdr:#1a1a1a; --hdr-line:#2b2b2b;
  --accent:#ffc600; --accent-ink:#ffc600; --on-accent:#0f0f0f; --beat:#6fb3a6;
  --accent-rule:transparent; --accent-chip:color-mix(in srgb,#ffc600 15%,transparent);
  --accent-chip-ink:#ffc600;
  --rule:#262626; --grain:0; --wash:9%; --glow:none;
}

/* ---------------- ground and type ---------------- */
body{font-family:var(--sans);font-weight:400;letter-spacing:.005em}
body::after,body::before,.hero::before{display:none}
.p-hero main::before{display:none}
a{text-underline-offset:3px}


/* Section headings: centred over the section, the matter beneath. Their
   type is the Title role, set with the others at the end of this sheet. */
h2::before{display:none}
main > section:not(.funders) > h2,
html[lang="ko"] main > section:not(.funders) > h2{
  text-align:center;padding-top:0;margin:0 auto var(--sp-10);max-width:22ch}
html[lang="en"] main > section:not(.funders) > h2{max-width:26ch}
/* undo the sticky heading column: the matter runs the full measure under it */
@media(min-width:901px){
  .p-hero main > section:not(.hero):not(.ph):not(.band):not(.cta-band):not(.plane):not(.director):not(.face):not(.intro):not(.two):not(.funders):has(> h2),
  main > section.split{display:block}
  .p-hero main > section:not(.hero):not(.ph):not(.band):not(.cta-band):not(.plane):not(.director):not(.face):not(.intro):not(.two):not(.funders):has(> h2) > h2,
  html[lang="ko"] main > section.split > h2,
  main > section.split > h2{
    position:static;padding:0;margin:0 auto var(--sp-10)}
  .p-hero main > section:not(.hero):not(.ph):not(.band):not(.cta-band):not(.plane):not(.director):not(.face):not(.intro):not(.two):not(.funders):has(> h2) > .shint,
  main > section.split > .shint{margin-top:calc(-1 * var(--sp-7))}
}
.shint{text-align:center;margin:calc(-1 * var(--sp-7)) auto var(--sp-10);color:var(--mid)}
/* prose under a centred heading sits on the centre line too, set left */
main > section:not(.ph):not(.hero) > :is(p:not(.more):not(.tjump):not(.shint),.introtext,.lede,table.terms,.bio){margin-inline:auto}
main > section > .more{text-align:center}
main > section{padding-block:clamp(72px,9vw,128px)}
.hero + section,.ph.img + section,.hero.field + section{padding-top:clamp(72px,9vw,128px)}

/* ---------------- the bar ---------------- */
/* --p is frozen at rest: the bar keeps one shape however far the page has
   moved. affect.js still lifts it to fixed and reserves its height. */
header.site{
  --p:0 !important;
  display:flex !important;align-items:center;flex-wrap:nowrap;gap:var(--sp-6);
  padding:7px var(--page-gutter) !important;
  border:0 !important;border-bottom:1px solid var(--hdr-line) !important;border-radius:0 !important;
  background:var(--hdr) !important;backdrop-filter:none !important}
html .p-hero header.site:not(.afloat){
  --ink:inherit;--mid:inherit;--line:inherit;--card:inherit;--accent-ink:inherit;--beat:inherit;--bg:inherit;
  color:var(--ink)}
header.site.afloat:has(nav.open){border-radius:0 !important}
/* The wordmark stays the house's own — Affective in roman over Design Lab
   in italic, Cormorant, the mark standing as its full stop — at step 1, the
   size it already took in the old pill bar. Only the bar around it is new. */
.brand{flex-direction:row;align-items:center;gap:0;flex:none}
.bt{display:block;line-height:.84}
.bt b,.bt i{display:block;font-family:var(--wordmark);font-weight:600;letter-spacing:-.028em;
  font-size:var(--fs-1) !important}
.bt i{font-style:italic;white-space:nowrap}
.mark .m2{fill:var(--brand)}
header.site .bko{font-family:"Gowun Batang",var(--sans);font-size:var(--fs-0);font-weight:400;letter-spacing:0;color:var(--ink);
  max-height:none;opacity:1;margin:0 0 0 16px;padding-left:16px;border-left:2px solid var(--ink);line-height:22px;white-space:nowrap}
header.site nav{gap:var(--sp-6);margin:0 auto 0 var(--sp-8)}
/* the links reach the bar's edges (the negative margin) so the underline
   lands on its bottom rule, without making the bar taller than its controls */
header.site nav a{color:var(--ink);padding:15px 0;margin-block:-8px !important;
  background:linear-gradient(var(--ink),var(--ink)) 0 100% / 0 2px no-repeat;
  transition:background-size var(--d-quick) var(--ease-hover)}
header.site nav a::before{display:none}
/* the accent pill that flashed under these links is gone: links answer with
   an underline, as Microsoft's do */
header.site nav a,.more a,.axes a,footer.site a,.dl a{margin:0;border-radius:0}
.more a,.axes a,footer.site a,.dl a{padding:0}
.more a:hover,.axes a:hover,footer.site a:hover,.dl a:hover{background:none;color:var(--accent-ink);text-decoration:underline}
header.site nav a:hover,header.site nav a.on{color:var(--ink);
  background:linear-gradient(var(--ink),var(--ink)) 0 100% / 100% 2px no-repeat}
header.site nav a.on{background-image:linear-gradient(var(--accent),var(--accent))}
header.site .hr{margin-left:auto;gap:var(--sp-3)}
.lang,.theme{border:0;color:var(--ink)}
.lang{padding:6px 8px}
.lang:hover,.theme:hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.burger{border:0}
@media(max-width:1200px){
  header.site{flex-wrap:wrap}
  header.site nav{margin:0}
  html.js header.site nav{background:var(--hdr)}
  html.js header.site nav a{padding:var(--sp-4) 0;background:none}
  html.js header.site nav a.on{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
}
@media(max-width:900px){header.site .bko{display:none}}
@media(max-width:620px){
  header.site{gap:var(--sp-3)}
  header.site .hr{gap:2px}
  .lang{padding:6px 6px}
  header.site .theme{width:30px}
  header.site .burger{width:34px;height:34px}
}
@media(max-width:360px){.brand .mark{display:none}}

/* Chinese: Pretendard carries Korean hanja, so with it ahead in the stack a
   simplified line set half its characters in Pretendard and half in the
   system face. The Chinese faces go first on the Chinese page. */
html:lang(zh){--sans:"Segoe UI Variable Text","Segoe UI",Selawik,"Microsoft YaHei","PingFang SC",
  "Noto Sans SC","Hiragino Sans GB",system-ui,sans-serif}

@media(max-width:760px){.sculpture-hero.hero.field .sc-affiliation{margin-top:var(--sp-8)}}

/* ---------------- surfaces ---------------- */
.proj,.pcard,.tool,.offer{border:0;border-radius:var(--r-card);background:var(--card)}
.proj{padding:var(--sp-9)}
.proj.has-img{padding:0}
.proj.has-img .pmeta,.proj.has-img h3,.proj.has-img p,.proj.has-img .outs,.proj.has-img .pfoot{
  padding-left:var(--sp-9);padding-right:var(--sp-9)}
.proj.has-img .pfoot{padding-bottom:var(--sp-9)}
.proj img{margin-bottom:var(--sp-8)}
.pcard:hover{transform:none;background:color-mix(in srgb,var(--card) 90%,var(--ink))}
.pcard .pcb{padding:var(--sp-7) var(--sp-8) var(--sp-8)}
.tool{padding:var(--sp-9)}
.tool:hover{background:color-mix(in srgb,var(--card) 90%,var(--ink))}
.offer{padding:var(--sp-8)}
.tjump{gap:var(--card-gap)}
.tjump a{border:0;border-radius:var(--r-media);background:var(--card);padding:var(--sp-4) var(--sp-6)}
.tjump a:hover{background:color-mix(in srgb,var(--card) 90%,var(--ink))}
.dframe,.cal,.vplay,figure.video iframe{border:0;border-radius:var(--r-card)}
.person img,.ph-x,.labshots img,.post-body img,.people.g120 .person img,.people.g120 .ph-x{border-radius:var(--r-media)}
.pfoot{border-top-color:var(--line)}

/* rows: solid hairlines, as the FAQ list draws them */
ul.ach li,ul.pubs li,ul.offers li,ul.news li,ul.recent li,.people.g120 .person,.tyr li{border-bottom-style:solid}
.outs li,.s-obj .fterm+.fterm{border-top-style:solid}

/* ---------------- actions ---------------- */
.btn{background:var(--accent);color:var(--on-accent);line-height:1.25;
  padding:14px 32px;border-radius:999px;border:0;
  transition:background-color var(--d-quick) var(--ease-hover)}
.btn:hover{background:color-mix(in srgb,var(--accent) 82%,#000)}
.btn.ghost{background:transparent;color:var(--ink);border:0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 45%,transparent)}
.btn.ghost:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.more a{color:var(--accent-ink)}
.more a:hover{text-decoration:underline}

/* the filter: a segmented control, the chosen one filled with ink */
.chip{border:0;border-radius:999px;background:var(--card);color:var(--ink);padding:8px 18px}
.chip:hover{background:color-mix(in srgb,var(--card) 85%,var(--ink));color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip.on b{color:var(--bg)}
.doi,.mdlink,.pubs .line{border-color:var(--line)}

/* the call to action: a lifted panel with the heading centred, not a yellow band */
.cta-band{background:var(--card);color:var(--ink);border-radius:var(--r-card);text-align:center;
  padding:clamp(48px,6vw,88px) clamp(24px,5vw,72px);--field-ink:var(--ink);--field-op:.05}
.cta-band h2,.cta-band li,.cta-band ol,.cta-band ul{color:var(--ink)}
.cta-band p{color:var(--mid)}
.cta-band .ctas{justify-content:center}
.cta-band .cnote{margin-inline:auto}
.cta-band ol.send{display:inline-block;text-align:left}
.cta-band > *{margin-inline:auto}
.cta-band .btn{background:var(--accent);color:var(--on-accent)}
.cta-band .btn.ghost{background:transparent;color:var(--ink);border:0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 45%,transparent)}
section.band{background:var(--soft);border-radius:var(--r-card)}

/* the research frame: three stacked panels instead of a ruled box */
.fgrid{border-bottom:0}
.fstratum{border:0;border-radius:var(--r-card);background:var(--card)}
.fstratum + .fstratum{margin-top:var(--sp-3)}
.s-stage{background:var(--card)}
.s-obj{background:color-mix(in srgb,var(--accent) var(--wash),var(--card))}

/* ---------------- openers ---------------- */
html .hero.field,html .ph.img{
  --ink:#fff;--mid:#c8c8c8;--line:#333;--card:#1a1a1a;--accent-ink:#ffc600;--beat:#6fb3a6;--bg:#000}
.ph.img{background:#000}
.ph.img .lede{color:rgba(255,255,255,.9)}
.ph.img .dl{margin-top:var(--sp-5)}
.ph.img .veil{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.85) 100%)}

/* the home hero */
.sculpture-hero.hero.field{background:#000}
.sc-stage{background:radial-gradient(ellipse at 50% 52%,#262626 0%,#121212 38%,#000 72%)}
.sc-eyebrow,.sc-topline,.sc-stage-note,.sc-coordinate,.sc-bottom,.sc-affiliation,.sc-footnote,
.sc-sliders label>span,.sc-sliders small{color:#a6a6a6}
.sc-topline,.sc-bottom{border-color:#333}
.sc-controls{border-top-color:#262626}
.sc-moods button,.sc-actions button{color:#9e9e9e}
.sc-moods button[aria-pressed=true],.sc-actions button[aria-pressed=true],.sc-actions button[aria-expanded=true]{color:#fff}
.sc-moods button:hover,.sc-actions button:hover{color:#fff}
.sc-sliders input{accent-color:#ffc600}
.sc-experience button:focus-visible,.sc-sliders input:focus-visible,.sc-link:focus-visible,.sc-bottom a:focus-visible,.sc-buy a:focus-visible{outline-color:#ffc600}
.sculpture-hero.hero.field h1{color:#8c8c8c}
.sculpture-hero.hero.field h1 em{color:#fff}
.sc-intro{color:rgba(255,255,255,.9)}
.sc-link{border:0;gap:6px;padding:0;color:#fff}
.sc-link:hover{color:#fff;text-decoration:underline}
.sc-link span{display:none}
.sc-link::after{content:"→";align-self:center}
/* the purchase bar: the one button, then what the lab offers */
.sc-buy{display:flex;align-items:center;gap:var(--sp-6);margin-top:var(--sp-8);
  background:#1a1a1a;border-radius:999px;padding:6px 28px 6px 6px;color:#fff;max-width:100%}
.sc-buy span{min-width:0}
.sc-buy a{flex:none;background:var(--accent);color:var(--on-accent);text-decoration:none;border-radius:999px;padding:12px 26px}
.sc-buy a:hover{background:color-mix(in srgb,var(--accent) 82%,#000)}
.sc-status-dot{background:var(--brand)}
@media(max-width:760px){.sc-buy{gap:var(--sp-4);padding-right:20px}.sc-buy a{padding:10px 18px}}

/* ---------------- footer ---------------- */
footer.site{width:auto;margin:0;border-top:0;background:var(--soft);
  padding:var(--sp-10) var(--page-inset) var(--sp-11)}

/* ---------------- focus ---------------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.cal{margin-inline:auto}

/* ---------------- type roles ----------------
   Six sizes were not enough to stop the page reading as many: at the same
   size the type still split by weight, face, case and tracking — 58 styles
   measured across eleven pages, 25 of them at 12px alone. So the sizes are
   gathered into ten roles, and each role fixes all five at once. Nothing
   else in the three sheets may set them; that is what the !important says.

     role      step  weight  face                          case   tracking
     Display    4    300     sans  (KO Gowun Batang 400,     —     -.01em
     Title      3    300      EN square mono 400 caps)       —     -.01em
     Subtitle   2    300     sans                            —     -.01em
     Heading    1    600     sans                            —      0
     Lead       1    350     sans                            —      0
     Body       0    400     sans  (Strong: 600)             —     .005em
     Caption   −1    400     sans  (Strong: 600)             —     .01em
     Label     −1    600     sans                          CAPS    .06em
     Data      −1    400     square mono                     —     .06em

   Data is for what is only ever numbers and Latin: dates, years, counts,
   DOIs, hosts. Anything that can be Hangul is a Caption or a Label.
   The wordmark and the Korean name beside it are the logo, not a role. */
:root{
  --display-ko:"Gowun Batang","Pretendard Variable",Pretendard,serif;
  --tr-body:.005em; --tr-caption:.01em; --tr-small:.06em;
}
button{font-family:inherit}
b,strong{font-weight:600}

/* Display and Title: the face follows the language */
main h1:not(.post h1){font-size:var(--fs-4) !important;line-height:1.12 !important}
main h2:not(.funders h2),.sc-mood{font-size:var(--fs-3) !important;line-height:1.22 !important}
:is(main h1:not(.post h1),main h2:not(.funders h2),.sc-mood){
  font-family:var(--sans) !important;font-weight:300 !important;letter-spacing:-.01em !important;text-transform:none !important}
html[lang="ko"] :is(main h1:not(.post h1),main h2:not(.funders h2),.sc-mood){
  font-family:var(--display-ko) !important;font-weight:400 !important;letter-spacing:-.025em !important}
/* Hangul fills its em box, so the Korean display lines need more lead */
html[lang="ko"] main h1:not(.post h1){line-height:1.2 !important}
html[lang="en"] :is(main h1:not(.post h1),main h2:not(.funders h2),.sc-mood){
  font-family:var(--display) !important;font-weight:400 !important;letter-spacing:.04em !important;text-transform:uppercase !important}
/* the English hero is one step down: the mono runs wide in its column */
html[lang="en"] .sculpture-hero.hero.field h1{font-size:var(--fs-3) !important;line-height:1.2 !important}
/* display-size terms in the research diagram belong to no language */
:is(.s-obj .fterm b,.s-stage .fterm b,.fux-k,.hero.field .fread b){
  font-family:var(--sans) !important;font-weight:300 !important;letter-spacing:-.01em !important}

/* Subtitle */
:is(.tyr h3,.post h1,ul.ds-space b){
  font-family:var(--sans) !important;font-size:var(--fs-2) !important;font-weight:300 !important;
  letter-spacing:-.01em !important;line-height:1.25 !important;text-transform:none !important}

/* Heading */
:is(main h3:not(.tyr h3),.pcard b,.offer b,.s-mat .fterm b,.def dt b,ul.fwall b,.dinfo h3,ul.nf a,.plane .pt b){
  font-family:var(--sans) !important;font-size:var(--fs-1) !important;font-weight:600 !important;
  letter-spacing:0 !important;line-height:1.35 !important;text-transform:none !important}

/* Lead */
:is(.lede,.sc-intro,.introtext p:first-child,blockquote.ethos p){
  font-family:var(--sans) !important;font-size:var(--fs-1) !important;font-weight:350 !important;
  letter-spacing:0 !important;line-height:1.55 !important}

/* Body */
:is(header.site nav a,.chip,.btn,.sc-link,.sc-buy,.sc-buy a){
  font-family:var(--sans) !important;font-size:var(--fs-0) !important;font-weight:400 !important;
  letter-spacing:var(--tr-body) !important;text-transform:none !important}
:is(.pt,summary,.cur){font-weight:600 !important}

/* Caption */
:is(.langs .lang,.sc-moods button,.sc-actions button,.sc-topline,.sc-topline span,.sc-bottom a,
    .sc-instrument .sc-eyebrow,.sc-affiliation,.sc-stage-note,.sc-footnote,.sc-sliders label > span,
    .sc-sliders small,.hlabel,ul.facelegend span,.est,.pubs .line,.plink a,.plane .pt s,.credit,.plab,
    .tyr .tm,.award,footer.site,footer.site .fl,.fux-c,.frole em){
  font-family:var(--sans) !important;font-size:var(--fs-n1) !important;font-weight:400 !important;
  letter-spacing:var(--tr-caption) !important;text-transform:none !important}
:is(.award,.oa b,footer.site b){font-weight:600 !important}

/* Label */
:is(.tag,.new,.frole,.tstrip .tsl,.funders h2,.d-role){
  font-family:var(--sans) !important;font-size:var(--fs-n1) !important;font-weight:600 !important;
  letter-spacing:var(--tr-small) !important;text-transform:uppercase !important}

/* Data */
:is(.d,.dl a,.yr,.py,.glist .gy,.fterm .fn,.chip b,.matbox summary b,.mopen,.tool .thost,.tstrip i,
    .sc-coordinate,.sc-coordinate span,.hcopy .sc-eyebrow,.sc-bottom > span,.outs .oy,.person .span,
    .doi,.mdlink,.dl .sep){
  font-family:var(--mono) !important;font-size:var(--fs-n1) !important;font-weight:400 !important;
  letter-spacing:var(--tr-small) !important;text-transform:none !important}

/* ---------------- the lab, introduced ----------------
   The home's second screen: a lead, the alley, the two things the lab does
   as two panels, the promise to measure, four figures, and the line for the
   undecided. Everything sits on the centre axis under the centred title. */
.intro .introtext{max-width:40em;margin-inline:auto}
.intro .introtext p{color:var(--mid)}
.intro .introtext p:first-child{color:var(--ink);max-width:none}
.itwo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--card-gap);
  max-width:820px;margin:var(--sp-9) auto 0}
.icard{background:var(--card);border-radius:var(--r-card);padding:var(--sp-8)}
.icard h3{margin:0 0 var(--sp-3)}
.icard p{margin:0;color:var(--mid)}
.iverify{max-width:40em;margin:var(--sp-9) auto 0;color:var(--mid)}
.istat{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5);
  max-width:820px;margin:var(--sp-9) auto 0;padding:var(--sp-7) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.istat li{text-align:center;display:flex;flex-direction:column}
.istat b{color:var(--ink)}
.istat span{color:var(--mid);margin-top:var(--sp-1)}
.intro .more{text-align:center;margin-top:var(--sp-8)}
@media(max-width:620px){
  .itwo{grid-template-columns:1fr}
  .istat{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-7)}
}
/* roles for the new pieces: figures are Subtitle, their names Caption */
.istat b{font-family:var(--sans) !important;font-size:var(--fs-2) !important;font-weight:300 !important;
  letter-spacing:-.01em !important;line-height:1.2 !important}
.istat span{font-family:var(--sans) !important;font-size:var(--fs-n1) !important;font-weight:400 !important;
  letter-spacing:var(--tr-caption) !important}

/* ---------------- line breaks ----------------
   A last line holding one word — 측정합니다. alone under a full line — was
   measured on 166 text blocks across the three languages at 1440, 1024 and
   390. Two rules answer it. Short text (titles, ledes, captions, card
   lines) is balanced, so its lines come out near the same length. Running
   text is set pretty, which lets the browser pull a word or two down from
   the line above rather than leave a stub. Korean keeps keep-all, so both
   break only between 어절. */
:is(p,li,dd,td,th,blockquote){text-wrap:pretty}
:is(h1,h2,h3,h4,.lede,.sc-intro,.introtext p:first-child,.shint,figcaption,.cap,.note,dt,
    .icard p,.iverify,blockquote p,.pcard b,summary,.tag,.th,.cnote,.mats li,.xref,.pmeta,
    .sc-footnote,.dnote,.ds-note,.pubs .pt){text-wrap:balance}
/* balance stops at six lines; the build log's long note is running text */
.shint.bl-note{text-wrap:pretty}
/* a week not yet open: its date is a caption on its own line, not a word
   left over from the title */
.mats li.lk > .lkn{display:block;margin-left:0}
.mats li.lk > .lkn::before{content:none}
/* Chinese breaks between characters. The house's keep-all is a Korean rule
   (break between 어절); on the Chinese page it left lines able to break only
   at punctuation, so a sentence fell to the next line whole. */
html:lang(zh) body{word-break:normal;line-break:strict}
/* two-line texts that are not titles: balanced, so the second line is not a stub */
:is(.cta-band p,.proj p,.tool p,ul.bg li,ul.offers li,.dinfo p,.iv,th){text-wrap:balance}
/* paragraphs of three to six lines on a wide screen: balanced there; on a
   phone they run past six lines, where balance gives up, so they stay pretty */
@media(min-width:901px){
  :is(.def dd,.profile .bio p,main > section:not(.post-body) > p,.frame p){text-wrap:balance}
}
/* phrases marked in the copy (see phr() in the build): each holds together,
   and balance picks among the breaks between them */
.phr{display:inline-block}

/* ---------------- the applicant's blocks (home) ----------------
   What the lab provides sits in a band right after the intro; what has come
   of studying here follows as four panels and one line of where people went. */
.wins{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--card-gap)}
.wins li{background:var(--card);border-radius:var(--r-card);padding:var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.wins > li > span{color:var(--mid)}
.careers{text-align:center;margin:var(--sp-9) auto 0}
.careers > span:first-child{color:var(--mid);margin-right:var(--sp-3)}
#outcomes .more,#support .more{text-align:center;margin-top:var(--sp-8)}
@media(max-width:1100px){.wins{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.wins{grid-template-columns:1fr}}
/* the emotion expression demo, on Research beside how we measure */
.mdemo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--card-gap);align-items:center;
  margin:var(--sp-10) auto 0;max-width:var(--page-width);background:var(--card);border-radius:var(--r-card);padding:var(--sp-9)}
.mdemo h3{margin:0 0 var(--sp-3)}
.mdemo p{color:var(--mid);margin:0}
.mdemo .hlabel{display:none}
.mdemo .hface{display:flex;flex-direction:column;align-items:center;min-width:0}
.mdemo .facepad{--pad:min(360px,30vw)}
@media(max-width:900px){.mdemo{grid-template-columns:1fr}.mdemo .facepad{--pad:min(300px,70vw)}}
/* teaching: how to use the decks, under the jump list */
.tnotes{list-style:none;padding:0;margin:var(--sp-7) 0 0;max-width:var(--reading-width)}
.tnotes li{color:var(--mid);padding:var(--sp-1) 0}
/* roles for the new pieces */
.wins b{font-family:var(--sans) !important;font-size:var(--fs-1) !important;font-weight:600 !important;
  letter-spacing:0 !important;line-height:1.35 !important}
:is(.wins > li > span,.careers > span:first-child,.tnotes li){font-family:var(--sans) !important;font-size:var(--fs-n1) !important;
  font-weight:400 !important;letter-spacing:var(--tr-caption) !important}
.careers{font-family:var(--sans) !important;font-size:var(--fs-0) !important;font-weight:400 !important}
:is(.wins b,.wins > li > span){text-wrap:balance}
/* what the lab provides, on home and on Join: three panels, the figure first */
.band ul.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap);
  max-width:none;margin:0}
.band ul.offers li{background:var(--card);border:0;border-radius:var(--r-card);padding:var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-3);color:var(--mid)}
.band ul.offers li:last-child{border:0}
.band ul.offers b{margin:0;color:var(--ink)}
@media(max-width:900px){.band ul.offers{grid-template-columns:1fr}}
.band ul.offers b{font-family:var(--sans) !important;font-size:var(--fs-1) !important;font-weight:600 !important;
  letter-spacing:0 !important;line-height:1.35 !important}
.band ul.offers li{font-size:var(--fs-n1) !important;letter-spacing:var(--tr-caption) !important}
/* the funders wall fits however many there are */
ul.fwall{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.sc-buy span{text-wrap:balance}
:is(.tnotes li,p.more){text-wrap:balance}