/* Sabeti Lab · Holiday Cards — chapter (split from app.css; see ARCHITECTURE.md) */
/* ───────── scenes ───────── */
.story{position:relative}
.scene{position:relative;height:calc(var(--len,300) * var(--vh) / 100)}
.pin{position:sticky;top:0;height:var(--vh);min-height:100vh;overflow:hidden;isolation:isolate;background:var(--bg);color:var(--fg)}
.stage,.abs{position:absolute;inset:0}
.fx{position:absolute;inset:0;pointer-events:none;z-index:2}
.pin.light{--fg:var(--ink)}
.pin.parked .stage,.pin.parked .fx,.pin.parked .cap{display:none}

/* info panel: side column on wide screens, top band on narrow ones – never over the pictures */
.info{position:absolute;z-index:8;left:clamp(20px,4vw,64px);top:50%;transform:translateY(-50%);width:min(30vw,380px);will-change:opacity,transform;opacity:0}
.i-kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.7;margin-bottom:6px}
.i-year{font-family:var(--serif);font-weight:300;font-size:clamp(64px,8.5vw,136px);line-height:.88;letter-spacing:-.02em}
.i-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,2.4vw,38px);line-height:1.1;margin-top:10px}
.i-tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-top:10px;color:var(--accent)}
.i-line{font-size:clamp(14px,1.1vw,16px);line-height:1.55;margin-top:12px;opacity:.85;max-width:38ch}
.i-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px;font-size:11.5px;letter-spacing:.06em;opacity:.75}
.i-meta a{text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px}
.i-meta a:hover{opacity:1;border-bottom-width:2px}
.i-now{margin-top:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px;min-height:20px}
.i-now::before{content:"";width:28px;height:1px;background:var(--accent);flex:0 0 auto}
.i-now a{text-decoration:none;opacity:.6;letter-spacing:.06em;text-transform:none}
.i-now a:hover{opacity:1}
body.narrow .info{left:16px;right:16px;top:calc(var(--bar) - 2px);transform:none;width:auto;text-align:center;display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:center;text-align:left}
body.narrow .i-kicker,body.narrow .i-line,body.narrow .i-meta{display:none}
body.narrow .i-year{font-size:clamp(44px,13vw,64px);grid-row:1/4}
body.narrow .i-title{font-size:clamp(17px,4.6vw,24px);margin-top:0}
body.narrow .i-tag{margin-top:2px;font-size:10px}
body.narrow .i-now{margin-top:4px;font-size:10.5px}
body.narrow .i-now::before{width:16px}

/* intro captions */
.cap{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(34px,6vw,92px);line-height:1;letter-spacing:-.01em;white-space:nowrap;pointer-events:none;opacity:0;will-change:transform,opacity;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.cap.top{top:calc(var(--bar) + 4vh);transform:translateX(-50%)}
.cap small,.i-line small{font-size:.82em;text-transform:none}
.pin.light .cap{text-shadow:0 2px 30px rgba(255,255,255,.4)}

/* gallery: a clipped box that never overlaps the info panel */
.walk{position:absolute;left:0;top:0;overflow:hidden;z-index:3}
.item{position:absolute;left:50%;top:50%;will-change:transform,opacity;transform-origin:50% 50%;opacity:0}
.item-frame{position:relative;box-sizing:content-box;background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.55);border-radius:3px}
.item-frame img{width:100%;height:100%;object-fit:contain;border-radius:inherit;background-size:cover;background-position:center}
.item-frame .ph{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(12px);transform:scale(1.04);border-radius:inherit;transition:opacity .5s}
.item.loaded .ph{opacity:0}
.item-label{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);font-size:11px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .3s}
.item.active .item-label{opacity:.8}
.item.video .item-frame{background:#000;aspect-ratio:16/9;overflow:hidden}
.item.video .poster{width:100%;height:100%;object-fit:cover;opacity:.85}
.item.video .play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.item.video .play i{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.75);display:grid;place-items:center;background:rgba(0,0,0,.35);backdrop-filter:blur(6px)}
.item.video .play i::after{content:"";border-style:solid;border-width:9px 0 9px 16px;border-color:transparent transparent transparent #fff;margin-left:4px}
.item.video .play b{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-weight:400;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.item.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.item.video .shield{position:absolute;left:50%;top:12px;transform:translateX(-50%);cursor:pointer;z-index:3}
.item.video .shield span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;white-space:nowrap;border:1px solid rgba(255,255,255,.25)}
.item.video .shield:hover span{background:rgba(0,0,0,.85)}