/* Hallmark · shape: Marquee Hero · genre: playful · theme: Hum (deal 1/3, adapted to user's motion references) · job: hire · draw: 669fe6
 * hero: Stage · nav: edge-aligned · footer: mast · imagery: procedural 3D geometry · signature: a portal becomes a connected system
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pending · fold: pending · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: execution, verify every pinned scene and its static alternative */
/* User-directed: sustained scroll choreography and interactive 3D are the requested portfolio artifact; these replace theme motion limits. */
@import url('./tokens.css?v=d31749431e1f');
@import url('./base.css?v=d40aef16afa3');

:root { --space-20: 20px; --space-28: 28px; --space-32: 32px; --space-36: 36px; --space-44: 44px; --space-48: 48px; --space-56: 56px; --space-72: 72px; --space-80: 80px; --space-88: 88px; --space-100: 100px; --space-108: 108px; --space-112: 112px; --space-120: 120px; --space-128: 128px; --space-140: 140px; }
@font-face { font-family: 'Chillax'; src: url('./assets/chillax-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Chillax'; src: url('./assets/chillax-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Chillax'; src: url('./assets/chillax-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
:root {
  --color-paper: #f4f2e9; --color-paper-2: #e9e8df; --color-paper-3: #dedfd3;
  --color-ink: #202826; --color-ink-2: #34413b; --color-muted: #59615b; --color-rule: #c8cdc0;
  --color-accent: #d4e766; --color-accent-deep: #a6b64a; --color-focus: #3160bd;
  --color-blue: #87a9e0; --color-blue-deep: #5276b1; --color-blue-light: #bdd0ed;
  --color-orange: #ee9875; --color-orange-deep: #b5654b; --color-orange-light: #f6ba9e;
  --color-lime-light: #e6f48e; --color-mint: #b6d0bb; --color-mint-deep: #7b9e83;
  --color-mint-light: #d2e5cf; --color-dark-light: #4c5b50; --color-dark-deep: #111a16;
  --color-dark-muted: #bfc7b7; --color-dark-rule: #4c584a; --color-cream: #f4f2e9;
  --color-site: #eaf0f4; --color-site-accent: #bc402a; --color-site-ink: #172d42;
  --color-shadow: #20282624; --color-shadow-strong: #20282645; --color-clear: transparent;
  --container: 1440px; --gutter: 64px; --gap-columns: 32px;
  --font-display: 'Chillax', ui-sans-serif, sans-serif; --font-body: var(--font-display);
  --display-weight: 600; --tracking-display: -.04em; --radius-card: 16px;
  --ease-out: cubic-bezier(.16,1,.3,1); --dur-short: 240ms; --header-height: 96px;
}
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body { font-size: 16px; font-weight: 400; }
button, a, summary { -webkit-tap-highlight-color: var(--color-clear); }
button { cursor: pointer; color: inherit; }
a { text-decoration: none; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 6px; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.skip { position: fixed; z-index: 600; inset: 12px auto auto 12px; transform: translateY(-180%); padding: var(--space-sm) var(--space-lg); background: var(--color-accent); }
.skip:focus-visible { transform: none; }
.site-header { height: var(--header-height); position: relative; z-index: 300; }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.wordmark { display: flex; gap: var(--space-sm); align-items: center; font-size: 17px; font-weight: 600; line-height: 1.05; letter-spacing: -.03em; }
.monogram { display: flex; font-size: 42px; font-weight: 600; letter-spacing: -.18em; line-height: 1; padding-right: var(--space-xs); }
.monogram > span { transform: translateY(5px); }
.nav-inner nav { display: flex; gap: var(--space-36); padding-left: var(--space-48); }
.nav-inner nav a { font-size: 14px; padding: var(--space-sm) 0; }
.nav-inner nav a:hover, .text-link:hover, .footer-bottom a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-contact { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-sm) 0; font-size: 15px; }
.nav-contact svg { width: 18px; height: 18px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-lg); padding: var(--space-sm) var(--space-lg); min-height: 52px; border-radius: 8px; border: 1px solid var(--color-clear); font-size: 15px; font-weight: 500; transition: transform var(--dur-short) var(--ease-out); }
.button:hover { transform: translateY(-3px); }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--color-accent); color: var(--color-ink); }
.button.secondary { border-color: var(--color-ink); color: var(--color-ink); }
.button svg { width: 18px; height: 18px; }
.text-link { display: inline-flex; align-items: center; gap: var(--space-md); font-size: 15px; font-weight: 500; min-height: 44px; }
.text-link svg { width: 19px; height: 19px; }

.story-section { background: var(--color-paper); color: var(--color-ink); padding-block: var(--space-88); }
.story-heading-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-32); }
.story-heading-row h2 { font-size: clamp(36px, 4.3vw, 62px); line-height: 1.08; max-width: 20ch; }
.story-heading-row > p { font-size: 14px; color: var(--color-muted); }
.story-window { overflow: clip; }
.story-panel { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: center; gap: var(--space-80); min-height: 560px; padding-block: var(--space-xl); }
.story-art { min-height: 340px; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.giant-symbol { font-size: 360px; line-height: .95; font-weight: 600; color: var(--color-ink); transform: rotate(-13deg); }
.orbit-word { position: absolute; font-size: 15px; padding: var(--space-xs) var(--space-20); border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-paper); }
.orbit-a { left: 5%; top: 23%; transform: rotate(-10deg); }
.orbit-b { right: 3%; top: 31%; transform: rotate(12deg); }
.orbit-c { left: 14%; bottom: 6%; transform: rotate(8deg); }
.chapter-location { font-size: 14px; color: var(--color-muted); display: block; margin-bottom: var(--space-lg); }
.story-copy h3 { font-size: clamp(32px,3.5vw,48px); line-height: 1.1; }
.story-copy p { max-width: 39ch; color: var(--color-muted); margin-top: var(--space-lg); font-size: 16px; line-height: 1.7; }
.learning-type { font-size: clamp(64px, 7.5vw, 108px); font-weight: 500; line-height: .98; color: var(--color-blue-deep); letter-spacing: -.04em; transform: rotate(-7deg); }
.company-type { font-size: 220px; font-weight: 600; color: var(--color-blue-deep); line-height: 1.1; letter-spacing: -.04em; }
.route-lines { width: 85%; display: grid; gap: var(--space-sm); transform: rotate(-7deg); margin-top: var(--space-md); }
.route-lines i { height: 1px; background: var(--color-rule); }
.amazon-type { font-size: clamp(60px,8vw,120px); color: var(--color-ink); }
.amazon-arc { width: 75%; height: 80px; color: var(--color-orange); stroke-width: 7; margin-top: var(--space-2xs); }
.founder-v { font-size: 180px; font-weight: 600; line-height: 1; letter-spacing: -.25em; padding-right: .2em; color: var(--color-orange-deep); transform: rotate(-8deg); }
.founder-v > span { color: var(--color-ink); }
.founder-caption { font-size: 24px; line-height: 1.2; margin-top: var(--space-36); text-align: center; }
.story-nav { display: none; }
.motion-on .story-section { height: 440svh; padding-block: 0; }
.motion-on .story-pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding-block: var(--space-56) var(--space-xl); overflow: clip; }
.motion-on .story-heading-row { flex: 0 0 auto; }
.motion-on .story-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; }
.motion-on .story-panel { width: 100%; min-height: 0; height: min(53svh,560px); }
.motion-on .story-art { min-height: 0; height: 100%; }
.motion-on .story-nav { display: flex; gap: var(--space-32); position: relative; flex: 0 0 auto; }
.story-nav button { background: var(--color-clear); border: 0; color: var(--color-muted); font-size: 12px; padding: var(--space-md) 0; flex: 1; text-align: left; }
.story-nav button[aria-current='step'] { color: var(--color-ink); text-decoration: underline; text-underline-offset: 6px; }
.story-progress { position: absolute; bottom: 0; height: 2px; left: var(--gutter); right: var(--gutter); background: var(--color-rule); }
.story-progress span { display: block; height: 100%; background: var(--color-ink); transform: scaleX(.2); transform-origin: left; }

