/*
Theme Name: Time Out Sports
Theme URI: https://timeoutgy.com
Author: Ernest Solutions — Calvin Chapman
Author URI: https://timeoutgy.com
Description: Custom sports-news theme for Time Out Sports (timeoutgy.com), Guyana's sports hub. Red/gold/black brand system, stopwatch slider, In Pictures carousel, click-to-play Time Out TV, and a first-class hand-sold ad system. Built from the approved design pack — no page builder required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: timeout
Tags: news, sports, custom-logo, custom-menu, featured-images, right-sidebar, block-styles

Fonts: Barlow (SIL Open Font License 1.1) — self-hosted in assets/fonts/.
Design source: timeout-sports-design-pack / BUILD-BRIEF.md. Do not redesign; see README.md.
*/

/* =========================================================================
   1. APPROVED DESIGN CSS — lifted verbatim from the design pack
   (timeout-article-template.html, which carries the superset of all styles).
   Only change: font URLs repointed to assets/fonts/, and the regular-italic
   face now points at barlow-italic.woff2 (the pack referenced a filename
   that does not exist — see README "Fixed during build").
   ========================================================================= */
  /* ===== Barlow (SIL Open Font License — free for commercial/web use) ===== */
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-thin.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-thinitalic.woff2") format("woff2");font-weight:100;font-style:italic;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-extralight.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-extralightitalic.woff2") format("woff2");font-weight:200;font-style:italic;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-lightitalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-mediumitalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-semibolditalic.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-bolditalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-extrabold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-extrabolditalic.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
  @font-face{font-family:"Barlow";src:url("assets/fonts/barlow-blackitalic.woff2") format("woff2");font-weight:900;font-style:italic;font-display:swap}
