/* ==========================================================================
   styles-v4.css — Fresh magazine layout for V4 generator
   ========================================================================== */

/* --------------------------- Root variables ------------------------------ */
:root{
  --bg:#0b0d11;
  --bg-soft:#12161d;
  --bg-elev:#161b23;
  --text:#e9eef6;
  --text-dim:#b8c2d0;
  --text-mute:#8c97a7;

  --brand:#6aa6ff;
  --brand-2:#7af0c9;
  --accent:#ffb86c;

  --line:#232a35;

  --rad:14px;
  --rad-sm:10px;

  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-sm:0 6px 16px rgba(0,0,0,.25);

  --maxw:1200px;
  --dock-w:260px;

  /* Fluid typography via clamp() */
  --fz-0: clamp(11px, .70rem, 12px);
  --fz-1: clamp(12px, .78rem + .1vw, 14px);
  --fz-2: clamp(14px, .92rem + .15vw, 16px);
  --fz-3: clamp(16px, 1.02rem + .25vw, 18px);
  --fz-4: clamp(18px, 1.12rem + .45vw, 22px);
  --fz-5: clamp(22px, 1.28rem + .8vw, 28px);
  --fz-6: clamp(26px, 1.4rem + 1.3vw, 34px);
  --fz-7: clamp(28px, 1.6rem + 2.5vw, 42px);

  --space-0:6px;
  --space-1:10px;
  --space-2:14px;
  --space-3:18px;
  --space-4:24px;
  --space-5:32px;
  --space-6:42px;

  /* Article hero sizing */
  --hero-ratio: 16/9;
  --hero-max-h: 520px;

  /* Fluid logo size (desktop ≈56–64px, mobile smaller) */
  --logo: clamp(40px, 2.5vw + 32px, 64px);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f9fc;
    --bg-soft:#ffffff;
    --bg-elev:#ffffff;
    --text:#0e1220;
    --text-dim:#334155;
    --text-mute:#64748b;

    --brand:#2b6cff;
    --brand-2:#12b886;
    --accent:#ff922b;

    --line:#e6eaf0;

    --shadow:0 10px 30px rgba(15,23,42,.08);
    --shadow-sm:0 6px 16px rgba(15,23,42,.06);
  }
}

/* ------------------------------- Base ----------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body.v4-body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font:400 var(--fz-2)/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
.v4-dot{opacity:.6;margin:0 var(--space-1)}

/* --------------------------- Dock + Shell -------------------------------- */
.v4-dock{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--dock-w);
  background:linear-gradient(180deg,var(--bg-elev),var(--bg-soft));
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  padding:var(--space-5) var(--space-4);
  z-index:40;
}
.v4-dock__brand{
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.2px;
  margin-bottom:2px; width:fit-content;
}
.v4-dock__brand img{
  width:auto; height:auto;
  max-height:var(--logo);
}

.v4-dock__search{display:flex;gap:10px}
.v4-input{
  width:100%;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font-size:var(--fz-2);
  outline:none;
  transition:border .15s, background .15s;
}
.v4-input:focus{border-color:var(--brand);background:rgba(106,166,255,.06)}
.v4-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;padding:10px 14px;border-radius:12px;
  background:linear-gradient(180deg,var(--brand),#4c85ff);
  color:#fff;border:0;cursor:pointer;box-shadow:var(--shadow-sm);
}
.v4-btn:active{transform:translateY(1px)}

.v4-dock__nav{display:grid;gap:8px;overflow:auto;scrollbar-width:none}
.v4-dock__nav::-webkit-scrollbar{display:none}
.v4-dock__link{
  display:block;padding:10px 12px;border-radius:10px;
  color:var(--text-dim);text-decoration:none;font-weight:600;
  border:1px solid transparent;
}
.v4-dock__link:hover{background:var(--bg);color:var(--text);border-color:var(--line)}

