/* Local direction: preserve the visor world, soften the surrounding interface. */
:root{--portfolio-mist:#16271f;--portfolio-warm:#d9b394;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
body{background-color:#121612;background-image:radial-gradient(ellipse at 8% 10%,#36514325,transparent 55%),radial-gradient(ellipse at 95% 50%,#8b65491a,transparent 58%);background-attachment:fixed}
h1,h2,h3{text-wrap:balance}.case-head h1{font-size:clamp(44px,6.4vw,92px);line-height:1.06;letter-spacing:-.045em;font-weight:400;max-width:18ch}.case-deck{line-height:1.5;letter-spacing:-.012em;color:#d3d5cc}.chapter-copy h2,.outcome h2{line-height:1.12;letter-spacing:-.035em}.reading h1{line-height:1.06;letter-spacing:-.04em}.eyebrow{letter-spacing:.025em;line-height:1.5}
.story-word{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;letter-spacing:-.045em;text-shadow:none}.story-tagline{line-height:1.55}.story-gesture,.story-arrow{animation:none!important;opacity:.8;transform:none!important}.story-chip{background:transparent!important;border-color:#d8d3bd28!important;box-shadow:none!important}
.six-card{border-radius:14px;background:linear-gradient(145deg,#35423966,#1b231d99);box-shadow:0 14px 40px #0002}.six-card>div{padding:14px 16px 17px}.six-card h3{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;letter-spacing:-.025em}.six-card p{line-height:1.5;color:#c4c9be}.six-card img{object-fit:cover!important;background:#162019}.six-card:hover img,.six-card:focus-visible img{filter:none}.six-card:focus-visible{outline:2px solid #efbd98;outline-offset:5px}
.archive-exit{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:10%;padding-block:80px 100px}.archive-exit h2{font-size:clamp(34px,4.6vw,64px);line-height:1.08;letter-spacing:-.04em;margin-bottom:24px}.archive-exit p{max-width:38ch;color:#bec8bd}.archive-exit nav{padding-top:30px;display:grid}.archive-exit nav a{display:flex;justify-content:space-between;gap:24px;padding:23px 0;text-decoration:none;border-bottom:1px solid #c8d5bb30;font-size:clamp(17px,1.6vw,22px);line-height:1.4}.archive-exit nav a span{color:#e8b78d}.archive-exit nav a:hover{color:#e8b78d}.archive-exit nav a:focus-visible{outline:2px solid #e8b78d;outline-offset:5px}
.project-card img{aspect-ratio:3/2;object-fit:contain;background:radial-gradient(ellipse at 40% 35%,#35483c,#1a231c)}.project-card h3{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.2;letter-spacing:-.025em}.hero-media{border-radius:14px;overflow:hidden}.hero-media img{background:radial-gradient(ellipse at 35% 25%,#344338,#18211b)}.outcome{border:1px solid #c7d2be1c;border-radius:22px;background:radial-gradient(ellipse at 0 0,#78908024,transparent 75%),linear-gradient(135deg,#25362b,#1a251e)}
/* Avoid coaching people to switch off an accessibility preference. */
.hx4-motion-note{display:none!important}
@media(max-width:700px){.archive-exit{grid-template-columns:1fr;gap:16px;padding-block:48px 64px}.archive-exit nav{padding-top:0}.archive-exit nav a{padding-block:18px}.case-head h1{font-size:clamp(38px,10vw,56px);line-height:1.08}.case-deck{font-size:19px}.six-card>div{padding:10px 12px 12px}.six-card h3{font-size:16px}.six-card p{font-size:12px}.outcome{border-radius:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.site-header.is-compact .brand-name{visibility:hidden}.site-header.is-compact .brand:hover .brand-name,.site-header.is-compact .brand:focus-visible .brand-name{visibility:visible}
/* A softer system-face study; final self-hosted family remains a design decision. */
:root{font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif}.story-word,.six-card h3,.project-card h3{font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif}.story-section-title h2{font-size:clamp(28px,3.1vw,44px);font-weight:500;line-height:1.15;letter-spacing:-.035em}.case-head h1{font-weight:500}
@supports(background-clip:text){.case-head h1,.archive-exit h2{color:transparent;background:linear-gradient(112deg,#f0f2e7 12%,#d4dfce 58%,#e7c6ab 100%);background-clip:text;-webkit-background-clip:text}}
@media(forced-colors:active){.case-head h1,.archive-exit h2{color:CanvasText;background:none}}
.archive-navigation{min-width:0}.archive-picker,.archive-research{border-bottom:1px solid #c8d5bb30}.archive-picker summary,.archive-research summary{display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;min-height:64px;list-style:none;font-size:19px}.archive-navigation summary::-webkit-details-marker{display:none}.archive-navigation details[open]>summary>span{transform:rotate(45deg)}.archive-projects{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;padding-bottom:20px;max-height:420px;overflow:auto}.archive-projects>a{display:block;text-decoration:none;padding:14px 0;border-bottom:1px solid #ffffff15;font-size:16px;line-height:1.4}.archive-projects>a>span{display:block;font-size:12px;color:#bbc5b8;margin-top:4px}.archive-exit .archive-pills{display:flex;gap:10px;flex-wrap:wrap;padding:24px 0}.archive-exit .archive-pills a{display:inline-flex;min-height:44px;padding:11px 17px;border:1px solid #d5ddc52e;border-radius:99px;font-size:15px;background:linear-gradient(130deg,#a3b19a14,#51644e0c)}.archive-research h3{font-size:24px;line-height:1.3;font-weight:400;letter-spacing:-.025em;margin-top:15px}.archive-research>a{display:inline-flex;min-height:44px;align-items:center;margin-bottom:20px}.finish-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin-top:30px}.finish-contact a{min-height:44px;display:inline-flex;align-items:center;font-size:16px;color:#e8c3a5}.compact-footer{margin-top:50px;padding-block:25px;border-color:#ffffff18}.compact-footer p{font-size:12px}.opening-finder{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;z-index:10;max-width:94%;padding:10px 14px;border:1px solid #ffffff22;border-radius:20px;background:#1d2923eb;font-size:13px}.opening-finder>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.opening-finder select{font:inherit;min-height:44px;max-width:230px;background:#253329;color:#f3f1e8;border:1px solid #ffffff30;border-radius:12px;padding:8px}.opening-finder a{white-space:nowrap;min-height:44px;display:flex;align-items:center}.story-dome .interaction-handoff{display:none}.story-dome .dome-controls{bottom:78px}.story-dome .dome-readout{bottom:130px}.story-dome .dome-surface{bottom:150px}.story-dome{position:relative}
@media(max-width:700px){.archive-projects{grid-template-columns:1fr}.opening-finder{bottom:0;padding:6px 10px;gap:8px;width:max-content}.opening-finder select{max-width:195px;font-size:12px}.opening-finder a{font-size:12px}.story-dome .dome-controls{bottom:64px}.story-dome .dome-readout{bottom:112px}.story-dome .dome-surface{bottom:150px}.finish-contact{gap:6px 20px}}
/* Browsing is a separate stop: one window, one scrollbar, no moving scene behind it. */
#project-browser{position:fixed;inset:0;width:min(980px,calc(100vw - 40px));max-width:none;height:min(86dvh,920px);max-height:none;margin:auto;padding:28px;background:linear-gradient(145deg,#28372c,#141e18 70%);border:1px solid #c7d6bc40;border-radius:24px;overflow:auto;overscroll-behavior:contain;color:#f0f2e9;box-shadow:0 30px 100px #0008}#project-browser::backdrop{background:#06100be8;backdrop-filter:blur(12px)}#project-browser header{display:flex;justify-content:space-between;align-items:start;gap:20px}#project-browser header h2{font-size:36px;line-height:1.1;margin:0 0 24px}#project-browser header button{float:none;flex:none;min-height:44px}.browser-tabs{display:flex;gap:8px;flex-wrap:wrap}.browser-tabs button{padding:10px 15px;font-size:13px;min-height:44px}.browser-tabs [aria-pressed=true]{background:#e7c4a1;color:#152018;border-color:#e7c4a1}.browser-count{font-size:13px;color:#b7c6b5;margin:20px 0 8px}.browser-projects{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.browser-project{display:grid;grid-template-columns:66px 1fr 16px;align-items:center;gap:14px;text-decoration:none;border-bottom:1px solid #ffffff20;padding:16px 0;min-width:0}.browser-project img{width:66px;height:52px;object-fit:cover;border-radius:7px}.browser-project strong{display:block;font-size:16px;font-weight:500;line-height:1.3}.browser-project small{display:block;font-size:12px;color:#bfcbba;line-height:1.4;margin-top:5px}.browser-project:hover strong{text-decoration:underline;text-underline-offset:4px}.browse-projects-button{width:100%;display:flex;justify-content:space-between;border:0;border-bottom:1px solid #ffffff30;border-radius:0;background:none;padding:18px 0;font-size:19px;min-height:60px}.opening-finder{bottom:70px;background:none;border:0;padding:0;gap:12px}.opening-finder button,.opening-finder>a{background:#233027e8;border:1px solid #ffffff35;padding:10px 16px;border-radius:99px;min-height:44px;font-size:13px}.story-dome .dome-readout{bottom:185px;max-width:250px;left:50%;right:auto;transform:translateX(-50%);width:80%;text-align:center}.story-dome .dome-readout a{font-size:14px;line-height:1.3}.story-dome .dome-readout p{font-size:11px;line-height:1.35;margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.story-dome .dome-controls{bottom:130px}.story-dome .dome-surface{bottom:225px}.web-overview section{padding-block:35px 65px}.web-overview section>h2{font-size:clamp(28px,3vw,42px);letter-spacing:-.035em}.web-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 28px}.web-overview-card{min-width:0;text-decoration:none}.web-overview-card img{aspect-ratio:3/2;object-fit:contain;border-radius:12px;background:#223026}.web-overview-card h3{font-size:25px;line-height:1.25;font-weight:400;letter-spacing:-.025em;margin:16px 0 8px}.web-overview-card p{font-size:14px;color:#bac8b5;line-height:1.5}
@media(max-width:700px){#project-browser{width:calc(100vw - 20px);height:90dvh;padding:20px;border-radius:20px}.browser-projects{grid-template-columns:1fr}#project-browser header h2{font-size:28px}.browser-project{padding-block:13px}.opening-finder{bottom:70px;flex-direction:column;gap:6px;max-width:100%;width:max-content}.opening-finder button,.opening-finder>a{font-size:12px;min-height:40px;padding:8px 14px}.story-dome .dome-controls{bottom:170px}.story-dome .dome-readout{bottom:220px}.story-dome .dome-surface{bottom:260px}.web-overview-grid{grid-template-columns:1fr}.web-overview section{padding-block:20px 40px}}

/* Accessibility pass 2026-10-29 (appended; nothing above is changed): 44px targets, 12px minimum text, footer links. */
.story-dome .dome-controls button{min-width:44px;min-height:44px}
.hx4-rail-bead{width:44px;height:44px;margin:-22px 0 0 -22px}
.journey-scroll{min-height:44px}
.hx4-rail-tip{font-size:12.5px}
.hx4-music-word{font-size:13px}
.story-dome .dome-readout p{font-size:12px}
.compact-footer p{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;line-height:1.5}
.compact-footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.story-chip,.eyebrow,.journey-scroll span,.opening-finder button,.dome-motion-toggle,.story-dome .dome-readout p,.dome-readout p{font-size:12px!important}
.journey-scroll{height:auto!important;min-height:44px!important}

/* Hero pass 2026-10-29 (appended; existing hero styles untouched): antenna-bead signature, one type role per element, quieter status chip. */
.story-word[data-word="0"]{position:relative}
.hero-bead{position:absolute;left:50%;top:-30px;width:16px;height:16px;margin-left:-8px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 38% 34%,#ffd2a3,#ff9a59 45%,#f08a4b 75%);box-shadow:0 0 14px 4px #f08a4b66,0 0 38px 10px #f08a4b26;opacity:0;animation:hero-bead-in 1.2s .15s cubic-bezier(.22,1,.36,1) forwards,hero-bead-glow 5s 1.4s ease-in-out infinite}
.hero-bead::before{content:"";position:absolute;left:50%;bottom:100%;width:1.5px;height:22px;margin-left:-.75px;background:linear-gradient(#f08a4b00,#f08a4b99)}
@keyframes hero-bead-in{from{opacity:0;transform:translateY(8px) scale(.5)}to{opacity:1;transform:none}}
@keyframes hero-bead-glow{0%,100%{box-shadow:0 0 14px 4px #f08a4b66,0 0 38px 10px #f08a4b26}50%{box-shadow:0 0 18px 6px #f08a4b8c,0 0 52px 16px #f08a4b33}}
@media(max-width:700px){.hero-bead{top:-26px}}
@media(prefers-reduced-motion:reduce){.hero-bead{animation:none;opacity:1}}
button,summary,.hx4-music{font-family:inherit}
.story-chip{background:none;border-color:#d3dfc61f;color:#c3cdba}

/* Dome bottom stack + rail pass 2026-10-29 (appended). The dome card now ends at the viewport bottom, so its controls no longer drift under the scroll bubble on short screens. Stack, bottom to top: rail, one row (arrows flank the scroll bubble), project name + descriptor. */
html .motion-story .story-dome{height:auto;bottom:0}
html .motion-story .story-dome .dome-surface{bottom:196px}
html .motion-story .story-dome .dome-readout{bottom:120px}
html .motion-story .story-dome .dome-readout a{font-family:var(--display-face);font-size:22px!important;line-height:1.15;letter-spacing:.01em;font-weight:400}
html .motion-story .story-dome .dome-readout p{font-size:12px!important;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-inline:auto}
html .motion-story .story-dome .dome-controls{bottom:58px;left:50%;right:auto;width:min(300px,calc(100vw - 32px));transform:translateX(-50%);justify-content:space-between;gap:0}
html .opening-finder{bottom:58px;left:max(16px,3vw)}
.journey-scroll{bottom:58px}
@media(max-width:700px){html .motion-story .story-dome{inset:8vh 3vw 0}}
/* Touch and phone: the "Allow tilt" toggle sits above the scroll bubble, the readout above it, and Browse above that. */
@media(max-width:700px),(pointer:coarse){
 html .motion-story .story-dome .dome-controls .dome-motion-toggle{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);margin:0}
 html .motion-story .story-dome .dome-readout{bottom:162px}
 html .opening-finder{bottom:236px;left:50%;transform:translateX(-50%)!important;max-width:none}
 html .motion-story .story-dome .dome-surface{bottom:296px}
}
/* Rail: glass slab in the shared 22px language, hairline track, small flat beads; the current bead carries the antenna-bead glow. */
.hx4-rail{isolation:isolate}
.hx4-rail::before{content:"";position:absolute;inset:-9px -22px;z-index:-1;border-radius:22px;border:1px solid var(--ui-edge);background:var(--ui-glass),#0b1511b8;box-shadow:inset 0 1px 0 #ffffff08}
.hx4-rail-track{height:1px;margin-top:-.5px;background:#d3dfc633}
.hx4-rail-fill{background:linear-gradient(90deg,#f08a4b55,#f08a4b)}
.hx4-rail-bead::before{width:8px;height:8px;margin:-4px 0 0 -4px;background:#0e2620;border:1px solid #d3dfc680;box-shadow:none}
.hx4-rail-bead.is-reached::before{background:#f08a4b;border-color:#f08a4b}
.hx4-rail-bead.is-here::before{transform:scale(1.6);background:#ff9a59;border-color:#ffd2a3;box-shadow:0 0 0 4px #f08a4b26,0 0 14px 3px #f08a4b99}
html .hx4-rail-tip{font-family:var(--display-face);font-weight:400;font-size:14px;letter-spacing:.02em;border-radius:22px;padding:.4em .9em;bottom:30px}

/* The antenna light becomes the dot of the opening wordmark's j. */
.hero-j{position:relative}.hero-j-stem{display:inline-block;clip-path:inset(30% 0 0 0)}
.hero-j .hero-bead{left:52%;top:19%;width:.15em;height:.15em;margin-left:-.075em;border-radius:46% 54% 50% 50% / 55% 52% 48% 45%;}
.hero-j .hero-bead::before{height:.18em;width:1px}
/* Fine positioning and a softly irregular silhouette for the j's illuminated dot. */
.hero-j .hero-bead{left:61%;border-radius:43% 57% 47% 53% / 56% 43% 57% 44%;transform:rotate(-8deg)}
@keyframes hero-bead-in{from{opacity:0;transform:translateY(8px) scale(.5) rotate(-8deg)}to{opacity:1;transform:rotate(-8deg)}}
/* Draw the light as an organic, hand-shaped drop instead of a CSS circle. */
.hero-j .hero-bead{left:65%;width:.17em;height:.18em;margin-left:-.085em;border-radius:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 108'%3E%3Cdefs%3E%3CradialGradient id='g' cx='35%25' cy='29%25' r='75%25'%3E%3Cstop stop-color='%23ffe1bc'/%3E%3Cstop offset='.38' stop-color='%23ffae70'/%3E%3Cstop offset='1' stop-color='%23e7783d'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M54 5 C67 6 75 15 79 25 C83 33 94 39 94 55 C95 75 84 91 68 98 C52 105 33 101 21 92 C10 83 6 70 9 55 C11 43 20 35 25 25 C31 13 40 5 54 5 Z' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;box-shadow:none;filter:drop-shadow(0 0 .12em #ff9959aa) drop-shadow(0 0 .27em #ef824b88)}
@keyframes hero-bead-glow{0%,100%{filter:drop-shadow(0 0 .12em #ff9959aa) drop-shadow(0 0 .27em #ef824b88)}50%{filter:drop-shadow(0 0 .16em #ffb176cc) drop-shadow(0 0 .36em #ef824baa)}}
@media(forced-colors:active){.hero-j .hero-bead{background:CanvasText;forced-color-adjust:auto;border-radius:45%}}