.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-32); margin-bottom: var(--space-72); }
.section-heading h2 { font-size: clamp(40px,4.5vw,64px); }
.section-heading p { font-size: 15px; color: var(--color-muted); max-width: 27ch; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

.expertise-section { padding-block: var(--space-112); background: var(--color-paper); }
.expertise-section h2 { font-size: clamp(42px,5vw,72px); margin-bottom: var(--space-2xl); max-width: 23ch; }
.expertise-list > details { border-top: 1px solid var(--color-rule); }
.expertise-list > details:last-child { border-bottom: 1px solid var(--color-rule); }
.expertise-list summary { display: flex; align-items: center; gap: var(--space-32); padding-block: var(--space-lg); }
.expertise-list summary > span:first-child { font-size: clamp(27px,3.3vw,46px); font-weight: 500; letter-spacing: -.04em; flex: 1; }
.expertise-list .service-label { font-size: 13px; color: var(--color-muted); min-width: 220px; }
.plus { font-size: 32px; transition: transform var(--dur-short) var(--ease-out); }
.expertise-list details[open] .plus { transform: rotate(45deg); }
.service-detail { display: flex; gap: var(--space-48); align-items: flex-end; justify-content: space-between; padding: var(--space-2xs) 0 var(--space-32); }
.service-detail p { max-width: 56ch; color: var(--color-ink-2); line-height: 1.7; }
.service-detail a { min-width: 220px; font-size: 13px; text-decoration: underline; text-underline-offset: 5px; min-height: 44px; display: flex; align-items: center; }
.human-section { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-72); align-items: center; padding-block: var(--space-140); }
.human-copy h2 { font-size: clamp(38px,4vw,58px); }
.human-copy > p { margin-top: var(--space-28); max-width: 39ch; color: var(--color-muted); line-height: 1.7; }
.human-copy .human-last { font-size: 14px; }
.human-type { min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); }
.human-type > span { font-size: clamp(20px,2.8vw,38px); font-weight: 500; letter-spacing: -.03em; padding: var(--space-sm) var(--space-lg) var(--space-md); line-height: 1.15; border-radius: 9px; box-shadow: 3px 8px 12px var(--color-shadow); }
.human-travel { background: var(--color-blue); transform: rotate(-10deg) translateX(-24px); }
.human-pizza { background: var(--color-orange); transform: rotate(7deg) translateX(20px); }
.human-icecream { background: var(--color-mint); transform: rotate(-5deg) translateX(-25px); }
.human-ai { background: var(--color-accent); transform: rotate(8deg) translateX(15px); }
.contact-section { background: var(--color-paper); color: var(--color-ink); padding-top: var(--space-100); overflow: clip; }
.contact-section h2 { font-size: clamp(52px,7.2vw,104px); max-width: 15ch; line-height: 1.04; }
.contact-options { display: flex; gap: var(--space-md); margin-top: var(--space-xl); }
.email-row { display: flex; align-items: center; gap: var(--space-20); margin-top: var(--space-xl); flex-wrap: wrap; }
.email-row > a { font-size: clamp(18px,2vw,28px); }
.email-row > a:hover { text-decoration: underline; text-underline-offset: 6px; }
#copy-email { display: flex; align-items: center; gap: var(--space-xs); background: var(--color-clear); border: 0; color: var(--color-muted); padding: var(--space-sm); font-size: 12px; }
#copy-email svg { width: 16px; height: 16px; }
#copy-status { color: var(--color-ink); font-size: 12px; }
.footer-bottom { margin-top: var(--space-80); padding-top: var(--space-28); border-top: 1px solid var(--color-rule); display: flex; gap: var(--space-lg); align-items: center; justify-content: space-between; color: var(--color-muted); font-size: 12px; }
.footer-year { margin-left: var(--space-sm); }
.motion-toggle { color: inherit; font-size: inherit; background: var(--color-clear); border: 0; padding: var(--space-sm) 0; min-height: 44px; }
.footer-name { font-size: clamp(100px,19vw,260px); line-height: 1.05; letter-spacing: -.04em; font-weight: 600; color: var(--color-ink); margin-top: var(--space-28); transform-origin: bottom left; }
@media (max-width: 1150px) {
  :root { --gutter: 40px; }
}
@media (max-width: 899px) {
  :root { --gutter: 28px; --header-height: 84px; }
  .nav-inner nav { gap: var(--space-lg); padding-left: 0; }
  .nav-inner nav a { font-size: 12px; }
  .motion-on .story-section { height: auto; padding-block: var(--space-2xl); }
  .motion-on .story-pin { position: static; height: auto; padding: 0; overflow: visible; }
  .motion-on .story-track { display: block; }
  .motion-on .story-panel, .story-panel { min-height: 550px; height: auto; gap: var(--space-xl); }
  .story-heading-row h2 { font-size: 43px; }
  .story-heading-row > p { font-size: 12px; }
  .story-copy h3 { font-size: 36px; }
  .story-copy p { font-size: 14px; }
  .motion-on .story-nav { display: none; }
  .giant-symbol { font-size: 280px; }
  .company-type { font-size: 150px; }
  .amazon-type { font-size: 61px; }
  .orbit-word { font-size: 12px; padding: var(--space-xs) var(--space-sm); }
  .founder-v { font-size: 140px; }
  .section-heading { margin-bottom: var(--space-56); }
  .section-heading h2 { font-size: 47px; }
  .human-section { gap: var(--space-32); padding-block: var(--space-88); }
  .human-copy h2 { font-size: 42px; }
  .human-type > span { font-size: 26px; }
  .footer-bottom { flex-wrap: wrap; }
  .footer-bottom > span:nth-child(2) { display: none; }
}
@media (max-width: 599px) {
  :root { --gutter: 22px; --header-height: 78px; }
  .wordmark { font-size: 14px; gap: var(--space-xs); }
  .monogram { font-size: 35px; }
  .nav-inner nav { display: none; }
  .nav-contact { font-size: 13px; gap: var(--space-sm); }
  .button { padding: var(--space-sm) var(--space-20); gap: var(--space-md); min-height: 52px; font-size: 13px; }
  .story-heading-row { align-items: flex-start; }
  .story-heading-row h2 { font-size: 34px; }
  .story-heading-row > p { display: none; }
  .motion-on .story-panel, .story-panel { grid-template-columns: minmax(0,1fr); gap: var(--space-20); min-height: 0; padding-top: var(--space-xl); padding-bottom: var(--space-72); }
  .motion-on .story-art, .story-art { height: 260px; min-height: 260px; }
  .giant-symbol { font-size: 255px; }
  .orbit-a { left: 7%; }
  .orbit-b { right: 6%; }
  .orbit-c { bottom: 6%; }
  .story-copy { padding-top: var(--space-sm); }
  .chapter-location { margin-bottom: var(--space-md); font-size: 12px; }
  .story-copy h3 { font-size: 34px; }
  .story-copy p { max-width: 42ch; font-size: 15px; margin-top: var(--space-md); }
  .company-type { font-size: 160px; }
  .amazon-type { font-size: 75px; }
  .amazon-arc { width: 75%; height: 60px; }
  .founder-v { font-size: 130px; }
  .founder-caption { font-size: 19px; margin-top: var(--space-md); }
  .section-heading { display: block; margin-bottom: var(--space-xl); }
  .section-heading h2 { font-size: 39px; }
  .section-heading p { margin-top: var(--space-lg); font-size: 14px; }
  .expertise-section { padding-block: var(--space-2xl); }
  .expertise-section h2 { font-size: 38px; margin-bottom: var(--space-xl); }
  .expertise-list summary { gap: var(--space-sm); padding-block: var(--space-lg); flex-wrap: wrap; position: relative; }
  .expertise-list summary > span:first-child { font-size: 30px; flex-basis: 85%; }
  .expertise-list .service-label { font-size: 12px; flex-basis: 85%; }
  .plus { position: absolute; right: 0; top: 30px; font-size: 28px; }
  .service-detail { display: block; padding-bottom: var(--space-lg); }
  .service-detail p { font-size: 15px; }
  .service-detail a { margin-top: var(--space-md); }
  .human-section { grid-template-columns: minmax(0,1fr); padding-block: var(--space-80) var(--space-2xl); gap: var(--space-lg); }
  .human-copy h2 { font-size: 38px; }
  .human-copy > p { font-size: 15px; }
  .human-type { min-height: 310px; }
  .human-type > span { font-size: 29px; }
  .contact-section { padding-top: var(--space-2xl); }
  .contact-section h2 { font-size: 49px; }
  .contact-options { flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-32); }
  .email-row { gap: var(--space-xs); margin-top: var(--space-28); }
  .email-row > a { font-size: 19px; }
  #copy-email { font-size: 12px; padding: var(--space-sm) var(--space-xs); }
  .footer-bottom { margin-top: var(--space-48); gap: var(--space-sm) var(--space-lg); font-size: 12px; }
  .footer-bottom > span { flex-basis: 100%; }
  .footer-name { font-size: 20vw; margin-top: var(--space-lg); line-height: 1.25; }
}
@media (max-height: 730px) and (min-width: 900px) {
  .motion-on .story-pin { padding-block: var(--space-32) var(--space-20); }
  .story-heading-row h2 { font-size: 42px; }
  .giant-symbol { font-size: 250px; }
  .story-copy h3 { font-size: 36px; }
  .story-copy p { font-size: 14px; margin-top: var(--space-md); }
  .chapter-location { margin-bottom: var(--space-md); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-on .story-section { height: auto; }
  .motion-on .story-pin { position: static; height: auto; }
  .motion-on .story-track { display: block; }
  .motion-on .story-nav { display: none; }
}

button:disabled { opacity: .65; cursor: not-allowed; }

/* The career film keeps its scroll-driven sequence on narrow screens too. */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
 .motion-on .story-section { height: 440svh; padding-block: 0; }
 .motion-on .story-pin { position: sticky; top: 0; height: 100svh; padding-block: var(--space-32) var(--space-lg); overflow: clip; }
 .motion-on .story-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; }
 .motion-on .story-panel { min-height: 0; height: 60svh; padding-block: var(--space-md); }
 .motion-on .story-art { height: 100%; min-height: 0; transform: none !important; }
 .motion-on .story-nav { display: flex; gap: var(--space-md); }
 .story-nav button { font-size: 12px; text-align: center; }
}
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
 .motion-on .story-pin { padding-top: var(--space-lg); padding-bottom: var(--space-md); }
 .motion-on .story-heading-row h2 { font-size: 30px; }
 .motion-on .story-panel { grid-template-rows: 26svh auto; align-content: center; gap: var(--space-md); height: 67svh; }
 .motion-on .story-art { height: 26svh; min-height: 0; }
 .motion-on .story-art .giant-symbol { font-size: min(26svh, 240px); }
 .motion-on .story-art .company-type { font-size: min(19svh, 150px); }
 .motion-on .story-art .amazon-type { font-size: 64px; }
 .motion-on .story-art .founder-v { font-size: 100px; }
 .motion-on .story-art .founder-caption { font-size: 17px; margin-top: var(--space-sm); }
 .motion-on .story-copy h3 { font-size: 30px; }
 .motion-on .story-copy p { font-size: 14px; margin-top: var(--space-sm); }
 .motion-on .story-nav { gap: var(--space-xs); }
 .motion-on .story-nav button { font-size: 11px; line-height: 1.4; padding-block: var(--space-sm); }
 .chapter-location { margin-bottom: var(--space-sm); }
}

