/* Big Data Studies Lab — production skeleton.
   Design system carried from concept round five. Calmer: the machinery stays,
   the explanations do not. */

@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/source-serif-4-latin.woff2) format("woff2");font-weight:400 600;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/source-serif-4-latin-ext.woff2) format("woff2");font-weight:400 600;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto Mono";src:url(/assets/fonts/roboto-mono-latin.woff2) format("woff2");font-weight:400 600;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto Mono";src:url(/assets/fonts/roboto-mono-latin-ext.woff2) format("woff2");font-weight:400 600;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --logo-cyan:#2BB7B7; --logo-ink:#343535;
  --cy900:#0F4F50; --cy700:#177E7E; --cy500:#2BB7B7; --cy300:#7BD4D2; --cy100:#D6EDEB; --cy050:#EEF6F5;
  --n900:#1A1C1C; --n800:#343535; --n600:#5C6362; --n400:#98A09E; --n200:#D5DAD8; --n100:#E7EBE9; --n050:#F5F7F6;
  --ox:#C25326; --amber:#8A6A18; --violet:#5B4E86;
  --paper:#F5F7F6; --panel:#FFFFFF; --ink:#1A1C1C; --ink2:#454C4B; --muted:#5C6362;
  --rule:#D5DAD8; --rule2:#E7EBE9; --sel:#D6EDEB;
  --fd:"Instrument Sans",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fb:"Source Serif 4",Georgia,"Times New Roman",serif;
  --fm:"Roboto Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --rail:196px; --gutter:34px; --shell:1240px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --logo-ink:#DCE5E3; --cy900:#0B3A3B; --cy700:#3FD0CE; --cy300:#1D8C8C; --cy100:#164A49; --cy050:#132E2F;
  --n900:#EFF5F3; --n800:#D6DEDC; --n600:#A3AEAB; --n400:#7A8683; --n200:#3E4A47; --n100:#2E3936; --n050:#29332F;
  --ox:#F0764A; --amber:#D8B454; --violet:#A79BD4;
  --paper:#1D2726; --panel:#26312F; --ink:#EFF5F3; --ink2:#C6CFCD; --muted:#A3AEAB;
  --rule:#3A4643; --rule2:#2E3936; --sel:#164A49;}}
:root[data-theme="dark"]{
  --logo-ink:#DCE5E3; --cy900:#0B3A3B; --cy700:#3FD0CE; --cy300:#1D8C8C; --cy100:#164A49; --cy050:#132E2F;
  --n900:#EFF5F3; --n800:#D6DEDC; --n600:#A3AEAB; --n400:#7A8683; --n200:#3E4A47; --n100:#2E3936; --n050:#29332F;
  --ox:#F0764A; --amber:#D8B454; --violet:#A79BD4;
  --paper:#1D2726; --panel:#26312F; --ink:#EFF5F3; --ink2:#C6CFCD; --muted:#A3AEAB;
  --rule:#3A4643; --rule2:#2E3936; --sel:#164A49;}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fb);font-optical-sizing:auto;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
::selection{background:var(--sel);color:var(--n900)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--cy500)}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--cy500);outline-offset:3px}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--fd);font-weight:700;letter-spacing:-.028em;line-height:1.06;margin:0;text-wrap:balance}
p{margin:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--cy500);color:#06201F;padding:10px 16px;font-family:var(--fd);font-weight:600;z-index:99}
.skip:focus{left:0}
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
@media (max-width:640px){:root{--gutter:20px}}
.mono{font-family:var(--fm)} .sans{font-family:var(--fd)}
.lede{font-size:19.5px;line-height:1.5}
.prose p{margin-top:14px;max-width:66ch}
.prose p:first-child{margin-top:0}
.eyebrow{font-family:var(--fm);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--cy700);font-weight:500}
.muted{color:var(--muted)}

/* masthead */
.masthead{border-bottom:1px solid var(--n200);position:sticky;top:0;z-index:50;background:var(--paper)}
@supports not (position:sticky){.masthead{position:static}}
[id]{scroll-margin-top:78px}
@media (max-width:980px){[id]{scroll-margin-top:118px}}
@media (max-width:560px){[id]{scroll-margin-top:162px}}
.masthead .shell{display:flex;align-items:center;gap:14px;padding:15px var(--gutter);flex-wrap:wrap}
.brand{display:flex;align-items:flex-end;gap:11px;text-decoration:none;flex:none}
.brand svg{width:32px;height:30px;flex:none;position:relative;top:-4px}
.brand b{font-family:var(--fd);font-weight:800;font-size:16px;letter-spacing:-.026em;line-height:1;display:block;color:var(--ink)}
.brand em{display:block;font-style:normal;font-family:var(--fd);font-size:11.5px;line-height:1.2;letter-spacing:.005em;color:var(--muted);font-weight:500;margin-top:5px}
.nav{margin-left:auto;display:flex;gap:17px;flex-wrap:wrap;list-style:none;margin-block:0;padding:0}
.nav a{font-family:var(--fd);font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--ink)} .nav a[aria-current]{color:var(--cy700)}
.themetog{background:none;border:1px solid var(--rule);color:var(--muted);font-family:var(--fm);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;cursor:pointer;margin-left:10px}
html.no-js .themetog{display:none}
/* below this the nav takes a row of its own rather than stranding the toggle */
@media (max-width:980px){
  .masthead .shell{row-gap:11px}
  .nav{order:3;flex-basis:100%;margin-left:0}
  .themetog{margin-left:auto}
}
.crumbs{font-family:var(--fm);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  padding:12px 0 0}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--ink)}

/* page frames */
.page{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);border-bottom:1px solid var(--n200)}
.rail{border-right:1px solid var(--n200);padding:28px 18px 28px 0;font-family:var(--fm);font-size:10.5px;color:var(--ink2);line-height:1.85}
.rail b{display:block;color:var(--cy700);letter-spacing:.12em;text-transform:uppercase;font-size:9px;font-weight:500;margin-top:15px}
.rail b:first-child{margin-top:0}
.rail a{color:var(--ink2)}
.main{padding:28px 0 34px 32px}
.main h1{font-size:clamp(2.5rem,5.2vw,3.7rem);margin:12px 0 18px;max-width:20ch;letter-spacing:-.034em}
.main .lede{max-width:60ch}
@media (max-width:860px){
  .page{grid-template-columns:1fr}
  .rail{border-right:0;border-bottom:1px solid var(--n200);padding:16px 0;display:flex;flex-wrap:wrap;gap:4px 24px;align-items:baseline}
  .rail b{margin-top:0}
  .main{padding:22px 0 28px}
}
.band{border-bottom:1px solid var(--n200);padding:26px 0 30px}
.band:last-child{border-bottom:0}
.sech{font-size:clamp(1.35rem,2.8vw,1.8rem);margin-bottom:13px}
.sech-sm{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy700);
  font-weight:500;margin:0 0 8px;border-bottom:1px solid var(--n800);padding-bottom:5px}

