/*
Theme Name:        SC News
Theme URI:         https://www.sourcingcitynews.co.uk
Description:       Classic PHP WordPress theme for Sourcing City News. Design matches the approved 1-homepage.html UI kit: SC Purple #522E91, SC Orange #F37421, Poppins (display) + Inter (body). Standalone — no parent theme required.
Author:            Akiko Design
Author URI:        https://akikodesign.com
Version:           3.0.0
Requires at least: 5.9
Tested up to:      6.7
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       sc-news
Tags:              news, blog, brand
*/

/* ============================================================
   Brand tokens — exact match to 1-homepage.html design spec
   ============================================================ */
:root {
  /* Brand core */
  --sc-purple:        #522E91;
  --sc-purple-deep:   #2A1550;
  --sc-purple-700:    #46277D;
  --sc-purple-300:    #8B6FBE;
  --sc-orange:        #F37421;
  --sc-orange-600:    #DB6116;
  --sc-orange-100:    #FDE7D6;

  /* Neutrals */
  --bg:           #F7F5F2;
  --surface:      #FFFFFF;
  --surface-alt:  #F3F0F8;
  --ink:          #1A1426;
  --ink-soft:     #4B4658;
  --body:         #4B4658;
  --meta:         #8C8798;
  --border:       #ECE8F1;
  --border-strong:#D9D3E4;

  /* Tints */
  --tint-purple-soft: #EFEAF7;
  --tint-purple:      #DDD2EE;
  --tint-sand:        #EFEBE4;
  --tint-orange-soft: #FDEDE0;
  --tint-orange:      #F9D8BC;

  /* Type */
  --font-display: 'Poppins', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-body:    'Inter', system-ui, 'Segoe UI', Arial, sans-serif;

  /* Scale */
  --fs-display: 2.5rem;
  --fs-h1:      2rem;
  --fs-h2:      1.5rem;
  --fs-h3:      1.25rem;
  --fs-h4:      1.0625rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* Radii */
  --r-sm:  6px;
  --r-md:  6px;
  --r-lg:  6px;
  --r-pill:999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(42,21,80,.06);
  --shadow-md: 0 4px 16px rgba(42,21,80,.08);
  --shadow-lg: 0 8px 24px rgba(42,21,80,.12);

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  --container: 1140px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.4em; margin: 0 0 1em; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1);  font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2);  font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3);  font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4);  font-weight: var(--fw-semibold); }

a { color: var(--sc-orange); text-decoration: none; }
a:hover, a:focus { color: var(--sc-orange); }

/* ============================================================
   Layout
   ============================================================ */
.sc-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.sc-section { padding-block: var(--sp-7); }

/* ============================================================
   HEADER — sticky purple band, exact match to design
   ============================================================ */
.sc-header {
  background: var(--sc-purple);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(42,21,80,.2);
  /* Needed so mobile nav drawer positions relative to header */
  isolation: isolate;
}
.sc-headbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: 64px;
}

/* Wordmark — "sourcingcity" light + "news" bold */
.sc-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 22px;
  letter-spacing: -.01em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.sc-wordmark b, .sc-wordmark strong { font-weight: var(--fw-bold); color: #fff; }
.sc-wordmark .nws { color: var(--sc-orange); font-weight: var(--fw-bold); }

/* Top nav — white text, orange on hover/active */
.sc-topnav {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sc-topnav li a,
.sc-topnav a {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 14.5px;
  color: rgba(255,255,255);
  padding: 8px 14px;
  text-decoration: none;
  transition: color .15s;
}
.sc-topnav li.current-menu-item > a,
.sc-topnav li a:hover,
.sc-topnav a:hover { color: var(--sc-orange); }

/* Search / icon buttons */
.sc-iconbtn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--sc-purple);
  transition: background .15s, color .15s;
}
.sc-iconbtn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ============================================================
   TAGLINE BAND — warm tinted bar with brand tagline + ad slot
   ============================================================ */
.sc-tagband {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  padding-block: 20px;
}
.sc-tagband-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.sc-tagline {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--sc-purple);
  font-weight:600;
  font-style: normal;
  margin-bottom:0;
}

/* Ad slot placeholder */
.sc-adslot {
/*  background: #e5e0ec;
  border: 1px dashed var(--border-strong);*/
  border-radius: 0;
  padding: 2px 20px;
  min-width: 460px;
  text-align: center;
  max-height: 71px;
  align-content: center;
  overflow: hidden;
}
.sc-adslot-label {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--meta);
}

/* ============================================================
   EYEBROW — purple pill label above sections
   ============================================================ */
.sc-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: var(--fw-regular);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tint-purple);
  background: var(--sc-purple);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  line-height: 1;
}

/* ============================================================
   CATEGORY TAG — orange uppercase above card headline
   ============================================================ */
.sc-tag {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sc-orange);
  margin-bottom: var(--sp-1);
  text-decoration: none;
}
.sc-tag:hover { color: var(--sc-orange-600); }
.sc-tag.purple { color: var(--sc-purple); }

/* ============================================================
   READ MORE LINK
   ============================================================ */
.sc-readmore {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 12px;
  color: var(--sc-purple);
  text-decoration: none;
  transition: color .15s;
}
.sc-readmore:hover { color: var(--sc-orange); }
.sc-readmore:hover i,.sc-readmore:hover svg{transform:translateX(5px)}
.sc-readmore i,.sc-readmore svg{width:15px;height:15px;transition:transform .18s ease}
/*
.sc-readmore::after { content: "→"; transition: transform .18s; display: inline-block; }
.sc-readmore:hover::after { transform: translateX(4px); } */

/* ============================================================
   FEATURED STORY CARDS — 3-up grid
   ============================================================ */
.sc-featgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.sc-featgrid.two { grid-template-columns: 1fr 1fr; }

.sc-feat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform .18s, box-shadow .18s;
  display: flex;
  flex-direction: column;
}
.sc-feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.sc-feat .img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--tint-purple-soft);
  position: relative;
}
.sc-feat .img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease;
}
.sc-feat:hover .img img { transform: scale(1.03); }

.sc-feat .img-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--tint-purple-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--meta);
  letter-spacing: .06em;
}

.sc-feat .body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sc-feat .body h3 {
  font-size: var(--fs-h3);
  line-height: 1.28;
  margin: var(--sp-1) 0 var(--sp-3);
  color: var(--sc-purple);
  flex: 1;
}
[data-headline="Ink"] .sc-feat .body h3 { color: var(--ink); }
.sc-feat .body h3 a { color: inherit; }
.sc-feat .body h3 a:hover { color: var(--sc-orange); }
.sc-feat .body p { font-size: var(--fs-sm); color: var(--body); margin-bottom: var(--sp-4); }

/* Hero featured layout */
.sc-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.sc-hero .img { aspect-ratio: unset; min-height: 280px; }
.sc-hero .body { padding: var(--sp-6); }
.sc-hero .body h3 { font-size: var(--fs-h2); }

/* ============================================================
   LATEST NEWS + EVENTS — two-column panel layout
   ============================================================ */
.sc-twocol {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}

/* Panel — white card wrapping list rows */
.sc-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-2) var(--sp-5) var(--sp-4);
}
.sc-panel-foot {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-2);
}

/* List row — thumbnail + title + meta */
.sc-li {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) 0;
}
.sc-li + .sc-li { border-top: 1px solid var(--border); }

