/* ============================================================
   GWESAFFLE BLOGS — core stylesheet
   Editorial-financial design system.
   ============================================================ */

:root{
  /* --- color tokens --- */
  --ink:          #0E1B2C;   /* primary dark / header-footer bg */
  --ink-soft:     #16273D;   /* raised dark surface */
  --paper:        #F7F4EC;   /* light page background */
  --paper-dim:    #EFEADC;   /* light raised surface */
  --line:         #DCD5C2;   /* hairline border on paper */
  --line-dark:    rgba(247,244,236,0.14);
  --ink-text:     #1B2733;   /* body text on paper */
  --slate:        #5B6B7B;   /* muted text on paper */
  --paper-text:   #EDEAE0;   /* body text on ink */
  --paper-muted:  rgba(237,234,224,0.66);

  --gold:         #C9A24B;   /* brass — primary accent */
  --gold-dim:     #A9832F;
  --green:        #1FA97F;   /* market green — secondary accent */
  --green-dim:    #167A5C;
  --coral:        #E4572E;   /* signal coral — alerts / down-market */

  --finance-c:    var(--gold);
  --forex-c:      var(--green);
  --crypto-c:     var(--coral);

  /* --- type --- */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- layout --- */
  --container: 1180px;
  --radius-s: 4px;
  --radius-m: 10px;
  --header-h: 76px;

  --shadow-1: 0 1px 2px rgba(14,27,44,0.06), 0 8px 24px rgba(14,27,44,0.06);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  color:var(--ink);
  line-height:1.12;
  margin:0;
  letter-spacing:-0.01em;
}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:var(--paper); }

p{ margin:0; }

.eyebrow{
  font-family:var(--sans);
  font-size:0.8rem;
  font-weight:600;
  color:var(--green-dim);
  letter-spacing:0.01em;
}

/* ============================================================
   TICKER TAPE — the signature animated motif
   ============================================================ */
.ticker{
  background:var(--ink);
  border-bottom:1px solid var(--line-dark);
  overflow:hidden;
  white-space:nowrap;
  position:relative;
  max-width:100vw;
}
.ticker::before,.ticker::after{
  content:"";
  position:absolute; top:0; bottom:0; width:44px; z-index:2;
  pointer-events:none;
}
.ticker::before{ left:0; background:linear-gradient(90deg, var(--ink), transparent); }
.ticker::after{ right:0; background:linear-gradient(270deg, var(--ink), transparent); }
.ticker-track{
  display:inline-flex;
  align-items:center;
  gap:36px;
  padding:10px 0;
  animation:ticker-scroll 38s linear infinite;
  will-change:transform;
}
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ticker-item{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-size:0.82rem;
  color:var(--paper-muted);
  font-variant-numeric:tabular-nums;
}
.ticker-item .sym{ color:var(--paper); font-weight:600; letter-spacing:0.02em; }
.ticker-item .up{ color:var(--green); }
.ticker-item .down{ color:var(--coral); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,244,236,0.92);
  backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid var(--line);
  max-width:100vw;
}
.nav{
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  flex-direction:column;
  line-height:1;
  gap:7px;
}
.brand .wordmark{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.brand .wordmark span{ color:var(--green-dim); }
.brand .tagline{
  font-size:0.66rem;
  letter-spacing:0.14em;
  color:var(--slate);
  margin-top:0;
  font-weight:600;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:2px;
}
.nav-links a{
  position:relative;
  padding:10px 16px;
  font-size:0.92rem;
  font-weight:500;
  color:var(--ink-text);
  border-radius:var(--radius-s);
  transition:color .18s ease;
}
.nav-links a:hover{ color:var(--green-dim); }
.nav-links a.active{ color:var(--ink); font-weight:600; }
.nav-links a.active::after{
  content:"";
  position:absolute; left:16px; right:16px; bottom:4px;
  height:2px; background:var(--gold);
  border-radius:2px;
}
.nav-actions{ display:flex; align-items:center; gap:10px; }

.icon-btn{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}
.icon-btn:hover{ background:var(--paper-dim); border-color:var(--slate); }
.icon-btn svg{ width:18px; height:18px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px;
  border-radius:var(--radius-s);
  font-size:0.9rem; font-weight:600;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--green-dim); transform:translateY(-1px); }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ background:var(--gold-dim); transform:translateY(-1px); }