/* behaviour figure */
figure.beh{margin:0}
figure.beh svg{display:block;width:100%;height:auto;overflow:visible}
/* research marks sit on the same soft sheet of paper as the method marks: a
   translucent panel with its edge feathered outward, so the drawing reads
   over the field while the field stays visible around it */
figure.beh > svg,.area-v > figure > svg{background:color-mix(in srgb,var(--paper) 72%,transparent);border-radius:22px;
  box-shadow:0 0 22px 12px color-mix(in srgb,var(--paper) 72%,transparent)}
figure.beh figcaption{font-family:var(--fm);font-size:10.5px;line-height:1.75;color:var(--muted);margin-top:8px;max-width:70ch}
figure.beh figcaption b{color:var(--ink);font-weight:500}
/* a figure set inside running prose, between paragraphs */
.inlinefig{margin:22px 0 6px;max-width:640px}
.inlinefig details.prov{margin-top:10px}
.behctl{display:flex;gap:0;border:1px solid var(--rule);margin-bottom:9px;flex-wrap:wrap}
.behctl button{flex:1;min-width:0;background:none;border:0;border-left:1px solid var(--rule);padding:6px 8px;cursor:pointer;
  font-family:var(--fm);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.behctl button:first-child{border-left:0}
.behctl button[aria-pressed="true"]{background:var(--cy500);color:#06201F}
html.no-js .behctl{display:none}

/* areas */
.arealist{display:grid;gap:0}
.area-row{display:grid;grid-template-columns:var(--rail) minmax(0,1fr) 340px;border-top:1px solid var(--n200);gap:0}
.area-row:last-child{border-bottom:1px solid var(--n200)}
.area-k{border-right:1px solid var(--n200);padding:22px 18px 22px 0;font-family:var(--fm);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--n400)}
.area-k b{display:block;color:var(--cy700);font-size:15px;letter-spacing:.08em;font-weight:500;line-height:1}
.area-kw{list-style:none;margin:12px 0 0;padding:0;
  font-family:var(--fm);font-size:10px;letter-spacing:.06em;text-transform:none;color:var(--muted);line-height:1.9}
.area-kw li{white-space:nowrap}
.area-t{padding:22px 26px 24px 32px}
.area-t h2{font-size:21px;margin-bottom:4px}
.area-t h2 a{text-decoration:none} .area-t h2 a:hover{text-decoration:underline}
.area-q{font-family:var(--fm);font-size:10px;color:var(--cy700);letter-spacing:.02em;margin-bottom:9px}
.area-t p{font-size:14.5px;color:var(--ink2);max-width:58ch}
.area-v{border-left:1px solid var(--n200);padding:16px 0 16px 20px;display:flex;align-items:center}
.area-v svg{border:0;padding:0}
@media (max-width:980px){
  .area-row{grid-template-columns:1fr}
  .area-k{border-right:0;padding:16px 0 4px;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
  .area-k b{margin-top:0}
  .area-kw{display:flex;flex-wrap:wrap;gap:0 14px;margin:0;padding:0;flex-basis:100%}
  .area-t{padding:4px 0 14px}
  .area-v{border-left:0;padding:0 0 18px}
}

/* project cards */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.pcard{border-top:1px solid var(--n800);padding-top:12px}
.pcard h3{font-size:18px;margin-bottom:4px}
.pcard h3 a{text-decoration:none} .pcard h3 a:hover{text-decoration:underline}
.pcard p{font-size:15px;color:var(--ink2);max-width:54ch;margin-top:5px}
.pmeta{font-family:var(--fm);font-size:9.5px;letter-spacing:.06em;color:var(--muted);margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{font-family:var(--fm);font-size:9px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--rule);padding:1px 6px;color:var(--muted)}
.pill.active{border-color:var(--cy500);color:var(--cy700)}
.pill.superseded,.pill.archived{border-color:var(--ox);color:var(--ox)}
.pill.hold{border-color:var(--amber);color:var(--amber)}
.atag{font-family:var(--fm);font-size:9.5px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.atag:hover{color:var(--ink)}
.atag.primary{color:var(--ink2)}

/* lists */
.rows{border-top:1px solid var(--n800)}
.rows > li,.rows > div{list-style:none;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0;border-bottom:1px solid var(--rule2)}
.rows{margin:0;padding:0}
.rk{padding:11px 18px 12px 0;font-family:var(--fm);font-size:10px;color:var(--muted);letter-spacing:.05em}
.rv{padding:11px 0 12px}
.rv h3{font-size:16.5px;margin-bottom:3px}
.rv p{font-size:15.5px;color:var(--ink2);max-width:68ch}
/* methods on the homepage: two columns, one on a phone */
.mrows{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:0}
.mrows > li{grid-template-columns:1fr;border-top:1px solid var(--n800);border-bottom:0;padding-bottom:10px}
.mrows .rk{padding:16px 0 4px}
.mrows .rk{position:relative}
.mrows .rk svg{display:block;width:100%;max-width:320px;height:auto;position:relative}
/* a soft sheet of paper behind each mark, so its detail reads over the field */
.mrows .rk::before{content:"";position:absolute;left:-10px;top:8px;width:min(100%,320px);height:calc(100% - 12px);
  background:var(--paper);opacity:.72;border-radius:22px;filter:blur(10px);box-sizing:content-box;padding:0 10px}
.mrows .rv{padding-top:4px}
@media (max-width:760px){.mrows{grid-template-columns:1fr}.mrows .rk svg{max-width:280px}}
@media (max-width:720px){.rows > li,.rows > div{grid-template-columns:1fr}.rk{padding-bottom:1px}}
.qlist{list-style:none;margin:0;padding:0}
.qlist li{border-top:1px dotted var(--rule);padding:9px 0;font-size:16px;color:var(--ink2);display:grid;grid-template-columns:30px 1fr;gap:10px}
.qlist li:first-child{border-top:0}
.qlist span:first-child{font-family:var(--fm);font-size:10px;color:var(--cy700);padding-top:5px}
.chips{display:flex;flex-wrap:wrap;gap:5px 7px;margin-top:8px}
.chips span{font-family:var(--fm);font-size:9.5px;padding:2px 7px;border:1px solid var(--rule);color:var(--muted)}
.chips span.on{border-color:var(--cy500);color:var(--cy700)}

/* evidence, provenance, versions */
.ev{border:1px solid var(--rule);margin-top:12px}
.ev-h{display:flex;align-items:baseline;gap:12px;padding:8px 13px;border-bottom:1px solid var(--rule);background:var(--n050);flex-wrap:wrap}
.ev-h b{font-family:var(--fm);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--cy700);font-weight:500}
.ev-h span{font-family:var(--fm);font-size:9.5px;color:var(--muted)}
.ev-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:8px 13px;border-top:1px solid var(--rule2)}
.ev-row:first-of-type{border-top:0}
.ev-row .fam{font-family:var(--fm);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ev-row ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px 7px}
.ev-row li{font-family:var(--fm);font-size:10px;color:var(--ink2);border:1px solid var(--rule);padding:1px 6px}
@media (max-width:700px){.ev-row{grid-template-columns:1fr;gap:4px}}
details.prov{margin-top:10px}
details.prov > summary{font-family:var(--fm);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--cy700);
  cursor:pointer;list-style:none;display:inline-block;border-bottom:1px solid var(--cy500);padding-bottom:1px}
