/* Rage for Justice — scrollytelling demo (page-rfj-scrolly.php). Evan 2026-11-04.
   Round 3 (Evan: "it's an EVENT! thumbnails and a modern fancy event look"): the night itself — a dark stage
   and a spotlight — dressed black-tie. The official awards mark is the title; gold carries the details
   (years, rules, the main button); red appears only as the logo's star and the play buttons. Barlow Condensed
   (already in the theme) for the award names, Newsreader italic for honorees and the dedication.
   All motion is driven by --p (0→1 progress through a section) set from rfj-scrolly.js; with no JS or with
   reduced motion every section simply shows its finished state. */

@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-600.woff2) format("woff2");}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700.woff2) format("woff2");}

.rf{--stage:#0B0A0A;--stage-2:#151312;--paper:#F4EFE8;--muted:#A39A8F;--red:#C8242A;--gold:#C9A45C;--gold-2:#E3C88D;
	--poster:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--read:"Newsreader",Georgia,serif;--ui:"Inter Tight","Helvetica Neue",Arial,sans-serif;
	background:var(--stage);color:var(--paper);font-family:var(--ui);overflow-x:clip;}
.rf *{box-sizing:border-box;}
.rf-wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
.rf-kicker{font:600 12.5px/1 var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 18px;}

/* ── 1. stage: the photo pushes in and darkens, the spotlight narrows onto the mark ── */
.rf-stage{height:210vh;position:relative;}
.rf-stage__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;}
.rf-stage__img{position:absolute;inset:0;}
.rf-stage__img img{width:100%;height:100%;object-fit:cover;object-position:30% 30%;transform:scale(calc(1.04 + var(--p,0) * .14));filter:saturate(calc(.85 - var(--p,0) * .6)) brightness(calc(.5 - var(--p,0) * .25));will-change:transform;}
.rf-stage__spot{position:absolute;inset:0;background:radial-gradient(ellipse calc(70% - var(--p,0) * 30%) calc(64% - var(--p,0) * 24%) at 50% 50%,rgba(201,164,92,.10) 0%,rgba(11,10,10,.55) 55%,var(--stage) 100%);}
.rf-stage__copy{position:relative;text-align:center;padding:0 20px;display:flex;flex-direction:column;align-items:center;transform:translateY(calc(var(--p,0) * -5vh));}
.rf-mark{margin:0;width:min(560px,78vw);transform:scale(calc(1 + var(--p,0) * .06));}
.rf-mark img{display:block;width:100%;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(201,164,92,.55),0 0 0 9px rgba(11,10,10,.6),0 0 0 10px rgba(201,164,92,.35),0 40px 90px rgba(0,0,0,.7),0 0 140px rgba(201,164,92,.18);}
.rf-since{display:flex;gap:18px;align-items:center;margin:34px 0 0;font:500 13px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--paper);opacity:.85;}
.rf-since span + span::before{content:"";display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin-right:18px;}
.rf-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font:600 11px/1 var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:0;opacity:calc(1 - var(--p,0) * 4);}
.rf-cue::after{content:"";display:block;width:1px;height:42px;margin:12px auto 0;background:linear-gradient(var(--gold),transparent);animation:rf-drip 1.8s ease-in-out infinite;}
@keyframes rf-drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── 2. the dedication lights up one word at a time ── */
.rf-words{height:190vh;position:relative;}
.rf-words__pin{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:0 32px;}
.rf-words__text{font:italic 400 clamp(30px,4.2vw,60px)/1.2 var(--read);max-width:21ch;margin:0;text-align:center;letter-spacing:-.01em;text-wrap:balance;}
.rf-words__text em{color:var(--gold-2);}
.rf-w{opacity:.14;transition:opacity .25s linear;}
.rf-w.on{opacity:1;}

/* ── 3. numbers ── */
.rf-nums{padding:8vh 0 14vh;}
.rf-nums__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;border-top:1px solid rgba(201,164,92,.35);padding-top:40px;}
.rf-num__v{display:block;font:700 clamp(64px,8vw,124px)/.9 var(--poster);color:var(--paper);font-variant-numeric:tabular-nums;}
.rf-num:nth-child(2) .rf-num__v{color:var(--gold-2);}
.rf-num__k{display:block;margin-top:12px;font:500 14.5px/1.4 var(--ui);color:var(--muted);max-width:18ch;}

