/* ==========================================================================
   Vertwo Premium — News Archive (/news/)
   --------------------------------------------------------------------------
   v0.20.1 — verbatim port of 06-news.html style block lines 941-1898.
   Loaded only on archive-vertwo_news.php (and vertwo_news_category /
   vertwo_news_tag taxonomy archives) via conditional enqueue in
   functions.php → vertwo_enqueue_news_archive_assets().

   Order of sections (matches prototype):
     1. #news-hero  + .nh-*   (hero with blob atmosphere)
     2. #featured   + .ft-*   (single magazine cover featured slot)
     3. #topics     + .tp-*   (topic pill rail with arrow scrollers)
     4. #stream     + .st-*   (year-grouped grid + filter chips)
     5. #imprint    + .imp-*  (closing social/IG strip + 3 brand cards)
     6. responsive @media     (1100 / 860 / 600 breakpoints from prototype)

   Theme-global variables provided by design-system.css:
     --orange, --gold, --black, --white, --off, --line, --font-title, --font-body
   Local variables defined here (mirrors news.css :root for archive scope):
     --cat-announcement, --cat-news, --cat-events, --cat-careers
     --ease-spring, --ease-coast, --ease-soft
   ========================================================================== */

/* ─── Local variables ─── */
:root {
	--cat-announcement: #F27A0F;
	--cat-news:         #2D7EF7;
	--cat-events:       #8A3FFC;
	--cat-careers:      #11B981;

	--ease-spring: cubic-bezier(0.34, 1.45, 0.5, 1);
	--ease-coast:  cubic-bezier(0.25, 1, 0.32, 1);
	--ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Reveal-on-scroll opt-out (prototype parity, 06-news.html line 729-734) ─── */
.r,
.r.in,
.r-left,
.r-left.in,
.r-right,
.r-right.in {
	opacity: 1;
	transform: none;
}

/* v0.29.10 — hero sizing copied VERBATIM from works-archive.css + page-about.css
   (both use 50vh / 120px-top default + 42vh / 100px-top below 600px). Vic
   asked to match other archive heroes for consistency — the news hero was
   running 62vh / 160px which made it feel disproportionately large vs
   sibling pages. The v0.29.8 intermediate 1100px tablet rule got dropped
   in favor of this two-step (default + 600px) pattern, which is what
   every other archive in the theme uses. */
#news-hero{
  position:relative;
  min-height:50vh;
  height:auto;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:#0a0a0c;
  isolation:isolate;
  padding:120px 24px 70px;
}
.nh-bg{
  position:absolute;inset:-10% -5%;
  z-index:0;pointer-events:none;
  filter:blur(70px) saturate(140%);
  opacity:.85;
  will-change:transform;
}
.nh-blob{position:absolute;border-radius:50%;mix-blend-mode:screen}
.nh-blob--a{
  width:55vw;height:55vw;left:-10%;top:-10%;
  background:radial-gradient(circle at 30% 30%, var(--blob-color, #F27A0F) 0%, transparent 60%);
  animation:nhDriftA 22s ease-in-out infinite alternate;
}
.nh-blob--b{
  width:50vw;height:50vw;right:-12%;top:8%;
  background:radial-gradient(circle at 70% 50%, var(--blob-color, #EC2F7A) 0%, transparent 60%);
  animation:nhDriftB 28s ease-in-out infinite alternate;
}
.nh-blob--c{
  width:62vw;height:62vw;left:18%;bottom:-22%;
  background:radial-gradient(circle at 50% 50%, var(--blob-color, #F5A623) 0%, transparent 60%);
  animation:nhDriftC 34s ease-in-out infinite alternate;
}
@keyframes nhDriftA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(8vw,4vh,0) scale(1.12)}}
@keyframes nhDriftB{0%{transform:translate3d(0,0,0) scale(1.05)}100%{transform:translate3d(-6vw,5vh,0) scale(1)}}
@keyframes nhDriftC{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-4vw,-6vh,0) scale(1.15)}}
.nh-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  mix-blend-mode:overlay;
}
.nh-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(10,10,12,0.0) 0%, rgba(10,10,12,0.45) 100%);
}
.nh-inner{
  position:relative;z-index:3;
  max-width:920px;width:100%;
  text-align:center;color:#fff;
}
.nh-eyebrow{
  font-size:0.72rem;font-weight:600;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--orange);
  margin-bottom:18px;display:inline-block;
}
.nh-title{
  font-family:var(--font-title);
  font-size:clamp(2.4rem, 4.8vw, 4.8rem);
  font-weight:900;letter-spacing:-0.045em;line-height:1.0;
  color:#fff;margin-bottom:22px;
}
.nh-title em{font-style:normal;color:var(--orange)}
.nh-sub{
  font-size:clamp(0.95rem,1.25vw,1.1rem);
  font-weight:300;line-height:1.7;
  color:rgba(255,255,255,0.75);
  max-width:580px;margin:0 auto;
}