details.prov > summary::-webkit-details-marker{display:none}
details.prov > summary:hover{color:var(--ink);border-color:var(--ink)}
details.prov > div{border:1px solid var(--rule);border-left:3px solid var(--cy500);background:var(--panel);
  padding:11px 14px;margin-top:9px;font-family:var(--fm);font-size:10.5px;line-height:1.85;color:var(--ink2)}
details.prov dl{display:grid;grid-template-columns:112px minmax(0,1fr);gap:2px 12px;margin:0}
details.prov dt{color:var(--n400)} details.prov dd{margin:0}
.vbar{display:flex;border:1px solid var(--rule);flex-wrap:wrap;margin-top:10px}
.vbar > *{flex:1;min-width:130px;border-left:1px solid var(--rule);padding:8px 11px;font-family:var(--fm);font-size:9.5px;color:var(--muted);line-height:1.7}
.vbar > *:first-child{border-left:0}
.vbar b{display:block;font-size:11px;color:var(--ink)}

/* empty states */
.empty{border:1px solid var(--rule);border-left:3px solid var(--n400);padding:14px 16px;max-width:70ch;background:var(--panel);
  font-size:15.5px;color:var(--ink2)}
.empty b{font-family:var(--fd);color:var(--ink)}

/* matrix */
.matrix{width:100%;border-collapse:collapse;font-family:var(--fm);font-size:10.5px}
.matrix th{padding:7px 8px;text-align:center;color:var(--muted);font-weight:500;font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;border-bottom:1px solid var(--n800);vertical-align:bottom}
.matrix th.rowh{text-align:left;min-width:180px}
.matrix td{padding:0;text-align:center;border-bottom:1px solid var(--rule2)}
.matrix td.rowh{text-align:left;padding:9px 10px 9px 0;color:var(--ink);font-size:11px}
.matrix a,.matrix span.cell{display:flex;align-items:center;justify-content:center;height:36px;text-decoration:none}
.matrix a:hover{background:var(--n050)}
.scroller{overflow-x:auto;max-width:100%}
.mmob{display:none} @media(max-width:760px){.mdesk{display:none}.mmob{display:block}}

