/* Product-led presentation. Geometry and print materials remain in styles.css. */
:root { --paper: #f3f3ee; --ink: #243329; --muted: #687169; --line: rgba(36,51,41,.16); }
html { scroll-padding-top: 64px; }
body { overflow-x: clip; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #72964c; outline-offset: 6px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.035em; }
.topbar { height: 64px; padding-inline: 5vw; background: rgba(243,243,238,.9); }
.topbar p { font-size: .7rem; letter-spacing: .05em; }
.topbar nav { align-items: center; gap: 28px; }
.topbar nav a, .sound-toggle { font-size: .7rem; font-weight: 500; letter-spacing: .03em; }
.topbar nav a[aria-current] { color: #4e7a35; }
.topbar nav a[aria-current]::after { content: ""; display: block; height: 1px; margin-top: 5px; background: currentColor; }
.page-progress { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: #6d9143; transform: scaleX(var(--page-progress,0)); transform-origin: left; }
.panel { padding-inline: 7vw; }
.kicker { font-weight: 500; letter-spacing: .15em; font-size: .63rem; }
.section-label { margin-bottom: 5rem; font-weight: 500; font-size: .63rem; letter-spacing: .12em; }
.section-label i { width: 48px; }

/* One sticky composition, not two independently drifting columns. */
.hero { display: block; min-height: 166svh; padding: 64px 0 0; overflow: visible; background: radial-gradient(ellipse at 69% 42%, #fffffb, #f0f1eb 75%); }
.hero-sticky { position: sticky; top: 64px; display: grid; grid-template-columns: .41fr .59fr; align-items: center; height: calc(100svh - 64px); min-height: 570px; padding: 0 7vw; }
.hero-copy { position: relative; top: auto; align-self: center; padding: 0 0 30px; margin: 0; max-width: 490px; }
.hero h1 { font-size: clamp(2.9rem,4.2vw,5.2rem); line-height: 1.28; letter-spacing: -.055em; }
.hero h1 em { color: #6a805f; }
.hero .intro { margin-top: 1.6rem; font-size: .92rem; line-height: 1.9; }
.hero .meta-grid { margin-top: 2rem; max-width: 350px; padding-top: 1rem; gap: 7px; font-size: .67rem; }
.hero .meta-grid b { min-width: 6.5rem; font-size: .56rem; font-weight: 500; }
.hero .actions { gap: 24px; margin-top: 1.8rem; }
.hero .primary { font-size: .73rem; padding: 14px 18px; border-radius: 2px; background: #2d4836; }
.hero .text-link { font-size: .72rem; }
.object-stage { position: relative; top: auto; width: 100%; height: 100%; min-height: 0; touch-action: pan-y; }
.hero .giftbox { transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); }
.hero .dn-model { transform: scale3d(var(--hero-scale,1.35),var(--hero-scale,1.35),var(--hero-scale,1.35)); }
.hero .giftbox.is-open .dn-model { transform: scale3d(var(--hero-open-scale,.6),var(--hero-open-scale,.6),var(--hero-open-scale,.6)); }
.stage-caption { top: 10%; font-size: .55rem; letter-spacing: .09em; }
.stage-caption i { width: 28px; }
.object-ground { bottom: 22%; width: 290px; height: 22px; opacity: .45; filter: blur(25px); }
.hero .assembly-shadow { opacity: .2; }
.hero-product-caption { position: absolute; bottom: 12%; left: 12%; right: 0; display: flex; justify-content: space-between; gap: 12px; color: #788174; font-size: .55rem; letter-spacing: .1em; }
.hero-scroll { position: absolute; bottom: 24px; left: 7vw; right: 7vw; display: flex; align-items: center; justify-content: space-between; color: #6c786b; font-size: .55rem; letter-spacing: .16em; border-top: 1px solid var(--line); padding-top: 14px; }
.hero-scroll > span:last-child { font-size: 1.15rem; }

/* A quiet photographic interlude; no blurred type or scroll-jacking. */
.statement { height: auto; padding: 100px 7vw; background: #e8eae2; color: var(--ink); }
.statement-sticky { position: relative; top: auto; height: auto; min-height: 650px; padding: 0; display: grid; grid-template-columns: .45fr .55fr; gap: 9vw; overflow: visible; }
.statement .section-label { position: absolute; top: 0; left: 0; color: #6c786b; }
.statement-overline { font-size: .6rem; color: #6c786b; letter-spacing: .12em; margin-bottom: 28px; }
.statement-copy { padding-top: 30px; }
.statement-title { font-size: clamp(2.25rem,3.3vw,4.1rem); line-height: 1.4; }
.statement-title .type-line, .motion-ready .statement-title .type-line { color: var(--ink); opacity: 1; filter: none; transform: none; white-space: nowrap; will-change: auto; }
.statement-title .type-line-two { color: #6b8062; }
.statement-note { font-size: .86rem; line-height: 1.95; color: #647060; max-width: 24em; margin-top: 30px; }
.statement-visual { height: 660px; max-height: none; }
.statement-visual img { object-position: center 60%; transform: scale(var(--photo-scale,1)); }
.statement-visual { position: relative; margin: 0; }
.material-caption { position: absolute; bottom: 16px; left: 18px; margin: 0; color: #536449; font-size: .55rem; letter-spacing: .08em; }
.statement-index { bottom: 0; left: 0; color: #6c786b; font-size: .55rem; }

/* The original model, cloned once: every material and hinge stays identical. */
.structure { background: #f3f3ee; padding-block: 110px 100px; }
.structure .chapter-intro, .production-head, .outcome-head { column-gap: 9vw; margin-bottom: 75px; }
.chapter-intro h2, .production-head h2, .outcome-head h2 { font-size: clamp(2.6rem,4vw,4.9rem); line-height: 1.28; }
.chapter-intro > p:last-child, .production-head > p:last-child, .outcome-head > p:last-child { font-size: .88rem; max-width: 25em; line-height: 1.95; }
.structure-film { position: relative; height: 280svh; width: calc(100% + 14vw); margin-inline: -7vw; }
.structure-stage { position: sticky; top: 64px; display: block; width: 100%; height: calc(100svh - 64px); min-height: 580px; margin: 0; overflow: hidden; color: #f3f5ed; background: radial-gradient(ellipse at 50% 45%, #303b30 0%, #1b251e 65%); }
.scene-heading { position: absolute; z-index: 2; left: 7vw; right: 7vw; top: 34px; display: flex; justify-content: space-between; color: #a6b19d; font-size: .6rem; font-weight: 400; letter-spacing: .12em; }
.scene-heading p { margin: 0; }
.scene-heading span { letter-spacing: .06em; }
.scene-type { position: absolute; left: 0; right: 0; top: 14%; text-align: center; color: rgba(185,208,158,.04); font-size: clamp(150px,20vw,350px); font-weight: 500; letter-spacing: -.08em; line-height: 1; pointer-events: none; transform: translateY(calc(var(--scene-progress,0) * -25px)); }
.scene-camera { position: absolute; inset: 10% 0 23%; display: grid; place-items: center; perspective: 1800px; }
.giftbox.structure-scene { --rx: -18deg; --ry: -26deg; width: 390px; height: 430px; transform: translate3d(var(--scene-x,0px),var(--scene-y,-10px),0) rotateX(var(--rx)) rotateY(var(--ry)); transition: none; pointer-events: none; }
.giftbox.structure-scene .dn-model { transform: scale3d(var(--scene-scale,1.25),var(--scene-scale,1.25),var(--scene-scale,1.25)); transform-origin: 50% 50%; transition: none; }
.giftbox.structure-scene .dn-solid, .giftbox.structure-scene .dn-flap, .giftbox.structure-scene .dn-lid-hinge, .giftbox.structure-scene .dn-face { transition: none; }
.giftbox.structure-scene .dn-flap-left { transform: translate3d(calc(-134px - var(--left-fold,0) * 25px),96px,0) rotateZ(calc(var(--left-fold,0) * -90deg)); }
.giftbox.structure-scene .dn-flap-right { transform: translate3d(calc(126px + var(--right-fold,0) * 46px),96px,0) rotateZ(calc(var(--right-fold,0) * 90deg)); }
.giftbox.structure-scene .dn-flap-left .dn-lid-hinge { transform: rotateZ(calc(var(--left-fold,0) * -90deg)); }
.giftbox.structure-scene .dn-flap-right .dn-lid-hinge { transform: rotateZ(calc(var(--right-fold,0) * 90deg)); }
.giftbox.structure-scene .dn-outer-sheet { transform: translate(-50%,-50%) translate3d(calc(-4px - var(--left-fold,0) * 12.5px + var(--right-fold,0) * 23px),96px,0) scaleX(calc(1 + var(--left-fold,0) * .0961538 + var(--right-fold,0) * .1769231)); }
.giftbox.structure-scene .dn-main-body { transform: translate(-50%,-50%) translate3d(calc(-42px - var(--left-fold,0) * 25px),18px,0); }
.giftbox.structure-scene .dn-main-inner { transform: translate(-50%,-50%) translate3d(calc(-42px - var(--left-fold,0) * 25px),calc(20px - var(--left-fold,0) * 30px),calc(18px - var(--left-fold,0) * 18px)); opacity: var(--main-reveal,0); }
.giftbox.structure-scene .dn-side-inner { opacity: var(--side-reveal,0); }
.giftbox.structure-scene .dn-main-body > .dn-face-top { opacity: calc(1 - var(--main-reveal,0)); }
.giftbox.structure-scene .dn-side-body > .dn-face-top { opacity: calc(1 - var(--side-reveal,0)); }
.giftbox.structure-scene .dn-main-body .dn-rim-wall { opacity: var(--main-reveal,0); }
.giftbox.structure-scene .dn-side-body .dn-rim-wall { opacity: var(--side-reveal,0); }
.giftbox.structure-scene .dn-rim-wall > .dn-face-top { opacity: 1; }
.scene-foot { position: absolute; bottom: 45px; left: 7vw; right: 7vw; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; }
.scene-caption > span { font-size: .56rem; color: #a4b599; letter-spacing: .12em; }
.scene-caption h3 { margin-top: 10px; font-size: clamp(1.3rem,2.1vw,2rem); letter-spacing: -.025em; line-height: 1.35; }
.scene-caption p { margin: 12px 0 0; font-size: .75rem; line-height: 1.8; color: #adb8a5; max-width: 34em; }
.scene-controls { display: flex; gap: 22px; }
.scene-controls button { border: 0; border-bottom: 1px solid #52624a; color: #96a38a; background: transparent; padding: 13px 2px; font-size: .73rem; cursor: pointer; white-space: nowrap; }
.scene-controls button span { margin-right: 6px; font-size: .56rem; }
.scene-controls button[aria-pressed="true"] { color: #e2efcb; border-color: #c8deaa; }
.scene-controls button:hover { color: #f3f5ed; }
.scene-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #4c5846; }
.scene-progress i { display: block; height: 100%; width: 100%; background: #bddb91; transform: scaleX(var(--scene-progress,0)); transform-origin: left; }
.structure-legend { margin-top: 70px; padding-top: 40px; grid-template-columns: .25fr 1fr .75fr; }
.structure-legend h3 { font-size: clamp(1.7rem,2.6vw,3.2rem); line-height: 1.4; }
.structure-legend p:last-child { font-size: .85rem; }
.form-study { position: relative; margin: 65px 0 0; overflow: hidden; background: #ece7dc; }
.form-study img { width: 100%; height: auto; transform: scale(var(--image-scale,1)); }
.form-study figcaption { position: absolute; bottom: 24px; left: 28px; right: 28px; display: flex; justify-content: space-between; gap: 15px; color: #536249; font-size: .58rem; letter-spacing: .08em; }

/* Editorial plates: regular rhythm, small captions, generous image scale. */
.production { padding-block: 110px 90px; background: #eceee7; }
.process-dieline { min-height: 660px; padding: 70px 7vw; background: #e3e6dc; }
.process-copy h3 { margin-top: 60px; font-size: clamp(1.7rem,2.25vw,2.9rem); line-height: 1.4; }
.process-copy b { font-weight: 500; font-size: .58rem; }
.process-copy p { font-size: .8rem; }
.process-views { margin-top: 90px !important; width: 82%; }
.outcome { padding-top: 110px; background: #f3f3ee; }
.outcome-hero { height: min(86svh,950px); }
.outcome-film { height: 160svh; width: calc(100% + 14vw); margin-inline: -7vw; }
.outcome-film .outcome-hero { position: sticky; top: 64px; width: 100%; height: calc(100svh - 64px); margin: 0; }
.outcome-film .outcome-hero img { transform: scale(var(--image-scale,1.08)); }
.outcome-film .outcome-hero { clip-path: inset(0 var(--image-inset,0%)); }
.process-dieline img, .process-views img { transform: translateY(var(--image-y,0px)); }
.outcome-editorial figure img { transform: scale(var(--image-scale,1)); }
.outcome-editorial figure:hover img { transform: scale(var(--image-scale,1)); }
.outcome-editorial { gap: 70px 8vw; padding-block: 100px; }
.outcome-copy { padding-top: 20px; }
.outcome-copy h3 { margin-top: 32px; font-size: clamp(2rem,3vw,3.9rem); line-height: 1.4; }
.outcome-copy p { font-size: .85rem; }
.outcome-angle { height: min(108svh,1100px); }
.outcome-detail { height: min(58svh,650px); }
.closing-line { padding-block: 30px; font-size: .58rem; }
@media (min-width: 901px) and (max-height: 720px) {
  .hero-sticky { min-height: 0; }
  .hero .meta-grid { margin-top: 1.4rem; }
  .hero-copy { padding-bottom: 20px; }
  .hero h1 { font-size: 3.6vw; }
  .stage-caption { top: 8%; }
  .hero-product-caption { bottom: 8%; }
}
@media (max-width: 1000px) {
  .hero-sticky { grid-template-columns: .44fr .56fr; padding-inline: 5vw; }
  .hero h1 { font-size: 3.8vw; }
  .statement-sticky { gap: 6vw; min-height: 520px; }
  .statement-visual { height: 570px; }
  .structure-legend { grid-template-columns: .25fr 1fr; }
  .structure-legend p:last-child { grid-column: 2; }
  .scene-controls { gap: 14px; }
}
@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: 64px; }
  .hero-sticky { position: relative; top: auto; height: auto; min-height: 0; grid-template-columns: 1fr; padding: 55px 7vw 75px; }
  .hero-copy { max-width: none; padding: 0; }
  .hero h1 { font-size: clamp(2.6rem,5.5vw,4rem); }
  .hero .intro { margin-top: 1rem; }
  .hero .meta-grid { display: none; }
  .hero .actions { margin-top: 1.4rem; }
  .object-stage { height: 470px; min-height: 0; margin-top: 0; }
  .hero .object-stage { overflow: clip; }
  .stage-caption { top: 5%; }
  .hero-product-caption { left: 0; right: 0; bottom: 0; }
  .hero-scroll { bottom: 20px; }
  .statement { padding-block: 75px; }
  .statement-sticky { min-height: 0; grid-template-columns: 1fr 1fr; }
  .statement .section-label { position: static; grid-column: 1 / -1; margin: 0 0 30px; }
  .statement-copy { padding-top: 0; }
  .statement-title { font-size: 2.8vw; }
  .statement-visual { height: 440px; }
  .statement-index { position: static; grid-column: 1 / -1; margin-top: 20px; }
  .structure .chapter-intro, .production-head, .outcome-head { grid-template-columns: 1fr 1fr; gap: 20px 6vw; }
  .chapter-intro .kicker, .production-head .kicker, .outcome-head .kicker { grid-column: 1 / -1; }
  .chapter-intro h2, .production-head h2, .outcome-head h2 { font-size: 3.8vw; }
  .scene-foot { grid-template-columns: 1fr; gap: 20px; bottom: 30px; }
  .scene-camera { inset: 8% 0 30%; }
  .scene-caption h3 { font-size: 1.5rem; }
  .scene-controls { justify-content: flex-end; }
  .process-dieline { min-height: 0; }
  .process-copy h3 { margin-top: 0; }
}
@media (max-width: 560px) {
  .panel { padding-inline: 5vw; }
  .hero.panel { padding-inline: 0; }
  .topbar { padding-inline: 5vw; }
  .topbar nav { gap: 20px; }
  .topbar nav a, .sound-toggle { font-size: .65rem; }
  .sound-toggle { display: none; }
  .hero-sticky { padding: 42px 5vw 74px; }
  .hero .kicker { font-size: .56rem; margin-bottom: 20px; }
  .hero h1 { font-size: 9.4vw; line-height: 1.3; }
  .hero .intro { font-size: .8rem; }
  .hero .actions { gap: 22px; }
  .hero .primary { padding: 12px 16px; font-size: .7rem; }
  .hero .text-link { font-size: .68rem; }
  .object-stage { height: 380px; margin-top: 24px; }
  .stage-caption { font-size: .5rem; top: 0; }
  .stage-caption i { width: 18px; }
  .hero-product-caption { font-size: .48rem; }
  .hero-scroll { left: 5vw; right: 5vw; }
  .statement { padding: 64px 5vw; }
  .statement-sticky { grid-template-columns: 1fr; gap: 30px; }
  .statement .section-label { margin-bottom: 15px; }
  .statement-overline { margin-bottom: 20px; }
  .statement-title { font-size: 7.7vw; }
  .statement-note { margin-top: 20px; font-size: .8rem; }
  .statement-visual { height: 440px; }
  .statement-index { grid-column: 1; margin-top: 0; }
  .section-label { margin-bottom: 45px; }
  .structure, .production, .outcome { padding-top: 70px; }
  .structure, .production { padding-bottom: 65px; }
  .structure .chapter-intro, .production-head, .outcome-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 45px; }
  .chapter-intro h2, .production-head h2, .outcome-head h2 { font-size: 8.4vw; }
  .chapter-intro > p:last-child, .production-head > p:last-child, .outcome-head > p:last-child { font-size: .83rem; }
  .structure-film { width: calc(100% + 10vw); margin-inline: -5vw; height: 230svh; }
  .structure-stage { height: calc(100svh - 64px); min-height: 540px; aspect-ratio: auto; width: 100%; margin: 0; }
  .scene-heading { top: 24px; left: 5vw; right: 5vw; font-size: .48rem; }
  .scene-heading span { font-size: .48rem; }
  .scene-type { font-size: 40vw; top: 23%; }
  .scene-camera { inset: 12% 0 30%; perspective: 1800px; }
  .scene-foot { left: 5vw; right: 5vw; bottom: 24px; gap: 14px; }
  .scene-caption h3 { font-size: 1.3rem; margin-top: 9px; }
  .scene-caption p { font-size: .7rem; margin-top: 10px; max-width: 30em; min-height: 2.8em; }
  .scene-controls { justify-content: space-between; gap: 28px; }
  .scene-controls button { flex: 1; text-align: left; font-size: .67rem; padding-block: 10px; }
  .structure-legend { grid-template-columns: 1fr; gap: 22px; margin-top: 45px; padding-top: 30px; }
  .structure-legend p:last-child { grid-column: 1; font-size: .8rem; }
  .structure-legend h3 { font-size: 1.8rem; }
  .form-study { margin-top: 40px; }
  .form-study figcaption { bottom: 14px; left: 15px; right: 15px; font-size: .46rem; }
  .process-dieline { padding: 45px 5vw; }
  .process-copy h3 { margin-top: 28px; font-size: 1.8rem; }
  .process-views { width: 100%; margin-top: 55px !important; }
  .process-views figcaption { flex-direction: column; gap: 8px; }
  .outcome-hero { height: 58svh; }
  .outcome-film { width: calc(100% + 10vw); margin-inline: -5vw; height: 125svh; }
  .outcome-film .outcome-hero { height: calc(85svh - 64px); }
  .outcome-editorial { padding-block: 60px; gap: 45px; }
  .outcome-angle, .outcome-detail { height: auto; }
  .outcome-copy h3 { font-size: 1.9rem; }
  .closing-line { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { min-height: 0; }
  .hero-sticky { position: relative; top: auto; }
  .structure-film { height: auto; }
  .structure-stage { position: relative; top: auto; }
  .giftbox, .giftbox *, .outcome-editorial img, [data-reveal] { transition: none !important; }
  .scene-type, .statement-visual img { transform: none; }
  .outcome-film { height: auto; }
  .outcome-film .outcome-hero { position: relative; top: auto; height: 75svh; clip-path: none; }
  .outcome-film img, .process-scene img, .outcome-editorial figure img { transform: none !important; }
}