.v4-dock__foot{
  margin-top:auto;display:grid;gap:8px;color:var(--text-mute);font-size:var(--fz-1);
}
.v4-dock__foot a{color:inherit;text-decoration:none}
.v4-dock__foot a:hover{color:var(--text)}

.v4-shell{margin-left:var(--dock-w);min-height:100%}

/* ------------------------------ Top bar ---------------------------------- */
.v4-top{position:sticky;top:0;z-index:30;backdrop-filter:saturate(120%) blur(6px)}
.v4-top__inner{
  background:rgba(0,0,0,.25);
  border-bottom:1px solid var(--line);
  padding:10px var(--space-5);
}
@media (prefers-color-scheme: light){
  .v4-top__inner{background:rgba(255,255,255,.7)}
}
.v4-top__marquee{display:flex;gap:12px;align-items:center;white-space:nowrap;overflow:hidden}
.v4-top__label{
  font-size:var(--fz-1);color:#fff;background:var(--brand);
  padding:4px 8px;border-radius:999px;font-weight:700;
}
.v4-top__ticker{display:inline-flex;gap:16px;min-width:100%;animation:scroll-x 26s linear infinite}
.v4-top__ticker a{color:var(--text-dim);text-decoration:none}
.v4-top__ticker a:hover{color:var(--text)}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ------------------------------ Main wrap -------------------------------- */
.v4-main{max-width:var(--maxw);padding:var(--space-5);margin:0 auto}

/* ------------------------------ Breadcrumb ------------------------------- */
.v4-bc{display:flex;gap:8px;align-items:center;margin-bottom:var(--space-4);color:var(--text-mute)}
.v4-bc__sep{opacity:.5}
.v4-bc__item{font-size:var(--fz-1)}
.v4-bc a.v4-bc__item{color:var(--text-dim);text-decoration:none}
.v4-bc a.v4-bc__item:hover{color:var(--text)}

/* =============================== HOME ==================================== */
.v4-layout{
  display:grid;
  grid-template-columns:1fr 280px; /* main + rail */
  gap:var(--space-5);
  align-items:start;
}

/* Ensure hero & “Discover More” span full width */
.v4-hero,
.v4-sectionhead,
.v4-grid{ grid-column:1 / -1; }

.v4-hero{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-auto-rows:260px;
  gap:var(--space-4);
  margin-bottom:var(--space-5);
}
.v4-hero__card{
  position:relative;display:block;overflow:hidden;border-radius:var(--rad);
  isolation:isolate;text-decoration:none;color:#fff;box-shadow:var(--shadow);
}
.v4-hero__card--lg{grid-row:span 2}
.v4-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.1)}
.v4-hero__card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.75) 100%);
}
.v4-hero__tag{
  position:absolute;left:14px;top:14px;z-index:2;
  background:linear-gradient(180deg,var(--brand-2),#12b886);
  color:#0b0d11;font-weight:800;font-size:var(--fz-1);
  padding:6px 10px;border-radius:999px;
}
.v4-hero__title{
  position:absolute;left:14px;right:14px;bottom:12px;z-index:2;
  font-size:clamp(20px, 2.6vw, var(--fz-6));
  line-height:1.12;text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.v4-hero__card--sm .v4-hero__title{font-size:clamp(18px, 2.1vw, var(--fz-4))}

.v4-sectionhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}
.v4-h{margin:0;font-size:var(--fz-4);letter-spacing:.2px}
.v4-chips{display:flex;gap:8px;flex-wrap:wrap}
.v4-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:999px;border:1px solid var(--line);
  color:var(--text-dim);text-decoration:none;font-weight:600;font-size:var(--fz-1);
  background:var(--bg-elev);
}
.v4-chip:hover{border-color:var(--brand);color:var(--text)}