/* The cream scenes use the same blue focus ring as the portal. */

@media (max-width: 599px) { .learning-type { font-size: min(8svh, 64px); } }


.human-type > span { padding-block: var(--space-md) var(--space-20); }

.credentials-section { padding-block: var(--space-112); }
.credentials-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: var(--space-100); }
.credentials-layout h3 { font-size: 18px; font-weight: 500; margin-bottom: var(--space-28); }
.certification { display: flex; align-items: center; gap: var(--space-lg); padding-block: var(--space-28); border-top: 1px solid var(--color-rule); }
.certification h4 { font-size: 19px; font-weight: 500; line-height: 1.35; }
.certification p { color: var(--color-muted); font-size: 15px; margin-top: var(--space-xs); }
.credential-date { display: block; font-size: 12px; margin-top: var(--space-md); color: var(--color-muted); }
.cert-mark { font-size: 38px; line-height: 1; font-weight: 600; letter-spacing: -.04em; width: 68px; flex: 0 0 68px; }
.cert-mark svg { width: 64px; height: 22px; color: var(--color-ink); display: block; }
.azure-mark { width: 44px; height: 44px; margin-inline: var(--space-md) var(--space-sm); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs); flex-shrink: 0; }
.azure-mark i { background: var(--color-blue-deep); }
.publication { display: flex; align-items: flex-start; gap: var(--space-28); border-top: 1px solid var(--color-rule); padding-block: var(--space-28); }
.publication > div { flex: 1; }
.publication-meta { display: block; font-size: 12px; color: var(--color-muted); }
.publication h4 { font-size: 23px; line-height: 1.3; font-weight: 500; margin-top: var(--space-md); }
.publication p { font-size: 14px; line-height: 1.65; color: var(--color-muted); margin-top: var(--space-md); }
.publication svg { margin-top: var(--space-xs); width: 20px; height: 20px; transition: transform 220ms var(--ease-out); }
.publication:hover h4 { text-decoration: underline; text-underline-offset: 5px; }
.publication:hover svg { transform: translate(3px, -3px); }
@media (max-width: 1150px) {
 .credentials-layout { gap: var(--space-56); }
}
@media (max-width: 899px) {
 .credentials-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-56); }
 .credentials-section { padding-block: var(--space-80); }
}
@media (max-width: 599px) {
 .certification h4 { font-size: 18px; }
 .publication h4 { font-size: 21px; }
 .credentials-layout h3 { margin-bottom: var(--space-lg); }
}
@media (max-height: 730px) and (min-width: 900px) {
}

