:root { --ink:#171b19; --paper:#eeeae0; --acid:#c9ff36; --line:rgba(23,27,25,.22); --max:1320px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; }
.skip-link { position:fixed; z-index:20; left:1rem; top:-5rem; padding:.8rem 1rem; background:var(--acid); }
.skip-link:focus { top:1rem; }
.site-header { max-width:var(--max); margin:0 auto; min-height:86px; padding:0 clamp(1.2rem,4vw,3.5rem); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); }
.identity { font-weight:800; text-decoration:none; text-transform:uppercase; letter-spacing:.08em; }
.site-header p { margin:0; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; }
.edition { justify-self:end; font-size:.76rem; }
.intro { max-width:var(--max); min-height:72svh; margin:0 auto; padding:clamp(5rem,10vw,10rem) clamp(1.2rem,4vw,3.5rem) 5rem; }
.kicker { margin:0 0 1.2rem; font-size:.73rem; font-weight:800; text-transform:uppercase; letter-spacing:.2em; }
h1 { max-width:1060px; margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(4.3rem,10.5vw,10rem); font-weight:400; line-height:.83; letter-spacing:-.075em; }
.intro-text { max-width:570px; margin:clamp(2.5rem,5vw,4.5rem) 0 0 auto; font-family:Georgia,"Times New Roman",serif; font-size:clamp(1.25rem,2.2vw,1.9rem); line-height:1.3; }
.scroll-hint { display:inline-flex; gap:1rem; align-items:center; margin-top:3rem; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.11em; text-decoration:none; border-bottom:1px solid; padding-bottom:.45rem; }
.poster-section { padding:clamp(4rem,8vw,8rem) max(clamp(1.2rem,4vw,3.5rem),calc((100vw - var(--max))/2 + 3.5rem)); background:#121614; color:#f5f1e8; }
.section-head { margin-bottom:2rem; display:flex; justify-content:space-between; align-items:baseline; gap:2rem; border-bottom:1px solid rgba(255,255,255,.25); }
.section-head h2 { margin:0 0 1rem; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.5rem,5vw,4.8rem); font-weight:400; }
.section-head p { margin:0 0 1.2rem; color:rgba(255,255,255,.65); }
.poster-wall { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.2rem,2vw,2rem); align-items:start; }
.poster { position:relative; min-height:610px; overflow:hidden; color:white; background:#252b28; border:1px solid rgba(255,255,255,.18); text-decoration:none; isolation:isolate; }
.poster-featured { grid-column:span 6; cursor:pointer; }
.poster-placeholder { grid-column:span 3; margin-top:6rem; color:#171b19; background:#b9b1a1; }
.poster-light { margin-top:12rem; background:#d8d2c5; }
.poster img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(.72); transform:scale(1.01); transition:filter .65s ease,transform .75s cubic-bezier(.2,.8,.2,1); }
.poster-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom,rgba(0,0,0,.03) 25%,rgba(0,0,0,.75)); }
.poster-index { position:absolute; top:1.2rem; left:1.2rem; font-size:.74rem; letter-spacing:.13em; }
.poster-copy { position:absolute; left:1.4rem; right:1.4rem; bottom:1.5rem; display:grid; gap:.45rem; transition:transform .45s ease; }
.poster-type,.poster-artist { font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; }
.poster-copy strong { font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.8rem,5vw,5.5rem); font-weight:400; line-height:.9; letter-spacing:-.045em; }
.poster-placeholder .poster-copy strong { font-size:clamp(2rem,3vw,3.5rem); }
.poster-action { position:absolute; z-index:2; top:50%; left:50%; min-width:180px; padding:.95rem 1.1rem; display:flex; justify-content:space-between; gap:1rem; color:#121614; background:var(--acid); border-radius:99px; font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; opacity:0; transform:translate(-50%,-35%) scale(.92); transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1); }
.plus { position:absolute; top:50%; left:50%; font-family:Georgia,serif; font-size:7rem; opacity:.32; transform:translate(-50%,-50%); }
.poster-featured:hover img,.poster-featured:focus-visible img { filter:grayscale(0) contrast(1.03) brightness(.95); transform:scale(1.07); }
.poster-featured:hover .poster-action,.poster-featured:focus-visible .poster-action { opacity:1; transform:translate(-50%,-50%) scale(1); }
.poster-featured:hover .poster-copy,.poster-featured:focus-visible .poster-copy { transform:translateY(-.6rem); }
.poster-featured:focus-visible { outline:4px solid var(--acid); outline-offset:5px; }
footer { max-width:var(--max); margin:0 auto; padding:3rem clamp(1.2rem,4vw,3.5rem); display:flex; justify-content:space-between; gap:2rem; font-size:.8rem; }
footer p { margin:0; }
@media (max-width:900px) { .site-header{grid-template-columns:1fr auto}.site-header p{display:none}.intro{min-height:65svh}.poster-featured{grid-column:span 12}.poster-placeholder{grid-column:span 6;margin-top:0;min-height:460px} }
@media (max-width:620px) { .site-header{min-height:70px}.intro{min-height:70svh}h1{font-size:clamp(3.8rem,20vw,6rem)}.intro-text{margin-left:0}.section-head{align-items:flex-start;flex-direction:column;gap:0}.poster,.poster-placeholder{grid-column:span 12;min-height:72svh;margin:0}.poster-placeholder{min-height:420px}.poster-featured img{filter:grayscale(.72) contrast(1.05) brightness(.82)}.poster-action{top:1rem;right:1rem;left:auto;min-width:0;opacity:1;transform:none}.poster-featured:hover .poster-action,.poster-featured:focus-visible .poster-action{transform:none}footer{flex-direction:column} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.poster img,.poster-action,.poster-copy{transition:none} }