/* Cards grid */
.v4-grid{display:block}
.v4-cards{
  display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.v4-card{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
  transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease;
}
.v4-card:hover{transform:translateY(-2px);border-color:rgba(106,166,255,.4);box-shadow:0 14px 36px rgba(0,0,0,.35)}
.v4-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    padding: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-block-start: 0px;
    margin-block-end: 0px;
}
.v4-card__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.v4-card__body{padding:16px 16px 18px}
.v4-card__kicker{display:inline-block;color:var(--brand-2);font-weight:800;font-size:var(--fz-1);letter-spacing:.2px}
.v4-card__title{margin:8px 0 0;font-size:var(--fz-3);line-height:1.25}

/* Right rail */
.v4-rail{display:grid;gap:var(--space-4)}
.v4-panel{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--rad);
  padding:var(--space-3);box-shadow:var(--shadow-sm);
}
.v4-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.v4-list li a{text-decoration:none;color:var(--text-dim)}
.v4-list li a:hover{color:var(--text)}
.v4-thumbs{display:grid;gap:12px}
.v4-thumbs__item{
  display:grid;grid-template-columns:56px 1fr;gap:10px;
  align-items:center;text-decoration:none;color:var(--text-dim);
}
.v4-thumbs__item img{width:56px;height:42px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}

/* ============================ CATEGORY LIST ============================== */
.v4-sectionhead--cat{margin-bottom:var(--space-4)}
.v4-title{margin:0;font-size:var(--fz-6)}
.v4-filters{margin-top:10px;color:var(--text-mute);font-size:var(--fz-1)}

