/* ═══════════════════════════════════════════════════════════════════
   CVL Design System — styles.css
   Cloud Value Lab · cvlfinops.com

   Single source of truth for all shared styles.
   Each page links: <link rel="stylesheet" href="/assets/styles.css">
   Page-specific overrides go in a <style> block AFTER this link.
   ═══════════════════════════════════════════════════════════════════ */


/* ─── STAGING BANNER (localhost only) ─── */
.staging-banner{
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #E53E3E; color: #fff;
  text-align: center;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 0;
}
.staging-banner ~ .site-nav,
.staging-banner ~ .nav{
  top: 30px; /* offset sticky nav below the banner */
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}


/* ─── DESIGN TOKENS ─── */
:root{
  /* Backgrounds */
  --bg:   #0C0B0F;
  --bg2:  #13121A;
  --bg3:  #1A1925;

  /* Text — all WCAG AA compliant against --bg */
  --t:    #F2EDE4;                     /* Primary     — 16.8 : 1 */
  --tm:   rgba(242,237,228,.70);       /* Body        —  8.4 : 1 */
  --td:   rgba(242,237,228,.62);       /* Dimmed      —  6.8 : 1 */
  --tx:   rgba(242,237,228,.50);       /* Extra-dim   —  4.8 : 1 */

  /* Accent */
  --a:    #D4A030;                     /* Gold        —  8.3 : 1 */
  --a2:   rgba(212,160,48,.15);        /* Gold tint                */

  /* Borders & rules */
  --r:    rgba(242,237,228,.10);

  /* Spacing scale (multiples of 4px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Typography */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body:    'Source Sans 3', sans-serif;
  --font-brand:   'Montserrat', sans-serif;

  /* Base body */
  --body-size:        17px;
  --body-line-height: 1.65;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;

  /* Transitions */
  --ease: .3s ease;
}


/* ─── FOCUS RINGS ─── */
*:focus-visible{
  outline: 2px solid var(--a);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ─── SKIP LINK ─── */
.skip-link{
  position: fixed; top: -100px; left: var(--sp-4); z-index: 9999;
  background: var(--a); color: var(--bg);
  padding: var(--sp-2) 18px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: top .2s;
}
.skip-link:focus{ top: var(--sp-4); }


/* ─── BASE ─── */
html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--tm);
  min-height: 100vh;
  font-size: var(--body-size);
  line-height: var(--body-line-height);
}

/* Film-grain texture overlay */
body::before{
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px;
}


/* ─── TYPOGRAPHY SCALE ─── */

/* Headings */
h1, h2, h3{
  font-family: var(--font-heading);
  color: var(--t);
  font-weight: 600;
}

/* Eyebrow / label text */
.eyebrow{
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--a);
}

/* Section label (e.g. "Featured Interview", "More from CVL") */
.section-label{
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--td);
  margin-bottom: var(--sp-10);
}

/* Meta text (dates, read times, bylines) */
.meta{
  font-size: 12px;
  font-weight: 300;
  color: var(--tx);
}


/* ─── LINKS ─── */
a{
  color: var(--a);
  text-decoration: underline;
  text-decoration-color: rgba(212,160,48,.3);
  transition: color var(--ease), text-decoration-color var(--ease);
}
a:hover{
  color: var(--t);
  text-decoration-color: var(--a);
}


/* ═══════════════════════════════════════════════════════════════════
   COMPONENTS — Shared across landing page and articles
   ═══════════════════════════════════════════════════════════════════ */


/* ─── NAV (article pages) ─── */
.nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(12,11,15,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--r);
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4) var(--sp-12);
}
.nav-logo{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: var(--bg);
  border: 1px solid rgba(242,237,228,.18);
  border-radius: 5px;
  padding: var(--sp-1); gap: 0;
  text-decoration: none;
  transition: border-color var(--ease);
}
.nav-logo:hover{ border-color: rgba(242,237,228,.3); }
.logo-m{
  font-family: var(--font-heading); font-weight: 700;
  font-size: 19px; color: var(--t);
  letter-spacing: .05em; line-height: 1;
}
.logo-r{
  width: 24px; height: 1px;
  background: rgba(242,237,228,.25);
  margin: 2px 0 1px;
}
.logo-w{
  font-family: var(--font-brand); font-weight: 300;
  font-size: 4px; color: rgba(242,237,228,.6);
  letter-spacing: .2em; text-transform: uppercase;
}
.nav-links{
  display: flex; gap: var(--sp-6); list-style: none;
}
.nav-links a{
  text-decoration: none;
  font-size: 12px; font-weight: 400; letter-spacing: .08em;
  color: var(--td); transition: color var(--ease);
}
.nav-links a:hover{ color: var(--t); }