/* footer */
.foot{border-top:1px solid var(--n800);padding:26px 0 46px}
.foot .shell{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:start}
@media (max-width:760px){.foot .shell{grid-template-columns:1fr}}
.foot nav{display:flex;gap:17px;flex-wrap:wrap}
.foot a{font-family:var(--fd);font-size:13px;font-weight:600;color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .fine{font-family:var(--fm);font-size:10.5px;color:var(--muted);line-height:1.8;margin-top:14px;max-width:74ch}
.foot .fcc{max-width:52ch}
.foot details.prov{margin-top:12px}
.foot details.prov > div{max-width:none}
.foot details.prov a{font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot details.prov i{font-style:normal}
.foot .fccname{font-family:var(--fd);font-size:13px;font-weight:600;color:var(--ink2);letter-spacing:-.01em}
.foot .fccrr{font-family:var(--fm);font-size:10.5px;color:var(--muted);letter-spacing:.06em;margin-top:3px}
.foot .views b{font-weight:400;color:var(--ink2)}
.foot .fcctext{font-family:var(--fm);font-size:10.5px;color:var(--muted);line-height:1.8;margin-top:9px}
.foot .fcctext a{font-family:var(--fm);font-size:10.5px;font-weight:400;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.foot .fcctext a:hover{color:var(--ink)}
@media (max-width:760px){.foot .fcc{max-width:none}}

/* development-only pages */
.devbar{background:var(--ox);color:#fff;font-family:var(--fm);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 0}
.devtable{width:100%;border-collapse:collapse;font-family:var(--fm);font-size:10.5px}
.devtable th{text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--n800);color:var(--muted);
  font-weight:500;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.devtable td{padding:6px 10px 6px 0;border-bottom:1px dotted var(--rule);color:var(--ink2);vertical-align:top}
.st{font-family:var(--fm);font-size:9px;letter-spacing:.09em;text-transform:uppercase;padding:1px 5px;border:1px solid var(--rule);white-space:nowrap}
.st.container{border-style:dotted;color:var(--n400)}
.st.provisional{border-color:var(--amber);color:var(--amber)}
.st.verified,.st.published{border-color:var(--cy500);color:var(--cy700)}
.st.remove{border-color:var(--ox);color:var(--ox)}

@media print{.nav,.themetog,.behctl{display:none}body{background:#fff;color:#000;font-size:11pt}.page{grid-template-columns:1fr}}

/* the intern cohort: names carried by a mark drawn from the name itself,
   rather than four empty portrait frames */
.rlede{font-family:var(--fm);font-size:10px;color:var(--cy700);letter-spacing:.05em;margin-top:5px}
.roster{list-style:none;margin:18px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:24px 24px}
.roster li{display:block;min-width:0}
.roster .rmark{display:block;height:44px}
.roster.plain li{border-top:1px solid var(--n200);padding-top:9px}
.roster.plain .rn{margin-top:0}
.roster.plain .py{display:block;font-family:var(--fm);font-size:9.5px;color:var(--cy700);letter-spacing:.05em;margin-top:3px}
.roster.plain .pr{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:3px}
.roster .rmark svg{display:block;width:100%;max-width:118px;height:44px}
.roster .rn{display:block;font-family:var(--fd);font-weight:700;font-size:15px;
  letter-spacing:-.02em;line-height:1.2;margin-top:10px}
.rnote{font-family:var(--fm);font-size:10.5px;color:var(--muted);line-height:1.8;
  margin-top:18px;max-width:68ch}
@media (max-width:620px){.roster{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:20px 16px}}

/* people */
.people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:26px 24px}
.people li{display:grid;grid-template-rows:auto auto auto auto;gap:0;align-content:start}
.people img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;
  border:1px solid var(--rule);background:var(--n050);display:block}
/* no portrait: the name's own mark stands in its place, on the same footprint
   as a photograph so the grid still aligns */
.people .pmark{display:block;width:100%;aspect-ratio:4/5;overflow:hidden}
.people .pmark svg{display:block;width:100%;height:100%}
.people .pn{font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:-.02em;margin-top:9px;
  line-height:1.2;min-height:2.4em;display:flex;align-items:flex-start}
.people .py{font-family:var(--fm);font-size:9.5px;color:var(--cy700);letter-spacing:.05em;margin-top:2px;
  line-height:1.5;min-height:1.5em;font-variant-numeric:tabular-nums}
.people .pr{font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:4px}
/* the Principal Investigator and the Researchers share one row */
.leadgrid{display:grid;grid-template-columns:223px minmax(0,1fr);gap:0 32px;align-items:start}
.leadgrid .sech{min-height:2.2em}
.leadgrid > div:first-child{border-right:1px solid var(--n200);padding-right:18px}
.leadgrid .people{grid-template-columns:repeat(auto-fill,204px);gap:26px 24px}
.leadgrid > div:first-child .people{grid-template-columns:204px}
@media (max-width:860px){.leadgrid{grid-template-columns:1fr;gap:26px 0}.leadgrid > div:first-child{border-right:0;padding-right:0}}
.people.alum{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:20px 18px}
.people.alum img,.people.alum .pmark{aspect-ratio:1/1}
.people.alum .pn{font-size:13.5px} .people.alum .pr{font-size:12.5px}

/* publications */
.cites{list-style:none;margin:0;padding:0}
.cites li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;border-top:1px solid var(--rule2);padding:11px 0}
.cites li:first-child{border-top:1px solid var(--n800)}
.cites .cy{font-family:var(--fm);font-size:11px;color:var(--cy700);padding-top:4px;letter-spacing:.03em}
.cites .who{display:block;font-size:15.5px;color:var(--ink2)}
.cites .ttl{display:block;font-family:var(--fd);font-weight:600;font-size:16.5px;letter-spacing:-.015em;color:var(--ink);margin:1px 0 2px}
.cites .whr{display:block;font-size:14.5px;color:var(--muted)}
.cites .rel{display:block;font-family:var(--fm);font-size:9.5px;color:var(--cy700);margin-top:5px;letter-spacing:.04em}
@media (max-width:600px){.cites li{grid-template-columns:1fr;gap:2px}}

/* events */
/* Sessions tile inside the content column; the rail keeps the count. Posters are
   contained rather than cropped, so a poster that carries text stays readable. */
.sesswrap{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);margin-top:14px;
  border-top:1px solid var(--n800);padding-top:16px}
.sessn{font-size:10px;color:var(--muted);letter-spacing:.05em;padding-right:18px}
.sessions{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:26px 18px}
.sessions li{display:block;min-width:0}
.sessions .poster{display:grid;place-items:center;height:186px;overflow:hidden;
  border:1px solid var(--rule);background:var(--n050)}
.sessions .poster img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  filter:saturate(.72) contrast(.96)}
.sessions .poster:hover img{filter:none}
.sessions .poster.noimg{border:1px dotted var(--rule)}
.sessions .sd{display:block;font-family:var(--fm);font-size:10px;color:var(--muted);letter-spacing:.05em;margin-top:10px}
.sessions .stt{display:block;font-family:var(--fd);font-weight:600;font-size:14px;line-height:1.25;
  letter-spacing:-.015em;margin-top:5px}
.sessions .ss{display:block;font-size:12.5px;color:var(--ink2);line-height:1.4;margin-top:4px}
.sessions .sa{display:block;font-family:var(--fm);font-size:9px;color:var(--cy700);margin-top:6px}
.sessions .stt a{text-decoration:none} .sessions .stt a:hover{text-decoration:underline}
@media (max-width:620px){
  .sesswrap{grid-template-columns:minmax(0,1fr)}
  .sessn{padding-right:0;margin-bottom:10px}
  .sessions{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:20px 14px}
  .sessions .poster{height:148px}
}

/* theme control */
.themetog{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;color:var(--muted)}
.themetog:hover{color:var(--ink);border-color:var(--ink)}
.themetog svg{display:block}

/* ---------- motion: every behaviour loops, slowly, and stops on request ---------- */
@media (prefers-reduced-motion: no-preference){
  /* 01 attrition — which fragments survive keeps changing */
  /* Loss is an event, not a fade: a fragment brightens for an instant and is
     then gone. The three sets run on one 17s cycle but never leave together. */
  .at-a{animation:atA 17s ease-in-out infinite}
  .at-b{animation:atB 17s ease-in-out infinite}
  .at-c{animation:atC 17s ease-in-out infinite}
  @keyframes atA{0%,20%{opacity:1}24%{opacity:1;filter:brightness(1.55)}
    30%,84%{opacity:0;filter:none}92%{opacity:1}100%{opacity:1}}
  @keyframes atB{0%,17%{opacity:0}26%,52%{opacity:1}58%{opacity:1;filter:brightness(1.5)}
    64%,100%{opacity:0;filter:none}}
  @keyframes atC{0%,50%{opacity:0}60%,80%{opacity:1}86%{opacity:1;filter:brightness(1.5)}
    92%,100%{opacity:0;filter:none}}

  /* 02 topology — only the wrapping dependencies move */
  .wrap{animation:wrapFlow 4.2s linear infinite}
  @keyframes wrapFlow{to{stroke-dashoffset:-18}}

  /* 03 atlas — the bands drift off centre and back, never settling */
  .ring{animation:ringDrift 26s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  .r1{animation-duration:31s}.r2{animation-duration:26s;animation-delay:-4s}
  .r3{animation-duration:23s;animation-delay:-9s}.r4{animation-duration:29s;animation-delay:-14s}
  .r5{animation-duration:37s;animation-delay:-19s}
  @keyframes ringDrift{0%,100%{transform:translate(0,0) scale(1)}
    30%{transform:translate(1.6%,-1.1%) scale(1.018)}
    62%{transform:translate(-1.2%,.9%) scale(.986)}}

  /* 04 inference — four groupings drifting on coprime periods, so the field
     passes through far more configurations than it has keyframes */
  .cl{animation:clDrift 57s ease-in-out infinite}
  .cl1{animation-duration:61s;animation-delay:-13s}
  .cl2{animation-duration:67s;animation-delay:-29s}
  .cl3{animation-duration:71s;animation-delay:-41s}
  @keyframes clDrift{
    0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}
    10%{transform:translate(2.4%,-1.6%) scale(1.05) rotate(2deg)}
    20%{transform:translate(-1.8%,2.2%) scale(.94) rotate(-3deg)}
    30%{transform:translate(3.1%,1.4%) scale(1.09) rotate(4deg)}
    40%{transform:translate(-2.6%,-2.1%) scale(.97) rotate(-1deg)}
    50%{transform:translate(1.2%,3.0%) scale(1.03) rotate(3deg)}
    60%{transform:translate(-3.2%,.6%) scale(.92) rotate(-4deg)}
    70%{transform:translate(2.0%,-2.8%) scale(1.07) rotate(1deg)}
    80%{transform:translate(-1.1%,1.9%) scale(.96) rotate(-2deg)}
    90%{transform:translate(1.7%,-.7%) scale(1.02) rotate(2deg)}}
  .mass{animation:massBreathe 44s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes massBreathe{0%,100%{transform:scale(1);opacity:.26}50%{transform:scale(1.03);opacity:.15}}

}
.eventfig{margin-top:22px;max-width:420px}
.eventfig img{width:100%;height:auto;border:1px solid var(--rule);display:block}
.eventfig .cap{font-family:var(--fm);font-size:10px;color:var(--muted);margin-top:7px;line-height:1.7}
/* the logo-aspect figure is portrait; keep it from dominating a reading column */
figure.beh.portrait svg{max-width:400px;margin-left:auto;margin-right:auto}

@media (prefers-reduced-motion: no-preference){
  /* 02 topology — nodes settle and re-settle, in dependency waves */
  .nd{animation:ndPulse 19s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  .n1{animation-delay:-3s}.n2{animation-delay:-6s}.n3{animation-delay:-9s}
  .n4{animation-delay:-12s}.n5{animation-delay:-15s}
  @keyframes ndPulse{0%,100%{transform:scaleY(1);opacity:1}45%{transform:scaleY(.82);opacity:.72}}

  /* 02b descent — dependency bars extend in sequence, like a load settling */
  .dsc{animation:dscGrow 14s ease-in-out infinite;transform-box:fill-box;transform-origin:left center}
  .d1{animation-delay:-2.4s}.d2{animation-delay:-4.8s}.d3{animation-delay:-7.2s}.d4{animation-delay:-9.6s}
  @keyframes dscGrow{0%,100%{transform:scaleX(1);opacity:.5}50%{transform:scaleX(.93);opacity:.72}}

  /* 03b layers — the measured bar breathes, the unmeasured rows drift */
  .lmeas{animation:lmeasBreathe 12s ease-in-out infinite;transform-box:fill-box;transform-origin:left center}
  @keyframes lmeasBreathe{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.04)}}
  .lunk{animation:lunkDrift 9s linear infinite}
  .u2{animation-duration:11s}.u3{animation-duration:13s}
  @keyframes lunkDrift{to{stroke-dashoffset:-10}}


  /* methods — one small operation per mark */
  .mm{stroke-dasharray:70;animation:mmDraw 9s ease-in-out infinite}
  @keyframes mmDraw{0%,100%{stroke-dashoffset:0}45%{stroke-dashoffset:24}}
  .mmd{animation:mmdFlow 4s linear infinite}
  @keyframes mmdFlow{to{stroke-dashoffset:-16}}
}

/* theme control: three bars from the mark, crossed by its ribbon.
   The gradient runs cyan-to-ink in light and inverts in dark. */
.themetog{width:36px;height:30px}
.themetog svg{display:block;overflow:visible}
.themetog .tgbars{transition:transform .25s ease}
:root[data-theme="dark"] .themetog .tgbars,
html:not([data-theme="light"]) .themetog .tgbars{transform:scaleY(1)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .themetog .tgbars{transform-box:fill-box;transform-origin:center;transform:scaleY(-1)}}
:root[data-theme="dark"] .themetog .tgbars{transform-box:fill-box;transform-origin:center;transform:scaleY(-1)}
:root[data-theme="light"] .themetog .tgbars{transform:none}
.themetog .tgrib{opacity:.85}
.themetog:hover .tgrib{opacity:1}

/* circulation: the served routes carry something; the record breathes */
@media (prefers-reduced-motion: no-preference){
  /* replication and preservation are continuous: the cyan links carry a slow,
     even flow, so a dependency reads as something kept true rather than drawn once */
  .hop{stroke-dasharray:2.5 8;animation:hopFlow 3.6s linear infinite}
  .h1{animation-duration:4.3s}.h2{animation-duration:5.1s}.h3{animation-duration:6.4s}
  @keyframes hopFlow{to{stroke-dashoffset:-42}}
  /* the served routes each carry a packet. Periods are coprime and delays are
     staggered, so something is nearly always in flight and never in unison. */
  .pulse{stroke-dasharray:30 900;animation:pulseRun 5.4s linear infinite}
  .trunk{animation-duration:4.6s}
  .u0{animation-duration:6.1s;animation-delay:-1.1s}
  .u1{animation-duration:5.3s;animation-delay:-2.6s}
  .u2{animation-duration:6.7s;animation-delay:-3.9s}
  .u3{animation-duration:7.3s;animation-delay:-5.2s}
  @keyframes pulseRun{0%{stroke-dashoffset:900;opacity:0}
    8%{opacity:.95}64%{opacity:.95}78%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:0;opacity:0}}
  /* survival: what is left is not still. Long periods, nothing insistent. */
  /* What is left is not still. The containment boundaries march slowly; the
     retrieval routes run at reading speed; and each held fragment is picked up
     in turn — a brief flash, one at a time, never the whole field at once. */
  .reg{animation:regFlow 13s linear infinite}
  @keyframes regFlow{to{stroke-dashoffset:-28}}
  .isl{animation:islBreathe 19s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  .isl.s1{animation-duration:23s;animation-delay:-5s}
  .isl.s2{animation-duration:27s;animation-delay:-11s}
  .isl.s3{animation-duration:31s;animation-delay:-17s}
  @keyframes islBreathe{0%,100%{transform:scale(1);opacity:1}
    46%{transform:scale(1.055);opacity:.82}
    54%{transform:scale(1.05);opacity:1;filter:brightness(1.45)}
    62%{transform:scale(1.03);opacity:.9;filter:none}}
  .ret{animation:retFlow 4.8s linear infinite}
  @keyframes retFlow{to{stroke-dashoffset:-16}}
}

/* the two-column heads collapse before they can push the page sideways */
@media (max-width:760px){
  .hero,.areagrid{grid-template-columns:minmax(0,1fr)!important;gap:24px!important}
  .hero > .rail{border-left:0!important;padding-left:0!important}
}
/* attrition's displacement filter paints past its own box; keep it in the column */
figure.beh.portrait{overflow:hidden}

/* a dependency is a thing that has to keep being true */
@media (prefers-reduced-motion: no-preference){
  .dep{animation:depFlow 5.5s linear infinite}
  @keyframes depFlow{to{stroke-dashoffset:-26}}
}

/* an event that leads with its artwork */
.evlead{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0;align-items:start;margin-top:4px}
.evlead .ek{padding-right:18px;display:block}
.evlead .evshot{display:block;margin-top:9px}
.ekind{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.05em;color:var(--ink2)}
.ewhen{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.05em;color:var(--muted);margin-top:2px}
.evlead .evshot img{max-width:100%;width:auto;max-height:152px;height:auto;display:block;border:1px solid var(--rule)}
.parts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.parts li{display:grid;gap:1px;border-left:2px solid var(--cy500);padding-left:11px}
.parts b{font-family:var(--fd);font-size:14.5px;font-weight:600}
.parts span{font-family:var(--fm);font-size:10px;letter-spacing:.05em;color:var(--muted)}
ul.plain{list-style:none;margin:0;padding:0;display:grid;gap:5px}
ul.plain li{font-size:15px;color:var(--ink2);border:0;padding:0}
@media (max-width:620px){.evlead{grid-template-columns:minmax(0,1fr);gap:14px}.evlead .ek{padding-right:0;max-width:220px}}

/* history, newest first: the year is the rail, the rule is the run of time */
.tline{list-style:none;margin:22px 0 18px;padding:0}
.tline li{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0;position:relative}
.tline li > .tv{border-left:1px solid var(--rule);padding:0 0 22px 26px;position:relative}
.tline li:last-child > .tv{border-left-color:transparent}
.tline li > .tv::before{content:"";position:absolute;left:-4.5px;top:6px;width:8px;height:14px;background:var(--cy500)}
.tline li:first-child > .tv::before{background:var(--logo-ink);height:18px}
.tline .ty{font-family:var(--fd);font-weight:700;font-size:20px;letter-spacing:-.03em;color:var(--ink);
  padding-right:18px;font-variant-numeric:tabular-nums}
.tline .tw{display:block;font-family:var(--fm);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tline .tt{display:block;font-family:var(--fd);font-weight:600;font-size:16.5px;margin-top:3px}
.tline .tt a{text-decoration:none} .tline .tt a:hover{text-decoration:underline}
.tline .tx{display:block;font-size:15.5px;color:var(--ink2);max-width:62ch;margin-top:4px}
@media (max-width:720px){
  .tline li{grid-template-columns:1fr}
  .tline li > .tv{border-left:0;padding:0 0 20px}
  .tline li > .tv::before{display:none}
  .tline .ty{font-size:16px;padding:0 0 2px}
}

/* dev: texture options */
.txgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin:14px 0 30px}
@media (max-width:900px){.txgrid{grid-template-columns:1fr}}
.txcard{margin:0;position:relative;border:1px solid var(--n200);background:var(--paper);overflow:hidden}
.txbg{position:absolute;inset:0;pointer-events:none}
.txbg .txsvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.txfg{position:relative;padding:0 0 14px}
.txmast{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--n200)}
.txbrand{display:flex;align-items:flex-end;gap:7px}.txbrand svg{width:20px;height:19px;position:relative;top:-2px}
.txbrand b{display:block;font-family:var(--fd);font-weight:800;font-size:10px;line-height:1;letter-spacing:-.02em}
.txbrand em{display:block;font-style:normal;font-family:var(--fd);font-size:7.5px;line-height:1.2;color:var(--muted);margin-top:3px}
.txnav{margin-left:auto;display:flex;gap:9px;font-family:var(--fd);font-size:8.5px;font-weight:600;color:var(--muted)}
.txhero{padding:18px 16px 10px;max-width:60%}
.txhero .eyebrow{font-size:9px}
.txhero h2{font-size:22px;margin:6px 0 8px;letter-spacing:-.03em}
.txhero p:not(.eyebrow){font-size:10.5px;line-height:1.5;color:var(--ink2)}
.txrow{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--n200);margin:8px 16px 0;padding-top:9px}
.txrow .txk{font-family:var(--fm);font-size:9px;color:var(--cy700);padding-top:2px}
.txrow b{display:block;font-family:var(--fd);font-size:11px;letter-spacing:-.02em}
.txrow i{display:block;font-style:normal;font-family:var(--fm);font-size:7.5px;color:var(--cy700);margin-top:2px}
.txcard figcaption{position:relative;font-family:var(--fm);font-size:10px;color:var(--muted);line-height:1.6;padding:8px 16px 9px;border-top:1px solid var(--n200);background:var(--paper)}
.txcard figcaption b{color:var(--ink);font-weight:500}