.sc-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tint-purple-soft);
}
.sc-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sc-li h4 { font-size: 14.5px; line-height: 1.35; margin: 0 0 3px; color: var(--ink); }
.sc-li h4 a { color: inherit; }
.sc-li h4 a:hover { color: var(--sc-purple); }
.sc-li .meta { font-size: var(--fs-xs); color: var(--meta); }
.sc-li .meta a { color: var(--meta); font-weight: var(--fw-regular); }
.sc-li .meta a:hover { color: var(--sc-orange); }

/* Event rows — date badge + title + location */
.sc-event {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4) 0;
}
.sc-event + .sc-event { border-top: 1px solid var(--border); }

.sc-date {
  flex: 0 0 52px;
  width: 52px;
  text-align: center;
  background: var(--sc-purple);
  color: #fff;
  border-radius: var(--r-md);
  padding: 8px 0 10px;
  font-family: var(--font-display);
}
.sc-date .d { font-weight: var(--fw-extra); font-size: 22px; line-height: 1; display: block; }
.sc-date .m { font-weight: var(--fw-semibold); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; display: block; }
.sc-event h4 { font-size: 15px; line-height: 1.3; margin: 0 0 5px; color: var(--ink); }
.sc-event h4 a { color: inherit; }
.sc-event h4 a:hover { color: var(--sc-purple); }
.sc-event .loc { font-size: var(--fs-xs); color: var(--meta); display: flex; align-items: center; gap: 4px; }

/* ============================================================
   CATEGORY TILES — 2-column grid
   ============================================================ */
.sc-catgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

.sc-cat {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-4) var(--sp-5);
  transition: transform .18s, box-shadow .18s;
  text-decoration: none;
  color: inherit;
}
.sc-cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: inherit; }

.sc-cat .ico {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--tint-purple-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-purple);
}
.sc-cat .ico img, .sc-cat .ico svg { width: 36px; height: 36px; display: block; }

.sc-cat .body { flex: 1; }
.sc-cat .body .sc-tag { margin-bottom: var(--sp-1); }
.sc-cat .body h4 { font-size: 15.5px; margin: 2px 0 var(--sp-1); color: var(--ink); }
.sc-cat:hover .body h4 { color: var(--sc-purple); }
.sc-cat .body p { font-size: var(--fs-xs); color: var(--body); line-height: 1.45; }

/* ============================================================
   FOOTER
   ============================================================ */
.sc-footer { background: var(--sc-purple); color: rgba(255,255,255,.85); }
.sc-footer a { color: rgba(255,255,255,.85); text-decoration: none; font-weight: var(--fw-regular); }
.sc-footer a:hover { color: var(--sc-orange); }

.sc-foot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  flex-wrap: wrap;
}

/* Wordmark on footer */
.sc-footer .sc-wordmark { color: #fff; }

/* Association pills */
.sc-foot-assoc { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.sc-foot-assoc img { height: 45px;width: auto; }
.sc-pill {
  background: #fff;
  border-radius: var(--r-pill);
  padding: 6px 16px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 12px;
  color: var(--sc-purple);
  white-space: nowrap;
}
.sc-pill.asi { color: var(--sc-orange); }

/* Deep-purple copyright bar */
.sc-foot-bottom {
  background: var(--sc-purple-deep);
  padding-block: var(--sp-3);
}
.sc-foot-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.sc-foot-bottom .copy { font-size: 13px; margin-bottom:0; color: rgba(255,255,255,.5); }
.sc-foot-bottom .fnav { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.sc-foot-bottom .fnav a { font-family: var(--font-display); font-size: 12.5px; color: rgba(255,255,255,.65); }
.sc-foot-bottom .fnav a:hover { color: var(--sc-orange); }

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
/* .sc-search rules moved to bottom of file */

/* ============================================================
   SINGULAR / ARCHIVE layouts
   ============================================================ */
.sc-main { padding-block: var(--sp-7); }

.sc-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.sc-content-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-7);
  align-items: start;
}

.sc-post-header { margin-bottom: var(--sp-6); }
.sc-post-header h1 { font-size: var(--fs-h1); }
.sc-post-thumb { width: 100%; max-height: 440px; object-fit: cover; border-radius: var(--r-lg); margin-bottom: var(--sp-6); }

.sc-entry-content {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--body);
  max-width: 720px;
}
.sc-entry-content h2, .sc-entry-content h3 { margin-top: 1.5em; color: var(--ink); }
.sc-entry-content a { color: var(--sc-purple); text-decoration: underline; font-weight: var(--fw-medium); }
.sc-entry-content a:hover { color: var(--sc-orange); }

/* Widget sidebar */
.sc-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-5);
}
.sc-widget h3 {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sc-purple);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--border);
}

/* Pagination */
.sc-pagination { display: flex; gap: var(--sp-2); margin-top: var(--sp-7); flex-wrap: wrap; }
.sc-pagination a,
.sc-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border: 1.5px solid var(--border-strong);
  color: var(--sc-purple);
  background: var(--surface);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.sc-pagination .current,
.sc-pagination a:hover {
  background: var(--sc-purple);
  color: #fff;
  border-color: var(--sc-purple);
}

/* Buttons */
.sc-btn,
button.sc-btn {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  background: var(--sc-purple);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 10px 22px;
  cursor: pointer;
  display: inline-block;
  line-height: 1.4;
  text-decoration: none;
  transition: background .15s;
}
.sc-btn:hover { background: var(--sc-orange); color: #fff; }

/* Category-band tint */
.sc-cat-section.band { background: var(--surface-alt); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .sc-featgrid { grid-template-columns: 1fr 1fr; }
  .sc-twocol   { grid-template-columns: 1fr; }
  .sc-hero      { grid-template-columns: 1fr; }
  .sc-content-sidebar { grid-template-columns: 1fr; }
  .sc-archive-grid { grid-template-columns: 1fr 1fr; }
  .art-body { font-size: 14px !important; }
  /* Hide desktop nav, show burger */
  .sc-topnav { display: none; }

  /* Mobile nav drawer — slides down from header when open */
  .sc-header.nav-open .sc-topnav,
  .sc-header.nav-open nav .sc-topnav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 56px; /* header height */
    left: 0;
    right: 0;
    background: var(--sc-purple);
    z-index: 300;
    padding: var(--sp-3) 0 var(--sp-4);
    box-shadow: 0 8px 24px rgba(26,20,38,.25);
    gap: 0;
  }
  .sc-header.nav-open nav { position: static; }
  .sc-header.nav-open .sc-topnav li a,
  .sc-header.nav-open .sc-topnav a {
    padding: 12px 24px;
    font-size: 15px;
    display: block;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .sc-adslot { min-width: 100%;padding: 0; } 
}
@media (max-width: 640px) {
  .sc-featgrid { grid-template-columns: 1fr; }
  .sc-catgrid  { grid-template-columns: 1fr; }
  .sc-archive-grid { grid-template-columns: 1fr; }
  .sc-headbar  { height: 56px; }
  .sc-wordmark { font-size: 17px; }
  .sc-tagband-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .sc-foot-top { gap: var(--sp-4); }


}

@media (prefers-reduced-motion: reduce) {
  .sc-feat, .sc-cat, .sc-readmore, .sc-readmore::after,
  .sc-btn { transition: none !important; }
  .sc-feat:hover .img img { transform: none; }
}

/* ============================================================
   Image placeholder (used when no featured image is set)
   ============================================================ */
.img-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--tint-purple-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--meta);
  letter-spacing: .06em;
}

/* ============================================================
   EDITORIAL HOMEPAGE — Semafor-style section blocks
   Each section: icon + big section name → lead story (2-col)
   → 4-col text-only grid → "View all" button
   ============================================================ */

