/* ============================================================================
   foxiz-blog.css — the blog section rebuilt to match the Foxiz "Digital Haven"
   demo (https://foxiz.io/digitalhaven/) exactly: same grid geometry, same card
   anatomy, same type scale, same breakpoints.

   Every number in here was measured off the live demo rather than eyeballed:
     container      1240px content box inside 20px gutters
     column split   915 / 305 (listing), 727 + 80px share rail / 403 (single)
     grid gap       20px
     media radius   13px      box radius        10px
     body type      Reddit Sans 16px / 1.7, ink #070a26 on #fff
     titles         w800, letter-spacing -0.03em (single-post h1 is w900/-0.04em)
     category label 11px / w600 / uppercase / 0.5px tracking, 8px colour dot

   The one deliberate departure from the demo: Foxiz's red brand accent is
   replaced by Blizznex blue (--blue, #0059e3), so the section still belongs to
   this site. Everything else is a faithful reproduction.

   Scoped under .fx so none of it leaks into the rest of the site, and loaded
   after style.css so it wins where the two overlap. The site's own header,
   menu overlay and footer are untouched — this file only governs what sits
   between them.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */
.fx{
  --fx-ink:#070a26;
  --fx-bg:#fff;
  --fx-surface:#fff;
  --fx-page:#fff;
  --fx-meta:#5b5f78;
  --fx-meta-strong:#070a26;
  --fx-line:#e6e8ef;
  --fx-soft:#f4f5f9;
  --fx-accent:#0059e3;              /* Blizznex blue in place of Foxiz red */
  --fx-accent-ink:#fff;
  --fx-shadow:0 4px 20px rgba(7,10,38,.06);
  --fx-shadow-hover:0 10px 30px rgba(7,10,38,.12);
  --fx-r:13px;                      /* media radius */
  --fx-rbox:10px;                   /* card / box radius */
  --fx-max:1240px;
  --fx-gap:20px;
  /* the site header is fixed and overlays the page, so the blog reserves
     exactly its height and sticks its own bar directly underneath. The real
     value is measured at runtime by foxiz-blog.js; this is the fallback. */
  --fx-headroom:100px;
  --fx-wash:linear-gradient(180deg,rgba(7,10,38,0) 25%,rgba(7,10,38,.82) 100%);
}

/* Dark mode. Foxiz ships one and the toggle lives in the section's own bar, so
   this is a real theme swap (not a filter) — every token above is re-pointed
   and the rest of the file reads through them. */
.fx[data-fx-theme="dark"]{
  --fx-ink:#fff;
  --fx-bg:#16181f;
  --fx-surface:#1d2029;
  --fx-page:#16181f;
  --fx-meta:#a3a8bd;
  --fx-meta-strong:#fff;
  --fx-line:#2b2f3c;
  --fx-soft:#22262f;
  --fx-shadow:0 4px 20px rgba(0,0,0,.35);
  --fx-shadow-hover:0 10px 30px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------ foundation -- */
.fx{
  font-family:"Reddit Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--fx-ink);
  background:var(--fx-page);
  -webkit-font-smoothing:antialiased;
}
.fx *{box-sizing:border-box}
.fx a{color:inherit;text-decoration:none}
.fx img{max-width:100%;display:block}
.fx h1,.fx h2,.fx h3,.fx h4,.fx h5{
  font-family:inherit;font-weight:800;letter-spacing:-.03em;line-height:1.25;margin:0;
}
.fx ::selection{background:var(--fx-accent);color:#fff}

/* Gutters come from the site's own --pad-x (the same variable #header and
   .section use, and the same one style.css re-declares at <=700px), so the
   blog's left and right edges line up with the header logo and menu button at
   every width instead of being capped at the demo's 1240 and floating in the
   middle of a wide monitor. */
.fx-container{width:100%;margin:0 auto;padding:0 var(--pad-x,40px)}

/* The site's own <main> owns page padding for every other page; the blog needs
   Foxiz's own rhythm instead, so the wrapper resets it and re-declares. */
/* padding-bottom only — the horizontal gutters come from .fx-container, which
   this class is always applied alongside */
.fx-main{padding-bottom:50px}
.fx-row{display:flex;gap:var(--fx-gap);align-items:flex-start}
.fx-col-main{flex:1 1 auto;min-width:0}
.fx-col-side{flex:0 0 305px;width:305px}
/* the archive rail is wider than the index's, matching the demo */
.fx-col-side-wide{flex:0 0 360px;width:360px}

/* ================================================================ SUB BAR ==
   Foxiz's secondary navigation strip: category nav + search + theme toggle on
   the first row, trending "Quick Links" + newsletter button on the second.
   Sits directly under the site header, sticky like the demo's.
   ========================================================================= */
.fx{padding-top:var(--fx-headroom)}
.fx-subbar{
  background:var(--fx-page);
  border-bottom:1px solid var(--fx-line);
  position:sticky;top:var(--fx-headroom);z-index:60;
}
.fx-subbar-row{
  display:flex;align-items:center;gap:18px;
  height:52px;
}
.fx-nav{display:flex;align-items:center;gap:0;flex:1 1 auto;min-width:0;overflow:visible}
.fx-nav-item{position:relative;display:flex;align-items:center}
/* the little square separator Foxiz puts between top-level nav items */
.fx-nav-item + .fx-nav-item::before{
  content:"";width:5px;height:5px;background:var(--fx-accent);
  margin:0 14px;flex:none;border-radius:1px;
}
.fx-nav-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--fx-ink);white-space:nowrap;padding:6px 0;
  transition:color .2s ease;
}
.fx-nav-link:hover,.fx-nav-item.is-open .fx-nav-link{color:var(--fx-accent)}
.fx-nav-link svg{width:14px;height:14px;flex:none}
.fx-nav-caret{width:9px;height:9px;transition:transform .2s ease}
.fx-nav-item.is-open .fx-nav-caret{transform:rotate(180deg)}

