/* ==========================================================================
   LEC Insights — screen.css
   Design tokens + site chrome + homepage components.
   Post/article body typography lives in post-content.css (loaded separately
   so long-form Koenig content can be cached/served independently).
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. DESIGN TOKENS                                                        */
/* ---------------------------------------------------------------------- */
:root{
  /* -- color: base palette (client-approved v3).
        --color-accent / --color-ink / --color-bg-alt are overridden per-site
        by Ghost Admin -> Design & branding -> Theme (see the inline <style>
        block default.hbs renders from @custom.*); the hex values below are
        just the shipped defaults, kept identical to package.json's
        config.custom defaults. --color-accent-deep and --color-accent-soft
        are DERIVED from --color-accent via color-mix() rather than being
        separate settings, so a custom accent color still gets correct
        hover/tint shades automatically instead of clashing with two
        unrelated hard-coded oranges. */
  --color-bg:#FFFFFF;
  --color-bg-alt:#F5F4F0;
  --color-surface:#FFFFFF;
  --color-ink:#242424;
  --color-ink-soft:#5C5C5C;
  --color-ink-faint:#8F8F8F;
  --color-line:#E4E1DA;
  --color-line-soft:#EDEAE3;
  --color-accent:#CC7A45;
  --color-accent-deep: color-mix(in srgb, var(--color-accent) 80%, black);
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 22%, white);
  --color-on-accent:#FFFFFF;

  /* -- type --
        Ghost Admin -> Design & branding -> Fonts sets --gh-font-heading /
        --gh-font-body when a site owner picks a custom font pairing; the
        theme's own choices (Source Serif 4 / Inter) remain the fallback
        whenever those aren't set. */
  --font-serif: var(--gh-font-heading, 'Source Serif 4', Georgia, 'Times New Roman', serif);
  --font-sans: var(--gh-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);

  /* -- layout -- */
  --layout-max:1200px;
  --layout-reading:680px;
  --layout-header-h:73px;

  /* -- spacing scale -- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  /* -- mobile layout gutter: single source of truth for the
        page-edge padding every mobile container below shares (see
        .wrap and the "main#main > article" rule) -- */
  --mobile-page-gutter:10px;

  /* -- radius / motion -- */
  --radius-sm:2px;
  --radius-pill:999px;
  --motion-fast:160ms ease;
}

/* ---------------------------------------------------------------------- */
/* 2. RESET / BASE                                                         */
/* ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0; background:var(--color-bg); color:var(--color-ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img, svg, video{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button, input, select{ font-family:inherit; }
button{ background:none; border:0; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-serif); font-weight:600; margin:0; }
.wrap{ max-width:var(--layout-max); margin:0 auto; padding:0 32px; }
@media (max-width:480px){ .wrap{ padding-inline:var(--mobile-page-gutter); } }

/* Post/Page templates render a bare <article> directly inside <main>
   (no .wrap) -- <article> itself needs no width/centering rule: each
   reading-column section below (.letterhead-kicker/.insight-header/
   .utility-bar/.insight-body/.contact-block/.related-topics in
   post-content.css) sets its own narrower max-width:--layout-reading
   and self-centers via "margin:0 auto". (An earlier fix here gave
   <article> its own max-width:--layout-max frame while misdiagnosing
   what turned out to be a .featured class collision -- see that fix
   above -- that frame is removed as no longer needed.) This is the
   SINGLE mobile-gutter rule for the whole template: every child section
   relies on this one padded ancestor instead of each duplicating its
   own page-edge padding, so they all land on the same left/right edge.
   box-sizing:border-box is global (see the reset above), so this
   padding subtracts from the existing width -- no overflow. */
