/* Presentation-led case study. The approved 3D object stays in styles.css. */
:root {
  --paper: #eeeee8;
  --ink: #183028;
  --muted: #66756b;
  --green: #285a45;
  --green-dark: #12362b;
  --lime: #c1d995;
  --line: rgba(24, 48, 40, .18);
}
html { scroll-padding-top: 68px; }
body { background: var(--paper); }
::selection { color: #f7f8ef; background: #285a45; }
.topbar { height: 68px; padding-inline: 5.5vw; background: rgba(238, 238, 232, .91); border-color: rgba(24,48,40,.12); }
.topbar .brand { font-size: 1.26rem; letter-spacing: -.045em; }
.topbar p { color: #6a786e; font-weight: 500; }
.topbar nav { gap: clamp(16px, 2.3vw, 38px); }
.topbar nav a, .sound-toggle { font-weight: 600; }
.topbar nav a:hover, .topbar nav a:focus-visible { color: #559071; }
.panel { padding-inline: 7vw; }
.kicker { margin-bottom: 1.6rem; color: #48745a; font-size: .68rem; font-weight: 700; letter-spacing: .22em; }
h1, h2, h3 { letter-spacing: -.035em; }
h1 { font-size: clamp(3rem, 4.5vw, 5rem); line-height: 1.19; }
h2 { font-size: clamp(2.8rem, 4.1vw, 4.8rem); line-height: 1.2; }
h3 { margin: 0; font-family: var(--serif); font-weight: 500; }

/* Keep the approved interactive cover intact. */
.hero { min-height: 132svh; padding-top: 68px; grid-template-columns: minmax(0,.96fr) minmax(0,1.04fr); gap: 3vw; align-items: start; background: radial-gradient(ellipse at 75% 45%, #f7f7f1 0%, var(--paper) 65%); }
.hero-copy { top: clamp(105px, 19vh, 210px); margin-top: 13vh; padding: 0; max-width: 580px; }
.hero-copy h1 { max-width: 11.5em; }
.hero-copy h1 em { color: #457552; }
.hero .intro { max-width: 29em; margin-top: clamp(1.6rem,3vh,2.4rem); color: #5b6c62; font-size: clamp(.98rem,1.08vw,1.12rem); line-height: 1.85; }
.hero .meta-grid { margin-top: 2rem; padding-top: 1.25rem; max-width: 31rem; gap: .55rem; font-size: .75rem; }
.hero .meta-grid b { min-width: 7.4rem; color: #466453; font-size: .62rem; }
.hero .actions { margin-top: 2.1rem; gap: 1.5rem; }
.hero .primary { padding: 1rem 1.25rem; background: #1b4435; font-size: .75rem; }
.hero .primary:hover { background: #285d45; }
.hero .text-link { font-size: .75rem; text-underline-offset: .3em; }
.hero .text-link:hover { text-decoration: underline; }
.object-stage { top: 68px; height: calc(100svh - 68px); }
.stage-caption { top: 7%; color: #617368; }

.section-label { position: static; display: flex; align-items: center; gap: 1rem; width: fit-content; margin-bottom: clamp(5rem,12vh,10rem); color: #5d7163; font-size: .66rem; font-weight: 700; letter-spacing: .19em; }
.section-label i { width: 5.5rem; }

/* Chapter 01: large editorial type and a separate photographic field. */
.statement { position: relative; height: 148svh; background: #15392e; color: #f2f2e8; }
.statement-sticky { position: sticky; top: 68px; display: grid; grid-template-columns: minmax(0,1.28fr) minmax(0,.72fr); align-items: center; gap: 5vw; height: calc(100svh - 68px); padding: 12vh 7vw 9vh; overflow: hidden; }
.statement .section-label { position: absolute; top: 6vh; left: 7vw; margin: 0; color: #c0cbbb; }
.statement-copy { position: relative; z-index: 1; }
.statement-overline { margin: 0 0 3.5vh; color: #c5d1c4; font-size: .7rem; font-weight: 700; letter-spacing: .22em; }
.statement-title { font-size: clamp(3.4rem,5.3vw,7.5rem); line-height: 1.28; }
.statement-title .type-line { display: block; white-space: nowrap; }
.statement-title .type-line-two { color: #c9dda6; }
.statement-note { max-width: 27rem; margin: 4.5vh 0 0; color: #c1cec1; font-size: .91rem; line-height: 1.9; }
.statement-visual { width: 100%; height: 62vh; max-height: 710px; overflow: hidden; background: #e8e9e1; }
.statement-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.statement-index { position: absolute; bottom: 5.5vh; left: 7vw; color: #abbfac; font-size: .65rem; letter-spacing: .17em; }
.motion-ready .statement-title .type-line { opacity: var(--type-opacity,0); filter: blur(calc((1 - var(--type-opacity,0)) * 8px)); transform: translateY(calc((1 - var(--type-opacity,0)) * 22px)); will-change: opacity,filter,transform; }

/* Chapter 02: object, then the physical logic beneath it. */
.structure { min-height: 0; padding-block: clamp(7rem,12vw,13rem) clamp(7rem,12vw,13rem); background: #e8eae3; }
.structure .chapter-intro { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); column-gap: 7vw; align-items: end; margin-bottom: clamp(5rem,10vw,10rem); }
.chapter-intro .kicker { grid-column: 1 / -1; }
.chapter-intro h2 { max-width: 12em; font-size: clamp(3.3rem,5.2vw,6.5rem); line-height: 1.2; }
.chapter-intro > p:last-child { max-width: 25em; margin: 0 0 .45rem auto; color: #607268; font-size: 1.02rem; line-height: 1.95; }
.structure-stage { display: grid; place-items: center; width: calc(100% + 14vw); height: clamp(600px,90svh,1060px); margin: 0 -7vw; background: #f3f0ea; overflow: hidden; }
.structure-stage img { width: 100%; height: 100%; object-fit: contain; }
.structure-legend { display: grid; grid-template-columns: .25fr 1.15fr .6fr; gap: 4vw; align-items: start; padding-top: clamp(3rem,6vw,6rem); border-top: 1px solid var(--line); margin-top: clamp(5rem,10vw,10rem); }
.structure-legend p:first-child { margin: .6rem 0 0; color: #56725d; font-size: .65rem; font-weight: 700; letter-spacing: .2em; }
.structure-legend h3 { max-width: 15em; font-size: clamp(2.3rem,3.7vw,4.3rem); line-height: 1.3; }
.structure-legend p:last-child { margin: .55rem 0 0; color: #63746a; font-size: .95rem; line-height: 1.95; }

/* Chapter 03: technical drawings presented as individual editorial plates. */
.production { min-height: 0; padding-block: clamp(7rem,12vw,13rem) clamp(7rem,12vw,13rem); color: var(--ink); background: #f2f1ec; }
.production .section-label { color: #5d7163; }
.production .kicker { color: #48745a; }
.production-head { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); column-gap: 8vw; align-items: end; margin-bottom: clamp(5rem,10vw,10rem); }
.production-head .kicker { grid-column: 1 / -1; }
.production-head h2 { max-width: 12em; font-size: clamp(3.3rem,5.2vw,6.5rem); line-height: 1.2; }
.production-head > p:last-child { max-width: 24em; margin: 0 0 .4rem auto; color: #69786d; font-size: 1.02rem; line-height: 1.95; }
.production-gallery figure { margin: 0; }
.process-scene img { display: block; max-width: 100%; }
.process-dieline { display: grid; grid-template-columns: minmax(230px,.26fr) minmax(0,.74fr); gap: 3vw; align-items: center; min-height: 86svh; padding: clamp(3rem,6vw,7rem); margin-left: -7vw !important; width: calc(100% + 14vw); background: #e0e2dc; }
.process-copy { padding-left: 1vw; }
.process-copy b, .process-views figcaption strong { display: block; color: #446d54; font-size: .65rem; letter-spacing: .18em; }
.process-copy h3 { margin-top: clamp(4rem,11vh,9rem); font-size: clamp(2rem,3vw,3.4rem); line-height: 1.33; }
.process-copy p { max-width: 18em; margin: 2rem 0 0; color: #65736a; font-size: .88rem; line-height: 1.9; }
.process-dieline img { width: 100%; max-height: 76svh; object-fit: contain; mix-blend-mode: multiply; }
.process-views { width: 76%; margin: clamp(8rem,15vw,16rem) 0 0 auto !important; }
.process-views img { width: 100%; height: auto; mix-blend-mode: multiply; }
.process-views figcaption { display: flex; justify-content: space-between; gap: 2rem; margin: 1.6rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); color: #67766a; font-size: .73rem; line-height: 1.6; }

/* Chapter 04: real object photography, alternating scale and negative space. */
.outcome { min-height: 0; padding-block: clamp(7rem,12vw,13rem) 0; background: #e7e9e2; }
.outcome-head { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 0 8vw; align-items: end; margin: 0 0 clamp(5rem,10vw,10rem); }
.outcome-head .kicker { grid-column: 1 / -1; }
.outcome-head h2 { max-width: 13em; font-size: clamp(3.3rem,5.2vw,6.5rem); line-height: 1.2; }
.outcome-head > p:last-child { max-width: 24em; margin: 0 0 .4rem auto; color: #64746a; font-size: 1.02rem; line-height: 1.95; }
.outcome-hero { position: relative; width: calc(100% + 14vw); height: min(86svh,980px); margin: 0 -7vw; overflow: hidden; background: #b8c3b2; }
.outcome-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; }
.outcome-hero figcaption { position: absolute; right: 7vw; bottom: 3vh; margin: 0; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .17em; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.outcome-editorial { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: auto auto; gap: clamp(4rem,8vw,9rem) clamp(5rem,9vw,11rem); align-items: start; padding-block: clamp(8rem,15vw,16rem); }
.outcome-editorial figure { margin: 0; overflow: hidden; }
.outcome-editorial img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.outcome-editorial figure:hover img { transform: scale(1.025); }
.outcome-angle { grid-column: 1; grid-row: 1 / 3; height: min(115svh,1200px); }
.outcome-copy { grid-column: 2; grid-row: 1; align-self: end; padding-top: clamp(3rem,12vh,9rem); }
.outcome-copy span { color: #52735c; font-size: .68rem; font-weight: 700; letter-spacing: .18em; }
.outcome-copy h3 { margin-top: clamp(3rem,7vh,6rem); font-size: clamp(2.6rem,3.8vw,4.8rem); line-height: 1.28; }
.outcome-copy p { max-width: 23em; margin: 2.3rem 0 0; color: #64746a; font-size: .94rem; line-height: 1.95; }
.outcome-detail { grid-column: 2; grid-row: 2; height: min(72svh,800px); }
.closing-line { display: flex; justify-content: space-between; align-items: center; margin-top: 0; padding-block: 2.4rem; border-top: 1px solid var(--line); color: #66766a; font-size: .68rem; letter-spacing: .15em; }
.closing-line button { color: #285a45; font-size: .75rem; }

@media (prefers-reduced-motion: no-preference) {
  .motion-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
  .motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .statement-title .type-line, [data-reveal], .outcome-editorial img { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
}
@media (max-width: 1000px) {
  .statement-sticky { grid-template-columns: 1fr .75fr; gap: 3vw; }
  .statement-title { font-size: clamp(2.6rem,5vw,4.5rem); }
  .structure-legend { grid-template-columns: .3fr 1fr; }
  .structure-legend p:last-child { grid-column: 2; max-width: 32rem; }
  .process-dieline { grid-template-columns: 1fr; gap: 3rem; }
  .process-copy { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: end; }
  .process-copy h3 { margin-top: 0; }
  .process-copy p { grid-column: 2; margin-top: 0; }
  .process-dieline img { max-height: 70svh; }
}
@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar p { display: none; }
  .hero { min-height: 0; display: flex; flex-direction: column; gap: 0; padding-top: 110px; }
  .hero-copy { position: relative; top: auto; margin: 0; max-width: 650px; }
  .object-stage { position: relative; top: auto; width: 100%; height: 560px; min-height: 560px; margin-top: 1rem; }
  .statement { height: auto; }
  .statement-sticky { position: relative; top: auto; height: auto; min-height: 100svh; padding-block: 10rem 7rem; grid-template-columns: 1fr; gap: 4rem; }
  .statement .section-label { top: 4rem; }
  .statement-title .type-line { opacity: 1 !important; filter: none !important; transform: none !important; }
  .statement-visual { height: 65svh; }
  .statement-index { bottom: 3rem; }
  .structure .chapter-intro, .production-head, .outcome-head { grid-template-columns: 1fr; gap: 2rem; }
  .chapter-intro .kicker, .production-head .kicker, .outcome-head .kicker { grid-column: auto; margin-bottom: 0; }
  .chapter-intro > p:last-child, .production-head > p:last-child, .outcome-head > p:last-child { margin-left: 0; }
  .structure-stage { height: 65svh; min-height: 470px; }
  .outcome-editorial { column-gap: 5vw; }
}
@media (max-width: 560px) {
  .topbar { padding-inline: 5vw; }
  .topbar nav { gap: 12px; }
  .topbar nav a { font-size: .58rem; }
  .sound-toggle { font-size: .55rem; }
  .panel { padding-inline: 5vw; }
  .hero { padding-top: 110px; }
  .hero h1 { font-size: clamp(2.35rem,10vw,3.45rem); }
  .hero .intro { font-size: .92rem; line-height: 1.8; }
  .hero .meta-grid { font-size: .7rem; }
  .hero .actions { gap: 1rem; }
  .hero .text-link { font-size: .65rem; }
  .object-stage { height: 450px; min-height: 450px; margin-top: 0; }
  .stage-caption { top: 3%; }
  .section-label { margin-bottom: 4rem; }
  .statement-sticky { padding: 9rem 5vw 6rem; gap: 3rem; }
  .statement .section-label { left: 5vw; top: 3rem; }
  .statement-title { font-size: clamp(2.4rem,9.2vw,4rem); }
  .statement-title .type-line { white-space: normal; }
  .statement-note { font-size: .86rem; }
  .statement-visual { height: 56svh; }
  .statement-index { left: 5vw; bottom: 2rem; }
  .structure, .production, .outcome { padding-top: 7rem; }
  .structure, .production { padding-bottom: 7rem; }
  .chapter-intro h2, .production-head h2, .outcome-head h2 { font-size: clamp(2.65rem,10.5vw,4rem); }
  .chapter-intro > p:last-child, .production-head > p:last-child, .outcome-head > p:last-child { font-size: .9rem; }
  .structure-stage { width: calc(100% + 10vw); height: auto; min-height: 0; aspect-ratio: 1792 / 1024; margin-inline: -5vw; }
  .structure-legend { grid-template-columns: 1fr; gap: 1.5rem; }
  .structure-legend h3 { font-size: clamp(2.2rem,8vw,3rem); }
  .structure-legend p:last-child { grid-column: 1; }
  .process-dieline { width: calc(100% + 10vw); margin-left: -5vw !important; padding: 4rem 5vw; min-height: 0; }
  .process-copy { display: block; }
  .process-copy h3 { margin: 3rem 0 0; font-size: 2.2rem; }
  .process-copy p { margin-top: 1.8rem; }
  .process-dieline img { max-height: none; }
  .process-views { width: 100%; margin-top: 7rem !important; }
  .process-views figcaption { font-size: .65rem; }
  .outcome-hero { width: calc(100% + 10vw); height: 64svh; margin-inline: -5vw; }
  .outcome-hero figcaption { right: 5vw; }
  .outcome-editorial { display: flex; flex-direction: column; gap: 4rem; padding-block: 7rem; }
  .outcome-angle, .outcome-detail { width: 100%; height: auto; }
  .outcome-angle img, .outcome-detail img { height: auto; }
  .outcome-copy { padding: 0; align-self: stretch; }
  .outcome-copy h3 { margin-top: 2rem; font-size: 2.7rem; }
  .closing-line { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
}