/* -- mega menu ------------------------------------------------------------ */
.fx-mega{
  position:absolute;top:100%;left:-20px;z-index:80;
  width:min(760px,86vw);
  background:var(--fx-surface);
  border:1px solid var(--fx-line);
  border-radius:var(--fx-rbox);
  box-shadow:0 20px 50px rgba(7,10,38,.14);
  padding:22px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
}
.fx-nav-item.is-open .fx-mega{opacity:1;visibility:visible;transform:translateY(0)}
.fx-mega-card{display:block}
.fx-mega-thumb{
  display:block;aspect-ratio:16/10;border-radius:var(--fx-r);overflow:hidden;
  background:var(--fx-soft);margin-bottom:10px;
}
.fx-mega-thumb img{width:100%;height:100%;object-fit:cover}
.fx-mega-title{display:block;font-size:14px;font-weight:800;letter-spacing:-.03em;line-height:1.3}
.fx-mega-card:hover .fx-mega-title{color:var(--fx-accent)}
.fx-mega-empty{grid-column:1/-1;color:var(--fx-meta);font-size:14px}

/* -- header tools --------------------------------------------------------- */
.fx-tools{display:flex;align-items:center;gap:14px;flex:none}
.fx-tool{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;color:var(--fx-ink);
  background:none;border:none;cursor:pointer;transition:background .2s ease,color .2s ease;
}
.fx-tool:hover{background:var(--fx-soft);color:var(--fx-accent)}
.fx-tool svg{width:17px;height:17px}
.fx-search-btn{
  width:auto;border-radius:20px;padding:0 12px;gap:7px;font-size:13px;font-weight:600;
}
.fx-theme-btn .fx-icon-moon{display:none}
.fx[data-fx-theme="dark"] .fx-theme-btn .fx-icon-sun{display:none}
.fx[data-fx-theme="dark"] .fx-theme-btn .fx-icon-moon{display:block}

/* -- quick links row ------------------------------------------------------ */
.fx-quick{
  display:flex;align-items:center;gap:0;
  height:44px;border-top:1px solid var(--fx-line);
}
.fx-quick-label{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:13px;font-weight:600;color:var(--fx-meta);margin-right:22px;
}
.fx-quick-label svg{width:14px;height:14px}
.fx-quick-list{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;flex:1 1 auto}
.fx-quick-list::-webkit-scrollbar{display:none}
.fx-quick-list a{
  font-size:13px;font-weight:600;color:var(--fx-ink);white-space:nowrap;
  transition:color .2s ease;
}
.fx-quick-list a:hover{color:var(--fx-accent)}
.fx-quick-list a + a::before{content:"-";color:var(--fx-meta);margin:0 12px;font-weight:400}
.fx .fx-quick-list a.is-active{color:var(--fx-accent)}
.fx .fx-newsletter-btn{
  flex:none;margin-left:18px;
  display:inline-flex;align-items:center;justify-content:center;
  height:28px;padding:0 16px;border-radius:5px;
  background:var(--fx-accent);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.2px;
  transition:filter .2s ease;
}
.fx .fx-newsletter-btn:hover{filter:brightness(1.12)}

/* -- search overlay ------------------------------------------------------- */
/* z-index has to clear the site's own fixed header (520) or the logo and menu
   button float on top of the overlay */
