/* v3.1: presentation is scoped so the original shelf and registry remain independent. */
:root { --surface: #241b15; --legible: #bfb2a0; }
.hero-inner { grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); align-items:center; max-width:1480px; gap:clamp(2rem,4vw,4.5rem); padding-top:8.5rem; padding-bottom:3.5rem; }
.hero { min-height:min(900px,100svh); }
.hero h1 { font-size:clamp(5.6rem,10.4vw,9.7rem); font-weight:400; }
.hero-kicker { margin-bottom:1.7rem; }
.hero-kicker .eyebrow { max-width:42ch; font-size:.66rem; letter-spacing:.19em; line-height:1.8; }
.hero-sub { max-width:48ch; font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.75; margin-bottom:1.5rem; }
.hero-meta { display:flex; flex-direction:column; align-items:flex-start; gap:1.4rem; }
.hero-ctas { margin:0; justify-content:flex-start; gap:.7rem; }
.hero-ctas .btn { padding:.9rem 1.25rem; font-size:.72rem; letter-spacing:.045em; text-transform:none; }
.hero-rail { display:flex; flex-wrap:wrap; gap:.55rem 1.1rem; line-height:1.7; margin-top:1.65rem; font-size:.6rem; letter-spacing:.04em; }
.hero-rail span::before { display:none; }
.hero-rail span:first-child { flex-basis:100%; color:var(--legible); }
.status-chip { font-size:.58rem; letter-spacing:.035em; padding:.5rem .75rem; max-width:100%; white-space:normal; }
.hero-product { position:relative; min-width:0; padding-top:3.7rem; }
.hero-product::before { content:""; position:absolute; inset:15% -12% 8%; background:radial-gradient(ellipse,rgba(181,113,74,.17),transparent 65%); pointer-events:none; }
.hero-product .mmi { position:absolute; top:-4rem; right:0; width:116px; height:140px; min-width:0; margin:0; opacity:.65; }
.hero-product .mmi svg { height:130px; }
.hero-product .mmi figcaption { display:none; }
.hero-product-label { position:relative; color:var(--accent); font: .65rem var(--mono); letter-spacing:.08em; margin:0 0 1rem .4rem; }
.hero-screen { position:relative; display:block; border:1px solid #75644e; border-radius:10px; background:#100e0c; padding:7px; box-shadow:0 26px 65px -16px #000b,inset 0 0 0 1px #d5b08012; transform:perspective(1300px) rotateY(-7deg) rotateX(2deg); }
.hero-screen img { width:100%; height:auto; aspect-ratio:1435/897; object-fit:contain; border-radius:4px; }
.hero-screen::after { content:""; display:block; height:7px; width:14%; border-radius:0 0 3px 3px; margin:7px auto -7px; background:#63564a; }
.hero-miniatures { position:relative; display:grid; grid-template-columns:1.3fr 1fr; gap:.85rem; margin:1.5rem 0 0 9%; }
.hero-miniatures a { display:block; min-width:0; padding:.8rem; border:1px solid #cba97225; background:linear-gradient(135deg,#2a2119,#15110d); border-radius:7px; box-shadow:0 15px 36px #0005; }
.hero-miniatures img { height:auto; aspect-ratio:16/10; object-fit:contain; background:#0c0b09; border-radius:2px; }
.hero-miniatures span { display:block; margin-top:.65rem; color:var(--legible); font-size:.7rem; }
.hero-product-note { position:relative; margin:1.25rem 0 0 9%; color:var(--muted); font-size:.65rem; line-height:1.65; max-width:50ch; }
.hero-product a:focus-visible { outline-offset:6px; }
#embers { opacity:.55; }
body::before { animation:none; }
body::after { opacity:.023; }
.nav-links { gap:clamp(.8rem,1.35vw,1.45rem); }
.nav-links a { font-size:.76rem; }
.nav-links .nav-resume { border:1px solid var(--line); border-radius:4px; padding:.45rem .7rem; color:var(--accent); }
.nav-links .nav-resume::after { display:none; }
.section-head .num { color:var(--muted); }
.cw-context,.cw-lead-head .cw-seam,.cw-kicker,.method-note,.devices figcaption { color:var(--muted); }
.cw-tab,.fchip { min-height:38px; }

/* A short visual route sits before the complete, unchanged section sequence. */
.work-preview { padding:clamp(3.5rem,7vw,6rem) var(--pad); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:linear-gradient(160deg,#201811aa,#100d0900 60%); }
.work-preview .wrap { max-width:1380px; }
.work-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2.2rem; }
.work-heading h2 { font-family:var(--display); font-weight:400; font-size:clamp(2.3rem,4vw,3.6rem); line-height:1.12; letter-spacing:-.035em; }
.work-heading p { max-width:45ch; color:var(--legible); font-size:.87rem; line-height:1.75; }
.work-tabs { display:flex; gap:.3rem; border-bottom:1px solid var(--line); margin-bottom:1.8rem; }
.work-tabs button { position:relative; background:none; border:0; color:var(--muted); padding:.85rem 1.2rem 1rem; font:500 .82rem var(--body); cursor:pointer; min-height:46px; }
.work-tabs button:first-child { padding-left:0; padding-right:1.5rem; }
.work-tabs button[aria-selected="true"] { color:var(--accent-bright); }
.work-tabs button[aria-selected="true"]::after { content:""; height:2px; background:var(--accent); position:absolute; bottom:-1px; left:0; right:0; }
.work-panel { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(240px,1fr); gap:clamp(1.8rem,3.5vw,3rem); align-items:center; }
.work-panel[hidden] { display:none; }
.work-display { position:relative; min-width:0; }
.work-image { display:block; width:100%; cursor:zoom-in; background:#0d0c0b; padding:8px; border:1px solid #83705a88; border-radius:8px; box-shadow:0 30px 60px -24px #000c; }
.work-image img { width:100%; height:auto; aspect-ratio:16/10; object-fit:contain; border-radius:3px; }
.work-display figcaption { display:flex; justify-content:space-between; gap:1rem; margin-top:.85rem; font-size:.66rem; color:var(--muted); line-height:1.6; }
.work-display figcaption span:last-child { flex-shrink:0; }
.work-copy .work-field { font:.62rem var(--mono); color:var(--accent); letter-spacing:.06em; margin-bottom:.7rem; }
.work-copy h3 { font:400 clamp(1.8rem,2.8vw,2.7rem)/1.12 var(--display); letter-spacing:-.025em; margin-bottom:1rem; }
.work-copy > p { color:var(--legible); font-size:.88rem; line-height:1.8; }
.work-notes { margin:1.25rem 0 1.5rem; border-top:1px solid var(--line); }
.work-notes div { padding:.8rem 0; border-bottom:1px solid var(--line-soft); }
.work-notes dt { color:var(--text); font-size:.72rem; margin-bottom:.25rem; }
.work-notes dd { color:var(--muted); font-size:.75rem; line-height:1.65; }
.text-link { display:inline-flex; align-items:center; gap:.65rem; color:var(--accent-bright); font:500 .77rem var(--body); background:none; border:0; padding:.65rem 0; border-bottom:1px solid #cba97255; cursor:pointer; }
.text-link svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; }
.work-route { display:flex; justify-content:space-between; gap:1rem; margin-top:2.4rem; padding-top:1.25rem; border-top:1px solid var(--line-soft); color:var(--muted); font-size:.75rem; }
.work-route a { color:var(--accent); }
.reading-path { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:0 0 3rem; border-radius:5px; overflow:hidden; }
.reading-path a { display:block; padding:1.1rem 1.3rem; background:var(--bg-soft); }
.reading-path strong { display:block; font-weight:500; font-size:.83rem; margin-bottom:.35rem; color:var(--text); }
.reading-path span { display:block; color:var(--muted); font-size:.73rem; line-height:1.6; }
.reading-path a:hover { background:var(--bg-card); }

/* Existing case studies gain space and deliberate professional-first ordering. */
.cw-grid { gap:3.4rem 2.2rem; }
.cw-item.cw-featured { grid-template-columns:minmax(0,1.8fr) minmax(250px,1fr); padding:1.8rem; border:1px solid var(--line); border-radius:8px; background:linear-gradient(135deg,#2a21199c,#130f0b); }
.cw-shot { border-radius:6px; }
.cw-shot:hover,.cw-shot:focus-visible { transform:none; }
.cw-item h4 { font-style:normal; }
.cw-item .cw-subtitle { font-style:normal; }
.cw-card-skills { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0 .35rem; list-style:none; }
.cw-card-skills li { padding:.3rem .5rem; border:1px solid var(--line-soft); border-radius:3px; color:var(--muted); font-size:.6rem; }
.gallery-divider { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; margin:3rem 0 1.2rem; padding-top:2rem; border-top:1px solid var(--line); }
.gallery-divider h3 { font:400 1.7rem var(--display); }
.gallery-divider p { color:var(--muted); font-size:.73rem; }
.plate .pimg img { object-fit:contain; background:#0d0b09; }
.plate figcaption { font-size:.72rem; }

/* The native stage preserves the complete capture and its intrinsic proportions. */
.native-showcase { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr); gap:clamp(2rem,5vw,4rem); align-items:center; margin:0 0 3rem; padding:clamp(1.2rem,3vw,2.5rem); border:1px solid #cba97238; border-radius:10px; background:radial-gradient(ellipse at 25% 25%,#754e2e26,transparent 65%),linear-gradient(130deg,#2a2017,#100d0a); overflow:hidden; }
.native-stage { min-width:0; }
.native-stage .devices { padding:1rem 0 2rem; gap:1rem; align-items:flex-end; min-height:0; }
.native-stage .device.tablet { width:67%; padding:10px; border-radius:20px; }
.native-stage .device.phone { width:29%; padding:8px 5px; margin:0 0 2%; border-radius:23px; }
.native-stage .device .scr { aspect-ratio:auto; }
.native-stage .device.phone .scr { aspect-ratio:600/1304; border-radius:16px; }
.native-stage .device img { height:auto; object-fit:contain; filter:none; }
.native-stage .device::after { display:none; }
.native-stage .devices figcaption { bottom:-.1rem; font-size:.57rem; letter-spacing:.03em; text-transform:none; }
.native-stage .device { transition:transform .5s var(--ease); }
.native-copy .work-field { font:.63rem var(--mono); color:var(--accent); margin-bottom:.9rem; }
.native-copy h3 { font:400 clamp(2.2rem,4vw,3.4rem)/1.05 var(--display); letter-spacing:-.035em; margin-bottom:1.2rem; }
.native-copy p { color:var(--legible); font-size:.88rem; line-height:1.8; }
.native-features { list-style:none; margin:1.4rem 0; }
.native-features li { padding:.7rem 0; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }
.native-features strong { color:var(--text); font-weight:500; }
.native-actions { display:flex; flex-wrap:wrap; gap:.3rem 1rem; align-items:center; }
.native-actions .applink { margin:0; }
.native-actions small { color:var(--muted); font-size:.65rem; }
.native-context { margin:-1.4rem 0 2rem; color:var(--muted); font-size:.77rem; max-width:72ch; }
.native-context summary { cursor:pointer; color:var(--accent); padding:.6rem 0; }
.native-context p { margin-top:.5rem; line-height:1.8; }
#native-study,#music-film { scroll-margin-top:110px; }
.native-view-controls { display:flex; justify-content:center; gap:.5rem; margin:1rem 0 0; }
.native-view-controls button { border:1px solid var(--line); border-radius:4px; background:#17120e; color:var(--muted); font:.73rem var(--body); padding:.7rem .9rem; cursor:pointer; }
.native-view-controls button[aria-pressed="true"] { border-color:var(--accent); color:var(--accent-bright); }
.nat-grid { display:block; }
.apps { grid-template-columns:repeat(2,minmax(0,1fr)); }
.apps .app:first-child { grid-column:1/-1; }
.app { grid-template-columns:40px minmax(0,1fr); }
.app .st { grid-column:2; padding-top:.2rem; white-space:normal; }
.app .d,.app .facts { grid-column:2; }
.app .applink,.app .applink-note { grid-column:2; }
.app h3 { font-style:normal; }

.film { margin:3rem 0; display:grid; grid-template-columns:260px minmax(0,1fr); gap:3rem; align-items:center; border-top:1px solid var(--line); padding-top:2.5rem; }
.film-video { width:100%; max-height:550px; display:block; border:1px solid #7b6954; border-radius:24px; background:#080706; }
.film h3 { font:400 2.2rem var(--display); letter-spacing:-.02em; margin-bottom:1rem; }
.film p { max-width:57ch; font-size:.87rem; color:var(--legible); line-height:1.8; }
.film small { display:block; font-size:.69rem; color:var(--muted); margin-top:1rem; }
.film details { margin-top:1.4rem; font-size:.8rem; color:var(--muted); }
.film summary { color:var(--accent); cursor:pointer; padding:.5rem 0; }
.film ol { padding:1rem 0 0 1.2rem; max-width:55ch; line-height:1.9; }
.film .film-action { margin-top:1.2rem; }

.flow .stop { cursor:pointer; border-radius:4px; }
.flow .stop[aria-pressed="true"] .k { color:var(--accent-bright); }
.flow .stop[aria-pressed="true"] .nd { box-shadow:0 0 0 5px #cba97215; background:var(--accent); }
.flow-explanation { display:grid; grid-template-columns:1fr 2fr; gap:2rem; padding:1.5rem 1.7rem; border:1px solid var(--line); border-radius:5px; margin:-1rem 0 2.5rem; background:#211a1390; }
.flow-explanation h3 { font:400 1.4rem var(--display); }
.flow-explanation p { font-size:.83rem; color:var(--legible); line-height:1.8; }
.flow-explanation small { display:block; margin-top:.6rem; font-size:.68rem; color:var(--accent); }
.flow-help { margin:0 0 1.2rem; color:var(--muted); font-size:.73rem; }
.section-progress { position:fixed; top:0; left:0; height:2px; width:100%; transform-origin:left; transform:scaleX(0); background:var(--accent); z-index:105; pointer-events:none; }
.resume-shortcut { margin-top:1.2rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.resume-shortcut span { color:var(--muted); font-size:.73rem; }
.contact .big { font-size:clamp(2rem,6.5vw,5.5rem); }
.contact-sub { max-width:55ch; margin-inline:auto; }
.reveal { transition-duration:.6s; }

@media(min-width:1101px) { .native-stage { position:relative; } }
@media(min-width:901px) and (max-height:850px) {
  .hero-inner { padding-top:6.8rem; padding-bottom:2.5rem; }
  .hero h1 { font-size:clamp(5.5rem,8.1vw,7.7rem); }
  .hero-product { padding-top:2rem; }
  .hero-miniatures { margin-top:1rem; }
  .hero-miniatures a { padding:.55rem; }
  .hero-miniatures img { max-height:88px; width:100%; }
  .hero-product-note { margin-top:.8rem; }
  .hero-kicker { margin-bottom:1.25rem; }
}
@media(max-width:1100px) {
  .hero-inner { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); padding-top:7rem; gap:2rem; }
  .hero h1 { font-size:8.8vw; }
  .hero-product .mmi { display:block; }
  .hero-kicker .ln { display:none; }
  .hero-miniatures { margin-left:0; }
  .hero-product-note { margin-left:0; }
  .work-panel { grid-template-columns:minmax(0,1.8fr) minmax(220px,1fr); gap:1.7rem; }
  .native-showcase { grid-template-columns:1.3fr 1fr; gap:1.5rem; }
  .nav-links { gap:.8rem; }
  .nav-links a { font-size:.7rem; }
}
@media(max-width:900px) {
  .hero { min-height:auto; }
  .hero-inner { grid-template-columns:1fr; padding-top:7rem; padding-bottom:3rem; gap:2rem; }
  .hero h1 { font-size:clamp(5.2rem,13vw,7.5rem); }
  .hero-product { padding-top:1rem; max-width:650px; width:100%; margin:auto; }
  .hero-product .mmi { top:-7rem; right:1rem; width:105px; }
  .hero-screen { transform:none; }
  .hero-miniatures { display:none; }
  .hero-product-note { font-size:.62rem; }
  .hero-product-label { display:none; }
  .hero-rail { margin-top:1.3rem; }
  .nav-links { gap:1.1rem; padding:5rem 1.5rem 2rem; overflow-y:auto; }
  .nav-links a { font-size:1.05rem; }
  .work-panel { grid-template-columns:1fr; }
  .work-copy { display:grid; grid-template-columns:1fr 1fr; column-gap:2rem; }
  .work-copy .work-field,.work-copy h3,.work-copy > p { grid-column:1; }
  .work-notes { grid-column:2; grid-row:1/5; margin:0; }
  .work-copy .text-link { justify-self:start; }
  .native-showcase { grid-template-columns:1fr; }
  .native-stage { max-width:620px; width:100%; margin:auto; }
  .native-copy { padding-top:1.5rem; }
  .native-features { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
  .cw-item.cw-featured { grid-template-columns:1fr; }
  .cw-featured .cw-copy { padding-top:1rem; }
  .apps { grid-template-columns:1fr; }
  .film { grid-template-columns:230px minmax(0,1fr); gap:2rem; }
}
@media(max-width:600px) {
  .hero-inner { padding-top:6.4rem; }
  .hero h1 { font-size:clamp(4.8rem,20vw,6.5rem); }
  .hero-kicker { margin-bottom:1.4rem; }
  .hero-kicker .eyebrow { font-size:.58rem; letter-spacing:.12em; }
  .hero-sub { font-size:.96rem; }
  .hero-product .mmi { display:none; }
  .hero-ctas .btn { padding:.85rem 1rem; }
  .hero-rail { gap:.4rem .8rem; }
  .status-chip { font-size:.53rem; }
  .work-heading { display:block; }
  .work-heading p { margin-top:1rem; }
  .work-tabs { gap:0; }
  .work-tabs button { flex:1; padding:.8rem .45rem; font-size:.72rem; }
  .work-tabs button:first-child { padding-right:.5rem; }
  .work-copy { display:block; }
  .work-notes { margin:1rem 0; }
  .work-display figcaption { font-size:.61rem; }
  .work-route { flex-wrap:wrap; font-size:.69rem; }
  .reading-path { grid-template-columns:1fr; }
  .reading-path a { padding:1rem 1.15rem; }
  .cw-grid { grid-template-columns:1fr; gap:2.6rem; }
  .cw-item.cw-featured { padding:1rem; }
  .gallery-divider { display:block; }
  .gallery-divider p { margin-top:.5rem; }
  .native-showcase { padding:1rem; }
  .native-stage .devices { gap:.6rem; }
  .native-stage .device.tablet { padding:7px; border-radius:13px; }
  .native-stage .device.phone { padding:7px 3px; border-radius:13px; }
  .native-stage .device.phone .scr { border-radius:9px; }
  .native-stage .devices figcaption { font-size:.51rem; }
  .native-view-controls button { font-size:.66rem; padding:.65rem; }
  .native-features { display:block; }
  .native-copy h3 { font-size:2.65rem; }
  .app { padding:1rem; gap:.3rem .8rem; }
  .film { grid-template-columns:1fr; gap:2rem; }
  .film-video { max-width:260px; max-height:540px; margin:auto; }
  .flow-explanation { grid-template-columns:1fr; gap:.7rem; padding:1.2rem; }
  .contact .big { font-size:clamp(1.85rem,7.2vw,2.8rem); }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .hero h1 .ln span { transform:none; }
  .hero-kicker,.hero-sub { opacity:1; }
}
@media print {
  .section-progress,.hero-product,.work-tabs,.native-view-controls,.film-video,.film-action { display:none!important; }
  .work-panel[hidden] { display:block; }
  .work-panel,.native-showcase,.flow-explanation,.film,.work-copy { display:block; }
  .work-preview,.native-showcase { background:none; border:0; }
  .hero-inner { display:block; padding:0; }
  .work-copy,.work-display { break-inside:avoid; margin-block:1rem; }
}