:root{
  --gold:#e8a42a; --gold-deep:#c5821a; --gold-soft:#fbf3df;
  /* second accent (was green) is now a deep gold/bronze so white text stays legible on fills */
  --green:#a06a0c; --green-deep:#7c520a; --green-soft:#f6ecd6;
  --on-gold:#fff;
  --ink:#16140f; --ink-2:#3c382f; --muted:#6f6a5f; --faint:#9b958a;
  --line:#e7e3da; --line-2:#efece5;
  --bg:#ffffff; --bg-warm:#faf8f3; --bg-dark:#14130f;
  --surface:#ffffff; --mast-bg:rgba(255,255,255,.96);
  --ph-a:#f3efe6; --ph-b:#efe9dc; --ph-label:#b0a892; --ph-chip:rgba(255,255,255,.72); --ph-chip-line:#e3dccb;
  --disp:"Archivo",system-ui,sans-serif;
  --body:"Libre Franklin",system-ui,sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --wrap:1260px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html body{background:var(--bg)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- IMAGE PLACEHOLDERS ---------- */
.ph{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--ph-a) 0 11px, var(--ph-b) 11px 22px);
  display:flex;align-items:center;justify-content:center;transition:filter .3s}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(20,18,14,.08))}
.ph span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ph-label);
  text-transform:uppercase;background:var(--ph-chip);padding:5px 9px;border:1px solid var(--ph-chip-line);position:relative;z-index:1}
.ph--sq{aspect-ratio:1/1}.ph--9x16{aspect-ratio:9/16}.ph--4x5{aspect-ratio:4/5}
a:hover>.ph,.card__media:hover .ph{filter:contrast(1.04) brightness(1.03)}