.v4-layout--cat{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:var(--space-5);
  align-items:start;
}
.v4-listing{display:grid;gap:var(--space-4)}
.v4-row{
  display:grid;grid-template-columns:300px 1fr;gap:var(--space-3);
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.v4-row__media{display:block;position:relative;overflow:hidden}
.v4-row__media img{width:100%;height:100%;object-fit:cover;min-height:180px}
.v4-row__body{padding:var(--space-3)}
.v4-row__title{
  font-size:var(--fz-4);line-height:1.25;color:var(--text);
  text-decoration:none;display:inline-block;margin:0 0 6px;
}
.v4-row__title:hover{color:var(--brand)}
.v4-row__meta{color:var(--text-mute);font-size:var(--fz-1);margin-bottom:10px}
.v4-row__excerpt{margin:0 0 12px;color:var(--text-dim)}
.v4-row__cta{
  display:inline-block;padding:8px 12px;border:1px solid var(--line);
  border-radius:10px;text-decoration:none;color:var(--text-dim);
}
.v4-row__cta:hover{border-color:var(--brand);color:var(--text)}

.v4-pager{
  margin-top:var(--space-5);
  display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.v4-pager__btn{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  text-decoration:none;color:var(--text-dim);background:var(--bg-elev);
}
.v4-pager__btn--disabled{opacity:.4;pointer-events:none}
.v4-pager__pills{display:flex;gap:8px;align-items:center}
.v4-pager__pill{
  display:inline-block;min-width:36px;text-align:center;padding:8px 10px;
  border-radius:10px;border:1px solid var(--line);color:var(--text-dim);text-decoration:none;background:var(--bg-elev);
}
.v4-pager__pill--active{border-color:var(--brand);color:var(--text);background:rgba(106,166,255,.08)}

/* ============================== ARTICLE ================================== */
.v4-article{
  display:grid;
  /* grid-template-columns:minmax(0,1fr) 320px; */
  gap:var(--space-5);
}
.v4-article__head,
.v4-article__hero,
.v4-article__body,
.v4-morecats{ grid-column:1; }
.v4-rail--article{ grid-column:2; grid-row:1 / span 5; align-self:start; }

/* Title + meta */
.v4-article__head{ margin-bottom:var(--space-2); }
.v4-kicker{display:inline-block;font-weight:800;color:var(--brand-2);letter-spacing:.2px;font-size:var(--fz-1)}
.v4-kicker--link{text-decoration:none}
.v4-kicker--link:hover{color:#17d7a0}
.v4-article__title{
  font-size:clamp(24px, 4.5vw, var(--fz-7));
  line-height:1.1;
  margin:4px 0 8px;
}
.v4-article__meta{color:var(--text-mute);margin:0 0 var(--space-1);font-size:var(--fz-1)}

/* Fixed hero image */
.v4-article__hero{
  margin:0 0 var(--space-3);
  border-radius:var(--rad);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  aspect-ratio: var(--hero-ratio);
  max-height: var(--hero-max-h);
}
.v4-article__hero img{width:100%;height:100%;object-fit:cover}

/* Content */
.v4-article__body{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--rad);
  padding:var(--space-4);box-shadow:var(--shadow-sm);margin:0;
}
.v4-prose{color:var(--text-dim);font-size:var(--fz-3)}
.v4-prose h2,.v4-prose h3,.v4-prose h4{color:var(--text);margin:1.2em 0 .5em}
.v4-prose h2{font-size:clamp(20px, 3.2vw, calc(var(--fz-5) + 2px))}
.v4-prose h3{font-size:clamp(18px, 2.4vw, var(--fz-4))}
.v4-prose h4{font-size:clamp(16px, 2vw, var(--fz-3))}
.v4-prose p{margin:.85em 0}
.v4-prose ul,.v4-prose ol{margin:.8em 0 .8em 1.25em}
.v4-prose li{margin:.3em 0}
.v4-prose a{color:var(--brand);text-decoration:none}
.v4-prose a:hover{text-decoration:underline}
.v4-prose blockquote{
  margin:1em 0;padding:1em 1.2em;border-left:4px solid var(--brand);
  background:rgba(106,166,255,.07);border-radius:10px;
}

.v4-morecats{margin-top:var(--space-4)}

/* ============================== STATIC =================================== */
.v4-static{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--rad);
  padding:var(--space-5);box-shadow:var(--shadow-sm);
}

/* ============================== SEARCH =================================== */
.v4-body--search{display:grid;place-items:center}
.v4-searchpage{
  width:min(860px,92vw);
  display:grid;gap:var(--space-4);text-align:center;
}
.v4-searchpage__brand{
  display:inline-flex;gap:10px;align-items:center;justify-self:center;
  text-decoration:none;color:var(--text);
}
.v4-searchpage__brand img{
  width:100%;
  height:calc(var(--logo) - 4px);
  border-radius:12px;
}
.v4-searchxl{
  display:flex;gap:10px;background:var(--bg-elev);border:1px solid var(--line);
  padding:var(--space-3);border-radius:16px;box-shadow:var(--shadow-sm);
}
.v4-input--xl{font-size:var(--fz-3);padding:12px 14px}
.v4-btn--xl{padding:12px 18px}
.v4-foot{display:flex;gap:14px;justify-content:center;color:var(--text-mute);font-size:var(--fz-1)}
.v4-foot a{color:inherit;text-decoration:none}
.v4-foot a:hover{color:var(--text)}
.v4-foot--search{margin-top:var(--space-2)}

/* ====================== MOBILE TOP BAR + DRAWER ========================= */
.v4-nav-toggle{ position:absolute; left:-9999px; }
.v4-dock__mobilebar{ display:none; }
.v4-drawer__panel{ display:none; }

@media (max-width:1400px){
  .v4-dock__nav{display:grid;gap:8px;overflow:auto;scrollbar-width:thin}
  .v4-article__title{
    font-size: 34px;
  }

}

@media (max-width:980px){
  /* Hide desktop dock on mobile; use mobilebar+drawer */
  .v4-dock{ display:none !important; }
  .v4-shell{ margin-left:0; }

  .v4-dock__mobilebar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    padding:10px var(--space-4);
    background:var(--bg-soft);
    border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:50;
  }
  .v4-dock__brand{ gap:10px; margin:0; text-decoration:none; color:var(--text); }
  .v4-dock__brand img{
    max-height:var(--logo); width:auto; height:auto; 
  }
  .v4-dock__brand strong{ display:none; } /* keep brand minimal */

  .v4-dock__search--sm{ display:flex; gap:8px; }
  .v4-input--sm{ padding:9px 12px; font-size:var(--fz-2); }
  .v4-btn--sm{ padding:9px 12px; min-width:40px; }

  .v4-burger{
    width:42px; height:38px; border-radius:12px;
    display:inline-grid; place-items:center; cursor:pointer;
    border:1px solid var(--line); background:var(--bg-elev); box-shadow:var(--shadow-sm);
  }
  .v4-burger span{
    display:block; width:18px; height:2px; background:var(--text);
    border-radius:2px; margin:3px 0;
    transition:transform .18s ease, opacity .18s ease, width .18s ease;
  }

  .v4-drawer{ position:fixed; inset:0; pointer-events:none; z-index:60; }
  .v4-drawer__scrim{
    position:absolute; inset:0; background:rgba(0,0,0,.45);
    opacity:0; transition:opacity .2s ease;
    z-index:0; /* scrim BELOW the panel */
  }
  .v4-drawer__panel{
    position:absolute; top:0; bottom:0; left:0;
    width:min(92vw, 320px);
    background:var(--bg-soft);
    border-right:1px solid var(--line);
    box-shadow:var(--shadow);
    transform:translateX(-100%);
    transition:transform .25s ease;
    display:grid; grid-template-rows:auto 1fr;
    z-index:1; /* panel ABOVE scrim */
  }
  .v4-drawer__head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px var(--space-4); border-bottom:1px solid var(--line);
    font-weight:800; letter-spacing:.2px;
  }
  .v4-drawer__close{
    cursor:pointer; border:1px solid var(--line); border-radius:10px;
    padding:4px 10px; background:var(--bg-elev); color:var(--text);
  }
  .v4-drawer__nav{
    padding:12px var(--space-4) 24px; overflow:auto; display:grid; gap:8px;
  }
  .v4-drawer__nav .v4-dock__link{ border-color:var(--line); background:var(--bg-elev); }

  /* Open state */
  #v4-nav-toggle:checked ~ .v4-drawer{ pointer-events:auto; }
  #v4-nav-toggle:checked ~ .v4-drawer .v4-drawer__scrim{ opacity:1; }
  #v4-nav-toggle:checked ~ .v4-drawer .v4-drawer__panel{ transform:none; }

  /* Hide the burger entirely when open (avoid second X) */
  #v4-nav-toggle:checked ~ .v4-dock__mobilebar .v4-burger{
    opacity:0; visibility:hidden; pointer-events:none;
  }
  /* (keep transforms if you still want animation behind the scenes) */
  #v4-nav-toggle:checked ~ .v4-dock__mobilebar .v4-burger span:nth-child(1){
    transform:translateY(5px) rotate(45deg);
  }
  #v4-nav-toggle:checked ~ .v4-dock__mobilebar .v4-burger span:nth-child(2){
    opacity:0; width:0;
  }
  #v4-nav-toggle:checked ~ .v4-dock__mobilebar .v4-burger span:nth-child(3){
    transform:translateY(-5px) rotate(-45deg);
  }

  /* Page padding on mobile */
  .v4-top__inner{ padding:8px var(--space-4); }
  .v4-main{ padding:var(--space-4); }

  /* Home layout collapses */
  .v4-hero{grid-template-columns:1fr;grid-auto-rows:220px}
  .v4-layout{grid-template-columns:1fr}
  .v4-rail{order:3}
  .v4-row{grid-template-columns:1fr}
  .v4-article{grid-template-columns:1fr}
  .v4-rail--article{grid-column:1;grid-row:auto}
  .v4-sectionhead {
    display: flex
;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    flex-direction: column;
    gap: 10px;
}
.v4-h {
    margin: 0;
    font-size: var(--fz-4);
    letter-spacing: .2px;
    padding-bottom: 10px;
}
}

