/* Decade doors: one heading, era-specific existing film artwork, native links. */
.decades-content {
 position: relative;
 max-width: none;
 padding: 30px clamp(20px, 3vw, 44px) 48px;
 background: radial-gradient(ellipse at 80% 0, #38101435, transparent 60%), #080c0e;
}
.decades-heading { margin: 24px 0 32px; }
.decades-heading h1 {
 font: 600 clamp(32px, 3.6vw, 56px)/1.15 var(--serif);
 color: #f1e5d8;
 margin: 0;
 letter-spacing: -.8px;
 text-shadow: 0 3px 12px #000;
}
.decade-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.decade-door {
 position: relative;
 isolation: isolate;
 display: flex;
 overflow: hidden;
 min-height: 278px;
 border: 1px solid #67312c;
 border-radius: 9px;
 background: #100c0c;
 box-shadow: 0 10px 24px #0008;
 transition: border-color .2s, box-shadow .2s;
}
.decade-artwork {
 position: absolute;
 z-index: -2;
 inset: 0 0 0 22%;
 display: flex;
 transform: skewX(-7deg) scale(1.1);
 transform-origin: center;
 background: #170e10;
}
.decade-art {
 width: 34%;
 min-width: 0;
 height: 100%;
 flex: 1 1 0;
 object-fit: cover;
 object-position: center 28%;
 opacity: .86;
 filter: saturate(.65) contrast(1.16) brightness(.85);
 border-left: 2px solid #130909;
 transition: filter .2s;
}
.decade-door:before {
 content: '';
 position: absolute;
 z-index: -1;
 inset: 0;
 pointer-events: none;
 background: linear-gradient(90deg, #090809 6%, #090809e8 25%, #09080962 56%, #09080905 100%), linear-gradient(0deg, #080607 2%, #08060708 70%);
}
.decade-door:after {
 content: '';
 position: absolute;
 inset: 0;
 pointer-events: none;
 border-top: 2px solid #7f231b80;
 box-shadow: inset 0 0 24px #0006;
}
.decade-door-copy { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; min-width: 0; padding: 28px; }
.decade-door h2 { font: 600 clamp(44px, 4vw, 64px)/1 var(--serif); color: #fff0df; margin: 0 0 12px; letter-spacing: -1px; text-shadow: 0 2px 14px #000; }
.decade-door h2 span { font-size: .44em; letter-spacing: 0; color: #e1c7b8; margin-left: 4px; }
.decade-door .decade-film-count { font: 400 14px/1.5 var(--sans); color: #ead7c9; margin: 0 0 30px; }
.decade-door-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 600 15px/1.5 var(--sans); color: #f5d2bb; }
.decade-door-action>span { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #a4503880; border-radius: 50%; background: #180b09a0; font-size: 24px; color: #ef8c6e; }
.decade-door:hover, .decade-door:focus-visible { border-color: #c06049; box-shadow: 0 12px 30px #000a, 0 0 22px #9a202239; }
.decade-door:hover .decade-art { filter: saturate(.85) contrast(1.16) brightness(1); }
.decade-door:focus-visible { outline: 2px solid #e4a783; outline-offset: 4px; }
.decades-note { font-size: 14px; line-height: 1.7; color: #baab9f; margin-top: 28px; }
.decades-note summary { cursor: pointer; }
@media (max-width: 850px) {
 .decade-doors { grid-template-columns: 1fr; gap: 18px; }
 .decade-door { min-height: 244px; }
 .decade-door-copy { padding: 24px; }
 .decades-heading { margin: 24px 0 26px; }
 .decade-door h2 { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) { .decade-door, .decade-art { transition: none; } }