/* ── FEATURED — single magazine-cover-style hero card ─────────
   Light section. Asymmetric 60/40 split. Editorial tone, restrained.
═════════════════════════════════════════════════════════════════ */
#featured{background:var(--white);padding:72px 24px 40px}
.ft-wrap{max-width:1200px;margin:0 auto}
.ft-issue{
  display:flex;align-items:center;gap:14px;
  margin-bottom:24px;
  font-size:0.72rem;font-weight:600;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--mid);
}
.ft-issue-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:980px;
  background:var(--orange);color:#fff;
  font-size:0.65rem;font-weight:700;letter-spacing:0.14em;
}
.ft-issue-rule{flex:1;height:1px;background:var(--line)}
.ft-grid{
  display:grid;grid-template-columns:6fr 5fr;
  gap:56px;align-items:center;
}
.ft-cover{
  position:relative;aspect-ratio:5/4;
  border-radius:20px;overflow:hidden;
  background:linear-gradient(135deg,#1a0820 0%,#3d1565 50%,#0a0510 100%);
  /* Resting shadow — close, contained, not spread out */
  box-shadow:
    0 22px 44px -22px rgba(0,0,0,.32),
    0 10px 20px -10px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.04) inset;
  cursor:pointer;
  transition:
    transform .6s cubic-bezier(.16,1,.3,1),
    box-shadow .6s cubic-bezier(.16,1,.3,1);
}
.ft-grid:hover .ft-cover{
  transform:translateY(-6px);
  /* Hover — tightly framed orange ring + close-set glow, no wide spread */
  box-shadow:
    0 0 0 1.5px rgba(242,122,15,0.6),
    0 28px 50px -22px rgba(0,0,0,.34),
    0 16px 32px -16px rgba(242,122,15,0.32),
    0 8px 18px -10px rgba(0,0,0,.16);
}
.ft-cover-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
.ft-grid:hover .ft-cover-img{transform:scale(1.04)}
.ft-cover-ph{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.18);
}
.ft-cover-ph svg{width:64px;height:64px;stroke:currentColor;fill:none;stroke-width:1.2}
.ft-cover-grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(26,26,26,0) 30%, rgba(26,26,26,.6) 100%);
  pointer-events:none;
}
.ft-body{padding:0 8px}
.ft-cat{
  display:inline-flex;align-items:center;
  padding:7px 14px;border-radius:980px;
  background:var(--cat-announcement);color:#fff;
  font-size:0.7rem;font-weight:700;letter-spacing:0.04em;
  margin-bottom:24px;
}
.ft-cat[data-cat="News"]        { background:var(--cat-news); }
.ft-cat[data-cat="Events"]      { background:var(--cat-events); }
.ft-cat[data-cat="Careers"]     { background:var(--cat-careers); }
.ft-title{
  /* v0.32.59 — weight 900 → 700 (NHG Black → NHG Bold). Vic flagged
     the design intent was always Bold for article titles. */
  font-family:var(--font-title);
  font-size:clamp(2rem,3.6vw,3.4rem);
  font-weight:700;letter-spacing:-0.04em;line-height:1.04;
  color:var(--black);margin-bottom:22px;
}
.ft-title em{font-style:normal;color:var(--orange)}
.ft-deck{
  font-size:1.05rem;font-weight:300;line-height:1.7;
  color:var(--mid);margin-bottom:28px;
  max-width:520px;
}
.ft-meta{
  display:flex;align-items:center;gap:14px;
  font-size:0.78rem;font-weight:500;color:var(--mid);
  letter-spacing:0.02em;
  margin-bottom:32px;
}
.ft-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--line)}
.ft-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-title);font-weight:700;
  font-size:1rem;letter-spacing:-0.01em;
  color:var(--orange);text-decoration:none;
  border-bottom:2px solid var(--orange);
  padding:0 0 4px;
  transition:gap .3s cubic-bezier(.16,1,.3,1);
}
.ft-cta:hover{gap:14px}
.ft-cta svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.ft-cta:hover svg{transform:translateX(4px)}