/* Section wrapper — light-purple band on alternating sections */
.ed-section {
  padding-block: var(--sp-7);
  border-top: 1px solid var(--border);
}
.ed-section.band {
  background: var(--surface-alt);
}

/* Section header: icon badge + bold section name */
.ed-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  color: var(--sc-purple);
  margin-bottom: var(--sp-6);
}
.ed-head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.ed-head-icon img,
.ed-head-icon svg {
  width: 54px;
  height: 54px;
  display: block;
}

/* Lead story — 2-col: text left, image right */
.ed-lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.ed-lead .txt { display: flex; flex-direction: column; gap: var(--sp-3); }

.ed-lead-date {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sc-orange);
}

/* Special label above lead (e.g. "FREE SHIPPING", "10% OFF") */
.ed-lead-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sc-orange);
  border: 1.5px solid var(--sc-orange);
  border-radius: var(--r-sm);
  padding: 2px 7px;
  margin-bottom: var(--sp-1);
  width: fit-content;
}

.ed-lead h2 {
  font-size: 40px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}
.ed-lead h2 a { color: inherit; text-decoration: none; }
.ed-lead h2 a:hover { color: var(--sc-orange); }

.ed-lead p {
  font-size: var(--fs-sm);
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

/* "Read more" button — orange pill */
.ed-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sc-orange);
  color: #fff;
  font-family: var(--font-display);
  border-radius: 6px;
  padding: 11px 20px;
  text-decoration: none;
  transition: background .15s;
  width: fit-content;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background .15s;
}
.ed-btn::after { content: "→"; font-size: 13px; }
.ed-btn:hover { background: var(--sc-orange-600); color: #fff; }

/* Lead image */
.ed-lead-img {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--tint-purple-soft);
}
.ed-lead-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 4-column supporting stories grid */
.ed-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.ed-grid-item { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Offer micro-label variants (e.g. "BUNDLE DEAL", "BULK PRICING") */
.ed-micro-label {
  align-self: flex-start;
  display: inline-flex;
  width: fit-content;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sc-orange);
  background: var(--sc-orange-100);
  border-radius: var(--r-sm);
  padding: 4px 9px;
  line-height: 1;
  margin-bottom: 2px;
}

.ed-grid-item h4 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin: 0;
}
.ed-grid-item h4 a { color: inherit; text-decoration: none; }
.ed-grid-item h4 a:hover { color: var(--sc-orange); }
.ed-grid-item p {
  font-size: 16px;
  font-weight: 400;
  color: var(--body);
  line-height: 1.5;
  margin: 0;
}

/* Dotted separator between grid columns */
.ed-grid-item + .ed-grid-item {
  border-left: 1px dotted var(--border-strong);
  padding-left: var(--sp-5);
}

/* "View all" outline button */
.ed-viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--sc-purple);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  border: 1.5px solid var(--sc-purple);
  border-radius: 6px;
  padding: 11px 20px;
  text-decoration: none;
  transition: background .15s, color .15s;
  width: fit-content;
}
.ed-viewall::after { content: "→"; font-size: 13px; }
.ed-viewall:hover { background: var(--sc-purple); color: #fff; }

/* Responsive */
@media (max-width: 960px) {
  .ed-lead { grid-template-columns: 1fr; }
  .ed-lead-img { order: -1; }
  .ed-grid { grid-template-columns: repeat(2, 1fr); }
  .ed-grid-item + .ed-grid-item { border-left: none; padding-left: 0; }
  .ed-grid-item:nth-child(odd) + .ed-grid-item { border-left: 1px dotted var(--border-strong); padding-left: var(--sp-5); }
}
@media (max-width: 600px) {
  .ed-grid { grid-template-columns: 1fr 1fr; }
  .ed-head { font-size: var(--fs-h3); }
}

/* ============================================================
   ARCHIVE PAGE — category.php / archive.php
   Design: breadcrumb → section header (icon + title + desc)
   → category filter tabs → lead hero → 3-col card grid
   → Load more button + progress indicator
   ============================================================ */

/* Page background */
.arc-page { background: var(--bg); }

/* ---- Breadcrumb ---- */
.arc-breadcrumb {
  padding: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--meta);
  display: flex;
  align-items: center;
  gap: 6px;
}
.arc-breadcrumb a { color: var(--meta); text-decoration: none; }
.arc-breadcrumb a:hover { color: var(--sc-purple); }
.arc-breadcrumb .sep { color: var(--border-strong); }
.arc-breadcrumb .current { color: var(--ink-soft); font-weight: var(--fw-medium); }

/* ---- Section header ---- */
.arc-header {
  padding: var(--sp-5) 0 var(--sp-6);
}
.arc-header-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.arc-header-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sc-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4px;
}
.arc-header-icon img {
  width: 26px;
  height: 26px;
  display: block;
  filter: brightness(0) invert(1);
}
.arc-header-text {}
.arc-header-text h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--fw-bold);
  color: var(--sc-purple);
  margin: 0 0 var(--sp-2);
  line-height: 1.1;
}
.arc-header-text .desc {
  font-size: var(--fs-sm);
  color: var(--body);
  max-width: 560px;
  margin: 0;
  line-height: 1.6;
}

/* ---- Category filter tabs ---- */
.arc-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-3) 0 var(--sp-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-6);
}
.arc-tabs-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--meta);
  margin-right: var(--sp-2);
  white-space: nowrap;
}
.arc-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--ink-soft);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.arc-tab:hover {
  border-color: var(--sc-purple);
  color: var(--sc-purple);
}
.arc-tab.active {
  background: var(--sc-purple);
  border-color: var(--sc-purple);
  color: #fff;
  font-weight: var(--fw-semibold);
}
.arc-tab .count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  padding: 0 5px;
  line-height: 1;
}
.arc-tab:not(.active) .count {
  background: var(--tint-purple-soft);
  color: var(--sc-purple);
}

/* ---- Lead hero story ---- */
.arc-lead {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.arc-lead-body {
  padding: var(--sp-7) var(--sp-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
}
.arc-lead-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.arc-lead-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sc-orange);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  line-height: 1.4;
}
.arc-lead-date {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  color: var(--sc-orange);
  text-transform: uppercase;
}
.arc-lead-body h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}
.arc-lead-body h2 a { color: inherit; text-decoration: none; }
.arc-lead-body h2 a:hover { color: var(--sc-purple); }
.arc-lead-body p {
  font-size: var(--fs-sm);
  color: var(--body);
  line-height: 1.65;
  margin: 0;
}
/* "Read full story" button — purple pill */
.arc-lead-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  background: var(--sc-purple);
  border-radius: var(--r-md);
  padding: 11px 20px;
  transition: background .15s;
  width: fit-content;
}
.arc-lead-btn::after { content: "→"; }
.arc-lead-btn:hover { background: var(--sc-orange); color: #fff; }

.arc-lead-img {
  overflow: hidden;
  background: var(--tint-purple-soft);
  min-height: 300px;
}
.arc-lead-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.arc-lead-img-ph {
  width: 100%; height: 100%; min-height: 300px;
  background: var(--tint-purple-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace,monospace; font-size: 11px;
  color: var(--meta); letter-spacing:.06em;
}

/* ---- 3-column post cards ---- */
.arc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}

/* Card */
.arc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.arc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.arc-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--tint-purple-soft);
}
.arc-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease;
}
.arc-card:hover .arc-card-img img { transform: scale(1.04); }
.arc-card-img-ph {
  width: 100%; aspect-ratio: 16/9;
  background: var(--tint-purple-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace,monospace; font-size: 11px;
  color: var(--meta); letter-spacing: .06em;
}
.arc-card-body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sp-2);
}
.arc-card-tag {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sc-orange);
  text-decoration: none;
  display: block;
}
.arc-card-tag:hover { color: var(--sc-orange-600); }
.arc-card-body h3 {
  font-size: 16px;
  line-height: 1.3;
  font-weight: var(--fw-semibold);
  color: var(--sc-purple);
  margin: 0;
  flex: 1;
}
.arc-card-body h3 a { color: inherit; text-decoration: none; }
.arc-card-body h3 a:hover { color: var(--sc-orange); }
.arc-card-body p {
  font-size: var(--fs-sm);
  color: var(--body);
  line-height: 1.55;
  margin: 0;
}
.arc-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.arc-card-date {
  font-size: var(--fs-xs);
  color: var(--meta);
  font-family: var(--font-display);
}