/* ─── NAV (landing page — extended with dropdowns) ─── */
.site-nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(12,11,15,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--r);
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4) var(--sp-12);
}
.nav-logo-text{
  font-family: var(--font-brand); font-weight: 700;
  font-size: 17px; color: rgba(242,237,228,.95);
  letter-spacing: .2em; text-transform: uppercase; line-height: 1;
}
.nav-logo-text-short{
  display: none;
  font-family: var(--font-brand); font-weight: 800;
  font-size: 20px; color: var(--t);
  letter-spacing: .2em; text-transform: uppercase;
  text-shadow: 0 0 14px rgba(242,237,228,.35);
}
.nav-items{
  display: flex; gap: var(--sp-1); list-style: none;
}
.nav-item{ position: relative; }
.nav-trigger{
  font-family: var(--font-body); font-size: 13px; font-weight: 400;
  letter-spacing: .08em; color: var(--td);
  background: none; border: none; cursor: pointer;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm);
  transition: all .2s;
  display: flex; align-items: center; gap: 6px;
}
.nav-trigger:hover,
.nav-item.open .nav-trigger,
.nav-item:hover .nav-trigger{ color: var(--t); }
.nav-trigger .chevron{
  font-size: 8px; opacity: .5; transition: transform .2s;
}
.nav-item.open .chevron,
.nav-item:hover .chevron{
  transform: rotate(180deg); opacity: .8;
}
.nav-trigger.cta{
  border: 1px solid rgba(212,160,48,.2); color: var(--td);
}
.nav-trigger.cta:hover,
.nav-item.open .nav-trigger.cta,
.nav-item:hover .nav-trigger.cta{
  border-color: rgba(212,160,48,.4); color: var(--a);
}

/* Dropdown menus */
.dropdown{
  position: absolute; top: 100%; left: 50%;
  min-width: 220px; padding-top: var(--sp-3); border-radius: var(--radius-lg);
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity .2s .05s, visibility .2s .05s, transform .2s .05s;
  pointer-events: none;
}
.dropdown-inner{
  background: rgba(30,28,38,.95);
  border: 1px solid rgba(242,237,228,.12);
  backdrop-filter: blur(20px);
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
  border-radius: var(--radius-lg); padding: var(--sp-2) 0;
  position: relative;
}
.nav-item.open .dropdown,
.nav-item:hover .dropdown{
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto; transition-delay: 0s;
}
.dropdown-inner::before{
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,160,48,.3), transparent);
}
.dd-link{
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 20px; text-decoration: none;
  transition: background .15s;
}
.dd-link:hover{ background: rgba(212,160,48,.06); }
.dd-link .dd-title{
  font-size: 13px; font-weight: 400;
  color: rgba(242,237,228,.9); letter-spacing: .02em;
}
.dd-link .dd-desc{
  font-size: 11px; font-weight: 300;
  color: var(--td); line-height: 1.4;
}
.dd-link:hover .dd-title{ color: var(--a); }
.dd-divider{
  height: 1px; background: rgba(242,237,228,.08); margin: var(--sp-1) var(--sp-4);
}


/* ─── HAMBURGER + MOBILE NAV ─── */
.nav-hamburger{
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  padding: var(--sp-2); border-radius: var(--radius-sm);
}
.nav-hamburger span{
  display: block; width: 22px; height: 2px;
  background: var(--td); border-radius: 2px;
  transition: all .25s;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display: none; position: fixed; inset: 0; top: 57px; z-index: 99;
  background: rgba(12,11,15,.97); backdrop-filter: blur(20px);
  padding: var(--sp-8) var(--sp-6); overflow-y: auto;
}
.mobile-nav.open{ display: block; }
.mobile-nav a,
.mobile-nav button{
  display: block; width: 100%; text-align: left;
  font-family: var(--font-body); font-size: 18px; font-weight: 400;
  color: var(--td); text-decoration: none; background: none;
  border: none; cursor: pointer;
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--r);
  letter-spacing: .04em; transition: color .2s;
}
.mobile-nav a:hover,
.mobile-nav button:hover{ color: var(--t); }
.mobile-nav .mobile-cta{
  margin-top: var(--sp-6); display: block; text-align: center;
  padding: 14px var(--sp-6);
  border: 1px solid rgba(212,160,48,.35);
  border-radius: var(--radius-md);
  color: var(--a); font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase;
  border-bottom: none;
}
.mobile-nav .mobile-cta:hover{ background: rgba(212,160,48,.08); }

