/* =====================================================================
   FOCUS HILLSBORO SKIN
   The design layer for Focus Hillsboro. It sits after every GameEmpress
   rule above and only restyles: no selector, id, class or data attribute
   that script.js or functions.php depend on is renamed or removed.
   Day mode = the combined design (dark header, green lead block, "The
   Wire", rounded cards, yellow newsletter band). Night mode follows the
   reader's system setting, like the original theme, and turns the whole
   site into the Night Desk look (near-black, yellow accent).
   ===================================================================== */

:root{
  --bg:#f3f4f1;
  --surface:#ffffff;
  --surface-2:#eef0ed;
  --line:#e1e5e0;
  --text:#10231b;
  --muted:#4f5e57;
  --pink:#0f3d2e;          /* accent: hovers, focus, links */
  --pink-2:#f26b3a;
  --pink-text:#0f6b4a;     /* link text, 5.9:1 on white */
  --green:#fde2d6;         /* pill background */
  --green-ink:#7a2a0a;     /* pill text, 7:1 on the pill */
  --green-text:#0f6b4a;
  --button-bg:#0c0e11;
  --button-text:#ffffff;
  --input-bg:#ffffff;
  --input-border:#10231b;
  --fh-ink:#0c0e11;        /* header, wire, footer */
  --fh-ink-2:#1c2026;
  --fh-ink-line:#2a2e35;
  --fh-ink-text:#f4f5f6;
  --fh-ink-muted:#a3a9b2;
  --fh-yellow:#ffd23f;
  --fh-forest:#0f3d2e;
  --fh-forest-text:#d6e9df;
  --fh-card-a:#fde2d6;
  --fh-card-b:#dceeff;
  --fh-card-c:#ddf3e6;
  --fh-radius:20px;
  --fh-radius-lg:28px;
  --display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ui:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fh-poster:'Anton','Bricolage Grotesque',Impact,sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c0e11;
    --surface:#15181d;
    --surface-2:#1c2026;
    --line:#2a2e35;
    --text:#f4f5f6;
    --muted:#a3a9b2;
    --pink:#ffd23f;
    --pink-2:#ffd23f;
    --pink-text:#ffd23f;
    --green:#2b2410;
    --green-ink:#ffd23f;
    --green-text:#ffd23f;
    --button-bg:#ffd23f;
    --button-text:#0c0e11;
    --input-bg:#15181d;
    --input-border:#3a3f47;
    --fh-forest:#15181d;
    --fh-forest-text:#c5c9cf;
    --fh-card-a:#15181d;
    --fh-card-b:#15181d;
    --fh-card-c:#15181d;
  }
}

body{background:var(--bg);font-family:var(--ui)}
a:focus-visible,button:focus-visible,input:focus-visible{outline-color:var(--pink)}

/* ---------- Header: always the dark bar ---------- */
header.site{background:var(--fh-ink);border-bottom:1px solid var(--fh-ink-line);color:var(--fh-ink-text)}
.topbar{height:72px;gap:24px}
.wordmark{font-family:var(--fh-poster);font-weight:400;font-size:clamp(26px,3.4vw,36px);letter-spacing:.04em;
  text-transform:uppercase;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fh-ink-text)}
.wordmark::first-letter{color:var(--fh-ink-text)}
.site-logo img{max-height:42px}
nav.main{gap:6px;margin-left:8px}
nav.main a,nav.main .main-menu a{font-family:var(--ui);font-weight:600;font-size:14px;letter-spacing:0;color:var(--fh-ink-text);
  display:inline-block;padding:9px 14px;border-radius:999px;background:var(--fh-ink-2)}
nav.main a:hover,nav.main .current-menu-item > a,nav.main a[aria-current="page"]{background:var(--fh-yellow);color:var(--fh-ink)}
nav.main .main-menu{gap:6px}
nav.main .main-menu li + li::before,.nav-div{display:none}
.search-toggle{color:var(--fh-ink-text)}
.search-toggle:hover,.search-toggle[aria-expanded="true"]{color:var(--fh-yellow)}
.burger span{background:var(--fh-yellow)}
.header-search{background:var(--fh-ink);border-bottom:1px solid var(--fh-ink-line)}
.header-search .search-form-input{background:var(--fh-ink-2);border-color:var(--fh-ink-line);color:var(--fh-ink-text);border-radius:999px}
.header-search .search-form-submit{background:var(--fh-yellow);color:var(--fh-ink);border-radius:999px}
.skip-link{background:var(--fh-yellow);color:var(--fh-ink)}

