/* Runewards — Media page styles. Transcribed from "Media.dc.html". */

.page-main{max-width:1320px;margin:0 auto;padding:clamp(48px,7vw,86px) clamp(20px,5vw,48px) 40px}
.page-kicker{margin:0 0 14px;font:600 11px/1 var(--fbody);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-core)}
.page-main h1{margin:0 0 20px;font:700 clamp(34px,5vw,58px)/1.05 var(--fdisp);letter-spacing:.01em;color:var(--ink);max-width:22ch;text-wrap:balance}
.page-lede{margin:0 0 clamp(30px,5vw,44px);max-width:58ch;font-size:18px;line-height:1.65;color:var(--ink);text-wrap:pretty}
.s-h2{margin:0;font:700 clamp(26px,3.2vw,38px)/1.1 var(--fdisp);letter-spacing:.01em;color:var(--ink)}
.sec{margin-bottom:clamp(46px,6vw,76px)}
.sec-head{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:flex-end;justify-content:space-between;margin-bottom:22px}
.sec-head p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-dim)}

/* ─── Trailer ────────────────────────────────────────────── */
.video-frame{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:#0C0605}
.video-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;display:block}
.video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:.74}
.video-shade{position:absolute;inset:0;background:radial-gradient(62% 62% at 50% 46%,rgba(12,6,5,.1),rgba(12,6,5,.74))}
.video-play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:clamp(66px,9vw,92px);height:clamp(66px,9vw,92px);border-radius:50%;border:2px solid var(--gold);background:rgba(12,6,5,.72);display:flex;align-items:center;justify-content:center}
.video-play svg{width:28%;height:28%;fill:var(--gold);margin-left:9%}
.video-caption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 18px;text-align:left;background:linear-gradient(180deg,rgba(12,6,5,0),rgba(12,6,5,.92))}
.video-caption-title{display:block;font:700 16px/1.2 var(--fdisp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.video-caption-sub{display:block;font:400 13px/1.5 var(--fbody);color:var(--ink-dim)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.audio-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:rgba(36,21,18,.45)}
.audio-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:14px 18px;border:1px solid var(--line);border-radius:6px;background:rgba(20,10,8,.7);color:var(--ink);font:600 12px/1 var(--fbody);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.audio-btn svg{width:12px;height:12px;fill:currentColor}
.audio-note{margin:0;font-size:13px;line-height:1.55;color:#B9A594}
.audio-note.is-err{color:#E0A000}

/* ─── Coverflow ──────────────────────────────────────────── */
.flow-clip{overflow:clip;margin:0 calc(-1 * clamp(16px,4vw,40px));padding:0 clamp(16px,4vw,40px)}
.flow{position:relative;height:clamp(210px,40vw,470px);margin-bottom:6px;perspective:1500px;perspective-origin:50% 45%}
.flow-glow{position:absolute;left:50%;top:50%;width:min(760px,92%);height:78%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(60% 60% at 50% 50%,rgba(240,192,0,.16),rgba(240,192,0,.05) 55%,transparent 72%);filter:blur(12px)}
.flow-shot{position:absolute;left:50%;top:50%;width:clamp(215px,42vw,600px);aspect-ratio:16/9;margin:0;padding:0;border-radius:12px;overflow:hidden;background:#0C0605;transition:transform .66s cubic-bezier(.22,.61,.36,1),opacity .45s,box-shadow .45s,border-color .45s;border:1px solid var(--line)}
.flow-shot img{width:100%;height:100%;object-fit:cover;transition:filter .45s}
.flow-sheen{position:absolute;inset:0;pointer-events:none;transition:opacity .45s;background:linear-gradient(200deg,rgba(255,255,255,.14) 0%,transparent 34%),linear-gradient(0deg,rgba(8,4,3,.6),transparent 42%)}
.flow-ring{position:absolute;inset:0;pointer-events:none;border-radius:12px;transition:opacity .45s;box-shadow:inset 0 0 0 1px rgba(240,192,0,.55),inset 0 0 34px rgba(240,192,0,.14)}
.flow-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:40;width:46px;height:46px;border-radius:50%;cursor:pointer;background:rgba(8,4,3,.72);border:1px solid var(--line);color:var(--ink);backdrop-filter:blur(6px);transition:border-color .2s,color .2s}
.flow-arrow:hover{border-color:var(--gold);color:var(--gold)}
.flow-arrow--prev{left:0}
.flow-arrow--next{right:0}
.flow-arrow svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.flow-foot{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-start;justify-content:space-between;max-width:1000px}
.flow-caption{margin:0;max-width:60ch;font:400 14.5px/1.6 var(--fbody);color:var(--ink);text-wrap:pretty;transition:opacity .3s;opacity:1}
.flow-meta{display:flex;align-items:center;gap:14px;flex:none}
.flow-count{font:500 11.5px/1 var(--fmono);color:var(--gold)}
.flow-dots{display:flex;gap:6px}
.flow-dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.flow-dot span{width:100%;height:3px;border-radius:2px;transition:background .25s;background:rgba(185,165,148,.35)}
.flow-dot.is-active span{background:var(--gold)}

/* ─── Capture grids ──────────────────────────────────────── */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.cap-grid--wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cap-fig{margin:0;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.cap-fig:hover{transform:translateY(-4px)}
.cap-frame{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:#0C0605;transition:border-color .3s}
.cap-frame:hover{border-color:rgba(240,192,0,.5)}
.cap-frame img{width:100%;height:100%;object-fit:cover}
.cap-fig figcaption{padding:12px 2px 0}
.cap-title{display:block;font:700 13px/1.2 var(--fdisp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:3px}
.cap-note{display:block;font:400 13px/1.55 var(--fbody);color:var(--ink-dim)}
.cap-fig figcaption.plain{font:400 13px/1.55 var(--fbody);color:var(--ink-dim)}

/* ─── Capture spec ───────────────────────────────────────── */
.spec-box{margin-bottom:clamp(40px,6vw,70px);border:1px solid var(--line);border-radius:10px;padding:clamp(22px,4vw,34px);background:var(--ground2)}
.spec-box h2{margin:0 0 12px;font:700 20px/1.2 var(--fdisp);letter-spacing:.11em;text-transform:uppercase;color:var(--gold)}
.spec-box ul{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:9px;color:var(--ink-dim);font-size:14.5px;line-height:1.6}

/* ─── Simple footer (1320 variant) ───────────────────────── */
.footer-simple{border-top:1px solid var(--line);background:var(--ground2)}
.fs-top{max-width:1320px;margin:0 auto;padding:clamp(36px,5vw,60px) clamp(20px,5vw,48px);display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:flex-start}
.fs-brand{display:flex;gap:14px;align-items:flex-start;max-width:34ch}
.fs-brand img{width:44px;height:44px;flex:none}
.fs-brand p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-dim)}
.fs-nav{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline}
.fs-nav a{font-size:13.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(240,192,0,.35)}
.fs-bottom{max-width:1320px;margin:0 auto;padding:0 clamp(20px,5vw,48px) clamp(28px,4vw,44px)}
.fs-bottom p{margin:0;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-dim)}