.fx-search{
  position:fixed;inset:0;z-index:900;
  background:#070a26;color:#fff;   /* set here so `.fx a{color:inherit}` resolves white */
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:16vh;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.fx-search.is-open{opacity:1;visibility:visible}
.fx-search-inner{width:min(680px,88vw)}
.fx-search-field{display:flex;align-items:center;gap:14px;border-bottom:2px solid rgba(255,255,255,.35);padding-bottom:14px}
.fx-search-field svg{width:24px;height:24px;color:#fff;flex:none}
.fx-search-field input{
  flex:1;background:none;border:none;outline:none;
  font-family:inherit;font-size:clamp(22px,4vw,34px);font-weight:800;letter-spacing:-.03em;
  color:#fff;
}
.fx-search-field input::placeholder{color:rgba(255,255,255,.45)}
.fx-search-hint{color:rgba(255,255,255,.6);font-size:13px;margin-top:14px}
.fx-search-results{margin-top:26px;max-height:46vh;overflow-y:auto}
.fx-search-result{
  display:flex;gap:14px;align-items:center;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.12);color:#fff;
}
.fx .fx-search-result:hover{color:#9dc0ff}
.fx-search-result img{width:56px;height:44px;object-fit:cover;border-radius:7px;flex:none}
.fx-search-result span{font-size:15px;font-weight:700;letter-spacing:-.02em;line-height:1.35}
.fx-search-close{
  position:absolute;top:26px;right:30px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.fx-search-close svg{width:18px;height:18px}

/* ============================================================= CARD PARTS ==
   Shared atoms: the category label with its colour dot, the byline row, and
   the image holder. Foxiz reuses exactly these three across every card type,
   which is what makes the listing read as one system.
   ========================================================================= */
.fx-cat{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  line-height:1;color:var(--fx-ink);
}
.fx-cat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fx-dot,var(--fx-accent));flex:none}
.fx-cats{display:flex;flex-wrap:wrap;gap:12px}

/* the filled pill variant Foxiz uses on dark overlay cards */
.fx-cat-pill{
  display:inline-flex;align-items:center;
  font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;line-height:1;
  padding:5px 8px;border-radius:4px;
  background:var(--fx-dot,var(--fx-accent));color:#fff;
}
.fx-cat-pill::before{display:none}

.fx-meta{
  display:flex;align-items:center;flex-wrap:wrap;
  font-size:12px;font-weight:600;color:var(--fx-meta);line-height:1.7;
}
.fx-meta a,.fx-meta .fx-meta-name{color:var(--fx-meta-strong);font-weight:700}
.fx-meta-sep{margin:0 7px;color:var(--fx-meta);opacity:.7;font-weight:400}
.fx-meta-sep::before{content:"//"}

/* ---------------------------------------------------------------- media --
   Every image slot is a fixed-ratio box and every image inside it is
   `object-fit:cover`. That combination is what keeps uploads looking
   professional whatever shape they arrive in: a portrait photo, a wide
   screenshot and a square logo all fill the same card without ever being
   squashed or stretched — the box crops, it never distorts.

   The tinted --fx-dot background behind each slot means a missing or slow
   image reads as a deliberate colour block rather than a hole. */
.fx-thumb{
  display:block;position:relative;overflow:hidden;
  border-radius:var(--fx-r);
  background:color-mix(in srgb,var(--fx-dot,var(--fx-accent)) 14%,var(--fx-soft));
}
.fx-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .55s cubic-bezier(.2,.6,.2,1)}
/* an image that 404s is removed from flow by foxiz-blog.js; this is the
   belt-and-braces version for anything that fails before the script runs */
.fx img.is-broken{display:none}
.fx-card:hover .fx-thumb img{transform:scale(1.055)}
/* every card is an <a> with <span> children (so the whole card is one link and
   the markup stays valid) — these turn those spans back into blocks */
.fx-title{display:block;font-weight:800;letter-spacing:-.03em;line-height:1.25;color:var(--fx-ink);transition:color .2s ease}
.fx-feature-media,.fx-ovl-media,.fx-thumb{display:block}
.fx-feature-body,.fx-ovl-body,.fx-ls-body,.fx-listbox-body{display:flex;flex-direction:column;align-items:flex-start}
.fx-card:hover .fx-title{color:var(--fx-accent)}

/* ------------------------------------------------- overlay card (feature) --
   .p-overlay-1 on the demo: 597x358, media fills the card, gradient wash,
   content pinned to the bottom-left with 30px inset.                         */
/* 597x358 on the demo — kept as a ratio rather than a fixed height so the card
   grows in proportion on a wide screen instead of letterboxing */