/* dev: motion textures. All CSS, so the reduced-motion rule above switches them off. */
.bgfield .mv-drift,.txsvg .mv-drift{animation:tx-drift var(--d,60s) ease-in-out var(--dl,0s) infinite alternate;transform-box:fill-box;transform-origin:center}
.bgfield [style*="transform-origin"].mv-drift,.txsvg [style*="transform-origin"].mv-drift{transform-box:view-box}
.bgfield .mv-wander,.txsvg .mv-wander{animation:tx-wander var(--d,50s) ease-in-out var(--dl,0s) infinite;transform-box:fill-box;transform-origin:center}
.bgfield .mv-pulse,.txsvg .mv-pulse{animation:tx-pulse var(--d,20s) ease-in-out var(--dl,0s) infinite}
.bgfield .mv-flow,.txsvg .mv-flow{animation:tx-flow var(--d,40s) linear var(--dl,0s) infinite}
.bgfield .mv-expand,.txsvg .mv-expand{animation:tx-expand var(--d,36s) ease-out var(--dl,0s) infinite;transform-box:view-box}
.bgfield .mv-fall,.txsvg .mv-fall{animation:tx-fall var(--d,90s) linear var(--dl,0s) infinite}
.bgfield .mv-spin,.txsvg .mv-spin{animation:tx-spin var(--d,420s) linear infinite;transform-box:view-box}
@keyframes tx-drift{to{transform:translate(var(--dx,20px),var(--dy,-12px)) rotate(var(--dr,2deg))}}
@keyframes tx-wander{0%,20%{transform:none;opacity:.06}45%,60%{transform:translate(var(--dx),var(--dy)) rotate(var(--dr));opacity:.1}85%,100%{transform:none;opacity:.06}}
@keyframes tx-pulse{0%,100%{opacity:var(--o0,.04)}50%{opacity:var(--o1,.12)}}
@keyframes tx-flow{to{stroke-dashoffset:-400}}
@keyframes tx-expand{0%{transform:scale(.15);opacity:0}8%{opacity:.35}100%{transform:scale(1.6);opacity:0}}
@keyframes tx-fall{0%{transform:translate(0,0);opacity:0}6%{opacity:1}94%{opacity:1}100%{transform:translate(var(--dx,0px),980px);opacity:0}}
@keyframes tx-spin{to{transform:rotate(360deg)}}
.bgfield .mv-sweep,.txsvg .mv-sweep{animation:tx-sweep var(--d,240s) linear infinite}
.bgfield .mv-flip,.txsvg .mv-flip{animation:tx-flip var(--d,12s) ease-in-out var(--dl,0s) infinite;transform-box:fill-box;transform-origin:center}
.bgfield .mv-slowspin,.txsvg .mv-slowspin{animation:tx-spin var(--d,900s) linear infinite;transform-box:fill-box;transform-origin:center}
.bgfield .mv-expire,.txsvg .mv-expire{animation:tx-expire var(--d,50s) linear var(--dl,0s) infinite}
.bgfield .mv-decay,.txsvg .mv-decay{animation:tx-decay var(--d,40s) ease-in-out var(--dl,0s) infinite}
@keyframes tx-sweep{to{transform:translateX(var(--sw,2100px))}}
@keyframes tx-flip{0%,40%{transform:rotate(0)}50%,90%{transform:rotate(90deg)}100%{transform:rotate(0)}}
@keyframes tx-expire{0%{opacity:0}5%{opacity:.14}70%{opacity:.12}85%{opacity:0}100%{opacity:0}}
@keyframes tx-decay{0%,60%{opacity:.12}75%{opacity:0}90%{opacity:0}100%{opacity:.12}}
.bgfield .mv-wander2,.txsvg .mv-wander2{animation:tx-wander2 var(--d,120s) ease-in-out var(--dl,0s) infinite;transform-box:fill-box;transform-origin:center}
@keyframes tx-wander2{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(var(--x1),var(--y1)) rotate(var(--r1))}50%{transform:translate(var(--x2),var(--y2)) rotate(var(--r2))}75%{transform:translate(var(--x3),var(--y3)) rotate(var(--r3))}}