.btn-outline{ border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-outline.on-dark{ border-color:var(--paper); color:var(--paper); }
.btn-outline.on-dark:hover{ background:var(--paper); color:var(--ink); }

/* mobile nav toggle */
.nav-toggle{
  display:none;
  width:40px; height:40px;
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  background:transparent;
  align-items:center; justify-content:center;
  flex-direction:column; gap:4px;
}
.nav-toggle span{
  width:18px; height:2px; background:var(--ink); display:block;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* search overlay */
.search-panel{
  position:absolute;
  top:100%; left:0; right:0;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-1);
  padding:0;
  max-height:0;
  overflow:hidden;
  transition:max-height .32s ease;
}
.search-panel.open{ max-height:120px; }
.search-panel-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:20px 28px 26px;
  display:flex; gap:10px;
}
.search-panel-inner form{ flex:1; display:flex; gap:10px; min-width:0; }
.search-panel input{
  flex:1;
  min-width:0;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  background:#fff;
  font-size:0.98rem;
}
.search-panel input:focus{ border-color:var(--green-dim); }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
  padding:88px 0 64px;
}
.hero::before{
  content:"";
  position:absolute; top:0; right:0; bottom:0; left:0;
  background:
    radial-gradient(ellipse 620px 420px at 88% 8%, rgba(201,162,75,0.16), transparent 60%),
    radial-gradient(ellipse 520px 420px at 4% 92%, rgba(31,169,127,0.14), transparent 60%);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:48px;
  align-items:center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; font-weight:600; color:var(--gold);
  margin-bottom:18px;
  opacity:0; animation:rise .7s ease .1s forwards;
}
.hero-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2s ease-in-out infinite; }
.hero h1{
  font-size:clamp(2.4rem, 5vw, 3.9rem);
  color:var(--paper);
  opacity:0; animation:rise .8s ease .22s forwards;
}
.hero h1 em{
  font-style:italic; color:var(--gold); font-weight:500;
}
.hero-sub{
  margin-top:22px;
  font-size:1.08rem;
  color:var(--paper-muted);
  max-width:52ch;
  opacity:0; animation:rise .8s ease .38s forwards;
}
.hero-actions{
  margin-top:34px;
  display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; animation:rise .8s ease .5s forwards;
}
.hero-stats{
  margin-top:46px;
  display:flex; gap:38px;
  opacity:0; animation:rise .8s ease .62s forwards;
}
.hero-stat .num{
  font-family:var(--serif); font-size:2rem; font-weight:600; color:var(--paper);
  display:flex; align-items:baseline; gap:2px;
}
.hero-stat .label{ font-size:0.78rem; color:var(--paper-muted); margin-top:2px; }

@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.4; transform:scale(0.7); }
}

/* animated line-chart visual in hero */
.hero-visual{
  position:relative;
  opacity:0; animation:rise 1s ease .5s forwards;
}
.chart-card{
  background:var(--ink-soft);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-m);
  padding:22px 22px 14px;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