/* Mobile nav accordion sub-menus */
.mobile-nav-group{}
.mobile-nav-trigger{
  display: flex; width: 100%; justify-content: space-between; align-items: center;
  font-family: var(--font-body); font-size: 18px; font-weight: 400;
  color: var(--td); background: none; border: none; cursor: pointer;
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--r);
  letter-spacing: .04em; transition: color .2s; text-align: left;
}
.mobile-nav-trigger:hover{ color: var(--t); }
.mobile-nav-trigger .mobile-chevron{
  font-size: 10px; opacity: .5; transition: transform .2s;
}
.mobile-nav-group.open .mobile-chevron{ transform: rotate(180deg); opacity: .8; }
.mobile-nav-group.open .mobile-nav-trigger{ color: var(--a); }
.mobile-nav-sub{
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.mobile-nav-group.open .mobile-nav-sub{ max-height: 300px; }
.mobile-nav-sub a{
  display: block; padding: 12px 0 12px 20px;
  font-size: 15px; color: var(--td); text-decoration: none;
  border-bottom: 1px solid rgba(242,237,228,.05);
  transition: color .2s;
}
.mobile-nav-sub a:hover{ color: var(--a); }
.mobile-nav-sub a:last-child{ border-bottom: none; }


/* ─── ARTICLE HERO ─── */
.article-hero{
  position: relative;
  padding: var(--sp-20) var(--sp-12) 60px;
  max-width: 820px; margin: 0 auto; text-align: center;
}
.hero-eyebrow{
  font-size: 11px; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--a); margin-bottom: var(--sp-6);
}
.hero-title{
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 600; line-height: 1.1;
  color: var(--t); margin-bottom: var(--sp-4);
}
.hero-subtitle{
  font-size: 18px; font-weight: 300;
  color: var(--td); font-style: italic;
  margin-bottom: var(--sp-2);
}
.hero-byline{
  font-size: 13px; color: var(--tx); letter-spacing: .05em;
}
.hero-byline strong{
  color: var(--td); font-weight: 500;
}
.hero-rule{
  width: 48px; height: 2px;
  background: var(--a);
  margin: var(--sp-6) auto;
}


/* ─── HERO IMAGE ─── */
.hero-img-wrap{
  max-width: 900px; margin: 0 auto var(--sp-10);
  padding: 0 var(--sp-12); position: relative;
}
.hero-img-wrap img{
  width: 100%; height: auto;
  border-radius: var(--radius-md); display: block;
}


/* ─── ACTION BAR ─── */
.action-bar{
  max-width: 720px; margin: 0 auto var(--sp-12);
  padding: var(--sp-3) var(--sp-12);
  display: flex; gap: var(--sp-6); flex-wrap: wrap;
  border-top: 1px solid var(--r);
  border-bottom: 1px solid var(--r);
}
.action-bar a,
.action-bar button{
  font-size: 11px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--a); text-decoration: none;
  background: none; border: none; cursor: pointer;
  transition: color var(--ease);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-body);
}
.action-bar a:hover,
.action-bar button:hover{ color: var(--t); }


/* ─── ARTICLE BODY ─── */
.article-body{
  position: relative; z-index: 1;
  padding-bottom: var(--sp-20);
}
.article-body p{
  margin-bottom: var(--sp-4);
  text-align: justify;
}
.article-body p strong{
  color: var(--t); font-weight: 600;
}

/* Interview question paragraphs — extra space above, tight below */
.article-body p:has(strong:first-child){
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-1);
}


/* ─── BIO BOX ─── */
.bio-box{
  background: var(--bg2);
  border: 1px solid var(--r);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
  font-size: 15px; line-height: 1.7;
  color: var(--td);
}
.bio-box a{ color: var(--a); }


