/* Shared type roles and a white studio opening. */
.story-page {
  --story-h1: clamp(44px, 5vw, 80px);
  --story-h2: clamp(30px, 3.2vw, 54px);
  --story-body: clamp(16px, 1.05vw, 18px);
  --story-date: clamp(48px, 4.2vw, 72px);
  font-family: "Nunito Sans", sans-serif;
}
.story-page .vision-design {font-family:inherit}
.story-page h1#story-title {font-size:var(--story-h1);font-weight:600;line-height:1.08}
.story-page :is(.story-copy,.scene-copy,.prototype-strip__heading) h2,
.story-page #the-prototypes .story-copy h2,
.story-page #the-prototypes [data-persistence-phase="1"] h2,
.story-page .vision-design .scene-copy.phase h2 {font-size:var(--story-h2);font-weight:600;line-height:1.12}
.story-page .story-copy p,
.story-page #story-opening .story-copy p,
.story-page #the-prototypes .story-copy p,
.story-page #the-prototypes [data-persistence-phase="1"] p,
.story-page .vision-design .scene-copy.phase>p:not(.eyebrow) {font-size:var(--story-body);font-weight:400;line-height:1.6}
.story-page .story-year,
.story-page .story-year--range,
.story-page #story-opening .story-portrait-date .story-year {font-size:var(--story-date);font-weight:600;line-height:1.05;letter-spacing:-.05em;opacity:.3}
.story-page>section#story-opening {background:#fff;color:var(--story-ink)}
.story-page #story-opening .story-hero-portraits {background:#fff}
.story-page #story-opening>.story-scene__veil {display:none}
.story-page #story-opening .story-copy p {color:var(--story-ink)}
.story-page #story-opening .story-hero-portraits img {mask-image:none;filter:none}
.story-page #story-opening .story-hero-portraits__today {mix-blend-mode:normal}
.story-page #story-opening .story-portrait-date {top:31%;width:13%}
.story-page #story-opening .story-portrait-date--later {top:31%;left:89%;width:10%}
.story-page #story-opening .story-main-action {border-color:#1d292e55}
html:root body:has(.story-page) .site-header[data-homepage=true]:not(.has-scrolled) {color:#1d292e!important}
html:root body:has(.story-page) .site-header[data-homepage=true]:not(.has-scrolled) .site-header__logo img {filter:invert(1)!important}
html:root body:has(.story-page) .site-header[data-homepage=true]:not(.has-scrolled) .site-header__links a {color:#1d292e!important}
@media(min-width:761px) {
 .story-page #story-opening .story-hero-portraits__young {height:73%;bottom:10%}
 .story-page #story-opening .story-hero-portraits__today {height:78%;bottom:5%}
}
@media(min-width:1101px) {
 .story-page #story-opening .story-hero-portraits__today {left:58%}
}
@media(min-width:761px) and (max-width:1100px) {
 .story-page #story-opening .story-hero-portraits__young {height:62%;bottom:10%}
 .story-page #story-opening .story-hero-portraits__today {height:66%;bottom:5.8%}
 .story-page #story-opening .story-portrait-date--young {left:49%}
 .story-page #story-opening .story-portrait-date--later {left:85%;width:14%}
}
@media(max-width:760px) {
 .story-page {--story-h1:clamp(40px,10.5vw,56px);--story-h2:clamp(28px,7.2vw,38px);--story-body:16px;--story-date:40px}
 .story-page #story-opening .story-hero-portraits__young {height:229px;bottom:171px}
 .story-page #story-opening .story-hero-portraits__today {height:245px;bottom:145px}
 .story-page #story-opening .story-portrait-date {top:auto;bottom:65px;width:42%}
 .story-page #story-opening .story-portrait-date--young {left:7%}
 .story-page #story-opening .story-portrait-date--later {left:55%;width:40%}
}
/* Both portraits have transparent backgrounds over the same white studio canvas. */
html:root body:has(.story-page) .site-header[data-homepage=true]:not(.has-scrolled) :is(.site-header__cta,.site-header__cart) {box-shadow:inset 0 0 0 1px #1d292e35}

/* v29: stable dates, original portrait and restrained gallery controls. */
.story-page .story-chapter-head {justify-content:flex-end}
.story-page .story-chapter-head .story-year-block {margin-left:auto}
.story-page #story-opening .story-chapter-head {justify-content:flex-start}
.story-page #story-opening .story-portrait-date {overflow:hidden;padding-block:4px}
.story-page #story-opening .story-portrait-date .story-year {display:block;white-space:nowrap}
.story-page #story-opening .story-hero-portraits__today {mix-blend-mode:multiply}
.story-page #the-company .story-gallery figcaption {text-align:left;justify-self:start;width:100%}
.story-page .story-gallery__arrow .pill__icons {transition:translate .25s ease!important;rotate:none!important;transform:none!important}
.story-page .story-gallery__arrow:hover .pill__icons {translate:3px 0}
.story-page .story-gallery__arrow[data-gallery-prev]:hover .pill__icons {translate:-3px 0}
.story-page .story-gallery__arrow svg {transform:none!important;rotate:none!important}
.story-page #thinking-behind-vision .workshop-film__picture video {object-fit:cover}

.story-page #story-opening .story-hero-portraits__today {mask-image:linear-gradient(to right,transparent,#000 17%),linear-gradient(to bottom,transparent,#000 13%);mask-composite:intersect}

.story-page #thinking-behind-vision .workshop-film__picture video {transform:scale(1.04);transform-origin:center}
.story-page #the-company .story-gallery figcaption {justify-content:flex-start}
html:root body .story-page .story-gallery__arrow[data-ui-button][data-ui-button][data-ui-button][data-ui-button] .pill__icons {transform:none!important;rotate:none!important}
.story-page #the-company .story-gallery__stage img {object-position:left center}
/* Unified studio, captions and unframed media controls. */
.story-page #story-opening .story-hero-portraits__today {mask-image:linear-gradient(90deg,transparent,#000 30%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 25%,#000 78%,transparent);mask-composite:intersect}
.story-page #story-opening .story-portrait-date {text-align:left;overflow:visible}
.story-page #story-opening .story-portrait-date .story-year-note {text-align:left;margin-left:0}
.story-page #the-question .research-postures figcaption {text-align:center;justify-content:center;width:100%}
.story-page #thinking-behind-vision .workshop-film__stage {padding:0;overflow:hidden;border-radius:20px}
.story-page #thinking-behind-vision .workshop-film__controls {position:absolute;bottom:18px;left:18px;z-index:8}
html:root body .story-page #thinking-behind-vision .workshop-film__controls :is(button,label) {background:transparent!important;border:0!important;box-shadow:none!important;color:white!important}
html:root body .story-page #thinking-behind-vision .workshop-film__controls :is(button,label):active {color:#ed7038!important}
html:root body .story-page .story-gallery__arrow[data-ui-button] {--ui-button-arrow-transform:translateX(3px);--ui-button-hover-transform:translateY(-2px)}
html:root body .story-page .story-gallery__arrow[data-ui-button]::before,html:root body .story-page .story-gallery__arrow[data-ui-button]::after {display:none!important}

.story-page #the-question figure:has(img[alt*="Historical"]) figcaption {text-align:center;justify-content:center;width:100%}
.story-page .story-research-archive__caption {text-align:center!important;justify-content:center!important;width:100%}
.stingray-linework path {stroke-dasharray:4000;stroke-dashoffset:4000}
.stingray-linework.is-drawn path {animation:story-pencil 3.5s ease-out forwards}
@keyframes story-pencil {to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.stingray-linework path{stroke-dashoffset:0;animation:none!important}}
html:root body .story-page #thinking-behind-vision .workshop-film__controls button[data-ui-button][data-ui-button][data-ui-button][data-ui-button] {background:transparent!important;border:0!important;box-shadow:none!important;padding:8px!important;width:40px!important;height:40px!important}
html:root body .story-page #thinking-behind-vision .workshop-film__controls button::before,html:root body .story-page #thinking-behind-vision .workshop-film__controls button::after,html:root body .story-page #thinking-behind-vision .workshop-film__controls .ui-button-orbit {display:none!important}
html:root body .story-page #thinking-behind-vision .workshop-film__controls button[aria-pressed=true],html:root body .story-page #thinking-behind-vision .workshop-film__controls button.is-pressed {color:#ed7038!important}

.story-page #story-opening .story-hero-portraits__today {mask-image:none;mix-blend-mode:normal}
.story-page .prototype-strip__controls {display:flex;justify-content:flex-end;gap:16px}
.story-page .prototype-strip__arrow {display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0;border-radius:50%;background:transparent;color:var(--story-ink);cursor:pointer;transition:color .25s,translate .25s}
.story-page .prototype-strip__arrow svg {width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.story-page .prototype-strip__arrow:hover {color:#ed7038;translate:3px 0}
.story-page .prototype-strip__arrow[data-prototype-prev]:hover {translate:-3px 0}
.story-page .prototype-strip__arrow:focus-visible {outline:1px solid currentColor;outline-offset:2px}
html:root body .story-page .prototype-strip__arrow[data-ui-button][data-ui-button][data-ui-button][data-ui-button],html:root body .story-page .prototype-strip__arrow[data-ui-button][data-ui-button][data-ui-button][data-ui-button]:is(:hover,:focus,:active){background:transparent!important;border:0!important;border-radius:50%!important;box-shadow:none!important;animation:none!important;color:var(--story-ink)!important}
html:root body .story-page .prototype-strip__arrow::before,html:root body .story-page .prototype-strip__arrow::after,html:root body .story-page .prototype-strip__arrow>.ui-button-orbit{display:none!important}
html:root body .story-page .prototype-strip__arrow svg{rotate:none!important;transform:none!important}
/* Absolute dates retain the section as their containing block during entry. */
.story-page #story-opening > .story-wrap {translate:none!important;transform:none!important}
.story-page #story-opening .story-portrait-date {opacity:0;animation:none}
.story-page #story-opening .story-portrait-date.date-ready {animation:story-date-entry .85s cubic-bezier(.22,1,.36,1) both}
.story-page #story-opening .story-portrait-date--later.date-ready {animation-delay:.16s}
@keyframes story-date-entry {from {opacity:0;transform:translateX(24px)} to {opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.story-page #story-opening .story-portrait-date.date-ready{opacity:1;animation:none}}
.story-page .prototype-strip__years {font-size:16px;color:#1d292e99;margin:16px 0 0;letter-spacing:.1em}
.story-page .prototype-strip__card--vision {position:relative;display:flex;align-items:center;justify-content:center}
.story-page .prototype-strip__vision {display:block;width:100%;height:90%;overflow:visible}
.story-page .prototype-strip__vision-label {position:absolute;bottom:12px;left:0;width:100%;text-align:center;font-size:12px;color:#1d292e}
.story-page #the-prototypes [data-persistence-phase="0"] h2 {font-size:clamp(30px,3vw,50px)}
.story-page #the-prototypes [data-persistence-phase="0"] p {font-size:clamp(15px,1vw,17px);line-height:1.5;margin-top:16px}
.story-page #the-prototypes .story-quote {font-size:clamp(19px,1.6vw,27px);line-height:1.4;margin-top:24px}
.story-page #the-question .story-copy p {font-size:clamp(15px,1vw,17px);line-height:1.5;margin-top:16px}
/* Company gallery uses the shared button surface, with fixed horizontal icons. */
html:root body .story-page #the-company .story-gallery__arrow[data-ui-button][data-ui-button][data-ui-button][data-ui-button]:not(:disabled):is(:hover,:focus-visible){background:#18252a7a!important;color:#fff!important;border-color:#e8713a99!important;box-shadow:0 0 9px #e8713a44,0 0 24px #e8713a25!important;transform:translateY(-2px)!important}
html:root body .story-page #the-company .story-gallery__arrow[data-ui-button][data-ui-button][data-ui-button][data-ui-button] > .pill__icons,
html:root body .story-page #the-company .story-gallery__arrow[data-ui-button][data-ui-button][data-ui-button][data-ui-button]:is(:hover,:focus-visible,:active) > .pill__icons{background:transparent!important;box-shadow:none!important;border:0!important;transform:none!important;rotate:none!important;translate:none!important}
.story-page #workshop .workshop-archive{position:absolute;right:5%;bottom:5%;z-index:5;display:flex;align-items:flex-end;gap:16px;width:36%;pointer-events:none}
.story-page #workshop .workshop-archive img{display:block;width:calc(50% - 8px);height:auto;object-fit:contain;border-radius:10px;box-shadow:0 8px 28px #0005}
@media(max-width:760px){.story-page #workshop .workshop-archive{right:6%;bottom:5%;width:70%;gap:10px}.story-page #workshop .workshop-archive img{width:calc(50% - 5px);border-radius:6px}}
/* Dates belong to the copy column, directly above each heading. */
.story-page .story-copy > .story-year-block{position:relative;inset:auto;margin:0 0 20px!important;padding:0;text-align:left;width:100%;color:inherit}
.story-page .story-copy > .story-year-block .story-year{font-size:clamp(80px,8vw,140px)!important;line-height:1;letter-spacing:-.055em;opacity:.3;text-align:left}
.story-page .story-copy > .story-year-block .story-year--range{font-size:clamp(58px,5.7vw,100px)!important}
.story-page .story-copy > .story-year-block .story-year-note{text-align:left;margin:6px 0 0}
.story-page #the-prototypes .story-copy > .story-year-block{margin-bottom:12px!important}
@media(max-width:760px){.story-page .story-copy > .story-year-block .story-year{font-size:76px!important}.story-page .story-copy > .story-year-block .story-year--range{font-size:52px!important}}
/* Match the final Vision photograph's visible product scale to the archive. */
.story-page .prototype-strip__card img[src$="vision-chair-studio-v37.png"]{transform:scale(1.23);transform-origin:50% 70%}

/* Reuse the CTA orbit on the company gallery controls. */
html:root body .story-page #the-company .story-gallery__arrow[data-ui-button][data-ui-button][data-ui-button][data-ui-button] > .ui-button-orbit{display:block!important}
/* Opening CTA reveals a fixed downward arrow only on interaction. */
html:root body .story-page #story-opening .pill[data-ui-button][data-ui-button][data-ui-button][data-ui-button] > .pill__icons{opacity:0!important;transform:none!important;rotate:none!important;transition:opacity .3s!important}
html:root body .story-page #story-opening .pill[data-ui-button][data-ui-button][data-ui-button][data-ui-button]:is(:hover,:focus-visible,:active) > .pill__icons{opacity:1!important;transform:none!important;rotate:none!important}