@media (max-width:767px){
  main#main > article{ padding-left:var(--mobile-page-gutter); padding-right:var(--mobile-page-gutter); }
}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* -- accessibility: skip link + focus states -- */
.skip-link{
  position:absolute; left:-9999px; top:auto; background:var(--color-ink); color:#fff;
  padding:12px 18px; z-index:100; font-size:13px; font-weight:600; border-radius:var(--radius-sm);
}
.skip-link:focus{ left:16px; top:16px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--color-accent); outline-offset:2px; border-radius:var(--radius-sm);
}
a, button, .post-card, .tag-pill, .filter-btn{
  transition:background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}

.masthead-rule{ height:4px; background:var(--color-accent); }

/* ---------------------------------------------------------------------- */
/* 3. HEADER + NAVIGATION                                                  */
/* ---------------------------------------------------------------------- */
.site-header{ background:var(--color-bg); border-bottom:3px solid var(--color-accent); position:sticky; top:0; z-index:40; }
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  max-width:var(--layout-max); margin:0 auto; padding:19px 32px; min-height:var(--layout-header-h);
}
@media (max-width:480px){ .site-header .bar{ padding:14px 20px; gap:12px; } }

.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand-logo{ flex-shrink:0; display:flex; align-items:center; }
.brand-logo img{ max-height:38px; width:auto; }
.brand-logo-fallback{
  width:100px; height:38px; border:1px solid var(--color-line); background:var(--color-bg-alt);
  display:flex; align-items:center; justify-content:center; text-align:center; flex-shrink:0;
  font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:var(--color-ink-faint);
  font-weight:600; line-height:1.3; padding:2px 6px;
}
.brand-divider{ width:1px; height:26px; background:var(--color-line); flex-shrink:0; }
.brand-text{ line-height:1.15; min-width:0; }
.brand-text .mark{
  font-family:var(--font-serif); font-weight:600; font-size:20px; letter-spacing:-.005em;
  color:var(--color-ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

nav.site-nav{ display:flex; align-items:center; gap:18px; flex:1; justify-content:center; min-width:0; }
nav.site-nav a{
  font-size:13.5px; font-weight:500; color:var(--color-ink-soft); letter-spacing:.02em;
  padding:8px 2px; border-bottom:2px solid transparent; white-space:nowrap;
}
nav.site-nav a:hover, nav.site-nav a[aria-current="page"]{ color:var(--color-ink); border-bottom-color:var(--color-accent); }
@media (max-width:1180px) and (min-width:1025px){
  nav.site-nav{ gap:10px; }
  nav.site-nav a{ font-size:12.5px; letter-spacing:.01em; }
}

/* Spanish structural/nav labels run wider than their English equivalents
   (e.g. "Informes y Alertas a Clientes" vs "Reports & Client Alerts").
   Because .bar is capped at --layout-max, nav.site-nav's available width
   does not grow past a 1200px viewport, so Spanish needs tighter spacing
   at the same desktop tiers where English already fits. Scoped by
   data-ui-lang (set on <html> by the language chrome, see language.js)
   rather than a fixed pixel hack tied to one screenshot -- values below
   were derived from measuring actual rendered label widths, not guessed. */
html[data-ui-lang="es"] nav.site-nav{ gap:10px; }
html[data-ui-lang="es"] nav.site-nav a{ font-size:12.5px; letter-spacing:.015em; }
/* Even after the flex-gap tightening above, Spanish's fuller label set can
   still run out of room in the 1025-1180px band specifically (measured:
   collision begins around 1130px for Spanish, while English still has
   headroom down to ~1050px). Rather than compress or overlap labels
   further, collapse Spanish to the existing hamburger nav starting at the
   same 1180px breakpoint already used for the tightened mid-tier above,
   instead of the default 1024px threshold -- i.e. the Spanish locale
   drives the worst-case sizing/collapse decision, per spec. English is
   unaffected and keeps the original 1024px threshold below. */
@media (min-width:1025px) and (max-width:1180px){
  html[data-ui-lang="es"] nav.site-nav{ display:none; }
  html[data-ui-lang="es"] .menu-toggle{ display:inline-flex; }
  html[data-ui-lang="es"] .mobile-nav.is-open{ display:block !important; }
}

.header-right{ display:flex; align-items:center; gap:9px; flex-shrink:0; }

.lang-switcher-trigger{
  /* display:inline-block preserves the same box this rule always drew when
     the control was a <button> (implicitly inline-block); it is now a real
     <a href> (see partials/language-switcher.hbs) and anchors default to
     plain inline, which would otherwise let the border/padding wrap oddly. */
  display:inline-block;
  font-size:11.5px; color:var(--color-ink-soft); letter-spacing:.05em; border:1px solid var(--color-line);
  border-radius:var(--radius-pill); padding:5px 9px; cursor:pointer; text-decoration:none;
}
.lang-switcher-trigger:hover{ border-color:var(--color-accent); color:var(--color-accent); }

.icon-btn{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--color-ink); border-radius:var(--radius-sm);
}
.icon-btn:hover{ background:var(--color-bg-alt); }
.icon-btn svg{ width:17px; height:17px; opacity:.75; }

.btn-visit{
  border:1px solid var(--color-accent); color:var(--color-accent); font-size:12.5px; font-weight:600;
  letter-spacing:.01em; padding:8px 10px; border-radius:var(--radius-pill); white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
}
.btn-visit:hover{ background:var(--color-accent); color:var(--color-on-accent); }

.menu-toggle{
  display:none; width:34px; height:34px; align-items:center; justify-content:center;
  cursor:pointer; color:var(--color-ink); border-radius:var(--radius-sm); flex-shrink:0;
}
.menu-toggle:hover{ background:var(--color-bg-alt); }
.menu-toggle svg{ width:20px; height:20px; }
.menu-toggle .icon-close{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-open{ display:none; }
.menu-toggle[aria-expanded="true"] .icon-close{ display:block; }

.mobile-nav{ display:none; background:var(--color-bg); border-bottom:1px solid var(--color-line); }
.mobile-nav[hidden]{ display:none; }
.mobile-nav.is-open{ display:block; }
.mobile-nav-inner{ padding:4px 32px 20px; }
.mobile-nav a{
  display:block; padding:13px 0; font-size:15px; font-weight:500; color:var(--color-ink-soft);
  border-bottom:1px solid var(--color-line-soft);
}
.mobile-nav a[aria-current="page"]{ color:var(--color-accent); }
.mobile-nav a:last-of-type{ border-bottom:none; }
.mn-utility{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; gap:12px; flex-wrap:wrap; }

@media (max-width:1024px){
  nav.site-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .mobile-nav-inner{ padding-left:20px; padding-right:20px; }
}
@media (min-width:1025px){ .mobile-nav{ display:none !important; } }
@media (max-width:480px){ .btn-visit .full-label{ display:none; } }

body.nav-open{ overflow:hidden; }

/* ---------------------------------------------------------------------- */
/* 4. SEARCH (native Ghost search trigger)                                 */
/* ---------------------------------------------------------------------- */
.gh-search-trigger{ cursor:pointer; }

/* ---------------------------------------------------------------------- */
/* 5. SHARED SECTION HEADING / KICKER / TAGS                               */
/* ---------------------------------------------------------------------- */
.section-heading{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:26px; gap:16px; flex-wrap:wrap; }
.section-heading h2, .section-heading h3{
  font-size:21px; font-weight:600; padding-left:14px; position:relative; letter-spacing:-.005em; color:var(--color-ink);
}
.section-heading h2::before, .section-heading h3::before{
  content:''; position:absolute; left:0; top:3px; bottom:3px; width:4px; background:var(--color-accent);
}

.kicker-line{ display:flex; align-items:center; gap:8px; }
.kicker-line .sq{ width:8px; height:8px; background:var(--color-accent); flex-shrink:0; }
.kicker-line span{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--color-accent); }

.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--color-ink-soft); margin-bottom:var(--space-5); }
.back-link:hover{ color:var(--color-accent); }

