*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#1a1a18;color:#d4cfc4;font-family:'Source Serif 4',serif;font-weight:400;font-size:clamp(0.95rem,1.2vw,1.15rem);line-height:1.72;overflow-x:hidden;letter-spacing:0.005em}

.page-frame{max-width:1400px;margin:0 auto;padding:clamp(1.2rem,3vw,3.6rem);border:1px solid #3a3a3a;border-radius:2px;position:relative}

/* Viewfinder bracket */
.viewfinder-bracket{position:fixed;bottom:24px;right:24px;width:40px;height:40px;z-index:50;opacity:0.4}
.viewfinder-bracket::before,.viewfinder-bracket::after{content:'';position:absolute;border-color:#6b6860;border-style:solid}
.viewfinder-bracket::before{bottom:0;right:0;width:20px;height:1px;border-width:0 0 1px 0}
.viewfinder-bracket::after{bottom:0;right:0;width:1px;height:20px;border-width:0 1px 0 0}

/* Letterbox */
.letterbox{background:#12120f;width:100%;position:relative;z-index:2}
.letterbox--top,.letterbox--bottom{height:calc((100vh - (100vw / 2.35))/2);min-height:40px;max-height:120px}

/* Scenes */
.scene{position:relative}
.scene--wide{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}
.scene--bento{padding:clamp(2rem,6vh,6rem) 0}
.scene--chain{padding:clamp(2rem,4vh,4rem) 0}
.scene--closeup{padding:clamp(3rem,8vh,8rem) 0}
.scene--fade{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}

/* Bento Cells */
.bento-cell{padding:clamp(1rem,2vw,2.4rem);background:#2e2e2a;box-shadow:inset 0 0 0 1px rgba(180,170,155,0.15),inset 0 0 60px rgba(18,18,15,0.3);position:relative;background-image:radial-gradient(ellipse at 20% 50%,rgba(180,170,150,0.04) 0%,transparent 70%),radial-gradient(ellipse at 80% 20%,rgba(160,150,130,0.03) 0%,transparent 60%)}

/* Hero */
.cell--hero{text-align:center;padding:clamp(2rem,6vw,6rem);flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;background:transparent;box-shadow:none}
.hero-title{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(3rem,7vw,6rem);letter-spacing:-0.02em;line-height:1.08;color:#f2ede3}
.hero-title .dot{display:inline-block;position:relative}
.hero-title .dot::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:radial-gradient(circle at center,rgba(184,134,58,0.4) 0%,rgba(184,134,58,0.08) 40%,transparent 70%);animation:flicker 4s ease-in-out infinite alternate;pointer-events:none}
.hero-title .italic{font-weight:400;font-style:italic}
.hero-sub{font-family:'Source Serif 4',serif;font-weight:300;color:#6b6860;margin-top:1.5rem;max-width:40ch;text-align:center}
@keyframes flicker{0%{opacity:0.3}100%{opacity:0.55}}

/* Bento Grid 3x3 */
.bento-grid-3x3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(0.4rem,0.8vw,1rem)}
.cell--lg{grid-column:span 2;grid-row:span 2}
.cell--sm{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:0.3rem}

/* Data */
.data-label{font-family:'DM Mono',monospace;font-weight:300;font-size:clamp(0.7rem,0.9vw,0.85rem);color:#6b6860;letter-spacing:0.06em;text-transform:uppercase;font-feature-settings:'tnum' 1}
.data-value{font-family:'DM Mono',monospace;font-weight:300;font-size:clamp(1.4rem,2.5vw,2rem);color:#f2ede3;font-feature-settings:'tnum' 1}
.data-unit{font-family:'DM Mono',monospace;font-weight:300;font-size:0.75rem;color:#6b6860}
.data-mono{font-family:'DM Mono',monospace;font-weight:300;font-size:clamp(1rem,1.5vw,1.2rem);color:#d4cfc4;font-feature-settings:'tnum' 1}

/* Observation Text */
.obs-text{color:#d4cfc4;max-width:52ch;margin-bottom:1.2em;font-family:'Source Serif 4',serif;font-weight:400}
.obs-text--first::first-letter{font-family:'Playfair Display',serif;font-weight:700;font-size:3.2em;float:left;line-height:0.85;margin-right:0.08em;color:#b8863a}
.amber-underline{border-bottom:1px solid rgba(184,134,58,0.35)}

/* Chain */
.chain-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(0.4rem,0.8vw,1rem)}
.cell--chain{display:flex;justify-content:center;align-items:center;min-height:180px}
.chain-front{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}
.chain-word{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1rem,2vw,1.6rem);color:#f2ede3;letter-spacing:-0.02em}
.chain-icon{width:48px;height:48px}

/* Close-up */
.closeup-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(0.4rem,0.8vw,1rem);align-items:start}
.closeup-notes{display:flex;flex-direction:column;gap:clamp(0.4rem,0.8vw,1rem)}
.cell--note{padding:clamp(0.8rem,1.5vw,1.5rem)}
.note-text{font-family:'Source Serif 4',serif;font-weight:300;font-size:0.9rem;color:#d4cfc4;max-width:30ch}

/* Final */
.cell--final{text-align:center;background:transparent;box-shadow:none;padding:clamp(2rem,6vw,6rem)}
.final-text{font-family:'Playfair Display',serif;font-weight:400;font-style:italic;font-size:clamp(1.4rem,3vw,2.4rem);color:#f2ede3;max-width:30ch;margin:0 auto 2rem}
.final-time{font-family:'DM Mono',monospace;font-weight:300;font-size:0.85rem;color:#6b6860}

/* Reveals */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 0.7s cubic-bezier(0.23,1,0.32,1),transform 0.7s cubic-bezier(0.23,1,0.32,1)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

@media(max-width:768px){
  .bento-grid-3x3{grid-template-columns:1fr}
  .cell--lg{grid-column:span 1;grid-row:span 1}
  .chain-grid{grid-template-columns:repeat(2,1fr)}
  .closeup-grid{grid-template-columns:1fr}
  .letterbox--top,.letterbox--bottom{height:30px;min-height:20px}
}