.chart-card .chart-top{
  display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px;
}
.chart-card .chart-top .pair{ font-family:var(--serif); font-size:1.15rem; color:var(--paper); }
.chart-card .chart-top .price{ font-size:0.9rem; color:var(--green); font-weight:600; }
.chart-card svg{ width:100%; height:auto; display:block; }
.chart-path{
  fill:none; stroke:var(--green); stroke-width:2.4;
  stroke-dasharray:600; stroke-dashoffset:600;
  animation:draw 2.4s ease .8s forwards;
}
.chart-fill{ opacity:0; animation:fade-in 1.2s ease 2.1s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fade-in{ to{ opacity:1; } }
.chart-legend{
  display:flex; justify-content:space-between;
  font-size:0.72rem; color:var(--paper-muted); margin-top:10px;
}
.mini-badge{
  position:absolute;
  background:var(--paper); color:var(--ink);
  padding:10px 14px;
  border-radius:var(--radius-s);
  font-size:0.78rem; font-weight:600;
  box-shadow:0 12px 30px rgba(0,0,0,0.28);
  display:flex; align-items:center; gap:8px;
}
.mini-badge.b1{ top:-18px; right:-6px; opacity:0; animation:rise .7s ease 2.4s forwards; }
.mini-badge.b1 .up-arrow{ color:var(--green); }
.mini-badge.b2{ bottom:-16px; left:-10px; opacity:0; animation:rise .7s ease 2.6s forwards; }
.mini-badge.b2 .dn-arrow{ color:var(--coral); }

/* ============================================================
   SECTIONS / GENERIC
   ============================================================ */
section{ padding:88px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  margin-bottom:44px;
  flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(1.7rem,3vw,2.4rem); max-width:36ch; }
.section-head .sub{ color:var(--slate); margin-top:10px; max-width:52ch; }
.section-head-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.section-head-center h2{ max-width:44ch; margin-top:12px; }
.section-head-center .sub{ margin-left:auto; margin-right:auto; margin-top:14px; }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* --- category cards (home) --- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.cat-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:32px 28px;
  position:relative;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-1); border-color:transparent; }
.cat-card .bar{ width:38px; height:4px; border-radius:4px; margin-bottom:22px; }
.cat-card[data-cat="finance"] .bar{ background:var(--finance-c); }
.cat-card[data-cat="forex"] .bar{ background:var(--forex-c); }
.cat-card[data-cat="crypto"] .bar{ background:var(--crypto-c); }
.cat-card h3{ font-size:1.3rem; margin-bottom:12px; }
.cat-card p{ color:var(--slate); font-size:0.95rem; margin-bottom:20px; }
.cat-card .count{ font-size:0.8rem; font-weight:600; color:var(--ink); }
.cat-card a.cat-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.86rem; font-weight:600; color:var(--ink);
  margin-top:6px;
}
.cat-card a.cat-link svg{ width:14px; height:14px; transition:transform .2s ease; }
.cat-card:hover a.cat-link svg{ transform:translateX(3px); }