.fx-feature{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--fx-r);
  /* width:100% is load-bearing — with an auto width, `aspect-ratio` resolves
     the width *from* min-height on narrow screens and the card overflows the
     viewport. Pinning the width leaves the ratio governing height only. */
  width:100%;aspect-ratio:597/358;min-height:358px;max-height:460px;color:#fff;
  background:color-mix(in srgb,var(--fx-dot,var(--fx-accent)) 22%,#0b1020);
}
.fx-feature .fx-feature-media{position:absolute;inset:0}
.fx-feature .fx-feature-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.fx-feature:hover .fx-feature-media img{transform:scale(1.05)}
.fx-feature::after{content:"";position:absolute;inset:0;background:var(--fx-wash)}
.fx-feature-body{position:absolute;inset:0;z-index:2;padding:30px;display:flex;flex-direction:column;justify-content:flex-end}
.fx-feature .fx-cat{color:#fff;margin-bottom:12px}
.fx-feature-title{font-size:35px;line-height:1.25;font-weight:800;letter-spacing:-.03em;color:#fff;margin:0 0 12px;max-width:560px}
.fx-feature .fx-meta{color:rgba(255,255,255,.82)}
.fx-feature .fx-meta a,.fx-feature .fx-meta .fx-meta-name{color:#fff}
.fx-feature:hover .fx-feature-title{color:#fff}

/* ------------------------------------------------------ small list (80px) --
   .p-list-small-2: 80x80 thumb on the left, text right, 25px between rows.   */
.fx-list-small{background:var(--fx-surface);border-radius:var(--fx-rbox);padding:20px;box-shadow:var(--fx-shadow)}
/* Rows sit top-aligned on a fixed 25px rhythm — never distributed to fill the
   card. Spreading them to match the feature's height looks fine with the
   demo's three long-titled posts and badly wrong with two, which is exactly
   the case a real blog hits early on. */
.fx-list-small-inner{display:flex;flex-direction:column;gap:25px}
.fx-ls-item{display:flex;gap:15px;align-items:flex-start}
.fx-ls-item .fx-thumb{width:80px;height:80px;flex:none}
.fx-ls-body{min-width:0;flex:1}
.fx-ls-item .fx-cat{margin-bottom:8px}
.fx-ls-title{font-size:15px;line-height:1.25;font-weight:800;letter-spacing:-.03em}

/* ------------------------------------------------- box card (no image row) --
   .p-grid-box-2 — the three white text-only cards under the hero.            */
.fx-box{
  background:var(--fx-surface);border-radius:var(--fx-rbox);padding:20px;
  box-shadow:var(--fx-shadow);height:100%;
  display:flex;flex-direction:column;
  transition:box-shadow .25s ease,transform .25s ease;
}
.fx-box:hover{box-shadow:var(--fx-shadow-hover)}
.fx-box .fx-cat{margin-bottom:10px}
.fx-box-title{font-size:17px;line-height:1.28;font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.fx-box .fx-meta{margin-top:auto}

/* ------------------------------------------------------- list box (180px) --
   .p-list-box-2 — image left 180x144, text right, white card, soft shadow.   */
.fx-listbox{
  display:flex;gap:0;background:var(--fx-surface);border-radius:var(--fx-rbox);
  box-shadow:var(--fx-shadow);overflow:hidden;height:100%;
  transition:box-shadow .25s ease;
}
.fx-listbox:hover{box-shadow:var(--fx-shadow-hover)}
.fx-listbox .fx-thumb{width:180px;flex:none;border-radius:0;align-self:stretch}
.fx-listbox .fx-thumb img{height:100%}
.fx-listbox-body{padding:18px 20px;display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1}
.fx-listbox .fx-cat{margin-bottom:10px}
.fx-listbox-title{font-size:18px;line-height:1.3;font-weight:800;letter-spacing:-.028em;margin-bottom:10px}

/* ------------------------------------------------------------ grid card --
   Landscape thumbnail on top, text underneath. Used wherever a row is three
   across or fewer, where the portrait overlay card would tower. */
.fx-gridcard{display:flex;flex-direction:column;gap:0}
.fx-gridcard-thumb{aspect-ratio:16/10;width:100%;margin-bottom:14px}
.fx-gridcard-body{display:flex;flex-direction:column;align-items:flex-start}
.fx-gridcard .fx-cat{margin-bottom:10px}
.fx-gridcard-title{font-size:18px;line-height:1.3;font-weight:800;letter-spacing:-.03em;margin-bottom:10px}

/* --------------------------------------------------- overlay grid (252px) --
   .p-overlay-2 — the tall image cards in the AI & Innovation / Cybersecurity
   rows: 348px tall, pill category, white title, read-time footer.            */
.fx-ovl{
  position:relative;display:block;overflow:hidden;border-radius:var(--fx-r);
  /* max-height stops the portrait ratio running away when the row is wide
     (a four-up row on a large monitor would otherwise be 550px+ tall) */
  width:100%;aspect-ratio:232/348;min-height:348px;max-height:430px;color:#fff;
  background:color-mix(in srgb,var(--fx-dot,var(--fx-accent)) 22%,#0b1020);
}
.fx-ovl-media{position:absolute;inset:0}
.fx-ovl-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.fx-ovl:hover .fx-ovl-media img{transform:scale(1.055)}
.fx-ovl::after{content:"";position:absolute;inset:0;background:var(--fx-wash)}
.fx-ovl-body{position:absolute;inset:0;z-index:2;padding:20px;display:flex;flex-direction:column;justify-content:flex-end}
.fx-ovl .fx-cat-pill{align-self:flex-start;margin-bottom:12px}
.fx-ovl-title{font-size:17px;line-height:1.28;font-weight:800;letter-spacing:-.03em;color:#fff;margin-bottom:14px}
.fx-ovl-read{font-size:12px;font-weight:600;color:rgba(255,255,255,.85)}
.fx-ovl:hover .fx-ovl-title{color:#fff}

/* ============================================================ BLOCK HEADS ==
   "● Tech News                                              View All ···"    */
.fx-blockhead{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:0 0 20px;
}
.fx-blockhead-title{
  display:flex;align-items:center;gap:12px;
  font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1.2;
}
.fx-blockhead-dot{width:13px;height:13px;border-radius:50%;background:var(--fx-dot,var(--fx-accent));flex:none}
.fx .fx-viewall{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-size:13px;font-weight:600;color:var(--fx-meta);transition:color .2s ease;
}
.fx .fx-viewall:hover{color:var(--fx-accent)}
.fx-block{margin-bottom:40px}

/* grid helpers matching Foxiz's .rb-col-N */
.fx-grid{display:grid;gap:var(--fx-gap)}
.fx-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fx-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fx-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fx-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ================================================================== HERO ==
   The demo's lead block: [ 597 feature | 298 mini-list ] over a 3-up row of
   box cards, all inside the 915 main column, with the 305 sidebar alongside.
   ========================================================================= */
.fx-hero{padding:20px 0 0}
.fx-hero-top{display:flex;gap:var(--fx-gap);align-items:stretch;margin-bottom:20px}
.fx-hero-feature{flex:1 1 597px;min-width:0;display:flex}
.fx-hero-feature .fx-feature{width:100%}
/* align-self:flex-start so the card is only as tall as the posts in it. With a
   full-height card, any shortfall against the feature became dead space inside
   the card's own border; this way it ends where its content ends. */
.fx-hero-list{flex:0 0 298px;width:298px;align-self:flex-start}

/* the "- Sponsored -" divider the demo runs between the hero and the blocks */
.fx-sponsored{
  text-align:center;font-size:12px;color:var(--fx-meta);
  padding:22px 0 30px;letter-spacing:.02em;
}

/* ============================================================== SIDEBAR ==== */
/* sticks clear of the fixed site header plus this section's own sticky bar */
.fx-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--fx-headroom) + 116px)}
.fx-widget{background:var(--fx-surface);border-radius:var(--fx-rbox);box-shadow:var(--fx-shadow);padding:20px}
.fx-widget-head{
  display:flex;align-items:center;gap:10px;
  font-size:20px;font-weight:800;letter-spacing:-.03em;margin-bottom:16px;
}
.fx-widget-head::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--fx-accent);flex:none}
.fx-arch{display:flex;flex-direction:column;gap:10px}
.fx-arch-item{
  display:flex;align-items:center;gap:14px;
  background:var(--fx-page);border:1px solid var(--fx-line);
  border-radius:var(--fx-rbox);padding:10px 14px;
  transition:border-color .2s ease,transform .2s ease;
}
.fx-arch-item:hover{border-color:var(--fx-accent);transform:translateX(2px)}
/* The category initial is painted by the element itself and the thumbnail sits
   on top of it, so a category whose newest post has a missing image still
   shows a lettered disc instead of an empty circle. */
.fx-arch-thumb{
  position:relative;
  width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--fx-dot,var(--fx-accent));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:15px;font-weight:800;letter-spacing:-.02em;
}
.fx-arch-thumb::before{content:attr(data-letter)}
.fx-arch-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-arch-name{font-size:16px;font-weight:800;letter-spacing:-.03em;line-height:1.25}
.fx-arch-count{font-size:12px;font-weight:600;color:var(--fx-meta)}

/* promo widget (the demo's survey card slot) */
.fx-promo{background:var(--fx-surface);border-radius:var(--fx-rbox);box-shadow:var(--fx-shadow);overflow:hidden}
.fx-promo-media{aspect-ratio:16/10;background:var(--fx-soft)}
.fx-promo-media img{width:100%;height:100%;object-fit:cover}
.fx-promo-body{padding:20px}
.fx-promo-body h4{font-size:17px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px;line-height:1.3}
.fx-promo-body p{font-size:14px;color:var(--fx-meta);margin:0 0 16px;line-height:1.6}
.fx .fx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 20px;border-radius:6px;
  background:var(--fx-accent);color:#fff;font-size:14px;font-weight:700;
  transition:filter .2s ease;
}
.fx .fx-btn:hover{filter:brightness(1.12)}
.fx-btn-block{width:100%}

/* ======================================================= ARCHIVE (category) =
   The demo's category page: a dotted-pattern band carrying the title, then a
   hero row (large overlay + two list boxes), then a list grid + sidebar.
   ========================================================================= */
/* the demo runs a shallow band of dots across the top of the archive title
   area — two rows deep, full bleed, then the title sits below it */
.fx-archive-head{
  position:relative;padding:24px 0 20px;
  border-bottom:1px solid var(--fx-line);
  margin-bottom:24px;
}
.fx-archive-head::before{
  content:"";position:absolute;top:0;left:0;right:0;height:28px;
  background-image:radial-gradient(var(--fx-line) 1.5px,transparent 1.5px);
  background-size:14px 14px;
  pointer-events:none;
}
.fx .fx-archive-title{font-size:30px;font-weight:800;letter-spacing:-.033em;line-height:1.2;margin:0}
.fx-archive-desc{font-size:15px;color:var(--fx-meta);margin:8px 0 0;max-width:60ch}
.fx-archive-crumbs{font-size:12px;font-weight:600;color:var(--fx-meta);margin-bottom:8px}
.fx-archive-crumbs a:hover{color:var(--fx-accent)}
.fx-archive-crumbs span{margin:0 7px;opacity:.6}

.fx-arch-hero{display:flex;gap:var(--fx-gap);margin-bottom:20px;align-items:stretch}
.fx-arch-hero-main{flex:1 1 508px;min-width:0;display:flex}
.fx-arch-hero-main .fx-feature{width:100%;min-height:300px}
.fx-arch-hero-main .fx-feature-body{min-height:300px}
.fx-arch-hero-side{flex:0 0 508px;display:flex;flex-direction:column;gap:20px;min-width:0}
.fx-arch-hero-side .fx-listbox{flex:1}

.fx-empty{
  background:var(--fx-surface);border-radius:var(--fx-rbox);box-shadow:var(--fx-shadow);
  padding:48px 30px;text-align:center;
}
.fx-empty h3{font-size:22px;margin-bottom:10px}
.fx-empty p{color:var(--fx-meta);margin:0 0 20px}

/* pagination */
.fx-pagination{display:flex;justify-content:center;gap:8px;margin-top:34px}
.fx .fx-page-link{
  min-width:38px;height:38px;padding:0 12px;border-radius:7px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fx-surface);box-shadow:var(--fx-shadow);
  font-size:14px;font-weight:700;
}
.fx .fx-page-link.is-current{background:var(--fx-accent);color:#fff}

/* =============================================================== SINGLE ====
   Full-width header (category, h1 50/60 w900, excerpt, byline + share row),
   then a two-column body with an 80px sticky share rail to the left of the
   727px content column and the 403px sidebar on the right.
   ========================================================================= */
.fx-single-head{padding:20px 0 10px}
.fx-single-head .fx-cat{margin-bottom:14px}
/* .fx prefix so this outranks the generic `.fx h1` heading defaults above —
   the demo's article headline is 50/60 at weight 900, not the 800/1.25 the
   rest of the headings use */
.fx .fx-single-title{
  font-size:50px;line-height:1.2;font-weight:900;letter-spacing:-.04em;
  margin:0 0 18px;
}
.fx-single-excerpt{
  font-size:18px;line-height:1.55;color:var(--fx-ink);opacity:.86;
  margin:0 0 22px;max-width:1000px;font-weight:400;
}
.fx-byline{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:6px}
.fx-byline-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.fx-avatar{
  width:28px;height:28px;border-radius:50%;flex:none;object-fit:cover;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:12px;font-weight:800;
}
.fx-byline .fx-meta{font-size:13px}
.fx-byline-role{color:var(--fx-meta);font-weight:600}

.fx-share-row{display:flex;align-items:center;gap:6px;flex:none}
.fx-share-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--fx-meta);margin-right:8px;
}
.fx-share-label svg{width:14px;height:14px}
.fx-share-btn{
  width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--fx-ink);background:none;border:none;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.fx-share-btn:hover{background:var(--fx-soft);color:var(--fx-accent)}