/* ─── SECTION HEADINGS ─── */
.section-heading{
  margin-top: 56px;
  margin-bottom: var(--sp-6);
}
.section-heading h2{
  font-family: var(--font-heading);
  font-size: 30px; font-weight: 600;
  color: var(--t); line-height: 1.2;
  margin-bottom: var(--sp-2);
}
.section-heading hr{
  border: none; height: 1px; background: var(--r);
}


/* ─── PULL QUOTES ─── */
.pull-quote{
  border-left: 3px solid var(--a);
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-8);
  margin: var(--sp-10) 0;
  font-family: var(--font-heading);
  font-size: 24px; font-weight: 400; font-style: italic;
  color: var(--t); line-height: 1.4;
  position: relative;
}
.pull-quote::before{
  content: ''; position: absolute; left: -40px; top: 0;
  width: 80px; height: 100%;
  background: radial-gradient(ellipse at left center, rgba(212,160,48,.06) 0%, transparent 70%);
  pointer-events: none;
}


/* ─── INSET IMAGES ─── */
.inset-img{
  background: var(--bg2);
  border: 1px solid var(--r);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.inset-img.right{
  float: right; margin-left: var(--sp-8);
  margin-top: var(--sp-2); width: 340px;
}
.inset-img.left{
  float: left; margin-right: var(--sp-8);
  margin-top: var(--sp-2); width: 340px;
}
.inset-img img{
  width: 100%; height: 220px; object-fit: cover;
  border-radius: var(--radius-sm); display: block;
  margin-bottom: var(--sp-2);
}
.inset-img .caption{
  font-size: 12px; font-style: italic;
  color: var(--tx); text-align: center;
}
.clear{ clear: both; }


/* ─── KEY TAKEAWAYS ─── */
.takeaways-card{
  background: linear-gradient(135deg, rgba(212,160,48,.07) 0%, rgba(212,160,48,.02) 100%);
  border: 1px solid rgba(212,160,48,.22);
  border-top: 2px solid var(--a);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  margin: var(--sp-10) 0;
}
.takeaways-intro{
  font-size: 14px; color: var(--td);
  margin-bottom: var(--sp-6); font-style: italic;
}
.takeaway-item{
  display: flex; gap: 14px;
  margin-bottom: 18px; align-items: flex-start;
}
.takeaway-item:last-child{ margin-bottom: 0; }
.takeaway-arrow{
  color: var(--a); font-size: 16px; flex-shrink: 0;
  margin-top: 3px; font-family: var(--font-body);
}
.takeaway-label{ color: var(--t); font-weight: 600; }
.takeaway-text{
  font-size: 15px; line-height: 1.65;
  color: var(--td); margin: 0;
}


/* ─── IMPLEMENTATION ROADMAP ─── */
.roadmap{
  margin: var(--sp-2) 0 var(--sp-10);
  position: relative;
}
.roadmap-step{
  display: flex; gap: 20px;
  margin-bottom: 28px; position: relative;
}
.roadmap-step:not(:last-child)::before{
  content: ''; position: absolute;
  left: 19px; top: 44px; bottom: -28px;
  width: 2px; background: var(--r);
}
.roadmap-num{
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--bg);
  flex-shrink: 0; font-family: var(--font-brand);
  margin-top: var(--sp-1);
}
.roadmap-card{
  background: var(--bg2);
  border: 1px solid var(--r);
  border-radius: var(--radius-md);
  padding: 20px var(--sp-6); flex: 1;
}
.roadmap-card h4{
  font-family: var(--font-heading);
  font-size: 20px; font-weight: 600;
  color: var(--t); margin-bottom: 6px; line-height: 1.2;
}
.roadmap-card p{
  font-size: 14px; line-height: 1.65;
  color: var(--td); margin: 0;
}


/* ─── LAYOUT (article + sidebar) ─── */
.layout{
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 340px;
  gap: var(--sp-12); padding: 0 var(--sp-12);
}


/* ─── SIDEBAR ─── */
.sidebar{
  position: relative; z-index: 1;
}
.sidebar-card{
  background: var(--bg2);
  border: 1px solid var(--r);
  border-radius: var(--radius-lg);
  padding: 28px; margin-bottom: var(--sp-6);
}
.sidebar-card h3{
  font-family: var(--font-heading);
  font-size: 22px; font-weight: 600;
  color: var(--t); margin-bottom: var(--sp-3);
}
.sidebar-card p{
  font-size: 14px; color: var(--td);
  margin-bottom: var(--sp-4); line-height: 1.6;
}