/* ── TOPICS — contained subtle off-white block with squircle nav arrows ──
   Standalone editorial module. Subtle warm off-white tint visually
   separates it from the white Featured above and the off-gray Stream below.
═════════════════════════════════════════════════════════════════ */
#topics{
  background:var(--white);
  padding:40px 24px 56px;
}
.tp-wrap{max-width:1200px;margin:0 auto}
.tp-block{
  position:relative;
  background:#F8F6F2;
  border:1px solid rgba(0,0,0,0.05);
  border-radius:24px;
  padding:28px 28px 24px;
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;
}
.tp-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:18px;margin-bottom:18px;flex-wrap:wrap;
}
.tp-eyebrow{
  font-size:0.66rem;font-weight:700;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--mid);
}
.tp-helper{
  font-size:0.78rem;font-weight:500;color:var(--mid);
  letter-spacing:0.01em;
  opacity:0.75;
}
.tp-rail-wrap{
  position:relative;
  display:flex;align-items:center;gap:14px;
  --rail-h:52px;
  --gate-h:56px;
  height:var(--rail-h);
}
.tp-rail-viewport{
  flex:1 1 auto;
  min-width:0;
  height:var(--rail-h);
  position:relative;
  /* Gate-line hairlines on either edge — testimonials DNA. */
  clip-path:inset(-12px 0);
  -webkit-clip-path:inset(-12px 0);
  /* Drag affordance on desktop. Native touch-pan handles mobile. */
  cursor:grab;
}
.tp-rail-viewport.is-grabbing{cursor:grabbing}
.tp-rail-viewport.is-grabbing .tp-pill{
  /* While dragging, suppress pill cursor + prevent click events
     from firing on accidental release. */
  cursor:grabbing;
}
.tp-rail-viewport::before,
.tp-rail-viewport::after{
  content:"";position:absolute;top:50%;
  width:1px;height:var(--gate-h);
  background:rgba(0,0,0,0.10);
  transform:translateY(-50%);
  pointer-events:none;
  z-index:2;
}
.tp-rail-viewport::before{left:0}
.tp-rail-viewport::after{right:0}
.tp-rail{
  display:flex;gap:8px;
  height:100%;align-items:center;
  overflow-x:auto;
  padding:0 12px;
  /* No scroll-behavior:smooth — the JS arrow animation hand-controls
     the scroll position via rAF. Native smooth-scroll would compete and
     cause the "slow start, sudden catch-up" jank on mobile. */
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* Explicit pan-x: tells touch devices "horizontal swipes belong to
     this element, vertical scrolls bubble to the page." Without this
     the browser sometimes captures both axes and the rail feels stuck. */
  touch-action:pan-x;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.tp-rail::-webkit-scrollbar{display:none}
.tp-pill{
  flex-shrink:0;
  display:inline-flex;align-items:center;
  padding:9px 16px;border-radius:980px;
  border:1px solid var(--line);
  background:var(--white);
  font-family:var(--font-body);
  font-size:0.85rem;font-weight:500;
  color:var(--black);
  cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
  text-decoration:none;
  white-space:nowrap;
}
.tp-pill:hover{
  border-color:#cfcfd4;
  color:var(--orange);
  transform:translateY(-1px);
}
.tp-pill.active{
  background:var(--black);
  color:#fff;
  border-color:var(--black);
}

/* Nav arrows — squircle 40×40, testimonials DNA (verbatim style)
   Hide on mobile (touch-scroll handles it natively). */
.tp-arrow{
  all:unset;
  flex:0 0 40px;width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  color:var(--black);
  cursor:pointer;
  transition:
    border-color 220ms cubic-bezier(.22,1,.36,1),
    color 220ms cubic-bezier(.22,1,.36,1),
    background 220ms cubic-bezier(.22,1,.36,1),
    box-shadow 220ms cubic-bezier(.22,1,.36,1),
    transform 220ms cubic-bezier(.22,1,.36,1),
    opacity 220ms cubic-bezier(.22,1,.36,1);
}
.tp-arrow:hover,
.tp-arrow:focus-visible{
  border-color:var(--orange);
  background:var(--orange);
  color:#fff;
  box-shadow:0 6px 22px rgba(242,122,15,.45);
}
.tp-arrow:active{transform:scale(.94)}
.tp-arrow svg{width:14px;height:10px;display:block}
.tp-arrow.is-disabled{
  opacity:0.35;
  pointer-events:none;
}

/* ── STREAM — sticky filter + year-block grid + load more ── */
#stream{background:var(--off);padding:56px 24px 64px}
.st-wrap{max-width:1200px;margin:0 auto}
.st-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-bottom:32px;flex-wrap:wrap;
}
.st-eyebrow{
  font-size:0.72rem;font-weight:600;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--orange);
  margin-bottom:8px;
}
.st-title{
  font-family:var(--font-title);
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:900;letter-spacing:-0.04em;line-height:1.08;
  color:var(--black);margin-bottom:8px;
}
.st-title em{font-style:normal;color:var(--orange)}
.st-sub{font-size:0.95rem;font-weight:300;color:var(--mid);line-height:1.6;max-width:480px}

/* Sticky filter bar — pill chips (Works-page DNA), with native dropdowns
   on tablet/mobile. Cards use a three-phase fade-out / FLIP-move /
   fade-in animation driven by JS (.is-out class for opacity). */