.fx-share-btn svg{width:16px;height:16px}
.fx-share-btn.is-copied{background:var(--fx-accent);color:#fff}

.fx-disclosure{
  font-size:13px;line-height:1.6;color:var(--fx-meta);
  margin:18px 0 22px;
}
.fx-disclosure b{color:var(--fx-ink)}

/* Ratio-locked to 16:9 and cropped, so a tall or oddly-shaped upload can't
   stretch the article header into a full-screen banner (which is what a bare
   width:100% does to a portrait image). */
.fx-single-hero{
  border-radius:var(--fx-r);overflow:hidden;margin:0 0 28px;
  width:100%;aspect-ratio:16/9;
  background:color-mix(in srgb,var(--fx-dot,var(--fx-accent)) 14%,var(--fx-soft));
}
.fx-single-hero img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.fx-figcaption{font-size:12px;color:var(--fx-meta);margin:8px 0 28px}

/* The demo's split is 80 rail + 727 text + 20 gap + 413 sidebar inside 1240.
   Here the container tracks the header width instead, so rather than pinning
   the block to 1240 and leaving it floating, the text column keeps a readable
   measure and the sidebar stays flush to the right edge — both edges line up
   with the header, and the slack lands in the middle where it reads as
   whitespace rather than as a broken column. */
.fx-single-body{display:flex;gap:var(--fx-gap);align-items:flex-start;justify-content:space-between}
.fx-single-ct{flex:0 1 auto;min-width:0;display:flex;gap:0}
.fx-single-main{width:min(800px,100%)}
.fx-single-body > .fx-col-side{flex:0 0 clamp(340px,30%,520px)}
.fx-lsl{flex:0 0 80px;width:80px;position:sticky;top:130px;align-self:flex-start;padding-top:4px}
.fx-lsl-label{
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--fx-meta);margin-bottom:14px;
}
.fx-lsl-list{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.fx-lsl-btn{
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fx-soft);color:var(--fx-ink);border:none;cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.fx-lsl-btn:hover{background:var(--fx-accent);color:#fff;transform:translateY(-2px)}
.fx-lsl-btn svg{width:16px;height:16px}

/* ---- article typography ------------------------------------------------- */
.fx-content{font-size:var(--fx-fs,16px);line-height:1.7;color:var(--fx-ink)}
.fx-content > * + *{margin-top:0}
.fx-content p{margin:0 0 24px;font-size:inherit;line-height:1.7;opacity:1}
.fx-content h2{font-size:calc(var(--fx-fs,16px) * 1.5625);line-height:1.25;font-weight:800;letter-spacing:-.03em;margin:34px 0 14px;scroll-margin-top:140px}
.fx-content h3{font-size:calc(var(--fx-fs,16px) * 1.3125);line-height:1.3;font-weight:800;letter-spacing:-.03em;margin:30px 0 12px;scroll-margin-top:140px}
.fx-content h4{font-size:calc(var(--fx-fs,16px) * 1.125);font-weight:800;margin:24px 0 10px;scroll-margin-top:140px}
.fx-content ul,.fx-content ol{margin:0 0 24px;padding-left:22px}
.fx-content li{margin-bottom:9px;line-height:1.7}
.fx-content li::marker{color:var(--fx-accent)}
.fx-content a{color:var(--fx-accent);text-decoration:underline;text-underline-offset:.18em}
/* height:auto so images dropped into article bodies keep their own aspect
   ratio — the fixed-ratio cropping above is for card slots only */
.fx-content img{width:100%;height:auto;border-radius:var(--fx-r);margin:6px 0 8px}
.fx-content figure{margin:0 0 26px}
.fx-content figcaption{font-size:12px;color:var(--fx-meta);margin-top:8px}
.fx-content strong,.fx-content b{font-weight:700}
.fx-content hr{border:none;border-top:1px solid var(--fx-line);margin:32px 0}
.fx-content table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:14px}
.fx-content th,.fx-content td{border:1px solid var(--fx-line);padding:10px 12px;text-align:left}
.fx-content th{background:var(--fx-soft);font-weight:700}
.fx-content code{background:var(--fx-soft);padding:2px 6px;border-radius:4px;font-size:.9em}
.fx-content pre{background:var(--fx-soft);padding:18px;border-radius:var(--fx-rbox);overflow-x:auto;margin:0 0 26px}
.fx-content pre code{background:none;padding:0}

/* Foxiz's pull-quote: no box, big tight type, a rule on the left, attribution
   in small caps underneath. */
.fx-content blockquote{
  margin:30px 0;padding:4px 0 4px 24px;
  border-left:3px solid var(--fx-accent);
}
.fx-content blockquote p{
  font-size:calc(var(--fx-fs,16px) * 1.375);line-height:1.35;font-weight:800;letter-spacing:-.03em;
  margin-bottom:10px;
}
.fx-content blockquote cite,.fx-content blockquote footer{
  display:block;font-style:normal;font-size:12px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--fx-meta);
}