.tag-row{ display:flex; gap:8px; flex-wrap:wrap; }
.tag-pill{
  font-size:11.5px; letter-spacing:.03em; color:var(--color-ink-soft); border:1px solid var(--color-line);
  border-radius:var(--radius-pill); padding:4px 11px; background:var(--color-surface); display:inline-block;
}
a.tag-pill:hover{ border-color:var(--color-accent); color:var(--color-accent); background:var(--color-accent-soft); }
.tag-pill.is-current{ color:#fff; border-color:var(--color-accent); background:var(--color-accent); }

.badge{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#fff; background:var(--color-accent); border-radius:var(--radius-sm); padding:5px 11px;
}
.badge.badge-news{ background:var(--color-ink); }
.badge.badge-neutral{ background:none; color:var(--color-ink-faint); border:1px solid var(--color-ink-faint); }

.meta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--color-ink-faint); }
.meta-row .dot{ width:3px; height:3px; border-radius:50%; background:var(--color-ink-faint); flex-shrink:0; }

/* ---------------------------------------------------------------------- */
/* 6. HOMEPAGE — hero / featured / filters                                 */
/* ---------------------------------------------------------------------- */
.home-hero{ padding:64px 0 12px; }
.home-hero .kicker{ font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--color-accent); font-weight:700; margin-bottom:14px; }
.home-hero h1{ font-size:40px; line-height:1.15; letter-spacing:-.015em; margin:0 0 16px; max-width:720px; }
.home-hero .dek{ font-size:16.5px; color:var(--color-ink-soft); max-width:600px; margin:0; }
@media (max-width:767px){ .home-hero{ padding:40px 0 8px; } .home-hero h1{ font-size:30px; } }