/* ---- Load more / pagination ---- */
.arc-loadmore {
  text-align: center;
  padding-bottom: var(--sp-7);
}
.arc-loadmore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 12px 32px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
  cursor: pointer;
}
.arc-loadmore-btn:hover {
  border-color: var(--sc-purple);
  color: var(--sc-purple);
}
.arc-loadmore-count {
  font-size: var(--fs-xs);
  color: var(--meta);
  margin-top: var(--sp-3);
  display: block;
}
/* Purple underline progress bar */
.arc-progress {
  width: 48px;
  height: 3px;
  background: var(--sc-purple);
  border-radius: 999px;
  margin: var(--sp-3) auto 0;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .arc-lead { grid-template-columns: 1fr; }
  .arc-lead-img { min-height: 220px; order: -1; }
  .arc-grid { grid-template-columns: 1fr 1fr; }
  nav.arc-tabs { flex-wrap: nowrap;overflow-x: auto;scrollbar-width: none;-webkit-overflow-scrolling: touch; }
  .arc-header-inner { align-items: center; }
  .ev-toolbar .ev-search-bar { flex: 1 1 50px; }
}
@media (max-width: 600px) {
  .arc-grid { grid-template-columns: 1fr; }
  .arc-tabs { gap: var(--sp-1); }
  .arc-header-text h1 { font-size: 1.75rem; }
}

/* ============================================================
   LOAD MORE — progress track + loading state (arc fixes)
   ============================================================ */

/* Grey track behind the purple bar */
.arc-progress-track {
  width: 120px;
  height: 4px;
  background: var(--border-strong);
  border-radius: 999px;
  margin: var(--sp-3) auto 0;
  overflow: hidden;
  display: none;
}
.arc-progress {
  height: 100%;
  background: var(--sc-purple);
  border-radius: 999px;
  transition: width .4s ease;
  min-width: 8px;
}

/* Remove the old standalone .arc-progress rule override */
.arc-loadmore {
  text-align: center;
  padding: var(--sp-6) 0 var(--sp-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.arc-loadmore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--sc-purple);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 14px 40px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s, opacity .15s;
  min-width: 220px;
}
.arc-loadmore-btn:not([disabled]):hover {
  border-color: var(--sc-purple);
  color: var(--sc-purple);
}
.arc-loadmore-btn:disabled {
  cursor: default;
}
.arc-loadmore-count {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  color: var(--meta);
  margin-top: var(--sp-3);
  display: block;
}

/* ============================================================
   HOMEPAGE EVENTS SECTION — 3-column card layout
   Matches design: orange date badge | title + excerpt + location
   ============================================================ */

/* Section gets the same sand/warm tint as the design bg */
/* Events section — warm cream background matching design */
.ed-events-section {
  background: #F5EDE0;
}

/* 3-col grid — columns separated by a thin line */
.ev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: var(--sp-6);
  border-top: 1px solid rgba(82,46,145,.15);
  padding-top: var(--sp-5);
}

/* Individual event card:
   - date badge LEFT, text RIGHT (flex row)
   - right border as column separator, removed on last */
.ev-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6) var(--sp-5) 0;
  border-right: 1px solid rgba(82,46,145,.15);
}
.ev-card:first-child { padding-left: 0; }
.ev-card:not(:first-child) { padding-left: var(--sp-5); }
.ev-card:last-child { border-right: none; }

/* Orange square date badge — fixed size */
.ev-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 68px;
  min-width: 68px;
  height: 68px;
  background: var(--sc-orange);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.ev-day {
  font-size: 28px;
  font-weight: var(--fw-extra);
  line-height: 1;
  display: block;
}
.ev-mon {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 3px;
  display: block;
}

/* Event text: title, excerpt, location stacked */
.ev-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}
.ev-body h3 {
  font-size: 17px;
  font-weight: var(--fw-bold);
  line-height: 1.28;
  color: var(--ink);
  margin: 0;
}
.ev-body h3 a { color: inherit; text-decoration: none; }
.ev-body h3 a:hover { color: var(--sc-purple); }
.ev-body p {
  font-size: var(--fs-sm);
  color: var(--body);
  line-height: 1.55;
  margin: 0;
}
.ev-loc {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--meta);
  margin-top: var(--sp-1);
}
.ev-loc svg { flex-shrink: 0; margin-top: 1px; color: var(--sc-orange); }

@media (max-width: 860px) {
  .ev-grid { grid-template-columns: 1fr; gap: 0; }
  .ev-card { border-right: none; border-bottom: 1px solid rgba(82,46,145,.15); padding: var(--sp-4) 0; }
  .ev-card:last-child { border-bottom: none; }
  .ev-card:not(:first-child) { padding-left: 0; }
}
@media (max-width: 540px) {
  .ev-date { width: 56px; min-width: 56px; height: 56px; }
  .ev-day  { font-size: 22px; }
}

/* ============================================================
   FOOTER — copyright + nav on same row (fix 2)
   ============================================================ */
.sc-foot-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
/* Ensure nav items sit inline after copy */
.sc-foot-bottom .fnav {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sc-foot-bottom .fnav li a,
.sc-foot-bottom nav.fnav a {
  font-family: var(--font-display);
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  white-space: nowrap;
}
.sc-foot-bottom .fnav li a:hover,
.sc-foot-bottom nav.fnav a:hover { color: var(--sc-orange); }

/* ============================================================
   ARTICLE PAGE — single.php
   Exact port of 2-article.html design spec (.art- prefix)
   ============================================================ */

/* Scroll-fade base — elements start hidden, JS adds .sc-inview */
@media (prefers-reduced-motion: no-preference) {
  .sc-fade { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
  .sc-fade.sc-inview { opacity: 1; transform: none; }
  .sc-fade:nth-child(1) { transition-delay: .00s; }
  .sc-fade:nth-child(2) { transition-delay: .09s; }
  .sc-fade:nth-child(3) { transition-delay: .18s; }
  .sc-fade:nth-child(4) { transition-delay: .27s; }
  .sc-fade:nth-child(5) { transition-delay: .36s; }
  /* Parent-triggered group */
  .sc-fade-group > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .sc-fade-group.sc-inview > * { opacity: 1; transform: none; }
  .sc-fade-group.sc-inview > *:nth-child(1) { transition-delay: .00s; }
  .sc-fade-group.sc-inview > *:nth-child(2) { transition-delay: .08s; }
  .sc-fade-group.sc-inview > *:nth-child(3) { transition-delay: .16s; }
  .sc-fade-group.sc-inview > *:nth-child(4) { transition-delay: .24s; }
  .sc-fade-group.sc-inview > *:nth-child(5) { transition-delay: .32s; }
}

.art-root  { background: var(--bg); }
.art-main  { padding: 30px 0 8px; }

/* Breadcrumb */
.art-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-family:var(--font-display); font-weight:500; font-size:13px; color:var(--meta); margin-bottom:26px; }
.art-crumb a { color:var(--meta); transition:color .15s; }
.art-crumb a:hover { color:var(--sc-purple); }
.art-crumb .sep { color:var(--border-strong); }
.art-crumb .here { color:var(--ink-soft); font-weight:600; }

/* Article head */
.art-head { max-width:820px; margin-bottom:30px; }
.art-kicker { display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; }
.art-kicker img { width:30px; height:30px; display:block; }
.art-kicker span { font-family:var(--font-display); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--sc-purple); }
.art-title { font-family:var(--font-display); font-size:clamp(28px,4vw,46px); font-weight:700; letter-spacing:-.02em; line-height:1.08; color:var(--ink); margin:0 0 20px; text-wrap:balance; }
.art-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-family:var(--font-body); font-size:15px; color:var(--meta); }
.art-meta .who { color:var(--ink-soft); font-weight:600; }
.art-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--border-strong); display:inline-block; }
.art-meta .clock-icon { width:15px; height:15px; color:var(--sc-orange); vertical-align:-2px; margin-right:4px; }
.art-standfirst { font-family:var(--font-body); font-size:21px; font-weight:400; line-height:1.5; color:var(--ink-soft); margin:20px 0 0; max-width:760px; text-wrap:pretty; }