/* Newsletter form */
.nl-form input{
  width: 100%; padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--r);
  border-radius: var(--radius-sm);
  color: var(--t); font-family: var(--font-body); font-size: 14px;
  margin-bottom: var(--sp-2);
  outline: none; transition: border-color var(--ease);
}
.nl-form input:focus{ border-color: rgba(212,160,48,.4); }
.nl-form input::placeholder{ color: var(--tx); }
.nl-form button{
  width: 100%; padding: var(--sp-3);
  background: var(--a); border: none;
  border-radius: var(--radius-sm);
  color: var(--bg); font-family: var(--font-body);
  font-size: 12px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  cursor: pointer; transition: background var(--ease);
}
.nl-form button:hover{ background: #b8841f; }

/* Related links */
.related-link{
  display: block; padding: var(--sp-3);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--r);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
  text-decoration: none; transition: border-color var(--ease);
}
.related-link:hover{ border-color: rgba(212,160,48,.3); }
.related-link .rl-name{
  font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--td); margin-bottom: 2px;
}
.related-link .rl-title{
  font-family: var(--font-heading);
  font-size: 16px; font-weight: 500;
  color: var(--a); line-height: 1.3;
}


/* ─── FEATURED CARD (landing page) ─── */
.featured-section{
  position: relative; z-index: 10;
  padding: var(--sp-20) var(--sp-12);
  border-top: 1px solid var(--r);
}
.featured-card{
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 1100px; margin: 0 auto;
  border-radius: var(--radius-xl); overflow: hidden;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  text-decoration: none; color: inherit;
  transition: border-color var(--ease);
}
.featured-card:hover{ border-color: rgba(212,160,48,.15); }
.featured-image{
  position: relative; overflow: hidden; min-height: 360px;
}
.featured-image img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.featured-image::after{
  content: ''; position: absolute; top: 0; right: 0;
  width: 200px; height: 200px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(212,160,48,.1) 0%, transparent 70%);
}
.featured-content{
  padding: var(--sp-12) var(--sp-10);
  display: flex; flex-direction: column; justify-content: center;
}
.featured-type{
  font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: var(--sp-4); color: var(--a);
}
.featured-title{
  font-family: var(--font-heading);
  font-size: 28px; font-weight: 600; line-height: 1.2;
  margin-bottom: var(--sp-4); color: var(--t);
}
.featured-excerpt{
  font-size: 14px; font-weight: 300; line-height: 1.65;
  margin-bottom: var(--sp-5); color: var(--td);
}
.featured-meta{
  font-size: 12px; font-weight: 300; color: var(--tx);
}


/* ─── CARD GRID (landing page) ─── */
.grid-section{
  position: relative; z-index: 10;
  padding: 0 var(--sp-12) var(--sp-20);
}
.cards-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6); max-width: 1100px; margin: 0 auto;
}
.card{
  border-radius: var(--radius-lg); overflow: hidden;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  transition: border-color var(--ease);
  text-decoration: none; color: inherit; display: block;
}
.card:hover{ border-color: rgba(212,160,48,.12); }
.card-image{
  position: relative; height: 200px; overflow: hidden;
}
.card-image img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.card-body{ padding: var(--sp-6); }
.card-type{
  font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 10px; color: var(--a);
}
.card-title{
  font-family: var(--font-heading);
  font-size: 19px; font-weight: 600; line-height: 1.25;
  margin-bottom: 10px; color: var(--t);
}
.card-excerpt{
  font-size: 13px; font-weight: 300; line-height: 1.6;
  margin-bottom: 14px; color: var(--td);
}
.card-meta{
  font-size: 11px; font-weight: 300; color: var(--tx);
}