/* --- post cards (blog grid) --- */
.post-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px 26px;
}
.post-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-1); }
.post-card .thumb{
  aspect-ratio:16/10;
  overflow:hidden;
  position:relative;
  background:var(--paper-dim);
}
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.post-card:hover .thumb img{ transform:scale(1.06); }
.tag-pill{
  position:absolute; top:12px; left:12px;
  font-size:0.68rem; font-weight:700; letter-spacing:0.02em;
  padding:5px 10px; border-radius:20px; color:#fff;
}
.tag-pill.finance{ background:var(--finance-c); color:#241a05; }
.tag-pill.forex{ background:var(--forex-c); }
.tag-pill.crypto{ background:var(--crypto-c); }
.post-card .body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card h3{ font-size:1.12rem; line-height:1.3; }
.post-card h3 a{ transition:color .18s ease; }
.post-card h3 a:hover{ color:var(--green-dim); }
.post-card .excerpt{ font-size:0.88rem; color:var(--slate); flex:1; }
.post-meta{
  display:flex; align-items:center; gap:10px;
  font-size:0.76rem; color:var(--slate);
  padding-top:12px; margin-top:auto;
  border-top:1px solid var(--line);
}
.post-meta .avatar{
  width:24px; height:24px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-size:0.66rem; font-weight:700; font-family:var(--serif);
  flex-shrink:0;
}

/* featured / large post */
.featured-post{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;
  background:#fff;
  margin-bottom:44px;
}
.featured-post .thumb{ position:relative; overflow:hidden; min-height:320px; background:var(--paper-dim); }
.featured-post .thumb img{ width:100%; height:100%; object-fit:cover; }
.featured-post .body{ padding:42px 44px; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.featured-post h3{ font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.2; }
.featured-post .excerpt{ color:var(--slate); font-size:1rem; }

/* ============================================================
   BLOG PAGE — filters + search
   ============================================================ */
.blog-hero{
  background:var(--ink); color:var(--paper);
  padding:58px 0 42px;
}
.blog-hero h1{ color:var(--paper); font-size:clamp(2rem,4vw,2.8rem); }
.blog-hero p{ color:var(--paper-muted); margin-top:12px; max-width:60ch; }

.blog-toolbar{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky; top:var(--header-h); z-index:20;
  padding:18px 0;
}
.toolbar-row{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.search-box{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-s);
  padding:11px 16px;
}
.search-box svg{ width:17px; height:17px; color:var(--slate); flex-shrink:0; }
.search-box input{ border:none; outline:none; flex:1; min-width:0; font-size:0.95rem; background:transparent; }
.filter-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.filter-pill{
  padding:9px 16px; border-radius:20px; font-size:0.84rem; font-weight:600;
  border:1px solid var(--line); background:#fff; color:var(--ink-text);
  transition:all .18s ease;
}
.filter-pill:hover{ border-color:var(--ink); }
.filter-pill.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.results-count{ font-size:0.85rem; color:var(--slate); margin-top:14px; }
.results-count strong{ color:var(--ink); }

.empty-state{
  text-align:center; padding:70px 20px; color:var(--slate);
}
.empty-state h3{ margin-bottom:10px; color:var(--ink); }

/* ============================================================
   POST PAGE (article)
   ============================================================ */
.post-hero{ padding:52px 0 0; }
.post-hero .crumb{ font-size:0.85rem; color:var(--slate); margin-bottom:20px; }
.post-hero .crumb a{ color:var(--green-dim); font-weight:600; }
.post-hero h1{ font-size:clamp(2rem,4.2vw,3rem); max-width:24ch; }
.post-hero .lede{ font-size:1.1rem; color:var(--slate); margin-top:18px; max-width:65ch; }
.post-byline{
  display:flex; align-items:center; gap:14px; margin-top:30px; padding-bottom:34px; flex-wrap:wrap;
}
.post-byline .avatar-lg{
  width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700;
}
.post-byline .who b{ display:block; font-size:0.95rem; }
.post-byline .who span{ font-size:0.8rem; color:var(--slate); }
.post-hero .cover{
  width:100%; aspect-ratio:21/9; border-radius:var(--radius-m); overflow:hidden;
  background:var(--paper-dim); margin-top:8px;
}
.post-hero .cover img{ width:100%; height:100%; object-fit:cover; }

.post-layout{
  display:grid; grid-template-columns:1fr 260px; gap:60px; padding-top:52px;
}
.post-body p{ font-size:1.06rem; color:#2A3542; margin-bottom:24px; max-width:70ch; }
.post-body p:first-of-type::first-letter{
  font-family:var(--serif); font-size:3.4rem; float:left; line-height:0.85;
  padding:6px 8px 0 0; color:var(--ink); font-weight:600;
}
.post-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.post-tag{
  font-size:0.78rem; padding:6px 13px; border-radius:20px;
  background:var(--paper-dim); color:var(--ink-text); border:1px solid var(--line);
}
/* The sidebar sticks as ONE unit while scrolling — not box by box.
   Each .side-box stays in normal document flow (stacked, in order);
   only the wrapping .post-sidebar is sticky, so the four boxes never
   slide over each other. On short viewports the sidebar simply stops
   at the bottom of its column like any in-flow content. */
.post-sidebar{
  position:sticky;
  top:calc(var(--header-h) + 24px);
  align-self:start;
}
.side-box{
  border:1px solid var(--line); border-radius:var(--radius-m); padding:24px; margin-bottom:22px;
}
.side-box h4{ font-size:0.95rem; margin-bottom:14px; }
.side-box .glossary-mini dt{ font-weight:700; font-size:0.86rem; margin-top:12px; }
.side-box .glossary-mini dd{ margin:2px 0 0; font-size:0.83rem; color:var(--slate); }
.related-list a{
  display:block; padding:12px 0; border-top:1px solid var(--line); font-size:0.9rem; font-weight:600;
  transition:color .18s ease;
}
.related-list a:hover{ color:var(--green-dim); }
.related-list a:first-child{ border-top:none; padding-top:0; }

.share-row{ display:flex; gap:10px; margin-top:8px; }

/* related posts grid at end of article */
.related-grid-wrap{ background:var(--paper-dim); padding:70px 0; margin-top:70px; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.page-hero{
  background:var(--ink); color:var(--paper); padding:70px 0 60px; position:relative; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:radial-gradient(ellipse 560px 380px at 90% 0%, rgba(201,162,75,0.14), transparent 60%);
}
.page-hero h1{ color:var(--paper); font-size:clamp(2.1rem,4.4vw,3.2rem); max-width:20ch; position:relative; }
.page-hero p{ color:var(--paper-muted); margin-top:16px; max-width:60ch; font-size:1.05rem; position:relative; }

.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.value-card{ padding:28px; border:1px solid var(--line); border-radius:var(--radius-m); background:#fff; }
.value-card .num{ font-family:var(--serif); font-size:1.6rem; color:var(--gold-dim); margin-bottom:12px; }
.value-card h3{ font-size:1.08rem; margin-bottom:10px; }
.value-card p{ font-size:0.92rem; color:var(--slate); }

.contributors-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.contributor-card{
  text-align:center; padding:26px 16px; border:1px solid var(--line); border-radius:var(--radius-m); background:#fff;
}
.contributor-avatar{
  width:58px; height:58px; border-radius:50%; margin:0 auto 14px;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:1.1rem;
}
.contributor-card b{ display:block; font-size:0.92rem; }
.contributor-card span{ font-size:0.78rem; color:var(--slate); display:block; margin-top:4px; }

/* glossary */
.glossary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
.glossary-item{ border-bottom:1px solid var(--line); padding:20px 0; }
.glossary-item dt{ font-family:var(--serif); font-size:1.08rem; color:var(--ink); font-weight:600; margin-bottom:6px; }
.glossary-item dd{ margin:0; color:var(--slate); font-size:0.94rem; }

.quote-banner{
  background:var(--paper-dim); border-radius:var(--radius-m); padding:48px;
  text-align:center;
}
.quote-banner p{
  font-family:var(--serif); font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--ink); font-style:italic; max-width:44ch; margin:0 auto;
}
.quote-banner span{ display:block; margin-top:18px; font-family:var(--sans); font-style:normal; font-size:0.85rem; color:var(--slate); font-weight:600; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; }
.contact-info h2{ font-size:1.9rem; margin-bottom:16px; }
.contact-info p{ color:var(--slate); margin-bottom:30px; }
.contact-point{ display:flex; gap:14px; padding:18px 0; border-top:1px solid var(--line); }
.contact-point:first-of-type{ border-top:none; }
.contact-point .ic{
  width:40px; height:40px; border-radius:50%; background:var(--paper-dim);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-point .ic svg{ width:18px; height:18px; color:var(--ink); }
.contact-point b{ display:block; font-size:0.92rem; margin-bottom:2px; }
.contact-point span{ font-size:0.87rem; color:var(--slate); }

.form-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:38px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:0.84rem; font-weight:600; margin-bottom:7px; color:var(--ink); }
.field .req{ color:var(--coral); }
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-s);
  background:var(--paper); font-size:0.94rem; transition:border-color .18s ease, box-shadow .18s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--green-dim); box-shadow:0 0 0 3px rgba(31,169,127,0.12); outline:none;
}
.field textarea{ resize:vertical; min-height:110px; }
.field-error{ font-size:0.78rem; color:var(--coral); margin-top:6px; display:none; }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:var(--coral); }
.field.invalid .field-error{ display:block; }
.form-note{ font-size:0.8rem; color:var(--slate); margin-top:4px; }
.submit-row{ display:flex; align-items:center; gap:16px; margin-top:8px; }
.form-success{
  display:none; align-items:center; gap:12px; padding:16px 18px; background:rgba(31,169,127,0.1);
  border:1px solid var(--green); border-radius:var(--radius-s); color:var(--green-dim); font-size:0.9rem; font-weight:600;
}
.form-success.show{ display:flex; }
.form-error{
  display:none; align-items:center; gap:12px; padding:16px 18px; background:rgba(228,87,46,0.08);
  border:1px solid var(--coral); border-radius:var(--radius-s); color:var(--coral); font-size:0.9rem; font-weight:600;
  margin-bottom:20px;
}
.form-error.show{ display:flex; }
.form-success svg{ width:20px; height:20px; flex-shrink:0; }