/* Enter the idea — a scene, a journey, and the person who builds it. */
.site-header { position: absolute; inset: 0 0 auto; background: transparent; }
.portal-section { position: relative; background: var(--color-paper); }
.portal-pin { position: relative; height: 100svh; min-height: 640px; overflow: clip; isolation: isolate; }
.motion-on .portal-section { height: 340svh; }
.motion-on .portal-pin { position: sticky; top: 0; height: 100svh; }
#portal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; }
.portal-fallback { position: absolute; inset: 0; display: grid; place-items: center; perspective: 800px; overflow: hidden; }
.portal-fallback i { position: absolute; width: 82vw; height: 62vh; border: clamp(16px, 3.5vw, 56px) solid var(--color-blue); border-radius: 20%; transform: rotate(-12deg); box-shadow: 10px 18px 35px var(--color-shadow); }
.portal-fallback i:nth-child(2) { width: 68vw; height: 52vh; border-color: var(--color-mint); transform: rotate(-6deg); }
.portal-fallback i:nth-child(3) { width: 55vw; height: 43vh; border-color: var(--color-accent); transform: rotate(3deg); }
.portal-fallback i:nth-child(4) { width: 42vw; height: 34vh; border-color: var(--color-orange); transform: rotate(9deg); }
.portal-fallback i:nth-child(5) { width: 29vw; height: 24vh; border-color: var(--color-ink); transform: rotate(16deg); }
.portal-titles { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.portal-title { position: absolute; font-size: clamp(68px, 8.6vw, 124px); line-height: .98; letter-spacing: -.04em; font-weight: 500; text-align: center; margin: 0; text-wrap: initial; }
.portal-title-first { font-size: clamp(96px, 15.8vw, 228px); font-weight: 600; letter-spacing: -.04em; }
.portal-title:not(.portal-title-first) { opacity: 0; visibility: hidden; }
.portal-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; padding-top: var(--space-lg); padding-bottom: var(--space-28); gap: var(--space-32); background: transparent; }
/* The artwork continues behind the chrome; only the lettering needs separation. */
.site-header a, .portal-bottom { -webkit-text-stroke: 2px var(--color-paper); paint-order: stroke fill; }
.portal-work { align-self: end; justify-self: start; padding-block: var(--space-xs); }
.portal-work svg { width: 16px; height: 16px; }
.portal-journey { display: flex; align-items: center; flex-direction: column; }
.portal-enter { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); min-height: 44px; background: transparent; border: 0; font-size: 14px; font-weight: 500; padding: var(--space-sm) var(--space-lg); }
.portal-enter svg { width: 17px; height: 17px; transition: transform 250ms var(--ease-out); }
.portal-enter:hover svg { transform: translateY(4px); }
.portal-chapters { display: flex; gap: var(--space-28); border-top: 1px solid var(--color-rule); margin-top: var(--space-sm); }
.portal-chapters button { background: transparent; color: var(--color-muted); border: 0; min-height: 44px; padding: var(--space-sm) 0; font-size: 12px; position: relative; }
.portal-chapters button::before { content: ''; position: absolute; inset: -1px 0 auto; height: 2px; background: var(--color-ink); transform: scaleX(0); transition: transform 220ms var(--ease-out); }
.portal-chapters button[aria-current] { color: var(--color-ink); }
.portal-chapters button[aria-current]::before { transform: scaleX(1); }
.portal-options { display: flex; flex-wrap: wrap; justify-content: end; align-items: center; column-gap: var(--space-md); row-gap: var(--space-xs); font-size: 12px; }
.portal-options .motion-toggle { min-height: 44px; }
.portal-skip { display: inline-flex; align-items: center; justify-content: flex-end; flex-basis: 100%; min-height: 36px; color: var(--color-muted); text-decoration: underline; text-underline-offset: 4px; }
.portal-pause { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--color-rule); border-radius: 50%; background: none; }
.portal-pause svg { width: 15px; height: 15px; }
.play-icon { display: none; }
.portal-pause[aria-pressed='true'] .pause-icon { display: none; }
.portal-pause[aria-pressed='true'] .play-icon { display: block; }
.portal-progress { position: absolute; inset: auto 0 0; height: 3px; z-index: 5; }
.portal-progress span { display: block; width: 100%; height: 100%; background: var(--color-ink); transform: scaleX(0); transform-origin: left; }
html:not(.motion-on) .portal-chapters, html:not(.motion-on) .portal-pause, html:not(.motion-on) .portal-progress { display: none; }
html:not(.motion-on) .portal-title-first { opacity: 1 !important; visibility: visible !important; transform: none !important; }
html:not(.js) .portal-enter, html:not(.js) .portal-options .motion-toggle { display: none; }
.portal-unavailable #portal-canvas { display: none; }
@media (max-width: 1150px) {
 .portal-bottom { gap: var(--space-lg); }
 .portal-work { font-size: 13px; }
}
@media (max-width: 899px) {
 .portal-title-first { font-size: 18vw; }
 .portal-title { font-size: clamp(60px, 10vw, 90px); }
 .portal-title-first { font-size: 18vw; }
 .portal-bottom { grid-template-columns: 1fr 1fr; }
 .portal-journey { grid-column: 1 / -1; grid-row: 1; }
 .portal-options { flex-wrap: nowrap; }
 .portal-options .motion-toggle { font-size: 12px; }
 .portal-skip { display: none; }
}
@media (max-width: 599px) {
 .portal-pin { min-height: 600px; }
 .portal-title { font-size: clamp(48px, 12.5vw, 76px); }
 .portal-title-first { font-size: 23vw; }
 .portal-bottom { padding-bottom: var(--space-md); row-gap: var(--space-xs); }
 .portal-journey { align-items: stretch; }
 .portal-enter { font-size: 13px; }
 .portal-chapters { justify-content: center; gap: var(--space-32); margin-top: var(--space-xs); }
 .portal-chapters button { font-size: 11px; min-height: 36px; }
 .portal-pause { width: 36px; height: 36px; }
 .portal-options { gap: var(--space-xs); }
 .portal-options .motion-toggle { font-size: 12px; white-space: nowrap; }
 .portal-work { font-size: 12px; gap: var(--space-sm); }
 .portal-fallback i { width: 140vw; }
 .portal-fallback i:nth-child(2) { width: 116vw; }
 .portal-fallback i:nth-child(3) { width: 92vw; }
 .portal-fallback i:nth-child(4) { width: 68vw; }
 .portal-fallback i:nth-child(5) { width: 44vw; }
}
@media (prefers-reduced-motion: reduce) {
 .motion-on .portal-section { height: auto; }
 .motion-on .portal-pin { position: relative; }
}