/* ─── LANDING HERO ─── */
.hero{
  position: relative; z-index: 5;
  min-height: 92vh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; overflow: hidden;
}
.hero-bg{
  position: absolute; inset: 0; z-index: 0;
}
.hero-bg img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-bg-overlay{
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(12,11,15,.4) 0%, rgba(12,11,15,.15) 45%, rgba(12,11,15,.55) 100%),
    linear-gradient(to bottom, rgba(12,11,15,.45) 0%, rgba(12,11,15,.1) 20%, rgba(12,11,15,.1) 65%, rgba(12,11,15,.8) 100%);
}
.vignette{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(12,11,15,.3) 100%);
}
.hero-content{
  position: relative; z-index: 20;
  max-width: 720px; padding: var(--sp-20) var(--sp-12) 100px;
}
.hero-headline{
  font-family: var(--font-heading);
  font-size: clamp(46px, 6.5vw, 84px);
  font-weight: 600; line-height: 1.02;
  margin-bottom: var(--sp-2); color: var(--t);
  text-shadow: 0 2px 40px rgba(0,0,0,.5);
}
.hero-headline .muted{ color: rgba(242,237,228,.35); }
.hero-sub{
  font-size: 16px; font-weight: 300; line-height: 1.7;
  max-width: 520px; margin: 0 auto var(--sp-10);
  color: rgba(242,237,228,.6);
  text-shadow: 0 1px 24px rgba(0,0,0,.4);
}
.hero-badges{
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.badge{
  font-size: 11px; font-weight: 400;
  letter-spacing: .12em;
  padding: 7px var(--sp-4); border-radius: 100px;
  backdrop-filter: blur(4px);
}
.badge-solid{
  background: rgba(242,237,228,.08);
  color: var(--td);
  border: 1px solid rgba(242,237,228,.1);
}
.badge-ghost{
  background: transparent;
  color: var(--tx);
  border: 1px solid rgba(242,237,228,.1);
}


/* ─── FOOTER ─── */
.footer{
  background: var(--bg2);
  border-top: 1px solid var(--r);
  padding: var(--sp-12);
  position: relative; z-index: 10;
}
.footer-inner{
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-10);
}
.footer-logo-text{
  font-family: var(--font-brand); font-weight: 700;
  font-size: 14px; color: var(--t);
  letter-spacing: .2em; text-transform: uppercase;
}
.footer-tag{
  font-size: 13px; color: var(--tx); margin-top: var(--sp-2);
}
.footer h4{
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--t); margin-bottom: var(--sp-3);
}
.footer a{
  color: var(--td); text-decoration: none;
  font-size: 14px; display: block;
  margin-bottom: 6px; transition: color var(--ease);
}
.footer a:hover{ color: var(--t); }
.footer-bottom{
  max-width: 1100px; margin: var(--sp-8) auto 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--r);
  text-align: center; font-size: 12px; color: var(--tx);
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  /* Article layout */
  .layout{ grid-template-columns: 1fr; padding: 0 var(--sp-6); }
  .inset-img.right,
  .inset-img.left{ float: none; width: 100%; margin: var(--sp-6) 0; }
  .article-hero{ padding: var(--sp-12) var(--sp-6) var(--sp-10); }
  .hero-img-wrap{ padding: 0 var(--sp-6); }
  .action-bar{ padding: var(--sp-3) var(--sp-6); }
  .nav{ padding: var(--sp-3) var(--sp-6); }
  .footer-inner{ grid-template-columns: 1fr; }
  .footer{ padding: var(--sp-8) var(--sp-6); }
}

@media (max-width: 900px) {
  /* Landing page */
  .nav-hamburger{ display: flex; }
  .nav-items{ display: none; }
  .site-nav{ padding: 10px 20px; }
  .nav-logo-text-full{ display: none; }
  .nav-logo-text-short{ display: block; }
  .hero{ min-height: 80vh; }
  .hero-bg img{ object-position: 35% center; }
  .hero-bg-overlay{
    background:
      radial-gradient(ellipse at center, rgba(12,11,15,.25) 0%, rgba(12,11,15,.08) 45%, rgba(12,11,15,.45) 100%),
      linear-gradient(to bottom, rgba(12,11,15,.35) 0%, rgba(12,11,15,.05) 20%, rgba(12,11,15,.05) 60%, rgba(12,11,15,.75) 100%);
  }
  .hero-content{ padding: var(--sp-12) var(--sp-6) 72px; }
  .hero-headline{ font-size: clamp(36px, 10vw, 56px); }
  .featured-card{ grid-template-columns: 1fr; }
  .cards-grid{ grid-template-columns: 1fr; }
  .featured-section{ padding: var(--sp-12) 20px; }
  .grid-section{ padding: 0 20px var(--sp-12); }
  .footer{ padding: var(--sp-8) 20px; }
  .footer-inner{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}