/* the ground: a resolved field drawn by field.js on every view, behind everything */
.bgfield{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgfield svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* a translucent sheet of paper over the whole field, so it is faint everywhere and text sits on calm ground */
.bgfield::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:.62}
@media print{.bgfield{display:none}}

/* dev: three treatments of the furniture over the field */
.sys{border:1px solid var(--n200);padding:0 0 26px;margin-bottom:40px;position:relative}
.sys-mast{display:flex;align-items:center;gap:14px;padding:12px 26px;border-bottom:1px solid var(--n200)}
.sys-mast .brand{display:flex;align-items:flex-end;gap:11px}.sys-mast .nav{margin-left:auto}
.sys .sys-hero{padding:30px 26px 26px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:start}
.sys .sys-hero h1{font-size:clamp(2rem,4vw,2.8rem);margin:10px 0 14px;max-width:18ch}
.sys .sys-hero .rail{border-right:0;border-left:1px solid var(--n200);padding:4px 0 4px 20px}
.sys .area-row{margin:0 26px}.sys .band{margin:0 26px;border-bottom:0}
@media (max-width:860px){.sys .sys-hero{grid-template-columns:1fr}}
/* A · minimal: panels behind text, rules to ink, masthead translucent */
.sys-a .sys-mast{background:color-mix(in srgb,var(--paper) 85%,transparent);backdrop-filter:blur(6px)}
.sys-a .sys-hero > div:first-child,.sys-a .area-t,.sys-a .pcard{background:color-mix(in srgb,var(--paper) 74%,transparent);backdrop-filter:blur(8px);padding:18px 20px;margin:-18px -20px}
.sys-a .area-t{margin:4px 6px 4px 12px;padding:18px 20px}
.sys-a .pcard{margin:0;padding:14px 18px;border-top:2px solid color-mix(in srgb,var(--logo-ink) 40%,transparent)}
.sys-a .area-row,.sys-a .area-row:last-child,.sys-a .area-k,.sys-a .area-v,.sys-a .sys-mast,.sys-a .sys-hero .rail{border-color:color-mix(in srgb,var(--logo-ink) 30%,transparent)}
/* B · rebuilt: rules mostly gone, filled chips, heavier heads, mono to ink */
.sys-b .sys-mast{border-bottom:0;background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(6px)}
.sys-b .area-row,.sys-b .area-row:last-child{border-top:0;border-bottom:0}
.sys-b .area-v{border-left:0}.sys-b .area-k{border-right:1px solid color-mix(in srgb,var(--logo-ink) 35%,transparent)}
.sys-b .sys-hero .rail{border-left:1px solid color-mix(in srgb,var(--logo-ink) 35%,transparent)}
.sys-b h1,.sys-b h2,.sys-b h3{font-weight:800;letter-spacing:-.04em}
.sys-b .lede,.sys-b .area-t p,.sys-b .pcard p{line-height:1.7}
.sys-b .eyebrow,.sys-b .area-q,.sys-b .rail b,.sys-b .area-k b,.sys-b .area-kw{color:var(--ink)}
.sys-b .sys-hero > div:first-child,.sys-b .area-t,.sys-b .pcard{background:color-mix(in srgb,var(--paper) 72%,transparent);backdrop-filter:blur(8px);padding:18px 20px;margin:-18px -20px}
.sys-b .area-t{margin:4px 6px 4px 12px}.sys-b .pcard{margin:0;padding:14px 18px;border-top:0}
.sys-b .chips span,.sys-b .pill{border:0;background:var(--cy100);color:var(--ink);padding:3px 9px}
.sys-b .atag{border:0;background:var(--n100);padding:2px 7px}
/* C · warmer: as B, with the field's tones let into the furniture */
.sys-c .sys-mast{border-bottom:0;background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(6px)}
.sys-c .area-row,.sys-c .area-row:last-child{border:0}.sys-c .area-v,.sys-c .area-k,.sys-c .sys-hero .rail{border:0}
.sys-c h1,.sys-c h2,.sys-c h3{font-weight:800;letter-spacing:-.04em}
.sys-c .lede,.sys-c .area-t p,.sys-c .pcard p{line-height:1.7}
.sys-c .sys-hero > div:first-child{background:color-mix(in srgb,var(--paper) 72%,transparent);backdrop-filter:blur(8px);padding:18px 20px;margin:-18px -20px}
.sys-c .area-t{background:color-mix(in srgb,var(--paper) 72%,var(--violet) 8%);backdrop-filter:blur(8px);padding:18px 20px;margin:4px 6px 4px 12px}
.sys-c .pcard{background:color-mix(in srgb,var(--paper) 72%,var(--amber) 8%);backdrop-filter:blur(8px);padding:14px 18px;border-top:0}
.sys-c .pcard + .pcard{background:color-mix(in srgb,var(--paper) 72%,var(--cy500) 10%)}
.sys-c .area-k b{color:var(--violet);font-size:18px}.sys-c .area-kw{color:var(--ink2)}
.sys-c .eyebrow{color:var(--amber)}.sys-c .area-q{color:var(--violet)}
.sys-c .chips span{border:0;padding:3px 9px;color:var(--ink)}
.sys-c .chips span:nth-child(4n+1){background:var(--cy100)}.sys-c .chips span:nth-child(4n+2){background:color-mix(in srgb,var(--violet) 18%,var(--paper))}
.sys-c .chips span:nth-child(4n+3){background:color-mix(in srgb,var(--amber) 22%,var(--paper))}.sys-c .chips span:nth-child(4n){background:var(--n100)}
.sys-c .pill{border:0;background:color-mix(in srgb,var(--amber) 25%,var(--paper));color:var(--ink)}.sys-c .atag{border:0;background:var(--n100);padding:2px 7px}