.portal-identity { align-self: end; }
.portal-introduction { font-size: 14px; line-height: 1.5; margin-bottom: var(--space-sm); color: var(--color-ink-2); }
.portal-titles { color: var(--color-ink); }
.portal-title { -webkit-text-stroke: 3px var(--color-paper); paint-order: stroke fill; }
.portal-title-first { font-weight: 500; }
.portal-identity .portal-work { font-size: 13px; }
.portal-unavailable .portal-section { height: auto; }
.portal-unavailable .portal-pin { position: relative; }
.portal-unavailable .portal-title { display: none; }
.portal-unavailable .portal-title-first { display: block; opacity: 1 !important; visibility: visible !important; transform: none !important; }
.portal-unavailable .portal-chapters, .portal-unavailable .portal-pause, .portal-unavailable .portal-progress { display: none; }
@media (max-width: 899px) {
 .portal-bottom { grid-template-columns: 1.2fr 1fr; row-gap: var(--space-xs); }
 .portal-identity { grid-column: 1; grid-row: 2; }
 .portal-introduction { font-size: 12px; }
 .portal-work { min-height: 36px; }
 .portal-options { align-self: end; }
}
@media (max-width: 599px) {
 .portal-bottom { padding-top: var(--space-sm); }
 .portal-introduction { font-size: 12px; margin-bottom: var(--space-xs); }
 .portal-identity .portal-work { font-size: 12px; min-height: 32px; }
}

