/* Paleobeard cinema study: existing brand, real photographs, restrained motion. */
.cinema { position:relative; isolation:isolate; padding:0; background:#10130f; overflow:hidden; min-height:700px; height:min(850px, calc(100svh - 80px)); }
.cinema-stage { position:absolute; inset:0 0 0 27%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%); mask-image:linear-gradient(90deg,transparent,#000 22%); }
.cinema-slide { position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1.32s cubic-bezier(.4,0,.2,1); }
.cinema-slide.is-active { opacity:1; z-index:1; }
.cinema-slide picture { display:block; width:100%; height:100%; }
.cinema-slide img { width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 50%; transform:scale(1.025); background:#10130f; }
.cinema-slide.is-running img { animation:cinema-drift 8.32s linear both; }
.cinema-slide:nth-child(even).is-running img { animation-name:cinema-drift-back; }
.cinema[data-playing="false"] .cinema-slide img { animation-play-state:paused; }
@keyframes cinema-drift { from {transform:scale(1.025) translate3d(.25%,.15%,0)} to {transform:scale(1.085) translate3d(-.5%,-.35%,0)} }
@keyframes cinema-drift-back { from {transform:scale(1.08) translate3d(-.4%,0,0)} to {transform:scale(1.025) translate3d(.3%,.2%,0)} }
.cinema-shade { position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(90deg,#10130f 0%,rgba(16,19,15,.97) 18%,rgba(16,19,15,.76) 34%,rgba(16,19,15,.18) 54%,transparent 70%),linear-gradient(0deg,#10130f 0%,rgba(16,19,15,.22) 24%,transparent 47%,rgba(16,19,15,.15) 100%); }
.cinema-layout { height:100%; position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; padding-top:56px; padding-bottom:120px; pointer-events:none; }
.cinema-copy { max-width:620px; }
.cinema-copy .eyebrow { font-size:.65rem; color:#d5b696; letter-spacing:.19em; margin-bottom:26px; }
.cinema-copy h1 { font-family:var(--serif); font-size:clamp(3.2rem,4.4vw,4.4rem); line-height:1.06; letter-spacing:-.015em; text-wrap:nowrap; margin:0; color:#f2ecdf; text-shadow:0 3px 28px rgba(0,0,0,.12); }
.cinema-copy h1 span { color:var(--gold); }
.cinema-dek { color:#e3dfd4; max-width:365px; font-size:1rem; line-height:1.7; margin-top:28px; }
.cinema-origin { max-width:310px; margin-top:14px; font-size:.76rem; line-height:1.65; color:#c0c2b6; }
.cinema-copy .btn-row { margin-top:30px; gap:22px; pointer-events:auto; }
.cinema-copy .btn { padding:16px 20px; font-size:.66rem; letter-spacing:.08em; gap:24px; }
.cinema-link { display:inline-flex; align-items:center; gap:14px; min-height:44px; font-size:.75rem; color:#e3dfd4; border-bottom:1px solid rgba(238,231,214,.3); }
.cinema-link:hover { border-color:var(--gold); }
.cinema-bottom { position:absolute; bottom:28px; left:var(--gutter); right:var(--gutter); display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.cinema-credit { font-family:var(--mono); font-size:.62rem; line-height:1.8; color:#acb09f; letter-spacing:.02em; }
.cinema-player { width:460px; max-width:100%; pointer-events:auto; }
.cinema-player[hidden] { display:none; }
.cinema-caption { display:flex; align-items:center; gap:16px; font-size:.68rem; letter-spacing:.03em; color:#e3dfd4; margin-bottom:6px; }
[data-cinema-count] { font-family:var(--mono); color:var(--gold); font-size:.63rem; }
.cinema-buttons { display:flex; align-items:center; gap:2px; }
.cinema-select { display:flex; margin-right:auto; }
.cinema-buttons button { min-width:44px; height:44px; padding:0 9px; border:0; background:transparent; color:#b8bcae; font-size:1rem; cursor:pointer; }
.cinema-select button { font-family:var(--mono); font-size:.7rem; }
.cinema-select button[aria-pressed="true"] { color:var(--gold); }
.cinema-select button span { padding-bottom:7px; border-bottom:1px solid transparent; }
.cinema-select button[aria-pressed="true"] span { border-color:var(--gold); }
.cinema-buttons button:hover { color:#fff6e6; background:rgba(255,255,255,.07); }
.cinema-buttons [data-cinema-pause] { font-size:.68rem; min-width:62px; border-left:1px solid rgba(238,231,214,.2); margin-left:5px; }
.cinema-progress { height:1px; background:rgba(238,231,214,.2); margin-top:7px; overflow:hidden; }
.cinema-progress span { display:block; width:100%; height:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; }
.cinema-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(min-width:1700px) { .cinema-stage { left:30%; } }
@media(max-width:1000px) and (min-width:701px) { .cinema { min-height:660px; } .cinema-stage { left:15%; } .cinema-copy h1 { font-size:4rem; } .cinema-shade { background:linear-gradient(90deg,rgba(16,19,15,.97),rgba(16,19,15,.8) 30%,rgba(16,19,15,.1) 78%),linear-gradient(0deg,#10130f,transparent 45%); } }
@media(max-width:700px) {
 .cinema { height:auto; min-height:0; }
 .cinema-stage { inset:0 0 auto 0; height:465px; -webkit-mask-image:none; mask-image:none; }
 .cinema-slide img { object-position:50% 46%; }
 .cinema-shade { height:480px; background:linear-gradient(0deg,#10130f 0%,rgba(16,19,15,.94) 13%,rgba(16,19,15,.28) 29%,transparent 52%),linear-gradient(180deg,rgba(16,19,15,.16),transparent 25%); }
 .cinema-layout { padding-top:360px; padding-bottom:25px; }
 .cinema-copy { max-width:none; }
 .cinema-copy .eyebrow { font-size:.61rem; letter-spacing:.08em; margin-bottom:16px; color:#e6c4a2; }
 .cinema-copy h1 { font-size:clamp(2.15rem,8.8vw,3.9rem); line-height:1.08; }
 .cinema-dek { font-size:.91rem; line-height:1.65; max-width:350px; margin-top:20px; }
 .cinema-origin { font-size:.72rem; max-width:290px; margin-top:10px; }
 .cinema-copy .btn-row { margin-top:22px; gap:10px 20px; }
 .cinema-copy .btn { font-size:.62rem; padding:15px; gap:14px; }
 .cinema-link { font-size:.7rem; }
 .cinema-bottom { position:static; margin-top:30px; display:block; }
 .cinema-credit { display:none; }
 .cinema-player { width:100%; }
 .cinema-caption { font-size:.64rem; }
 .cinema-buttons { justify-content:flex-end; flex-wrap:wrap; }
 .cinema-select { gap:0; flex:1 0 100%; justify-content:space-between; }
 .cinema-select button { min-width:44px; }
}
@media(prefers-reduced-motion:reduce) { .cinema-slide { transition:none; } .cinema-slide img, .cinema-slide.is-running img { animation:none; transform:none; } }