/* ---- contents box ------------------------------------------------------- */
.fx-toc{
  background:var(--fx-surface);border:1px solid var(--fx-line);
  border-radius:var(--fx-rbox);padding:18px 20px;margin:0 0 28px;
}
.fx-toc-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:17px;font-weight:800;letter-spacing:-.03em;
}
.fx-toc-toggle{background:none;border:none;cursor:pointer;color:var(--fx-meta);display:flex}
.fx-toc-toggle svg{width:16px;height:16px;transition:transform .25s ease}
.fx-toc.is-collapsed .fx-toc-toggle svg{transform:rotate(-90deg)}
.fx-toc-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.fx-toc.is-collapsed .fx-toc-list{display:none}
.fx-toc-list a{font-size:14px;font-weight:600;color:var(--fx-ink);line-height:1.45;transition:color .2s ease}
.fx-toc-list a:hover,.fx-toc-list a.is-active{color:var(--fx-accent)}

/* ---- inline "More Read" box --------------------------------------------- */
.fx-moreread{
  background:var(--fx-soft);border-radius:var(--fx-rbox);
  padding:18px 20px;margin:30px 0;
}
.fx-moreread-head{
  font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--fx-meta);margin-bottom:12px;
}
.fx-moreread ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
/* the box is moved inside .fx-content at runtime, so it has to opt out of the
   underlined body-link style */
