/* Living systems: a quiet gallery, then an ordinary reading surface. */
:root{--amber:#d5b47b;--wax:#887047;--paper:#dedbcb}
.gallery-toolbar{border-block:1px solid var(--line);padding:16px 0;margin-bottom:46px}
.gallery-toolbar p{margin:0;color:var(--muted);font: .75rem/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.project-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:74px 36px;padding:4px 12px 118px;list-style:none;margin:0;position:relative;isolation:isolate}
.project-gallery:before{content:'';position:absolute;inset:-26px -20px 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 18% 18%,#65502724,transparent 40%),radial-gradient(ellipse at 82% 68%,#354c3024,transparent 44%),url('hive-circuit.svg') repeat;background-size:auto,auto,288px 166.277px;opacity:.62;mask-image:linear-gradient(to bottom,transparent,#000 52px,#000 calc(100% - 86px),transparent)}
.project-window{min-width:0}
.project-window:nth-child(3n+2){transform:translateY(98px)}
.project-window>a{display:block;height:100%;padding:0 4px 16px;border-radius:2px}
.hex-window{position:relative;display:grid;place-items:center;aspect-ratio:1.1547;background:linear-gradient(145deg,#61533a 8%,#d6b579 25%,#615139 46%,#413723 68%,#bc9459 94%);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);isolation:isolate}
.hex-window:before{content:'';position:absolute;inset:2px;clip-path:inherit;background:radial-gradient(ellipse at 55% 90%,#49361855,transparent 58%),linear-gradient(135deg,#151a13,#0b100d 65%);z-index:-1}
.hex-window:after{content:'';position:absolute;inset:0;opacity:.07;background:url('canvas-texture.webp');background-size:500px;pointer-events:none}
.hex-window img{width:84%;height:84%;object-fit:contain;filter:brightness(.95);transition:filter 240ms ease}
.hex-window .window-number{position:absolute;left:47%;bottom:7%;color:var(--amber);font:.67rem/1 var(--mono);letter-spacing:.1em}
.project-window a:hover .hex-window,.project-window a:focus-visible .hex-window{background:#f2d59f}
.project-window a:hover img,.project-window a:focus-visible img{filter:brightness(1.12)}
.window-copy{padding:24px 10px 0;background:#070a08ed;box-shadow:0 8px 22px 12px #070a08d9;position:relative}
.window-stage{display:block;color:var(--amber);font:.67rem/1.7 var(--mono);letter-spacing:.09em;text-transform:uppercase;margin-bottom:10px}
.window-copy h3{font-size:clamp(1.65rem,2.4vw,2.25rem);line-height:1.13}
.window-copy p{color:var(--muted);font-size:.96rem;line-height:1.6;margin:12px 0 0;max-width:30ch}

/* Case pages retain the portfolio's material and typographic language. */
.study-page .header{position:relative}
.study-wrap{width:min(1180px,calc(100% - 104px));margin-inline:auto}
.study-nav{position:sticky;top:0;z-index:25;background:#070a08f5;backdrop-filter:blur(8px);border-block:1px solid var(--line)}
.study-nav>div{display:flex;justify-content:space-between;gap:28px;align-items:center;min-height:66px}
.study-nav a{display:inline-flex;align-items:center;min-height:46px;font-size:.875rem}
.study-nav a:hover{color:var(--amber)}
.study-nav-links{display:flex;gap:28px}
.study-open{padding:76px 0 64px;display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:start}
.study-open .eyebrow{color:var(--amber);margin-bottom:22px}
.study-open h1{font-size:clamp(2.75rem,5.6vw,5.5rem);line-height:1.02;max-width:15ch}
.study-deck{font-size:1.125rem;line-height:1.7;color:#cbd2c4;max-width:52ch;margin-top:28px}
.study-facts{margin:0;padding-top:5px;display:grid;grid-template-columns:1fr 1fr;gap:23px 30px}
.study-facts div:first-child,.study-facts div:last-child{grid-column:1/-1}
.study-facts dt{color:var(--amber);font:.7rem/1.6 var(--mono);letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px}
.study-facts dd{margin:0;font-size:.97rem;line-height:1.65;color:#ced4c9}
.study-facts strong{color:var(--text);font-weight:500}
.artifact{margin:0 0 60px}
.artifact-surface{background:#151b14;border:1px solid #5b5946;overflow:hidden;border-radius:2px}
.artifact-surface img{width:100%;height:auto}
.artifact figcaption{margin-top:15px;display:flex;gap:25px;font-size:.8rem;line-height:1.65;color:var(--muted)}
.artifact figcaption span:first-child{color:var(--amber);font-family:var(--mono);font-size:.7rem;text-transform:uppercase;flex-shrink:0;letter-spacing:.08em}
.study-section{border-top:1px solid var(--line);padding:70px 0}
.study-section>header{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:start;margin-bottom:42px}
.study-section h2{font-size:clamp(2.2rem,4vw,3.65rem);max-width:18ch}
.study-section>header p{color:var(--muted);max-width:55ch}
.decision{display:grid;grid-template-columns:56px minmax(0,.8fr) minmax(0,1.1fr);gap:28px;padding:42px 0;border-top:1px solid var(--line)}
.decision-index{font: .8rem/1.8 var(--mono);color:var(--amber);padding-top:4px}
.decision h3{font-size:clamp(1.7rem,2.9vw,2.5rem);line-height:1.18;max-width:18ch}
.decision-copy p{color:#c5cdbf;margin-bottom:17px;max-width:62ch}
.decision-copy strong{color:var(--text);font-weight:500}
.decision-copy .decision-result{border-left:2px solid var(--wax);padding-left:18px;font-size:.9rem;margin-bottom:0}
.diagram{margin:30px 0 0;padding:32px;background:#11170f;border:1px solid #464b39}
.diagram>p:first-child{font: .7rem/1.7 var(--mono);color:var(--amber);letter-spacing:.09em;text-transform:uppercase;margin-bottom:26px}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;gap:22px;margin:0;padding:0}
.flow li{position:relative;padding-top:18px;border-top:1px solid #8a9275}
.flow li:not(:last-child):after{content:'→';position:absolute;right:-17px;top:25px;color:var(--amber)}
.flow b{display:block;font-size:1rem;font-weight:500;margin-bottom:10px}
.flow span{display:block;font-size:.87rem;line-height:1.65;color:var(--muted)}
.diagram .diagram-note{font-size:.8rem;color:var(--muted);margin:26px 0 0;max-width:90ch}
.diagram-pair{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.diagram-pair>div{padding:25px;border-top:1px solid var(--wax)}
.diagram-pair h3{font-size:1.7rem;margin-bottom:14px}.diagram-pair p{font-size:.94rem;color:var(--muted);margin-bottom:0}
.delivered{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:36px}
.delivered h3{font: .75rem/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:18px}
.delivered ul{padding-left:19px;margin:0;color:#c5cdbf}.delivered li{padding-left:5px;margin-bottom:14px;line-height:1.65}
.study-evidence{border-block:1px solid var(--line);margin-top:40px}
.study-evidence summary{padding:23px 4px;cursor:pointer;min-height:64px;font-size:.95rem}
.study-evidence>div{max-width:78ch;padding:0 4px 20px;color:var(--muted);font-size:.9rem;line-height:1.7}
.study-end{display:flex;justify-content:space-between;align-items:center;gap:26px;padding:30px 0 80px}.study-end .text-link{color:var(--amber)}
.evidence-compare{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.evidence-compare>div{border-top:1px solid var(--wax);padding-top:24px}.evidence-compare h3{font-size:1.8rem;margin-bottom:16px}
.storyboard{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.storyboard article{border-top:1px solid var(--wax);padding:20px 0}.storyboard .step{color:var(--amber);font: .75rem var(--mono)}.storyboard h3{font-size:1.6rem;margin:20px 0 12px}.storyboard p{font-size:.9rem;color:var(--muted)}
.bloom-artifact{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;padding:40px 70px}.bloom-artifact img{max-height:400px;object-fit:contain}.bloom-artifact h2{font-size:2.6rem;margin-bottom:20px}.bloom-artifact p{color:var(--muted)}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(project-image){animation-duration:240ms}
@media(min-width:761px){.project-window a:active .hex-window,.study-page .lead-artifact{view-transition-name:project-image}}
@media(max-width:1050px){.study-open{gap:34px}.study-wrap{width:calc(100% - 64px)}.project-gallery{gap:50px 22px;padding-inline:0}.window-copy{padding-inline:0}.study-section>header{gap:35px}.decision{grid-template-columns:40px .8fr 1.2fr;gap:20px}}
@media(max-width:760px){
 .gallery-toolbar{margin-bottom:28px}
 .project-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 20px;padding:4px 0 64px}
 .project-gallery:before{inset:-20px -12px 0;background-size:auto,auto,216px 124.708px;opacity:.5}
 .project-window,.project-window:nth-child(3n+2){transform:none}
 .project-window:nth-child(even){transform:translateY(42px)}
 .project-window>a{padding:0}
 .window-copy{padding:18px 0 0}.window-copy h3{font-size:1.5rem}.window-copy p{margin:10px 0 0}.window-stage{margin-bottom:8px}.hex-window .window-number{display:none}
 .study-wrap{width:calc(100% - 40px)}.study-nav>div{gap:10px;min-height:60px}.study-nav a{font-size:.72rem}.study-nav-links{gap:15px}.study-open{display:block;padding:45px 0}.study-open h1{font-size:clamp(2.65rem,10vw,4.5rem)}.study-deck{font-size:1.05rem}.study-facts{margin-top:36px;padding-top:26px;border-top:1px solid var(--line);gap:20px}.study-facts dd{font-size:.9rem}
 .artifact{margin-bottom:40px}.artifact figcaption{display:block}.artifact figcaption span:first-child{display:block;margin-bottom:7px}.study-section{padding:44px 0}.study-section>header{display:block;margin-bottom:30px}.study-section>header p{margin-top:22px}.decision{grid-template-columns:26px minmax(0,1fr);gap:12px;padding:30px 0}.decision h3{font-size:2rem}.decision-copy{grid-column:2}.decision-copy p{font-size:.95rem}.delivered{display:block;margin-top:28px}.delivered>div+div{margin-top:32px}.diagram{padding:23px 20px}.flow{grid-template-columns:1fr 1fr;gap:30px}.flow li:nth-child(2):after{display:none}.diagram-pair,.evidence-compare{grid-template-columns:1fr;gap:10px}.storyboard{grid-template-columns:1fr 1fr}.bloom-artifact{gap:20px;padding:25px;grid-template-columns:1fr}.bloom-artifact img{max-height:280px}.bloom-artifact h2{font-size:2.2rem}.study-end{align-items:flex-start;padding-bottom:50px}.study-end a{max-width:48%;font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-group(*){animation:none!important}.hex-window img{transition:none}.project-window,.project-window>a{animation:none!important;transition:none!important}}
@media(max-width:760px){.study-nav>div{flex-wrap:wrap;gap:0;padding-block:3px}.study-nav>div>a{min-height:40px}.study-nav-links{width:100%;justify-content:space-between;flex-wrap:wrap;gap:0 20px}.study-nav a{font-size:.875rem;white-space:nowrap}.study-nav-links a{min-height:44px}.study-facts{grid-template-columns:1fr}.study-facts div:first-child,.study-facts div:last-child{grid-column:auto}.study-open h1{hyphens:auto;overflow-wrap:normal}}
/* Labels stay readable; essential copy is never clipped. */
.window-stage{font-size:.875rem;letter-spacing:.04em}.window-copy p{font-size:1rem}.study-facts dt,.artifact figcaption span:first-child,.diagram>p:first-child{font-size:.75rem}.study-facts dd,.decision-copy p,.storyboard p{font-size:1rem}.artifact figcaption{font-size:.875rem}.gallery-toolbar p{font-size:.75rem}
.storyboard svg{display:block;width:100%;height:110px;stroke:var(--amber);stroke-width:1.5;fill:none;margin-top:24px}.study-page[data-project=exemplars] .flow li:after{display:none}
.study-open h1{overflow-wrap:anywhere}
@media(max-width:450px){.storyboard{grid-template-columns:1fr}.storyboard article{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 20px}.storyboard .step{grid-column:1/-1}.storyboard svg{grid-column:1;grid-row:2/4;margin-top:22px;height:80px}.storyboard h3,.storyboard p{grid-column:2}.storyboard h3{margin-top:22px}}

/* Concise case studies: one paragraph per decision and a compact close. */
.decision-copy p:last-child{margin-bottom:0}
.outcome-copy .next-step{margin-top:20px;font-size:1rem}
#outcome>header{margin-bottom:0}
.artifact>.diagram{margin-top:0}
.flow span{font-size:1rem}
.diagram .diagram-note{font-size:.875rem}
@media(max-width:760px){.study-page main>section{scroll-margin-top:5rem}}

/* These diagrams show related lenses, rather than sequential steps. */
.study-page:is([data-project=collaborative-vr],[data-project=flow-music],[data-project=mergen]) .flow li:after{display:none}
@media(max-width:360px){.project-gallery{grid-template-columns:minmax(0,1fr);max-width:300px;margin-inline:auto;padding-bottom:12px}.project-window:nth-child(n){transform:none}.window-copy h3{font-size:1.8rem}}