.story-record{position:relative;isolation:isolate;min-height:100svh;display:flex;align-items:center;overflow:clip}.record-head{text-align:center;max-width:60ch;margin:0 auto clamp(2.2rem,5vh,3.6rem)}.record-eyebrow{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.36em;text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--s-sm, .9rem)}.story-record .display-heading{margin:.2rem 0 .8rem}.record-lede{font-size:var(--t-base);line-height:1.6;color:var(--c-fg-muted);max-width:48ch;margin:0 auto}.record-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,2rem)}.record-plate{width:100%;display:flex;flex-direction:column;gap:.9rem;padding:0;background:none;border:0;text-align:left;cursor:pointer;font:inherit;color:inherit}.record-plate-frame{position:relative;display:block;aspect-ratio:3 / 4;background:#0b0b0b;border:1px solid var(--c-border);padding:10px;overflow:hidden;transition:transform .4s var(--ease-out, cubic-bezier(.2,.7,.2,1)),border-color .4s,box-shadow .4s}.record-plate-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;filter:grayscale(.45) brightness(.32) contrast(1.06);transition:filter .7s var(--ease-out-quart, ease),transform 1.1s var(--ease-out-quart, ease);transform:scale(1.02)}.record-plate:hover .record-plate-frame img,.record-plate:focus-visible .record-plate-frame img{filter:grayscale(0) brightness(1) contrast(1);transform:scale(1)}.record-plate-view{position:absolute;left:50%;bottom:14px;transform:translate(-50%) translateY(8px);font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.3em;text-transform:uppercase;color:var(--c-bg);background:var(--c-accent);padding:.5rem 1.1rem;opacity:0;transition:opacity .35s,transform .35s var(--ease-out, ease);pointer-events:none}.record-plate:hover .record-plate-frame,.record-plate:focus-visible .record-plate-frame{transform:translateY(-5px);border-color:var(--c-accent);box-shadow:0 18px 50px -22px #000c,0 0 0 1px #c1b89440}.record-plate:hover .record-plate-view,.record-plate:focus-visible .record-plate-view{opacity:1;transform:translate(-50%) translateY(0)}.record-plate-meta{display:flex;flex-direction:column;gap:.25rem}.record-plate-title{font-family:var(--font-display);font-weight:600;font-size:var(--t-base);letter-spacing:-.01em;color:var(--c-fg);line-height:1.25}.record-plate-sub{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--c-fg-faint)}.record-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(1.5rem,5vh,4rem) clamp(1.25rem,5vw,5rem);background:#010101ed;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:rl-in .35s var(--ease-out, ease) both}@keyframes rl-in{0%{opacity:0}to{opacity:1}}.record-lightbox-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:1.4rem;max-width:min(820px,92vw)}.record-lightbox-fig img{max-width:100%;max-height:74vh;object-fit:contain;border:1px solid oklch(78% .05 95 / .3);box-shadow:0 40px 120px -40px #000000e6;background:#fff}.record-lightbox-cap{text-align:center;max-width:60ch;display:flex;flex-direction:column;gap:.5rem}.rl-title{font-family:var(--font-italic);font-style:italic;font-size:var(--t-xl);color:var(--c-accent)}.rl-sub{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--c-fg-faint)}.rl-desc{font-size:var(--t-sm);line-height:1.6;color:var(--c-fg-muted)}.record-lightbox-close{position:fixed;top:clamp(1rem,3vh,2rem);right:clamp(1rem,3vw,2.4rem);width:48px;height:48px;display:grid;place-items:center;background:transparent;border:1px solid var(--c-border);border-radius:50%;cursor:pointer;transition:border-color .3s}.record-lightbox-close span{position:absolute;width:18px;height:1px;background:var(--c-fg-muted);transition:background .3s}.record-lightbox-close span:first-child{transform:rotate(45deg)}.record-lightbox-close span:last-child{transform:rotate(-45deg)}.record-lightbox-close:hover{border-color:var(--c-accent)}.record-lightbox-close:hover span{background:var(--c-fg)}@media(max-width:900px){.record-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}}@media(max-width:460px){.record-grid{grid-template-columns:1fr;max-width:340px;margin:0 auto}.record-lightbox{flex-direction:column}}@media(prefers-reduced-motion:reduce){.record-plate-frame,.record-plate-view,.record-lightbox{transition:none;animation:none}}