.st-filter{
  position:sticky;top:88px;z-index:50;
  /* v0.32.97 — opacity 0.85 → 0.72 (more glassy) + drop shadow so
     the floating bar reads as a layer above the scrolled content.
     Matches works-archive .pm-toolbar / .pmo-toolbar. */
  background:rgba(245,245,247,0.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 28px -14px rgba(0,0,0,0.18);
  margin:0 -24px 48px;
  padding:14px 24px;
}
.st-filter-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;
  gap:24px;flex-wrap:wrap;
}
.st-filters{
  display:flex;align-items:center;
  gap:6px;flex-wrap:wrap;flex:1;min-width:0;
}
.st-filter-label{
  font-size:0.68rem;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mid);
  margin-right:4px;white-space:nowrap;
}
.st-chip{
  position:relative;
  padding:7px 16px;
  border-radius:980px;
  border:1px solid var(--line);
  background:transparent;
  font-family:var(--font-body);
  font-size:0.8125rem;font-weight:500;
  color:var(--black);
  cursor:pointer;
  transition:color .25s, border-color .25s, background .25s;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.st-chip:hover{border-color:#cfcfd4;color:var(--orange)}
.st-chip:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(242,122,15,0.3)}
.st-chip[aria-pressed="true"]{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
}
.st-chip[aria-pressed="true"]:hover{color:#fff}
.st-chip-count{
  display:inline-block;margin-left:6px;
  font-size:0.7rem;font-weight:600;
  color:var(--mid);
  font-variant-numeric:tabular-nums;
}
.st-chip[aria-pressed="true"] .st-chip-count{color:rgba(255,255,255,0.7)}

.st-filter-sep{
  width:1px;height:20px;background:var(--line);
  margin:0 4px;flex-shrink:0;
}

/* Mobile dropdown — hidden by default, shown ≤1100px (parity with Works) */
.st-filter-mobile{
  display:none;
  align-items:center;gap:8px;
  flex-shrink:0;
}
.st-filter-mobile-group{
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;
}
.st-select{
  appearance:none;-webkit-appearance:none;
  font-family:var(--font-body);
  font-size:0.8125rem;font-weight:500;
  color:var(--black);
  background:transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  border:1px solid var(--line);
  border-radius:980px;
  padding:7px 32px 7px 14px;
  cursor:pointer;
  transition:border-color .2s;
}
.st-select:hover,.st-select:focus{border-color:#cfcfd4;outline:none}

/* Card transitions — three-phase animation:
   - opacity transitions in 360ms (used for fade out + fade in)
   - transform animates only when JS sets it (FLIP for survivor cards)
   The base .st-card already has transition:opacity .36s — we only
   need .is-out class here. JS adds the transform transition inline
   only during the FLIP phase. */
.st-card.is-out{
  opacity:0;
  pointer-events:none;
}

/* Year block */
.st-year{margin-bottom:48px}
.st-year:last-of-type{margin-bottom:0}
.st-year-divider{
  display:flex;align-items:baseline;gap:24px;
  margin-bottom:36px;
}
.st-year-num{
  font-family:var(--font-title);
  font-size:clamp(2rem,3.4vw,2.8rem);
  font-weight:900;letter-spacing:-0.04em;line-height:1;
  color:var(--black);
}
.st-year-rule{flex:1;height:1px;background:var(--line);position:relative;top:-2px}
.st-year-count{
  font-size:0.66rem;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--mid);
}

/* Card grid */
.st-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

/* Editorial card */
.st-card{
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    border-color .35s cubic-bezier(.16,1,.3,1),
    box-shadow .4s cubic-bezier(.16,1,.3,1),
    opacity .34s cubic-bezier(.22,1,.36,1);
}
.st-card:hover{
  transform:translateY(-4px);
  border-color:rgba(242,122,15,0.55);
  box-shadow:
    0 0 0 1px rgba(242,122,15,0.35),
    0 18px 40px -16px rgba(242,122,15,0.28),
    0 8px 18px -8px rgba(26,26,26,0.10);
}
.st-card[data-hidden="true"]{display:none}

/* v0.29.11 — Filter-animation class states ported VERBATIM from
   works-archive.css `.pm-card.is-*` rules (lines 1118-1144) + CSS vars
   (lines 644-648). Drives the three-phase fade-out → reflow + FLIP →
   fade-in pipeline in news-archive.js applyFilters(). Identical timing
   and easing as works archive so the two pages feel consistent.
   --dur-fade / --dur-enter / --ease are scoped local copies — works
   defines them on .pm-archive, news defines them at :root scope so
   the .st-card-keyframe rules below can resolve them. */
:root {
  --st-dur-fade:  480ms;
  --st-dur-enter: 640ms;
  --st-flip-ease: cubic-bezier(.83,0,.17,1);
}

.st-card.is-hidden{display:none}

/* LEAVERS — stay in grid flow, just fade out. Same ease as FLIP so the
   leave feels deliberate, not snappy. */
.st-card.is-leaving{
  animation: stLeave var(--st-dur-fade) var(--st-flip-ease) both;
  pointer-events:none;
}
@keyframes stLeave{
  to{opacity:0; transform:scale(.94)}
}

/* PENDING ENTER — newcomer occupies its grid slot but is invisible.
   Holds the layout for survivor FLIP without showing yet. */
.st-card.is-pending-enter{
  opacity:0;
  pointer-events:none;
}

/* ENTRANTS — cards fading in during phase 3 (after FLIP completes) */
.st-card.is-entering{
  animation: stEnter var(--st-dur-enter) var(--st-flip-ease) both;
}
@keyframes stEnter{
  from{opacity:0; transform:translateY(20px) scale(.94)}
  to  {opacity:1; transform:none}
}

.st-card-img{
  position:relative;width:100%;aspect-ratio:16/10;
  background:linear-gradient(135deg,#1a0820,#3d1565 50%,#0a0510);
  overflow:hidden;
}
.st-card-img-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.st-card:hover .st-card-img-bg{transform:scale(1.06)}
.st-card-img-ph{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.18);
}
.st-card-img-ph svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:1.4}
.st-card-img.v1{background:linear-gradient(135deg,#0a1020,#1a3d60 50%,#0a0820)}
.st-card-img.v2{background:linear-gradient(135deg,#041a06,#0a3d10 50%,#020e04)}
.st-card-img.v3{background:linear-gradient(135deg,#1a0505,#4a0f0f 50%,#0a0202)}
.st-card-img.v4{background:linear-gradient(135deg,#0a0808,#1e0a0a 50%,#040202)}
.st-card-img.v5{background:linear-gradient(135deg,#0a1830,#1a3d60 50%,#0a0a18)}
.st-card-img.v6{background:linear-gradient(135deg,#12021a,#380c28 50%,#08020a)}
.st-card-cat{
  position:absolute;top:14px;left:14px;
  display:inline-flex;align-items:center;
  padding:5px 11px;border-radius:980px;
  background:var(--cat-announcement);color:#fff;
  font-size:0.62rem;font-weight:700;letter-spacing:0.06em;
  text-transform:uppercase;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.st-card-cat[data-cat="News"]        { background:var(--cat-news); }
.st-card-cat[data-cat="Events"]      { background:var(--cat-events); }
.st-card-cat[data-cat="Careers"]     { background:var(--cat-careers); }

.st-card-body{
  padding:22px 24px 26px;
  display:flex;flex-direction:column;flex:1;
  position:relative;
}
.st-card-meta{
  display:flex;align-items:center;gap:8px;
  font-size:0.7rem;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--mid);
  margin-bottom:12px;
}
.st-card-meta-dot{width:2.5px;height:2.5px;border-radius:50%;background:var(--line)}
.st-card-title{
  /* v0.32.59 — weight 900 → 700 (NHG Black → NHG Bold). */
  font-family:var(--font-title);
  font-size:1.18rem;font-weight:700;letter-spacing:-0.025em;
  line-height:1.2;color:var(--black);
  margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
.st-card-excerpt{
  font-size:0.88rem;font-weight:300;line-height:1.6;
  color:var(--mid);
  flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:16px;
}
.st-card-arrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.78rem;font-weight:700;
  color:var(--orange);
  transition:gap .3s cubic-bezier(.16,1,.3,1);
}
.st-card:hover .st-card-arrow{gap:10px}
.st-card-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Empty state */
.st-empty{
  grid-column:1/-1;
  text-align:center;
  padding:80px 20px;
  color:var(--mid);
  font-size:0.95rem;
}
.st-empty strong{display:block;font-family:var(--font-title);font-size:1.4rem;color:var(--black);margin-bottom:8px;font-weight:900;letter-spacing:-0.02em}

/* Load more */
.st-load-wrap{text-align:center;margin-top:40px}

/* ── IMPRINT — magazine back-cover spread ───────────────────
   Dark dramatic section with masthead, IG strip, brand cards.
═════════════════════════════════════════════════════════════════ */
#imprint{
  background:#0a0a0c;
  padding:80px 24px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.imp-grain{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.imp-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.imp-glow::before{
  content:'';position:absolute;
  width:80vw;height:80vw;left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(242,122,15,0.10) 0%, rgba(242,122,15,0) 60%);
  filter:blur(60px);
}
.imp-wrap{
  position:relative;z-index:2;
  max-width:1200px;margin:0 auto;
}

/* Masthead row — text only (logo removed; redundant with footer) */
.imp-masthead{
  padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,0.10);
  margin-bottom:40px;
}
.imp-mast-text{max-width:680px}
.imp-mast-eyebrow{
  font-size:0.66rem;font-weight:700;letter-spacing:0.24em;
  text-transform:uppercase;color:rgba(255,255,255,0.50);
  margin-bottom:14px;display:block;
}
.imp-mast-title{
  font-family:var(--font-title);
  font-size:clamp(2.2rem,5vw,3.6rem);
  font-weight:900;letter-spacing:-0.04em;line-height:0.98;
  color:#fff;
  margin-bottom:20px;
}
.imp-mast-title em{font-style:normal;color:var(--orange)}
.imp-mast-sub{
  font-size:1rem;font-weight:300;line-height:1.7;
  color:rgba(255,255,255,0.65);
  max-width:520px;
}

/* IG film strip — restored. Handle/follow on left, 6-cell strip on right. */
.imp-strip-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:32px;align-items:center;
  margin-bottom:40px;
}
.imp-strip-meta{flex-shrink:0}
.imp-strip-eyebrow{
  font-size:0.6rem;font-weight:700;letter-spacing:0.2em;
  text-transform:uppercase;color:rgba(255,199,115,0.85);
  margin-bottom:8px;
}
.imp-strip-handle{
  font-family:var(--font-title);
  font-size:1.3rem;font-weight:900;letter-spacing:-0.02em;
  color:#fff;
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;
}
.imp-strip-handle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.imp-strip-follow{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:980px;
  background:linear-gradient(135deg,#F58529 0%,#DD2A7B 50%,#8134AF 100%);
  color:#fff;font-family:var(--font-body);font-weight:700;font-size:0.72rem;
  text-decoration:none;
  box-shadow:0 6px 14px -4px rgba(221,42,123,0.4);
  transition:transform .25s, box-shadow .25s;
}
.imp-strip-follow:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 22px -6px rgba(221,42,123,0.55);
}
.imp-strip-follow svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.imp-strip{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:8px;
}

/* v0.29.12 — when Smash Balloon Instagram Feed plugin is active and has
   injected its `.sbi` / `#sb_instagram` widget into [data-ig-slot], drop
   the prototype's 6-col grid so the plugin's own layout breathes. The
   plugin handles its own column counts + spacing — Vic can configure
   them in WP Admin → Instagram Feed → Customize → Layout. Mirrors the
   v0.25.12 bokami pattern on /works/. */
.imp-strip[data-ig-slot]:has(.sbi),
.imp-strip[data-ig-slot]:has(#sb_instagram){
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
}
.imp-strip-cell{
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(135deg,#FFE9B0 0%,#F8D4D4 50%,#CFE7F0 100%);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .3s, box-shadow .3s;
  text-decoration:none;
  position:relative;
}
.imp-strip-cell:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px -6px rgba(0,0,0,0.4);
}
.imp-strip-cell:nth-child(2n)  {background:linear-gradient(135deg,#CFE7F0 0%,#F8D4D4 100%)}
.imp-strip-cell:nth-child(3n)  {background:linear-gradient(135deg,#FFE9B0 0%,#CFE7F0 100%)}
.imp-strip-cell:nth-child(5n)  {background:linear-gradient(135deg,#F8D4D4 0%,#FFE9B0 100%)}
.imp-strip-cell svg{width:24px;height:24px;stroke:rgba(160,80,60,0.45);fill:none;stroke-width:1.4}

/* 3 brand cards — original 5/4 shape with VMV cursor effects on top
   (cursor-following border via mask-composite + cursor shine).
   Stronger tilt angles (±10° / ±7°) for visibility on the smaller cards. */
.imp-cards{
  display:grid;
  /* minmax(0, 1fr) instead of plain 1fr — Safari Grid quirk: 1fr tracks
     default to min-width:auto, which lets aspect-ratio items demand their
     intrinsic content width and overflow the row on Safari. minmax(0,1fr)
     allows shrink-to-fit. Pair with min-width:0 on items below. */
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.imp-card{
  --rx:0; --ry:0; --mx:50%; --my:50%;
  position:relative;
  display:block;
  min-width:0;       /* Safari grid overflow guard */
  text-decoration:none;
  color:#fff;
  aspect-ratio:5/4;
  /* Per-card perspective. Each card is its own 3D context, so the
     rotateX/Y on .imp-card-inner (direct child) renders with proper
     foreshortening — far edge shrinks, near edge expands. Putting
     perspective on the grid container instead would break the chain
     (intermediate .imp-card lacks transform-style:preserve-3d) and
     also give edge cards wonky off-axis vanishing points. */
  perspective:1100px;
}
.imp-card-inner{
  position:relative;
  width:100%;height:100%;
  border-radius:20px;
  transform-style:preserve-3d;
  transform:rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg)) translateZ(0);
  /* No transform transition. The lerp loop in JS drives smooth motion
     by writing per-frame values via rAF — adding a CSS transition on
     top would compete with the lerp and cause jitter. */
  will-change:transform;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 40px -16px rgba(0,0,0,0.6);
}

/* Brand-color gradient base layer */
.imp-card-bg{
  position:absolute;inset:0;z-index:1;border-radius:inherit;
  transition:filter .4s ease;
}
.imp-card:hover .imp-card-bg{filter:brightness(1.08)}
.imp-card--ig .imp-card-bg{
  background:linear-gradient(135deg,#FEDA77 0%,#F58529 25%,#DD2A7B 60%,#8134AF 100%);
}
.imp-card--fb .imp-card-bg{
  background:linear-gradient(135deg,#1877F2 0%,#0B5FCC 100%);
}
.imp-card--li .imp-card-bg{
  background:linear-gradient(135deg,#0A66C2 0%,#004182 100%);
}

/* Cursor-following gradient border (VMV mask-composite trick) */
.imp-card-border{
  position:absolute;inset:0;z-index:5;
  border-radius:inherit;
  padding:1.5px;
  background:radial-gradient(circle 240px at var(--mx) var(--my),
    rgba(255,255,255,1) 0%,
    rgba(255,225,230,0.95) 15%,
    rgba(255,190,160,0.85) 32%,
    rgba(255,255,255,0.18) 60%,
    rgba(255,255,255,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0.25;
  transition:opacity .5s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.imp-card.is-hovering .imp-card-border{opacity:1}

/* Cursor-following warm shine (VMV) */
.imp-card-shine{
  position:absolute;inset:0;z-index:2;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(circle 220px at var(--mx) var(--my),
    rgba(255,255,255,0.35) 0%,
    rgba(255,255,255,0.06) 40%,
    transparent 65%);
  opacity:0;
  transition:opacity .35s ease;
}
.imp-card.is-hovering .imp-card-shine{opacity:1}

/* Content layout — small card with icon top, text+arrow bottom */
.imp-card-content{
  position:absolute;inset:0;z-index:3;
  padding:24px 26px;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateZ(20px);
  transform-style:preserve-3d;
}
.imp-card-icon{
  width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,0.18);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.22);
  align-self:flex-start;
  transform:translateZ(8px);
}
.imp-card-icon svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.imp-card--fb .imp-card-icon svg{fill:#fff;stroke:none}
.imp-card-foot{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:12px;
}
.imp-card-text{flex:1;min-width:0;transform:translateZ(6px)}
.imp-card-name{
  font-family:var(--font-title);
  font-size:1.5rem;font-weight:900;letter-spacing:-0.02em;line-height:1;
  color:#fff;margin-bottom:5px;
}
.imp-card-handle{
  font-size:0.78rem;font-weight:500;
  color:rgba(255,255,255,0.78);
  display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.imp-card-arrow{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.22);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .25s, transform .25s;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transform:translateZ(8px);
}
.imp-card:hover .imp-card-arrow{
  background:rgba(255,255,255,0.30);
  transform:translateZ(8px) translate(2px,-2px);
}
.imp-card-arrow svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ── RESPONSIVE — filter chip→dropdown at 1100px (Works parity) ── */
@media (max-width:1100px){
  .st-filters{display:none}
  .st-filter-mobile{display:flex}
}

/* ── RESPONSIVE — tablet ≤860px ───────────────────────────── */
/* v0.29.10 — hero RESPONSIVE rule also copied verbatim from works-archive.css
   (only the 600px breakpoint touches the hero there; news layout still keeps
   its own 860px breakpoint for non-hero stream/featured rules). */
@media (max-width:600px){
  #news-hero{min-height:42vh;padding:100px 20px 50px}
}

@media (max-width:860px){
  .nh-title{font-size:clamp(2rem,7vw,3.4rem)}

  #featured{padding:56px 20px 32px}
  .ft-grid{grid-template-columns:1fr;gap:32px}
  .ft-cover{aspect-ratio:16/10}
  .ft-title{font-size:clamp(1.7rem,4.2vw,2.4rem)}
  .ft-deck{font-size:0.98rem}

  #topics{padding:24px 20px 32px}
  .tp-block{padding:22px 20px 20px;border-radius:20px}
  .tp-rail-wrap{gap:10px;--rail-h:46px;--gate-h:50px}
  .tp-arrow{flex:0 0 36px;width:36px;height:36px;border-radius:11px}

  #stream{padding:44px 20px 48px}
  .st-filter{top:80px;margin:0 -20px 36px;padding:12px 20px}
  .st-filter-inner{gap:16px;justify-content:space-between}
  .st-grid{grid-template-columns:repeat(2, 1fr);gap:20px}
  .st-card-title{font-size:1.05rem}

  #imprint{padding:56px 20px}
  .imp-masthead{padding-bottom:36px;margin-bottom:40px;gap:24px}
  .imp-strip-row{grid-template-columns:1fr;gap:24px;margin-bottom:40px}

  /* v0.29.15 — on mobile/tablet, lay the imp-strip-meta out as a 2-row
     grid so the Follow button sits on the RIGHT of the @handle (Vic
     spec: "move the follow button to the right, aligned with the
     @vertwo_net"). Desktop keeps its default vertical stack inside the
     left-column .imp-strip-meta. */
  .imp-strip-meta{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "eyebrow eyebrow"
      "handle  follow";
    column-gap:12px;
    align-items:center;
  }
  .imp-strip-eyebrow{grid-area:eyebrow}
  .imp-strip-handle {grid-area:handle; margin-bottom:0}
  .imp-strip-follow {grid-area:follow; justify-self:end}
  .imp-strip{grid-template-columns:repeat(6, minmax(0, 1fr));gap:6px}
  /* Three small thumb cards, same size as IG strip cells.
     The "1fr 1fr + third spans full" layout looked broken because
     the 8/3 ratio gave a wide-rectangle third card that didn't match
     the studio's visual rhythm. Three uniform thumbs is cleaner. */
  .imp-cards{grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px}
  .imp-cards .imp-card{aspect-ratio:1/1}
  .imp-card-inner{border-radius:12px}
  .imp-card-content{padding:0;align-items:center;justify-content:center;flex-direction:column;gap:8px}
  .imp-card-icon{position:static;width:36px;height:36px;border-radius:10px;align-self:center;transform:none}
  .imp-card-icon svg{width:18px;height:18px}
  .imp-card-foot{display:none}
  .imp-card-content::after{
    content:attr(data-platform);
    font-family:var(--font-title);
    font-size:0.8rem;font-weight:700;
    color:#fff;letter-spacing:-0.01em;
  }
}

/* ── RESPONSIVE — mobile ≤600px ──────────────────────────── */
@media (max-width:600px){
  #news-hero{min-height:44vh;padding:130px 16px 40px}
  .nh-title{font-size:clamp(1.9rem,8vw,2.8rem)}

  #featured{padding:40px 16px 28px}
  .ft-issue{margin-bottom:18px}
  .ft-grid{gap:24px}
  .ft-title{font-size:1.5rem;margin-bottom:16px}
  .ft-deck{font-size:0.92rem;margin-bottom:20px}
  .ft-meta{margin-bottom:24px;font-size:0.72rem}

  #topics{padding:20px 16px 28px}
  .tp-block{padding:18px 16px 16px;border-radius:18px}
  .tp-head{margin-bottom:14px;gap:12px}
  .tp-helper{display:none}
  .tp-rail-wrap{gap:8px;--rail-h:44px;--gate-h:48px}
  .tp-arrow{flex:0 0 34px;width:34px;height:34px;border-radius:10px}
  .tp-rail{padding:0 10px}
  .tp-pill{padding:8px 13px;font-size:0.8rem}

  #stream{padding:36px 16px 40px}
  .st-head{margin-bottom:24px}
  .st-filter{top:76px;margin:0 -16px 28px;padding:10px 16px}
  .st-filter-inner{gap:10px}
  .st-filter-mobile{flex-wrap:wrap;gap:8px;width:100%;justify-content:flex-start}
  .st-filter-mobile-group{flex:1;min-width:140px}
  .st-filter-mobile-group .st-filter-label{display:none}
  .st-select{width:100%;padding:8px 32px 8px 14px}
  .st-grid{grid-template-columns:1fr;gap:18px}
  .st-year{margin-bottom:48px}
  .st-year-divider{margin-bottom:24px;padding-bottom:14px;gap:14px}
  .st-card-img{aspect-ratio:16/9}
  .st-card-body{padding:18px 20px 22px}
  .st-card-title{font-size:1.05rem;-webkit-line-clamp:2}

  #imprint{padding:48px 16px}
  .imp-masthead{padding-bottom:24px;margin-bottom:28px}
  .imp-mast-title{margin-bottom:14px}
  .imp-mast-sub{font-size:0.92rem}
  .imp-strip-row{margin-bottom:28px;gap:18px}
  .imp-strip{grid-template-columns:repeat(3, minmax(0, 1fr));gap:6px}
  /* All 6 IG cells visible (2 rows × 3 cols) */
  /* 3 brand cards as small square thumbs — same size as IG feed cells */
  .imp-cards{grid-template-columns:repeat(3, minmax(0, 1fr));gap:6px}
  .imp-cards .imp-card{aspect-ratio:1/1}
  .imp-cards .imp-card:nth-child(3){aspect-ratio:1/1}
  .imp-card-inner{border-radius:10px}
  .imp-card-content{padding:0;align-items:center;justify-content:center;flex-direction:column}
  .imp-card-icon{position:static;width:32px;height:32px;border-radius:9px;align-self:center;transform:none}
  .imp-card-icon svg{width:16px;height:16px}
  .imp-card-foot{display:none}  /* hide name+handle+arrow on thumb-size cards */
  .imp-card-content::after{
    content:attr(data-platform);
    display:block;
    font-family:var(--font-title);
    font-size:0.65rem;font-weight:700;
    color:#fff;
    letter-spacing:-0.01em;
    margin-top:6px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v0.32.45 — News featured callout title keeps editor case
   ───────────────────────────────────────────────────────────────────
   Vic's request: editorial article titles should render in the case
   the editor typed them (e.g. "Breaking Fast & Talking Shop: Vertwo's
   Ramadan Iftar 2025"), not the brand-locked lowercase.

   .ft-title is otherwise listed in typography-system.css's universal
   section-title cohort (line ~308) which applies
   `text-transform: lowercase`. We override here so the news pages
   stay editorial while every OTHER section title (Works, Services,
   Careers, About) keeps the brand voice intact.
   ═══════════════════════════════════════════════════════════════════ */
.ft-title {
  text-transform: none !important;
}