/* ---------- TOP UTILITY BAR ---------- */
.util{background:var(--bg-dark);color:#cfc9bb;font-size:12px}
.util .wrap{display:flex;align-items:center;justify-content:space-between;height:34px}
.util__date{font-family:var(--mono);letter-spacing:.04em;color:#b8b1a2;white-space:nowrap}
.util__links{display:flex;gap:18px;align-items:center;white-space:nowrap}
.util__links a{color:#cfc9bb;transition:color .2s}
.util__links a:hover{color:var(--gold)}
.util__sub{color:var(--gold)!important;font-weight:600}

/* ---------- MASTHEAD ---------- */
.mast{position:sticky;top:0;z-index:60;background:var(--mast-bg);backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{height:42px;width:auto}
.brand .wm{display:flex;flex-direction:column;line-height:.92}
.brand .wm b{font-family:var(--disp);font-weight:900;font-size:25px;letter-spacing:-.01em;color:var(--ink)}
.brand .wm i{font-family:var(--disp);font-style:normal;font-weight:700;font-size:11.5px;letter-spacing:.42em;color:var(--gold-deep);margin-top:2px}
.mast__right{margin-left:auto;display:flex;align-items:center;gap:14px}

/* nav */
.nav{display:flex;align-items:center;gap:2px}
.nav a{font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--ink-2);padding:9px 13px;border-radius:6px;position:relative;transition:color .18s,background .18s}
.nav a:hover{color:var(--gold-deep);background:var(--gold-soft)}
.nav a.is-active{color:var(--gold-deep)}
.mast{transition:background .3s,border-color .3s}
body{transition:background .3s,color .3s}
.nav a.is-active::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:3px;background:var(--gold);border-radius:2px}

.live-btn{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.02em;padding:8px 14px;border-radius:999px;border:0;cursor:pointer;transition:background .2s}
.live-btn:hover{background:var(--green-deep)}
.live-btn i{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.iconbtn{width:38px;height:38px;border:1px solid var(--line);background:var(--surface);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:border-color .2s,background .2s}
.iconbtn:hover{background:var(--gold-soft);border-color:var(--gold)}
.sub-btn{font-family:var(--disp);font-weight:700;font-size:13.5px;background:var(--ink);color:#fff;padding:9px 18px;border-radius:999px;cursor:pointer;border:0;transition:background .2s}
.sub-btn:hover{background:var(--gold-deep)}
#burger{display:none}

/* ---------- KICKERS / SECTION HEADERS ---------- */
.kicker{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;display:inline-block;margin-bottom:7px}
.kicker--gold{color:var(--gold-deep)}
.sechdr{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:3px solid var(--ink);padding-top:12px;margin-bottom:18px}
.sechdr__title{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.01em;display:flex;align-items:center;gap:11px}
.sechdr__title .mark{width:7px;height:24px;background:var(--gold);border-radius:1px;display:inline-block}
.sechdr__more{font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--muted);transition:color .2s}
.sechdr__more:hover{color:var(--gold-deep)}

/* ---------- HERO ZONE ---------- */
.heromain{padding:26px 0 8px}
.herogrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3.5fr) minmax(0,2.9fr);gap:30px}
.col{border-left:1px solid var(--line-2);padding-left:24px}
.col:first-child{border-left:0;padding-left:0}

.hero__media{display:block;position:relative;margin-bottom:0}
.livetag{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;background:var(--green);color:#fff;font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.08em;padding:5px 10px;border-radius:4px;z-index:2}
.livetag i{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.6s infinite}
.breakbar{background:var(--green);color:#fff;padding:16px 18px 17px}
.breakbar__label{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.14em;color:#ecd39a;display:block;margin-bottom:6px}
.breakbar__title{font-family:var(--disp);font-weight:800;font-size:27px;line-height:1.12;letter-spacing:-.012em;text-wrap:balance}
.hero__stand{color:var(--ink-2);font-size:15.5px;margin:14px 0 4px;max-width:52ch}
.hero a.hero__media:hover .ph{filter:brightness(1.05)}

.livewrap{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.livewrap__head{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.1em;color:var(--green);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(160,106,12,.5);animation:ring 1.8s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(160,106,12,.45)}70%{box-shadow:0 0 0 8px rgba(160,106,12,0)}100%{box-shadow:0 0 0 0 rgba(160,106,12,0)}}
.livelist{list-style:none}
.livelist li{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);align-items:start;position:relative;transition:background .4s}
.livelist li.flash{background:var(--gold-soft)}
.livelist time{font-family:var(--mono);font-size:11.5px;color:var(--gold-deep);padding-top:2px}
.livelist a{font-weight:500;font-size:14.5px;line-height:1.34;transition:color .2s}
.livelist a:hover{color:var(--gold-deep)}

/* middle */
.lead2__media{display:block;margin-bottom:11px}
.lead2__title{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.18;letter-spacing:-.01em;margin-bottom:18px}
.lead2__title a:hover{color:var(--gold-deep)}
.hlist{list-style:none;border-top:1px solid var(--line)}
.hlist li{border-bottom:1px solid var(--line-2)}
.hlist a{display:block;padding:12px 0;font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.25;transition:color .2s}
.hlist a:hover{color:var(--gold-deep)}

/* right rail */
.railblock+.railblock{margin-top:22px}
.railhdr{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.12em;color:var(--gold-deep);border-bottom:2px solid var(--gold);padding-bottom:7px;margin-bottom:10px}
.raillist{list-style:none}
.raillist li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.railthumb{flex-shrink:0;width:66px}
.railthumb--round .ph{border-radius:50%}
.railtitle{font-weight:600;font-size:14px;line-height:1.3;transition:color .2s}
.railtitle:hover{color:var(--gold-deep)}
.byline{display:block;font-size:11.5px;color:var(--faint);font-style:italic;margin-top:4px}
.raillist--op .railthumb{width:54px}

/* ---------- VIDEO STRIP ---------- */
.videos{background:var(--bg-dark);color:#fff;padding:26px 0 30px;margin-top:30px}
.videos .sechdr{border-top-color:var(--gold);color:#fff}
.videos .sechdr__title{color:#fff}
.videos .sechdr__more{color:#b6b0a2}
.videohead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.videohead h2{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.videohead h2 .mark{width:7px;height:20px;background:var(--gold);display:inline-block}
.vnav{display:flex;gap:8px}
.vnav button{width:36px;height:36px;border-radius:50%;border:1px solid #39362d;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s}
.vnav button:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.vtrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.vtrack::-webkit-scrollbar{height:6px}.vtrack::-webkit-scrollbar-thumb{background:#3a372d;border-radius:3px}
.vcard{flex:0 0 200px;scroll-snap-align:start}
.vcard__media{position:relative;border-radius:3px;overflow:hidden}
.vcard__media .ph{background:repeating-linear-gradient(135deg,#26241d 0 11px,#211f19 11px 22px)}
.vcard__media .ph span{background:rgba(0,0,0,.4);border-color:#444;color:#8c867a}
.playbtn{position:absolute;left:12px;bottom:12px;width:34px;height:34px;border-radius:50%;background:rgba(232,164,42,.95);z-index:2}
.playbtn::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.vcard__title{font-weight:500;font-size:13.5px;line-height:1.3;margin-top:9px;color:#e8e4da}
.vcard:hover .vcard__title{color:var(--gold)}

/* ---------- TOPIC BLOCKS ---------- */
.topics{padding:38px 0 6px}
.topic{padding:26px 0 30px;border-bottom:1px solid var(--line)}
.topic__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,2fr);gap:32px}
.bigcard__media{display:block;margin-bottom:12px}
.bigcard__title{font-family:var(--disp);font-weight:800;font-size:25px;line-height:1.14;letter-spacing:-.012em;margin-bottom:10px;text-wrap:balance}
.bigcard__title a:hover{color:var(--gold-deep)}
.bigcard__stand{color:var(--muted);font-size:15px;max-width:46ch}
.topic__cards{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;align-content:start}
.card__media{display:block;margin-bottom:10px}
.card__title{font-family:var(--disp);font-weight:600;font-size:16.5px;line-height:1.24}
.card__title a:hover{color:var(--gold-deep)}

/* ---------- OPINION + POPULAR ---------- */
.midzone{padding:42px 0;background:var(--bg-warm);border-top:1px solid var(--line)}
.midgrid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:44px}
.opbig{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:18px 0 22px;border-bottom:1px solid var(--line);margin-bottom:6px}
.opbig__media .ph{border-radius:3px}
.quote{font-family:Georgia,serif;font-size:46px;line-height:.6;color:var(--gold);display:block;height:24px}
.quote--sm{font-size:28px;height:14px}
.opbig__title{font-family:var(--disp);font-weight:800;font-size:24px;line-height:1.16;letter-spacing:-.01em;margin:6px 0 10px}
.opbig__title a:hover{color:var(--gold-deep)}
.opbig__stand{color:var(--muted);font-size:14.5px;margin-bottom:12px}
.byline--big{font-style:normal;font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--ink)}
.byline--big em{font-style:normal;font-weight:500;color:var(--faint)}
.oplist{list-style:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.oplist li{display:flex;gap:13px}
.oplist__thumb{flex-shrink:0;width:58px}
.oplist__thumb .ph{border-radius:50%}
.oplist__title{display:block;font-family:var(--disp);font-weight:600;font-size:14.5px;line-height:1.26;margin:2px 0 5px}
.oplist__title:hover{color:var(--gold-deep)}

/* popular */
.popbox{position:sticky;top:90px}
.poptabs{display:flex;gap:6px;margin-bottom:6px}
.tab{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:transparent;border:0;border-bottom:2px solid transparent;padding:6px 4px;cursor:pointer;transition:color .2s,border-color .2s}
.tab.is-active{color:var(--ink);border-color:var(--gold)}
.poplist{list-style:none;counter-reset:p}
.poplist li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.poplist .rank{font-family:var(--disp);font-weight:800;font-size:24px;color:var(--gold);line-height:1;min-width:26px}
.poplist a{font-family:var(--disp);font-weight:600;font-size:15px;line-height:1.26;transition:color .2s}
.poplist a:hover{color:var(--gold-deep)}

/* newsletter */
.nl{margin-top:28px;background:var(--ink);color:#fff;border-radius:6px;padding:24px 22px;border-top:4px solid var(--gold)}
.nl h3{font-family:var(--disp);font-weight:800;font-size:19px;margin-bottom:4px}
.nl p.nl__lead{font-size:13.5px;color:#c4bfb2;margin-bottom:15px}
.nl form{display:flex;flex-direction:column;gap:9px}
.nl input{font-family:var(--body);font-size:14px;padding:12px 14px;border-radius:5px;border:1px solid #3a372d;background:#1d1b15;color:#fff}
.nl input::placeholder{color:#8b8576}
.nl input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.nl button{font-family:var(--disp);font-weight:700;font-size:14px;background:var(--gold);color:#1a1407;border:0;padding:12px;border-radius:5px;cursor:pointer;transition:background .2s}
.nl button:hover{background:#f2b23e}
.nl__msg{font-size:12px;min-height:14px}
.nl__msg--err{color:#f3b1a0}
.nl__fine{font-size:11px;color:#8b8576;margin-top:8px}
.nl__done{display:flex;gap:12px;align-items:center}
.nl__check{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--green);position:relative}
.nl__check::after{content:"";position:absolute;left:11px;top:8px;width:8px;height:15px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(42deg)}
.nl__done p{font-size:14px;color:#e8e4da}

/* ---------- SPORT ---------- */
.sportwrap{padding:42px 0}
.sport__grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:34px}
.sportlead__media{display:block;margin-bottom:14px}
.sportlead__title{font-family:var(--disp);font-weight:800;font-size:24px;line-height:1.15;letter-spacing:-.01em;margin-bottom:9px}
.sportlead__title a:hover{color:var(--gold-deep)}
.sportlead__stand{color:var(--muted);font-size:15px}
.sportlist{list-style:none;border-top:1px solid var(--line)}
.sportlist li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.sportlist__thumb{flex-shrink:0;width:80px}
.sportlist__title{font-family:var(--disp);font-weight:600;font-size:15.5px;line-height:1.26;transition:color .2s}
.sportlist__title:hover{color:var(--gold-deep)}

/* ---------- ARKIB ---------- */
.arkibwrap{padding:30px 0 56px;background:var(--bg-warm);border-top:1px solid var(--line)}
.arkib-list{list-style:none;border-top:1px solid var(--line);margin-bottom:22px}
.arkib__item{display:grid;grid-template-columns:130px 1fr 120px;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.arkib__topic{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.arkib__title{font-family:var(--disp);font-weight:600;font-size:17px;line-height:1.25;transition:color .2s}
.arkib__title:hover{color:var(--gold-deep)}
.arkib__date{font-family:var(--mono);font-size:12px;color:var(--faint);text-align:right}
.arkib-more{display:block;margin:0 auto;font-family:var(--disp);font-weight:700;font-size:14px;background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:12px 28px;border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s}
.arkib-more:hover{background:var(--gold-soft);border-color:var(--gold)}

/* ---------- FOOTER ---------- */
.foot{background:var(--bg-dark);color:#b8b2a4;padding:50px 0 30px}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:34px;border-bottom:1px solid #2c2a22}
.foot__brand img{height:40px;margin-bottom:14px;filter:saturate(1.1)}
.foot__brand p{font-size:13px;max-width:30ch;line-height:1.6}
.foot h4{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot ul a{font-size:13.5px;color:#b8b2a4;transition:color .2s}
.foot ul a:hover{color:var(--gold)}
.foot__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;font-size:12px;color:#7d776a;flex-wrap:wrap;gap:10px}

/* ---------- SEARCH OVERLAY ---------- */
.search-ov{position:fixed;inset:0;background:rgba(20,18,14,.6);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:flex-start;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.search-ov.open{opacity:1;pointer-events:auto}
.search-panel{background:var(--surface);width:min(680px,92vw);margin-top:14vh;border-radius:8px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:translateY(-12px);transition:transform .25s}
.search-ov.open .search-panel{transform:translateY(0)}
.search-row{display:flex;gap:12px;align-items:center;border-bottom:2px solid var(--ink);padding-bottom:12px}
.search-row input{flex:1;border:0;font-family:var(--disp);font-weight:600;font-size:22px;outline:none;color:var(--ink)}
.search-row input::placeholder{color:#c3bdb0}
.search-close{background:none;border:0;font-size:22px;cursor:pointer;color:var(--muted)}
.search-hint{font-size:12px;color:var(--faint);margin:16px 0 8px;font-family:var(--disp);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.search-chips{display:flex;flex-wrap:wrap;gap:8px}
.schip{font-family:var(--body);font-size:13px;background:var(--gold-soft);color:var(--gold-deep);border:1px solid #f0dfb6;border-radius:999px;padding:7px 14px;cursor:pointer;transition:background .2s}
.schip:hover{background:var(--gold);color:#1a1407}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){
  .nav a{padding:9px 9px;font-size:13.5px}
  .herogrid{grid-template-columns:1fr 1fr;gap:26px}
  .col:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px}
  .midgrid{grid-template-columns:1fr}
  .oplist{grid-template-columns:1fr 1fr 1fr}
  .popbox{position:static}
}
@media(max-width:820px){
  .util__links a:not(.util__sub){display:none}
  .nav{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line);padding:8px 16px 14px;box-shadow:0 20px 40px rgba(0,0,0,.08)}
  .nav.open{display:flex}
  .nav a{padding:12px 6px;border-bottom:1px solid var(--line-2);border-radius:0}
  .nav a.is-active::after{display:none}
  #burger{display:grid}
  .sub-btn,.live-btn span.lbl{display:none}
  .herogrid{grid-template-columns:1fr}
  .col{border-left:0;padding-left:0}
  .col:nth-child(2),.col:nth-child(3){border-top:1px solid var(--line);padding-top:22px}
  .col:nth-child(3){grid-template-columns:1fr}
  .topic__grid,.sport__grid{grid-template-columns:1fr;gap:22px}
  .topic__cards{grid-template-columns:1fr 1fr}
  .oplist{grid-template-columns:1fr}
  .arkib__item{grid-template-columns:1fr;gap:5px}
  .arkib__date{text-align:left}
  .foot__top{grid-template-columns:1fr 1fr}
  .breakbar__title{font-size:23px}
}
@media(max-width:520px){.topic__cards{grid-template-columns:1fr}.foot__top{grid-template-columns:1fr}}

/* ---------- DARK THEME ---------- */
[data-theme="dark"]{
  --ink:#f4f0e7; --ink-2:#d6d0c2; --muted:#a39d8f; --faint:#827c6f;
  --line:#302d25; --line-2:#26241d;
  --bg:#141310; --bg-warm:#1b1914; --bg-dark:#0e0d0a;
  --surface:#1f1d16; --mast-bg:rgba(20,19,16,.95);
  --gold-deep:#f0b441; --green:#aa720e; --green-deep:#855809; --green-soft:#2a2110;
  --gold-soft:#2c2517;
  --ph-a:#262319; --ph-b:#221f17; --ph-label:#8a836f; --ph-chip:rgba(0,0,0,.35); --ph-chip-line:#3a362b;
}
[data-theme="dark"] .ph::after{background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.25))}
[data-theme="dark"] .sub-btn{background:var(--gold-deep);color:#1a1407}
[data-theme="dark"] .sub-btn:hover{background:var(--gold)}
[data-theme="dark"] .sechdr{border-top-color:var(--ink)}
[data-theme="dark"] .nl input{background:#14130f;border-color:#34312a}
[data-theme="dark"] .schip{background:var(--gold-soft);border-color:#4a4231;color:var(--gold)}
[data-theme="dark"] .vcard__media .ph{background:repeating-linear-gradient(135deg,#1c1a14 0 11px,#171510 11px 22px)}

/* theme toggle button */
.theme-btn{position:relative}
.theme-btn .sun{display:none}
[data-theme="dark"] .theme-btn .sun{display:block}
[data-theme="dark"] .theme-btn .moon{display:none}

/* ---------- ARTICLE PAGE ---------- */
.artwrap{max-width:1120px;margin:0 auto;padding:0 24px}
.art{padding:30px 0 10px}
.crumb{font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.04em;color:var(--muted);display:flex;gap:8px;align-items:center;margin-bottom:18px}
.crumb a{color:var(--gold-deep)}.crumb a:hover{text-decoration:underline}
.crumb span{color:var(--faint)}
.art__head{max-width:780px}
.art__kicker{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep)}
.art__title{font-family:var(--disp);font-weight:900;font-size:40px;line-height:1.08;letter-spacing:-.02em;margin:10px 0 14px;text-wrap:balance}
.art__stand{font-size:19px;line-height:1.5;color:var(--ink-2);margin-bottom:20px;font-weight:500}
.art__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.art__author{display:flex;align-items:center;gap:11px}
.art__avatar{width:42px;height:42px;border-radius:50%;background:repeating-linear-gradient(135deg,var(--ph-a) 0 8px,var(--ph-b) 8px 16px);flex-shrink:0;border:1px solid var(--line)}
.art__by{font-family:var(--disp);font-weight:700;font-size:14px}
.art__by span{display:block;font-family:var(--body);font-weight:400;font-size:12px;color:var(--faint)}
.art__share{margin-left:auto;display:flex;gap:8px}
.art__share button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s}
.art__share button:hover{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-deep)}
.art__hero{margin:26px 0 8px}
.art__cap{font-size:12.5px;color:var(--faint);padding:9px 2px;border-bottom:1px solid var(--line-2)}
.prose{max-width:720px;margin:0 auto;padding:18px 0 10px}
.prose p{font-size:18px;line-height:1.72;color:var(--ink);margin:0 0 22px}
.prose p.lead-cap::first-letter{font-family:var(--disp);font-weight:900;font-size:62px;float:left;line-height:.78;padding:6px 12px 0 0;color:var(--gold-deep)}
.prose h2{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.01em;margin:34px 0 12px}
.prose blockquote{margin:30px 0;padding:6px 0 6px 24px;border-left:4px solid var(--gold);font-family:var(--disp);font-weight:600;font-size:22px;line-height:1.32;color:var(--ink)}
.prose figure{margin:30px 0}
.prose figcaption{font-size:12.5px;color:var(--faint);padding-top:8px}
.prose .tags{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 6px;padding-top:22px;border-top:1px solid var(--line)}
.prose .tags a{font-family:var(--disp);font-weight:600;font-size:12.5px;background:var(--bg-warm);border:1px solid var(--line);color:var(--ink-2);padding:7px 13px;border-radius:999px}
.prose .tags a:hover{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-deep)}
.related{border-top:3px solid var(--ink);padding:38px 0 50px;margin-top:30px}
.related h3{font-family:var(--disp);font-weight:800;font-size:22px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.related h3 .mark{width:7px;height:22px;background:var(--gold);display:inline-block}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

/* ---------- TOPIC PAGE ---------- */
.topichero{background:var(--bg-warm);border-bottom:1px solid var(--line);padding:40px 0 34px;margin-bottom:6px}
.topichero .wrap{display:flex;flex-direction:column;gap:10px}
.topichero__ey{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.topichero h1{font-family:var(--disp);font-weight:900;font-size:48px;letter-spacing:-.02em;line-height:1}
.topichero p{max-width:60ch;color:var(--muted);font-size:16px}
.topicpage{padding:30px 0 50px}
.tp__lead{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:34px;padding-bottom:30px;border-bottom:1px solid var(--line);margin-bottom:30px}
.tp__more-list{list-style:none}
.tp__more-list li{padding:13px 0;border-bottom:1px solid var(--line-2)}
.tp__more-list a{font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.26}
.tp__more-list a:hover{color:var(--gold-deep)}
.tp__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}

@media(max-width:860px){
  .art__title{font-size:30px}
  .related__grid{grid-template-columns:1fr}
  .tp__lead{grid-template-columns:1fr;gap:22px}
  .tp__grid{grid-template-columns:1fr 1fr}
  .topichero h1{font-size:34px}
}
@media(max-width:520px){.tp__grid{grid-template-columns:1fr}}

/* ---------- SEARCH RESULTS PAGE ---------- */
.searchhero{background:var(--bg-warm);border-bottom:1px solid var(--line);padding:38px 0 34px}
.searchhero .topichero__ey{margin-bottom:4px}
.searchhero h1{font-family:var(--disp);font-weight:900;font-size:34px;letter-spacing:-.02em;margin-bottom:16px}
.searchform{display:flex;border:2px solid var(--ink);border-radius:8px;overflow:hidden;max-width:680px;background:var(--surface)}
.searchform input{flex:1;border:0;padding:14px 18px;font-family:var(--disp);font-weight:600;font-size:18px;background:transparent;color:var(--ink);outline:none}
.searchform input::placeholder{color:var(--faint)}
.searchform button{border:0;background:var(--gold);color:#231a07;font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:.02em;padding:0 26px;cursor:pointer;transition:background .2s}
.searchform button:hover{background:var(--gold-deep)}
.searchpage{padding:26px 0 56px}
.searchmeta{font-size:14.5px;color:var(--muted);margin:0 0 14px}
.searchmeta b{color:var(--ink);font-weight:700}
.sfilters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.sfilter{font-family:var(--disp);font-weight:600;font-size:12.5px;background:var(--bg-warm);border:1px solid var(--line);color:var(--ink-2);padding:7px 14px;border-radius:999px;cursor:pointer;transition:all .2s}
.sfilter:hover{border-color:var(--gold)}
.sfilter.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.sresults{list-style:none;border-top:1px solid var(--line)}
.sresult{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center}
.sresult__thumb .ph{border-radius:4px}
.sresult__kicker{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.sresult__title{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.22;margin-top:6px;display:block}
.sresult__title:hover{color:var(--gold-deep)}
.sresult mark{background:var(--gold-soft);color:var(--ink);padding:0 2px;border-radius:2px}
.snoresult{padding:46px 0;text-align:center}
.snoresult h3{font-family:var(--disp);font-weight:800;font-size:22px;color:var(--ink);margin-bottom:8px}
.snoresult p{color:var(--muted)}
@media(max-width:640px){.sresult{grid-template-columns:1fr}.sresult__thumb{max-width:240px}}

/* ========================================================================
   HOMEPAGE V2 — scoped layout variation (no live feed, no video strip)
   ======================================================================== */
.v2 main{--gutter:48px}

/* ---- HERO V2 ---- */
.herov2-wrap{padding:36px 0 14px}
.herov2{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:46px}

/* featured story (bigger now that the live feed is gone) */
.feat__media{display:block;position:relative}
.feat__media .ph{aspect-ratio:16/8.4}
.feat__tag{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.12em;padding:6px 12px;border-radius:4px;z-index:2}
.feat__body{padding:20px 2px 0}
.feat__kicker{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:9px}
.feat__title{font-family:var(--disp);font-weight:900;font-size:40px;line-height:1.06;letter-spacing:-.022em;text-wrap:balance}
.feat__title a:hover{color:var(--gold-deep)}
.feat__stand{color:var(--ink-2);font-size:17px;line-height:1.55;margin-top:14px;max-width:60ch}
.feat__sub{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.subcard__media{display:block;margin-bottom:11px}
.subcard__kicker{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:5px}
.subcard__title{font-family:var(--disp);font-weight:700;font-size:16.5px;line-height:1.22}
.subcard__title a:hover{color:var(--gold-deep)}

/* sticky sidebar */
.heroside{align-self:start;position:sticky;top:90px}
.sideblock+.sideblock{margin-top:26px}
.sidehdr{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:9px;margin-bottom:6px;display:flex;align-items:center;gap:9px}
.sidehdr .dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}

/* ---- TOPIC SECTION SPACING + EYEBROW HEADERS ---- */
.v2 .topics{padding:14px 0 0}
.v2 .topic{padding:50px 0 54px;border-bottom:1px solid var(--line)}
.sechdr--num{align-items:center}
.sechdr--num .ix{font-family:var(--mono);font-size:13px;color:var(--faint);letter-spacing:.05em}

/* ---- KESIHATAN: river / horizontal list ---- */
.river__lead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:34px;align-items:center;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:6px}
.river__lead .ph{aspect-ratio:16/10}
.river__ltitle{font-family:var(--disp);font-weight:800;font-size:28px;line-height:1.12;letter-spacing:-.015em;margin-bottom:12px;text-wrap:balance}
.river__ltitle a:hover{color:var(--gold-deep)}
.river__lstand{color:var(--muted);font-size:15.5px;line-height:1.55}
.river__list{list-style:none}
.river__list li{display:grid;grid-template-columns:230px 1fr;gap:26px;padding:22px 0;border-bottom:1px solid var(--line-2);align-items:center}
.river__list .ph{aspect-ratio:16/10}
.river__rtitle{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.2;margin-bottom:7px;display:block}
.river__rtitle:hover{color:var(--gold-deep)}
.river__rex{color:var(--muted);font-size:14px;line-height:1.5;max-width:62ch}

/* ---- PENDIDIKAN: magazine (wide lead + 3-up) ---- */
.mag__lead{position:relative;display:block;margin-bottom:30px}
.mag__lead .ph{aspect-ratio:21/8}
.mag__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:34px 36px;background:linear-gradient(0deg,rgba(16,15,11,.86),rgba(16,15,11,.18) 62%,transparent)}
.mag__okicker{font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.mag__otitle{font-family:var(--disp);font-weight:800;font-size:32px;line-height:1.08;letter-spacing:-.018em;color:#fff;max-width:20ch;text-wrap:balance}
.mag__row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.mag__card .ph{aspect-ratio:16/10}
.mag__ctitle{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.2;margin:12px 0 7px}
.mag__ctitle a:hover{color:var(--gold-deep)}
.mag__cex{color:var(--muted);font-size:14px;line-height:1.5}

/* ---- POLITIK: spotlight overlay + numbered list ---- */
.spot{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px;align-items:stretch}
.spot__hero{position:relative;display:block;align-self:start}
.spot__hero .ph{aspect-ratio:4/3}
.spot__overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;background:linear-gradient(0deg,rgba(16,15,11,.9),rgba(16,15,11,.2) 58%,transparent)}
.spot__kicker{font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.spot__title{font-family:var(--disp);font-weight:800;font-size:30px;line-height:1.1;letter-spacing:-.018em;color:#fff;text-wrap:balance}
.spot__stand{color:#d8d2c4;font-size:15px;line-height:1.5;margin-top:12px;max-width:48ch}
.spot__list{list-style:none;counter-reset:s;display:flex;flex-direction:column;justify-content:center}
.spot__list li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--line-2);align-items:start}
.spot__list .n{font-family:var(--disp);font-weight:800;font-size:22px;color:var(--gold);line-height:1}
.spot__list a{font-family:var(--disp);font-weight:600;font-size:16.5px;line-height:1.26}
.spot__list a:hover{color:var(--gold-deep)}

/* ---- NEWSLETTER HORIZONTAL BANNER (moved up) ---- */
.nlband{margin:8px 0 0;background:var(--ink);color:#fff;border-radius:12px;border-top:4px solid var(--gold);padding:34px 42px;display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:center}
.nlband__eyebrow{font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.nlband h3{font-family:var(--disp);font-weight:800;font-size:27px;line-height:1.1;letter-spacing:-.01em;margin-bottom:8px}
.nlband p{color:#c4bfb2;font-size:14.5px;max-width:46ch}
.nlband__form{display:flex;flex-direction:column;gap:9px}
.nlband__row{display:flex;gap:10px}
.nlband__row input{flex:1;font-family:var(--body);font-size:15px;padding:14px 16px;border-radius:7px;border:1px solid #3a372d;background:#1d1b15;color:#fff}
.nlband__row input::placeholder{color:#8b8576}
.nlband__row input:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.nlband__row button{font-family:var(--disp);font-weight:800;font-size:14.5px;background:var(--gold);color:#231a07;border:0;padding:0 26px;border-radius:7px;cursor:pointer;white-space:nowrap;transition:background .2s}
.nlband__row button:hover{background:#f2b23e}
.nlband__msg{font-size:12px;min-height:14px;color:#f3b1a0}
.nlband__fine{font-size:11px;color:#8b8576}
.nlband__done{display:flex;gap:13px;align-items:center}
.nlband__check{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:var(--green);position:relative}
.nlband__check::after{content:"";position:absolute;left:12px;top:9px;width:8px;height:15px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(42deg)}

/* ---- PENDAPAT V2 (full width, soft band) ---- */
.v2 .midzone{padding:54px 0}
.v2 .midgrid{display:block}
.v2 .opbig{grid-template-columns:240px 1fr}
.v2 .oplist{grid-template-columns:repeat(3,1fr)}

/* ---- responsive ---- */
@media(max-width:1080px){
  .herov2{grid-template-columns:1fr;gap:36px}
  .heroside{position:static}
  .heroside .sideblock{display:none}
  .heroside .sideblock--keep{display:block}
  .spot{grid-template-columns:1fr;gap:26px}
  .mag__row{gap:24px}
}
@media(max-width:820px){
  .feat__title{font-size:31px}
  .feat__sub{grid-template-columns:1fr;gap:20px}
  .river__lead{grid-template-columns:1fr;gap:18px}
  .river__list li{grid-template-columns:130px 1fr;gap:16px}
  .river__rex{display:none}
  .mag__row{grid-template-columns:1fr;gap:22px}
  .mag__otitle{font-size:23px}
  .nlband{grid-template-columns:1fr;gap:20px;padding:28px 24px}
  .nlband__row{flex-direction:column}
  .nlband__row button{padding:13px}
}