:root{
    --red:#E01A16;--red-deep:#A50F0C;
    --gold:#FFC400;--gold-deep:#D89B00;
    --black:#111111;--chrome:#0D0D0D;
    --paper:#F6F5F2;--card:#FFFFFF;--ink:#161616;
    --muted:#6B6B66;--line:#E6E3DC;--ad-bg:#EDEAE2;--ad-line:#D2CDBF;
    --body-font:"Barlow",Arial,Helvetica,sans-serif;
    --display-font:"Barlow",Arial,Helvetica,sans-serif;
    --data-font:"Barlow",Arial,Helvetica,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body-font);font-size:16px;line-height:1.5;padding-bottom:96px}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:1240px;margin:0 auto;padding:0 20px}
  .m-only{display:none!important}

  /* ---------- Ad system ---------- */
  .ad{position:relative;background:var(--ad-bg);border:1px solid var(--ad-line);border-radius:6px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background-image:repeating-linear-gradient(135deg,transparent 0 22px,rgba(0,0,0,.018) 22px 44px)}
  .ad::before{content:"ADVERTISEMENT";position:absolute;top:6px;left:8px;font-size:9px;letter-spacing:.16em;color:#9a9484;font-weight:600}
  .ad .dim{position:absolute;bottom:6px;right:8px;font-family:var(--data-font);font-size:10px;color:#a49f8d}
  .ad .house{padding:14px 18px}
  .ad .house .k{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:clamp(20px,3vw,30px);line-height:.98;color:var(--black)}
  .ad .house .k em{font-style:normal;color:var(--red)}
  .ad .house .s{font-size:12.5px;color:var(--muted);margin-top:8px}
  .ad .house .btn{display:inline-block;margin-top:12px;background:var(--red);color:#fff;font-weight:600;font-size:12px;padding:8px 16px;border-radius:100px}
  .creative{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;padding:16px;background-image:none}
  .creative .brand{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:clamp(18px,2.6vw,26px);line-height:1}
  .creative .tag{font-size:12.5px;opacity:.92;max-width:26ch}
  .creative .cta{margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid rgba(255,255,255,.7);padding:6px 14px;border-radius:100px}
  .cr-regency{background:linear-gradient(135deg,#3a2b1a,#7a5a2e)}
  .cr-rays{background:linear-gradient(135deg,#8a1414,#d1332b)}
  .cr-hrs{background:linear-gradient(135deg,#0d2c52,#1f5aa8)}
  .cr-fitness{background:linear-gradient(135deg,#12463a,#1f8f5e)}
  .ad-lb{min-height:100px}.ad-bill{min-height:150px}.ad-mpu{min-height:250px}.ad-half{min-height:600px}
  .mid-ad{margin:34px 0}

  /* ---------- Chrome ---------- */
  .topbar{background:var(--chrome);color:#CFCFCA;font-size:12px}
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;gap:16px}
  .topbar .date{font-family:var(--data-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .socials{display:flex;gap:14px}.topbar a:hover{color:var(--gold)}
  .top-ad{background:#080808;padding:10px 0}
  .dot{width:9px;height:9px;border-radius:50%;background:#fff}

  .mast{background:var(--card);border-bottom:1px solid var(--line)}
  .mast .wrap{display:flex;align-items:center;gap:20px;padding:14px 20px}
  .logo img{height:52px;width:auto}
  .mast .grow{flex:1}
  .search{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:9px 16px;min-width:200px;color:var(--muted);font-size:14px}
  .search input{border:0;background:transparent;outline:none;font:inherit;color:var(--ink);width:100%}
  .subscribe{background:var(--red);color:#fff;font-weight:700;font-size:13px;padding:11px 18px;border-radius:100px;white-space:nowrap}
  .subscribe:hover{background:var(--black)}

  nav.cats{background:var(--black);position:sticky;top:0;z-index:40}
  nav.cats .wrap{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;padding:0 20px}
  nav.cats .wrap::-webkit-scrollbar{display:none}
  nav.cats a{color:#D9D9D4;font-family:var(--display-font);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:15px;padding:13px 15px;white-space:nowrap;border-bottom:3px solid transparent}
  nav.cats a:hover{color:#fff;background:rgba(255,255,255,.07)}
  nav.cats a.on{color:var(--gold);border-bottom-color:var(--gold)}

  .cat-chip{display:inline-block;font-family:var(--display-font);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:11px;color:#fff;background:var(--red);padding:3px 9px;border-radius:3px}
  .cat-chip.gold{background:var(--gold);color:#3a2a00}

  /* ============ STOPWATCH SLIDER (bigger, 5 stories) ============ */
  .swatch{position:relative;background:var(--black);color:#fff;overflow:hidden}
  .swatch .stage{position:relative;min-height:640px}
  .slide{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr .95fr;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
  .slide.on{opacity:1;visibility:visible;z-index:2}
  .slide .txt{padding:56px 28px 150px 20px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:3;max-width:660px;margin-left:auto;width:100%}
  @media(min-width:1281px){.slide .txt{margin-left:calc((100vw - 1240px)/2)}}
  .slide .kick{display:flex;align-items:center;gap:10px}
  .slide .kick .cat-chip{font-size:12px;padding:4px 11px}
  .slide .kick .tm{font-family:var(--data-font);font-size:12px;color:#BDBDB6}
  .slide h2{font-family:var(--display-font);font-weight:900;text-transform:uppercase;line-height:.94;letter-spacing:-.015em;font-size:clamp(44px,6vw,86px);margin:18px 0 14px;transform:translateY(24px);opacity:0;transition:transform .7s .15s cubic-bezier(.2,.8,.2,1),opacity .7s .15s}
  .slide.on h2{transform:none;opacity:1}
  .slide h2 .g{color:var(--gold)}
  .slide p{margin:0;color:#D6D6D0;font-size:16.5px;max-width:52ch;transform:translateY(18px);opacity:0;transition:transform .7s .28s cubic-bezier(.2,.8,.2,1),opacity .7s .28s}
  .slide.on p{transform:none;opacity:1}
  .slide .read{margin-top:22px;align-self:flex-start;font-family:var(--display-font);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--black);background:var(--gold);padding:12px 24px;border-radius:100px;transform:translateY(14px);opacity:0;transition:transform .7s .4s cubic-bezier(.2,.8,.2,1),opacity .7s .4s}
  .slide.on .read{transform:none;opacity:1}
  .slide .read:hover{background:#fff}
  .slide .img{position:relative}
  .slide .img .fill{position:absolute;inset:0;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}
  .s1 .fill{background:linear-gradient(200deg,rgba(224,26,22,.25),rgba(0,0,0,.72)),linear-gradient(120deg,#4d1210,#20100f 70%)}
  .s2 .fill{background:linear-gradient(200deg,rgba(255,196,0,.22),rgba(0,0,0,.74)),linear-gradient(120deg,#4d3a08,#1f1a08 70%)}
  .s3 .fill{background:linear-gradient(200deg,rgba(224,26,22,.18),rgba(0,0,0,.76)),linear-gradient(120deg,#10304d,#0d1520 70%)}
  .s4 .fill{background:linear-gradient(200deg,rgba(255,196,0,.18),rgba(0,0,0,.74)),linear-gradient(120deg,#0f4d2f,#0d2016 70%)}
  .s5 .fill{background:linear-gradient(200deg,rgba(224,26,22,.2),rgba(0,0,0,.75)),linear-gradient(120deg,#4d2b0f,#20130d 70%)}
  .slide .img .tex{position:absolute;inset:0;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);opacity:.5;background:radial-gradient(circle at 70% 32%,rgba(255,196,0,.32),transparent 46%),repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 3px,transparent 3px 26px)}
  .slide .cam{position:absolute;bottom:134px;right:16px;background:rgba(0,0,0,.5);font-size:11px;padding:4px 9px;border-radius:4px;font-family:var(--data-font);z-index:3}
  .slide .num{position:absolute;right:2%;top:-6%;font-family:var(--display-font);font-weight:900;font-size:clamp(220px,32vw,460px);line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.14);z-index:2;user-select:none;pointer-events:none}
  .deck{position:absolute;left:0;right:0;bottom:0;z-index:5;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);padding:14px 0}
  .deck .wrap{display:flex;align-items:center;gap:18px}
  .ring{position:relative;width:56px;height:56px;flex:0 0 auto;cursor:pointer;background:none;border:0;padding:0}
  .ring svg{transform:rotate(-90deg);display:block}
  .ring .base{stroke:rgba(255,255,255,.22);fill:none;stroke-width:4}
  .ring .prog{stroke:var(--gold);fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:151;stroke-dashoffset:151}
  .ring.play .prog{animation:tick 6s linear forwards}
  @keyframes tick{to{stroke-dashoffset:0}}
  .ring .pp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}
  .tabs{display:flex;gap:10px;flex:1;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:9px;padding:9px 14px;min-width:170px;text-align:left;cursor:pointer;color:#EDEDEA;font-family:var(--body-font)}
  .tab .tt{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:14px;line-height:1.02}
  .tab .tc{font-family:var(--data-font);font-size:10px;color:#BDBDB6;margin-top:4px}
  .tab.on{background:var(--red);border-color:var(--red)}
  .tab.on .tc{color:#ffd9d8}
  .arrows{display:flex;gap:8px}
  .arrows button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.3);color:#fff;font-size:16px;cursor:pointer}
  .arrows button:hover{background:var(--gold);color:var(--black);border-color:var(--gold)}

  /* ---------- Grid ---------- */
  .grid{display:grid;grid-template-columns:1fr 300px;gap:34px;padding-top:30px}
  .rail{display:flex;flex-direction:column;gap:26px}
  .rail .sticky{position:sticky;top:64px;display:flex;flex-direction:column;gap:26px}

  .sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 16px;border-bottom:3px solid var(--black);padding-bottom:8px}
  .sec-head h2{font-family:var(--display-font);font-weight:900;text-transform:uppercase;font-size:24px;margin:0}
  .sec-head h2::before{content:"";display:inline-block;width:10px;height:10px;background:var(--red);margin-right:10px;transform:skewX(-12deg)}
  .sec-head a{font-size:12px;font-weight:600;color:var(--red)}

  .feed{display:flex;flex-direction:column}
  .row{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
  .row .rthumb{aspect-ratio:3/2;border-radius:8px;position:relative;background:linear-gradient(135deg,#4d1210,#241110)}
  .row .rthumb.f{background:linear-gradient(135deg,#123a7a,#0e2a55)}
  .row .rthumb.g{background:linear-gradient(135deg,#4d3a08,#241d08)}
  .row h3{font-family:var(--display-font);font-weight:800;text-transform:uppercase;line-height:1.02;font-size:20px;margin:8px 0 0}
  .row .date{font-family:var(--data-font);font-size:11px;color:var(--muted);margin-top:8px}
  .row a:hover h3{color:var(--red)}

  .native{grid-template-columns:150px 1fr;background:#FBF8EF;border:1px dashed var(--ad-line);border-radius:8px;padding:14px;margin:8px 0;position:relative}
  .native::after{content:"SPONSORED";position:absolute;top:8px;right:12px;font-size:9px;letter-spacing:.16em;color:#a99a63;font-weight:700}
  .native .rthumb{background:linear-gradient(135deg,#3a2b1a,#7a5a2e)}


  /* ---------- Widgets / rail ---------- */
  .widget{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .widget .wh{background:var(--black);color:#fff;font-family:var(--display-font);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:16px;padding:11px 16px;display:flex;align-items:center;gap:9px}
  .widget .wh .dot{background:var(--gold)}
  .widget ol{margin:0;padding:6px 0;list-style:none;counter-reset:t}
  .widget li{counter-increment:t;display:flex;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line)}
  .widget li:last-child{border-bottom:0}
  .widget li::before{content:counter(t);font-family:var(--display-font);font-weight:900;font-size:22px;color:var(--red);line-height:1;min-width:20px}
  .widget li a{font-family:var(--display-font);font-weight:700;text-transform:uppercase;font-size:15px;line-height:1.05}
  .widget li a:hover{color:var(--red)}

  footer{background:var(--black);color:#CFCFCA;margin-top:44px;padding:40px 0 26px}
  footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
  footer h4{font-family:var(--display-font);font-weight:800;text-transform:uppercase;color:#fff;font-size:15px;margin:0 0 12px}
  footer a{display:block;padding:4px 0;color:#B9B9B3;font-size:14px}
  footer a:hover{color:var(--gold)}
  footer .flogo img{height:40px;width:auto}
  footer .fp{font-size:13px;max-width:40ch;margin:12px 0 0;color:#A5A59F}
  footer .fbot{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:16px;font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:#8F8F89}
  footer .fbot a{display:inline;color:var(--gold)}

  .anchor{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(13,13,13,.97);border-top:2px solid var(--gold);backdrop-filter:blur(4px)}
  .anchor .wrap{display:flex;align-items:center;justify-content:center;position:relative;padding:8px 20px}
  .anchor .ad{width:100%;max-width:728px;min-height:76px;background:#fff}
  .anchor .close{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:var(--black);color:#fff;border:1px solid var(--gold);width:26px;height:26px;border-radius:50%;font-size:14px;cursor:pointer;line-height:1}
  .anchor .close:hover{background:var(--gold);color:var(--black)}

  a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}

  /* ================= RESPONSIVE — DISTINCT MOBILE LAYOUT ================= */
  @media(max-width:960px){
    .grid{grid-template-columns:1fr}
    .rail .sticky{position:static}
    .ad-half{min-height:280px}
    .tvmain{min-height:300px}
  }
  @media(max-width:640px){
    body{padding-bottom:70px}
    .m-only{display:flex!important}
    .d-only{display:none!important}
    /* mobile slider: portrait card, no split image, dots stay as tabs strip */
    .slide{grid-template-columns:1fr}
    .slide .img{display:none}
    .slide .num{right:-4%;top:auto;bottom:8%;-webkit-text-stroke-color:rgba(255,255,255,.1);font-size:200px}
    .slide .txt{padding:44px 20px 150px;margin:0}
    .slide h2{font-size:clamp(36px,11vw,52px)}
    .swatch .stage{min-height:520px}
    .tab{min-width:140px}
    /* mobile ads: leaderboards collapse to 320x50-ish, houses shrink */
    .ad-lb{min-height:60px}
    .ad-lb .house .k{font-size:16px}
    .ad-lb .house .s,.ad-lb .house .btn{display:none}
    .ad-bill{min-height:250px}
    .mast .wrap{flex-wrap:wrap;gap:12px}
    .search{order:3;width:100%;flex-basis:100%}
    .logo img{height:38px}
    .topbar .date{max-width:52%}
    .row{grid-template-columns:104px 1fr;gap:12px}
    .row h3{font-size:17px}
    .native{grid-template-columns:104px 1fr}
    .anchor .ad{min-height:54px}
  }
  @media(prefers-reduced-motion:reduce){.dot{animation:none}html{scroll-behavior:auto}
    .slide,.slide h2,.slide p,.slide .read{transition:none}
    .ring.play .prog{animation:none;stroke-dashoffset:0}
  }

  /* ===== Barlow type tuning (Barlow is semi-condensed & geometric — headlines can run tight) ===== */
  body{font-size:16px;line-height:1.6;letter-spacing:0}
  .slide h2{font-weight:800;line-height:.98;letter-spacing:-.018em}
  .row h3,.card h3{font-weight:700;line-height:1.14;letter-spacing:-.005em}
  .sec-head h2,.sec-head h3{font-weight:800;letter-spacing:.02em}
  .cat-chip{font-weight:700;letter-spacing:.1em;font-size:10.5px}
  nav.cats a{font-weight:600;letter-spacing:.06em;font-size:14px}
  .widget .wh{font-weight:800;letter-spacing:.06em}
  .widget li a{font-weight:600;letter-spacing:0;text-transform:none;font-size:15px;line-height:1.25}
  .widget li::before{font-weight:800}
  .topbar .date,.row .date,.slide .kick .tm,.ad .dim,.vid .vt,.gcred{font-weight:500;letter-spacing:.06em;font-size:11.5px}
  .subscribe{font-weight:700;letter-spacing:.04em}
  .ad .house .k,.creative .brand{font-weight:800;letter-spacing:-.005em}
  footer h4{font-weight:700;letter-spacing:.1em}

  /* ===== single video post (now inside the main column) ===== */
  .vid.tvmain{position:relative;border-radius:10px;overflow:hidden;background:#000;cursor:pointer;
    border:1px solid var(--line);aspect-ratio:16/9;min-height:0;margin-bottom:8px}
  .vid .vthumb{position:absolute;inset:0;background:linear-gradient(160deg,#3d0f0e,#170d0d 70%)}
  .vid .vtex{position:absolute;inset:0;opacity:.5;background:radial-gradient(circle at 68% 30%,rgba(255,196,0,.28),transparent 46%),repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 3px,transparent 3px 26px)}
  .vid .vgrad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent 58%)}
  .vid .play{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
  .vid .play::after{content:"";width:0;height:0;border-left:19px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
  .vid:hover .play{transform:scale(1.07);background:var(--gold)}
  .vid:hover .play::after{border-left-color:var(--black)}
  .vid .vmeta{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff}
  .vid .vmeta h3{font-weight:800;text-transform:uppercase;line-height:1.06;font-size:23px;margin:9px 0 0;letter-spacing:-.005em}
  .vid .vmeta .vt{color:#CFCFCA;margin-top:7px}
  .vid .dur{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.62);color:#fff;font-family:var(--data-font);font-weight:600;font-size:11px;padding:3px 9px;border-radius:4px;z-index:2}
  .vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .vid .hint{position:absolute;left:0;right:0;bottom:0;background:var(--gold);color:var(--black);font-size:12px;font-weight:700;text-align:center;padding:7px;display:none;z-index:3}
  .vid .play::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--red);opacity:0;animation:ringpulse 2.3s ease-out infinite}
  @keyframes ringpulse{0%{transform:scale(.72);opacity:.65}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}
  .vid:hover .play::before{border-color:var(--gold)}

  /* ===== IN PICTURES — photo carousel ===== */
  .gal{background:var(--black);color:#fff;margin-top:40px;padding:34px 0 34px;position:relative;overflow:hidden}
  .gal::before{content:"PHOTOS";position:absolute;right:-1%;top:-12%;font-family:var(--display-font);font-weight:900;font-size:210px;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,196,0,.09);pointer-events:none}
  .gal .sec-head{border-bottom-color:rgba(255,255,255,.22);position:relative;z-index:1}
  .gal .sec-head h2::before{background:var(--gold)}
  .gal .sec-head a{color:var(--gold)}
  .galwrap{position:relative;z-index:1}
  .gtrack{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 0 4px;outline:none}
  .gtrack::-webkit-scrollbar{display:none}
  .gslide{position:relative;flex:0 0 clamp(260px,31%,380px);margin:0;scroll-snap-align:start;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.14);cursor:pointer}
  .gslide .gph{position:absolute;inset:0;transition:transform .5s ease}
  .g1 .gph{background:linear-gradient(140deg,#5a1614,#1d0e0d 72%)}
  .g2 .gph{background:linear-gradient(140deg,#123a7a,#0c1626 72%)}
  .g3 .gph{background:linear-gradient(140deg,#5a3a0f,#1e1408 72%)}
  .g4 .gph{background:linear-gradient(140deg,#12563a,#0c1f16 72%)}
  .g5 .gph{background:linear-gradient(140deg,#4a2a12,#1c1109 72%)}
  .g6 .gph{background:linear-gradient(140deg,#2d1a52,#120d1e 72%)}
  .gslide .gtex{position:absolute;inset:0;opacity:.55;background:radial-gradient(circle at 66% 30%,rgba(255,196,0,.3),transparent 48%),repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 3px,transparent 3px 26px)}
  .gslide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.86),transparent 62%)}
  .gslide figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
  .gslide figcaption h3{font-weight:700;font-size:17px;line-height:1.18;margin:9px 0 0;letter-spacing:-.005em;color:#fff}
  .gcred{display:block;color:#BFB9A8;margin-top:7px;font-family:var(--data-font)}
  .gslide:hover .gph{transform:scale(1.05)}
  .gslide:hover figcaption h3{color:var(--gold)}
  .gnav{position:absolute;top:calc(50% - 26px);transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;
    border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.62);color:#fff;font-size:17px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:background .2s,opacity .2s}
  .gnav:hover:not(:disabled){background:var(--gold);color:var(--black);border-color:var(--gold)}
  .gnav:disabled{opacity:.25;cursor:default}
  .gprev{left:-8px}.gnext{right:-8px}
  .gdots{display:flex;gap:8px;justify-content:center;margin-top:20px;position:relative;z-index:1}
  .gdot{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.3);cursor:pointer;transition:all .25s}
  .gdot.on{background:var(--gold);width:22px;border-radius:100px}

  @media(max-width:960px){
    .gslide{flex-basis:clamp(240px,64%,320px)}
    .gprev{left:2px}.gnext{right:2px}
  }
  @media(max-width:640px){
    .gslide{flex-basis:82%}
    .gal::before{font-size:120px}
    .vid .vmeta h3{font-size:18px}
    .gnav{width:40px;height:40px}
  }
  @media(prefers-reduced-motion:reduce){
    .gtrack{scroll-behavior:auto}
    .gslide .gph{transition:none}
    .vid .play::before{animation:none;display:none}
  }


  /* ================= SECTION / ARTICLE / MEDIA-KIT / ABOUT components ================= */
  .grid,.alayout{display:grid;grid-template-columns:1fr 300px;gap:34px;padding-top:26px}
  .alayout{grid-template-columns:minmax(0,1fr) 300px}
  .article{max-width:none}

  /* --- category header --- */
  .cathead{background:var(--black);color:#fff;position:relative;overflow:hidden;border-bottom:4px solid var(--gold)}
  .cathead .ph{position:absolute;inset:0;opacity:.5;background:radial-gradient(circle at 82% 20%,rgba(224,26,22,.4),transparent 44%),repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 3px,transparent 3px 26px)}
  .cathead .wrap{position:relative;padding:34px 20px 30px}
  .cathead .eye{display:inline-block;font-family:var(--data-font);font-size:11px;letter-spacing:.18em;font-weight:700;text-transform:uppercase;color:var(--gold)}
  .cathead h1{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:clamp(38px,6vw,68px);line-height:.98;margin:12px 0 10px;letter-spacing:-.02em}
  .cathead p{margin:0;max-width:60ch;color:#D6D6D0;font-size:16px;line-height:1.6}
  .filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
  .filters a{font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;color:#EDEDEA;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);padding:8px 15px;border-radius:100px;transition:all .2s}
  .filters a:hover{border-color:var(--gold);color:var(--gold)}
  .filters a.on{background:var(--gold);color:var(--black);border-color:var(--gold);font-weight:700}

  /* --- lead feature --- */
  .lead{display:grid;grid-template-columns:1.2fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:4px 0 12px}
  .lead .img{position:relative;min-height:280px;background:linear-gradient(135deg,#4d1210,#20100f)}
  .lead .img .ph{position:absolute;inset:0;opacity:.5;background:radial-gradient(circle at 70% 30%,rgba(255,196,0,.32),transparent 46%),repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 3px,transparent 3px 26px)}
  .lead .img .cam{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-family:var(--data-font);font-size:10.5px;padding:4px 9px;border-radius:4px}
  .lead .txt{padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
  .lead .badge{display:inline-block;align-self:flex-start;font-family:var(--data-font);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:#fff;background:var(--red);padding:4px 11px;border-radius:3px;margin-bottom:12px}
  .lead h2{font-family:var(--display-font);font-weight:800;text-transform:uppercase;line-height:1.04;font-size:clamp(24px,3.2vw,34px);margin:0 0 10px;letter-spacing:-.012em}
  .lead p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
  .lead .date{font-family:var(--data-font);font-size:11px;color:var(--muted);margin-top:14px;letter-spacing:.06em}
  .lead:hover h2{color:var(--red)}

  .loadmore{display:flex;flex-direction:column;align-items:center;gap:16px;padding:30px 0 6px}
  .loadmore button{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;background:var(--black);color:#fff;border:0;padding:14px 34px;border-radius:100px;cursor:pointer;transition:background .2s}
  .loadmore button:hover{background:var(--red)}
  .pager{display:flex;gap:6px;font-family:var(--data-font);font-size:13px}
  .pager a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;background:#fff;font-weight:600}
  .pager a.on{background:var(--black);color:var(--gold);border-color:var(--black)}
  .pager a:hover{border-color:var(--black)}

  /* --- article --- */
  .crumb{font-family:var(--data-font);font-size:11.5px;color:var(--muted);padding:18px 0 0;letter-spacing:.04em}
  .crumb a:hover{color:var(--red)}
  .a-head h1{font-family:var(--display-font);font-weight:800;text-transform:uppercase;line-height:1.02;letter-spacing:-.02em;font-size:clamp(32px,4.6vw,52px);margin:10px 0 14px}
  .a-head .deck{font-size:19px;line-height:1.55;color:var(--muted);margin:0 0 20px}
  .byline{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .byline .av{width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
  .byline .who b{font-weight:700}
  .byline .who .m{font-family:var(--data-font);font-size:10.5px;color:var(--muted);letter-spacing:.06em}
  .byline .grow{flex:1}
  .share{display:flex;gap:8px}
  .share a{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:#fff;transition:all .2s}
  .share a:hover{background:var(--black);color:var(--gold);border-color:var(--black)}
  figure{margin:24px 0}
  figure .fimg{aspect-ratio:16/9;position:relative;background:linear-gradient(135deg,#4d1210,#20100f);border-radius:10px;overflow:hidden}
  figure .fimg .ph{position:absolute;inset:0;opacity:.5;background:radial-gradient(circle at 70% 30%,rgba(255,196,0,.32),transparent 46%),repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 3px,transparent 3px 26px)}
  figure .cam{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-family:var(--data-font);font-size:10.5px;padding:4px 9px;border-radius:4px}
  figcaption{font-size:12.5px;color:var(--muted);margin-top:10px;padding-left:12px;border-left:3px solid var(--gold)}
  .body-copy{font-size:17.5px;line-height:1.8;color:var(--ink)}
  .body-copy p{margin:0 0 22px}
  .body-copy > p:first-of-type::first-letter{font-family:var(--display-font);font-weight:800;float:left;font-size:62px;line-height:.76;padding:6px 12px 0 0;color:var(--red)}
  .body-copy h2{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:24px;margin:34px 0 12px;letter-spacing:-.008em}
  .pull{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:25px;line-height:1.14;letter-spacing:-.01em;color:var(--ink);border-left:5px solid var(--gold);padding:6px 0 6px 20px;margin:28px 0}
  .squadbox{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:26px 0}
  .squadbox .sh{background:var(--black);color:#fff;font-family:var(--display-font);font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:12px 18px;font-size:16px;display:flex;align-items:center;gap:9px}
  .squadbox ul{margin:0;padding:14px 20px;columns:2;column-gap:28px;list-style:none;font-size:14.5px}
  .squadbox li{padding:6px 0;border-bottom:1px solid var(--line);break-inside:avoid}
  .squadbox li b{color:var(--red);font-family:var(--data-font);font-size:12px;margin-right:6px}
  .squadbox .note{font-size:11.5px;color:var(--muted);padding:2px 20px 14px}
  .tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0}
  .tags a{font-family:var(--data-font);font-size:11px;text-transform:uppercase;letter-spacing:.05em;background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:100px;transition:all .2s}
  .tags a:hover{background:var(--black);color:var(--gold);border-color:var(--black)}
  .authorbio{display:flex;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;margin:26px 0}
  .authorbio .av{width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto}
  .authorbio h4{margin:0;font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:17px}
  .authorbio .r{font-family:var(--data-font);font-size:10.5px;color:var(--red);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
  .authorbio p{margin:8px 0 0;font-size:13.5px;color:var(--muted);line-height:1.6}
  .recirc{margin-top:34px}
  .recirc-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:block;transition:transform .2s,box-shadow .2s}
  .card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.09)}
  .card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#4d1210,#241110)}
  .card .thumb.f{background:linear-gradient(135deg,#123a7a,#0e2a55)}
  .card .thumb.g{background:linear-gradient(135deg,#4d3a08,#241d08)}
  .card .body{padding:16px 18px 18px}
  .card h3{font-family:var(--display-font);font-weight:800;text-transform:uppercase;line-height:1.1;font-size:18px;margin:10px 0 0}
  .card .date{font-family:var(--data-font);font-size:10.5px;color:var(--muted);margin-top:9px;letter-spacing:.06em}
  .card:hover h3{color:var(--red)}
  .nl{background:var(--black);color:#fff;border-radius:12px;padding:26px 28px;margin:30px 0;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
  .nl h3{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:25px;margin:0 0 6px}
  .nl p{margin:0;color:#CFCFCA;font-size:14px}
  .nl .t{flex:1;min-width:240px}
  .nl a{background:var(--gold);color:var(--black);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;padding:13px 26px;border-radius:100px}
  .nl a:hover{background:#fff}

  /* --- media kit / about --- */
  .hero{background:var(--black);color:#fff;position:relative;overflow:hidden;border-bottom:4px solid var(--gold)}
  .hero::after{content:"ADS";position:absolute;right:-1%;bottom:-22%;font-family:var(--display-font);font-weight:900;font-size:260px;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,196,0,.08);pointer-events:none}
  .hero .wrap{padding:52px 20px 44px;position:relative}
  .hero .eye{display:inline-block;font-family:var(--data-font);font-size:11px;letter-spacing:.18em;font-weight:700;text-transform:uppercase;color:var(--gold)}
  .hero h1{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:clamp(38px,6vw,72px);line-height:.98;margin:14px 0 12px;letter-spacing:-.022em}
  .hero h1 .g{color:var(--gold)}
  .hero p{max-width:60ch;color:#D6D6D0;margin:0;font-size:16.5px;line-height:1.6}
  .hero .cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
  .hero .cta a{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;padding:14px 26px;border-radius:100px}
  .hero .cta .p{background:var(--gold);color:var(--black)}
  .hero .cta .p:hover{background:#fff}
  .hero .cta .s{border:1px solid rgba(255,255,255,.45);color:#fff}
  .hero .cta .s:hover{background:rgba(255,255,255,.1)}
  section{padding:42px 0 6px}
  h2.sh{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:27px;margin:0 0 6px;border-bottom:3px solid var(--black);padding-bottom:8px;display:inline-block}
  .lede{color:var(--muted);margin:14px 0 24px;max-width:70ch;line-height:1.65}
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px;border-top:4px solid var(--red)}
  .stat.gold{border-top-color:var(--gold)}
  .stat .n{font-family:var(--display-font);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.02em}
  .stat .n span{color:var(--red)}
  .stat .l{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5}
  .note-fill{font-size:12px;color:var(--muted);margin-top:14px;font-style:italic}
  .aud{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .aud .c{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 22px}
  .aud .c h4{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:16px;margin:0 0 8px}
  .aud .c p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6}
  .slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
  .slot{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;text-align:center}
  .slot .box{border:1px dashed var(--ad-line);background:var(--ad-bg);display:flex;align-items:center;justify-content:center;font-family:var(--data-font);font-size:10px;color:#9a9484;margin-bottom:11px;border-radius:6px}
  .slot .nm{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:14px}
  .slot .d{font-family:var(--data-font);font-size:10px;color:var(--muted);margin-top:4px}
  table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:14.5px}
  thead th{background:var(--black);color:var(--gold);text-transform:uppercase;font-weight:700;letter-spacing:.06em;text-align:left;padding:13px 16px;font-size:12px}
  tbody td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top}
  tbody tr:nth-child(even){background:#FBFAF7}
  td .pos{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:14.5px}
  td .sz{font-family:var(--data-font);font-size:10px;color:var(--muted)}
  td.price{font-family:var(--display-font);font-weight:800;font-size:17px;white-space:nowrap}
  .tier{display:inline-block;font-family:var(--data-font);font-weight:700;font-size:9px;padding:3px 9px;color:#fff;letter-spacing:.08em;border-radius:100px;text-transform:uppercase}
  .tier.prem{background:var(--red)}.tier.std{background:var(--gold);color:var(--black)}.tier.native{background:var(--black);color:var(--gold)}
  .rate-note{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.6}
  .packs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .pack{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column}
  .pack.feat{border:2px solid var(--black);position:relative}
  .pack.feat::before{content:"MOST POPULAR";position:absolute;top:-11px;left:22px;background:var(--red);color:#fff;font-family:var(--data-font);font-weight:700;font-size:9px;padding:4px 12px;letter-spacing:.12em;border-radius:100px}
  .pack h3{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:21px;margin:0}
  .pack .pr{font-family:var(--display-font);font-weight:800;font-size:36px;margin:12px 0 2px;letter-spacing:-.02em}
  .pack .pr span{font-size:13px;color:var(--muted);font-weight:400;font-family:var(--data-font)}
  .pack ul{list-style:none;padding:0;margin:16px 0 20px;font-size:13.5px;flex:1}
  .pack li{padding:8px 0;border-bottom:1px solid var(--line);padding-left:22px;position:relative;line-height:1.5}
  .pack li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:800}
  .pack .buy{text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;padding:13px;background:var(--black);color:#fff;border-radius:100px;transition:background .2s}
  .pack.feat .buy{background:var(--red)}
  .pack .buy:hover{background:var(--red)}
  .contact{background:var(--black);color:#fff;border-radius:12px;padding:32px;margin:16px 0 0;display:flex;gap:26px;flex-wrap:wrap;align-items:center}
  .contact .t{flex:1;min-width:260px}
  .contact h3{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:26px;margin:0 0 8px}
  .contact p{margin:0;color:#CFCFCA;line-height:1.6}
  .contact .info{font-family:var(--data-font);font-size:13px;margin-top:14px;line-height:2}
  .contact .info b{color:var(--gold)}
  .contact .btn{background:var(--gold);color:var(--black);font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:15px 28px;font-size:13px;border-radius:100px}
  .contact .btn:hover{background:#fff}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
  .founder{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px}
  .founder .av{width:72px;height:72px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:16px}
  .founder h3{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:21px;margin:0}
  .founder .role{font-family:var(--data-font);font-size:10.5px;color:var(--red);margin:5px 0 14px;letter-spacing:.08em;text-transform:uppercase}
  .founder p{margin:0 0 12px;font-size:14px;color:var(--muted);line-height:1.65}
  .values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
  .val{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;border-top:4px solid var(--red)}
  .val:nth-child(2){border-top-color:var(--gold)}
  .val h4{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:16px;margin:0 0 8px}
  .val p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6}
  .prose{max-width:74ch;margin-top:18px}
  .prose p{margin:0 0 18px;line-height:1.75;color:var(--muted)}
  .cgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
  .cinfo{background:var(--black);color:#fff;border-radius:12px;padding:28px}
  .cinfo h3{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:21px;margin:0 0 14px}
  .cinfo .crow,.cinfo .row{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14px;grid-template-columns:none}
  .cinfo .crow:last-child,.cinfo .row:last-child{border-bottom:0}
  .cinfo .crow b,.cinfo .row b{font-family:var(--data-font);font-weight:700;font-size:11px;color:var(--gold);min-width:90px;letter-spacing:.06em;text-transform:uppercase}
  .cinfo .socials{display:flex;gap:10px;margin-top:16px}
  .cinfo .socials a{border:1px solid rgba(255,255,255,.35);padding:9px 17px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:100px}
  .cinfo .socials a:hover{background:var(--gold);color:var(--black);border-color:var(--gold)}
  form.cform{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px}
  form.cform label{display:block;font-family:var(--data-font);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.1em;color:var(--muted);margin:0 0 7px}
  form.cform .f{margin-bottom:17px}
  form.cform input,form.cform select,form.cform textarea{width:100%;border:1px solid var(--line);padding:12px 14px;font:inherit;background:var(--paper);border-radius:8px;transition:border-color .2s}
  form.cform input:focus,form.cform select:focus,form.cform textarea:focus{outline:none;border-color:var(--black)}
  form.cform textarea{min-height:120px;resize:vertical}
  form.cform button{background:var(--red);color:#fff;border:0;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;padding:14px 30px;border-radius:100px;cursor:pointer;transition:background .2s}
  form.cform button:hover{background:var(--black)}

  @media(max-width:960px){
    .grid,.alayout,.split,.cgrid{grid-template-columns:1fr}
    .lead{grid-template-columns:1fr}.lead .img{min-height:210px}
    .values,.packs{grid-template-columns:1fr}
    .recirc-grid,.aud{grid-template-columns:1fr 1fr}
  }
  @media(max-width:640px){
    .recirc-grid,.aud{grid-template-columns:1fr}
    .squadbox ul{columns:1}
    .body-copy{font-size:16.5px}
  }

/* =========================================================================
   2. WORDPRESS INTEGRATION LAYER
   Everything below exists because WordPress outputs markup the static mock
   never had (real images in place of gradient placeholders, core classes,
   the admin bar, pagination, comments). It does not change the design —
   it makes the design work with real content.
   ========================================================================= */

/* --- accessibility: skip link + core screen-reader class --- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:var(--black);
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;padding:12px 20px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}

/* --- sticky category nav must clear the WP admin bar --- */
.admin-bar nav.cats{top:32px}
@media screen and (max-width:782px){.admin-bar nav.cats{top:46px}}

/* --- real photography drops into the gradient placeholders ---
   Every placeholder keeps its gradient as the fallback, so a post with no
   featured image still looks like the approved design. --- */
.rthumb,.lead .img,figure .fimg,.card .thumb,.gslide .gph,.vid .vthumb,.slide .img .fill{overflow:hidden}
.rthumb img,.lead .img img,figure .fimg img,.card .thumb img,.gslide .gph img,.vid .vthumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rthumb,.card .thumb{position:relative}
.card .thumb{position:relative;overflow:hidden}
.slide .img .fill.has-photo{background-size:cover;background-position:center}
.slide .img .fill.has-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(224,26,22,.22),rgba(0,0,0,.55))}
.gslide .gph img{transition:transform .5s ease}
/* transparent click target over a carousel frame — sits above the gradient
   so the caption underneath still reads exactly as designed */
.gslide .goverlay{position:absolute;inset:0;z-index:3}
.gslide .goverlay:focus-visible{outline:3px solid var(--gold);outline-offset:-4px}

/* --- BUG FIX carried over from the design pack ---
   The slider's control deck and the article standfirst share the class name
   `.deck`. The slider rule (position:absolute; bottom:0; z-index:5; dark
   gradient) therefore also hit the article standfirst, pinning it to the
   bottom of the article and painting a black gradient over the body copy.
   Visible in timeout-article-template.html too. Scoped back here rather than
   editing the verbatim design block above. --- */
.a-head .deck{position:static;background:none;padding:0;z-index:auto;left:auto;right:auto;bottom:auto;display:block}

/* --- feed row excerpt + camera chip: used in the approved section markup
   but never given rules in the pack. Matched to sibling components. --- */
.row p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.row .rthumb .cam{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;
  font-family:var(--data-font);font-size:10px;padding:3px 7px;border-radius:4px;z-index:2}
.native .adv{font-family:var(--data-font);font-size:11.5px;color:var(--muted);margin-top:8px;letter-spacing:.04em}
.sec-head .count{font-family:var(--data-font);font-size:11.5px;color:var(--muted);letter-spacing:.06em}
.sec-head h3{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:22px;margin:0}
.sec-head h3::before{content:"";display:inline-block;width:10px;height:10px;background:var(--red);
  margin-right:10px;transform:skewX(-12deg)}
.sec-head .line{flex:1}

/* --- ad slots referenced in the markup without sizes --- */
.ad-inlist{min-height:100px;margin:18px 0}
.ad-inline{min-height:250px;margin:26px 0}
@media(max-width:640px){.ad-inlist{min-height:60px}}
/* A slot filled with a client's own banner/ad code shouldn't inherit the
   house-ad padding — the creative sizes itself. */
.ad .adcode{width:100%;display:flex;align-items:center;justify-content:center;padding:8px}
.ad .adcode img{margin:0 auto}
.ad-sponsor-label{position:absolute;top:6px;left:8px;font-size:9px;letter-spacing:.16em;color:#9a9484;font-weight:600}

/* --- pagination (WP paginate_links inside the design's .pager) --- */
.pager .page-numbers{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:6px;background:#fff;font-weight:600;font-family:var(--data-font);font-size:13px}
.pager .page-numbers.current{background:var(--black);color:var(--gold);border-color:var(--black)}
.pager a.page-numbers:hover{border-color:var(--black)}
.pager .page-numbers.dots{border:0;background:none}
.pager .next,.pager .prev{width:auto;padding:0 14px}

/* --- WordPress core content classes inside .body-copy --- */
.body-copy img,.body-copy iframe{max-width:100%}
.body-copy figure{margin:24px 0}
.body-copy figure img,.body-copy img{border-radius:10px;height:auto}
.body-copy .alignleft{float:left;margin:6px 24px 16px 0;max-width:50%}
.body-copy .alignright{float:right;margin:6px 0 16px 24px;max-width:50%}
.body-copy .aligncenter{margin-left:auto;margin-right:auto}
.body-copy .alignwide{margin-left:-40px;margin-right:-40px;max-width:calc(100% + 80px)}
.body-copy .wp-caption-text,.body-copy figcaption{font-size:12.5px;color:var(--muted);margin-top:10px;
  padding-left:12px;border-left:3px solid var(--gold)}
.body-copy ul,.body-copy ol{margin:0 0 22px;padding-left:24px}
.body-copy li{margin-bottom:8px}
.body-copy a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.body-copy a:hover{color:var(--red-deep)}
.body-copy h3{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:20px;margin:28px 0 10px}
.body-copy table{margin:24px 0}
/* the design's pull quote, driven by a normal editor blockquote */
.body-copy blockquote,.body-copy .wp-block-quote{font-family:var(--display-font);font-weight:800;
  text-transform:uppercase;font-size:25px;line-height:1.14;letter-spacing:-.01em;color:var(--ink);
  border-left:5px solid var(--gold);padding:6px 0 6px 20px;margin:28px 0}
.body-copy blockquote p{margin:0 0 8px}
.body-copy blockquote cite{display:block;font-family:var(--data-font);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-style:normal;margin-top:8px}
/* drop cap must not fire on a block-editor wrapped first paragraph */
.body-copy > p:first-of-type::first-letter,
.body-copy > .wp-block-paragraph:first-of-type::first-letter{font-family:var(--display-font);font-weight:800;
  float:left;font-size:62px;line-height:.76;padding:6px 12px 0 0;color:var(--red)}
.body-copy .no-dropcap::first-letter{font-size:inherit;float:none;padding:0;color:inherit;line-height:inherit}
@media(max-width:640px){.body-copy .alignleft,.body-copy .alignright{float:none;margin:16px 0;max-width:100%}
  .body-copy .alignwide{margin-left:0;margin-right:0;max-width:100%}}

/* --- editor-side page content (About / Media Kit extra copy) --- */
.page-content{max-width:74ch;margin-top:18px}
.page-content p{margin:0 0 18px;line-height:1.75;color:var(--muted)}

/* --- search / 404 / empty states --- */
.emptystate{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:34px 28px;margin:22px 0}
.emptystate h2{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:24px;margin:0 0 10px}
.emptystate p{margin:0 0 18px;color:var(--muted)}
.emptystate .search{max-width:420px}

/* --- comments (off by default; styled in case the client turns them on) --- */
.comments-area{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:24px;margin:26px 0}
.comments-area h3{font-family:var(--display-font);font-weight:800;text-transform:uppercase;font-size:20px;margin:0 0 14px}
.comments-area .comment-list{list-style:none;padding:0;margin:0}
.comments-area .comment-list li{border-bottom:1px solid var(--line);padding:14px 0}
.comments-area input[type=text],.comments-area input[type=email],.comments-area input[type=url],
.comments-area textarea{width:100%;border:1px solid var(--line);padding:12px 14px;font:inherit;
  background:var(--paper);border-radius:8px}
.comments-area .submit{background:var(--red);color:#fff;border:0;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:13px;padding:14px 30px;border-radius:100px;cursor:pointer}

/* --- mobile nav toggle (the 9-sport strip scrolls, but the search needs room) --- */
.mast .navtoggle{display:none}

/* --- print: never print the ad furniture --- */
@media print{
  .topbar,.top-ad,nav.cats,.anchor,.rail,.ad,.native,.swatch .deck,.gal{display:none!important}
  body{background:#fff;padding-bottom:0}
}