/* ── 4. reel: vertical scroll drives the strip sideways ── */
.rf-reel{position:relative;height:var(--reel-h,300vh);}
.rf-reel__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.rf-reel__label{font:italic 400 clamp(96px,16vw,260px)/.8 var(--read);color:transparent;-webkit-text-stroke:1px rgba(201,164,92,.28);position:absolute;left:32px;top:50%;transform:translateY(-50%);margin:0;pointer-events:none;white-space:nowrap;}
.rf-reel__track{position:relative;display:flex;gap:28px;padding:0 32px 0 30vw;transform:translateX(calc(var(--x,0) * -1px));will-change:transform;}
.rf-reel__item{flex:none;margin:0;height:62svh;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.6);outline:1px solid rgba(201,164,92,.25);outline-offset:6px;}
.rf-reel__item:nth-child(even){margin-top:8svh;}
.rf-reel__item img{height:100%;width:auto;display:block;object-fit:cover;}

/* ── 5. awards: the name stays pinned while its honorees glide past ── */
.rf-award{padding:16vh 0 8vh;}
.rf-award__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;}
.rf-award__head{position:sticky;top:18vh;}
.rf-award__count{font:600 12.5px/1 var(--ui);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 16px;}
.rf-award__title{font:700 clamp(34px,3.3vw,58px)/.95 var(--poster);hyphens:manual;overflow-wrap:normal;word-break:normal;text-transform:uppercase;letter-spacing:.01em;margin:0;color:var(--paper);text-wrap:balance;}
.rf-award__rule{display:block;width:84px;height:2px;margin-top:26px;background:linear-gradient(90deg,var(--gold),transparent);}
.rf-hon{list-style:none;margin:0;padding:0;display:grid;gap:20px;}
.rf-hon__item{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:center;padding:16px;background:linear-gradient(135deg,rgba(201,164,92,.07),rgba(255,255,255,.02) 40%);border:1px solid rgba(201,164,92,.18);border-radius:4px;
	opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1),border-color .3s;}
.rf-hon__item:hover{border-color:rgba(201,164,92,.5);}
.rf-hon__item.in{opacity:1;transform:none;}
.rf-hon__item--plain{grid-template-columns:1fr;}
.rf-hon__media{position:relative;display:block;padding:0;border:0;border-radius:2px;overflow:hidden;aspect-ratio:16/10;background:#000;cursor:pointer;}
.rf-hon__media img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88;transition:transform .6s ease,opacity .3s;}
.rf-hon__media:hover img{transform:scale(1.05);opacity:1;}
.rf-hon__play{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(11,10,10,.55);border:1.5px solid var(--gold-2);backdrop-filter:blur(4px);transition:transform .25s,background .25s;}
.rf-hon__play::after{content:"";position:absolute;left:19px;top:15px;border-left:13px solid var(--gold-2);border-top:8px solid transparent;border-bottom:8px solid transparent;}
.rf-hon__media:hover .rf-hon__play,.rf-year__media:hover .rf-hon__play{transform:scale(1.08);background:var(--red);border-color:var(--red);}
.rf-hon__media:hover .rf-hon__play::after,.rf-year__media:hover .rf-hon__play::after{border-left-color:#fff;}
.rf-hon__year{font:600 13px/1 var(--ui);letter-spacing:.24em;color:var(--gold);margin:0 0 8px;}
.rf-hon__name{font:italic 400 clamp(26px,2.4vw,34px)/1.1 var(--read);margin:0 0 14px;color:var(--paper);}
.rf-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.rf-chip{display:inline-block;padding:7px 13px;border-radius:999px;border:1px solid rgba(244,239,232,.2);background:transparent;color:var(--paper);font:500 13px/1.2 var(--ui);text-decoration:none;cursor:pointer;text-transform:none;letter-spacing:0;transition:all .2s;}
.rf-chip:hover{background:var(--gold);color:var(--stage);border-color:var(--gold);}
.rf button:focus-visible,.rf a:focus-visible,.rf [tabindex]:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;}