.fx-moreread a,.fx-content .fx-moreread a{
  font-size:15px;font-weight:800;letter-spacing:-.03em;line-height:1.3;
  color:var(--fx-ink);text-decoration:none;
}
.fx-moreread a:hover,.fx-content .fx-moreread a:hover{color:var(--fx-accent)}

/* ---- entry footer (tags / sources) -------------------------------------- */
.fx-efoot{
  background:var(--fx-soft);border-radius:var(--fx-rbox);
  padding:16px 20px;margin:28px 0 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
}
.fx-efoot-label{
  font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--fx-meta);
}
.fx-efoot a{
  font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--fx-ink);
}
.fx-efoot a:hover{color:var(--fx-accent)}

/* ---- share this article ------------------------------------------------- */
.fx-share-sec{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:20px 0;margin-top:20px;border-top:1px solid var(--fx-line);border-bottom:1px solid var(--fx-line);
}
.fx-share-sec-title{font-size:15px;font-weight:800;letter-spacing:-.03em;flex:none}
.fx-share-sec-list{display:flex;gap:9px;flex-wrap:wrap}
.fx-share-pill{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:6px;
  background:var(--fx-soft);color:var(--fx-ink);font-size:13px;font-weight:700;
  border:none;cursor:pointer;transition:background .2s ease,color .2s ease;
}
.fx-share-pill:hover{background:var(--fx-accent);color:#fff}
.fx-share-pill svg{width:15px;height:15px}

/* ---- author box --------------------------------------------------------- */
.fx-authorbox{
  display:flex;gap:20px;align-items:flex-start;
  background:var(--fx-surface);border-radius:var(--fx-rbox);box-shadow:var(--fx-shadow);
  padding:24px;margin:28px 0;
}
.fx-authorbox-avatar{
  width:80px;height:80px;border-radius:50%;flex:none;object-fit:cover;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;font-weight:800;
}
.fx-authorbox-name{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-bottom:2px}
.fx-authorbox-role{font-size:13px;font-weight:600;color:var(--fx-meta);margin-bottom:10px}
.fx-authorbox-bio{font-size:14px;line-height:1.65;color:var(--fx-meta);margin:0}
.fx-authorbox-bio a{color:var(--fx-accent);text-decoration:underline;text-underline-offset:.18em}

/* ---- prev / next -------------------------------------------------------- */
.fx-prevnext{display:grid;grid-template-columns:1fr 1fr;gap:var(--fx-gap);margin:28px 0}
.fx-pn{
  background:var(--fx-surface);border-radius:var(--fx-rbox);box-shadow:var(--fx-shadow);
  padding:20px;transition:box-shadow .25s ease;
}
.fx-pn:hover{box-shadow:var(--fx-shadow-hover)}
.fx-pn-label{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--fx-meta);margin-bottom:9px;display:block}
.fx-pn-title{font-size:16px;font-weight:800;letter-spacing:-.03em;line-height:1.3}
.fx-pn:hover .fx-pn-title{color:var(--fx-accent)}
.fx-pn-next{text-align:right}

/* ---- related ------------------------------------------------------------ */
.fx-related{margin-top:34px}

/* ---- reading progress --------------------------------------------------- */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--fx-accent);z-index:500;transition:width .1s linear}

/* ============================================================== RESPONSIVE =
   Foxiz breaks at 1024 (tablet) and 767 (mobile). Matched exactly.
   ========================================================================= */
