html.project-story-snap { scroll-snap-type: y proximity; scroll-behavior: auto; }
.page-project-detail { background: #fdfdfc; color: #191a18; }
.page-project-detail main { padding: 0; }
.project-story { --story-gutter: clamp(66px, 6.5vw, 124px); --story-header: 80px; }
.story-panel { position: relative; width: 100%; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: normal; }
.project-cover { display: flex; min-height: 100svh; isolation: isolate; color: #fff; background: #585b51; }
.project-cover__media, .project-cover__shade { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.project-cover__media img, .project-cover__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-cover__shade { background: linear-gradient(180deg, rgb(0 0 0 / .2) 0%, transparent 32%, rgb(0 0 0 / .18) 54%, rgb(0 0 0 / .65) 100%); }
.project-cover__content { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .8fr); gap: 6vw; align-items: end; align-self: flex-end; width: 100%; padding: 150px var(--story-gutter) 120px; }
.story-eyebrow { margin: 0 0 22px; font-size: 11px; font-weight: 400; letter-spacing: .075em; line-height: 1.5; text-transform: uppercase; }
.project-cover__identity h1 { margin: 0; max-width: 11ch; font-size: clamp(60px, 7.4vw, 136px); font-weight: 500; line-height: .89; letter-spacing: -.065em; text-wrap: balance; }
.project-cover__intro { max-width: 38ch; margin: 24px 0 0; font-size: clamp(13px, 1vw, 17px); line-height: 1.5; }
.project-facts { margin: 0; font-size: clamp(11px, .84vw, 14px); line-height: 1.38; }
.project-facts > div { display: grid; grid-template-columns: 91px minmax(0, 1fr); gap: 15px; padding: 9px 0; border-bottom: 1px solid rgb(255 255 255 / .44); }
.project-facts > div:first-child { border-top: 1px solid rgb(255 255 255 / .44); }
.project-facts dt { opacity: .76; }
.project-facts dd { margin: 0; overflow-wrap: anywhere; }
.project-cover__invitation { position: absolute; bottom: 65px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
.story-slide { display: flex; flex-direction: column; height: 100svh; padding: calc(var(--story-header) + 32px) var(--story-gutter) 96px; background: #fdfdfc; }
.story-slide--text_image, .story-slide--text { height: auto; }
.story-slide--text_image .story-composition, .story-slide--text .story-composition { min-height: calc(100svh - var(--story-header) - 200px); }
.story-slide--text_image .story-media { height: clamp(310px, calc(100svh - 285px), 850px); align-self: center; }
.story-slide__topline { display: flex; justify-content: space-between; gap: 32px; padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid #deded9; color: #74766d; font-size: 10px; line-height: 1.4; letter-spacing: .035em; }
.story-composition { display: grid; flex: 1; min-height: 0; gap: clamp(25px, 5vw, 95px); align-items: center; }
.story-composition--text_image { grid-template-columns: minmax(230px, .67fr) minmax(0, 1.33fr); }
.story-composition--statement { grid-template-columns: 1fr 1fr; gap: 8vw; }
.story-copy { min-width: 0; }
.story-copy h2 { margin: 0 0 28px; font-size: clamp(25px, 2.65vw, 46px); font-weight: 400; line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; }
.story-copy__body { font-size: clamp(13px, .95vw, 17px); line-height: 1.6; color: #53574e; }
.story-slide--long-copy .story-copy__body { font-size: clamp(12px, .87vw, 15px); line-height: 1.58; }
.story-copy__body p { margin: 0 0 1em; }
.story-copy__body p:last-child { margin-bottom: 0; }
.story-media { display: grid; height: 100%; min-height: 0; gap: 20px; align-items: stretch; }
.story-media__item { width: 100%; height: 100%; min-height: 0; min-width: 0; margin: 0; overflow: hidden; }
.story-media__item img, .story-media__item video { display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.story-media--pair { grid-template-columns: 1fr 1fr; align-items: center; }
.story-media--grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.story-media[data-media-count="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.story-composition--pair, .story-composition--grid, .story-composition--image { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); gap: 20px; }
.story-composition--pair:has(.story-copy), .story-composition--grid:has(.story-copy), .story-composition--image:has(.story-copy) { grid-template-rows: auto minmax(0, 1fr); }
.story-composition--pair .story-copy, .story-composition--grid .story-copy, .story-composition--image .story-copy { display: flex; justify-content: space-between; align-items: baseline; gap: 30px; }
.story-composition--pair .story-copy h2, .story-composition--grid .story-copy h2, .story-composition--image .story-copy h2 { margin: 0; font-size: clamp(21px, 2vw, 35px); }
.story-composition--pair .story-copy__body, .story-composition--grid .story-copy__body, .story-composition--image .story-copy__body { max-width: 52ch; font-size: 12px; }
.story-composition--statement h2 { max-width: 15ch; font-size: clamp(34px, 4.3vw, 76px); line-height: 1.06; letter-spacing: -.05em; }
.story-composition--statement .story-copy__body { max-width: 37ch; }
.story-composition--text, .story-composition--without-media { grid-template-columns: 1fr; max-width: 950px; width: 100%; margin: 0 auto; }
.story-composition--text .story-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; }
.story-composition--text .story-copy h2 { max-width: 12ch; font-size: clamp(38px, 4vw, 68px); }
.story-slide__caption { margin: 19px 0 0; color: #6e7168; font-size: 10px; line-height: 1.4; }
.story-related { display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: 145px var(--story-gutter) 100px; background: #f2f2ee; }
.story-related__heading { position: relative; }
.story-related__heading .story-eyebrow { margin-bottom: 14px; }
.story-related h2 { margin: 0; font-size: clamp(38px, 5vw, 82px); letter-spacing: -.055em; font-weight: 400; line-height: 1.03; }
.story-index-link { position: absolute; right: 0; bottom: 8px; display: flex; align-items: center; gap: 28px; font-size: 12px; padding-bottom: 6px; border-bottom: 1px solid #b7b9af; }
.story-index-link span { font-size: 20px; }
.story-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.story-related__card { min-width: 0; text-decoration: none; }
.story-related__image { width: 100%; aspect-ratio: 1.38; overflow: hidden; background: #ddded6; }
.story-related__image img, .story-related__image video { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .65s cubic-bezier(.2, .65, .25, 1); }
.story-related__card:hover img, .story-related__card:focus-visible img { transform: scale(1.035); }
.story-related__caption { display: flex; justify-content: space-between; gap: 16px; margin: 15px 0 5px; }
.story-related__caption h3 { margin: 0; font-size: clamp(16px, 1.3vw, 21px); line-height: 1.2; font-weight: 400; letter-spacing: -.025em; }
.story-related__caption span { font-size: 19px; }
.story-related__card > p { margin: 0; color: #74766d; font-size: 10px; }
.story-related__footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-top: 24px; border-top: 1px solid #d5d7cc; font-size: 10px; line-height: 1.4; color: #717567; }
.story-related__footer p { margin: 0; }
.story-project-nav { color: #20221d; transition: color .25s ease; }
.story-project-nav a { position: fixed; z-index: 32; top: 50%; transform: translateY(-50%); width: 56px; height: 72px; display: grid; place-items: center; border-radius: 6px; color: inherit; transition: background .2s ease, opacity .2s ease; }
.story-project-nav a:hover { background: rgb(127 127 127 / .12); }
.story-project-nav__previous { left: 10px; }
.story-project-nav__next { right: 10px; }
.story-project-nav svg { width: 22px; height: 41px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.story-reader { position: fixed; z-index: 32; left: 32px; right: 32px; bottom: 27px; display: flex; align-items: center; justify-content: space-between; color: #282a24; pointer-events: none; transition: color .25s ease; }
.story-reader a, .story-reader button { pointer-events: auto; }
.story-reader__index { display: flex; align-items: center; gap: 10px; font-size: 10px; color: inherit; text-decoration: none; }
.story-reader__index svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1; }
.story-reader__count { display: flex; gap: 12px; align-items: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.story-reader__separator { opacity: .38; }
.story-next-slide { display: grid; place-items: center; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); width: 64px; height: 43px; padding: 5px 10px; border: 0; color: inherit; background: transparent; cursor: pointer; }
.story-next-slide svg { width: 34px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s cubic-bezier(.2,.65,.25,1); }
.story-next-slide:hover svg { transform: translateY(4px); }
.story-next-slide.is-last svg { transform: rotate(180deg); }
.story-next-slide.is-last:hover svg { transform: rotate(180deg) translateY(4px); }
.story-progress { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(130 130 120 / .14); pointer-events: none; }
.story-progress span { display: block; width: 100%; height: 100%; background: currentColor; transform-origin: left; transform: scaleX(0); transition: transform .5s ease, color .25s ease; }
.project-on-hero .story-project-nav, .project-on-hero .story-reader, .project-on-hero .story-progress { color: #fff; }
.page-project-detail.project-on-hero .site-header { background: transparent; color: #fff; border-color: transparent; backdrop-filter: none; }
.page-project-detail.project-on-hero .brand img { filter: invert(1); }
.page-project-detail.project-on-hero .main-nav { background: #fff; color: #191a18; padding: 3px 24px; border-radius: 99px; }
.page-project-detail.project-on-hero .site-header .logo { color: #fff; }
.page-project-detail.project-on-hero .site-header .logo-svg { fill: currentColor; }
.page-project-detail.project-on-hero .site-header .nav-menu { color: #191a18; }
.story-reader a:focus-visible, .story-reader button:focus-visible, .story-project-nav a:focus-visible, .story-related a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
@media (min-width: 1800px) { .story-copy__body { max-width: 47ch; } }
@media (max-width: 1050px) {
  .project-story { --story-gutter: 62px; }
  .project-cover__content { gap: 4vw; grid-template-columns: 1.1fr 1fr; }
  .project-cover__identity h1 { font-size: clamp(54px, 8vw, 94px); }
  .project-facts { font-size: 10px; }
  .project-facts > div { grid-template-columns: 70px 1fr; gap: 9px; padding: 7px 0; }
  .story-composition { gap: 30px; }
  .story-composition--text_image { grid-template-columns: .8fr 1.2fr; }
  .story-copy__body { font-size: 12px; line-height: 1.5; }
  .story-related__grid { gap: 18px; }
}
/* Progressive enhancement: without JavaScript the complete narrative remains readable. */
html.project-deck,html.project-deck body{height:100%;overflow:hidden;overscroll-behavior:none;scroll-behavior:auto}
.project-deck .project-story{position:relative;height:100svh;height:100dvh;overflow:hidden;isolation:isolate}
.project-deck .project-story>.story-panel{position:absolute;inset:0;width:100%;height:100%;min-height:0;display:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scroll-snap-align:none;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent}
.project-deck .project-story>.story-panel.is-active,.project-deck .project-story>.story-panel.is-exiting{display:flex}
.project-deck .story-panel.is-active{z-index:2}
.project-deck .story-panel.is-exiting{z-index:1;pointer-events:none}
.project-deck .story-panel:focus{outline:none}
.project-deck .story-slide__topline,.project-deck .story-slide__caption{flex-shrink:0}
.project-deck .story-slide{padding-bottom:60px}
.project-deck .story-slide--text_image .story-composition,.project-deck .story-slide--text .story-composition{flex:1 0 auto;min-height:0}
.project-deck .story-related{justify-content:flex-start}
.project-deck .story-related>*{flex-shrink:0}
.project-deck .project-cover__content{margin-top:auto;align-self:stretch;flex-shrink:0}
@media(max-width:700px){
 .project-deck .story-composition{flex-shrink:0}
 .project-deck .story-composition--statement{flex:1 0 auto}
 .project-deck .story-slide--image .story-media,.project-deck .story-slide--pair .story-media,.project-deck .story-slide--grid .story-media{min-height:0}
 .project-deck .story-slide--image .story-media__item img{max-height:calc(100dvh - 240px)}
 .project-deck .project-cover__content{padding-top:110px;padding-bottom:100px}
}
@media (max-width: 700px) {
  .page-project-detail.project-on-hero .main-nav { padding: 2px 10px; gap: 12px; }
  .page-project-detail.project-on-hero .brand img { width: 114px; }
  .project-story { --story-gutter: 26px; --story-header: 72px; }
  .project-cover__content { grid-template-columns: 1fr; gap: 25px; padding: 135px 32px 103px; }
  .project-cover__identity { max-width: 85%; }
  .project-cover__identity h1 { max-width: 12ch; font-size: clamp(50px, 13vw, 78px); }
  .project-cover__identity .story-eyebrow { margin-bottom: 14px; font-size: 9px; }
  .project-cover__intro { margin-top: 15px; font-size: 12px; max-width: 32ch; }
  .project-facts { max-width: 100%; font-size: 10px; line-height: 1.35; }
  .project-facts > div { grid-template-columns: 78px 1fr; padding: 5px 0; }
  .project-cover__invitation { bottom: 62px; font-size: 8px; }
  .story-slide { min-height: 100svh; height: auto; padding-top: calc(var(--story-header) + 25px); padding-bottom: 90px; }
  .story-slide__topline { padding-bottom: 13px; margin-bottom: 22px; font-size: 9px; }
  .story-composition--text_image, .story-composition--statement { grid-template-columns: 1fr; grid-template-rows: auto minmax(240px, 1fr); gap: 26px; }
  .story-copy h2 { max-width: 23ch; margin-bottom: 16px; font-size: clamp(26px, 7vw, 39px); }
  .story-copy__body { font-size: 12px; max-width: 54ch; line-height: 1.55; }
  .story-media { height: auto; min-height: 240px; }
  .story-slide--text_image .story-media { height: auto; }
  .story-media__item { height: 100%; min-height: 0; }
  .story-media__item img, .story-media__item video { min-height: 0; max-height: 65svh; }
  .story-composition--text_image .story-media__item img, .story-composition--statement .story-media__item img { max-height: 42svh; }
  .story-composition--pair .story-media { grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; min-height: 55svh; }
  .story-media--grid { grid-template-columns: 1fr 1fr; gap: 12px; min-height: 55svh; }
  .story-media--grid .story-media__item img { max-height: 28svh; }
  .story-composition--image { min-height: 56svh; }
  .story-composition--pair .story-copy, .story-composition--grid .story-copy, .story-composition--image .story-copy { display: block; }
  .story-composition--pair .story-copy h2, .story-composition--grid .story-copy h2, .story-composition--image .story-copy h2 { margin-bottom: 12px; }
  .story-composition--text .story-copy { grid-template-columns: 1fr; gap: 20px; }
  .story-composition--text .story-copy h2, .story-composition--statement h2 { max-width: 16ch; font-size: clamp(34px, 9vw, 49px); }
  .story-composition--without-media { grid-template-rows: 1fr; }
  .story-related { gap: 28px; padding-top: 115px; }
  .story-related h2 { font-size: clamp(37px, 10vw, 58px); }
  .story-index-link { position: static; width: max-content; margin-top: 24px; font-size: 11px; }
  .story-related__grid { grid-template-columns: 1fr; gap: 28px; }
  .story-related__image { aspect-ratio: 1.5; }
  .story-related__caption h3 { font-size: 21px; }
  .story-related__footer { flex-wrap: wrap; row-gap: 20px; }
  .story-related__footer span { width: 100%; }
  .story-project-nav a { width: 32px; height: 60px; }
  .story-project-nav__previous { left: 0; }
  .story-project-nav__next { right: 0; }
  .story-project-nav svg { width: 15px; height: 31px; stroke-width: 1.75; }
  .story-reader { bottom: 25px; left: 22px; right: 22px; }
  .story-reader__index { font-size: 9px; }
  .story-reader__count { font-size: 10px; gap: 8px; }
  .story-next-slide { width: 54px; }
  .story-next-slide svg { width: 29px; }
}
@media (max-height: 680px) and (min-width: 701px) {
  .project-cover__content { padding-top: 115px; padding-bottom: 92px; }
  .project-cover__identity h1 { font-size: clamp(45px, 6.8vw, 94px); }
  .project-facts > div { padding: 5px 0; }
  .project-cover__intro { font-size: 12px; margin-top: 14px; }
  .story-slide { padding-top: 97px; padding-bottom: 75px; }
  .story-slide__topline { margin-bottom: 17px; padding-bottom: 12px; }
  .story-copy h2 { font-size: 29px; margin-bottom: 17px; }
  .story-copy__body { font-size: 12px; }
  .story-related { padding-top: 105px; gap: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  html.project-story-snap { scroll-behavior: auto; scroll-snap-type: y proximity; }
  .story-related__image img, .story-related__image video, .story-next-slide svg, .story-progress span, .story-reader, .story-project-nav { transition: none; }
}