/* ── 6. years: a sideways shelf ── */
.rf-years{padding:16vh 0 12vh;background:linear-gradient(var(--stage),#000);}
.rf-years__title{color:var(--paper);font:700 clamp(50px,6.4vw,104px)/.9 var(--poster);text-transform:uppercase;margin:0 0 40px;}
.rf-years__row{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 32px 24px max(32px,calc((100vw - 1240px) / 2 + 32px));scrollbar-color:var(--gold) transparent;}
.rf-year{flex:none;width:300px;scroll-snap-align:start;}
.rf-year__media{position:relative;display:block;width:100%;padding:0;border:0;border-radius:2px;overflow:hidden;aspect-ratio:16/10;background:#111;cursor:pointer;outline:1px solid rgba(201,164,92,.25);outline-offset:5px;}
.rf-year__media img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88;}
.rf-year__y{font:italic 400 56px/1 var(--read);margin:18px 0 10px;color:var(--gold-2);}

/* ── 7. curtain ── */
.rf-curtain{padding:16vh 0 18vh;text-align:center;background:radial-gradient(ellipse 60% 70% at 50% 40%,rgba(201,164,92,.16),transparent 70%),#000;}
.rf-curtain__title{color:var(--paper) !important;font:italic 400 clamp(30px,3.6vw,48px)/1.2 var(--read);max-width:22em;margin:0 auto 38px;text-wrap:balance;}
.rf-curtain__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.rf-btn{display:inline-block;padding:17px 30px;border:1px solid rgba(244,239,232,.45);color:var(--paper);font:600 13px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;transition:all .2s;}
.rf-btn:hover{border-color:var(--paper);color:var(--paper);}
.rf-btn--gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));border-color:var(--gold);color:#1a1408;}
.rf-btn--gold:hover{background:var(--gold-2);color:#1a1408;}

/* ── player ── */
.rf-player{width:min(1100px,94vw);padding:0;border:1px solid rgba(201,164,92,.35);background:#000;color:var(--paper);overflow:hidden;}
.rf-player::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(6px);}
.rf-player__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;}
.rf-player__title{margin:0;font:italic 400 18px/1.3 var(--read);}
.rf-player__x{flex:none;min-height:40px;padding:0 16px;border:1px solid rgba(244,239,232,.4);background:transparent;color:var(--paper);font:600 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;}
.rf-player__frame{aspect-ratio:16/9;}
.rf-player__frame iframe{width:100%;height:100%;border:0;display:block;}

html body[class]:has(.rf) .cwd-site-footer{margin-top:0 !important;}

/* ── phones ── */
@media (max-width:860px){
	.rf-wrap{padding:0 18px;}
	.rf-stage{height:160vh;}
	.rf-mark{width:min(420px,86vw);}
	.rf-since{flex-direction:column;gap:10px;font-size:11.5px;}
	.rf-since span + span::before{display:none;}
	.rf-words{height:150vh;}
	.rf-words__pin{padding:0 18px;}
	.rf-nums__grid{grid-template-columns:1fr 1fr;gap:28px 18px;}
	.rf-reel__item{height:46svh;}
	.rf-reel__track{gap:16px;padding-left:18vw;}
	.rf-award{padding:12vh 0 6vh;}
	.rf-award__grid{grid-template-columns:1fr;gap:28px;}
	.rf-award__head{position:static;}
	.rf-hon__item{grid-template-columns:1fr;padding:14px;}
	.rf-years__row{padding:0 18px 20px;}
	.rf-year{width:78vw;}
}

/* reduced motion: no pinning, everything already in place */
@media (prefers-reduced-motion:reduce){
	.rf-stage,.rf-words{height:auto;}
	.rf-stage__pin,.rf-words__pin{position:relative;min-height:90svh;}
	.rf-w{opacity:1;}
	.rf-hon__item{opacity:1;transform:none;transition:none;}
	.rf-reel{height:auto;}
	.rf-reel__pin{position:relative;height:auto;padding:10vh 0;}
	.rf-reel__track{transform:none;overflow-x:auto;padding-left:32px;}
	.rf-cue::after{animation:none;}
}
html:not(.rf-js) .rf-hon__item{opacity:1;transform:none;}
html:not(.rf-js) .rf-w{opacity:1;}
html:not(.rf-js) .rf-reel{height:auto;}
html:not(.rf-js) .rf-reel__pin{position:relative;height:auto;padding:10vh 0;}
html:not(.rf-js) .rf-reel__track{overflow-x:auto;}

/* round 4: the evening's photographs drift right→left behind the dedication (replaces the pinned reel) */
.rf-words__pin{overflow:hidden;}
.rf-drift{position:absolute;inset:0;display:flex;align-items:center;width:max-content;animation:rf-drift 70s linear infinite;}
.rf-drift__strip{display:flex;gap:28px;padding-right:28px;}
.rf-drift__item{flex:none;margin:0;height:58svh;overflow:hidden;outline:1px solid rgba(201,164,92,.25);outline-offset:6px;}
.rf-drift__item:nth-child(even){margin-top:10svh;}
.rf-drift__item img{height:100%;width:auto;display:block;object-fit:cover;filter:saturate(.85) brightness(.72);}
.rf-drift__shade{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(11,10,10,.72),rgba(11,10,10,.25) 75%,rgba(11,10,10,.55));}
.rf-words__text{position:relative;text-shadow:0 2px 24px rgba(0,0,0,.6);}
@keyframes rf-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:860px){ .rf-drift__item{height:40svh;} }
@media (prefers-reduced-motion:reduce){ .rf-drift{animation:none;} }
.rf-hon__name a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(201,164,92,.45);}.rf-hon__name a:hover{color:var(--gold-2);}