.featured-wrap{ border-top:3px solid var(--color-accent); margin-bottom:var(--space-9); }
/* Scoped to .featured-wrap > .featured (not bare .featured): Ghost's
   {{post_class}} adds a literal "featured" class to <article> for any
   post marked Featured in Ghost Admin, e.g. <article class="post
   featured ...">. The old bare ".featured" selector below matched that
   article too, so an individual Featured post silently inherited this
   homepage-only 2-column grid (plus the h2/.dek/.tag-row overrides
   reaching into the post's own title/tags) -- the actual cause of the
   "two-column article" bug chased in earlier fixes here. .featured-wrap
   only exists in partials/featured-post-body.hbs (the homepage Featured
   Insight module has no other caller -- see that file), so this scoped
   selector can never match a post/page <article>, Featured or not. */
.featured-wrap > .featured{ display:grid; grid-template-columns:1.15fr 1fr; gap:68px; align-items:stretch; padding:60px 0 64px; border-bottom:1px solid var(--color-line); }
.featured-text{ position:relative; padding-left:24px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.featured-text::before{ content:''; position:absolute; left:0; top:4px; bottom:4px; width:3px; background:var(--color-accent); }
.featured-kicker{ display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.featured-kicker .sq{ width:8px; height:8px; background:var(--color-accent); flex-shrink:0; }
.featured-kicker span{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--color-accent); }
.featured-wrap > .featured .badge{ margin-bottom:18px; }
.featured-wrap > .featured h2{ font-size:35px; line-height:1.18; letter-spacing:-.015em; margin:0 0 16px; }
.featured-wrap > .featured h2 a:hover{ color:var(--color-accent); }
.featured-wrap > .featured .dek{ font-size:16px; color:var(--color-ink-soft); margin:0 0 22px; line-height:1.68; }
.featured-wrap > .featured .meta-row{ margin-bottom:18px; }
.featured-wrap > .featured .tag-row{ margin-top:0; }
@media (max-width:1024px){ .featured-wrap > .featured{ grid-template-columns:1fr; gap:32px; padding:40px 0 44px; } }

.featured-visual{
  background:var(--color-bg-alt); border:1px solid var(--color-line); border-top:3px solid var(--color-accent);
  position:relative; overflow:hidden; display:flex; min-height:100%;
}
.featured-visual img{ width:100%; height:100%; object-fit:cover; min-height:260px; }
.featured-visual.is-empty{ flex-direction:column; justify-content:center; align-items:center; padding:var(--space-6); min-height:260px; }
.featured-visual.is-empty .fv-mark{ font-family:var(--font-serif); font-size:15px; font-style:italic; color:var(--color-ink-soft); text-align:center; max-width:230px; }
@media (max-width:1024px){ .featured-visual{ order:-1; min-height:220px; } .featured-visual img{ min-height:220px; } }

.filter-bar{ display:flex; align-items:center; gap:14px; margin-bottom:32px; flex-wrap:wrap; row-gap:12px; }
.filter-types{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; max-width:100%; }
.filter-btn{
  font-size:13px; font-weight:500; color:var(--color-ink-soft); background:var(--color-surface);
  border:1px solid var(--color-line); padding:8px 16px; border-radius:var(--radius-pill); white-space:nowrap;
}
.filter-btn:hover{ border-color:var(--color-accent); color:var(--color-accent); }
.filter-btn[aria-current="true"]{ background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.filter-divider{ width:1px; height:22px; background:var(--color-line); flex-shrink:0; }
@media (max-width:640px){ .filter-divider{ display:none; } }
.subject-select{
  font-size:13px; font-weight:500; color:var(--color-ink-soft); background:var(--color-surface);
  border:1px solid var(--color-line); border-radius:var(--radius-pill); padding:8px 14px; cursor:pointer; max-width:100%;
}
.subject-select:hover{ border-color:var(--color-accent); }

/* ---------------------------------------------------------------------- */
/* 7. POST CARD + GRIDS                                                    */
/* ---------------------------------------------------------------------- */
.post-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--color-line);
  border:1px solid var(--color-line); margin-bottom:var(--space-9);
}
.post-grid.post-grid--related{ margin-bottom:0; }
@media (max-width:1023px) and (min-width:768px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){ .post-grid{ grid-template-columns:1fr; } }