/* Hero — two-column (default) */
.art-hero { margin-bottom:8px; display:grid; grid-template-columns:1fr 1.02fr; gap:48px; align-items:center; }
.art-hero .art-head { max-width:none; margin-bottom:0; }
.art-figure { margin:0; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-md); }
.art-figure img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:2px; }
.art-figcap { font-family:var(--font-body); font-size:13px; color:var(--meta); margin-top:12px; }

/* Body + sidebar grid */
.art-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start; padding-top:34px; }

/* Article body */
.art-body { font-family:var(--font-body); font-size:18px; line-height:1.75; color:var(--body); }
.art-body > *:first-child { margin-top:0; }
.art-body p { margin:0 0 22px; text-wrap:pretty; }
.art-body p:last-child { margin-bottom:0; }
.art-body .lede { font-size:21px; line-height:1.55; color:var(--ink-soft); font-weight:400; margin-bottom:26px; }
.art-body h2 { font-family:var(--font-display); font-size:27px; font-weight:600; letter-spacing:-.01em; line-height:1.2; color:var(--ink); margin:38px 0 14px; }
.art-body h3 { font-family:var(--font-display); font-size:21px; font-weight:600; line-height:1.25; color:var(--ink); margin:30px 0 12px; }
.art-body strong { color:var(--ink-soft); font-weight:600; }
.art-body a { color:var(--sc-purple); font-weight:600; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; transition:color .15s; }
.art-body a:hover { color:var(--sc-orange); }
.art-body ul { margin:0 0 22px; padding-left:22px; }
.art-body li { margin:0 0 9px; }
.art-body li::marker { color:var(--sc-orange); }
.art-body blockquote { margin:28px 0; padding:6px 0 6px 24px; border-left:3px solid var(--sc-orange); font-family:var(--font-display); font-size:23px; font-weight:500; line-height:1.35; color:var(--ink); }

/* Article footer */
.art-foot { margin-top:38px; padding-top:24px;margin-bottom:40px; border-top:1px solid var(--border); }
.art-back { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--sc-purple); border:1.5px solid var(--sc-purple); border-radius:var(--r-md); padding:11px 20px; transition:background .15s, color .15s; text-decoration:none; }
.art-back:hover { background:var(--sc-purple); color:#fff; }

/* Sticky Sidebar */
.art-aside { position:sticky; top:84px; display:flex; flex-direction:column; gap:30px; }

/* Share widget */
.art-share-label, .art-more-label { font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--meta); margin:0 0 14px; display:block; }
.art-share-btns { display:flex; gap:10px; flex-wrap:wrap; }
.art-sharebtn { width:42px; height:42px; border-radius:var(--r-md); border:1px solid var(--border-strong); background:#fff; display:inline-flex; align-items:center; justify-content:center; color:var(--sc-purple); cursor:pointer; transition:all .15s; text-decoration:none; }
.art-sharebtn:hover { background:var(--sc-purple); border-color:var(--sc-purple); color:#fff; transform:translateY(-2px); }
.art-sharebtn svg { width:18px; height:18px; }

/* More from category */
.art-more { border-top:1px solid var(--border); padding-top:26px; }
.art-more-list { display:flex; flex-direction:column; }
.art-more-item { padding:14px 0; border-bottom:1px solid var(--border); }
.art-more-item:first-child { padding-top:0; }
.art-more-item:last-child { border-bottom:0; }
.art-more-item h4 { font-family:var(--font-display); font-size:15.5px; font-weight:600; line-height:1.3; color:var(--ink); margin:0 0 5px; transition:color .15s; }
.art-more-item a { text-decoration:none; color:inherit; display:block; }
.art-more-item:hover h4 { color:var(--sc-purple); }
.art-more-item .when { font-family:var(--font-body); font-size:12.5px; color:var(--meta); }
.art-more-cta { display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--sc-purple); text-decoration:none; transition:color .15s, gap .15s; }
.art-more-cta:hover { color:var(--sc-orange); gap:11px; }

/* Related News section */
.art-related { padding:52px 0 64px; border-top:1px solid var(--border); margin-top:54px; }
.art-related-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.art-related-head h2 { font-family:var(--font-display); font-size:30px; font-weight:700; letter-spacing:-.01em; color:var(--sc-purple); margin:0; }
.art-related-cta { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--sc-purple); text-decoration:none; transition:color .15s, gap .15s; }
.art-related-cta:hover { color:var(--sc-orange); gap:12px; }
.art-relgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

/* Responsive — article */
@media (max-width:1024px) {
  .art-grid { grid-template-columns:minmax(0,1fr) 260px; gap:40px; }
}
@media (max-width:860px) {
  .art-hero { grid-template-columns:1fr; gap:22px; }
  .art-grid { grid-template-columns:1fr; }
  .art-aside { position:static; }
  .art-relgrid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .art-relgrid { grid-template-columns:1fr; }
  .art-body { font-size:17px; }
  .art-body h2 { font-size:23px; }
}

/* ============================================================
   EVENTS ARCHIVE PAGE — tribe_events.php / archive-tribe_events.php
   Exact port of 4-events.html design spec (.ev- + .cat- prefix)
   ============================================================ */

