@font-face{font-family:'JROH Archivo';src:url('fonts/study/archivo.woff2?v=5545adc7') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'JROH Red Hat Mono';src:url('fonts/study/redhatmono.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
:root{--ink:#131719;--paper:#f6f7f5;--human:#ff5722;--tech:#3aa39f;--ai:#8b6bdb;--pad:5.5vw;--col:calc((100vw - 2*var(--pad))/12);--ease:cubic-bezier(.23,1,.32,1);--section-space:clamp(90px,12svh,140px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--ink);color:var(--paper);font:400 16px/1.6 'JROH Red Hat Mono',ui-monospace,'Courier New',monospace;-webkit-font-smoothing:antialiased;font-feature-settings:'liga' 1,'calt' 1;font-synthesis:none}
h1,h2,h3,.claim,.q,.brand{font-family:'JROH Archivo',Arial,sans-serif}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.25em}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
h1,h2,h3,p,figure,ul,ol{margin:0}ul,ol{padding:0;list-style:none}img{display:block;max-width:100%}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}
[hidden]{display:none!important}
#paper{position:absolute;left:0;width:100%;background:var(--paper);z-index:0}
#world{position:fixed;inset:0;z-index:1;pointer-events:none}
main{position:relative;z-index:2}
/* One glyph, shared by the brand, roots, actors and terminals. */
.dot{display:inline-block;width:.2em;height:.2em;border-radius:50%;margin-left:.12em;vertical-align:0;background:var(--tech)}
.dot[data-actor=human]{background:var(--human)}.dot[data-actor=ai]{background:var(--ai)}
.brand .dot{margin-left:.06em}
.pad{display:inline-block;width:9px;height:9px;border:1.5px solid #7a8587;border-radius:50%;background:var(--ink)}
.light .pad{background:var(--paper)}
/* Approved type registers. Content determines height at every zoom level. */
.claim{font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.9;font-size:clamp(3rem,1rem + 5.1vw,6rem);text-wrap:balance}
.claim>span{display:block}
.claim.claim-m{font-size:clamp(2.2rem,.6rem + 3.6vw,4rem);letter-spacing:-.035em}
.claim.big{font-size:clamp(4rem,1.5rem + 7.3vw,8.5rem);font-variant-numeric:tabular-nums}
.q{font-size:clamp(1.5rem,1rem + 1.25vw,2.125rem);font-weight:400;letter-spacing:-.02em;line-height:1.18;max-width:16ch;margin-top:1.4rem;text-wrap:balance}
.q.lead{margin-top:0;margin-bottom:1.4rem;color:#525959;font-size:clamp(1.2rem,.85rem + .6vw,1.5rem)}
.body{font-size:1rem;line-height:1.6;margin-top:1.1rem;max-width:36ch;text-wrap:pretty;color:#b9bdbc}
.light{background:var(--paper)}
html[data-canvas] .light{background:transparent}
.light .body{color:#505655}
.eyebrow{font-size:.6875rem;font-weight:500;letter-spacing:.1em;line-height:1.6;display:block;margin-bottom:24px;color:#adb4b4}
.light .eyebrow{color:#515858}
.desc{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:#b0b8b8;margin-top:14px;font-weight:500}
.light .desc{color:#565e5e}
.meta{font-size:.8125rem;letter-spacing:.02em;color:#acb5b5;margin-top:22px;line-height:1.6}
.text-link{display:inline-flex;gap:24px;align-items:baseline;margin-top:28px;padding-bottom:5px;font-size:.9375rem;font-weight:500;text-decoration:underline}
.text-link span{flex-shrink:0}.text-link.quiet{color:#bfc6c5;margin-top:0}
.after{font-size:1rem;color:#aab2b2;margin-top:26px;max-width:40ch}.light .after{color:#565d5d}
.list li,.steps li{font-size:1rem;line-height:1.6;color:#bdc4c3;padding:12px 0;border-top:1px solid #ffffff20;max-width:40ch}
.light .steps li{color:#4a5353}
.list{margin-top:24px}.list li b,.steps li b{font-weight:700;display:block;color:var(--paper)}.steps li b{color:var(--ink)}
.steps{margin-top:22px;counter-reset:st}.steps li{border-color:#13171720;padding-left:28px;position:relative}
.steps li:before{counter-increment:st;content:'0' counter(st);position:absolute;left:0;top:15px;font-size:.6875rem;letter-spacing:.06em;color:#626969}
.nav{position:fixed;z-index:3;top:0;left:0;width:100%;min-height:88px;padding:18px var(--pad);display:flex;align-items:center;gap:34px;color:var(--paper);background:#131719f5}
body.on-paper .nav{color:var(--ink);background:#f6f7f5f5}
.brand{font-size:29px;font-weight:900;letter-spacing:-.05em;line-height:1;text-decoration:none}
.study-label{font-size:10px;letter-spacing:.12em;color:#a8b0b0}.on-paper .study-label{color:#626969}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:13px}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a,.nav-contact{white-space:nowrap}
.menu-toggle{display:none;min-height:44px;align-items:center;gap:10px}
.pill{padding:9px 19px;border:1px solid currentColor;border-radius:30px;display:inline-flex;align-items:center;text-decoration:none}.pill span{margin-left:18px}
.pill.big{font-size:15px;padding:14px 26px;margin-top:32px}
/* The same twelve columns lay out both content and the canvas paths. */
.s{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding:var(--section-space) var(--pad);align-items:start;scroll-margin-top:0}
.s>*{min-width:0}
.block-l{grid-column:1/6}
.hero{min-height:100svh;padding-top:clamp(150px,22svh,220px);padding-bottom:100px;row-gap:clamp(60px,10svh,100px)}
.hero-title{grid-column:1/7}.hero .claim>span{width:max-content}
.hero-copy{grid-column:1/6;max-width:470px}
.hero-copy p{font-size:1rem;line-height:1.6;color:#d3d8d7}
.cta-row{display:flex;align-items:center;gap:28px;margin-top:30px;flex-wrap:wrap}
.discover{display:inline-flex;align-items:center;gap:18px;font-size:13px;font-weight:500;text-decoration:none}
.discover>span{width:42px;height:42px;flex-shrink:0;border:1px solid #7d8587;border-radius:50%;display:grid;place-items:center;font-size:18px;transition:transform 200ms var(--ease)}
.side-note{grid-column:11/13;grid-row:2;align-self:end;justify-self:end;font-size:10px;font-weight:500;line-height:1.5;letter-spacing:.035em;color:#c4cbcb}
/* Both questions share a viewport; the drawing carries attention between them. */
.s1{min-height:100svh;grid-template-rows:auto auto;row-gap:70px}
.block-a{grid-column:1/6;grid-row:1}
.block-b{grid-column:10/13;grid-row:2;margin-top:0}
.block-b .claim{font-size:clamp(2.8rem,.9rem + 4.3vw,5.2rem);white-space:nowrap}
.nw{white-space:nowrap}
.joint{grid-column:1/5;grid-row:2;align-self:end;font-size:1rem;line-height:1.6;color:#aeb7b7}
/* Two beats: reading time, then a fast reveal of the reversal. No layout moves. */
.s1[data-questions] .block-a{transition:opacity 240ms var(--ease)}
.s1[data-questions] .block-b{opacity:0;clip-path:inset(0 0 100% 0);transition:opacity 160ms var(--ease),clip-path 280ms var(--ease)}
.s1[data-questions] .joint{opacity:0;transition:opacity 300ms var(--ease)}
.s1[data-questions=impact] .block-a{opacity:.5}
.s1:is([data-questions=impact],[data-questions=settled],[data-questions=complete]) .block-b{opacity:1;clip-path:inset(0 0 0 0)}
.s1:is([data-questions=settled],[data-questions=complete]) .joint{opacity:1}
.s1[data-questions=complete] :is(.block-a,.block-b,.joint){transition:none}
.s2{row-gap:72px;align-items:start}
.s2 .block-l{grid-column:1/8;padding-right:calc(var(--col)*.3)}
.s2 .block-l>.body{max-width:44ch}
.s2 .block .q{max-width:100%}
/* Open project entries share one quiet branch of the AI stream. */
.project-hub{grid-column:1/8;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px clamp(28px,4vw,56px)}
.project-entry{position:relative;min-width:0;padding-top:24px}
.project-port{position:absolute;left:0;top:0;width:7px;height:7px;border-width:1px}
.project-entry h3{font-size:clamp(1.5rem,1.2rem + .6vw,1.75rem);font-weight:500;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.project-primary{display:flex;flex-direction:column;align-items:flex-start}
.project-primary h3{min-height:2.4em}
.entry-description{font-size:1rem;line-height:1.6;color:#b9bdbc;margin-top:14px;max-width:36ch;text-wrap:pretty}
.entry-author{font-size:.8125rem;line-height:1.6;color:#adb4b4;margin-top:16px}
.entry-actions{margin-top:auto;padding-top:26px}
.project-hub .project-cta{margin-top:0}
html:not([data-canvas]) .project-hub{border-top:1px solid #8b6bdb55;padding-top:24px}
.project-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;max-width:100%;margin-top:28px;padding:12px 18px;border:1px solid currentColor;border-radius:30px;font-size:.9375rem;line-height:1.4;text-decoration:none}
.project-cta span{flex-shrink:0}
.project-cta[aria-disabled=true]{opacity:.55;cursor:default}
.project-related,.project-status{font-size:.8125rem;line-height:1.6;margin-top:20px;max-width:40ch;color:#adb4b4}
.light .project-related,.light .project-status{color:#515858}
.s3 .project-related{max-width:100%;text-wrap:balance}
.scene{grid-column:8/13;background:var(--paper);padding:12px 12px 14px;border-radius:4px;box-shadow:0 50px 90px -40px #000}
.scene img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
.scene figcaption{font-size:.6875rem;letter-spacing:.06em;color:#515858;margin-top:10px;text-transform:uppercase}
.s3{min-height:90svh;color:var(--ink);row-gap:38px}
.s3 .block-l{grid-column:1/7;padding-right:calc(var(--col)*.4)}
.s3 .showcase{align-self:center}
.s3 .claim-m{font-size:clamp(2.2rem,.7rem + 3.4vw,3.75rem)}
.showcase{grid-column:8/13;background:#fff;border:1px solid #13171714;border-radius:10px;overflow:hidden;box-shadow:0 40px 80px -40px #0006}
.showcase img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.showcase figcaption{font-size:.8125rem;padding:14px 16px;color:#515858}
.secondary{grid-column:9/13;display:flex;gap:14px;align-items:center;font-size:.8125rem;color:#515858;align-self:start}
.secondary img{width:84px;flex-shrink:0;aspect-ratio:16/9;object-fit:cover;border-radius:4px;border:1px solid #13171714}
.s4{color:var(--ink);padding-top:calc(var(--section-space) + 30px);padding-bottom:calc(var(--section-space) + 30px)}
.stack{grid-column:1/8;padding-top:30px}
.step{margin-bottom:52px}.step:last-child{margin-bottom:0}
.step .claim{font-size:clamp(3rem,1rem + 5.3vw,6.2rem);width:max-content}
.aside{grid-column:10/13}
.aside .q{font-size:1.5rem;margin-top:0}.aside .body{max-width:30ch}
.s5{row-gap:36px}
.s5 .block-l{grid-column:1/7;padding-right:calc(var(--col)*.5)}
.education-program .body{max-width:44ch}
.education-program .project-cta{margin-top:24px}
.photo{overflow:hidden;border-radius:6px;aspect-ratio:3/2}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-a{grid-column:8/13;align-self:center}
.education-paths{grid-column:1/8;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.education-path{display:flex;flex-direction:column;align-items:flex-start;border-top:1px solid #ffffff26;padding-top:18px;min-width:0}
.education-path h3{font-size:1.5rem;font-weight:400;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.education-path p{font-size:.875rem;line-height:1.6;color:#b9bdbc;margin-top:12px;max-width:36ch;text-wrap:pretty}
.education-path .text-link{margin-top:auto;padding-top:16px;min-height:44px;gap:16px}
.education-experience{grid-column:10/13;align-self:end;padding-bottom:5px}
.education-proof{font-size:.8125rem;color:#b9bdbc}
.education-proof strong{display:block;font-family:'JROH Archivo',Arial,sans-serif;font-size:2rem;font-weight:900;letter-spacing:-.035em;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--paper);margin-bottom:6px}
.education-note{font-size:.6875rem;line-height:1.6;color:#adb4b4;margin-top:12px;max-width:30ch}
.s6{min-height:76svh;align-items:center}
.articles{grid-column:10/13}
.article{display:block;position:relative;padding:22px 0 22px 26px;border-top:1px solid #ffffff24;text-decoration:none}
.article:last-child{border-bottom:1px solid #ffffff24}
.article .pad{position:absolute;left:0;top:28px}
.article .cat{display:block;font-size:.6875rem;letter-spacing:.1em;color:#adb6b6;margin-bottom:6px}
.article .title{font-size:1rem;line-height:1.4;letter-spacing:-.01em;text-decoration:underline;text-decoration-color:#ffffff65;text-underline-offset:.2em}
.s7{min-height:85svh;padding-top:clamp(180px,24svh,250px);padding-bottom:120px}
.center{grid-column:1/-1;text-align:center}
.end-claim{margin-top:8px}.end-claim>span{margin:0 auto;width:max-content;max-width:100%}
.center .body{margin:22px auto 0}.foot{font-size:.9375rem;color:#b0b8b8;margin-top:36px}
#reduce{position:fixed;right:var(--pad);bottom:20px;z-index:3;font-size:.6875rem;color:var(--paper);padding:8px 12px;border:1px solid #ffffff40;border-radius:20px;background:var(--ink);line-height:1.5}
body.on-paper #reduce{color:var(--ink);background:var(--paper);border-color:#13171950}
@media(hover:hover) and (pointer:fine){
  .discover:hover>span{transform:translateX(4px)}
  .text-link:hover,.nav-links a:hover,.foot a:hover{text-decoration-thickness:2px}
  .article:hover .title{text-decoration-color:currentColor}
  .pill:hover{background:var(--paper);color:var(--ink)}
  .project-cta[href]:hover{background:var(--paper);color:var(--ink)}
  .light .project-cta[href]:hover{background:var(--ink);color:var(--paper)}
  .on-paper .nav .pill:hover{background:var(--ink);color:var(--paper)}
}
/* Tablet and zoom use a stacked layout before narrow columns become unreadable. */
@media(max-width:1000px){
  :root{--pad:7vw;--section-space:80px}
  html{scroll-padding-top:80px}
  .nav{min-height:72px;padding-block:14px;gap:16px;flex-wrap:wrap}.brand{font-size:24px}.study-label{display:none}.nav-right{display:contents;font-size:13px}.pill{padding:7px 12px}.pill span{margin-left:8px}
  .nav-contact{margin-left:auto;min-height:44px}
  .nav-links{order:3;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  .nav-links a{display:flex;align-items:center;min-height:48px}
  .nav:not([data-menu]){position:relative}
  .nav[data-menu] .nav-right{display:flex;gap:18px}
  .nav[data-menu] .menu-toggle{display:inline-flex}
  .nav[data-menu] .nav-links{display:none;position:absolute;left:0;right:0;top:100%;padding:12px var(--pad) 20px;background:var(--ink);border-bottom:1px solid #ffffff26;max-height:calc(100svh - 72px);overflow-y:auto}
  .on-paper .nav[data-menu] .nav-links{background:var(--paper);border-color:#13171926}
  .nav[data-menu-open] .nav-links{display:grid}
  .s{display:block}
  .claim{font-size:clamp(2.4rem,1rem + 7.4vw,4.5rem)}.claim.claim-m{font-size:clamp(1.8rem,.7rem + 5vw,3.4rem)}.claim.big{font-size:clamp(3.4rem,1rem + 13vw,6rem)}
  .hero{padding-top:130px;padding-bottom:100px;min-height:max(780px,100svh)}
  .hero-copy{margin-top:85px;width:78%;max-width:440px}.side-note{display:none}
  .block-l,.s3 .block-l,.s5 .block-l{width:100%;padding-right:0}
  .block-a,.block-b{width:78%;max-width:540px}
  .s1{min-height:auto}.block-b{margin-top:150px}.block-b .claim{font-size:clamp(2.4rem,1rem + 7.4vw,4.5rem)}
  .joint{margin-top:46px}
  .s2,.s3,.s6{min-height:auto}.s2 .block-l{padding-right:0}
  .project-hub{display:block;width:88%;margin-top:64px}
  .project-entry+.project-entry{margin-top:48px}
  .project-primary h3{min-height:0}
  .scene,.showcase,.photo{width:100%;margin-top:40px}
  .secondary{margin-top:38px;max-width:480px}
  .s3 .claim-m{font-size:clamp(1.8rem,.6rem + 5.4vw,3.4rem)}
  .s4{padding-top:var(--section-space);padding-bottom:var(--section-space)}
  .stack{padding-top:0}.step{margin-bottom:34px}.step .claim{font-size:clamp(2.2rem,.75rem + 7.8vw,4.5rem)}
  .aside{width:100%;max-width:520px;margin-top:65px}.aside .body{max-width:36ch}
  .s5{padding-block:64px}
  .education-program{max-width:620px}
  .s5 .photo{max-width:680px;margin-top:28px}
  .education-paths{margin-top:28px;max-width:680px}
  .education-experience{margin-top:28px;padding:0}
  .education-proof strong{display:inline;font-size:1.5rem;margin-right:8px}
  .education-note{margin-top:6px;max-width:none}
  .articles{width:100%;margin-top:46px;max-width:560px}
  .s7{padding-top:160px;min-height:80svh}
  .end-claim>span{width:auto;max-width:24ch;text-wrap:balance;line-height:1.06}.end-claim>span+span{margin-top:16px}
}
@media(max-width:480px){
  .education-paths{display:block}
  .education-path+.education-path{margin-top:24px}
  .education-path .text-link{margin-top:0}
  .education-path h3{font-size:1.375rem}
  .hero-copy{width:100%;margin-top:90px}
  .block-a,.block-b{width:88%}
  .q{font-size:1.5rem}
  .s2 .claim{font-size:clamp(2rem,.7rem + 7.4vw,2.75rem)}
  .s3 .claim-m{font-size:clamp(1.5rem,.4rem + 5.7vw,2.2rem);line-height:1}
  .scene,.showcase,.photo{margin-top:34px}
  .secondary img{width:68px}
  #reduce{bottom:12px}
}
html[data-reduced] {scroll-behavior:auto}
html[data-reduced] .discover>span{transition:none}
html[data-reduced] .s1[data-questions] :is(.block-a,.block-b,.joint){opacity:1;clip-path:none;transition:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.discover>span{transition:none}
  .s1[data-questions] :is(.block-a,.block-b,.joint){opacity:1;clip-path:none;transition:none}
}

/* HUMAN chapter: retain existing section anchors and continuous line engine. */
.human-chapter{min-height:0;row-gap:45px}.human-chapter-mark{display:inline-block;margin:16px 0 20px}.human-chapter-mark img{display:block;width:240px;max-width:100%;height:auto}.human-chapter .human-chapter-title{font-size:clamp(2.7rem,4.5vw,4.7rem);line-height:1.02;letter-spacing:-.045em;text-transform:none;max-width:13ch}.human-chapter-actions{grid-column:1/-1;display:flex;gap:20px 30px;align-items:center;flex-wrap:wrap}.human-chapter-actions .human-explore{background:#f6f7f5;color:#131719;border-color:#f6f7f5;font-weight:600}.human-chapter-actions .text-link{font-size:13px}.human-chapter .project-hub{row-gap:32px}
@media(max-width:760px){.human-chapter .project-hub{margin-top:35px}.human-chapter .human-chapter-title{font-size:clamp(2.2rem,8vw,3.4rem)}.human-chapter-actions{display:flex;margin-top:32px;gap:16px}.human-chapter-mark img{width:220px}.human-chapter .project-entry+.project-entry{margin-top:25px}}