.post-card{
  background:var(--color-surface); padding:34px 30px 30px; display:flex; flex-direction:column;
  min-height:250px; border-top:3px solid transparent;
}
.post-card:hover{ background:#FFFCF8; border-top-color:var(--color-accent); }
.post-card:hover h3 a, .post-card:hover h4 a{ color:var(--color-accent); }
.post-card .badge{ margin-bottom:16px; align-self:flex-start; }
.post-card h3, .post-card h4{
  font-size:19px; line-height:1.36; letter-spacing:-.008em; margin:0 0 12px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post-card h3 a, .post-card h4 a{ transition:color var(--motion-fast); }
.post-card .dek{
  font-size:13.8px; color:var(--color-ink-soft); line-height:1.58; margin:0 0 18px; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.post-card .meta-row{ font-size:12px; margin-bottom:14px; }
.post-card .tag-row{ margin-top:auto; }

/* ---------------------------------------------------------------------- */
/* 8. TOPIC BROWSER (Browse by Subject)                                    */
/* ---------------------------------------------------------------------- */
.topic-browser{ padding:56px 32px 64px; border-top:1px solid var(--color-line); background:var(--color-bg-alt); margin:0 -32px; }
@media (max-width:480px){ .topic-browser{ padding-left:var(--mobile-page-gutter); padding-right:var(--mobile-page-gutter); margin:0 calc(-1 * var(--mobile-page-gutter)); } }
.topic-browser .tag-row{ gap:10px; margin-top:22px; }
.topic-browser .tag-pill{ font-size:13px; padding:8px 16px; background:var(--color-surface); }
.topic-browser .note{ font-size:12.5px; color:var(--color-ink-faint); margin-top:16px; max-width:var(--layout-reading); }

/* ---------------------------------------------------------------------- */
/* 9. NEWSLETTER                                                           */
/* ---------------------------------------------------------------------- */
.newsletter-block{ border-top:1px solid var(--color-line); padding:44px 0; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.newsletter-block .nl-text b{ font-family:var(--font-serif); font-size:16px; color:var(--color-ink); display:block; margin-bottom:2px; }
.newsletter-block .nl-text span{ font-size:13px; color:var(--color-ink-soft); }
.nl-form{ display:flex; gap:0; flex-wrap:wrap; max-width:100%; }
.nl-form input{ border:1px solid var(--color-line); border-right:none; padding:11px 14px; font-size:13.5px; width:230px; max-width:100%; background:var(--color-surface); }
.nl-form button{ background:var(--color-accent); color:#fff; padding:11px 20px; font-size:13px; font-weight:600; cursor:pointer; }
.nl-form button:hover{ background:var(--color-accent-deep); }
@media (max-width:480px){ .nl-form input{ width:100%; border-right:1px solid var(--color-line); } .nl-form button{ width:100%; } .nl-form{ flex-direction:column; width:100%; } }

/* ---------------------------------------------------------------------- */
/* 10. FOOTER                                                              */
/* ---------------------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--color-line); margin-top:var(--space-9); background:var(--color-surface); }
.footer-top-rule{ height:3px; background:var(--color-accent); }
.footer-inner{ padding:52px 0 40px; }
/* .footer-inner shares the exact same element as .wrap (see
   footer.hbs: <div class="wrap footer-inner">), but this shorthand's
   middle value (0) is a top|right&left|bottom 3-value padding
   shorthand -- it explicitly sets padding-left/right:0 on that same
   element, which (equal specificity, declared later in the file)
   silently overrides .wrap's horizontal padding at every width,
   including its mobile --mobile-page-gutter rule. Restoring the
   shared gutter here -- not on .footer-grid/.footer-col/
   .footer-bottom/.footer-legal -- keeps a single mobile-gutter
   application point and touches nothing above this breakpoint. */
@media (max-width:480px){ .footer-inner{ padding-left:var(--mobile-page-gutter); padding-right:var(--mobile-page-gutter); } }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:36px; }
.footer-col h4{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-accent); margin:0 0 14px; font-weight:700; }
.footer-col p, .footer-col a{ font-size:13.5px; color:var(--color-ink-soft); line-height:1.8; display:block; }
.footer-col a:hover{ color:var(--color-accent); }
.footer-bottom{ border-top:1px solid var(--color-line-soft); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.footer-mark{ display:flex; align-items:center; gap:9px; font-size:11.5px; font-weight:700; letter-spacing:.12em; color:var(--color-ink); text-transform:uppercase; flex-shrink:0; }
.footer-mark .fm-sq{ width:7px; height:7px; background:var(--color-accent); flex-shrink:0; }
.footer-legal{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--color-ink-faint); flex-wrap:wrap; }
.footer-legal .sep{ opacity:.5; }
@media (max-width:767px){ .footer-grid{ grid-template-columns:1fr 1fr; row-gap:32px; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------- */
/* 11. PAGINATION (Ghost's native {{pagination}} helper output)            */
/* ---------------------------------------------------------------------- */
nav.pagination{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:32px 0 var(--space-9); border-top:1px solid var(--color-line); flex-wrap:wrap; }
nav.pagination a{ font-size:13px; font-weight:600; color:var(--color-ink-soft); padding:9px 16px; border:1px solid var(--color-line); border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:6px; }
nav.pagination a:hover{ border-color:var(--color-accent); color:var(--color-accent); }
nav.pagination .page-number{ font-size:12.5px; color:var(--color-ink-faint); order:2; flex:1; text-align:center; }
nav.pagination .newer-posts{ order:1; }
nav.pagination .older-posts{ order:3; }
@media (max-width:480px){ nav.pagination{ justify-content:center; } nav.pagination .page-number{ order:3; flex:0 0 100%; text-align:center; margin-top:8px; } nav.pagination .older-posts{ order:2; } }

/* ---------------------------------------------------------------------- */
/* 12. EMPTY STATES                                                        */
/* ---------------------------------------------------------------------- */
.empty-state{ padding:var(--space-8) 0; text-align:center; color:var(--color-ink-soft); }
.empty-state h2, .empty-state h3{ margin-bottom:10px; }
.empty-state p{ font-size:14.5px; max-width:440px; margin:0 auto; }

/* ---------------------------------------------------------------------- */
/* 13. TAG / AUTHOR ARCHIVE HEADER                                         */
/* ---------------------------------------------------------------------- */
.archive-header{ padding:56px 0 40px; border-bottom:1px solid var(--color-line); margin-bottom:48px; }
.archive-header .kicker{ font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--color-accent); font-weight:700; margin-bottom:14px; }
.archive-header h1{ font-size:36px; line-height:1.18; letter-spacing:-.012em; margin:0 0 14px; max-width:760px; }
.archive-header .desc{ font-size:15.5px; color:var(--color-ink-soft); max-width:var(--layout-reading); line-height:1.68; margin:0 0 16px; }
.archive-header .count{ font-size:12.5px; color:var(--color-ink-faint); }
.archive-feature-image{ margin-top:28px; border:1px solid var(--color-line); border-top:3px solid var(--color-accent); max-height:320px; overflow:hidden; }
.archive-feature-image img{ width:100%; height:100%; object-fit:cover; }

.author-header{ padding:56px 0 40px; border-bottom:1px solid var(--color-line); margin-bottom:48px; display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.author-header .author-photo{ width:88px; height:88px; border-radius:50%; object-fit:cover; border:1px solid var(--color-line); flex-shrink:0; }
.author-header .author-photo-fallback{
  width:88px; height:88px; border-radius:50%; background:var(--color-bg-alt); border:1px solid var(--color-line);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-size:26px;
  font-weight:600; color:var(--color-ink-faint); flex-shrink:0;
}
.author-header h1{ font-size:32px; margin:0 0 8px; }
.author-header .role{ font-size:13px; color:var(--color-accent); font-weight:600; letter-spacing:.03em; margin-bottom:10px; text-transform:uppercase; }
.author-header .bio{ font-size:15px; color:var(--color-ink-soft); line-height:1.65; max-width:var(--layout-reading); margin:0 0 12px; }
.author-header .author-links{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; }
.author-header .author-links a{ color:var(--color-ink-soft); font-weight:600; }
.author-header .author-links a:hover{ color:var(--color-accent); }

/* ---------------------------------------------------------------------- */
/* 14. ERROR PAGE                                                          */
/* ---------------------------------------------------------------------- */
.error-page{ padding:var(--space-9) 0; text-align:center; }
.error-page .code{ font-family:var(--font-serif); font-size:96px; font-weight:600; color:var(--color-accent); line-height:1; margin-bottom:16px; }
.error-page h1{ font-size:26px; margin-bottom:12px; }
.error-page p{ font-size:15px; color:var(--color-ink-soft); margin-bottom:28px; }
.error-page .btn-primary{ display:inline-flex; }

/* ---------------------------------------------------------------------- */
/* 15. BUTTONS (shared)                                                    */
/* ---------------------------------------------------------------------- */
.btn-primary{
  background:var(--color-accent); color:#fff; font-size:13.5px; font-weight:600; padding:10px 18px;
  border-radius:var(--radius-sm); border:1px solid var(--color-accent); cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary:hover{ background:var(--color-accent-deep); border-color:var(--color-accent-deep); }
.btn-secondary{
  background:transparent; color:var(--color-ink-soft); font-size:13.5px; font-weight:500; padding:10px 16px;
  border-radius:var(--radius-sm); border:1px solid var(--color-line); cursor:pointer;
}
.btn-secondary:hover{ border-color:var(--color-ink); color:var(--color-ink); }