/* Masthead — reuses cat- prefix matching design system */
.ev-page { background: var(--bg); overflow-x: hidden; }
.ev-page .cat-masthead { margin-bottom:40px; }
.ev-page .cat-head { display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.ev-page .cat-head-icon { width:56px; height:56px; flex:none; display:block; }
.ev-page .cat-title { font-family:var(--font-display); font-size:clamp(2rem,5vw,52px); font-weight:700; letter-spacing:-.02em; line-height:1; color:var(--sc-purple); margin:0; }
.ev-page .cat-intro { font-family:var(--font-body); font-size:18px; line-height:1.5; color:var(--ink-soft); margin:0; max-width:760px; text-wrap:pretty; }

/* Category browse row */
.ev-page .cat-catrow { display:flex; align-items:center; gap:14px; margin-top:22px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.ev-page .cat-catrow::-webkit-scrollbar { display:none; }
.ev-page .cat-catrow-label { flex:none; font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--meta); }
.ev-page .cat-catrow-list { display:flex; align-items:center; gap:9px; list-style:none; margin:0; padding:0; flex-wrap:nowrap; }
.ev-page .cat-catrow-list li { flex:none; }
.ev-page .cat-catrow-list a { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink-soft); white-space:nowrap; transition:color .15s, border-color .15s, background .15s; text-decoration:none; }
.ev-page .cat-catrow-list a:hover { color:var(--sc-purple); border-color:var(--sc-purple); }
.ev-page .cat-catrow-list a .n { font-size:11.5px; font-weight:500; color:var(--meta); background:var(--surface-alt); border-radius:var(--r-pill); padding:2px 8px; min-width:24px; text-align:center; }
.ev-page .cat-catrow-list li.on a { color:#fff; background:var(--sc-purple); border-color:var(--sc-purple); }
.ev-page .cat-catrow-list li.on a .n { background:rgba(255,255,255,.22); color:#fff; }

/* Toolbar */
.ev-toolbar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:22px; }
.ev-search-bar { flex:1 1 280px; min-width:240px; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:11px 18px; transition:border-color .15s, box-shadow .15s; }
.ev-search-bar:focus-within { border-color:var(--sc-purple); box-shadow:0 0 0 3px rgba(82,46,145,.12); }
.ev-search-bar svg { width:18px; height:18px; color:var(--meta); flex:none; }
.ev-search-bar input { flex:1; border:0; background:transparent; outline:none; font-family:var(--font-body); font-size:15px; color:var(--ink); }
.ev-search-bar input::placeholder { color:var(--meta); }

/* Past / Upcoming segmented toggle */
.ev-seg { display:inline-flex; background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--r-pill); padding:3px; }
.ev-seg a { font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink-soft); padding:8px 18px; border-radius:var(--r-pill); text-decoration:none; transition:color .15s, background .15s; }
.ev-seg a.on, .ev-seg a:hover { color:#fff; background:var(--sc-purple); }

/* Subscribe button */
.ev-sub-btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:13.5px; color:#fff; background:var(--sc-purple); border:0; border-radius:var(--r-pill); padding:10px 18px; cursor:pointer; text-decoration:none; transition:background .15s; }
.ev-sub-btn:hover { background:var(--sc-purple-700); color:#fff; }
.ev-sub-btn svg { width:16px; height:16px; }

/* Purple date tile — signature element */
.ev-tile { flex:none; width:74px; text-align:center; background:var(--sc-purple); color:#fff; border-radius:var(--r-md); padding:9px 0 11px; box-shadow:0 6px 16px rgba(42,21,80,.18); }
.ev-tile .wd { font-family:var(--font-display); font-weight:600; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--tint-purple); opacity:.92; display:block; }
.ev-tile .d  { font-family:var(--font-display); font-weight:800; font-size:30px; line-height:1; margin-top:3px; display:block; }
.ev-tile .m  { font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:.09em; text-transform:uppercase; margin-top:4px; display:block; }

/* Event type pill */
.ev-type { display:inline-block; white-space:nowrap; font-family:var(--font-display); font-weight:700; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--sc-purple); background:var(--tint-purple-soft); border-radius:var(--r-sm); padding:4px 9px; line-height:1; }

/* Month group heading */
.ev-month { margin-top:6px; }
.ev-month + .ev-month { margin-top:18px; }
.ev-month-head { display:flex; align-items:baseline; gap:14px; padding:18px 0 6px; position:sticky; top:70px; background:linear-gradient(var(--bg) 70%,transparent); z-index:5; }
.ev-month-label { font-family:var(--font-display); font-size:21px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin:0; }
.ev-month-count { font-family:var(--font-display); font-weight:600; font-size:12px; color:var(--meta); }
.ev-month-rule { flex:1; height:1px; background:var(--border-strong); opacity:.7; }

/* Event row — list view */
.ev-list { display:flex; flex-direction:column; }
.ev-row { display:grid; grid-template-columns:74px 240px minmax(0,1fr); gap:24px; align-items:start; padding:24px 0; border-bottom:1px dotted var(--border-strong); text-decoration:none; }
.ev-row:last-child { border-bottom:none; }
.ev-row-fig { display:block; border-radius:var(--r-lg); overflow:hidden; background:var(--surface-alt); border:1px solid var(--border); aspect-ratio:16/10; }
.ev-row-fig img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.ev-row:hover .ev-row-fig img { transform:scale(1.04); }
.ev-row-body { min-width:0; }
.ev-row-title { font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:-.012em; line-height:1.22; margin:0 0 10px; text-wrap:balance; color:var(--ink); display:block; text-decoration:none; transition:color .15s; }
.ev-row-title:hover { color:var(--sc-purple); }
.ev-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:11px; }
.ev-meta-item { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:13.5px; color:var(--ink-soft); }
.ev-meta-item svg { width:15px; height:15px; flex:none; color:var(--sc-orange); }
.ev-row-desc { font-family:var(--font-body); font-size:15px; line-height:1.55; color:var(--body); margin:0 0 14px; text-wrap:pretty; }
.ev-details { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--sc-purple); text-decoration:none; transition:color .15s; }
.ev-details:hover { color:var(--sc-orange); }
.ev-details svg { width:15px; height:15px; transition:transform .15s; }
.ev-details:hover svg { transform:translateX(3px); }

/* Nav: Previous / Next events */
.ev-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-6) 0 var(--sp-7); border-top:1px solid var(--border); margin-top:var(--sp-5); }
.ev-nav a { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--sc-purple); text-decoration:none; transition:color .15s; }
.ev-nav a:hover { color:var(--sc-orange); }
.ev-nav svg { width:16px; height:16px; }

/* Responsive — events */
@media (max-width:860px) {
  .ev-row { grid-template-columns:64px minmax(0,1fr); }
  .ev-row-fig { display:none; }
}
@media (max-width:560px) {
  .ev-row { grid-template-columns:56px minmax(0,1fr); gap:14px; }
  .ev-tile { width:56px; }
  .ev-tile .d { font-size:22px; }
  .ev-toolbar { flex-direction:column; align-items:stretch; }
}

/* ============================================================
   HOMEPAGE scroll-fade: editorial sections
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .ed-section { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
  .ed-section.sc-inview { opacity: 1; transform: none; }
  /* stagger children of fade groups */
  .ed-lead.sc-fade-group > *, .ev-grid.sc-fade-group > *, .ed-grid.sc-fade-group > * {
    opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease;
  }
  .ed-lead.sc-fade-group.sc-inview > *, .ev-grid.sc-fade-group.sc-inview > *, .ed-grid.sc-fade-group.sc-inview > * {
    opacity: 1; transform: none;
  }
  .ed-lead.sc-fade-group.sc-inview > *:nth-child(1) { transition-delay:.00s; }
  .ed-lead.sc-fade-group.sc-inview > *:nth-child(2) { transition-delay:.12s; }
  .ev-grid.sc-fade-group.sc-inview > *:nth-child(1),
  .ed-grid.sc-fade-group.sc-inview > *:nth-child(1) { transition-delay:.00s; }
  .ev-grid.sc-fade-group.sc-inview > *:nth-child(2),
  .ed-grid.sc-fade-group.sc-inview > *:nth-child(2) { transition-delay:.09s; }
  .ev-grid.sc-fade-group.sc-inview > *:nth-child(3),
  .ed-grid.sc-fade-group.sc-inview > *:nth-child(3) { transition-delay:.18s; }
  .ev-grid.sc-fade-group.sc-inview > *:nth-child(4),
  .ed-grid.sc-fade-group.sc-inview > *:nth-child(4) { transition-delay:.27s; }
}