/* ============================ RESPONSIVE (XS) ============================ */
@media (max-width:600px){
  :root{ --rad:12px }
  .v4-hero__title{font-size:clamp(18px, 4.2vw, 26px)}
  .v4-title{font-size:clamp(20px, 5.2vw, 28px)}
  .v4-card__title{font-size:clamp(16px, 4.2vw, 18px)}
  .v4-prose{font-size:clamp(14px, 3.8vw, 16px)}
  .v4-top__ticker{animation-duration:22s}
}

/* ============================ ACCESSIBILITY ============================== */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
::selection{background:rgba(106,166,255,.35)}

/* ==== Drawer (mobile) — compact list, never flex ================================= */

/* The nav inside the slide-out panel must always be a simple 1-col grid. */
.v4-drawer__nav{
  display: grid !important;                 /* kill any display:flex overrides */
  grid-template-columns: 1fr !important;
  grid-auto-rows: min-content !important;   /* rows hug content */
  gap: 10px !important;
  padding: 12px var(--space-4) 24px !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  align-content: start;
  flex-direction: initial !important;       /* just in case something set it */
}

/* Each category is a short, tap-friendly pill — not a big card */
.v4-drawer__nav .v4-dock__link{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  padding: 10px 14px !important;
  min-height: 44px !important;              /* good finger target */
  height: auto !important;
  line-height: 1.15 !important;

  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;              /* remove card shadow */
  color: var(--text-dim) !important;
  text-decoration: none !important;
  white-space: nowrap;                      /* keep single line (wrap if you prefer) */
}