@media (max-width:1024px){
  /* the category nav no longer fits beside the tools, so it becomes a
     swipeable strip and the tools sit on their own background to its right */
  .fx-nav{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fx-nav::-webkit-scrollbar{display:none}
  .fx-mega{display:none}
  .fx-nav-caret{display:none}
  .fx-tools{padding-left:10px;background:var(--fx-page);box-shadow:-10px 0 12px -6px var(--fx-page)}

  /* Once these flex rows turn into columns the cross axis is the *width*, so
     the flex-start alignment they use on desktop would shrink-wrap each child
     to its content width — and a ratio-locked card's min-content width is
     wider than a phone. Stretch keeps every child at the column width. */
  .fx-row,.fx-hero-top,.fx-arch-hero,.fx-single-body,.fx-single-ct{align-items:stretch}
  .fx-row > *,.fx-hero-top > *,.fx-arch-hero > *{min-width:0;max-width:100%}

  .fx-row{flex-direction:column}
  .fx-col-side,.fx-col-side-wide,.fx-single-body > .fx-col-side{flex:1 1 auto;width:100%}
  .fx-side{position:static;flex-direction:row;flex-wrap:wrap}
  .fx-side > *{flex:1 1 300px}

  .fx-hero-top{flex-direction:column}
  .fx-hero-feature,.fx-hero-list{flex:1 1 auto;width:100%}
  .fx-feature{min-height:320px;max-height:400px}
  .fx-feature-title{font-size:30px}

  .fx-arch-hero{flex-direction:column}
  .fx-arch-hero-main,.fx-arch-hero-side{flex:1 1 auto;width:100%}

  .fx-grid-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fx-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}

  .fx-single-body{flex-direction:column}
  .fx-single-ct{flex:1 1 auto;width:100%;max-width:none}
  .fx-single-main{width:100%}
  .fx .fx-single-title{font-size:40px}
  /* the sticky rail becomes a horizontal strip above the article, which is
     what the demo does the moment the column stops being wide enough */
  .fx-lsl{
    position:static;width:100%;flex:1 1 auto;
    display:flex;align-items:center;gap:12px;
    padding:0 0 18px;margin-bottom:4px;border-bottom:1px solid var(--fx-line);
  }
  .fx-lsl-label{margin-bottom:0}
  .fx-lsl-list{flex-direction:row}
  .fx-single-ct{flex-direction:column}
}

@media (max-width:767px){
  .fx-subbar-row{height:48px}
  /* the category nav becomes a swipeable strip and the tools stay pinned to
     the right on their own background, so the two can't collide */
  .fx-nav{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fx-nav::-webkit-scrollbar{display:none}
  .fx-nav-caret{display:none}
  .fx-mega{display:none}
  .fx-tools{padding-left:10px;background:var(--fx-page);box-shadow:-10px 0 12px -6px var(--fx-page)}
  .fx-search-btn span{display:none}
  .fx-search-btn{width:30px;padding:0}
  .fx-quick{height:auto;padding:10px 0}
  .fx-quick-label{display:none}
  .fx .fx-newsletter-btn{margin-left:12px}

  .fx-grid-2,.fx-grid-3,.fx-grid-4,.fx-grid-5{grid-template-columns:minmax(0,1fr)}

  .fx-feature{min-height:240px;max-height:320px}
  .fx-feature-body{padding:20px}
  .fx-feature-title{font-size:24px}

  .fx-blockhead-title{font-size:21px}
  .fx-blockhead-dot{width:11px;height:11px}

  /* image-left list cards keep their shape on phones (Foxiz does not stack
     them) — only the thumb narrows */
  .fx-listbox .fx-thumb{width:120px}
  .fx-listbox-body{padding:14px 15px}
  .fx-listbox-title{font-size:15px}

  .fx-ovl{min-height:300px}

  .fx .fx-archive-title{font-size:24px}
  .fx .fx-single-title{font-size:30px;letter-spacing:-.035em}
  .fx-single-excerpt{font-size:16px}
  .fx-byline{gap:12px}
  .fx-share-row{width:100%;justify-content:flex-start}

  .fx-content h2{font-size:calc(var(--fx-fs,16px) * 1.375)}
  .fx-content blockquote p{font-size:calc(var(--fx-fs,16px) * 1.2)}

  .fx-authorbox{flex-direction:column;gap:14px}
  .fx-authorbox-avatar{width:64px;height:64px;font-size:22px}
  .fx-prevnext{grid-template-columns:minmax(0,1fr)}
  .fx-pn-next{text-align:left}
}

/* ==================================================== DARK-MODE SITE CHROME =
   The blog keeps this site's own header, closing CTA and footer, so when the
   reader flips the theme those have to come with it — a white header sitting
   above a dark article reads as a bug, not a choice. These overrides are
   scoped to body.fx-dark, which only ever appears on the blog templates, so
   the rest of the site is untouched.
   ========================================================================= */
body.fx-dark{background:#16181f;color:#fff}

body.fx-dark #header{
  background:rgba(22,24,31,.72);
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}
body.fx-dark #header .logo-img.logo-onlight{opacity:0}
body.fx-dark #header .logo-img.logo-ondark{opacity:1}
body.fx-dark #menu-btn{background:#2b2f3c;color:#fff}
/* the sound button is a white disc with dark bars by default — invert both,
   or the bars vanish into the disc */
body.fx-dark #sound-btn{background:#2b2f3c}
body.fx-dark #sound-btn i{background:#fff}

body.fx-dark #end,
body.fx-dark #footer{background:#16181f;color:#fff}
body.fx-dark #footer .f-logo{filter:invert(1) brightness(2)}
body.fx-dark #f-news .news-input input{background:#22262f;color:#fff}
body.fx-dark #f-news .news-input input::placeholder{color:rgba(255,255,255,.45)}
body.fx-dark #f-news .f-news-desc,
body.fx-dark #footer-bottom{color:rgba(255,255,255,.62)}
body.fx-dark #footer-bottom a{color:rgba(255,255,255,.85)}