/* ============================================================
   THE FULL RANGE — hero-driven, color-coded category system
   Play-branch mock for liv-golf.html. Namespaced .fr-* so it
   never collides with proto/site.css (.card/.play/.score).
   Tiles keep data-vid / data-formats, so the existing video
   lightbox (proto/site.js) opens them — no new JS needed.
   ============================================================ */
@font-face{font-family:'Anton';src:url(../assets/fonts/anton-latin.woff2) format('woff2');font-weight:400;font-display:swap}

.fr{--pad:clamp(16px,4vw,40px)}
.fr-anton{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:-.005em;text-transform:uppercase}
.fr-sec{padding:clamp(9px,1.5vw,18px) 0}
.fr-wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}

/* ---- section header ---- */
.fr-intro{padding:clamp(38px,7vw,86px) 0 clamp(6px,2vw,18px)}
.fr-intro__h{font-size:clamp(52px,10.5vw,132px);line-height:.84;letter-spacing:-.005em;color:#0a1710;margin:0;position:relative;display:inline-block;max-width:100%}
.fr-intro__h span{-webkit-text-fill-color:transparent;-webkit-text-stroke:1.25px #0B6B34;padding-left:.03em}
.fr-intro__tuft{position:absolute;left:100%;bottom:-.28em;height:1.4em;width:auto;margin-left:.12em;-webkit-text-stroke:0;transform-origin:bottom center;animation:fr-tuft-sway 4.6s ease-in-out infinite;filter:drop-shadow(0 8px 7px rgba(30,26,22,.18))}
@keyframes fr-tuft-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.fr-intro__tuft{animation:none}}
@media(max-width:820px){.fr-intro__tuft{display:none}}
.fr-intro__meta{display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;margin-top:clamp(15px,2.2vw,24px)}
.fr-intro__k{font:800 clamp(14px,1.7vw,18px)/1 ui-sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#0B6B34;white-space:nowrap}
.fr-intro__sep{color:rgba(10,23,16,.24);font-size:clamp(19px,2.3vw,26px);line-height:1}
.fr-intro__d{font-size:clamp(19px,2.3vw,27px);color:#4a564f;line-height:1.3;margin:0}
.fr-card{position:relative;overflow:hidden;border-radius:14px;display:block;text-decoration:none;color:#fff;cursor:pointer;transform:translateZ(0);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.fr-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block}
.fr-card:hover{transform:translateY(-5px)}
.fr-card:hover img{transform:scale(1.06)}
.fr-card:hover .fr-play{background:var(--acc,#00A94F);border-color:var(--acc,#00A94F)}
.fr-card__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,10,8,0) 44%,rgba(6,10,8,.85))}
/* hover-preview iframe (injected by proto/site.js) — under the scrim, clipped by the card radius */
.fr-card .card__preview,.fr-score__card .card__preview{z-index:0;clip-path:none}
video.card__preview{object-fit:cover;background:#0a1710}
.fr-card__cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
.fr-card__t{font-family:ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:clamp(15px,1.5vw,18px);letter-spacing:-.015em;line-height:1.1}
.fr-card__n{font:700 12px/1 ui-sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--acc,#8fe0aa);margin-top:6px}
/* light-bg blocks (e.g. gold Merch): card captions sit on the dark image scrim, so
   they need a LIGHT sub-label, not the block's dark header accent */
.fr-mq--light .fr-card__n{color:#ffe1a1}
.fr-play{position:absolute;left:14px;bottom:14px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);border:1.5px solid rgba(255,255,255,.5);display:grid;place-items:center;z-index:3;transition:.2s}
.fr-play::after{content:"";margin-left:3px;border-style:solid;border-width:6px 0 6px 11px;border-color:transparent transparent transparent #fff}
/* keep play + caption from colliding: caption sits above the play button */
.fr-card__cap{padding-left:44px}
.fr-mq__hero .fr-card__cap,.fr-score__card .fr-score__ov{padding-left:0}
.fr-mq__hero .fr-card__cap{left:66px}

/* ---- stub tile (no video yet) ---- */
.fr-stub{position:relative;border-radius:14px;border:1px dashed rgba(255,255,255,.28);display:grid;place-content:center;text-align:center;gap:6px;color:rgba(255,255,255,.7);min-height:112px}
.fr-stub b{font:800 11px/1 ui-sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.fr-stub span{font-size:12px;opacity:.7}
.fr-stub em{font-weight:800;font-style:normal;font-size:15px;color:#fff}

/* =================== MARQUEE (color-coded) =================== */
.fr-mq{border-radius:24px;overflow:hidden;position:relative;background:var(--bg);color:var(--ink);box-shadow:0 24px 60px rgba(10,20,14,.16)}
.fr-mq__type{padding:clamp(24px,3vw,34px) clamp(24px,3vw,34px) 0}
.fr-mq__title{font-size:clamp(52px,8.4vw,104px);line-height:.82;margin:0;color:var(--ink)}
.fr-mq__title span{-webkit-text-fill-color:transparent;-webkit-text-stroke:1.25px var(--stroke);padding-left:.04em}
.fr-mq__tag{font-weight:800;font-size:clamp(15px,1.7vw,19px);margin:12px 0 22px;text-transform:uppercase;letter-spacing:.03em;color:var(--tag)}
.fr-mq__grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;padding:0 clamp(24px,3vw,34px) clamp(24px,3vw,34px)}
.fr-mq__hero{aspect-ratio:16/9;border-radius:16px}
.fr-mq__hero .fr-card__t{font-size:clamp(20px,2.2vw,26px)}
.fr-mq__side{position:relative;min-height:100%}
.fr-mq__scroll{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.fr-mq__side .fr-card,.fr-mq__side .fr-stub{flex:0 0 auto;width:100%;aspect-ratio:16/9;border-radius:14px}
.fr-mq__more{position:absolute;left:0;right:4px;bottom:0;height:52px;pointer-events:none;z-index:4;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;background:linear-gradient(180deg,transparent,var(--bg))}
.fr-mq__more span{display:inline-flex;align-items:center;gap:6px;background:var(--acc);color:var(--bg);font:900 12.5px/1 ui-sans-serif;letter-spacing:.09em;text-transform:uppercase;padding:7px 13px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.fr-mq__more span::after{content:"↓";font-size:13px;font-weight:900;line-height:1;transform:translateY(.5px)}
/* compact variant — headline size + tag unified to the XL treatment; .fr-mq--sm
   now only affects tile scale, not the type */
/* hero-right orientation — flip BOTH the source order and the column widths so
   the big hero always lands in the wide column */
.fr-mq--right .fr-mq__grid{grid-template-columns:1fr 2fr}
.fr-mq--right .fr-mq__hero{order:2}.fr-mq--right .fr-mq__side{order:1}

/* ---- broadcast-partners logo ticker (Broadcast Tune-In) ---- */
.fr-bcast{padding:0 clamp(24px,3vw,34px);margin:0 0 clamp(16px,2vw,22px)}
.fr-bcast__bar{position:relative;overflow:hidden;background:rgba(2,22,27,.34);border-radius:12px;padding:clamp(10px,1.2vw,14px) 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.fr-bcast__track{display:flex;width:max-content;animation:fr-bcast-scroll 46s linear infinite;will-change:transform}
.fr-bcast__bar:hover .fr-bcast__track{animation-play-state:paused}
.fr-bcast__set{display:flex;align-items:center;gap:clamp(26px,3.2vw,48px);padding-right:clamp(26px,3.2vw,48px);flex:0 0 auto}
.fr-bcast__logo{height:clamp(28px,3.1vw,42px);width:auto;object-fit:contain;display:block;flex:0 0 auto}
@keyframes fr-bcast-scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.fr-bcast__track{animation:none;flex-wrap:wrap;justify-content:center;gap:18px 26px;padding:0 20px}.fr-bcast__set:last-child{display:none}}

/* =================== SCOREBOARD =================== */
.fr-score{background:linear-gradient(180deg,#06231a,#081210);border-radius:24px;padding:clamp(24px,3vw,34px) clamp(24px,3vw,34px) clamp(24px,3vw,34px);overflow:hidden;box-shadow:0 24px 60px rgba(10,20,14,.16)}
.fr-score__title{font-size:clamp(52px,8.4vw,104px);line-height:.82;color:#F4F1EA;margin:0}
.fr-score__title span{-webkit-text-fill-color:transparent;-webkit-text-stroke:1.25px #00e07a;padding-left:.04em}
.fr-score__ticker{margin:12px 0 22px;display:flex;flex-wrap:wrap;gap:12px 26px;font:800 12px/1.3 ui-sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#00e07a}
.fr-score__tag{font-weight:800;font-size:clamp(15px,1.7vw,19px);margin:12px 0 22px;text-transform:uppercase;letter-spacing:.03em;color:#8fe0aa}
.fr-score__ticker b{color:#fff}
.fr-score__row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fr-score__card{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;cursor:pointer;text-decoration:none;display:block}
.fr-score__card img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05);transition:.5s}
/* on rollover, dim the key art and KEEP it dim while the preview clip plays; the video itself stays full-brightness */
.fr-score__card:hover img,.fr-score__card.is-previewing img{filter:saturate(1.02) brightness(.38);transform:scale(1.05)}
/* tiles whose key art carries its own baked-in text: keep it bright on rollover */
.fr-score__card--nodim:hover img,.fr-score__card--nodim.is-previewing img{filter:saturate(1.02) brightness(1)}
/* scrim only at the bottom, behind the stat — key art stays bright above it */
.fr-score__card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,18,11,0) 54%,rgba(0,17,10,.5) 76%,rgba(0,15,9,.9))}
/* nodim tiles carry no overlay text, so drop the bottom scrim too */
.fr-score__card--nodim::after{display:none}
/* wide tile: spans 2 columns for a landscape (16:9) key art; stretches to match the portrait tiles' height */
.fr-score__card--wide{grid-column:span 2;aspect-ratio:auto}
.fr-score__ov{position:absolute;left:15px;right:12px;bottom:13px;z-index:2}
.fr-score__num{font-family:'Anton',Impact,sans-serif;font-size:clamp(36px,4.4vw,52px);line-height:.82;color:#fff;text-transform:uppercase}
.fr-score__num small{font-size:.42em;color:#00e07a;-webkit-text-fill-color:#00e07a}
.fr-score__mk{font:800 12px/1.2 ui-sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9fe9bf;margin-top:6px}
.fr-score__bar{position:absolute;left:0;top:0;bottom:0;width:5px;background:#00A94F;z-index:2}
.fr-score__hint{position:absolute;top:11px;right:11px;z-index:3;font:800 11px/1 ui-sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#062a18;background:#00e07a;padding:5px 7px;border-radius:5px}
.fr-score__card--static{cursor:default}

/* =================== RESPONSIVE =================== */
@media(max-width:820px){
  /* mobile: full-width 16:9 tiles stacked vertically inside the colored block
     (hero folded in via display:contents, all equal size); shows ~3, and if a
     category has more than 3 the stack scrolls top-to-bottom within the block */
  .fr-mq__grid,.fr-mq--right .fr-mq__grid{display:flex;flex-direction:column;grid-template-columns:none;gap:10px;max-height:calc((100vw - 80px) * 1.6875 + 20px);overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:y proximity;-webkit-mask-image:linear-gradient(180deg,#000 90%,transparent);mask-image:linear-gradient(180deg,#000 90%,transparent)}
  .fr-mq__side,.fr-mq__scroll{display:contents}
  .fr-mq__hero,.fr-mq__side .fr-card,.fr-mq__side .fr-stub{flex:0 0 auto;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;scroll-snap-align:start}
  .fr-mq__hero .fr-card__t{font-size:clamp(16px,4vw,20px)}
  .fr-mq__hero .fr-card__cap{left:16px;padding-left:44px}
  .fr-mq__more{display:none}
  .fr-score__row{grid-template-columns:repeat(2,1fr)}
  /* wide tile is alone in its row on mobile, so give it a definite landscape height */
  .fr-score__card--wide{aspect-ratio:16/9}
  /* headlines wrap to two lines on narrow screens — loosen the tight leading so
     the wrapped words don't overlap */
  .fr-mq__title,.fr-score__title{line-height:.93}
}
@media(max-width:460px){
  .fr-score__row{grid-template-columns:1fr 1fr}
  .fr-card__cap{padding-left:44px}
}

/* =================== "What I built" — BUILT. LED. SCALED. =================== */
.built__head{position:relative;max-width:1200px;margin:0 auto clamp(24px,3vw,34px);padding:0 var(--pad)}
.built__k{font:800 clamp(14px,1.6vw,19px)/1.2 ui-sans-serif,system-ui,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#0a7a3a;margin:0 0 16px}
.built__h{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:clamp(52px,10vw,132px);line-height:.82;letter-spacing:-.005em;word-spacing:-.12em;text-transform:uppercase;color:#0B6B34;margin:0}
.built__h .blue{color:#0B6B34;-webkit-text-fill-color:#0B6B34}
.built__h .out{-webkit-text-fill-color:transparent;-webkit-text-stroke:1.25px #0B6B34}
.built__sub{font-family:ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:clamp(17px,2vw,22px);letter-spacing:-.01em;color:#0a1710;margin-top:14px}
/* standfirst that replaced the BUILT.LED.SCALED. manifesto — one confident line */
.built__lead{font-family:ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:clamp(24px,3.4vw,42px);line-height:1.16;letter-spacing:-.02em;color:#0a1710;max-width:22ch;margin:0}
.built__liv{display:inline-block;height:.78em;aspect-ratio:440/77;background:#1257c9;-webkit-mask:url(../assets/liv-primary-white.webp) left center/contain no-repeat;mask:url(../assets/liv-primary-white.webp) left center/contain no-repeat;vertical-align:baseline;position:relative;top:.06em;margin:0 .1em}
.built__d{font-family:ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;max-width:640px;color:#4a564f;font-size:clamp(16px,1.8vw,18px);line-height:1.55;margin-top:16px}
.built__motif{position:absolute;top:20px;right:clamp(0px,4vw,60px);height:clamp(150px,17vw,232px);width:auto;transform-origin:bottom center;animation:built-sway 5s ease-in-out infinite;filter:drop-shadow(0 10px 12px rgba(20,26,20,.2))}
@keyframes built-sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@media(prefers-reduced-motion:reduce){.built__motif{animation:none}}
.built__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.bcard{position:relative;background:#fff;border:1px solid rgba(10,20,14,.1);border-radius:16px;padding:24px 22px 26px;overflow:hidden;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s}
.bcard:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(10,20,14,.12)}
.bcard:hover .bico{background:#0B6B34}
.bcard:hover .bico svg{stroke:#fff}
.bnum{position:absolute;top:12px;right:16px;font-family:'Anton',Impact,sans-serif;font-size:46px;color:rgba(18,87,201,.14);line-height:1}
.bico{width:48px;height:48px;border-radius:13px;background:#e9f6ee;display:grid;place-items:center;margin-bottom:18px;transition:background .22s}
.bico svg{width:25px;height:25px;fill:none;stroke:#0a7a3a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .22s}
.bt{font-family:ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:17px;line-height:1.15;letter-spacing:-.01em;color:#0a1710;margin-bottom:9px;position:relative}
.bd{font-family:ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;color:#4a564f;font-size:13.5px;line-height:1.5;position:relative}
@media(max-width:900px){.built__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.built__motif{display:none}.built__h{line-height:.95}}

/* ---- "What I built" overview: collapse on mobile ---- */
.beat__readmore{display:none}
@media(max-width:820px){
  .beat__d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .beat__d.is-open{-webkit-line-clamp:unset;display:block;overflow:visible}
  .beat__readmore{display:flex;width:fit-content;align-items:center;gap:9px;margin-top:16px;cursor:pointer;background:none;border:0;padding:0;font:800 14.5px/1 ui-sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#0B6B34;-webkit-tap-highlight-color:transparent}
  .beat__readmore::after{content:"+";font-size:20px;line-height:1}
  .beat__readmore[aria-expanded="true"]::after{content:"\2212"}
}
/* ---- pillars ("the approach"): collapse behind one toggle on mobile ---- */
.pillars__toggle{display:none}
@media(max-width:820px){
  .pillars,.built__grid{display:none}
  .pillars.is-open{display:grid}
  .built__grid.is-open{display:grid;grid-template-columns:1fr}
  .pillars__toggle{display:flex;width:fit-content;align-items:center;gap:9px;margin-top:16px;cursor:pointer;background:none;border:0;padding:0;font:800 14.5px/1 ui-sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#0B6B34;-webkit-tap-highlight-color:transparent}
  .pillars__toggle::after{content:"+";font-size:20px;line-height:1}
  .pillars__toggle[aria-expanded="true"]::after{content:"\2212"}
}