/* ============================================================
   SEARCH MODAL — redesigned to match screenshot
   White pill card, centred top-of-page, dimmed backdrop
   ============================================================ */

/* Remove old .sc-search rules */
.sc-search {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,20,38,.45);
  backdrop-filter: blur(2px);
  z-index: 500;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.sc-search.open { display: flex; }

.sc-search-modal {
  width: min(600px, 90vw);
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(26,20,38,.18);
  overflow: hidden;
}

.sc-search-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 16px;
}

.sc-search-icon {
  flex-shrink: 0;
  color: var(--meta);
}

.sc-search-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.sc-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  padding: 0;
  min-width: 0;
}
.sc-search-input::placeholder { color: var(--meta); }

.sc-search-submit {
  flex-shrink: 0;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  padding: 0 var(--sp-4) 0 var(--sp-3);
  white-space: nowrap;
  transition: color .15s;
}
.sc-search-submit:hover { color: var(--sc-purple); }

/* Close X button — grey circle */
.sc-search-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-alt);
  color: var(--meta);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sc-search-close:hover { background: var(--border-strong); color: var(--ink); }

/* ============================================================
   FOOTER — remove extra top spacing
   ============================================================ */
.sc-footer {
  margin-top: 0;        /* kill any inherited margin */
}
.sc-foot-top {
  padding-block: var(--sp-5);  /* was sp-7 — tighter */
}

/* ============================================================
   FIX: single.php — skip All News in article category display
   (handled in PHP but also guard via CSS if needed)
   ============================================================ */

/* ============================================================
   EVENT SINGLE / DETAIL PAGE
   ============================================================ */

.ev-single-page .art-hero { margin-bottom:var(--sp-5); }

/* Orange date badge in hero meta */
.ev-single-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sc-orange);
  color: #fff;
  font-family: var(--font-display);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}
.ev-single-date-badge strong { font-size: 17px; font-weight: var(--fw-extra); }

/* Add to calendar buttons (hero area) */
.ev-single-cals {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}
.ev-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 13.5px;
  background: var(--sc-purple);
  color: #fff;
  border: 1.5px solid var(--sc-purple);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.ev-cal-btn:hover { background: var(--sc-orange); border-color: var(--sc-orange); color: #fff; }
.ev-cal-btn--outline {
  background: transparent;
  color: var(--sc-purple);
}
.ev-cal-btn--outline:hover { background: var(--sc-purple); color: #fff; }

/* Sidebar detail card */
.ev-single-sidebar { gap: 20px; }

.ev-single-detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
.ev-single-detail-head {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--meta);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.ev-single-detail-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.ev-single-detail-row:last-child { border-bottom: none; }
.ev-single-detail-row svg { flex-shrink:0; color:var(--sc-orange); margin-top:3px; }
.ev-single-detail-row strong { display:block; font-family:var(--font-display); font-size:12px; font-weight:var(--fw-semibold); color:var(--meta); text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; }
.ev-single-detail-row p { margin:0; font-size:14px; color:var(--ink-soft); line-height:1.5; }
.ev-single-detail-row a { color:var(--sc-purple); text-decoration:none; font-size:13px; }
.ev-single-detail-row a:hover { color:var(--sc-orange); }

/* Prev/next nav — tighter on event single */
.ev-single-nav {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
}

/* ============================================================
   EVENT LEAD — Featured first/next upcoming event hero
   Port of .ev-lead from 4-events.html design spec
   ============================================================ */
.ev-lead {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 42px;
  align-items: start;
  margin: 6px 0 36px;
  padding: 40px 0;
}
/* Full-bleed warm tint background — bleeds to viewport edges */
.ev-lead::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0; bottom: 0;
  /* Bleed to container edges only — avoids triggering horizontal scroll */
  left: -24px; right: -24px;
  background: var(--tint-orange-soft);
}
.ev-lead > * { position: relative; z-index: 1; }

/* Image panel */
.ev-lead-fig {
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16/10;
  order: -1;
  text-decoration: none;
}
.ev-lead-fig img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Date tile overlaid top-left of image */
.ev-lead-tile {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
}

/* Text panel */
.ev-lead-body { min-width: 0; }
.ev-lead-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.ev-lead-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--fw-bold);
  letter-spacing: -.018em;
  line-height: 1.1;
  margin: 0 0 14px;
  text-wrap: balance;
}
.ev-lead-title a { color: var(--ink); text-decoration: none; transition: color .15s; }
.ev-lead-title a:hover { color: var(--sc-purple); }
.ev-lead-meta {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 16px;
}
.ev-lead-desc {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.ev-lead-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ev-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  color: #fff;
  background: var(--sc-purple);
  border-radius: var(--r-md);
  padding: 12px 22px;
  text-decoration: none;
  transition: background .15s;
}
.ev-btn-primary:hover { background: var(--sc-purple-700); color: #fff; }
.ev-btn-primary svg { width: 16px; height: 16px; transition: transform .15s; }
.ev-btn-primary:hover svg { transform: translateX(3px); }

.ev-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  color: var(--sc-purple);
  background: transparent;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 12px 20px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.ev-btn-ghost:hover { border-color: var(--sc-purple); color: var(--sc-purple); }

@media (max-width: 860px) {
  .ev-lead { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; }
  .ed-grid-item h4 {
    font-size: 16px;
  }
  .ed-grid-item p {
    font-size: 14px;
  }  
}

/* ============================================================
   CATEGORY PAGE — remove post count from tab pills (CSS hide)
   The PHP already skips count; this guards if markup still has it
   ============================================================ */
/* Count badge already removed from PHP in category.php — no extra CSS needed */

/* Calendar icon fix — ev-meta-item SVG/icon colour */
.ev-meta-item svg,
.ev-meta-item i {
  color: var(--sc-orange);
  flex-shrink: 0;
}

/* ============================================================
   GENERIC / STATIC PAGE — Cookie Policy, Privacy, Terms etc.
   Port of .gen- classes from 6-generic.html design spec
   ============================================================ */
.gen-root { background: var(--bg); }
.gen-main { padding: 30px 0 8px; }

/* Breadcrumb */
.gen-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-family:var(--font-display); font-weight:500; font-size:13px; color:var(--meta); margin-bottom:26px; }
.gen-crumb a { color:var(--meta); text-decoration:none; transition:color .15s; }
.gen-crumb a:hover { color:var(--sc-purple); }
.gen-crumb .sep { color:var(--border-strong); }
.gen-crumb .here { color:var(--ink-soft); font-weight:600; }

/* Masthead */
.gen-head { max-width:820px; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid var(--border); }
.gen-kicker { display:inline-flex; align-items:center; white-space:nowrap; font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sc-purple); background:var(--tint-purple-soft); border-radius:var(--r-pill); padding:6px 14px; line-height:1; margin-bottom:18px; }
.gen-title { font-family:var(--font-display); font-size:52px; font-weight:700; letter-spacing:-.02em; line-height:1.04; color:var(--sc-purple); margin:0 0 18px; text-wrap:balance; }
.gen-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-family:var(--font-body); font-size:14px; color:var(--meta); }
.gen-meta .who { color:var(--ink-soft); font-weight:600; }
.gen-meta .dot { width:3px; height:3px; border-radius:50%; background:var(--border-strong); display:inline-block; }
.gen-meta svg { width:15px; height:15px; color:var(--sc-orange); vertical-align:-3px; margin-right:5px; }

/* Grid: body + sticky TOC sidebar */
.gen-grid { display:grid; grid-template-columns:minmax(0,1fr) 268px; gap:60px; align-items:start; padding-top:6px; }