/* Hover/active (subtle) */
.v4-drawer__nav .v4-dock__link:hover{
  background: rgba(106,166,255,.06) !important;
  border-color: rgba(106,166,255,.45) !important;
  color: var(--text) !important;
  transform: translateY(-1px);
}
.v4-drawer__nav .v4-dock__link:active{
  transform: translateY(0);
}

/* Extra tight on very small screens */
@media (max-width:480px){
  .v4-drawer__nav .v4-dock__link{
    padding: 9px 12px !important;
    min-height: 40px !important;
  }
}

.v4-main{ max-width: 1100px; }  /* was 1200px */

/* HERO: shorter tiles + smaller titles */
.v4-hero{
  grid-auto-rows: 200px;         /* was 260px */
  gap: var(--space-3);           /* a bit tighter */
}
.v4-hero__title{
  font-size: clamp(18px, 1.8vw, 28px); /* was clamp(20px, 2.6vw, var(--fz-6)) */
}
.v4-hero__card--sm .v4-hero__title{
  font-size: clamp(16px, 1.5vw, 22px);
}

/* CARDS: slightly shorter media, smaller text, tighter paddings */
.v4-cards{ gap: var(--space-3); } /* was var(--space-4) */
.v4-card__media{ aspect-ratio: 16 / 11; } /* a touch shorter (was 16/10) */
.v4-card__body{ padding: 12px 14px 14px; } /* was 16px 16px 18px */
.v4-card__kicker{ font-size: var(--fz-0); } /* was var(--fz-1) */
.v4-card__title{
  font-size: clamp(15px, 1.0rem + .1vw, 18px);  /* smaller than var(--fz-3) */
  line-height: 1.2;
  margin-top: 6px;
}

/* SECTION HEAD: slightly smaller heading */
.v4-h{ font-size: calc(var(--fz-4) - 2px); }

/* ARTICLE PAGE H1 (when shown on home widgets) — a bit smaller on wide */
@media (max-width: 1400px){
  .v4-article__title{ font-size: 30px; } /* you had 34px here; dial down */
}

/* Mobile keeps comfortable sizes; shrink hero further on narrow screens */
@media (max-width: 980px){
  .v4-hero{ grid-auto-rows: 180px; }
  .v4-hero__title{ font-size: clamp(16px, 4vw, 22px); }
  .v4-card__title{ font-size: clamp(15px, 3.8vw, 17px); }
}