/* ============================================================
   NEWSLETTER / CTA STRIP
   ============================================================ */
.cta-strip{
  background:var(--ink); color:var(--paper);
  border-radius:var(--radius-m);
  padding:52px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-strip::before{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:radial-gradient(ellipse 460px 300px at 100% 100%, rgba(201,162,75,0.18), transparent 60%);
}
.cta-strip h3{ color:var(--paper); font-size:1.6rem; max-width:22ch; position:relative; }
.cta-strip p{ color:var(--paper-muted); margin-top:8px; position:relative; }
.cta-strip .actions{ position:relative; display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:var(--paper-muted); max-width:100vw; overflow-x:hidden; }
.footer-top{ padding:64px 0 40px; }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px;
}
.footer-brand .wordmark{ font-family:var(--serif); font-size:1.4rem; color:var(--paper); font-weight:600; }
.footer-brand .wordmark span{ color:var(--gold); }
.footer-brand p{ margin-top:14px; font-size:0.88rem; max-width:32ch; color:var(--paper-muted); }
.footer-social{ display:flex; gap:10px; margin-top:20px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center; transition:background .18s ease, border-color .18s ease;
}
.footer-social a:hover{ background:var(--ink-soft); border-color:var(--gold); }
.footer-social svg{ width:16px; height:16px; color:var(--paper); }
.footer-col h4{ color:var(--paper); font-size:0.86rem; margin-bottom:18px; font-family:var(--sans); font-weight:700; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col a{ font-size:0.88rem; color:var(--paper-muted); transition:color .18s ease; }
.footer-col a:hover{ color:var(--gold); }
.footer-newsletter input{
  width:100%; padding:11px 14px; border-radius:var(--radius-s); border:1px solid var(--line-dark);
  background:var(--ink-soft); color:var(--paper); font-size:0.88rem; margin-bottom:10px;
}
.footer-newsletter input::placeholder{ color:var(--paper-muted); }
.footer-bottom{
  border-top:1px solid var(--line-dark); padding:22px 0;
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:0.8rem; color:var(--paper-muted);
}
.footer-bottom .legal-links{ display:flex; gap:20px; }
.footer-bottom .legal-links a:hover{ color:var(--gold); }

/* ============================================================
   MISC
   ============================================================ */
.divider{ height:1px; background:var(--line); border:none; margin:0; }
.tag-swatch{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.back-top{
  position:fixed; right:24px; bottom:24px; z-index:40;
  width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-1);
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease;
}
.back-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-top svg{ width:18px; height:18px; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:var(--radius-s); z-index:100;
}
.skip-link:focus{ left:16px; top:16px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .post-grid{ grid-template-columns:repeat(2,1fr); }
  .contributors-grid{ grid-template-columns:repeat(2,1fr); }
  .value-grid{ grid-template-columns:repeat(2,1fr); }
  .featured-post{ grid-template-columns:1fr; }
  .featured-post .thumb{ min-height:240px; }
  .post-layout{ grid-template-columns:1fr; }
  .post-sidebar{ position:static; max-height:none; overflow-y:visible; }
  .contact-layout{ grid-template-columns:1fr; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:420px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px 28px; }

  /* Nav collapses to the hamburger menu for BOTH tablet and phone —
     this used to only kick in below 760px, which left tablets
     (roughly 761–1020px) stuck with the cramped desktop nav, causing
     the menu to seem to "work" on phones but not on tablets. */
  .nav-links{
    position:fixed; top:var(--header-h); right:0; bottom:0; left:0; height:calc(100vh - var(--header-h));
    background:var(--paper); flex-direction:column; align-items:stretch; gap:0;
    padding:14px 20px; transform:translateX(100%); transition:transform .3s ease;
    overflow-y:auto; overflow-x:hidden; max-width:100vw;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ padding:16px 4px; font-size:1.05rem; }
  .nav-links a.active::after{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-actions .btn{ display:none; } /* "Write for us" collapses into the menu itself */
}

@media (max-width: 760px){
  section{ padding:56px 0; }
  .cat-grid{ grid-template-columns:1fr; }
  .post-grid{ grid-template-columns:1fr; }
  .contributors-grid{ grid-template-columns:1fr 1fr; }
  .value-grid{ grid-template-columns:1fr; }
  .glossary-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .cta-strip{ padding:36px 26px; }
  .hero{ padding:56px 0 44px; }
  .hero-stats{ gap:24px; flex-wrap:wrap; }
  .toolbar-row{ flex-direction:column; align-items:stretch; }
  .filter-pills{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .post-hero .cover{ aspect-ratio:16/9; }
  .post-body p{ font-size:1rem; }
  .contact-info{ margin-bottom:8px; }
  .form-row{ gap:0; }

  /* Footer: single column and centered on phones so nothing gets
     squeezed into narrow, misaligned columns. */
  .footer-grid{ grid-template-columns:1fr; gap:34px; text-align:center; }
  .footer-brand p{ margin-left:auto; margin-right:auto; }
  .footer-social{ justify-content:center; }
  .footer-col ul{ display:inline-block; text-align:left; }
  .footer-newsletter{ max-width:340px; margin:0 auto; }
  .footer-bottom{ flex-direction:column; text-align:center; gap:10px; }
  .footer-bottom .legal-links{ justify-content:center; }
}

@media (max-width: 480px){
  .contributors-grid{ grid-template-columns:1fr; }
  .value-grid{ grid-template-columns:1fr; }
  .container{ padding:0 18px; }
  .featured-post .body{ padding:28px 24px; }
  .post-body p:first-of-type::first-letter{ font-size:2.6rem; }
  .hero h1{ font-size:clamp(1.9rem, 9vw, 2.6rem); }
  .hero-sub{ font-size:0.98rem; }
  .hero-stats{ gap:20px; }
  .hero-stat .num{ font-size:1.5rem; }
  .chart-card{ padding:18px 16px 12px; }
  .post-hero .cover{ aspect-ratio:4/3; }
  .form-card{ padding:24px 18px; }
  .cta-strip h3{ font-size:1.3rem; }
  .quote-banner{ padding:30px 20px; }
  .value-card, .contributor-card{ padding:22px 18px; }
  .ticker-item{ font-size:0.74rem; }
  .ticker-track{ gap:22px; }
}