/* Lede */
.gen-lede { font-family:var(--font-body); font-size:21px; line-height:1.55; color:var(--ink-soft); margin:0 0 12px; text-wrap:pretty; }
.gen-lede-note { font-family:var(--font-body); font-size:16px; line-height:1.6; color:var(--body); margin:0 0 34px; }
.gen-lede-note a { color:var(--sc-purple); font-weight:600; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; }
.gen-lede-note a:hover { color:var(--sc-orange); }

/* Consent callout */
.gen-consent { display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 26px; margin:0 0 40px; }
.gen-consent-main { flex:1 1 320px; min-width:0; }
.gen-consent-state { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--ink); margin-bottom:8px; }
.gen-consent-dot { width:9px; height:9px; border-radius:50%; background:var(--sc-orange); box-shadow:0 0 0 4px var(--sc-orange-100); display:inline-block; }
.gen-consent-body { font-family:var(--font-body); font-size:14.5px; line-height:1.55; color:var(--body); margin:0; }
.gen-consent-btn { flex:none; display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:14.5px; color:#fff; background:var(--sc-purple); border:0; border-radius:var(--r-md); padding:12px 22px; cursor:pointer; transition:background .15s; }
.gen-consent-btn:hover { background:var(--sc-purple-700); }
.gen-consent-btn svg { width:16px; height:16px; }

/* Body prose */
.gen-body { font-family:var(--font-body); font-size:18px; line-height:1.75; color:var(--body); }
.gen-section { scroll-margin-top:84px; }
.gen-section + .gen-section { margin-top:14px; }
.gen-section h2 { font-family:var(--font-display); font-size:28px; font-weight:600; letter-spacing:-.01em; line-height:1.2; color:var(--ink); margin:34px 0 14px; }
.gen-section:first-child h2 { margin-top:0; }
.gen-body p { margin:0 0 20px; text-wrap:pretty; }
.gen-body p a { color:var(--sc-purple); font-weight:600; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; }
.gen-body p a:hover { color:var(--sc-orange); }

/* Note */
.gen-note { display:inline-flex; align-items:center; font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:14px; color:var(--sc-purple); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:8px 14px; margin:0 0 20px; }

/* List */
.gen-list { margin:0 0 22px; padding-left:22px; }
.gen-list li { margin:0 0 9px; line-height:1.6; }
.gen-list li::marker { color:var(--sc-orange); }

/* Definition rows */
.gen-defs { display:flex; flex-direction:column; gap:0; margin:0 0 24px; border-top:1px solid var(--border); }
.gen-def { display:grid; grid-template-columns:170px minmax(0,1fr); gap:24px; padding:18px 0; border-bottom:1px solid var(--border); }
.gen-def-term { font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--sc-purple); }
.gen-def-text { font-size:16px; line-height:1.6; color:var(--body); margin:0; }

/* Table */
.gen-tablewrap { margin:8px 0 26px; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; overflow-x:auto; box-shadow:var(--shadow-sm); }
.gen-table { width:100%; border-collapse:collapse; font-family:var(--font-body); min-width:560px; }
.gen-table th { text-align:left; font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--sc-purple); padding:13px 18px; white-space:nowrap; }
.gen-table td { font-size:14.5px; line-height:1.55; color:var(--body); padding:14px 18px; border-top:1px solid var(--border); vertical-align:top; }
.gen-table tbody tr:nth-child(even) { background:var(--surface-alt); }
.gen-table td:first-child { font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-size:13px; color:var(--ink-soft); white-space:nowrap; }

/* Footer */
.gen-foot { margin-top:40px; padding-top:24px; border-top:1px solid var(--border); }
.gen-back { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--sc-purple); border:1.5px solid var(--sc-purple); border-radius:var(--r-md); padding:11px 20px; text-decoration:none; transition:background .15s,color .15s; }
.gen-back:hover { background:var(--sc-purple); color:#fff; }
.gen-back svg { width:16px; height:16px; }

/* Sticky TOC sidebar */
.gen-aside { position:sticky; top:84px; display:flex; flex-direction:column; gap:26px; }
.gen-toc-label { font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--meta); margin:0 0 14px; }
.gen-toc { list-style:none; margin:0; padding:0; border-left:2px solid var(--border); }
.gen-toc li { margin:0; }
.gen-toc a { display:block; font-family:var(--font-display); font-weight:500; font-size:14px; line-height:1.35; color:var(--meta); padding:9px 0 9px 16px; margin-left:-2px; border-left:2px solid transparent; text-decoration:none; transition:color .15s,border-color .15s; }
.gen-toc a:hover { color:var(--sc-purple); }
.gen-toc a.on { color:var(--sc-purple); border-left-color:var(--sc-purple); font-weight:600; }
.gen-aside-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:20px; }
.gen-aside-card h3 { font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--ink); margin:0 0 8px; }
.gen-aside-card p { font-family:var(--font-body); font-size:13.5px; line-height:1.55; color:var(--body); margin:0 0 14px; }

/* Responsive */
@media (max-width:1024px) { .gen-grid{grid-template-columns:minmax(0,1fr) 228px;gap:42px} .gen-title{font-size:44px} }
@media (max-width:860px)  { .gen-grid{grid-template-columns:minmax(0,1fr)} .gen-aside{display:none} .gen-title{font-size:38px} .gen-def{grid-template-columns:1fr;gap:6px} }
@media (max-width:560px)  { .gen-main{padding:22px 0 4px} .gen-title{font-size:30px} .gen-lede{font-size:18px} .gen-body{font-size:17px} .gen-section h2{font-size:23px} .gen-consent{padding:18px 20px} }

/* gen-body receives WordPress the_content output — scope all block styles */
.gen-body h2 { font-family:var(--font-display); font-size:28px; font-weight:600; color:var(--ink); margin:34px 0 14px; }
.gen-body h3 { font-family:var(--font-display); font-size:21px; font-weight:600; color:var(--ink); margin:24px 0 10px; }
.gen-body h4 { font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--ink); margin:18px 0 8px; }
.gen-body ul, .gen-body ol { margin:0 0 20px; padding-left:22px; }
.gen-body li { margin:0 0 8px; line-height:1.6; }
.gen-body ul li::marker { color:var(--sc-orange); }
.gen-body strong { color:var(--ink-soft); font-weight:600; }
.gen-body a { color:var(--sc-purple); font-weight:600; text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:3px; }
.gen-body a:hover { color:var(--sc-orange); }
.gen-body table { width:100%; border-collapse:collapse; margin:0 0 24px; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.gen-body th { background:var(--sc-purple); color:#fff; font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:12px 16px; text-align:left; }
.gen-body td { padding:12px 16px; border-top:1px solid var(--border); font-size:14.5px; color:var(--body); vertical-align:top; }
.gen-body tbody tr:nth-child(even) { background:var(--surface-alt); }

/* ============================================================
   EVENT LIST — orange date tile variant + Add to calendar
   ============================================================ */

/* Orange tile for list rows (design spec) */
.ev-tile--orange {
  background: var(--sc-orange) !important;
}

/* Row actions row: "Event details →" + "Add to calendar" side by side */
.ev-row-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

/* Add to calendar link — matches design: calendar icon + text, muted */
.ev-add-cal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  color: var(--meta);
  text-decoration: none;
  transition: color .15s;
}
.ev-add-cal:hover { color: var(--sc-purple); }
.ev-add-cal svg { color: var(--meta); flex-shrink: 0; }
.ev-add-cal:hover svg { color: var(--sc-purple); }