/* ================================================================
   The Winning Strategist(TM) - Editorial Theme
   Palette: near-black ink, true white, warm paper gray, brass gold.
   Flat, editorial, disciplined - no gradients, no glassmorphism.
   Single stylesheet for the whole site (public + member + admin) so
   every page ships with one <link> and nothing else to load.
================================================================ */

:root{
  --black:        #0B0B0D;
  --white:        #FFFFFF;
  --paper:        #F7F5F1;
  --paper-deep:   #F0EDE6;
  --line:         #E4E0D6;
  --line-strong:  #D8D2C4;
  --ink:          #17171A;
  --ink-soft:     #58554C;
  --ink-faint:    #8B877C;

  --gold:         #9C7A2E;
  --gold-text:    #7A5E22;
  --gold-on-black:#D9B872;
  --gold-line:    #C7A34E;
  --gold-wash:    #FBF7EC;

  --good:         #4B6B4B;
  --good-wash:    #F1F5F0;
  --bad:          #7A3B3B;
  --bad-wash:     #F7EEEE;

  --font-display: 'Manrope', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;

  --max: 1240px;
  --max-wide: 1320px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap{ max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.wrap-wide{ max-width: var(--max-wide); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

.skip-link{ position:absolute; left:-999px; top:auto; background: var(--black); color:var(--white); padding: 12px 20px; z-index: 200; font-size: .9rem; }
.skip-link:focus{ left: 16px; top:16px; }

/* ---------- Type scale ---------- */
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--black); letter-spacing: -0.01em; }
.eyebrow{
  font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-text); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before{ content:""; width: 18px; height: 1px; background: var(--gold-line); display: inline-block; }
.section-head{ max-width: 640px; margin-bottom: 44px; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; margin-top: 14px; line-height: 1.15; }
.section-head p{ margin-top: 14px; color: var(--ink-soft); font-size: 1.02rem; max-width: 56ch; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
section{ padding: 88px 0; }
.section-tight{ padding: 56px 0; }
.section-line{ border-top: 1px solid var(--line); }

.reveal{ opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity: 1; transform: translateY(0); }

/* ================================================================
   TAGS / CATEGORY PALETTE
================================================================ */
.tag{ display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-text); }
.tag::before{ content:"⟨"; color: var(--gold-line); }
.tag::after{ content:"⟩"; color: var(--gold-line); }
.tag-leadership{ color:#7A5E22; } .tag-leadership::before,.tag-leadership::after{ color:#C7A34E; }
.tag-strategy{ color:#2E4A6B; } .tag-strategy::before,.tag-strategy::after{ color:#6A88AC; }
.tag-execution{ color:#7A3B3B; } .tag-execution::before,.tag-execution::after{ color:#B06B6B; }
.tag-business-leadership{ color:#3E6B75; } .tag-business-leadership::before,.tag-business-leadership::after{ color:#6FA0AA; }
.tag-ministry-leadership{ color:#5B3A6E; } .tag-ministry-leadership::before,.tag-ministry-leadership::after{ color:#9271A8; }
.tag-decision-making{ color:#3D5C43; } .tag-decision-making::before,.tag-decision-making::after{ color:#74A17D; }
.tag-ai-and-leadership{ color:#3D3A6E; } .tag-ai-and-leadership::before,.tag-ai-and-leadership::after{ color:#7A76B0; }
.tag-organizational-growth{ color:#6B6B3A; } .tag-organizational-growth::before,.tag-organizational-growth::after{ color:#A3A36E; }
.tag-communication{ color:#9C5A2E; } .tag-communication::before,.tag-communication::after{ color:#C98F63; }
.tag-personal-mastery{ color:#6E3A4A; } .tag-personal-mastery::before,.tag-personal-mastery::after{ color:#A66E7D; }
.tag-team-leadership{ color:#4A5C7A; } .tag-team-leadership::before,.tag-team-leadership::after{ color:#829BC0; }
.tag-culture{ color:#2D6A63; } .tag-culture::before,.tag-culture::after{ color:#63A297; }

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

/* ================================================================
   BUTTONS
================================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:.86rem;
  letter-spacing:.01em; padding: 13px 24px; border-radius: 2px; border: 1px solid transparent; white-space:nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn-gold{ background: var(--black); color:var(--white); }
.btn-gold:hover{ background: var(--gold-text); transform: translateY(-1px); color:var(--white); }
.btn-outline{ background: transparent; color: var(--black); border-color: var(--black); }
.btn-outline:hover{ background: var(--black); color: var(--white); }
.btn-outline-light{ background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn-outline-light:hover{ background: var(--white); color: var(--black); }
.btn-danger{ background:#7A3B3B; color:#fff; }
.btn-danger:hover{ background:#5E2C2C; }

/* Upload spinner (site.js adds this class to a form's submit button on
   any form that can upload a file, once submitted). The spinner ring is
   a ::before pseudo-element, which - since .btn is already
   display:inline-flex with gap:8px above - lines up next to the
   "Uploading…" label automatically with no extra positioning needed.
   border-color:currentColor means it always matches whatever text
   color the specific button variant (gold, outline, danger, etc.)
   already uses, so it doesn't need its own per-variant override. */
.btn-loading{ opacity:.85; pointer-events:none; cursor:default; }
.btn-loading::before{
  content:'';
  width:14px; height:14px; flex-shrink:0;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
.btn-sm{ padding: 10px 18px; font-size:.8rem; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

/* ================================================================
   NAV
================================================================ */
header.site-nav{
  position: sticky; top:0; z-index: 100; background: var(--paper-deep);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
header.site-nav.scrolled{ background: var(--white); box-shadow: 0 6px 24px rgba(11,11,13,.05); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding-top: 16px; padding-bottom: 16px; gap: 24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-kicker{ font-size: .62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint); }
.brand-name{ font-family: var(--font-display); font-weight:800; font-size:1.02rem; color: var(--black); letter-spacing:-.01em; }
.brand-name sup{ font-size:.55em; color: var(--gold-text); }
nav.primary-links{ display:flex; align-items:center; gap:36px; }
nav.primary-links a{ font-size:.92rem; font-weight:600; color: var(--ink); position:relative; padding-bottom:4px; }
nav.primary-links a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--gold); transform: scaleX(0); transform-origin:left; transition: transform .25s var(--ease); }
nav.primary-links a:hover::after, nav.primary-links a.active::after{ transform: scaleX(1); }
.nav-right{ display:flex; align-items:center; gap:18px; }
.menu-toggle{ display:none; background:none; border:none; padding:8px; }
.menu-toggle span{ display:block; width:22px; height:2px; background: var(--black); margin:5px 0; transition: transform .25s var(--ease), opacity .25s var(--ease); }

.mobile-panel{
  position: fixed; inset:0; background: var(--white); z-index: 150; display:flex; flex-direction:column;
  padding: 24px var(--pad); transform: translateX(100%); transition: transform .3s var(--ease);
}
.mobile-panel.open{ transform: translateX(0); }
.mobile-panel-top{ display:flex; justify-content:flex-end; }
.mobile-panel nav{ display:flex; flex-direction:column; gap:28px; margin-top:48px; }
.mobile-panel nav a{ font-family: var(--font-display); font-weight:800; font-size:1.6rem; }
.mobile-panel .btn{ margin-top:40px; align-self:flex-start; }

/* Flash messages */
.flash-row{ padding-top: 18px; }
.flash{ font-family: var(--font-body); font-size:1rem; font-weight:600; line-height:1.5; padding: 16px 20px; border:1px solid var(--line); border-left-width:5px; margin-bottom:12px; box-shadow: 0 2px 10px rgba(11,11,13,.05); }
.flash-success{ background: var(--good-wash); color: var(--good); border-color:#CFE0CF; border-left-color: var(--good); }
.flash-error{ background: var(--bad-wash); color: var(--bad); border-color:#E7C9C9; border-left-color: var(--bad); }
.flash-notice{ background: var(--gold-wash); color: var(--black); border-color: var(--gold-line); border-left-color: var(--gold); font-size:1.05rem; padding:20px 24px; }
.flash-notice strong{ color: var(--gold-text); }

.free-badge{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-display); font-weight:800; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--white); background: var(--gold-text); padding:8px 16px; margin-top:18px; }
.free-badge::before{ content:"✓"; font-weight:800; }

/* ================================================================
   HERO
================================================================ */
.hero{ padding-top: 76px; padding-bottom: 76px; background: var(--white); }
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items:center; }
.hero-copy h1{ font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight:800; line-height:1.06; margin-top:18px; }
.hero-copy .sub{ font-family: var(--font-display); font-weight:700; font-size: clamp(1.05rem,1.6vw,1.3rem); color: var(--ink-soft); margin-top:22px; max-width: 42ch; line-height:1.4; }
.hero-copy .desc{ margin-top:18px; color: var(--ink-soft); max-width: 46ch; font-size:1.02rem; }
.hero-actions{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.hero-note{ margin-top:14px; font-size:.82rem; font-weight:600; color: var(--ink-soft); }
.hero-schedule-chip{ display:inline-flex; gap:16px; margin-top:28px; padding: 10px 16px; border:1px solid var(--line); background: var(--paper); font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); flex-wrap:wrap; }
.hero-schedule-chip b{ color: var(--gold-text); }
.hero-media{ position:relative; }
.hero-blob{ position:absolute; border-radius:50%; z-index:0; filter: blur(2px); animation: float 7s ease-in-out infinite alternate; }
.hero-blob.b1{ width:220px; height:220px; background:#2E4A6B; opacity:.10; top:-40px; left:-40px; }
.hero-blob.b2{ width:150px; height:150px; background:#2D6A63; opacity:.12; bottom:-30px; right:-30px; animation-delay:.6s; animation-duration:8.5s; }
.hero-blob.b3{ width:90px; height:90px; background:#9C7A2E; opacity:.16; bottom:60px; left:-24px; animation-delay:1.2s; animation-duration:6s; }
@keyframes float{ from{ transform: translate(0,0); } to{ transform: translate(10px,-14px); } }
.portrait-frame{ position:relative; z-index:1; aspect-ratio: 4/5; width:100%; background: var(--paper-deep); border: 1px dashed var(--line-strong); display:flex; align-items:center; justify-content:center; text-align:center; padding:32px; overflow:hidden; }
.portrait-frame img{ width:100%; height:100%; object-fit:cover; }
.portrait-frame span{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); }
.frame-corner{ position:absolute; width:26px; height:26px; border-color: var(--gold); }
.frame-corner.tl{ top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; }
.frame-corner.br{ bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; }

/* ================================================================
   TRUST METRICS
================================================================ */
.trust{ background: var(--black); padding: 56px 0; }
.trust-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
.trust-item{ border-left: 2px solid rgba(255,255,255,.14); padding-left:22px; }
.trust-item .num{ font-family: var(--font-display); font-weight:800; font-size: clamp(1.8rem,3vw,2.4rem); color: var(--white); }
.trust-grid .trust-item:nth-child(1){ border-left-color:#D9B872; } .trust-grid .trust-item:nth-child(1) .num{ color:#D9B872; }
.trust-grid .trust-item:nth-child(2){ border-left-color:#8FB4D9; } .trust-grid .trust-item:nth-child(2) .num{ color:#8FB4D9; }
.trust-grid .trust-item:nth-child(3){ border-left-color:#7FD1C0; } .trust-grid .trust-item:nth-child(3) .num{ color:#7FD1C0; }
.trust-grid .trust-item:nth-child(4){ border-left-color:#C29ED9; } .trust-grid .trust-item:nth-child(4) .num{ color:#C29ED9; }
.trust-item .label{ margin-top:6px; font-size:.85rem; color: rgba(255,255,255,.62); }

/* ================================================================
   CARDS - editorial (featured / edition / related)
================================================================ */
.featured-card{ display:grid; grid-template-columns: .95fr 1.05fr; border: 1px solid var(--line); background: var(--white); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.featured-card:hover{ border-color:#2E4A6B; box-shadow: 0 18px 40px rgba(46,74,107,.14); }
.featured-media{ background: var(--paper-deep); border-right: 1px solid var(--line); display:flex; align-items:center; justify-content:center; min-height: 320px; overflow:hidden; }
.featured-media img{ width:100%; height:100%; object-fit:cover; }
.featured-media span{ font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); text-align:center; padding: 0 20px; }
.featured-body{ padding: 44px; display:flex; flex-direction:column; }
.featured-body h3{ font-size: clamp(1.4rem,2.4vw,1.9rem); font-weight:800; margin-top:16px; line-height:1.2; }
.featured-body p.summary{ margin-top:16px; color: var(--ink-soft); }
.read-link{ margin-top:26px; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; color: var(--black); border-bottom: 1px solid var(--black); padding-bottom:3px; width:fit-content; }
.read-link svg{ transition: transform .2s var(--ease); }
.read-link:hover svg{ transform: translateX(4px); }

.editions-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 8px; }
.editions-grid.cols-2{ grid-template-columns: repeat(2,1fr); }
.edition-card{ border: 1px solid var(--line); background: var(--white); display:flex; flex-direction:column; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.edition-card:hover{ transform: translateY(-4px); border-color: var(--gold-line); box-shadow: 0 16px 32px rgba(11,11,13,.06); }
.edition-media{ aspect-ratio: 16/10; background: var(--paper-deep); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.edition-media img{ width:100%; height:100%; object-fit:cover; }
.edition-media span{ font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); }
.edition-body{ padding: 24px; display:flex; flex-direction:column; flex:1; }
.edition-body h4{ font-size:1.08rem; font-weight:800; margin-top:12px; line-height:1.3; }
.edition-body p{ margin-top:10px; color: var(--ink-soft); font-size:.92rem; flex:1; }

.related-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.related-card{ border:1px solid var(--line); background: var(--white); display:flex; flex-direction:column; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.related-card:hover{ transform: translateY(-4px); border-color: var(--gold-line); box-shadow: 0 16px 32px rgba(11,11,13,.06); }
.related-media{ aspect-ratio:16/10; background: var(--paper-deep); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.related-media img{ width:100%; height:100%; object-fit:cover; }
.related-media span{ font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); }
.related-body{ padding:22px; }
.related-body h4{ font-family: var(--font-display); font-size:1.02rem; font-weight:800; margin-top:10px; line-height:1.3; }

.empty-note{ padding: 50px 20px; text-align:center; color: var(--ink-faint); border:1px dashed var(--line-strong); }

/* ================================================================
   CATEGORIES GRID
================================================================ */
.cat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.cat-card{ background: var(--white); padding: 30px 26px; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; border-top: 3px solid var(--line-strong); transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.cat-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px rgba(11,11,13,.08); z-index:1; position:relative; }
.cat-card .cat-icon{ margin-bottom:18px; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background: var(--gold); transition: background .25s var(--ease), transform .3s var(--ease); }
.cat-card:hover .cat-icon{ transform: scale(1.08) rotate(-4deg); }
.cat-card h4{ font-size:1rem; font-weight:800; }
.cat-card p{ margin-top:8px; font-size:.84rem; color: var(--ink-soft); }
.cat-card[data-cat="leadership"]{ border-top-color:#9C7A2E; } .cat-card[data-cat="leadership"] .cat-icon{ background:#9C7A2E; } .cat-card[data-cat="leadership"]:hover{ background:#FBF7EC; }
.cat-card[data-cat="strategy"]{ border-top-color:#2E4A6B; } .cat-card[data-cat="strategy"] .cat-icon{ background:#2E4A6B; } .cat-card[data-cat="strategy"]:hover{ background:#EEF2F6; }
.cat-card[data-cat="execution"]{ border-top-color:#7A3B3B; } .cat-card[data-cat="execution"] .cat-icon{ background:#7A3B3B; } .cat-card[data-cat="execution"]:hover{ background:#F7EEEE; }
.cat-card[data-cat="business-leadership"]{ border-top-color:#3E6B75; } .cat-card[data-cat="business-leadership"] .cat-icon{ background:#3E6B75; } .cat-card[data-cat="business-leadership"]:hover{ background:#EDF3F4; }
.cat-card[data-cat="ministry-leadership"]{ border-top-color:#5B3A6E; } .cat-card[data-cat="ministry-leadership"] .cat-icon{ background:#5B3A6E; } .cat-card[data-cat="ministry-leadership"]:hover{ background:#F2EEF4; }
.cat-card[data-cat="decision-making"]{ border-top-color:#3D5C43; } .cat-card[data-cat="decision-making"] .cat-icon{ background:#3D5C43; } .cat-card[data-cat="decision-making"]:hover{ background:#EEF3EF; }
.cat-card[data-cat="ai-and-leadership"]{ border-top-color:#3D3A6E; } .cat-card[data-cat="ai-and-leadership"] .cat-icon{ background:#3D3A6E; } .cat-card[data-cat="ai-and-leadership"]:hover{ background:#EEEDF4; }
.cat-card[data-cat="organizational-growth"]{ border-top-color:#6B6B3A; } .cat-card[data-cat="organizational-growth"] .cat-icon{ background:#6B6B3A; } .cat-card[data-cat="organizational-growth"]:hover{ background:#F3F3EC; }
.cat-card[data-cat="communication"]{ border-top-color:#9C5A2E; } .cat-card[data-cat="communication"] .cat-icon{ background:#9C5A2E; } .cat-card[data-cat="communication"]:hover{ background:#F7F0EA; }
.cat-card[data-cat="personal-mastery"]{ border-top-color:#6E3A4A; } .cat-card[data-cat="personal-mastery"] .cat-icon{ background:#6E3A4A; } .cat-card[data-cat="personal-mastery"]:hover{ background:#F4EEF0; }
.cat-card[data-cat="team-leadership"]{ border-top-color:#4A5C7A; } .cat-card[data-cat="team-leadership"] .cat-icon{ background:#4A5C7A; } .cat-card[data-cat="team-leadership"]:hover{ background:#EEF0F4; }
.cat-card[data-cat="culture"]{ border-top-color:#2D6A63; } .cat-card[data-cat="culture"] .cat-icon{ background:#2D6A63; } .cat-card[data-cat="culture"]:hover{ background:#EDF3F2; }

/* ================================================================
   WINNING FRAMEWORK (marketing section + in-article block)
================================================================ */
.framework{ background: var(--paper); }
.framework-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:center; }
.framework-copy .eyebrow{ margin-bottom:0; }
.framework-copy h2{ font-size: clamp(1.7rem,3vw,2.3rem); font-weight:800; margin-top:14px; line-height:1.18; }
.framework-copy p{ margin-top:18px; color: var(--ink-soft); max-width:50ch; }
.framework-points{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.framework-points li{ display:flex; gap:12px; align-items:flex-start; font-size:.95rem; color: var(--ink); }
.framework-points .mark{ color: var(--gold-text); font-weight:800; flex-shrink:0; }
.framework-diagram{ aspect-ratio: 1/1; background: var(--white); border: 1px dashed var(--line-strong); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; padding:32px; overflow:hidden; }
.framework-diagram img{ width:100%; height:100%; object-fit:contain; }
.framework-diagram span{ font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); text-align:center; }

.article-framework{ margin: 52px 0; background: var(--paper); border:1px solid var(--line); padding: 40px; }
.article-framework h3{ font-family: var(--font-display); font-weight:800; font-size:1.5rem; margin-top:12px; }
.article-framework > p{ margin-top:14px; color: var(--ink-soft); max-width:64ch; }

/* ================================================================
   SCHEDULE
================================================================ */
.schedule-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.schedule-card{ border:1px solid var(--line); border-top: 3px solid var(--line-strong); padding: 32px 28px; background: var(--white); transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.schedule-card:hover{ transform: translateY(-4px); }
.schedule-day{ font-family: var(--font-display); font-weight:800; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-text); }
.schedule-title{ margin-top:14px; font-size:1.35rem; font-weight:800; font-family: var(--font-display); }
.schedule-desc{ margin-top:12px; color: var(--ink-soft); font-size:.94rem; }
.schedule-grid .schedule-card:nth-child(1){ border-top-color:#9C7A2E; } .schedule-grid .schedule-card:nth-child(1):hover{ border-color:#9C7A2E; box-shadow: 0 16px 32px rgba(156,122,46,.14); }
.schedule-grid .schedule-card:nth-child(2){ border-top-color:#2E4A6B; } .schedule-grid .schedule-card:nth-child(2) .schedule-day{ color:#2E4A6B; } .schedule-grid .schedule-card:nth-child(2):hover{ border-color:#2E4A6B; box-shadow: 0 16px 32px rgba(46,74,107,.14); }
.schedule-grid .schedule-card:nth-child(3){ border-top-color:#2D6A63; } .schedule-grid .schedule-card:nth-child(3) .schedule-day{ color:#2D6A63; } .schedule-grid .schedule-card:nth-child(3):hover{ border-color:#2D6A63; box-shadow: 0 16px 32px rgba(45,106,99,.14); }

/* ================================================================
   QUOTE
================================================================ */
.quote-section{ background: var(--black); padding: 110px 0; }
.quote-mark{ font-family: var(--font-display); font-size: 4.5rem; color: var(--gold-on-black); line-height:1; margin-bottom:10px; }
.quote-text{ font-family: var(--font-display); font-weight:700; color: var(--white); font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height:1.3; max-width:900px; }
.quote-attr{ margin-top:28px; display:flex; align-items:center; gap:16px; }
.quote-attr .rule{ width:40px; height:1px; background: var(--gold-line); }
.quote-attr span{ color: var(--gold-on-black); font-weight:700; font-size:.95rem; }
.quote-attr small{ display:block; color: rgba(255,255,255,.5); font-size:.78rem; margin-top:2px; }

/* ================================================================
   CTA
================================================================ */
.cta-section{ background: var(--paper); text-align:center; padding: 90px 0; border-top:1px solid var(--line); }
.cta-section h2{ font-size: clamp(1.6rem,3vw,2.2rem); font-weight:800; max-width:640px; margin:16px auto 0; }
.cta-section p{ color: var(--ink-soft); max-width:520px; margin: 14px auto 0; }
.cta-actions{ display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap; }

/* ================================================================
   TOAST
================================================================ */
.toast{
  position:fixed; bottom:28px; left:50%; transform: translateX(-50%) translateY(10px);
  background: var(--black); color: var(--white); padding:13px 24px; font-size:.86rem; font-weight:600;
  border-radius:2px; opacity:0; pointer-events:none; transition: opacity .25s var(--ease), transform .25s var(--ease);
  z-index:300; display:flex; align-items:center; gap:9px; box-shadow: 0 12px 32px rgba(11,11,13,.25);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }
.toast .dot{ width:6px; height:6px; border-radius:50%; background: var(--gold-on-black); flex-shrink:0; }

/* ================================================================
   FOOTER
================================================================ */
footer.site-footer{ background: var(--black); color: rgba(255,255,255,.7); border-top: 2px solid var(--gold); }
.footer-top{ padding-top: 64px; padding-bottom: 40px; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand .brand-name{ color: var(--white); }
.footer-brand .brand-kicker{ color: rgba(255,255,255,.45); }
.footer-tagline{ margin-top:16px; font-size:.9rem; color: rgba(255,255,255,.55); max-width:34ch; }
.footer-col h5{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: rgba(255,255,255,.4); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.9rem; color: rgba(255,255,255,.75); transition: color .2s var(--ease); }
.footer-col a:hover{ color: var(--gold-on-black); }
.social-row{ display:flex; gap:14px; margin-top:6px; }
.social-row a{ width:34px; height:34px; border:1px solid rgba(255,255,255,.18); border-radius:50%; display:flex; align-items:center; justify-content:center; transition: border-color .2s var(--ease), background .2s var(--ease); }
.social-row a:hover{ border-color: var(--gold-on-black); background: rgba(217,184,114,.08); }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; padding-bottom: 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.8rem; color: rgba(255,255,255,.4); }
.footer-bottom-links{ display:flex; gap:22px; }
.footer-bottom-links a{ color: rgba(255,255,255,.5); }
.footer-bottom-links a:hover{ color: var(--gold-on-black); }

/* ================================================================
   AUTH / FORM PAGES (login, register, forgot/reset password)
   Reuses the mockup's "gate-card" component as a centered form card.
================================================================ */
.auth-section{ background: var(--paper); padding: 76px 0; min-height: calc(100vh - 400px); display:flex; align-items:center; }
.auth-card{ background: var(--white); max-width:460px; width:100%; margin: 0 auto; padding: 44px 40px; border-top:3px solid var(--gold); box-shadow: 0 20px 60px rgba(11,11,13,.08); }
.auth-card .mark{ margin: 0 auto 16px; }
.auth-card h1{ font-family: var(--font-display); font-weight:800; font-size:1.5rem; color: var(--black); margin-top:6px; line-height:1.28; }
.auth-card .lede{ margin-top:10px; color: var(--ink-soft); font-size:.92rem; }
.auth-card.centered{ text-align:center; }
.auth-card.centered .mark{ margin-left:auto; margin-right:auto; }
.auth-card .field{ margin-top:20px; text-align:left; }
.auth-card form{ margin-top: 24px; }
.auth-foot{ margin-top: 22px; font-size:.85rem; color: var(--ink-soft); text-align:center; }
.auth-foot a{ color: var(--gold-text); font-weight:700; }

/* ================================================================
   GENERIC FORM FIELDS (used site-wide: auth, contact, admin, profile)
================================================================ */
.field{ margin-bottom:20px; }
.field:last-child{ margin-bottom:0; }
.field label{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.03em; color: var(--ink); margin-bottom:8px; }
.hint{ font-size:.76rem; color: var(--ink-faint); margin-top:6px; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.field select, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line-strong); background: var(--paper);
  border-radius:2px; transition: border-color .2s var(--ease), background .2s var(--ease); font-size:.95rem; color: var(--ink); font-family: inherit;
}
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):focus,
.field select:focus, .field textarea:focus{ border-color: var(--gold); background: var(--white); outline:none; }
.field input:disabled{ color: var(--ink-faint); cursor: not-allowed; }
.field textarea{ resize: vertical; line-height:1.6; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.field-row.three{ grid-template-columns: repeat(3,1fr); }
.suffix-field{ position:relative; }
.suffix-field input{ padding-right:64px !important; }
.suffix-field .suffix{ position:absolute; right:14px; top:50%; transform: translateY(-50%); font-size:.78rem; color: var(--ink-faint); pointer-events:none; }
.field-check{ display:flex; align-items:center; gap:8px; font-size:.88rem; color: var(--ink); }
.field-inline-link{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; font-size:.85rem; }
.field-inline-link a{ color: var(--gold-text); font-weight:600; }

/* ================================================================
   MEMBER AREA (dashboard, article library, profile)
================================================================ */
.member-shell{ display:grid; grid-template-columns: 240px 1fr; gap: 44px; padding: 48px 0 90px; align-items:start; }
.member-nav{ border:1px solid var(--line); background: var(--paper); position: sticky; top: 96px; max-height: calc(100vh - 116px); overflow-y: auto; }
/* When the nav shares its column with more content below it (e.g. the
   Categories filter on articles.php), stick the whole group together
   instead of letting the nav overlap the panel that follows it. Capped
   to the viewport height with its own scrollbar so a long category list
   can never grow taller than the row CSS Grid gives this column (which
   would otherwise leave sticky positioning with no room to activate). */
.member-sidebar-sticky{ position: sticky; top: 96px; max-height: calc(100vh - 116px); overflow-y: auto; }
.member-sidebar-sticky .member-nav{ position: static; max-height: none; overflow-y: visible; }
.member-nav a{ display:block; padding: 14px 20px; font-size:.9rem; font-weight:600; color: var(--ink-soft); border-bottom:1px solid var(--line); }
.member-nav a:last-child{ border-bottom:none; }
.member-nav a:hover{ color: var(--black); background: var(--paper-deep); }
.member-nav a.active{ color: var(--black); background: var(--white); border-left: 3px solid var(--gold); padding-left:17px; }
.member-header{ margin-bottom: 32px; }
.member-header h1{ font-size: clamp(1.5rem,2.6vw,2rem); font-weight:800; }
.member-header p{ margin-top:8px; color: var(--ink-soft); }
.stat-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 40px; }
.stat-card{ border:1px solid var(--line); background: var(--white); padding: 24px; }
.stat-card .num{ font-family: var(--font-display); font-weight:800; font-size:1.8rem; color: var(--black); }
.stat-card .label{ margin-top:6px; font-size:.82rem; color: var(--ink-faint); }
.toolbar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:24px; }
.search-field{ position:relative; flex:1; min-width:220px; }
.search-field svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none; }
.search-field input{ width:100%; padding:11px 14px 11px 40px; border:1px solid var(--line-strong); background: var(--white); border-radius:2px; }
.filter-select{ padding:11px 14px; border:1px solid var(--line-strong); background: var(--white); border-radius:2px; font-weight:600; }

/* ================================================================
   ADMIN - TOPBAR (editorial dashboard chrome)
================================================================ */
.admin-topbar{ background: var(--white); border-bottom:1px solid var(--line); position: sticky; top:0; z-index:80; }
.admin-topbar .topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:24px; flex-wrap:wrap; }
.admin-tabs{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.admin-tabs a{ font-size:.86rem; font-weight:600; color: var(--ink-soft); padding:6px 0; position:relative; }
.admin-tabs a.active{ color: var(--black); }
.admin-tabs a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-16px; height:2px; background: var(--gold); }
.user-chip{ display:flex; align-items:center; gap:10px; }

/* ================================================================
   ADMIN - LEFT SIDEBAR NAVIGATION
================================================================ */
body.admin-shell{ padding-left: 240px; }
.admin-sidebar{
  position: fixed; top:0; left:0; bottom:0; width:240px; overflow-y:auto;
  background: var(--white); border-right:1px solid var(--line); z-index:85;
  display:flex; flex-direction:column;
}
.admin-sidebar-brand{ display:flex; align-items:center; gap:11px; padding:20px 22px; border-bottom:1px solid var(--line); }
.admin-sidebar-nav{ padding: 14px 0; flex:1; }
.admin-sidebar-nav a{
  display:flex; align-items:center; gap:10px; padding: 12px 22px; font-size:.87rem; font-weight:600;
  color: var(--ink-soft); border-left:3px solid transparent; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.admin-sidebar-nav a:hover{ background: var(--paper); color: var(--black); }
.admin-sidebar-nav a.active{ background: var(--paper); color: var(--black); border-left-color: var(--gold); font-weight:700; }
.admin-sidebar-foot{ padding: 16px 22px; border-top:1px solid var(--line); font-size:.8rem; }
.admin-sidebar-foot a{ display:block; color: var(--ink-faint); font-weight:600; padding: 6px 0; }
.admin-sidebar-foot a:hover{ color: var(--gold-text); }
.admin-sidebar-foot a.user-chip{ display:flex; padding:0; }
.admin-sidebar-foot a.user-chip:hover .user-name{ color: var(--gold-text); }
@media (max-width: 900px){
  body.admin-shell{ padding-left:0; }
  .admin-sidebar{ position: static; width:auto; flex-direction:row; border-right:none; border-bottom:1px solid var(--line); overflow-x:auto; }
  .admin-sidebar-brand{ border-bottom:none; border-right:1px solid var(--line); flex-shrink:0; }
  .admin-sidebar-nav{ display:flex; padding:0; }
  .admin-sidebar-nav a{ border-left:none; border-bottom:3px solid transparent; white-space:nowrap; }
  .admin-sidebar-nav a.active{ border-left-color:transparent; border-bottom-color: var(--gold); }
  .admin-sidebar-foot{ display:flex; border-top:none; border-left:1px solid var(--line); flex-shrink:0; }
}
.logout-link{ font-size:.8rem; font-weight:600; color: var(--ink-faint); border-left:1px solid var(--line); padding-left:22px; transition: color .2s var(--ease); }
.logout-link:hover{ color: var(--gold-text); }
.avatar{ width:34px; height:34px; border-radius:50%; background: var(--black); color: var(--gold-on-black); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:800; font-size:.8rem; flex-shrink:0; }
.user-meta{ line-height:1.25; }
.user-name{ font-size:.85rem; font-weight:700; color: var(--black); }
.user-role{ font-size:.72rem; color: var(--ink-faint); }
.autosave-chip{ display:flex; align-items:center; gap:6px; font-size:.76rem; color: var(--ink-faint); }
.autosave-dot{ width:6px; height:6px; border-radius:50%; background: var(--good); }

/* ================================================================
   ADMIN - PAGE HEAD / BREADCRUMB
================================================================ */
.page-head{ padding-top: 40px; padding-bottom: 8px; }
.breadcrumb{ font-size:.8rem; color: var(--ink-faint); margin-bottom:18px; }
.breadcrumb a{ color: var(--ink-faint); } .breadcrumb a:hover{ color: var(--gold-text); }
.breadcrumb .sep{ margin:0 8px; } .breadcrumb .current{ color: var(--ink-soft); font-weight:600; }
.page-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.page-head h1{ font-size: clamp(1.7rem,3vw,2.3rem); font-weight:800; margin-top:6px; }
.page-head p{ margin-top:10px; color: var(--ink-soft); max-width:56ch; }
.stat-row{ display:flex; gap:22px; flex-wrap:wrap; margin: 22px 0 28px; font-size:.84rem; color: var(--ink-soft); }
.stat-row b{ color: var(--black); font-weight:800; }
.stat-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:7px; vertical-align:middle; }

/* ================================================================
   ADMIN - DATA TABLE (stories/members/books/etc)
================================================================ */
.data-table{ background: var(--white); border:1px solid var(--line); margin-bottom: 40px; overflow-x:auto; }
.data-row{ display:grid; gap:18px; align-items:center; padding: 18px 22px; border-bottom:1px solid var(--line); transition: background .2s var(--ease); min-width: 640px; }
.data-row:last-child{ border-bottom:none; }
.data-row:hover{ background: var(--paper); }
.row-clickable{ cursor:pointer; }
.row-clickable:hover{ background: var(--gold-wash); }
.data-row.head-row{ background: var(--paper-deep); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); padding-top:13px; padding-bottom:13px; }
.data-row.head-row:hover{ background: var(--paper-deep); }
.cols-6{ grid-template-columns: 2fr .9fr 1fr 1fr .6fr .8fr; }
.cols-5{ grid-template-columns: 2.4fr 1fr 1fr 1fr .8fr; }
.cols-4{ grid-template-columns: 2.4fr 1fr 1fr .8fr; }
.cols-3{ grid-template-columns: 2.4fr 1fr .8fr; }
.row-main .headline{ font-weight:700; font-size:.96rem; color: var(--black); line-height:1.35; }
.row-main .tag{ margin-top:6px; }
.row-meta{ font-size:.86rem; color: var(--ink-soft); }
.row-meta .sub{ font-size:.76rem; color: var(--ink-faint); margin-top:2px; }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }

.status-pill{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; padding:5px 12px; border-radius:20px; white-space:nowrap; }
.status-pill .dot{ width:6px; height:6px; border-radius:50%; }
.status-published{ background: var(--good-wash); color: var(--good); } .status-published .dot{ background: var(--good); }
.status-draft{ background: var(--paper-deep); color: var(--ink-faint); } .status-draft .dot{ background: var(--ink-faint); }
.status-scheduled{ background: var(--gold-wash); color: var(--gold-text); } .status-scheduled .dot{ background: var(--gold); }
.status-pending_review{ background: var(--bad-wash); color: var(--bad); } .status-pending_review .dot{ background: var(--bad); }
.status-active{ background: var(--good-wash); color: var(--good); } .status-active .dot{ background: var(--good); }
.status-pending{ background: var(--gold-wash); color: var(--gold-text); } .status-pending .dot{ background: var(--gold); }
.status-suspended{ background: var(--bad-wash); color: var(--bad); } .status-suspended .dot{ background: var(--bad); }

.icon-btn{ width:32px; height:32px; border-radius:2px; border:1px solid var(--line-strong); background: var(--white); display:flex; align-items:center; justify-content:center; transition: border-color .2s var(--ease), background .2s var(--ease); flex-shrink:0; }
.icon-btn:hover{ border-color: var(--black); background: var(--paper); }
.icon-btn.danger:hover{ border-color:#7A3B3B; background:#F7EEEE; }

/* ================================================================
   ADMIN - MODALS
================================================================ */
.modal-overlay{ position:fixed; inset:0; background: rgba(11,11,13,.55); z-index:200; display:none; align-items:center; justify-content:center; padding:24px; }
.modal-overlay.open{ display:flex; }
.confirm-modal{ background: var(--white); max-width:400px; width:100%; padding:32px; box-shadow: 0 30px 80px rgba(11,11,13,.35); text-align:center; }
.confirm-modal svg{ margin: 0 auto 14px; }
.confirm-modal h3{ font-size:1.1rem; font-weight:800; }
.confirm-modal p{ margin-top:10px; font-size:.9rem; color: var(--ink-soft); }
.confirm-actions{ display:flex; gap:10px; margin-top:24px; }
.confirm-actions .btn{ flex:1; }

/* ================================================================
   ADMIN - FORM PANELS (article editor, settings, books, masterclasses)
================================================================ */
.admin-layout{ display:grid; grid-template-columns: 1.55fr 1fr; gap: 32px; align-items:start; padding-bottom: 60px; }
.admin-layout.single{ grid-template-columns: 1fr; max-width: 780px; }
.panel{ background: var(--white); border:1px solid var(--line); padding: 30px; margin-bottom: 24px; }
.panel-head{ margin-bottom:22px; }
.panel-head h2{ font-size:1.05rem; font-weight:800; }
.panel-head p{ margin-top:6px; font-size:.86rem; color: var(--ink-faint); }
.headline-input{ font-family: var(--font-display); font-weight:800; font-size:1.15rem !important; }
.char-count{ font-size:.72rem; color: var(--ink-faint); text-align:right; margin-top:6px; }

.segmented{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.seg-option{ position:relative; }
.seg-option input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg-card{ display:block; border:1px solid var(--line-strong); padding:14px 14px; text-align:left; background: var(--paper); transition: border-color .2s var(--ease), background .2s var(--ease); }
.seg-card .day{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); }
.seg-card .name{ display:block; margin-top:5px; font-weight:700; font-size:.88rem; color: var(--ink); }
.seg-option input:checked + .seg-card{ border-color: var(--gold); background: var(--gold-wash); }
.seg-option input:checked + .seg-card .day{ color: var(--gold-text); }

.dropzone{ border:1px dashed var(--line-strong); background: var(--paper); padding: 30px 20px; text-align:center; cursor:pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.dropzone:hover, .dropzone.drag{ border-color: var(--gold); background: var(--gold-wash); }
.dropzone svg{ margin: 0 auto 12px; }
.dropzone .dz-title{ font-size:.86rem; font-weight:700; color: var(--ink); }
.dropzone .dz-sub{ font-size:.76rem; color: var(--ink-faint); margin-top:5px; }
.dropzone.has-file{ border-style:solid; border-color: var(--gold-line); }
.dropzone .dz-filename{ font-size:.82rem; font-weight:600; color: var(--gold-text); margin-top:4px; }
.dz-thumb{ max-height:120px; margin:0 auto 12px; border:1px solid var(--line); }
.current-image{ display:flex; align-items:center; gap:12px; margin-bottom:14px; font-size:.82rem; color: var(--ink-soft); }
.current-image img{ width:64px; height:64px; object-fit:cover; border:1px solid var(--line); }

.checklist{ display:flex; flex-direction:column; gap:12px; }
.check-item{ display:flex; align-items:center; gap:10px; font-size:.86rem; color: var(--ink-faint); }
.check-dot{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: border-color .2s var(--ease), background .2s var(--ease); }
.check-dot svg{ opacity:0; transition: opacity .2s var(--ease); }
.check-item.done{ color: var(--ink); }
.check-item.done .check-dot{ background: var(--good); border-color: var(--good); }
.check-item.done .check-dot svg{ opacity:1; }

.action-bar{ position: fixed; left:240px; right:0; bottom:0; z-index:90; background: var(--white); border-top:1px solid var(--line); box-shadow: 0 -8px 24px rgba(11,11,13,.04); }
.action-bar-inner{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:16px; flex-wrap:wrap; }
.action-left{ font-size:.8rem; color: var(--ink-faint); }
.action-right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.action-bar-spacer{ height:88px; }
@media (max-width: 900px){ .action-bar{ left:0; } }

/* Full-form Story Preview modal (article-edit.php) - reuses the public
   article page's own classes inside an overlay so the preview matches
   the live template exactly. */
.preview-modal-overlay{ position: fixed; inset:0; background: rgba(11,11,13,.55); z-index:400; display:none; align-items:flex-start; justify-content:center; padding: 48px 20px; overflow-y:auto; }
.preview-modal-overlay.open{ display:flex; }
.preview-modal-inner{ background: var(--white); max-width: 900px; width:100%; margin-bottom:40px; box-shadow: 0 30px 80px rgba(11,11,13,.35); }
.preview-modal-topbar{ display:flex; align-items:center; justify-content:space-between; padding: 16px 28px; border-bottom:1px solid var(--line); background: var(--paper); position: sticky; top:0; }
.preview-badge{ display:inline-flex; align-items:center; gap:8px; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--gold-text); border:1px solid var(--gold-line); padding:7px 12px; background: var(--gold-wash); }
.preview-badge .dot{ width:6px; height:6px; border-radius:50%; background: var(--gold); }
.modal-close{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background: var(--white); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: border-color .2s var(--ease), background .2s var(--ease); }
.modal-close:hover{ border-color: var(--black); }
.preview-modal-inner .wrap{ padding-left:32px; padding-right:32px; }

.preview-sticky{ position: sticky; top: 24px; }
.preview-label{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.preview-note{ font-size:.78rem; color: var(--ink-faint); margin-top:4px; }
.preview-card{ border:1px solid var(--line); background: var(--white); }
.preview-media{ aspect-ratio:16/10; background: var(--paper-deep); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.preview-media img{ width:100%; height:100%; object-fit:cover; }
.preview-media span{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); text-align:center; padding:0 16px; }
.preview-body{ padding:24px; }
.preview-headline{ font-family: var(--font-display); font-weight:800; font-size:1.15rem; margin-top:12px; line-height:1.3; }
.preview-summary{ margin-top:10px; font-size:.88rem; color: var(--ink-soft); }

/* Quill editor container - restyled to sit inside a .field like other inputs */
.ql-toolbar.ql-snow{ border-color: var(--line-strong) !important; background: var(--paper); }
.ql-container.ql-snow{ border-color: var(--line-strong) !important; background: var(--white); font-family: var(--font-body); font-size: .98rem; min-height: 320px; }
.field.focused .ql-toolbar.ql-snow, .field.focused .ql-container.ql-snow{ border-color: var(--gold) !important; }

/* ================================================================
   ARTICLE PAGE
================================================================ */
.breadcrumb-row{ padding-top: 22px; font-size:.82rem; color: var(--ink-faint); }
.breadcrumb-row a{ color: var(--ink-faint); } .breadcrumb-row a:hover{ color: var(--gold-text); }
.breadcrumb-row .sep{ margin:0 8px; } .breadcrumb-row .current{ color: var(--ink-soft); }
.article-header{ padding: 22px 0 36px; max-width: 820px; }
.article-header h1{ font-family: var(--font-display); font-weight:800; letter-spacing:-.01em; color: var(--black); font-size: clamp(2rem, 4vw, 3rem); margin-top:16px; line-height:1.12; }
.article-dek{ margin-top:18px; font-size:1.15rem; color: var(--ink-soft); max-width:60ch; }
.byline-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.byline-left{ display:flex; align-items:center; gap:12px; }
.byline-name{ font-size:.9rem; font-weight:700; color: var(--black); }
.byline-meta{ font-size:.78rem; color: var(--ink-faint); margin-top:2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.byline-meta .dot{ width:3px; height:3px; border-radius:50%; background: var(--ink-faint); }
.copy-link-btn{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; color: var(--ink); border:1px solid var(--line-strong); padding:9px 16px; border-radius:2px; background: var(--white); transition: border-color .2s var(--ease), background .2s var(--ease); }
.copy-link-btn:hover{ border-color: var(--black); }
.copy-link-btn.copied{ border-color: var(--gold); background: var(--gold-wash); color: var(--gold-text); }
.article-media{ grid-area: media; aspect-ratio: 21/9; background: var(--paper-deep); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin: 0 0 8px; overflow:hidden; }
.article-media img{ width:100%; height:100%; object-fit:cover; }
.article-media span{ font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-faint); text-align:center; padding:0 20px; }
/* The featured image is now a grid item INSIDE .article-layout (grid-area:
   media, spanning all columns) instead of living in its own separate
   .wrap div the way it used to. That used to be two different elements
   both trusting the shared .wrap CSS to compute an identical width and
   right edge independently - which they should in theory, but any
   divergence between them (rounding, a stray override, anything) meant
   the ad column's right edge could drift out of alignment with the
   image's right edge above it with no way to guarantee they matched.
   Putting both in the SAME grid removes that risk entirely: the image's
   right edge and the ad's right edge are now both just "the right edge
   of this one grid," not two separately-computed boxes that merely
   happen to use the same CSS class. */
.article-layout{ display:grid; grid-template-columns: 1fr 720px 1fr; column-gap: 48px; grid-template-areas: "media media media" ".     prose  ." ".     framework ." ".     author ."; }
.article-layout.has-ad-sidebar{ grid-template-areas: "media media media" ".     ad     ." ".     prose  ." ".     framework ." ".     author ."; }
.article-prose{ grid-area: prose; font-size:1.06rem; color: var(--ink); margin-top:56px; }
.article-layout.has-ad-sidebar .article-prose{ margin-top:0; } /* the ad above it already carries the 56px gap from the image - see .ad-sidebar.right below */
.article-prose > p{ margin-bottom: 22px; line-height:1.85; }
.article-prose h2, .article-prose h3{ font-family: var(--font-display); font-weight:800; font-size:1.5rem; color: var(--black); margin: 42px 0 16px; line-height:1.3; }
.article-prose blockquote, .pull-quote{ margin: 40px 0; padding: 8px 0 8px 26px; border-left: 3px solid var(--gold); font-family: var(--font-display); font-weight:700; font-size:1.4rem; color: var(--black); line-height:1.4; }
.article-prose img{ margin: 1.5em 0; width:100%; height:auto; }
.article-prose table{ width:100%; border-collapse:collapse; margin:1.5em 0; }
.article-prose table td, .article-prose table th{ border:1px solid var(--line); padding:10px; }
.article-framework{ grid-area: framework; }

/* ================================================================
   ADVERTISING SYSTEM
================================================================ */
.ad-slot{ position:relative; display:block; }
.ad-slot-link{ display:block; }
.ad-slot img{ display:block; width:100%; height:100%; object-fit:cover; }
.ad-slot-label{ position:absolute; top:6px; right:6px; background:rgba(11,11,13,.6); color:rgba(255,255,255,.85); font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; pointer-events:none; }

.ad-top-banner{ width:100%; max-height:210px; aspect-ratio: 1680/210; overflow:hidden; border-bottom:1px solid var(--line); }

/* Right sidebar, two stacked slots, each its own exact required size:
   Slot 1 is 300x600, Slot 2 is 300x250 - a standard IAB "medium
   rectangle" - deliberately a different size so it isn't a duplicate of
   Slot 1's creative. Both are STATIC, not sticky - they sit at a fixed
   point in the page and scroll away with the rest of the content,
   rather than tracking the viewport as you scroll.

   Placement uses named grid-template-areas (see .article-layout above)
   instead of numbered grid-column/grid-row: below 1400px "ad" is its own
   row directly under "media" and above "prose" (stacked, same column as
   the text); at 1400px+ .has-ad-sidebar's areas are redefined so "ad"
   sits beside "prose" in its own column instead. Named areas were
   deliberately used here rather than relying on the grid's automatic
   placement, after that auto-placement caused a real bug: when the ad
   was column 3 and the very next item in the DOM (.article-prose) was
   column 2, the CSS Grid spec's auto-placement cursor treats a LOWER
   column number than the previous item as a signal to skip to the next
   row entirely - even though column 2 was still completely empty in row
   1. That silently bumped the article text down a whole row, leaving a
   large empty gap above it. Named areas assign every item's row and
   column explicitly, so that auto-placement logic never runs at all.

   Alignment with the featured image above: since the image now shares
   this same grid (see the .article-media comment above) rather than a
   separately-computed .wrap box, the ad column's right edge and the
   image's right edge are structurally guaranteed to be the same edge,
   not just two boxes that are supposed to compute to the same width.

   The reserved-column layout only applies when article.php has actually
   rendered an ad into at least one slot (it adds a `has-ad-sidebar`
   class to .article-layout in that case). If neither slot has an
   eligible ad, .article-layout keeps its plain default areas/columns
   (1fr 720px 1fr, no gutter reserved) so the text goes back to its
   normal, wider centered layout instead of leaving a permanent gap. */
.ad-sidebar.right{ grid-area: ad; display:flex; flex-direction:column; align-items:center; gap:24px; margin: 56px 0 40px; }
.ad-sidebar.right .ad-slot{ width:100%; max-width:300px; border:1px solid var(--line); }
.ad-sidebar.right .slot-1 .ad-slot{ aspect-ratio: 300/600; }
.ad-sidebar.right .slot-2 .ad-slot{ aspect-ratio: 300/250; }
@media (min-width: 1400px){
  /* Desktop-only: the text column keeps a slim, mostly-fixed left gutter
     instead of an equal flexible column on both sides, so the extra
     width goes to a dedicated fixed 300px ad column on the right,
     flush with the container's right edge (same edge the image above
     touches), rather than being split evenly (which is what was
     squeezing the ad down to a fraction of its intended size before).
     "ad" moves to its own column beside "prose" instead of a row above
     it, and only spans that one row - "framework"/"author" get an empty
     cell ('.') in that column since the ad shouldn't stretch down the
     whole page next to them. */
  .article-layout.has-ad-sidebar{ grid-template-columns: minmax(60px, 1fr) 720px 300px; grid-template-areas: "media media media" ".     prose  ad" ".     framework ." ".     author ."; }
  /* Both need the same top margin here so their tops land flush with
     each other (ad is no longer stacked above prose in this layout, so
     it needs its own 56px gap from the image, matching prose's). */
  .article-layout.has-ad-sidebar .article-prose{ margin-top:56px; }
  .article-layout.has-ad-sidebar .ad-sidebar.right{ margin:56px 0 0; }
  /* justify-self:stretch (the grid default - set explicitly here so it's
     not accidentally overridden later) is what actually makes the ad
     flush with the image above. justify-self:end was tried here first
     and looked right in theory, but it makes a grid item shrink-wrap to
     its content's natural width instead of filling the 300px column, so
     .ad-slot's width:100% had nothing definite to resolve against and
     the box rendered narrower than the column - leaving a visible gap
     short of the image's right edge instead of touching it. */
  .article-layout.has-ad-sidebar .ad-sidebar.right{ display:flex; flex-direction:column; justify-self:stretch; align-items:stretch; gap:24px; }
}
.author-card{ grid-area: author; display:flex; gap:22px; padding: 32px 0; margin-top: 12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); align-items:flex-start; }
.author-portrait{ width:64px; height:64px; border-radius:50%; background: var(--paper-deep); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family: var(--font-display); font-weight:800; color: var(--ink-faint); font-size:1rem; overflow:hidden; }
.author-portrait img{ width:100%; height:100%; object-fit:cover; }
.author-info h4{ font-family: var(--font-display); font-weight:800; font-size:1.05rem; color: var(--black); }
.author-info .role{ font-size:.8rem; color: var(--gold-text); font-weight:700; margin-top:2px; }
.author-info p{ margin-top:10px; font-size:.92rem; color: var(--ink-soft); max-width:60ch; line-height:1.7; }
.related-section{ padding: 64px 0 90px; }
.related-head{ margin-bottom:32px; }

/* ================================================================
   GENERIC CONTENT PAGES (about, privacy, terms, contact)
================================================================ */
.page-header{ padding: 64px 0 20px; text-align:center; }
.page-header h1{ font-size: clamp(2rem,4vw,2.8rem); font-weight:800; margin-top:14px; }
.page-header p{ margin-top:14px; color: var(--ink-soft); max-width:60ch; margin-left:auto; margin-right:auto; }
.prose{ max-width: 760px; margin: 0 auto; font-size:1.02rem; }
.prose h2{ font-size:1.4rem; font-weight:800; margin: 36px 0 14px; }
.prose p{ margin-bottom: 18px; line-height:1.8; color: var(--ink); }
.prose ul{ list-style: disc; margin: 0 0 18px 22px; }
.prose ul li{ margin-bottom:8px; line-height:1.7; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-media{ order:-1; max-width: 420px; }
  .trust-grid{ grid-template-columns: repeat(2,1fr); row-gap:28px; }
  .cat-grid{ grid-template-columns: repeat(2,1fr); }
  .featured-card{ grid-template-columns: 1fr; }
  .featured-media{ border-right:none; border-bottom:1px solid var(--line); min-height:240px; }
  .editions-grid{ grid-template-columns: repeat(2,1fr); }
  .framework-grid{ grid-template-columns: 1fr; }
  .framework-diagram{ order:-1; max-width:420px; margin:0 auto; }
  .schedule-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .admin-layout{ grid-template-columns: 1fr; }
  .preview-sticky{ position: static; }
  .member-shell{ grid-template-columns: 1fr; }
  .member-nav{ position:static; display:flex; overflow-x:auto; max-height:none; }
  .member-sidebar-sticky{ position:static; max-height:none; overflow-y:visible; }
  .member-nav a{ border-bottom:none; border-right:1px solid var(--line); white-space:nowrap; }
  .article-layout{ grid-template-columns: 1fr; grid-template-areas: "media" "prose" "framework" "author"; padding-left: var(--pad); padding-right: var(--pad); }
  /* On small screens the ad now comes AFTER the full article (media,
     prose, framework, author) instead of between the image and the text -
     it shouldn't interrupt the start of the story on a phone-width
     screen. This only affects this <=1024px breakpoint; at 1400px+ the ad
     is still its own side column next to the first paragraph (see the
     min-width:1400px block above), and 1025-1399px keeps the ad directly
     under the image since there's no "small screen" reason to move it
     there. */
  .article-layout.has-ad-sidebar{ grid-template-areas: "media" "prose" "framework" "author" "ad"; }
  .related-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px){
  nav.primary-links, .nav-right .btn-outline{ display:none; }
  .menu-toggle{ display:block; }
  section{ padding: 60px 0; }
  .trust{ padding: 44px 0; }
  .trust-grid{ grid-template-columns: 1fr 1fr; }
  .cat-grid{ grid-template-columns: 1fr; }
  .editions-grid{ grid-template-columns: 1fr; }
  .related-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; padding-bottom:20px; }
  .quote-section{ padding: 72px 0; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .field-row{ grid-template-columns: 1fr; }
  .segmented{ grid-template-columns: 1fr; }
  .byline-row{ flex-direction:column; align-items:flex-start; }
  .author-card{ flex-direction:column; }
  .stat-cards{ grid-template-columns: 1fr; }
  .data-row{ grid-template-columns: 1fr !important; gap:8px; }
  .data-row .row-actions{ justify-content:flex-start; margin-top:6px; }
  .data-row.head-row{ display:none; }
}