/*
Theme Name: Focus Hillsboro
Theme URI: https://focushillsboro.com
Author: Flaunt Weekly LLC
Author URI: https://focushillsboro.com
Description: Local news theme for Focus Hillsboro. Built on the GameEmpress 1.28.20 code base with the same features (ads controls, schema, live search, load more, likes, summary, share tools, newsletter) and a news design with system day and night modes.
Version: 1.0.1
Requires at least: 6.3
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gameempress
*/

:root{
    --bg:#ffffff;
    --surface:#f4f4f5;
    --surface-2:#ececee;
    --line:#e4e4e7;
    --text:#131316;
    --muted:#52525b;
    --pink:#ff1e8e;
    --pink-2:#ff5a3c;
    --pink-text:#cc1a6f; /* darker pink that meets WCAG AA (~5.3:1) for text on light backgrounds */
    --green:#a6f04b;
    --green-ink:#0c1a02;
    --green-text:#4d7c0f;
    --button-bg:#131316;
    --button-text:#ffffff;
    --newsletter-a:#fdeaf3;
    --newsletter-b:#fdece7;
    --input-bg:#ffffff;
    --input-border:#e4b9d0;
    --cut:20px;
    --display:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --serif:ui-serif,Georgia,Cambria,'Times New Roman',serif;
    --ui:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;color-scheme:light dark}
  body{
    margin:0;background:var(--bg);color:var(--text);
    font-family:var(--ui);-webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none}
  a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
  img{max-width:100%;display:block}
  .wrap{max-width:1320px;margin:0 auto;padding:0 28px}

  /* ---------- Header ---------- */
  header.site{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
  .topbar{display:flex;align-items:center;gap:34px;height:74px}
  .wordmark{font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:-.02em;
    background:linear-gradient(92deg,var(--pink),#c026d3 55%,#7c3aed);
    -webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
  nav.main{display:flex;align-items:center;gap:26px;margin-left:24px}
  nav.main a{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.01em}
  nav.main a:hover{color:var(--pink)}
  .nav-div{width:1px;height:20px;background:var(--line)}
  nav.main .main-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px}
  nav.main .main-menu li{position:relative}
  nav.main .main-menu li + li::before{content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);width:1px;height:20px;background:var(--line)}
  a.pill{text-decoration:none}
  a.pill:hover{filter:brightness(0.95)}
  .skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--pink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-family:var(--ui);font-weight:700;text-decoration:none}
  .skip-link:focus{left:0}
  .topbar .right{margin-left:auto;display:flex;align-items:center;gap:20px}
  .burger{width:30px;height:22px;display:flex;flex-direction:column;justify-content:space-between;background:none;border:none;cursor:pointer}
  .burger span{height:3px;background:var(--pink);border-radius:2px}
  .site-logo{display:flex;align-items:center}
  .site-logo img{display:block;max-height:44px;width:auto}

  /* ---------- Header search (desktop entry point; drawer keeps its own copy for mobile) ---------- */
  .search-toggle{background:none;border:none;cursor:pointer;color:var(--text);display:flex;padding:6px}
  .search-toggle svg{width:22px;height:22px}
  .search-toggle:hover,.search-toggle[aria-expanded="true"]{color:var(--pink)}
  .header-search{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);
    padding:18px 0;box-shadow:0 16px 28px -18px rgba(0,0,0,.25)}
  .header-search[hidden]{display:none}
  .search-form{display:flex;align-items:center;gap:10px}
  .search-form-input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;
    padding:12px 16px;font-size:16px;font-family:var(--ui);color:var(--text)}
  .search-form-input::placeholder{color:var(--muted)}
  .search-form-input:focus{outline:none;border-color:var(--pink)}
  .search-form-submit{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    background:var(--button-bg);color:var(--button-text);border:none;border-radius:10px;cursor:pointer}
  .search-form-submit svg{width:20px;height:20px}
  .search-form-submit:hover{filter:brightness(1.15)}

  /* ---------- Eyebrows / pills ---------- */
  .pill{display:inline-block;font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.06em;
    text-transform:uppercase;background:var(--green);color:var(--green-ink);padding:6px 11px;border-radius:3px}
  .stamp{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-text)}
  .stamp.grey{color:var(--muted)}
  .byline{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}
  .byline b{color:var(--text);font-weight:700}

  /* ---------- Media placeholders ---------- */
  .ph{position:relative;overflow:hidden;background:#222}
  .g1{background:linear-gradient(135deg,#1e3a8a,#0ea5e9 60%,#111)}
  .g2{background:linear-gradient(135deg,#7f1d1d,#ef4444 55%,#b91c1c)}
  .g3{background:linear-gradient(135deg,#312e81,#a21caf 60%,#db2777)}
  .g4{background:linear-gradient(135deg,#064e3b,#10b981 60%,#052e2b)}
  .g5{background:linear-gradient(135deg,#3f3f46,#71717a 55%,#18181b)}
  .g6{background:linear-gradient(135deg,#78350f,#f59e0b 60%,#451a03)}
  .g7{background:linear-gradient(135deg,#500724,#ec4899 60%,#2e1065)}
  .g8{background:linear-gradient(135deg,#0c4a6e,#38bdf8 55%,#082f49)}

  /* ---------- Hero ---------- */
  .hero-grid{display:grid;grid-template-columns:1fr 380px;gap:34px;padding-top:34px}
  .lead{padding:3px;min-height:560px;display:flex;
    background:linear-gradient(135deg,var(--pink),var(--pink-2));
    clip-path:polygon(0 0,calc(100% - 36px) 0,100% 36px,100% 100%,36px 100%,0 calc(100% - 36px))}
  .lead-inner{position:relative;flex:1;display:flex;align-items:flex-end;overflow:hidden;
    clip-path:polygon(0 0,calc(100% - 36px) 0,100% 36px,100% 100%,36px 100%,0 calc(100% - 36px))}
  .lead .ph{position:absolute;inset:0}
  .lead .cap{position:relative;z-index:1;padding:34px;background:linear-gradient(0deg,#000000e6,#00000000);width:100%;color:#fff}
  .lead h1{font-family:var(--display);font-weight:900;font-size:44px;line-height:1.02;margin:0 0 14px;letter-spacing:-.01em}
  .lead .byline,.lead .byline b{color:#f0f0f0}
  .latest-rail h2,.sec-title{font-family:var(--display);font-weight:900;font-size:34px;margin:0 0 20px;letter-spacing:-.01em}
  .rail-item{display:grid;grid-template-columns:1fr 116px;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
  .rail-item:first-of-type{padding-top:0}
  .rail-item .ph{height:74px;border-radius:6px}
  .rail-item h3{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.15;margin:8px 0 10px}
  .rail-item h3 a:hover{color:var(--pink)}

  /* ---------- Cut-corner gradient cards ---------- */
  .cardrow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:44px}
  .gcard{position:relative;padding:3px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
    background:linear-gradient(135deg,var(--pink),var(--pink-2))}
  .gcard-inner{background:var(--surface);
    clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
  .gcard .ph{height:200px}
  .gcard .body{padding:18px 20px 24px}
  .gcard h3{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.1;margin:12px 0 12px}
  .gcard:hover h3{color:var(--pink)}
  .gcard-title-link{color:inherit;text-decoration:none}
  .gcard-title-link::after{content:"";position:absolute;inset:0;z-index:1}
  .gcard .pill{position:relative;z-index:2}

  /* ---------- Feed + sidebar ---------- */
  .feed-grid{display:grid;grid-template-columns:1fr 340px;gap:60px;padding-top:60px}
  .load-more-wrap{display:flex;justify-content:center;padding:34px 0 4px}
  .load-more{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;background:var(--button-bg);color:var(--button-text);border:none;border-radius:26px;padding:14px 36px;cursor:pointer;transition:transform .15s ease,opacity .15s ease}
  .load-more:hover{transform:translateY(-1px)}
  .load-more:disabled,.load-more.is-loading{opacity:.55;cursor:default;transform:none}
  .feed-item{display:grid;grid-template-columns:190px 1fr;gap:26px;padding:26px 0;border-bottom:1px solid var(--line)}
  .feed-item:first-of-type{padding-top:0}
  .feed-item .ph{height:130px;border-radius:8px}
  .feed-item .meta{display:flex;align-items:center;gap:14px;margin-bottom:12px}
  .feed-item h2,.feed-item h3{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.08;margin:0 0 8px}
  .feed-item h2 a:hover,.feed-item h3 a:hover{color:var(--pink)}
  .feed-item .dek{font-family:var(--serif);font-size:17px;color:var(--muted);line-height:1.5;margin:0 0 14px}

  /* sidebar */
  .rail-title{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:.02em;color:var(--pink);text-transform:uppercase;margin:0 0 18px}
  .trend{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
  .trend .ph{height:64px;border-radius:6px}
  .trend h4{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.15;margin:0}
  .trend:hover h4{color:var(--pink)}
  .popbox{margin-top:44px;background:var(--surface);border-radius:10px;padding:24px}
  .pop{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
  .pop:last-child{border-bottom:none}
  .pop .n{font-family:var(--display);font-weight:900;font-size:20px;color:var(--pink)}
  .pop p{margin:0;font-family:var(--display);font-weight:700;font-size:16px;line-height:1.2}
  .pop:hover p{color:var(--pink)}

  /* ---------- Shorts ---------- */
  .shorts{padding-top:64px}
  .shorts-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
  .shorts-head .sec-title{margin:0}
  .shorts-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
  .short{position:relative;border-radius:10px;overflow:hidden}
  .short .ph{aspect-ratio:9/13}
  .short .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
  .short .play::before{content:"";width:56px;height:56px;border-radius:50%;background:#ffffffe6;
    clip-path:polygon(38% 30%,38% 70%,72% 50%);background:#fff}
  .short .dur{position:absolute;right:8px;bottom:8px;background:#000000cc;color:#fff;font-size:12px;font-weight:700;padding:3px 7px;border-radius:5px}
  .short .who{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#fff}
  .short .who .dot{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ff8fc4,var(--pink))}
  .short h3{font-family:var(--display);font-weight:800;font-size:17px;line-height:1.12;margin:12px 2px 0}

  /* ---------- Newsletter ---------- */
  .news{margin-top:70px;background:linear-gradient(120deg,var(--newsletter-a),var(--newsletter-b));border-radius:14px;
    padding:56px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;overflow:hidden;position:relative}
  .news .kick{font-family:var(--display);font-weight:900;font-size:40px;color:var(--green-ink);letter-spacing:-.01em;margin:0}
  .news h2{font-family:var(--display);font-weight:900;font-size:44px;line-height:1;margin:6px 0 18px}
  .news p{color:var(--muted);font-size:18px;margin:0 0 22px}
  .news form{display:flex;flex-wrap:wrap;gap:12px;max-width:520px}
  .news input{flex:1;background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;padding:16px;color:var(--text);font-size:15px}
  .news .sub{font-family:var(--display);font-weight:800;background:var(--green);color:var(--green-ink);border:none;border-radius:8px;padding:0 26px;cursor:pointer;font-size:15px;text-transform:uppercase}
  .news .news-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .news-form-status{flex-basis:100%;margin:0;font-size:14px;color:var(--muted)}
  .news-form-status.is-error{color:var(--pink-text)}
  .news .art{justify-self:end;font-size:120px;line-height:1;filter:grayscale(.1)}

  /* ---------- Footer ---------- */
  footer.site{margin-top:80px;background:var(--surface);border-top:1px solid var(--line);padding:56px 0 34px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
  .foot-word{font-family:var(--display);font-weight:900;font-size:24px;
    background:linear-gradient(92deg,var(--pink),#c026d3);-webkit-background-clip:text;background-clip:text;color:transparent}
  /* The footer now shows the real site logo (Customize > Site Identity), the
     same file the header uses, instead of a separate text wordmark. */
  .foot-logo img,.foot-logo .custom-logo{display:block;height:auto;width:auto;max-width:220px;max-height:46px}
  .foot-tagline{color:var(--muted);font-size:15px;line-height:1.55;margin:14px 0 0;max-width:38ch}
  .foot .foot-title{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin:0 0 18px}
  .foot h2.foot-follow-title{margin:30px 0 14px}
  .foot a{display:block;color:var(--muted);font-size:15px;margin-bottom:14px}
  /* wp_nav_menu() (once a Footer menu is assigned in Appearance > Menus)
     wraps each link in its own <li>, unlike the plain <a> tags the
     hardcoded fallback above prints -- reset the list so both look
     identical instead of showing bullets/indentation. */
  .foot ul{list-style:none;margin:0;padding:0}
  .foot li{margin:0}
  .foot a:hover{color:var(--pink)}
  .foot .social{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
  .foot .social a{width:46px;height:46px;margin:0;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
    display:inline-flex;align-items:center;justify-content:center;color:var(--ge-brand,var(--text));font-weight:800;
    transition:color .15s ease,background-color .15s ease,border-color .15s ease,transform .15s ease}
  .foot .social a svg{width:21px;height:21px;display:block;fill:currentColor}
  .foot .social a:hover,.foot .social a:focus-visible{background:var(--ge-brand,var(--pink));border-color:var(--ge-brand,var(--pink));color:#fff;transform:translateY(-2px)}

  /* Each network carries its own colour so the row reads as real brands
     instead of a strip of identical grey dots. */
  .social-facebook{--ge-brand:#1877F2}
  .social-instagram{--ge-brand:#E1306C}
  .social-threads{--ge-brand:#9b5de5}
  .social-linkedin{--ge-brand:#0A66C2}
  .social-x,.social-twitter{--ge-brand:#8b93a7}
  .social-youtube{--ge-brand:#FF0000}
  .social-telegram{--ge-brand:#229ED9}
  .social-whatsapp_channel{--ge-brand:#25D366}
  .social-google_news{--ge-brand:#4285F4}
  .social-reddit{--ge-brand:#FF4500}
  .social-tiktok{--ge-brand:#25F4EE}
  .copy{max-width:1320px;margin:40px auto 0;padding:22px 28px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px}

  /* ---------- Slide-out menu ---------- */
  .drawer-overlay{position:fixed;inset:0;background:#00000055;opacity:0;visibility:hidden;transition:opacity .25s;z-index:90}
  .drawer-overlay.open{opacity:1;visibility:visible}
  .drawer{position:fixed;top:0;left:0;height:100%;width:min(500px,92vw);background:var(--bg);z-index:100;
    transform:translateX(-100%);transition:transform .28s ease;overflow-y:auto;padding:26px 30px 44px;
    border-right:1px solid var(--line);box-shadow:2px 0 24px #00000022}
  .drawer.open{transform:translateX(0)}
  .drawer-close{position:absolute;top:22px;right:26px;background:none;border:none;cursor:pointer;color:var(--text);padding:4px}
  .drawer-close svg{width:26px;height:26px}
  .drawer-search{display:flex;align-items:center;gap:10px;background:var(--green);border-radius:10px;padding:0 16px;margin:6px 0 30px}
  .drawer-search input{flex:1;background:none;border:none;padding:16px 0;font-size:17px;color:#0c1a02;font-family:var(--display);font-weight:600}
  .drawer-search input::placeholder{color:#33440f}
  .drawer-search input:focus{outline:none}
  .drawer-search button{background:none;border:none;cursor:pointer;color:#0c1a02;display:flex}
  .drawer-search button svg{width:22px;height:22px}
  .quick{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:6px}
  .quick a{display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:18px;padding:6px;color:var(--text)}
  .quick a:not(:last-child){border-right:1px solid var(--line)}
  .quick a:hover{color:var(--pink)}
  .quick svg{width:30px;height:30px}
  .acc-sec{border-bottom:1px solid var(--line)}
  .acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:none;cursor:pointer;
    padding:22px 0;font-family:var(--display);font-weight:900;font-size:26px;line-height:1.15;letter-spacing:.005em;
    text-transform:uppercase;color:var(--text);text-align:left}
  .acc-head .ic{width:24px;height:24px;position:relative;flex:none;transition:transform .2s;color:var(--text)}
  .acc-head .ic::before,.acc-head .ic::after{content:"";position:absolute;background:currentColor;border-radius:2px}
  .acc-head .ic::before{top:50%;left:2px;right:2px;height:3px;transform:translateY(-50%)}
  .acc-head .ic::after{left:50%;top:2px;bottom:2px;width:3px;transform:translateX(-50%)}
  .acc-head[aria-expanded="true"] .ic{transform:rotate(45deg)}
  .acc-body{display:none}
  .acc-body.is-open{display:block}
  .acc-body ul{list-style:none;margin:0;padding:0 0 18px}
  .acc-body li a{display:block;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.005em;
    text-transform:uppercase;color:var(--muted);padding:10px 0}
  .acc-body li a:hover{color:var(--pink)}
  /* Every drawer row - accordion head or plain link, category or hardcoded -
     uses one type ramp so the list reads as a single menu. Rows without
     children get a chevron so they still have a right-hand affordance like
     the "+" rows do. */
  .drawer-link{display:flex;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);
    font-family:var(--display);font-weight:900;font-size:26px;line-height:1.15;letter-spacing:.005em;
    text-transform:uppercase;color:var(--text)}
  .drawer-link.big{font-size:26px;font-weight:900}
  .drawer-link::after{content:"";margin-left:auto;flex:none;width:10px;height:10px;
    border-right:3px solid currentColor;border-bottom:3px solid currentColor;border-radius:1px;
    transform:rotate(-45deg);opacity:.38;transition:opacity .15s ease,transform .15s ease}
  .drawer-link:hover::after,.drawer-link:focus-visible::after{opacity:1;transform:rotate(-45deg) translate(2px,2px)}
  .drawer-link:hover{color:var(--pink)}
  .drawer-link svg{width:26px;height:26px}
  .drawer-social{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
  .drawer-social a{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);
    display:flex;align-items:center;justify-content:center;color:var(--ge-brand,var(--text));font-weight:800;font-size:13px;
    transition:transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease}
  .drawer-social a svg{width:21px;height:21px;display:block;fill:currentColor}
  .drawer-social a:hover,.drawer-social a:focus-visible{background:var(--ge-brand,var(--pink));border-color:var(--ge-brand,var(--pink));color:#fff;transform:translateY(-2px)}

  @media (max-width:960px){
    nav.main{display:none}
    /* The drawer already opens with its own search field front and center;
       showing the header's search icon too would just duplicate it in the
       cramped mobile topbar. */
    .search-toggle{display:none}
    .hero-grid,.feed-grid,.news{grid-template-columns:1fr}
    .lead h1{font-size:32px}
    .cardrow,.shorts-row{grid-template-columns:1fr 1fr}
    .news .art{display:none}
    .feed-item{grid-template-columns:120px 1fr;gap:16px}
    .feed-item h2,.feed-item h3{font-size:20px}
    .foot-grid{grid-template-columns:1.25fr 1fr;gap:34px}
  }
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- WordPress integration ---------- */
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.wordmark{cursor:pointer}
.lead .cap h1 a{color:inherit}
.lead .cap h1 a:hover{color:#fff}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.pagination{display:flex;gap:10px;flex-wrap:wrap;padding-top:36px}
.pagination a,.pagination span{font-family:var(--display);font-weight:800;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 16px;color:var(--text)}
.pagination .current{background:var(--pink);border-color:var(--pink);color:#fff}
/* ---------- Published article layout ---------- */
.single-wrap{max-width:1320px}
.article{max-width:none;margin:0 auto;padding-top:46px}
.article-head{max-width:820px;margin-left:104px}

/* ---------- Static pages ----------
   page.php rendered <article> straight into .site-main with no .wrap, so every
   page ran edge-to-edge with no side padding and no reading measure. Pages have
   no sidebar, so the column is centred at the same 820px measure posts use
   rather than offset by the 104px control rail. */
.page-wrap{max-width:1320px}
.page-wrap .article{max-width:820px;margin:0 auto}
.page-head{margin-bottom:24px}
.page-head h1{margin:0}
.page-head .ge-breadcrumbs{margin-bottom:16px}
.article h1{font-family:var(--display);font-weight:900;font-size:44px;line-height:1.05;margin:0 0 16px;letter-spacing:-.02em}
.article-meta-row{margin:16px 0 10px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.article-author-meta{display:flex;align-items:center;gap:10px;min-width:0}
.article-author-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 34px}
.article-byline{margin:0;display:grid;grid-template-columns:auto auto;column-gap:8px;row-gap:1px;align-items:center;line-height:1.25}
.article-byline-author{grid-column:1/-1;display:inline-flex;align-items:center;gap:4px;font-size:13px}
.article-author-link{color:var(--text);font-weight:850;text-decoration:none}
.article-author-link:hover,.article-author-link:focus-visible{color:var(--pink);text-decoration:underline;text-underline-offset:3px}
.article-publish-line,.article-update-line{font-size:12px;color:var(--muted);white-space:nowrap}
.article-publish-line + .article-update-line::before{content:'•';margin-right:8px;color:var(--muted)}
.article-byline time{white-space:nowrap}
.article .lead-media{border-radius:10px;overflow:hidden;margin:24px 0 28px}
.article-featured{aspect-ratio:5/3;background:var(--surface);contain:layout paint}
.article-featured img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* Reference-style three-column reading grid: controls / story / sidebar. */
.article-layout{display:grid;grid-template-columns:76px minmax(0,820px) 300px;column-gap:28px;align-items:start}
.article-main{min-width:0}
.article .content{font-family:var(--serif);font-size:19px;line-height:1.7;color:var(--text)}
.article .content p{margin:0 0 22px}
.article .content a{color:var(--pink-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article .content h2,.article .content h3{font-family:var(--display);font-weight:800;margin:36px 0 14px;line-height:1.15}
.article .content h4,.article .content h5,.article .content h6{font-family:var(--display);font-weight:800;margin:28px 0 12px;line-height:1.2}
.article .content h4{font-size:20px}
.article .content h5{font-size:17px}
.article .content h6{font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.article .content ul,.article .content ol{margin:0 0 22px;padding-left:24px}
.article .content li{margin-bottom:8px}
.article .content li>ul,.article .content li>ol{margin-top:8px;margin-bottom:0}
.article .content blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--pink);font-style:italic;color:var(--muted)}
.article .content blockquote p:last-child{margin-bottom:0}
.article .content table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:17px}
.article .content th,.article .content td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.article .content th{background:var(--surface);font-family:var(--display);font-weight:800}
.article .content pre{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;overflow-x:auto;margin:0 0 22px;font-size:15px}
.article .content code{background:var(--surface);border-radius:4px;padding:2px 6px;font-size:.92em}
.article .content pre code{background:none;padding:0}
.article .content figure{margin:28px 0}
.article .content figcaption{font-size:14px;color:var(--muted);margin-top:8px;text-align:center}
.article .content hr{border:none;border-top:1px solid var(--line);margin:36px 0}
.article .content img{border-radius:8px}
/* alignwide/alignfull normally break a Gutenberg post out to viewport width;
   the article template is a fixed two-column grid (content + share rail +
   sidebar), so a true full-bleed would overlap those columns. Keeping these
   at 100% of the content column is the safe behavior for this layout. */
.article .content .alignwide,.article .content .alignfull{width:100%;max-width:100%}
.article-comments{border-top:1px solid var(--line);margin-top:40px;padding-top:24px}

/* Byline actions (like / comments / add us / summarize), aligned with author block. */
.article-share-rail a,.article-share-rail button{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--text);
  cursor:pointer;text-decoration:none;transition:color .15s ease,background .15s ease
}
.article-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto;flex-wrap:wrap}
.article-action{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-family:var(--display);font-size:12px;font-weight:800;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:20px;cursor:pointer;white-space:nowrap;transition:border-color .15s ease,color .15s ease,background .15s ease}
.article-action svg{width:15px;height:15px;display:block;fill:currentColor}
.article-action:hover,.article-action:focus-visible{border-color:var(--pink);color:var(--pink);outline:none}
.article-like.is-liked{color:var(--pink);border-color:var(--pink);background:color-mix(in srgb,var(--pink) 10%,transparent)}
.article-summarize .is-loading,.article-summarize.is-loading{opacity:.65;cursor:default}
.article-add-us svg{color:var(--pink)}

/* AI summary panel */
.ai-summary{margin:18px 0 4px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:16px 18px}
.ai-summary-head{font-family:var(--display);font-weight:900;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-text);margin-bottom:8px}
.ai-summary-body{font-family:var(--ui);font-size:15px;line-height:1.55;color:var(--text);margin:0;padding-left:20px;list-style:disc}
.ai-summary-body li{margin:0 0 7px}
.ai-summary-body li:last-child{margin-bottom:0}

/* Sidebar "Add us on Google" card */
.article-addus-card{border:1px solid var(--line);border-radius:12px;padding:18px;background:var(--surface);text-align:center}
.article-addus-text{margin:0 0 12px;font-size:14px;color:var(--muted)}
.article-addus-btn{display:inline-block;font-family:var(--display);font-weight:800;font-size:14px;background:var(--button-bg);color:var(--button-text);border-radius:22px;padding:11px 22px}
.article-addus-btn:hover{opacity:.9}

/* Comments */
.ge-comments{margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.ge-comments-title,.ge-comment-reply-title{font-family:var(--display);font-weight:900;font-size:26px;margin:0 0 22px;color:var(--text)}
.ge-comment-list{list-style:none;margin:0 0 30px;padding:0}
.ge-comment-list ol.children{list-style:none;margin:0;padding:0 0 0 28px}
.ge-comment-list li.comment{margin:0 0 22px}
.ge-comment-list .comment-body{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.ge-comment-list .comment-author{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ge-comment-list .comment-author .avatar{width:36px;height:36px;border-radius:50%}
.ge-comment-list .comment-author .fn{font-family:var(--display);font-weight:800;font-style:normal;font-size:15px;color:var(--text)}
.ge-comment-list .comment-author .says{display:none}
.ge-comment-list .comment-metadata{font-size:12px;color:var(--muted);margin-bottom:10px}
.ge-comment-list .comment-metadata a{color:var(--muted)}
.ge-comment-list .comment-content{font-size:15px;line-height:1.6;color:var(--text)}
.ge-comment-list .comment-content p{margin:0 0 10px}
.ge-comment-list .reply{margin-top:8px}
.ge-comment-list .comment-reply-link{font-family:var(--display);font-weight:700;font-size:13px;color:var(--pink-text)}
.ge-comments-closed{color:var(--muted);font-size:14px;margin:0 0 24px}
.ge-comment-respond{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 22px 8px}
.ge-comment-respond .comment-form-comment textarea,
.ge-comment-respond input[type=text],
.ge-comment-respond input[type=email],
.ge-comment-respond input[type=url]{width:100%;background:var(--input-bg,var(--surface-2));border:1px solid var(--input-border,var(--line));border-radius:10px;padding:12px 14px;color:var(--text);font-family:var(--ui);font-size:15px;margin-top:6px}
.ge-comment-respond textarea{min-height:120px;resize:vertical}
.ge-comment-respond .comment-form-comment,
.ge-comment-respond .comment-form-author,
.ge-comment-respond .comment-form-email,
.ge-comment-respond .comment-form-url{margin:0 0 16px}
.ge-comment-respond label{font-size:13px;color:var(--muted);font-weight:600}
.ge-comment-respond .comment-notes,
.ge-comment-respond .comment-form-cookies-consent{font-size:12px;color:var(--muted)}
.ge-comment-submit,.ge-comment-respond input[type=submit]{font-family:var(--display);font-weight:800;font-size:15px;background:var(--button-bg);color:var(--button-text);border:none;border-radius:24px;padding:13px 30px;cursor:pointer;transition:opacity .15s ease}
.ge-comment-submit:hover,.ge-comment-respond input[type=submit]:hover{opacity:.9}

/* Left action rail sits beside the article like the supplied reference and stays in place while reading. */
.article-share-rail{position:sticky;top:112px;align-self:start;z-index:20;display:grid;gap:12px;padding-top:2px;width:76px;pointer-events:auto}
.article-share-rail-item{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;display:grid;grid-template-columns:1fr 40px;align-items:center;gap:8px;width:76px;min-height:40px;color:var(--muted)!important;font-family:var(--display);font-size:11px;line-height:1;text-decoration:none!important;cursor:pointer;pointer-events:auto}
.article-share-rail-icon{grid-column:2;grid-row:1;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--text);transition:border-color .15s ease,color .15s ease,background .15s ease}
.article-share-rail svg{width:17px;height:17px;display:block;fill:currentColor}
.article-share-rail-label{grid-column:1;grid-row:1;text-align:right;white-space:nowrap;color:var(--muted);transition:color .15s ease}
.article-share-rail-item:hover .article-share-rail-icon,.article-share-rail-item:focus-visible .article-share-rail-icon{border-color:var(--pink);color:var(--pink)}
.article-share-rail-item:hover .article-share-rail-label,.article-share-rail-item:focus-visible .article-share-rail-label{color:var(--pink)}
.article-share-rail-item:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:22px}

/* Right rail follows the story naturally so Trending Now enters the viewport during reading. */
.article-sidebar{min-width:0;padding-top:2px;position:sticky;top:112px;align-self:start;display:flex;flex-direction:column;gap:78px;overflow:visible;max-height:none}
.article-side-section{margin:0;overflow:visible}
.article-side-title{font-family:var(--display);font-weight:900;font-size:21px;line-height:1;text-transform:uppercase;letter-spacing:.01em;color:var(--pink);margin:0 0 18px}
.article-popular-list{list-style:none;margin:0;padding:0}
.article-popular-list li{display:grid;grid-template-columns:24px 1fr;gap:8px;padding:8px 0}
.article-popular-number{font-family:var(--display);font-size:15px;font-weight:900;color:var(--pink-text)}
.article-popular-list a{font-family:var(--display);font-weight:800;font-size:15px;line-height:1.18;color:var(--text)}
.article-popular-list a:hover{color:var(--pink)}
.article-trending-list{display:grid;gap:14px}
.article-trending-item{display:grid;grid-template-columns:88px 1fr;gap:11px;align-items:center}
.article-trending-thumb{display:block;width:88px;height:58px;border-radius:7px;overflow:hidden;background:var(--surface-2)}
.article-trending-thumb img{width:100%;height:100%;object-fit:cover}
.article-trending-placeholder{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--surface-2),var(--line))}
.article-trending-copy{font-family:var(--display);font-weight:800;font-size:14px;line-height:1.18;color:var(--text)}
.article-trending-item:hover .article-trending-copy{color:var(--pink)}

@media (max-width:1250px) and (min-width:1081px){
  .article-head{margin-left:96px;max-width:calc(100% - 396px)}
  .article-layout{grid-template-columns:76px minmax(0,1fr) 280px;gap:20px}
}
@media (max-width:1080px){
  .article-head{margin-left:0;max-width:none}
  .article-layout{grid-template-columns:1fr;gap:46px}
  .article-share-rail{display:none}
  .article-sidebar{position:static;display:grid;grid-template-columns:1fr 1fr;gap:34px;border-top:1px solid var(--line);padding-top:36px}
  .article-side-section{margin:0}
}
@media (max-width:960px){.article h1{font-size:30px}}
@media (max-width:880px){.page-wrap .article{max-width:none}}
@media (max-width:760px){
  .article-meta-row{align-items:flex-start;flex-direction:column;gap:12px}
  .article-actions{width:100%;justify-content:flex-start;gap:8px}
  .article-action{padding:8px 12px}
}
@media (max-width:680px){
  .article-sidebar{grid-template-columns:1fr}
  .article-side-title{font-size:20px}
  .article-trending-item{grid-template-columns:84px 1fr}
  .article-trending-thumb{width:84px;height:58px}
}

/* ---------- Video presentation ---------- */
.short-media{position:relative}
.short-preview{position:absolute;inset:0;z-index:1;pointer-events:none;background:#000;opacity:0;transition:opacity .16s ease}
.short-preview iframe,.short-preview video{width:100%;height:100%;display:block;border:0;object-fit:cover;pointer-events:none}
.short.is-previewing .short-preview{opacity:1}
.short.is-previewing .play{opacity:0}
.short .play{z-index:2;transition:opacity .16s ease}
.short .dur,.short .who{z-index:3}
.article-video{background:#000;aspect-ratio:16/9}
.article-video iframe,.article-video video{display:block;width:100%;height:100%;border:0;object-fit:contain}
.hero-grid-solo{grid-template-columns:1fr}

/* ---------- Follow the visitor's system appearance ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e0f12;
    --surface:#17181d;
    --surface-2:#22242b;
    --line:#30323a;
    --text:#f5f5f7;
    --muted:#a8abb4;
    --green-ink:#102000;
    --green-text:#a6f04b;
    --button-bg:#f4f4f5;
    --button-text:#131316;
    --newsletter-a:#21141d;
    --newsletter-b:#1f1815;
    --input-bg:#16171b;
    --input-border:#3c3340;
    --pink-text:#ff5aa8; /* brighter pink stays legible for text on the dark background */
  }
  .news .kick{color:var(--green)}
  .drawer{box-shadow:2px 0 28px #00000066}
  .ph{background:#18191d}
}

@media (max-width:620px){
  .wrap{padding-left:18px;padding-right:18px}
  .shorts-row{gap:14px}
  .short h3{font-size:15px}
  .news{padding:32px 22px}
  .news h2{font-size:34px}
  .news .kick{font-size:30px}
  .news form{flex-direction:column}
  .news .sub{min-height:48px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  footer.site{padding-top:42px}
  .copy{margin-top:30px;padding-left:18px;padding-right:18px}
  .foot .social{gap:12px}
  .foot .social a{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  .short-preview{display:none!important}
}


/* ---------- Core Web Vitals / rendering ---------- */
/* Reserve media space before images arrive to prevent layout shifts. */
.lead .ph,.gcard .ph,.feed-item .ph,.rail-item .ph,.trend .ph,.short .ph{contain:layout paint}

/* Skip layout/paint work for below-the-fold sections until they approach the viewport. */
.cardrow,.feed-grid,.shorts,footer.site{
  content-visibility:auto;
  contain-intrinsic-size:auto 700px;
}
.news{
  content-visibility:auto;
  contain-intrinsic-size:auto 420px;
}

/* Avoid expensive animations when the visitor requests reduced motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ---------- AdSense placements ----------
   Plain, clearly labelled boxes: nothing that looks like a story card or a
   button, and nothing that draws the eye to the ad. */
.ge-ad{display:block;clear:both;margin:40px auto;text-align:center}
.ge-ad-label{display:block;margin:0 0 6px;font-family:var(--ui);font-size:11px;font-weight:600;font-style:normal;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Reserve room while the ad loads so the page doesn't jump (CLS)... */
.ge-ad ins.adsbygoogle:not([data-ad-status]){min-height:280px}
/* ...and collapse the whole box if Google has no ad to show (Google-documented). */
ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.ge-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none}

/* In-article: narrower than the text column, keeping a wide gap from the share rail buttons. */
.article .content .ge-ad{max-width:728px;margin:38px auto}

/* The end-of-story unit now sits right under the closing paragraph, which on
   this site often ends in an inline source link. Measured clearance there was
   46px; this lifts it clear so a link in the copy is never a near-miss for the
   ad ("Encouraging accidental clicks"). */
.ge-ad-article-end{margin-top:64px}

/* Article sidebar: an ad must not float, so the rail scrolls normally when it has one. */
.article-sidebar.has-ad{position:static}
/* Measured 38px between the last Most Popular link and this unit - close
   enough to be a near-miss for a tap, so the gap is opened up. */
.article-sidebar .ge-ad{margin:34px 0 0}
.article-sidebar .ge-ad ins.adsbygoogle:not([data-ad-status]){min-height:250px}

/* Homepage row between the featured cards and More Stories. */
.ge-ad-row{padding-top:48px}
.ge-ad-row .ge-ad{margin:0 auto;max-width:970px}
.ge-ad-row .ge-ad ins.adsbygoogle:not([data-ad-status]){min-height:250px}

/* Homepage/archive sidebars. */
.feed-grid aside .ge-ad{margin:40px 0 0}
.feed-grid aside .ge-ad ins.adsbygoogle:not([data-ad-status]){min-height:250px}

/* Archive list: separated from the neighbouring post rows like its own row. */
.feed-grid .ge-ad-archive-infeed{margin:0;padding:26px 0;border-bottom:1px solid var(--line)}

/* content-visibility:auto skips layout for off-screen sections, which would hand
   AdSense a 0px-wide slot and leave it blank. Sections holding an ad render normally. */
.feed-grid:has(.ge-ad){content-visibility:visible;contain-intrinsic-size:none}

/* ---------- How wide the box around an ad may get ----------
   A responsive AdSense unit fills the width of the box it sits in, so capping
   the BOX is how this theme keeps a single unit from taking over a phone
   screen and pushing the story out of view ("Ads interfering": ads may not
   "severely interfere with consumption of content including ... pushing the
   content off the display"). The ad code inside the box is untouched. */
@media (max-width:799px){
  /* 300px, not 336px. Measured on the live site: a 336px-wide box made AdSense
     pick a 336x394 creative - 49% of an 812px phone screen, enough for one ad
     alone to tip a screen past the ads-vs-content line. A 300px box gets the
     300x250 shape instead, about 31% of the screen. Width of the box only;
     the ad code inside it is untouched. */
  .ge-ad,
  .article .content .ge-ad,
  .ge-ad-row .ge-ad,
  .feed-grid aside .ge-ad,
  .feed-grid .ge-ad-archive-infeed{max-width:300px;margin-left:auto;margin-right:auto}

  /* Auto ads inserts its own containers, which ignore the selectors above. */
  .article .content .google-auto-placed,
  .article .content .google-auto-placed ins.adsbygoogle{max-width:300px;margin-left:auto;margin-right:auto}
}
@media (min-width:800px){
  .feed-grid .ge-ad-archive-infeed{max-width:468px;margin-left:auto;margin-right:auto}
}

@media (max-width:1080px){
  /* The rail drops under the story at this width. The sidebar unit used to be
     hidden here because it landed right after the end-of-article unit and the
     two read as one ad block - but the end unit now sits up beside the closing
     paragraphs, with the author box, the share row and the preferred-source
     card in between, so the sidebar unit shows again and spans the full width. */
  .article-sidebar .ge-ad{grid-column:1/-1}
}
@media (max-width:620px){
  .ge-ad{margin:34px auto}
  .ge-ad-row{padding-top:36px}
  /* This generic .ge-ad rule used to cancel the end-of-story spacing set
     earlier in the file - same specificity, later in source - which is why the
     last in-story ad and the end unit were measuring 34px apart on a phone.
     Both placements keep their own spacing here. */
  .ge-ad-article-end{margin-top:64px}
  .article-sidebar .ge-ad{margin:34px 0 0}
}


/* ---------- Mobile/tablet carousels (featured cards + Shorts) ----------
   Below 960px the old 2-column grid squeezed landscape thumbnails into narrow
   portrait cells: heavy crops, cards of uneven height (the gradient frame
   showed through under the shorter one), and a lone orphan card on its own
   row. These rows now become swipeable, snap-aligned carousels; the next card
   peeking in from the edge shows there's more to swipe. */
.gcard{display:flex}
.gcard-inner{flex:1;min-width:0}
.carousel-dots{display:none}

@media (max-width:960px){
  .cardrow,.shorts-row{
    display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch
  }
  .cardrow::-webkit-scrollbar,.shorts-row::-webkit-scrollbar{display:none}

  .cardrow{scroll-padding-inline:28px}
  .cardrow > .gcard{flex:0 0 min(84%,380px);scroll-snap-align:start}
  /* Same 8:5 ratio as the gameempress-thumb crop, so images show whole instead of a sliver. */
  .gcard .ph{height:auto;aspect-ratio:8/5}

  .shorts-row{margin:0 -28px;padding:0 28px;scroll-padding-inline:28px}
  .shorts-row > .short{flex:0 0 min(44%,220px);scroll-snap-align:start}

  .carousel-dots{display:flex;justify-content:center;gap:2px;margin-top:12px}
  .carousel-dot{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .carousel-dot::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--line);transition:width .2s ease,background-color .2s ease}
  .carousel-dot[aria-current="true"]::before{width:22px;background:var(--pink)}
}
@media (max-width:620px){
  .cardrow{scroll-padding-inline:18px}
  .shorts-row{margin:0 -18px;padding:0 18px;scroll-padding-inline:18px}
}


/* ---------- Homepage "Most Popular" marquee (phones/tablets) ----------
   Stacked, the five ranked titles made a very tall box between the feed and
   the Shorts. Below 960px they scroll sideways in one short row instead. The
   duplicate list only exists to make the loop seamless (hidden from screen
   readers and keyboard). Desktop keeps the normal ranked list. */
.pop-list-clone,.marquee-toggle{display:none}

@media (max-width:960px){
  /* Grid columns default to min-width:auto, which would let the marquee's long track
     stretch the whole column (and the page) sideways; clamp them to the screen. */
  .feed-grid > *{min-width:0}
  .popbox.is-marquee{padding:20px 0 18px;overflow:hidden;max-width:100%}
  .popbox.is-marquee .popbox-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;margin-bottom:10px}
  .popbox.is-marquee .rail-title{margin:0!important}

  .marquee-toggle{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;
    border:1px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer}
  .marquee-toggle svg{width:14px;height:14px;fill:currentColor}
  .marquee-toggle .icon-play{display:none}
  .popbox.is-paused .marquee-toggle .icon-pause{display:none}
  .popbox.is-paused .marquee-toggle .icon-play{display:block}

  .pop-viewport{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
  .popbox.is-marquee .pop-track{display:flex;width:max-content;animation:ge-marquee var(--marquee-duration,40s) linear infinite}
  .popbox.is-marquee .pop-list,.popbox.is-marquee .pop-list-clone{display:flex}
  .popbox.is-marquee .pop{grid-template-columns:22px 1fr;align-items:start;gap:8px;width:260px;flex:none;
    padding:8px 20px;border-bottom:0;border-right:1px solid var(--line)}
  .popbox.is-marquee .pop p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.25}

  /* Stop while someone is reading or aiming: hover, keyboard focus, touch, or the Pause button. */
  .popbox.is-marquee .pop-viewport:hover .pop-track,
  .popbox.is-marquee .pop-viewport:focus-within .pop-track,
  .popbox.is-touching .pop-track,
  .popbox.is-paused .pop-track{animation-play-state:paused}
}

@keyframes ge-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Reduced motion: no movement at all, just a row the visitor can swipe. */
@media (max-width:960px) and (prefers-reduced-motion:reduce){
  .popbox.is-marquee .pop-track{animation:none}
  .popbox.is-marquee .pop-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:none}
  .popbox.is-marquee .pop-list-clone,.popbox.is-marquee .marquee-toggle{display:none}
}


/* ---------- Drawer close button ----------
   It used to be absolutely positioned in the drawer's top-right corner, where
   it sat on top of the green search bar. It now gets its own row above the
   search, aligned right, as a proper 44px round tap target. */
.drawer{padding-top:18px}
.drawer-close{position:static;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 14px auto;padding:0;
  border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);transition:border-color .15s ease,color .15s ease}
.drawer-close svg{width:20px;height:20px}
.drawer-close:hover,.drawer-close:focus-visible{border-color:var(--pink);color:var(--pink)}
.drawer-search{margin-top:0}


/* ---------- Article header: category spacing + preferred-source button ----------
   The category pill sat directly on top of the headline with no gap. */
.article-head .pill{margin-bottom:14px}
/* The sidebar card button wraps its longer label instead of overflowing the 300px rail. */
.article-addus-btn{white-space:normal;line-height:1.25}


/* ---------- Preferred-source button placement ----------
   Once the sidebar drops below the story (1080px and narrower), its "Add as a
   preferred source on Google" card is the first thing readers reach after the
   article, so the header copy of the same button is dropped there: on phones
   it took a whole extra row above the featured image. Desktop, where the
   sidebar sits beside the story, keeps the button in the header row. */
@media (max-width:1080px){
  .article-actions .article-add-us{display:none}
  .article-addus-card{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;text-align:left}
  .article-addus-text{margin:0;font-size:15px;line-height:1.35;color:var(--text)}
  .article-addus-btn{flex:none;white-space:nowrap}
}
@media (max-width:520px){
  .article-addus-card{flex-direction:column;align-items:stretch;gap:12px;text-align:center}
  .article-addus-btn{white-space:normal;padding:12px 18px}
}


/* ---------- Article buttons: shared CTA ---------- */
/* Darker pink stops than --pink so white text keeps >= 4.5:1 contrast. */
.ge-cta-btn,
.wp-block-button.is-style-ge-cta .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:999px;border:0;
  background:linear-gradient(135deg,#d0146c,#a3104f);color:#fff;font-family:var(--display);font-weight:800;font-size:16px;line-height:1.2;
  text-decoration:none;box-shadow:0 10px 24px -14px rgba(208,20,108,.9);transition:transform .15s ease,filter .15s ease
}
.ge-cta-btn svg{width:18px;height:18px;flex:none;fill:currentColor}
.ge-cta-btn:hover,.ge-cta-btn:focus-visible,
.wp-block-button.is-style-ge-cta .wp-block-button__link:hover{transform:translateY(-1px);filter:brightness(1.08);color:#fff}
.article .content a.ge-cta-btn,
.article .content .wp-block-button.is-style-ge-cta .wp-block-button__link{color:#fff;text-decoration:none}
.article .content .ge-cta-inline{margin:32px 0;text-align:center}
.article .content .wp-block-button.is-style-ge-cta{margin:28px 0}

/* ---------- Review box ---------- */
.ge-review{margin:4px 0 36px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);font-family:var(--ui);color:var(--text)}
.ge-review.is-at-bottom{margin:36px 0 8px}
.ge-review-top{display:flex;align-items:center;gap:18px}
.ge-review-score{--tone:var(--pink);position:relative;flex:none;width:86px;height:86px;border-radius:50%;
  background:conic-gradient(var(--tone) calc(var(--score) * 10%),var(--surface-2) 0);display:grid;place-items:center}
.ge-review-score.is-high{--tone:#65a30d}
.ge-review-score.is-mid{--tone:var(--pink)}
.ge-review-score.is-low{--tone:#ea580c}
.ge-review-score-inner{position:absolute;inset:7px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ge-review-score-num{font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:-.02em}
.ge-review-score-max{font-size:11px;font-weight:700;color:var(--muted);margin-top:2px}
.ge-review-heading{min-width:0}
.ge-review-kicker{margin:0 0 4px;font-family:var(--display);font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-text)}
.ge-review-title{margin:0;font-family:var(--display);font-weight:900;font-size:28px;line-height:1.05;letter-spacing:-.01em}
.ge-review-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 0;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.ge-review-meta b{color:var(--text);font-weight:800}
.ge-review-verdict{margin:18px 0 0;font-family:var(--serif);font-size:18px;line-height:1.55;color:var(--text)}
.ge-review-procon{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.ge-review-list{padding:14px 16px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.ge-review-list h3{margin:0 0 8px;font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.ge-review-pros h3{color:var(--green-text)}
.ge-review-cons h3{color:#dc2626}
.ge-review-list ul{margin:0;padding:0;list-style:none}
.ge-review-list li{display:flex;gap:8px;align-items:flex-start;margin:0 0 7px;font-size:15px;line-height:1.4}
.ge-review-list li:last-child{margin-bottom:0}
.ge-review-list li svg{width:16px;height:16px;flex:none;margin-top:2px;fill:currentColor}
.ge-review-pros li svg{color:var(--green-text)}
.ge-review-cons li svg{color:#dc2626}
.ge-review-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.ge-store-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:var(--bg);
  color:var(--text);font-family:var(--display);font-weight:800;font-size:14px;text-decoration:none;transition:border-color .15s ease,color .15s ease}
.ge-store-btn svg{width:16px;height:16px;fill:currentColor}
.ge-store-btn:hover,.ge-store-btn:focus-visible{border-color:var(--pink);color:var(--pink)}
.ge-review-disclosure{margin:12px 0 0;font-size:12px;color:var(--muted)}
@media (prefers-color-scheme: dark){
  .ge-review-score.is-high{--tone:#a3e635}
  .ge-review-score.is-low{--tone:#fb923c}
  .ge-review-cons h3,.ge-review-cons li svg{color:#f87171}
}

/* ---------- Actions row: Listen + Share ---------- */
.article-action[hidden]{display:none}
.article-listen[aria-pressed="true"]{border-color:var(--pink);color:var(--pink)}
.article-share{position:relative;display:inline-flex}
.article-share-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:220px;max-width:calc(100vw - 36px);padding:6px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 18px 40px -18px rgba(0,0,0,.5);display:grid;gap:2px}
.article-share-menu[hidden]{display:none}
.article-share-menu a,.article-share-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:9px;
  background:none;color:var(--text);font-family:var(--display);font-weight:700;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.article-share-menu a:hover,.article-share-menu button:hover,.article-share-menu a:focus-visible,.article-share-menu button:focus-visible{background:var(--surface);color:var(--pink);outline:none}
.article-share-menu svg{width:17px;height:17px;flex:none;fill:currentColor}

/* ---------- End of story: share + follow ---------- */
.ge-article-end{margin:40px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.ge-end-title{margin:0 0 12px;font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ge-end-buttons{display:flex;flex-wrap:wrap;gap:8px}
.ge-share-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--text);font-family:var(--display);font-weight:800;font-size:13px;text-decoration:none;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.ge-share-pill svg{width:16px;height:16px;flex:none;fill:currentColor}
.ge-share-pill:hover,.ge-share-pill:focus-visible{border-color:var(--pink);color:var(--pink)}
.ge-end-follow{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.ge-follow-btn{flex:1 1 230px;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border-radius:12px;
  font-family:var(--display);font-weight:800;font-size:15px;text-decoration:none;color:#fff;transition:filter .15s ease}
.ge-follow-btn svg{width:19px;height:19px;flex:none;fill:currentColor}
.ge-follow-btn:hover,.ge-follow-btn:focus-visible{filter:brightness(1.1);color:#fff}
.ge-follow-whatsapp_channel{background:#0b7a43}
.ge-follow-telegram{background:#1d6fb8}
.ge-follow-google_news{background:var(--button-bg);color:var(--button-text)}
.ge-follow-google_news:hover,.ge-follow-google_news:focus-visible{color:var(--button-text)}
/* Keep a clear gap between these buttons and the ad that follows the story. */
.ge-article-end + .ge-ad{margin-top:64px}

@media (max-width:620px){
  .ge-review{padding:18px}
  .ge-review-top{gap:14px}
  .ge-review-score{width:74px;height:74px}
  .ge-review-score-num{font-size:26px}
  .ge-review-title{font-size:24px}
  .ge-review-procon{grid-template-columns:1fr}
  .ge-review-actions .ge-cta-btn{width:100%}
  .ge-share-pill:not(.ge-share-copy){width:42px;padding:0}
  .ge-share-pill:not(.ge-share-copy) .ge-share-pill-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
}
@media (max-width:420px){
  .article-actions{gap:6px}
  .article-action{padding:7px 10px}
}

/* ---------- Article actions row fit ----------
   Desktop: the byline and the action buttons each get their own line, so
   Like / Summarize / Listen / Share / preferred source fit on one row.
   Small phones: Listen and Share become icon buttons (their labels stay
   available to screen readers), keeping the row to a single line. */
@media (min-width:1081px){
  .article-meta-row{flex-direction:column;align-items:flex-start;gap:12px}
  .article-actions{margin-left:0;justify-content:flex-start}
}
@media (max-width:480px){
  .article-listen,.article-share-btn{width:36px;padding:7px 0;justify-content:center}
  .article-listen .article-listen-label,.article-share-btn > span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
}

/* ---------- Breadcrumbs ----------
   Single line, no box: home icon > parent category > category pill. Long
   trails scroll sideways on phones instead of wrapping over the headline. */
.ge-breadcrumbs{margin:0 0 14px;max-width:100%}
.ge-breadcrumbs ol{display:flex;align-items:center;margin:0;padding:3px 2px;list-style:none;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.ge-breadcrumbs ol::-webkit-scrollbar{display:none}
.ge-crumb{display:flex;align-items:center;flex:none}
.ge-crumb + .ge-crumb::before{content:"";flex:none;width:6px;height:6px;margin:0 11px 0 8px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:rotate(45deg);opacity:.6}
.ge-crumb a{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--muted);text-decoration:none;transition:color .15s ease,border-color .15s ease}
.ge-crumb a:hover,.ge-crumb a:focus-visible{color:var(--pink)}
.ge-crumb-home a{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--text)}
.ge-crumb-home svg{width:15px;height:15px;display:block;fill:currentColor}
.ge-crumb-home a:hover,.ge-crumb-home a:focus-visible{border-color:var(--pink);color:var(--pink)}
.ge-crumb a.pill{color:var(--green-ink);font-size:12px;letter-spacing:.06em}
.ge-crumb a.pill:hover,.ge-crumb a.pill:focus-visible{color:var(--green-ink)}
.article-head .ge-breadcrumbs .pill{margin-bottom:0}

/* ---------- Header robustness ----------
   The wordmark/logo could not shrink, so a longer site title or a wide logo
   pushed the search and menu buttons past the right edge on phones. */
.topbar .wordmark,.topbar .site-logo{min-width:0}
.topbar .wordmark{overflow:hidden;text-overflow:ellipsis}
.topbar .site-logo img{max-width:100%}
.topbar .right{flex:none}
@media (max-width:620px){
  .topbar{gap:16px}
  .wordmark{font-size:clamp(22px,7.2vw,30px)}
}


/* ---------- Author box ----------
   A deep-plum card in both light and dark mode (it reads like a player card),
   with the theme's pink→orange and green as corner ribbons, a gradient-framed
   photo and the wordmark-style gradient name. */
.ge-author{
  --ink:#1b1024;--ink-2:#2a1638;--ink-line:rgba(255,255,255,.12);--ink-text:#f7f3fb;--ink-muted:#d6cde2;
  position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:112px minmax(0,1fr);
  grid-template-areas:"avatar head" "avatar bio" "avatar foot";column-gap:28px;row-gap:12px;align-items:start;
  margin:44px 0 0;padding:30px 32px;border:1px solid var(--ink-line);border-radius:22px;
  background:radial-gradient(130% 150% at 100% 0%,var(--ink-2) 0%,var(--ink) 58%);color:var(--ink-text);font-family:var(--ui)
}
.ge-author-ribbon{position:absolute;z-index:-1;border-radius:999px;pointer-events:none;transform:rotate(-38deg)}
.ge-author-ribbon-a{top:-30px;left:-78px;width:230px;height:34px;background:linear-gradient(90deg,var(--pink),var(--pink-2))}
.ge-author-ribbon-b{right:-70px;bottom:-22px;width:280px;height:44px;background:linear-gradient(90deg,rgba(166,240,75,0),var(--green));opacity:.5}

.ge-author-avatar{grid-area:avatar;display:block;width:112px;height:112px;padding:3px;border-radius:30px;background:linear-gradient(135deg,var(--pink),var(--pink-2))}
.ge-author-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:27px;background:var(--ink)}

.ge-author-head{grid-area:head;min-width:0}
.ge-author-kicker{margin:0 0 4px;font-family:var(--display);font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.ge-author-name{margin:0;font-family:var(--display);font-weight:900;font-size:30px;line-height:1.08;letter-spacing:-.01em}
.ge-author-name a{text-decoration:none;color:inherit;border-radius:4px}
.ge-author-name-text{background:linear-gradient(92deg,#ff6bb5,#e879f9 55%,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.ge-author-name a:hover .ge-author-name-text{text-decoration:underline;text-decoration-color:#ff6bb5;text-underline-offset:5px;text-decoration-thickness:2px}
.ge-author-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:8px 0 0;font-size:14px;font-weight:600;color:var(--ink-muted)}
.ge-author-dot{width:4px;height:4px;border-radius:50%;background:var(--pink)}
.ge-author-bio{grid-area:bio;margin:0;font-size:16px;line-height:1.6;color:var(--ink-muted)}

.ge-author-foot{grid-area:foot;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:6px}
.ge-author-social{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.ge-author-link{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);
  border:1px solid var(--ink-line);color:var(--ink-text);text-decoration:none;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.ge-author-link svg{display:block;width:18px;height:18px;fill:currentColor}
.ge-author-link:hover,.ge-author-link:focus-visible{transform:translateY(-2px);border-color:transparent;color:#fff}
.ge-author-link.is-instagram:hover,.ge-author-link.is-instagram:focus-visible{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.ge-author-link.is-linkedin:hover,.ge-author-link.is-linkedin:focus-visible{background:#0a66c2}
.ge-author-link.is-youtube:hover,.ge-author-link.is-youtube:focus-visible{background:#d9181b}
.ge-author-link.is-facebook:hover,.ge-author-link.is-facebook:focus-visible{background:#1877f2}
.ge-author-link.is-x:hover,.ge-author-link.is-x:focus-visible,
.ge-author-link.is-threads:hover,.ge-author-link.is-threads:focus-visible{background:#000;border-color:rgba(255,255,255,.35)}
.ge-author-link.is-website:hover,.ge-author-link.is-website:focus-visible{background:linear-gradient(135deg,#d0146c,#a3104f)}
.ge-author-more{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 18px;border:1px solid rgba(255,255,255,.24);border-radius:999px;
  color:var(--ink-text);font-family:var(--display);font-weight:800;font-size:14px;text-decoration:none;transition:background .15s ease,border-color .15s ease}
.ge-author-more svg{width:16px;height:16px;fill:currentColor}
.ge-author-more:hover,.ge-author-more:focus-visible{background:linear-gradient(135deg,#d0146c,#a3104f);border-color:transparent;color:#fff}
.ge-author a:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* Author archive: the card is the page header. */
.ge-author.is-archive{margin:0 0 36px}
.ge-author.is-archive .ge-author-name{font-size:40px}

@media (prefers-color-scheme: dark){
  .ge-author{--ink:#1d1129;--ink-2:#2e1a3f;--ink-line:rgba(255,255,255,.16)}
}
@media (max-width:620px){
  .ge-author{grid-template-columns:76px minmax(0,1fr);grid-template-areas:"avatar head" "bio bio" "foot foot";column-gap:16px;row-gap:14px;padding:22px 20px;border-radius:18px}
  .ge-author-avatar{width:76px;height:76px;border-radius:22px}
  .ge-author-avatar img{border-radius:19px}
  .ge-author-head{align-self:center}
  .ge-author-name,.ge-author.is-archive .ge-author-name{font-size:24px}
  .ge-author-bio{font-size:15px}
  .ge-author-foot{flex-direction:column;align-items:stretch}
  .ge-author-more{width:100%}
  .ge-author-ribbon-a{top:-26px;left:-96px}
}
@media (forced-colors: active){
  .ge-author-name-text{background:none;color:CanvasText}
}
@media (prefers-reduced-motion:reduce){
  .ge-author-link:hover,.ge-author-link:focus-visible{transform:none}
}

/* ---------- Accessibility fixes from the deep audit ----------
   White text on --pink is only 3.6:1; this deeper pink keeps the brand look
   and passes WCAG AA (5.9:1). */
.skip-link{background:#b8105f}
.pagination .current{background:#b8105f;border-color:#b8105f;color:#fff}
/* Touch targets of at least 24x24px (WCAG 2.2) without changing how anything
   looks: the extra room is padding that replaces existing margins. */
.burger{width:44px;height:44px;padding:11px 7px}
nav.main a{display:inline-block;padding:12px 0}
.foot a{padding:4px 0;margin-bottom:6px}
.article-popular-list li{padding:5px 0}
.article-popular-list a{display:block;padding:3px 0}
.ge-crumb:not(.ge-crumb-home) a:not(.pill){display:inline-block;padding:4px 0}

/* ---------- Author box polish ----------
   The "More from" button had a transparent fill, so the green corner ribbon
   showed through it; on phones the job title and article count wrapped with
   the separator dot stranded at the end of the first line. */
.ge-author-more{background:var(--ink)}
@media (max-width:620px){
  .ge-author-meta{flex-direction:column;align-items:flex-start;gap:2px}
  .ge-author-dot{display:none}
  .ge-author-ribbon-b{right:-120px;bottom:-30px}
}
/* Tap areas that were still a fraction under 24px after the first pass. The
   negative margin gives the byline name a bigger hit area without moving it. */
.article-popular-list li{padding:4px 0}
.article-popular-list a{padding:4px 0}
.article-author-link{display:inline-block;padding:4px 0;margin:-4px 0}

/* ---------- Post lists on small phones ----------
   A long single-word category pill (e.g. "UNCATEGORIZED") plus the "x minutes
   ago" stamp couldn't fit the text column at 320px, so the whole row grew
   wider than the screen. The column may now shrink, the stamp wraps under
   the pill when needed, and an extreme pill truncates instead. */
.feed-item > div{min-width:0}
.feed-item .meta{flex-wrap:wrap;row-gap:6px}
.feed-item .meta .pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
@media (max-width:960px){
  .feed-item{grid-template-columns:120px minmax(0,1fr)}
}

/* ---------- Header: current section ----------
   The category the visitor is in (or the article's main category) is shown
   in pink. --pink-text rather than --pink: the brighter pink is only 3.6:1 on
   white for 16px text; this one passes AA and switches to a lighter pink in
   dark mode. */
nav.main a.is-current-section,
nav.main .is-current-section > a,
nav.main a[aria-current="page"]{color:var(--pink-text)}
.drawer-link.is-current-section,
.acc-head.is-current-section,
.acc-body li a.is-current-section{color:var(--pink-text)}

/* ---------- Breadcrumb home button: keep the icon centred ----------
   The tap-area rule for breadcrumb text links used to match the home link too
   and switched it from flex to inline-block with vertical padding, pushing the
   house icon to the top-left of its circle. It now skips the home link (which
   is already 30x30px), and the home link's centring is pinned explicitly. */
.ge-crumb.ge-crumb-home a{display:flex;align-items:center;justify-content:center;padding:0;line-height:0}


/* ---------- Category pages ----------
   Header: name + RSS + Follow + description, with the category's own banner
   (uncropped, cut-corner frame). Then the two newest stories as large cards
   with a top-right cut, the second set lower (magazine-style), then the list. */
.ge-cat-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:28px 56px;align-items:center;padding-top:40px}
.ge-cat-hero.has-image{grid-template-columns:minmax(0,1fr) minmax(0,560px)}
.ge-cat-hero-text{min-width:0}
.ge-cat-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.ge-cat-title{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(36px,4.6vw,58px);line-height:1;letter-spacing:-.02em;overflow-wrap:anywhere}
.ge-cat-actions{display:flex;align-items:center;gap:10px}
.ge-cat-rss{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--pink-text);text-decoration:none;transition:background .15s ease}
.ge-cat-rss svg{width:26px;height:26px;fill:currentColor}
.ge-cat-rss:hover,.ge-cat-rss:focus-visible{background:var(--surface)}
.ge-cat-follow{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--text);font-family:var(--display);font-weight:800;font-size:14px;text-decoration:none;transition:border-color .15s ease,color .15s ease}
.ge-cat-follow svg{width:17px;height:17px;fill:currentColor}
.ge-cat-follow:hover,.ge-cat-follow:focus-visible{border-color:var(--pink);color:var(--pink-text)}
.ge-cat-desc{max-width:62ch;margin:16px 0 0;font-size:18px;line-height:1.55;color:var(--muted)}
.ge-cat-desc p{margin:0 0 10px}
.ge-cat-desc p:last-child{margin-bottom:0}
.ge-cat-desc a{color:var(--pink-text);text-decoration:underline;text-underline-offset:3px}
.ge-cat-subs{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ge-cat-sub{display:inline-flex;align-items:center;min-height:34px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-decoration:none}
.ge-cat-sub:hover,.ge-cat-sub:focus-visible{border-color:var(--pink);color:var(--pink-text)}

.ge-cat-banner{--cc:34px;margin:0;padding:4px;background:linear-gradient(135deg,var(--pink),#7c3aed);
  clip-path:polygon(0 0,calc(100% - var(--cc)) 0,100% var(--cc),100% 100%,var(--cc) 100%,0 calc(100% - var(--cc)))}
.ge-cat-banner-inner{overflow:hidden;background:var(--surface);
  clip-path:polygon(0 0,calc(100% - var(--cc) + 3px) 0,100% calc(var(--cc) - 3px),100% 100%,calc(var(--cc) - 3px) 100%,0 calc(100% - var(--cc) + 3px))}
.ge-cat-banner-img{display:block;width:100%;height:auto;max-width:none}

.ge-cat-featured{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:48px;align-items:start;padding-top:52px}
.ge-cat-featured.is-single{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)}
.ge-cat-card{min-width:0}
.ge-cat-card.is-second{margin-top:88px}
.ge-cat-card-media{--cc:46px;display:block;padding:4px;background:linear-gradient(135deg,var(--pink),var(--pink-2));
  clip-path:polygon(0 0,calc(100% - var(--cc)) 0,100% var(--cc),100% 100%,0 100%)}
.ge-cat-card.is-second .ge-cat-card-media{background:linear-gradient(135deg,#c026d3,#7c3aed)}
.ge-cat-card-media .ph{height:auto;aspect-ratio:16/10;border-radius:0;
  clip-path:polygon(0 0,calc(100% - var(--cc) + 3px) 0,100% calc(var(--cc) - 3px),100% 100%,0 100%)}
.ge-cat-card-media .ph img{transition:transform .35s ease}
.ge-cat-card:hover .ge-cat-card-media .ph img{transform:scale(1.03)}
.ge-cat-kicker{display:inline-block;margin:16px 0 4px;padding:5px 0;line-height:1.2;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--pink-text);text-decoration:none}
.ge-cat-kicker:hover,.ge-cat-kicker:focus-visible{text-decoration:underline;text-underline-offset:3px}
.ge-cat-card-title{margin:0 0 14px;font-family:var(--display);font-weight:900;font-size:clamp(24px,2.3vw,34px);line-height:1.14;letter-spacing:-.01em}
.ge-cat-card-title a{color:var(--text);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;transition:color .15s ease}
.ge-cat-card-title a:hover,.ge-cat-card-title a:focus-visible{color:var(--pink-text)}
.ge-cat-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font-size:13px;color:var(--muted)}
.ge-cat-card-author{font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.ge-cat-card-dot{width:4px;height:4px;border-radius:50%;background:var(--pink)}
.ge-cat-card-time{letter-spacing:.04em}
.ge-cat-empty{margin:0 0 24px}
.ge-cat-feed{padding-top:64px}

@media (max-width:1080px){
  .ge-cat-hero.has-image{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px 36px}
}
@media (max-width:860px){
  .ge-cat-hero,.ge-cat-hero.has-image{grid-template-columns:minmax(0,1fr);padding-top:28px}
  .ge-cat-banner{--cc:24px;max-width:640px}
}
@media (max-width:760px){
  .ge-cat-featured,.ge-cat-featured.is-single{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:36px}
  .ge-cat-card.is-second{margin-top:0}
  .ge-cat-card-media{--cc:30px}
  .ge-cat-desc{font-size:16px}
  .ge-cat-feed{padding-top:44px}
}
@media (prefers-reduced-motion:reduce){
  .ge-cat-card:hover .ge-cat-card-media .ph img{transform:none}
}


/* ---------- Live search suggestions ---------- */
.ge-live-results{margin-top:10px;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -22px rgba(0,0,0,.45);overflow:hidden;text-align:left}
.ge-live-results[hidden]{display:none}
.ge-live-status{margin:0;padding:12px 16px 4px;font-size:14px;color:var(--muted)}
.ge-live-status:empty{display:none}
.ge-live-list{position:relative;max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;padding:6px}
.ge-live-cats{display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px 10px}
.ge-live-cat{display:inline-flex;align-items:center;min-height:32px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);text-decoration:none}
.ge-live-cat[aria-selected="true"]{border-color:var(--pink);color:var(--pink-text)}
.ge-live-option{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;min-height:56px;padding:8px;border-radius:10px;color:var(--text);text-decoration:none}
.ge-live-option[aria-selected="true"]{background:var(--surface)}
.ge-live-thumb{display:block;width:64px;height:40px;border-radius:6px;object-fit:cover;background:var(--surface-2)}
.ge-live-thumb-empty{background:linear-gradient(135deg,var(--pink),#7c3aed);opacity:.35}
.ge-live-body{min-width:0}
.ge-live-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--display);font-weight:800;font-size:15px;line-height:1.25;color:var(--text)}
.ge-live-title mark{background:none;color:var(--pink-text)}
.ge-live-meta{display:block;margin-top:3px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ge-live-meta-cat{font-family:var(--display);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pink-text)}
.ge-live-all{display:flex;align-items:center;justify-content:center;min-height:44px;margin:4px 2px 2px;padding:8px 12px;border-radius:10px;background:var(--surface);
  font-family:var(--display);font-weight:800;font-size:14px;color:var(--pink-text);text-decoration:none}
.ge-live-all[aria-selected="true"]{background:var(--surface-2)}
@media (hover:hover){
  .ge-live-option:hover{background:var(--surface)}
  .ge-live-cat:hover{border-color:var(--pink);color:var(--pink-text)}
  .ge-live-all:hover{background:var(--surface-2)}
}
.drawer .ge-live-results{margin:-20px 0 26px}
.header-search .ge-live-results{max-width:none}

/* ---------- Long unbroken words in headlines ----------
   A headline containing a very long word or pasted URL could force the
   homepage hero and "Latest" column wider than a phone screen (grid items
   default to min-width:auto). Columns may now shrink and such words wrap. */
.hero-grid > *,.cardrow > *,.shorts-row > *{min-width:0}
.lead h1,.rail-item h3,.gcard h3,.feed-item h2,.feed-item h3,.trend h4,.pop p,.short h3,.article h1,.ge-cat-card-title,.ge-live-title{overflow-wrap:anywhere}


/* ---------- "Add as a preferred source" scroll dock ----------
   Slides up once the reader is into the story. The first time it appears it
   brings a short scrim with it so the page falls back and the dock is the only
   thing in focus; the scrim then clears itself, because a permanent one would
   be a layout that interferes with reading. Ad containers sit ABOVE the scrim
   (see .ge-dock-scrim z-index vs the rule below): "Content obscuring
   Google-served ads" does not allow site content to cover a Google ad, so the
   dim passes under every unit rather than over it. */
.ge-dock-scrim{position:fixed;inset:0;z-index:40;background:rgba(6,7,10,.72);
  opacity:0;pointer-events:none;transition:opacity .45s ease}
.ge-dock-scrim.is-on{opacity:1}
/* While the reader is scrolling the scrim out, opacity is set frame by frame
   from scroll position, so the CSS transition must get out of the way. */
.ge-dock-scrim.is-tracking{transition:none}

/* Ads are lifted clear of the scrim so nothing ever dims a Google ad - but
   kept UNDER the sticky header (z-index 50) so an ad never paints over site
   chrome as it scrolls past. Stacking order end to end:
   scrim 40 < ads 45 < sticky header 50 < dock 60 < drawer overlay 90 < drawer 100. */
.ge-ad,.google-auto-placed{position:relative;z-index:45}

.ge-dock{position:fixed;left:50%;bottom:calc(16px + var(--ge-dock-lift,0px));transform:translate(-50%,140%);
  z-index:60;width:min(680px,calc(100vw - 24px));opacity:0;
  transition:transform .5s cubic-bezier(.2,.8,.25,1),opacity .35s ease,bottom .25s ease}
.ge-dock.is-in{transform:translate(-50%,0);opacity:1}
.ge-dock-inner{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.03) inset}
.ge-dock.is-pulsing .ge-dock-inner{animation:ge-dock-pulse 1.6s ease-out 2}
@keyframes ge-dock-pulse{
  0%{box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 0 color-mix(in srgb,var(--pink) 55%,transparent)}
  70%{box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 14px rgba(0,0,0,0)}
  100%{box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 0 rgba(0,0,0,0)}
}
.ge-dock-icon{flex:none;width:40px;height:40px;border-radius:50%;background:#4285F4;color:#fff;
  display:flex;align-items:center;justify-content:center}
.ge-dock-icon svg{width:20px;height:20px;fill:currentColor;display:block}
.ge-dock-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ge-dock-text strong{font-family:var(--ui);font-size:15px;font-weight:800;color:var(--text);line-height:1.2}
.ge-dock-text small{font-size:12.5px;color:var(--muted);line-height:1.35}
.ge-dock-btn{flex:none;padding:11px 18px;border-radius:999px;background:var(--button-bg);color:var(--button-text);
  font-family:var(--ui);font-weight:800;font-size:14px;white-space:nowrap;transition:transform .15s ease,filter .15s ease}
.ge-dock-btn:hover,.ge-dock-btn:focus-visible{color:var(--button-text);transform:translateY(-1px);filter:brightness(1.08)}
.ge-dock-close{flex:none;width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.ge-dock-close svg{width:15px;height:15px}
.ge-dock-close:hover{color:var(--text);background:var(--surface-2)}

@media (max-width:620px){
  .ge-dock{bottom:calc(10px + var(--ge-dock-lift,0px));width:calc(100vw - 16px)}
  .ge-dock-inner{gap:11px;padding:12px;border-radius:14px;flex-wrap:wrap}
  .ge-dock-text{flex:1 1 100%;order:2}
  .ge-dock-text small{display:none}
  .ge-dock-icon{order:1;width:34px;height:34px}
  .ge-dock-close{order:1;margin-left:auto}
  .ge-dock-btn{order:3;flex:1 1 100%;text-align:center;padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){
  .ge-dock{transition:opacity .2s ease}
  .ge-dock.is-pulsing .ge-dock-inner{animation:none}
  .ge-dock-scrim{transition:none}
}

/* ---------- Breathing room for Google's own containers ----------
   Auto ads inserts bare .google-auto-placed divs with no margin of their own.
   Measured on the live site: 0px between such a unit and the post card above
   and below it on /category/news/, and 22px inside a story where the theme
   gives its own units 38px. An ad sitting flush against a card's headline link
   is the case "Encouraging accidental clicks" describes - "Be careful when
   placing links ... near ads". Google's containers get the same spacing the
   theme gives its own. Margin only: nothing is resized, clipped or hidden. */
.google-auto-placed{margin-top:38px!important;margin-bottom:38px!important}
.feed-grid .google-auto-placed,
.ge-cat-feed .google-auto-placed,
.ge-home-feed .google-auto-placed{margin-top:34px!important;margin-bottom:34px!important}
@media (max-width:620px){
  .google-auto-placed{margin-top:32px!important;margin-bottom:32px!important}
}


/* ---------- Site logo (moved out of Appearance > Customize > Additional CSS)
   These use `header.site .site-logo` (specificity 0,2,1) so they intentionally
   override the earlier `.site-logo img` rule near the top of this file, which
   caps the logo at 44px. Keeping them last preserves the behaviour the site
   already had when this lived in the Customizer. ---------- */
header.site .site-logo {
  flex-shrink: 0;
}

header.site .site-logo img {
  display: block;
  width: 240px;
  height: auto;
  max-height: 60px;
  border-radius: 8px;
}

/* Smaller size for mobile */
@media (max-width: 767px) {
  header.site .site-logo img {
    width: 180px;
    max-height: 45px;
  }
}

/* Keep the animated logo legible on dark backgrounds */
@media (prefers-color-scheme: dark) {
  header.site .site-logo img {
    filter:
      drop-shadow(1px 0 0 #fff)
      drop-shadow(-1px 0 0 #fff)
      drop-shadow(0 1px 0 #fff)
      drop-shadow(0 -1px 0 #fff) !important;
  }
}