/* Presentation layer over the imported artifact: palette, type, the light and dark
   grounds, and motion. The mechanism data and drawing code live in index.html. */

/* ---------- tokens ---------- */
:root{
 --navy:#20282D;--void:#192126;--tech:#20282D;--tech-surf:#283238;
 --photo:#192126;--photo-surf:#283238;--paper:#20282D;--card:#283238;
 --cool:#A5C9DB;--amber:#C8B68F;--orange:#B16C40;--sand:#C8B68F;
 --text:#EDF0EF;--muted:#A9B6BC;--line:rgba(197,213,220,.16);--line-hi:rgba(197,213,220,.30);
 --accent:#C8B68F;
 --lt:#F3F4F0;--lt-ink:#22313A;--lt-edge:#D5DCDA;--teal:#2F5F74;
 --f-disp:'Helvetica Neue',Helvetica,Arial,sans-serif;
 --f-body:'Helvetica Neue',Helvetica,Arial,sans-serif;
 --f-label:'IBM Plex Mono',ui-monospace,monospace;
 --pad:clamp(24px,5vw,80px);
 --ease:cubic-bezier(.2,.7,.2,1);
}
body{font-size:17px;font-weight:400;line-height:1.8;background:var(--navy)}

/* ---------- type ---------- */
h1{font-size:clamp(54px,7.6vw,108px);font-weight:500;letter-spacing:-.055em;line-height:1.08}
h2{font-size:clamp(32px,3.8vw,52px);font-weight:500;letter-spacing:-.035em;line-height:1.12}
h2.sm{font-size:clamp(26px,2.8vw,36px);font-weight:500;line-height:1.2}
h3{font-weight:500}
h3.sub{font-family:var(--f-disp);font-size:clamp(22px,2.1vw,28px);font-weight:500;letter-spacing:-.022em;
 line-height:1.2;color:var(--text);margin:clamp(44px,5vw,68px) 0 18px;max-width:30ch}