html:not(.motion-on) { scroll-behavior: auto; }
html.js:not(.motion-on) *, html.js:not(.motion-on) *::before, html.js:not(.motion-on) *::after { animation: none !important; transition: none !important; }

.portal-section { --portal-bottom-height: 154px; }
.portal-titles { bottom: var(--portal-bottom-height); }
.portal-title-together, .portal-title-builder { font-size: clamp(60px, 6.7vw, 100px); }
@media (max-width: 899px) { .portal-section { --portal-bottom-height: 220px; } }
@media (max-width: 599px) {
 .portal-title-together, .portal-title-builder { font-size: clamp(42px, 11vw, 62px); }
}

@media (max-width: 599px) { .portal-title { -webkit-text-stroke-width: 2px; } }

/* Context follows the heading; provenance remains directly attached to its paper. */
.chapter-location { margin-top: var(--space-md); margin-bottom: 0; }
.story-copy p { margin-top: var(--space-md); }
.publication h4 { margin-top: 0; }
.publication-meta { margin-top: var(--space-md); }
.plus { width: 28px; height: 28px; }
@media (max-width: 599px) { .chapter-location { margin-top: var(--space-sm); margin-bottom: 0; } }

/* Capability names are projected onto the six orbit objects by the scene. */
.portal-orbit-labels { position: absolute; inset: 0; z-index: 2; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.portal-orbit-labels li { position: absolute; left: 0; top: 0; opacity: 0; color: var(--color-ink); font-size: 14px; font-weight: 500; line-height: 1.15; white-space: nowrap; text-align: center; transform-origin: center; }
.portal-orbit-labels li[data-portal-label="0"], .portal-orbit-labels li[data-portal-label="5"] { color: var(--color-paper); }
@media (max-width: 899px) { .portal-orbit-labels li { font-size: 12px; } }