/* v0.3: type on the left, two overlapping films on the right. */
[hidden]{display:none!important}
main{overflow:clip}
.navigation::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--paper) 0%,#fdfbf7e8 42%,#fdfbf700 100%);pointer-events:none}
.intro-hero{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,4vw,70px);width:min(1540px,91.111112%);margin:0 auto;padding:148px 0 115px;min-height:900px}
.hero-title{transform:rotate(-2deg);position:relative;z-index:2;text-align:left;padding-bottom:28px}
.hero-title h1{font:700 clamp(42px,4.2vw,68px)/1.125 'Courier Prime',monospace;letter-spacing:.6px;color:var(--gold);-webkit-text-stroke:3px #fff;paint-order:stroke fill;text-shadow:1px 4px #c88e4e14}
.hero-films{position:relative;width:100%;aspect-ratio:1.12;isolation:isolate}
.film-sheet{position:relative;margin:0;width:100%;isolation:isolate}
/* The recording already has a paper background. No extra mat or white frame. */
.video-surface{padding:0;border:0;border-radius:18px;overflow:hidden;background:none;box-shadow:0 4px 8px #53372205,0 22px 38px -22px #53372232}
.video-surface video{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;background:none}
.calendar-sheet .video-surface video{clip-path:inset(0 0 1px 0)}
.hero-films .film-sheet{position:absolute}
.calendar-sheet{top:3%;left:0;width:60%;transform:rotate(-5deg);z-index:1}
.time-sheet{top:25%;right:0;width:50%;transform:rotate(5deg);z-index:2}
.stamp-pair{max-width:1130px;display:grid;grid-template-columns:1fr 1fr;gap:150px;margin:0 auto;padding:90px 40px 160px}
.stamp-scene{min-width:0;text-align:center}
.partner-scene{padding-top:80px}
.stamp-scene h2{font:700 clamp(28px,2.6vw,38px)/1.25 'Courier Prime',monospace;letter-spacing:.6px;color:var(--gold);margin:0 0 45px;transform:rotate(-2deg)}
.stamp-scene .film-sheet{max-width:420px;margin:auto}
.stamp-copy h2{transform:none}
.stamp-description{display:none}
.brew-sheet{transform:rotate(-3deg)}
.shop-sheet{transform:rotate(3deg)}
/* The new trio is desktop-only while the user finalizes the website layout. */
.time-stamp-scene{display:none}
footer{margin-top:auto}
.hero-title-visual{display:block;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}.hero-title-word{display:inline-block;white-space:pre}.hero-title-letter{display:inline-block;transform-origin:50% 80%;pointer-events:none}.hero-title-glyph{display:inline-block;transform-origin:50% 85%;pointer-events:none}.section-title-motion[data-title-interactive=true] .hero-title-letter{pointer-events:auto}.section-title-motion[data-intro=pending] .hero-title-letter{opacity:0}
@media(max-width:1150px){
 .intro-hero{gap:32px;padding-top:140px;min-height:740px}
 .hero-title h1{font-size:clamp(34px,4.15vw,48px)}
 .stamp-pair{gap:80px;max-width:960px;padding-top:55px}
}
@media(max-width:800px){
 .intro-hero{grid-template-columns:1fr;gap:45px;min-height:0;width:calc(100% - 72px);padding:135px 0 100px}
 .hero-title{padding:0;max-width:620px}
 .hero-title h1{font-size:clamp(38px,7vw,54px)}
 .hero-title h1 br{display:none}
 .hero-films{max-width:600px;justify-self:center}
 .stamp-pair{max-width:700px;gap:50px;padding:40px 40px 100px}
 .stamp-scene h2{font-size:28px;margin-bottom:30px}
}
@media(max-width:700px){
 .intro-hero{width:calc(100% - 48px);padding-top:127px;padding-bottom:70px;gap:42px}
 .hero-title h1{font-size:clamp(31px,7.9vw,46px);line-height:1.125;-webkit-text-stroke:2px #fff}
 .video-surface{border-radius:12px}
 .hero-films{width:calc(100% - 12px);margin-bottom:18px}
 .stamp-pair{grid-template-columns:1fr;gap:78px;max-width:440px;padding:35px 35px 80px}
 .partner-scene{padding-top:0}
 .stamp-scene h2{font-size:30px;margin-bottom:32px}
 .stamp-scene .film-sheet{max-width:340px}
 footer{padding-block:16px;gap:8px}
}
@media(min-width:801px){
 /* Exchange only the desktop film slots; keep each film's size and tilt. */
 .calendar-sheet{top:25%;left:auto;right:0;z-index:2}
 .time-sheet{top:3%;left:0;right:auto;z-index:1}
 .stamp-pair{position:relative;isolation:isolate;width:100%;max-width:1280px;grid-template-columns:minmax(0,1fr);gap:120px;padding:90px 40px 140px;scroll-margin-top:100px}
 .stamp-scene{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;column-gap:clamp(36px,6vw,104px);padding-top:0;scroll-margin-top:120px}
 .stamp-copy{grid-column:1;grid-row:1;justify-self:center;width:100%;max-width:420px;text-align:left}
 .stamp-scene h2{font-size:28px;margin:0 0 20px}
 .stamp-description{display:block;margin:0;font:400 20px/28px 'Courier Prime',monospace;letter-spacing:0;color:#3E2723;text-wrap:pretty}
 .stamp-scene .film-sheet{grid-column:2;grid-row:1;justify-self:center;width:100%;max-width:344px;margin:0}
 .brew-scene .stamp-copy{grid-column:2}
 .brew-scene .film-sheet{grid-column:1}
 .brew-sheet{transform:rotate(-5deg)}
 .shop-sheet{transform:rotate(4deg)}
 .time-stamp-sheet{transform:rotate(-3deg)}
}