.label,.mono{font-size:11px;letter-spacing:.09em;line-height:1.8}
.lede{font-size:clamp(18px,1.7vw,22px);line-height:1.65;font-weight:400;color:#D5DEE1}
.body{font-weight:400;color:#BAC6CC;line-height:1.8}
.body b{font-weight:500;color:var(--text)}

/* ---------- sections and the two grounds ---------- */
.sec{padding-block:clamp(56px,7vw,100px)}
.hd{gap:18px;margin-bottom:28px}.stack{gap:22px}
#sky{display:none}
html{scroll-padding-top:72px}section.sec,.hero{scroll-margin-top:0}
#pageMain [data-ground=light]{background:var(--lt);color:var(--lt-ink);
 --text:#22313A;--muted:#56676F;--cool:#2F5F74;--amber:#2F5F74;--accent:#2F5F74;
 --line:#D3DAD8;--line-hi:#B7C4C7;--void:var(--lt)}
[data-ground=light] .lede{color:#3E515B}
[data-ground=light] .body{color:#4E616A}
[data-ground=light] .track.lead li::before{box-shadow:none}
[data-ground=light] .track.lead::before{background:#AEBFC5}
[data-ground=light] .row .t small,[data-ground=light] .track .ds{font-weight:400}
#pageMain .hero+.sec::before{content:"";position:absolute;top:0;left:0;right:0;margin:0 auto;
 width:min(1180px,calc(100% - 2 * var(--pad)));height:1px;background:var(--line)}
/* light gives way to dark gradually: an eased ramp, so there is no hard edge and no
   visible band at either end */
.dusk{position:relative;z-index:1;height:clamp(140px,22vh,220px);
 background:linear-gradient(180deg,#F3F4F0 0%,#EDEEEB 10%,#DDDFDC 20%,#C5C8C6 30%,#A9ACAB 40%,
  #8A8E8F 50%,#6A7072 60%,#4E5457 70%,#363D41 80%,#262E33 90%,#20282D 100%)}
#about{padding-bottom:clamp(48px,6vw,80px)}
#education{padding-top:clamp(44px,5vw,72px)}

/* ---------- nav: takes the colour of the ground beneath it ---------- */
nav{height:72px;background:rgba(243,244,240,.9);border-bottom:1px solid var(--lt-edge);color:var(--lt-ink);
 transition:background-color .5s var(--ease),border-color .5s var(--ease),
  opacity .7s ease .15s,transform .7s cubic-bezier(.16,.8,.3,1) .15s}
nav .brand .wm{font-weight:500;color:var(--lt-ink);transition:color .5s var(--ease)}
nav .links a{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:14px;color:#56676F;
 transition:color .5s var(--ease),box-shadow .3s var(--ease)}
nav .links a:hover,nav .links a.on{color:#1F4E63}
nav .links a.on{box-shadow:0 1px 0 currentColor}
nav.dark{background:rgba(32,40,45,.86);border-bottom-color:rgba(197,213,220,.12)}
nav.dark .brand .wm{color:#EDF0EF}
nav.dark .links a{color:#A9B6BC}
nav.dark .links a:hover,nav.dark .links a.on{color:#EDF0EF}
#menuToggle{display:none;background:none;border:1px solid #B8C6CA;border-radius:3px;padding:10px 14px;
 font:14px var(--f-body);color:var(--lt-ink);transition:color .5s var(--ease),border-color .5s var(--ease)}
nav.dark #menuToggle{border-color:rgba(197,213,220,.3);color:#EDF0EF}

/* ---------- hero ---------- */
.hero{min-height:clamp(590px,85svh,800px);padding-block:132px 100px}
.hero .label{color:#3F6B7F}
.hero .lede{margin-top:18px;max-width:36ch;color:#41545E}
.hero .mono{color:#56676F}.hero .facts{margin-top:28px;gap:12px 24px}
.hero .veil{display:none}.hero .boom{top:48%;right:3%;width:min(43vw,590px)}
.hero .boom svg [stroke="#7DD3FC"]{stroke:#386980;stroke-opacity:.65}
.hero .boom svg [stroke="#E8C28A"]{stroke:#9D6038}
.hero .boom svg polygon{fill:rgba(56,105,128,.08)}
.hero .boom svg circle{fill:var(--lt)}
.hero .boom svg>g{opacity:.85}
h1 .mark{width:.31em;height:.31em;margin-left:.16em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-actions a{padding:10px 18px;border:1px solid #B8C6CA;border-radius:3px;color:#244F63;font-size:14px;
 transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.hero-actions a:first-child{background:var(--teal);border-color:var(--teal);color:#fff}
.hero-actions a:hover{background:#E3E9E8;border-color:#9FB2B7}
.hero-actions a:first-child:hover{background:#244C60;border-color:#244C60}

/* ---------- key figures ---------- */
.stats{list-style:none;margin:clamp(30px,3.6vw,46px) 0 0;padding:0;display:grid;max-width:920px;
 grid-template-columns:repeat(auto-fit,minmax(min(150px,40%),1fr));gap:26px clamp(16px,2.6vw,36px)}
.stats li{position:relative;padding-top:16px;border-top:1px solid var(--line)}
.stats li::before{content:"";position:absolute;left:0;top:-1px;width:26px;height:2px;background:var(--accent)}
.stats b{display:block;font-family:var(--f-disp);font-weight:300;font-size:clamp(40px,4.4vw,58px);
 line-height:1;letter-spacing:-.045em;color:var(--text);white-space:nowrap;
 font-variant-numeric:lining-nums tabular-nums}
.stats b small{font-size:.4em;font-weight:400;letter-spacing:0;color:var(--muted)}
.stats span{display:block;margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted);max-width:24ch}

/* ---------- background ---------- */
.paths{margin-top:4px;align-items:start}
.track .yr{font-size:11px;letter-spacing:.06em}
.track.lead .yr{font-size:12px}
.track h4{margin:0 0 14px;font-family:var(--f-label);font-size:11px;font-weight:500;letter-spacing:.09em;
 text-transform:uppercase;color:var(--muted)}
.track.lead h4{color:var(--amber)}
#about .track.lead .ti{font-weight:500;line-height:1.35}
.row{padding-block:22px;gap:8px 20px}.row .n,.row .m{font-size:10px;letter-spacing:.05em}
.row .t{font-size:17px}.row .t small{font-size:14px;line-height:1.65;margin-top:7px}

.kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px clamp(16px,2.6vw,36px);
 max-width:920px;border-top:1px solid var(--line);padding-top:16px}
.kit p{margin:4px 0 0;font-size:16px;line-height:1.5;color:var(--text)}

/* ---------- research ---------- */
/* Small films are editorial figures. Each plays once on entering view, then rests. */
.study-row{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(24px,3vw,48px)}
.study-row>p{margin:0}
.motion-study{margin:0;min-width:0}
.motion-study video{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:3px}
.light-study video{background:#e9ecea}
.dark-study video{background:#1c2830}
.motion-study figcaption{display:flex;align-items:center;justify-content:space-between;gap:14px;
 padding:14px 0 4px;border-bottom:1px solid var(--line);padding-bottom:14px;font-size:13px;line-height:1.5;color:var(--text)}
.motion-study small{display:block;color:var(--muted);font-size:10px;letter-spacing:.035em;margin-top:3px}
.motion-study button{flex-shrink:0;padding:8px 10px;background:transparent;border:1px solid var(--line-hi);
 border-radius:2px;color:var(--text);font:11px var(--f-body);cursor:pointer;min-width:78px;min-height:36px}
.motion-study button:hover{border-color:currentColor}
.research-study{margin:22px 0 32px}
@media(max-width:760px){
 .study-row{grid-template-columns:1fr;gap:24px}
 .motion-study{width:100%;max-width:520px;justify-self:center}
 .motion-study button{min-height:44px}
 .research-study{margin-top:18px}
}
.research-outlook{max-width:68ch;margin-top:clamp(44px,5vw,68px);padding:24px 0 4px 24px;
 border-top:1px solid var(--line);border-left:2px solid var(--amber)}
.research-outlook .label{color:var(--amber);margin:0 0 12px}
.research-outlook h3{font-family:var(--f-disp);font-size:clamp(24px,2.5vw,32px);font-weight:400;
 letter-spacing:-.025em;line-height:1.25;margin:0 0 18px}
.research-outlook .body{margin:0 0 16px}
.research-outlook a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-hi);text-underline-offset:4px}
.figttl{flex-wrap:wrap;padding-bottom:12px;gap:12px}
.figttl .label{color:var(--cool);margin:0}
.figpair{gap:32px}
.figpair figure{margin:0}
.figpair figcaption{margin-top:8px}
.figtext{margin-top:18px;max-width:66ch}
.narrow-only{display:none}
.asm .stagebox{border-radius:3px;background:rgba(165,201,219,.035)}
.asm .tally .eq{font-size:12px;letter-spacing:.09em}
.asm .tally .big{font-weight:300;letter-spacing:-.04em;font-size:clamp(34px,4vw,52px)}
.asm .tally .cap{font-size:11px;letter-spacing:.09em}
.papers{margin-top:22px}
.papers .row .t a{color:var(--text);border-bottom:1px solid var(--line-hi);transition:color .2s,border-color .2s}
.papers .row .t a:hover{color:var(--amber);border-color:currentColor}
.papers .m.pub{color:var(--amber)}

/* ---------- projects and photography ---------- */
.work{gap:18px;margin-top:clamp(30px,3.4vw,44px)}
.grp-h{margin:4px 0 -2px;font-family:var(--f-label);font-size:11px;font-weight:500;letter-spacing:.09em;
 text-transform:uppercase;color:var(--muted)}
.work .cards+.grp-h{margin-top:26px}
.card{border-radius:4px}
.card p{font-weight:400;line-height:1.7}.card .h span{font-size:10px;letter-spacing:.04em}
.card .more{font-size:11px;letter-spacing:.09em}
.ppage .lead,.ppage .gal figure,.ph{border-radius:3px}
.cbtn,.tags i{border-radius:3px}.tags i{font-size:10px;letter-spacing:.05em}
.cbtn{font-size:12px;letter-spacing:.09em}
#photography{margin-top:clamp(64px,7vw,96px);scroll-margin-top:24px}
#photography .label{color:var(--sand)}
#projects .stats{margin-bottom:clamp(28px,3.2vw,40px)}
.gallink{margin-top:18px}
.tab{font-size:11px;letter-spacing:.09em}
.back{font-size:11px;letter-spacing:.09em;transition:color .2s}
.gnav{margin-top:clamp(34px,4vw,52px)}
.gnav a{font-size:11px;letter-spacing:.09em}

/* ---------- photographs: the best frames as prints in wide mats ---------- */
:root{--mat:#E9E8E3}
.ph.mat{background:var(--mat);border-radius:1px;
 box-shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -18px rgba(0,0,0,.75);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ph.mat img{object-fit:contain;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
@media(hover:hover){
 .ph.mat:hover img{transform:none}
 .ph.mat:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(0,0,0,.3),0 26px 50px -20px rgba(0,0,0,.8)}
}
.print{margin:0;flex:none}
.print figcaption{margin-top:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
@media(max-width:639px){.print figcaption{margin-top:9px;font-size:9px;letter-spacing:.06em;white-space:nowrap}}
.prints .jrow,.glead .jrow{justify-content:center}
.gdesc{margin:-4px 0 clamp(20px,2.6vw,30px);font-size:15px;color:var(--muted)}
.glead{margin-bottom:clamp(26px,3.4vw,44px)}
#lightbox .cap{flex-wrap:wrap;row-gap:3px}
#lightbox .cap .x{flex-basis:100%;font-size:10.5px;letter-spacing:.06em;text-transform:none;color:var(--muted);opacity:.8}

/* sub-pages: the gallery keeps the dark ground; project and paper pages take the light one */
#pageGallery .sec,#pageProject .sec,#pagePaper .sec{background:var(--navy);min-height:100vh;
 padding-top:clamp(112px,11vw,148px)}

/* ---------- project and paper pages: the light version of the palette ----------
   The warm white of the photography gallery, the site's charcoal as ink, and the sand
   accent deepened to bronze so labels and links stay readable. Everything below reads
   these tokens, so the pages restyle without their own rules. */
:root{--paper-lt:#F7F6F2}
#pageProject .sec,#pagePaper .sec{background:var(--paper-lt);color:#20282D;
 --text:#20282D;--muted:#5E696E;--navy:var(--paper-lt);--void:var(--paper-lt);
 --line:rgba(32,40,45,.14);--line-hi:rgba(32,40,45,.34);
 --amber:#8A5A2E;--sand:#8A5A2E;--accent:#B16C40;--cool:#2F5F74}
.ppage .lede{color:#333D42}
.ppage .body{color:#465157}
.ppage h2[tabindex="-1"]:focus{outline:none}
.ppage .pfig{background:#fff}
.ppage .pfig .credit{opacity:1}
/* a poster stands on a plain pale stage with a soft shadow; the blurred backdrop the dark
   pages used turns muddy on a light ground */
.ppage .lead,.ppage .gal figure{background:#ECEAE4}
.ppage .lead .bg{display:none}
.ppage .lead.tall .fg{filter:drop-shadow(0 16px 30px rgba(32,40,45,.26))}
body[data-page=project],body[data-page=paper]{background:var(--paper-lt)}
body[data-page=project] nav:not(.dark),body[data-page=paper] nav:not(.dark){
 background:rgba(247,246,242,.92);border-bottom-color:rgba(32,40,45,.12)}
body[data-page=project] footer,body[data-page=paper] footer{background:var(--paper-lt);
 border-top-color:rgba(32,40,45,.14)}
body[data-page=project] footer .mono,body[data-page=paper] footer .mono{color:#5E696E}
@media(max-width:859px){
 body[data-page=project] nav.menu-open:not(.dark) .links,
 body[data-page=paper] nav.menu-open:not(.dark) .links{background:var(--paper-lt)}
}
.ppage .lede{max-width:64ch}
.ppage .stats{max-width:900px}
.ppage .stats:has(>li:only-child){max-width:280px}   /* one figure on its own keeps a short rule */
.ppage .tags{margin-top:clamp(24px,2.8vw,32px)}
.ppage .body{max-width:68ch;margin:0 0 12px}
.ppage h3.sub{margin:clamp(38px,4.4vw,56px) 0 12px}
.nextp{display:flex;flex-direction:column;gap:6px;margin-top:clamp(52px,6vw,84px);padding:24px 0 8px;
 border:0;border-top:1px solid var(--line);color:var(--text)}
.nextp:hover{border-color:var(--line)}
.nextp b{font-family:var(--f-disp);font-size:clamp(22px,2.4vw,30px);font-weight:500;letter-spacing:-.02em;
 line-height:1.25;transition:color .25s var(--ease)}
.nextp i{display:inline-block;font-style:normal;transition:transform .3s var(--ease)}
.nextp:hover b{color:var(--amber)}
.nextp:hover i{transform:translateX(6px)}

footer{background:var(--navy);color:var(--muted);border-top:1px solid var(--line)}
footer .mono{color:var(--muted)}

/* ---------- stable states you can pick ---------- */
.states{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 0}
.states .mono{margin-right:6px}
.states button{min-width:40px;height:36px;padding:0 12px;border:1px solid var(--line-hi);border-radius:3px;
 background:transparent;color:var(--text);font:500 13px var(--f-label);cursor:pointer;
 transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.states button:hover{border-color:var(--amber);color:var(--amber)}
.states button[aria-pressed=true]{background:var(--amber);border-color:var(--amber);color:#1a2125}
.est{cursor:pointer}
.est:focus{outline:none}
.est .ehit{fill:transparent;transition:fill .2s var(--ease)}
.est:hover .ehit,.est:focus-visible .ehit{fill:rgba(200,182,143,.08)}
.est:focus-visible .ehit{stroke:rgba(200,182,143,.6);stroke-width:.8}
.est .elab{fill:#E8C28A}
.est .ering{fill:none;stroke:#E8C28A;stroke-width:1.1;transition:fill .2s}
.est.on .ering{fill:#E8C28A}
.etrail,.ptrail{fill:none;stroke:#F2C14E;stroke-linecap:round;stroke-linejoin:round}
.etrail{stroke-width:2.4;opacity:.85}
.ptrail{stroke-width:2.6;opacity:.9}
/* a dark underlay lifts the trail off the curve, which is itself amber where the energy is high */
.trail-bg{fill:none;stroke:#20282D;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
#eMark{stroke:#20282D;stroke-width:1}

/* ---------- papers: rows that open a summary, and the summary pages ---------- */
.papers a.row{color:inherit;cursor:pointer}
.papers a.row:hover{border-color:var(--line)}
.papers a.row .t{transition:color .2s var(--ease)}
.papers a.row:hover .t{color:var(--amber)}
.paperlinks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
/* the other-papers fold sits flush under the series rows, as one more row */
#otherPapers{margin-top:0;border-top:0}
#otherPapers .fold-content{padding-bottom:0}
#otherPapers .rows{margin-top:0}
#otherPapers .row:last-child{border-bottom:0}
.pmeta{margin:-10px 0 0;max-width:72ch;font-size:14.5px;line-height:1.7;color:var(--muted)}
.pactions{margin:22px 0 30px}
.cbtn.off{opacity:.55;cursor:default}
.cbtn.off:hover{background:transparent;border-color:var(--line-hi);color:var(--text)}
.pfig{margin:0 0 30px;border:1px solid var(--line);border-radius:3px;background:rgba(255,255,255,.015);overflow:hidden;max-width:980px}
.pfig svg{display:block;width:100%;height:auto;max-height:440px;padding:clamp(14px,2.4vw,28px)}
.pfig img{display:block;width:100%;height:auto;background:#e9e9e6}
.pfig.photo{cursor:zoom-in}
.pfig figcaption{padding:11px 14px 13px;border-top:1px solid var(--line);line-height:1.7;letter-spacing:.06em}
.pfig.inbody{margin-top:26px}
.pfig.tall{max-width:560px}   /* an upright figure, kept to a readable height */
.pfig .credit{display:block;margin-top:6px;opacity:.75;text-transform:none;letter-spacing:.02em}
.pfig .credit a{color:inherit;border-bottom:1px solid var(--line-hi)}
.pfig .credit a:hover{color:var(--amber);border-color:currentColor}
.cite{margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--line);padding-top:18px;max-width:72ch}
.cite p{margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--muted)}
.cite a{color:inherit;border-bottom:1px solid var(--line-hi)}
.cite a:hover{color:var(--amber);border-color:currentColor}

/* ---------- thoughts: Substack notes, a row each; my comment leads when there is one ---------- */
.notes{margin-top:24px}
.notes a.row{color:inherit}
.notes a.row:hover{border-color:var(--line)}
.notes .t q,.notes .t .mine{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;max-width:70ch}
.notes .t q{-webkit-line-clamp:3;transition:color .2s var(--ease)}
.notes .t .mine{-webkit-line-clamp:2;margin-bottom:6px;font-size:14.5px;line-height:1.6;color:var(--amber)}
.notes a.row:hover q{color:var(--amber)}
@media(max-width:619px){.notes .m{display:none}}

/* ---------- the corner drawing: a light or dark panel to match the ground ---------- */
.inst{right:20px;bottom:20px;width:240px;padding:12px 16px;background:rgba(32,40,45,.95);
 border:1px solid #46555C;border-radius:4px;backdrop-filter:blur(8px)}
#inst{transition:opacity .8s ease 1.2s,transform .8s cubic-bezier(.16,.8,.3,1) 1.2s,
 background-color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
#inst.light{background:rgba(250,250,247,.95);border-color:#D3DAD8;box-shadow:0 14px 34px -22px rgba(34,49,58,.45)}
.inst .ilab,.inst .inum{font-size:10px;letter-spacing:.035em}.inst .inum{line-height:1.8}
.inst .hint{font-size:10px;letter-spacing:.08em;transition:opacity .25s,color .5s var(--ease)}
.inst .stage{aspect-ratio:1/.68}
.inst .stage svg{height:calc(100% - 16px)}
.inst.light .ilab i{color:#9D6038}
.inst.light .ilab b,.inst.light .inum,.inst.light .hint{color:#56676F}
.inst.light .inum em{color:#22313A}
.inst.light .inum em.hot{color:var(--orange)}
.inst.light .bar{stroke:#3E6477;stroke-opacity:.7}
.inst.light .face{fill:rgba(47,95,116,.08)}
.inst.light .jt{stroke:#3E6477;stroke-opacity:.85}
@media(min-width:1040px){
 .sec .wrap{padding-right:270px}
 body[data-page=main] footer{padding-right:calc(var(--pad) + 270px)}
}
.mobile-instrument{display:none}

/* ---------- motion: page changes cross-fade, the viewer and tabs fade in ---------- */
@media(prefers-reduced-motion:no-preference){
 ::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;
  animation-timing-function:cubic-bezier(.2,.7,.2,1)}
 #lightbox.on{animation:lb-in .28s ease both}
 .tabpane:not([hidden]){animation:pane-in .4s cubic-bezier(.2,.7,.2,1) backwards}
}
@keyframes lb-in{from{opacity:0}}
@keyframes pane-in{from{opacity:0;transform:translateY(6px)}}
#lightbox{background:#151B1F}
#lbImg{transition:opacity .3s ease,transform .45s var(--ease)}
#lbImg.swap{opacity:0;transform:scale(.985);transition:none}

/* ---------- focus, skip link ---------- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.skip{position:fixed;left:20px;top:-100px;z-index:100;background:var(--lt);color:var(--lt-ink);padding:12px 20px}
.skip:focus{top:12px}

/* ---------- narrow screens ---------- */
@media(max-width:1039px){
 .hero .boom{top:25%;right:-8%;width:65vw;opacity:.2!important}
 .hero .inner{z-index:3}.hero .inner .wrap{max-width:800px}
 .mobile-instrument{display:block;margin:32px 0}
 .mobile-instrument .inst{position:relative;inset:auto;width:min(100%,360px);margin:0 auto;opacity:1!important;transform:none!important}
 #inst.passthru{pointer-events:auto}
 .wide-only{display:none}.narrow-only{display:inline}
}
@media(max-width:859px){
 #menuToggle{display:block}
 nav.menu-open .links{display:flex;position:absolute;top:71px;left:0;right:0;padding:18px var(--pad) 24px;
  background:var(--lt);border-bottom:1px solid var(--lt-edge);flex-direction:column;gap:0}
 nav.dark.menu-open .links{background:var(--navy);border-bottom-color:rgba(197,213,220,.12)}
 nav.menu-open .links a{padding:10px 0;font-size:16px}
 nav .links a.on{box-shadow:none}
 .hero{min-height:620px}.hero .boom{width:90vw;right:-28%;top:36%}
 .stats b{font-size:clamp(36px,10vw,44px)}
 .states .mono{flex-basis:100%}
 .states button{min-width:0;flex:1 1 0;max-width:52px}
 .stats:has(>li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px}
 .stats:has(>li:nth-child(3):last-child) b{font-size:clamp(30px,8.4vw,40px)}
 .stats span{font-size:13px}
 .kit{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* ---------- cinematic landing ---------- */
.hero.cinematic{background:#11191e;color:#f0f2ef;min-height:min(900px,100svh);
 padding:150px 0 140px;isolation:isolate}
.cinematic h1{font-size:clamp(68px,7.8vw,116px);font-weight:300;letter-spacing:-.055em;line-height:1.07}
.cinematic h1 .mark{display:none}
.cinematic .inner{pointer-events:none}
.cinematic .inner .wrap{max-width:1320px}
.cinematic .inner a{pointer-events:auto}
.cinematic .label{color:#a7b6bd;font-family:var(--f-body);font-size:11px;letter-spacing:.16em}
.cinematic .lede{color:#cad2d5;max-width:30ch;font-size:clamp(19px,1.65vw,24px);line-height:1.6;font-weight:300;margin-top:26px}
.cinematic .facts{max-width:470px;gap:8px 20px;margin-top:28px}
.cinematic .mono{color:#96a6ae;font-family:var(--f-body);font-size:11px;letter-spacing:.04em}
.cinematic .hero-actions{margin-top:36px}
.cinematic .hero-actions a{color:#d7e0e3;border-color:#59666d;background:transparent;border-radius:2px;padding:12px 19px}
.cinematic .hero-actions a:first-child{color:#15212a;background:#e6ecec;border-color:#e6ecec}
.cinematic .hero-actions a:hover{background:#314047;border-color:#93a5ae}
.cinematic .hero-actions a:first-child:hover{background:#fff;border-color:#fff}
.hero-sky{position:absolute;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none}
/* The film is rendered on black and screened over the page's own sky: black drops out, light adds,
   so there is no rectangle to hide. A light feather only guards the frame's outer edge. */
.hero-film{position:absolute;z-index:-1;inset:45px -3% 0 39%;margin:0;overflow:hidden;mix-blend-mode:screen;
 mask-image:linear-gradient(90deg,transparent,#000 8%,#000 94%,transparent),linear-gradient(0deg,transparent,#000 7%,#000 94%,transparent);
 mask-composite:intersect}
.hero-film video{width:100%;height:100%;object-fit:contain;display:block}
.hero-film figcaption{position:absolute;bottom:90px;right:12%;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#afbdc4}
.hero-film figcaption span{color:#8a9aa4}
.film-controls{position:absolute;z-index:3;bottom:40px;left:var(--pad);right:var(--pad);display:flex;align-items:center;gap:24px;
 border-top:1px solid #344148;padding-top:18px;color:#9cadb5;font-size:11px;letter-spacing:.04em}
.film-caption{margin-right:auto}
.film-controls button{font:inherit;color:#e1e7e9;background:transparent;border:0;padding:7px 0;cursor:pointer;min-width:60px}
.film-controls button:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
body.hero-in-view #inst{visibility:hidden;opacity:0!important;pointer-events:none}
@media(max-width:1039px){
 .cinematic h1{font-size:clamp(64px,9vw,100px)}
 .hero.cinematic{min-height:850px;padding-top:135px;align-items:flex-start}
 .hero-film{inset:240px -8% 35px 24%;opacity:.9}
 .cinematic .lede{max-width:28ch}
 .hero-film figcaption{bottom:55px;right:15%}
}
@media(max-width:699px){
 .hero.cinematic{display:block;min-height:0;padding:125px 0 90px}
 .cinematic h1{font-size:clamp(58px,12vw,82px);letter-spacing:-.055em}
 .cinematic .label{font-size:9px;letter-spacing:.11em}
 .cinematic .lede{max-width:33ch;font-size:19px;margin-top:22px}
 .cinematic .facts{gap:8px 16px;margin-top:20px}
 .cinematic .mono{font-size:10px}
 .cinematic .hero-actions{gap:10px;margin-top:25px}
 .cinematic .hero-actions a{font-size:12px;padding:11px 14px}
 .hero-film{position:relative;inset:auto;z-index:0;width:112%;margin:18px -6% -22px;aspect-ratio:1.2;opacity:1;
  mask-image:linear-gradient(0deg,transparent,#000 7%,#000 94%,transparent)}
 .cinematic .inner{position:relative}
 .cinematic{display:flex!important;flex-direction:column}
 .cinematic .inner{order:-1}
 .hero-film figcaption{bottom:26px;right:0;left:0;text-align:center;font-size:8px}
 .film-controls{bottom:23px;padding-top:12px;gap:20px;font-size:10px}
 .film-caption{max-width:130px}
}

/* A small application study connects the mechanism to a familiar positioning task. */
.research-outlook{max-width:none;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center}
.outlook-copy{max-width:62ch}
.application-film{position:relative}
.film-cue{position:absolute;left:20px;right:20px;top:16px;margin:0;font:11px var(--f-label);color:#e2e9ed;letter-spacing:.03em;pointer-events:none}
.film-note{font-size:12px;line-height:1.6;color:var(--muted);margin:12px 0 0;max-width:58ch}
@media(max-width:760px){.research-outlook{grid-template-columns:1fr;padding-left:16px}.film-cue{left:14px;top:12px;font-size:10px}}

/* Feather only the empty studio border into the research section. */
#applicationStudy video,#frameStudy video{background:var(--navy);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}

/* Photography is a print portfolio, with its own quieter editorial rhythm. */
#pageGallery .sec {padding-top:100px;background:#1c2326;}
#pageGallery .wrap {max-width:1320px;}
#pageGallery .back {margin-bottom:30px;}
.portfolio-header {display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px;}
.portfolio-header .label {margin-bottom:10px;color:#b4b9b6;}
#pageGallery .portfolio-header h2 {font-size:clamp(36px,5vw,68px);font-weight:400;letter-spacing:-.045em;line-height:1;margin:0;}
.portfolio-header>p {font-size:14px;color:#b4b9b6;max-width:24ch;margin:0 0 4px;line-height:1.6;}
#galBody .gnav {display:flex;gap:24px;flex-wrap:wrap;border-top:1px solid #ffffff20;padding:18px 0 24px;margin:0;}
#galBody .gnav a {font-size:10px;color:#a5afaf;}
#galBody .gnav a[aria-current] {color:#fff;}
#galBody .gnav a span {opacity:.45;margin-left:7px;}
#galBody [hidden] {display:none!important;}
.portfolio-print {margin:0;min-width:0;}
.portfolio-image {display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;}
.portfolio-image img {display:block;width:100%;height:auto;object-fit:contain;}
.portfolio-image:focus-visible {outline:2px solid #e9ddd0;outline-offset:7px;}
.portfolio-print figcaption {display:flex;justify-content:space-between;gap:20px;color:#aeb7b6;font-size:11px;letter-spacing:.035em;padding:14px 0;}
.portfolio-print figcaption span:last-child {opacity:.5;}
.portfolio-opening {max-width:1100px;margin:auto;}
.portfolio-opening img {max-height:68vh;}
.portfolio-note {display:flex;justify-content:space-between;gap:28px;border-top:1px solid #ffffff20;padding-top:22px;margin:72px 0 90px;color:#aeb7b6;}
.portfolio-note .mono {font-size:10px;}
.portfolio-note p {max-width:28ch;font-size:15px;margin:0;}
.portfolio-spread {display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;margin:0 auto 130px;max-width:1060px;}
.portfolio-spread:not(.solo) .portfolio-print:nth-child(2) {margin-top:100px;}
.portfolio-spread.solo {display:block;max-width:960px;}
.portfolio-spread.spread-0 {grid-template-columns:.8fr 1.2fr;}
.portfolio-spread.spread-3 {max-width:880px;}
.portfolio-spread.spread-6 {max-width:760px;}
.portfolio-end {border-top:1px solid #ffffff25;padding:40px 0 0;}
.portfolio-end h3 {font-size:32px;font-weight:400;letter-spacing:-.03em;margin:10px 0 36px;}
.portfolio-series a {display:flex;justify-content:space-between;gap:20px;padding:22px 0;border-top:1px solid #ffffff18;font-size:20px;}
.portfolio-series a span:last-child {font-size:12px;color:#aeb7b6;align-self:center;}
#galBody .gtopic {padding-top:35px;}
.portfolio-return {display:inline-block;margin-top:50px;font-size:13px;}
@media(max-width:640px){
 #pageGallery .sec {padding-top:85px;}
 .portfolio-header {display:block;margin-bottom:24px;}
 .portfolio-header>p {max-width:none;margin-top:18px;font-size:13px;}
 #galBody .gnav {gap:16px 20px;}
 .portfolio-note {display:block;margin:44px 0 55px;}
 .portfolio-note p {margin-top:14px;max-width:none;font-size:14px;}
 .portfolio-spread,.portfolio-spread.spread-0 {display:block;margin-bottom:64px;}
 .portfolio-spread:not(.solo) .portfolio-print:nth-child(2) {margin-top:48px;}
 .portfolio-spread.spread-0 .portfolio-print:first-child,.portfolio-spread.spread-3 {max-width:88%;margin-left:auto;margin-right:auto;}
 .portfolio-print figcaption {font-size:10px;}
 .portfolio-series a {font-size:18px;}
}
#pageGallery h2[tabindex="-1"]:focus {outline:none;}
body[data-page="gallery"] footer .mono:last-child {display:none;}

/* Two print arrangements share one edit and one accessible photo viewer. */
.portfolio-layout {display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:0 0 26px;font-size:11px;}
.portfolio-layout>span {color:#aeb7b6;margin-right:12px;}
.portfolio-layout button {font:inherit;color:#bdc3c0;border:1px solid #ffffff25;background:transparent;padding:8px 14px;border-radius:2px;cursor:pointer;}
.portfolio-layout button[aria-pressed="true"] {background:#efede7;border-color:#efede7;color:#20282d;}
.portfolio-layout button:focus-visible {outline:2px solid #fff;outline-offset:4px;}
.portfolio-print.mounted .portfolio-image {padding:clamp(14px,2.4vw,34px);background:#f4f2ed;box-sizing:border-box;}
#selectedWork[data-layout="aligned"] .portfolio-spread {max-width:1100px;grid-template-columns:var(--print-columns,1fr 1fr);gap:40px;align-items:start;margin-bottom:90px;}
#selectedWork[data-layout="aligned"] .portfolio-spread .portfolio-print {margin-top:0;}
#selectedWork[data-layout="aligned"] .portfolio-spread:not(.solo) .portfolio-image {height:auto;aspect-ratio:var(--print-ratio);display:flex;align-items:center;justify-content:center;}
#selectedWork[data-layout="aligned"] .portfolio-spread:not(.solo) img {height:100%;width:100%;object-fit:contain;}
#selectedWork[data-layout="aligned"] .portfolio-spread.solo {max-width:1100px;}
#selectedWork[data-layout="collage"] .portfolio-spread {max-width:1100px;gap:10%;margin-bottom:150px;}
#selectedWork[data-layout="collage"] .spread-0 {grid-template-columns:.72fr 1.28fr;}
#selectedWork[data-layout="collage"] .spread-1 {grid-template-columns:1.15fr .85fr;}
#selectedWork[data-layout="collage"] .portfolio-spread:not(.solo) .portfolio-print:nth-child(2) {margin-top:170px;}
#selectedWork[data-layout="collage"] .spread-2 {width:78%;margin-left:0;}
#selectedWork[data-layout="collage"] .spread-3 {width:85%;margin-right:0;grid-template-columns:1fr .8fr;}
#selectedWork[data-layout="collage"] .spread-4 {width:86%;margin-right:0;}
#selectedWork[data-layout="collage"] .spread-6 {width:68%;margin-left:5%;}
@media(max-width:640px){
 .portfolio-layout {justify-content:flex-start;margin-bottom:24px;}
 #selectedWork[data-layout="aligned"] .portfolio-spread {margin-bottom:56px;}
 #selectedWork[data-layout="aligned"] .portfolio-spread .portfolio-print {max-width:none;margin:0 0 40px;}
 #selectedWork[data-layout="aligned"] .portfolio-spread:not(.solo) .portfolio-image {height:auto;aspect-ratio:auto;display:block;}
 #selectedWork[data-layout="aligned"] .portfolio-spread:not(.solo) img {height:auto;}
 #selectedWork[data-layout="collage"] .portfolio-spread {width:100%;margin:0 auto 64px;}
 #selectedWork[data-layout="collage"] .portfolio-spread:not(.solo) .portfolio-print {width:86%;margin:0 0 48px;}
 #selectedWork[data-layout="collage"] .portfolio-spread:not(.solo) .portfolio-print:nth-child(2) {margin:0 0 0 auto;}
 #selectedWork[data-layout="collage"] .spread-2,#selectedWork[data-layout="collage"] .spread-6 {width:86%;margin-left:0;}
}

/* Keep the opening caption aligned with the image, including tall screens. */
.portfolio-opening {width:min(100%,102vh);}
.portfolio-opening img {max-height:none;}
.portfolio-layout button {min-height:40px;}
@media(max-width:640px){
 #selectedWork[data-layout="aligned"] .portfolio-spread.spread-3 {max-width:100%;}
 .portfolio-layout button {min-height:44px;}
}

/* ---------- Every screen · 20 October 2026 ----------
   Phones: labels that carry meaning stay at 11px or more, captions at 10px or more.
   Touch screens: the small text links get a finger-sized target (about 44px) from an
   invisible ::after, so nothing on the page moves; the keyboard hint becomes a touch hint. */
@media(max-width:640px){
 .cinematic .label {font-size:11px;letter-spacing:.12em}
 .hero-film figcaption {font-size:10px;letter-spacing:.08em}
 #galBody .gnav a {font-size:11px}
 .portfolio-print figcaption {font-size:11px}
}
#galBody .gnav a span {opacity:.8}
.touch-hint {display:none}
@media(pointer:coarse){
 .keys-hint {display:none}
 .touch-hint {display:inline}
 .back,.paperlinks a,.constellation-intro>a,.milestone-card a,.passage-invitation,#mechanismSource a,.connected-demo>summary,.gal-selected {position:relative}
 .back::after,.paperlinks a::after,.constellation-intro>a::after,.milestone-card a::after,.passage-invitation::after,
 #mechanismSource a::after,.connected-demo>summary::after,.gal-selected::after {content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;translate:0 -50%}
}
/* Paper figures: the image is the button, so the caption's links sit beside it, not inside it. */
.pfig-open {display:block;width:100%;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;-webkit-appearance:none;appearance:none;cursor:zoom-in}
.pfig-open:focus-visible {outline:2px solid var(--amber);outline-offset:-3px}
.portfolio-print figcaption span:last-child {opacity:.75}