/* ---------- Pills and stamps ---------- */
.pill{font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.02em;text-transform:none;
  background:var(--green);color:var(--green-ink);padding:6px 12px;border-radius:999px}
.stamp{font-family:var(--ui);font-weight:700;letter-spacing:.06em;color:var(--pink-text)}
.byline{font-family:var(--ui)}

/* ---------- Lead story: the green block ---------- */
.hero-grid{gap:22px;padding-top:24px;grid-template-columns:minmax(0,1fr) 360px}
.lead{padding:0;min-height:0;background:var(--fh-forest);border-radius:var(--fh-radius-lg);clip-path:none;color:#fff}
.lead-inner{clip-path:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;
  padding:clamp(20px,3vw,34px);overflow:visible}
.lead .ph{position:relative;inset:auto;order:2;border-radius:var(--fh-radius);aspect-ratio:4/3;min-height:0;width:100%;height:auto}
.lead .ph img{width:100%;height:100%;object-fit:cover}
.lead .cap{order:1;background:none;padding:0;color:#fff}
.lead .cap .pill{background:#f26b3a;color:#10231b}
.lead h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,46px);line-height:1.04;letter-spacing:-.02em;margin:16px 0 14px}
.lead h1 a{color:#fff}
.lead h1 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.lead .byline,.lead .byline b{color:var(--fh-forest-text)}

/* ---------- The Wire (latest rail) ---------- */
.latest-rail{background:var(--fh-ink);color:var(--fh-ink-text);border-radius:var(--fh-radius-lg);padding:24px;align-self:stretch}
.latest-rail h2{font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;margin:0 0 6px;color:var(--fh-ink-text)}
.wire-dot{width:10px;height:10px;border-radius:50%;background:var(--fh-yellow);display:inline-block}
.rail-item{grid-template-columns:1fr 84px;gap:14px;padding:14px 0;border-bottom:1px solid var(--fh-ink-line)}
.rail-item:last-child{border-bottom:none;padding-bottom:0}
.rail-item .stamp{color:var(--fh-yellow)}
.rail-item h3{font-family:var(--ui);font-weight:600;font-size:16px;line-height:1.35;margin:4px 0 6px}
.rail-item h3 a{color:var(--fh-ink-text)}
.rail-item h3 a:hover{color:var(--fh-yellow)}
.rail-item .byline{color:var(--fh-ink-muted);font-size:12px}
.rail-item .ph{height:62px;border-radius:12px}

/* ---------- Featured card row: rounded pastel cards ---------- */
.cardrow{gap:18px;padding-top:22px}
.gcard{padding:12px 12px 4px;clip-path:none;border-radius:24px;background:var(--fh-card-a)}
.gcard:nth-child(3n+2){background:var(--fh-card-b)}
.gcard:nth-child(3n+3){background:var(--fh-card-c)}
.gcard-inner{background:transparent;clip-path:none}
.gcard .ph{height:auto;aspect-ratio:16/10;border-radius:16px}
.gcard .body{padding:14px 8px 18px}
.gcard h3{font-size:22px;line-height:1.15;letter-spacing:-.01em;margin:10px 0 0}
.gcard:hover h3{color:inherit;text-decoration:underline;text-underline-offset:3px}
.gcard .pill{background:var(--surface);color:var(--text)}

/* ---------- Feed: white cards ---------- */
.feed-grid{gap:28px;padding-top:30px;grid-template-columns:minmax(0,1fr) 340px}
.sec-title{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.02em}
#gameempress-feed{display:flex;flex-direction:column;gap:14px}
.feed-item{background:var(--surface);border:0;border-radius:var(--fh-radius);padding:16px;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:center}
.feed-item:first-of-type{padding-top:16px}
.feed-item .ph{height:auto;aspect-ratio:3/2;border-radius:14px}
.feed-item h2,.feed-item h3{font-size:21px;line-height:1.2;letter-spacing:-.01em}
.feed-item h2 a:hover,.feed-item h3 a:hover{color:var(--pink-text)}
.feed-item .dek{font-family:var(--ui);font-size:15px}
.load-more{font-family:var(--ui);font-weight:700;text-transform:none;letter-spacing:0;font-size:15px;border-radius:999px;padding:14px 30px}

/* ---------- Sidebar ---------- */
.feed-grid > aside{display:flex;flex-direction:column;gap:16px}
.rail-title{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.01em;text-transform:none;color:var(--text);margin:0 0 10px}
.feed-grid > aside > .rail-title{margin:4px 0 -4px}
.trend{background:var(--surface);border:0;border-radius:16px;padding:12px;grid-template-columns:84px minmax(0,1fr)}
.trend .ph{height:58px;border-radius:10px}
.trend h4{font-family:var(--ui);font-weight:700;font-size:15px;line-height:1.3}
.trend:hover h4{color:var(--pink-text)}
.popbox{margin-top:0;background:var(--fh-ink);color:var(--fh-ink-text);border-radius:var(--fh-radius)}
.popbox .rail-title{color:var(--fh-ink-text)}
.pop{border-bottom-color:var(--fh-ink-line)}
.pop .n{font-family:var(--fh-poster);font-weight:400;font-size:24px;color:var(--fh-yellow)}
.pop p{font-family:var(--ui);font-weight:600;color:var(--fh-ink-text)}
.pop:hover p{color:var(--fh-yellow)}

/* ---------- Shorts (only when a Shorts category exists) ---------- */
.short{border-radius:18px}
.short h3{font-family:var(--ui);font-weight:700}

/* ---------- Newsletter: the yellow band ---------- */
.news{margin-top:40px;background:var(--fh-yellow);border-radius:var(--fh-radius-lg);padding:clamp(24px,4vw,44px);color:#0c0e11}
.news .kick{font-family:var(--fh-poster);font-weight:400;font-size:clamp(28px,3.4vw,42px);letter-spacing:.02em;text-transform:uppercase;color:#0c0e11}
.news h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,32px);line-height:1.1;letter-spacing:-.01em;color:#0c0e11}
.news p{color:#3a2f00;font-size:17px}
.news input{background:#ffffff;border:2px solid #0c0e11;border-radius:999px;padding:14px 18px;color:#0c0e11}
.news .sub{background:#0c0e11;color:#ffffff;border-radius:999px;font-family:var(--ui);font-weight:700;text-transform:none;padding:0 26px}
.news-form-status{color:#3a2f00}
.news-form-status.is-error{color:#7a1d0a}
.news .art{color:#0c0e11;opacity:.85}
.news .art svg{width:150px;height:150px}

/* ---------- Footer: always dark ---------- */
footer.site{background:var(--fh-ink);border-top:0;color:var(--fh-ink-muted);margin-top:56px}
.foot-word{font-family:var(--fh-poster);font-weight:400;font-size:32px;letter-spacing:.04em;text-transform:uppercase;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fh-ink-text)}
.foot-tagline{color:var(--fh-ink-muted)}
.foot .foot-title{font-family:var(--ui);color:var(--fh-ink-text);letter-spacing:.14em}
.foot a{color:var(--fh-ink-muted)}
.foot a:hover{color:var(--fh-yellow)}
footer.site .copy{color:var(--fh-ink-muted);border-top-color:var(--fh-ink-line)}

/* ---------- Article page ---------- */
.article-head h1,.article h1{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.08}
.article .content{font-family:var(--ui);font-size:18px;line-height:1.75}
.article .content h2,.article .content h3{font-family:var(--display);letter-spacing:-.01em}
.article .content table{border-collapse:collapse;width:100%;font-size:16px}
.article .content th,.article .content td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.article .content th{background:var(--surface-2)}
.article .content blockquote{border-left:0;border-radius:var(--fh-radius);background:var(--surface);padding:18px 22px;margin:0 0 22px}
.article .content figcaption,.article .content .has-small-font-size{font-size:14px;color:var(--muted)}
.article .lead-media{border-radius:var(--fh-radius)}
.article-side-section{background:var(--surface);border-radius:var(--fh-radius);padding:18px}
.article-side-title{font-family:var(--display);font-weight:800}

/* ---------- Category and archive pages ---------- */
.ge-cat-hero{border-radius:var(--fh-radius-lg)}
.ge-cat-title{font-family:var(--display);font-weight:800;letter-spacing:-.02em}
.ge-cat-card{border-radius:var(--fh-radius);overflow:hidden}
.pagination a,.pagination span{border-radius:999px;font-family:var(--ui);font-weight:700}

/* ---------- Drawer ---------- */
.drawer{background:var(--bg)}

/* ---------- Small screens ---------- */
@media (max-width:960px){
  .hero-grid,.feed-grid{grid-template-columns:1fr}
  .lead-inner{grid-template-columns:1fr}
  .lead .ph{order:0}
  .lead h1{font-size:clamp(26px,7vw,34px)}
  .feed-item{grid-template-columns:110px minmax(0,1fr);gap:14px;padding:12px}
  .feed-item h2,.feed-item h3{font-size:18px}
}
@media (max-width:620px){
  .cardrow{grid-template-columns:1fr}
  .news .art{display:none}
}

/* ---------- Active section in the always-dark header ----------
   style.css colours the current section with --pink-text, which is dark
   green on this skin and unreadable on the #0c0e11 header. */
nav.main a.is-current-section,
nav.main .is-current-section > a,
nav.main a[aria-current]{background:var(--fh-yellow);color:var(--fh-ink)}

/* ---------- Author box: newsroom card instead of the purple gradient ---------- */
.ge-author{
  --ink:var(--fh-ink);--ink-2:var(--fh-ink-2);--ink-line:var(--fh-ink-line);--ink-text:var(--fh-ink-text);--ink-muted:var(--fh-ink-muted);
  background:var(--fh-ink);border-radius:var(--fh-radius)
}
.ge-author-ribbon{display:none}
.ge-author-avatar{background:var(--fh-yellow);border-radius:50%}
.ge-author-avatar img{border-radius:50%}
.ge-author-kicker{color:var(--fh-yellow);font-family:'Figtree',sans-serif;font-weight:700}
.ge-author-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800}
.ge-author-name-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fh-ink-text)}
.ge-author-name a:hover .ge-author-name-text{text-decoration-color:var(--fh-yellow)}
.ge-author-dot{background:var(--fh-yellow)}
.ge-author-more{background:var(--fh-yellow);color:var(--fh-ink);border-color:var(--fh-yellow);font-weight:700}
.ge-author-more:hover{background:#fff;border-color:#fff;color:var(--fh-ink)}

/* ---------- Category top stories: news cards, no gaming frame ---------- */
.ge-cat-featured{align-items:stretch}
.ge-cat-card{background:var(--surface);border-radius:var(--fh-radius);padding:10px 10px 22px}
.ge-cat-card.is-second{margin-top:0}
.ge-cat-card-media,.ge-cat-card.is-second .ge-cat-card-media{padding:0;background:none;clip-path:none;border-radius:calc(var(--fh-radius) - 6px);overflow:hidden}
.ge-cat-card-media .ph{border-radius:0;clip-path:none}
.ge-cat-kicker,.ge-cat-card-title,.ge-cat-card-meta{margin-left:12px;margin-right:12px}
.ge-cat-kicker{display:inline-block;margin-top:16px;padding:4px 10px;border-radius:999px;background:var(--green);color:var(--green-ink);font-family:var(--ui);font-weight:700;font-size:12px;letter-spacing:.04em}
.ge-cat-card-title{font-family:var(--display);font-weight:800}
.ge-cat-card-title a{text-decoration:none}
.ge-cat-card-title a:hover,.ge-cat-card-title a:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;color:inherit}
.ge-cat-card-author{font-family:var(--ui);letter-spacing:0;text-transform:none}
.ge-cat-card-dot{background:var(--fh-yellow)}