/* A · elaborations. Halos are soft clearings in the field: blurred paper behind
   a block, so it has no edge. The veil is one gradient over the whole sample. */
.sys{overflow:hidden}
.sys-veil{position:absolute;inset:0;pointer-events:none;z-index:0;display:none}
.sys .sys-mast,.sys .sys-hero,.sys .area-row,.sys .band{position:relative;z-index:1}
.halo{position:relative}
.halo::before{content:"";position:absolute;inset:-18px -26px;background:var(--paper);opacity:0;filter:blur(22px);border-radius:60px;z-index:-1;pointer-events:none}
/* A1 · one feathered panel behind the reading column */
.sys-a1 .sys-hero > div:first-child{position:relative}
.sys-a1 .sys-hero > div:first-child::before{content:"";position:absolute;inset:-30px -40px -26px -40px;background:var(--paper);opacity:.6;filter:blur(26px);border-radius:80px;z-index:-1}
.sys-a1 .sys-mast{background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(6px)}
/* A2 · clearings under every text block, graded by importance */
.sys-a2 .halo-head::before{opacity:.8}
.sys-a2 .halo-body::before{opacity:.55}
.sys-a2 .pcard{position:relative}.sys-a2 .pcard::before{content:"";position:absolute;inset:-12px -20px;background:var(--paper);opacity:.45;filter:blur(20px);border-radius:50px;z-index:-1}
.sys-a2 .sys-mast{background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(6px)}
/* A3 · a veil across the reading measure, full field at the margins */
.sys-a3 .sys-veil{display:block;background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--paper) 82%,transparent) 14%,color-mix(in srgb,var(--paper) 82%,transparent) 62%,transparent 84%)}
.sys-a3 .sys-mast{background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(6px)}
/* A4 · clearings only under the main points */
.sys-a4 .halo-head::before{opacity:.85}
.sys-a4 .sys-mast{background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(6px)}
/* A5 · paper page, field in windows */
.sys-a5 .sys-veil{display:block;background:var(--paper);opacity:.9}
.sys-a5 .sys-hero{position:relative}
.sys-a5 .sys-hero .rail,.sys-a5 .area-v{position:relative}
.sys-a5 .sys-hero .rail::before,.sys-a5 .area-v::before{content:"";position:absolute;inset:-14px -20px;background:transparent;z-index:-1}
.sys-a5 .sys-veil{-webkit-mask:linear-gradient(90deg,#000 0,#000 66%,transparent 70%,transparent 100%);mask:linear-gradient(90deg,#000 0,#000 66%,transparent 70%,transparent 100%)}
.sys-a5 .sys-mast{background:var(--paper)}

/* A8 / A9 · clearings whose edges are sprayed, not blurred */
.sys-a8 .halo::before,.sys-a9 .halo::before,.sys-a8 .pcard::before,.sys-a9 .pcard::before,.sys-a8 .area-v::before,.sys-a9 .area-v::before{
  content:"";position:absolute;background:var(--paper);border-radius:34px;z-index:-1;pointer-events:none;filter:none}
.sys-a8 .pcard,.sys-a9 .pcard,.sys-a8 .area-v,.sys-a9 .area-v{position:relative}
.sys-a8 .halo::before,.sys-a8 .pcard::before,.sys-a8 .area-v::before{inset:-4px -8px;border-radius:18px;filter:url(#sprayFine)}
.sys-a8 .area-v::before{inset:2px 0}
.sys-a9 .halo::before,.sys-a9 .pcard::before,.sys-a9 .area-v::before{inset:-18px -28px;filter:url(#sprayCoarse)}
.sys-a8 .halo-head::before,.sys-a9 .halo-head::before{opacity:.82}
.sys-a8 .halo-body::before,.sys-a9 .halo-body::before{opacity:.6}
.sys-a8 .pcard::before,.sys-a9 .pcard::before,.sys-a8 .area-v::before,.sys-a9 .area-v::before{opacity:.5}
.sys-a8 .sys-mast,.sys-a9 .sys-mast{background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(6px)}