/* ============================================================
   LB FRAMEWORK — framework.css
   Layers: base → tokens → components → utilities → overrides
   Mobile-first · Local fonts · Zero build · Zero CDN

   Usage:
     <link rel="stylesheet" href="assets/css/framework.css">
     <link rel="stylesheet" href="assets/css/site.css">

   Per-site customisation belongs in site.css (@layer overrides).
   ============================================================ */

/* ── Layer order declaration (must precede all @layer blocks) ── */
@layer base, tokens, components, utilities, overrides;

/* ── @property — typed custom properties (outside layers, global) ── */
/* Registering colour tokens enables smooth theme-switch animation    */
/* and gives the browser type information for interpolation.          */
@property --bg   { syntax:'<color>'; inherits:true; initial-value:oklch(18.3% 0.003 299) }
@property --sur  { syntax:'<color>'; inherits:true; initial-value:oklch(21.5% 0.004 300) }
@property --sur2 { syntax:'<color>'; inherits:true; initial-value:oklch(25.0% 0.005 275) }
@property --bdr  { syntax:'<color>'; inherits:true; initial-value:oklch(29.6% 0.005 286) }
@property --bdr2 { syntax:'<color>'; inherits:true; initial-value:oklch(35.1% 0.006 280) }
@property --hi   { syntax:'<color>'; inherits:true; initial-value:oklch(93.0% 0.040 34)  }
@property --tx   { syntax:'<color>'; inherits:true; initial-value:oklch(82.5% 0.036 33)  }
@property --tx2  { syntax:'<color>'; inherits:true; initial-value:oklch(69.7% 0.028 31)  }
@property --tx3  { syntax:'<color>'; inherits:true; initial-value:oklch(63.1% 0.026 32)  }
@property --ac   { syntax:'<color>'; inherits:true; initial-value:oklch(70.0% 0.120 43)  }

/* ── @font-face lives outside layers — not part of the cascade ── */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-300-600.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'DMSerif';
  src: url('../fonts/dm-serif-display-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'DMSerif';
  src: url('../fonts/dm-serif-display-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: optional;
}

/* ============================================================
   BASE — reset, element defaults, reduced-motion
   ============================================================ */
@layer base {
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  @media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
  body{
    background:var(--bg);
    color:var(--tx);
    font-family:'Inter',system-ui,sans-serif;
    font-size:var(--t-b);
    font-weight:400;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,video{display:block;max-width:100%;height:auto}
  a{color:inherit;text-decoration:none}
  ul,ol{list-style:none}
  button,input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}
  :focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:2px}
  h1,h2,h3,h4,h5,h6{
    font-family:'DMSerif',Georgia,serif;
    color:var(--hi);
    line-height:1.15;
    font-weight:400;
  }
  /* Reduced motion — kill all animation/transition globally */
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.01ms!important;
      animation-iteration-count:1!important;
      transition-duration:.01ms!important;
    }
  }
}

/* ============================================================
   TOKENS — three layers: primitives → semantic → (component via CSS)
   Primitive tokens are raw values; semantic tokens alias primitives.
   Site overrides live in @layer overrides.
   ============================================================ */
@layer tokens {

  /* ── Primitives (dark palette) — oklch for P3 gamut + perceptual uniformity ── */
  :root {
    /* Surfaces — near-black with subtle cool-blue undertone */
    --_gray-950:  oklch(18.3% 0.003 299);
    --_gray-900:  oklch(21.5% 0.004 300);
    --_gray-850:  oklch(25.0% 0.005 275);
    --_gray-800:  oklch(29.6% 0.005 286);
    --_gray-750:  oklch(35.1% 0.006 280);
    /* Text — warm parchment scale */
    --_warm-100:  oklch(93.0% 0.040 34);
    --_warm-300:  oklch(82.5% 0.036 33);
    --_warm-500:  oklch(69.7% 0.028 31);
    --_warm-600:  oklch(63.1% 0.026 32);
    /* Accent — amber gold */
    --_amber-400: oklch(70.0% 0.120 43);
    /* Scale constants */
    --_wrap:      1200px;
    --_copy:      720px;
    --_nav-h:     60px;
  }

  /* ── Semantic tokens (dark, default) ─────────────────────── */
  :root {
    color-scheme: dark light;

    /* Surfaces */
    --bg:   var(--_gray-950);
    --sur:  var(--_gray-900);
    --sur2: var(--_gray-850);
    --bdr:  var(--_gray-800);
    --bdr2: var(--_gray-750);

    /* Text */
    --hi:   var(--_warm-100);
    --tx:   var(--_warm-300);
    --tx2:  var(--_warm-500);
    --tx3:  var(--_warm-600);

    /* Accent — derived tokens use color-mix so changing --ac cascades */
    --ac:   var(--_amber-400);
    --ac2:  color-mix(in oklch, var(--ac), black 38%);
    --acg:  color-mix(in oklch,  var(--ac) 12%, transparent);

    /* Fluid type — v+r formula gives true linear scaling */
    --t-xs:  clamp(.72rem,  .4vw + .6rem,  .84rem);
    --t-sm:  clamp(.82rem,  .5vw + .68rem, .97rem);
    --t-b:   clamp(.93rem,  .6vw + .76rem, 1.12rem);
    --t-md:  clamp(1.05rem, 1vw  + .8rem,  1.4rem);
    --t-lg:  clamp(1.2rem,  2vw  + .75rem, 1.85rem);
    --t-xl:  clamp(1.5rem,  3vw  + .75rem, 2.6rem);
    --t-2xl: clamp(1.85rem, 4vw  + .9rem,  3.75rem);
    --t-3xl: clamp(2.1rem,  6vw  + .9rem,  5.5rem);

    /* Fluid space */
    --s1: clamp(.25rem, .5vw  + .1rem,  .55rem);
    --s2: clamp(.5rem,  .75vw + .2rem,  .95rem);
    --s3: clamp(.75rem, 1vw   + .35rem, 1.2rem);
    --s4: clamp(1rem,   1.5vw + .5rem,  1.85rem);
    --s5: clamp(1.5rem, 2.5vw + .6rem,  2.9rem);
    --s6: clamp(2rem,   4vw   + .6rem,  4rem);
    --s7: clamp(2.75rem,5vw   + 1rem,   6rem);
    --s8: clamp(3.5rem, 7vw   + 1rem,   8.5rem);

    /* Misc */
    --r:    5px;
    --r2:   10px;
    --dur:  .18s;
    --ease: cubic-bezier(.4,0,.2,1);
    --nav:  var(--_nav-h);
    --wrap: var(--_wrap);
    --copy: var(--_copy);
  }

  /* ── Light theme override ─────────────────────────────────── */
  [data-theme="light"] {
    color-scheme: light dark;

    /* Primitives (light palette) — only overrides; semantic tokens cascade */
    --_gray-950:  oklch(96.0% 0.037 32);
    --_gray-900:  oklch(92.7% 0.040 34);
    --_gray-850:  oklch(89.7% 0.041 35);
    --_gray-800:  oklch(82.9% 0.040 35);
    --_gray-750:  oklch(77.3% 0.041 36);
    --_warm-100:  oklch(20.0% 0.017 35);
    --_warm-300:  oklch(28.5% 0.020 36);
    --_warm-500:  oklch(43.5% 0.021 33);
    --_warm-600:  oklch(49.3% 0.022 32);
    --_amber-400: oklch(59.5% 0.110 40);
  }

  /* Smooth transition between themes — animates token values directly  */
  /* because @property gives the browser colour interpolation knowledge  */
  html{transition:--bg .3s ease,--sur .3s ease,--sur2 .3s ease,--bdr .3s ease,--bdr2 .3s ease,--hi .3s ease,--tx .3s ease,--tx2 .3s ease,--tx3 .3s ease,--ac .3s ease}

}

/* ============================================================
   COMPONENTS — nav, hero, cards, forms, prose, footer, etc.
   ============================================================ */
@layer components {

  /* ── Nav ────────────────────────────────────────────────── */
  .nav {
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:var(--nav);display:flex;align-items:center;
    background:rgba(17,18,20,.93);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--bdr);
    transition-property:background-color,border-color;
    transition-duration:.25s;transition-timing-function:ease;

    [data-theme="light"] & { background:rgba(244,240,234,.95) }
  }
  .nav__in {
    display:flex;align-items:center;justify-content:space-between;
    width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s4);
  }
  .nav__logo  { line-height:1;display:flex;flex-direction:column;gap:2px }
  .nav__name  { font-family:'DMSerif',serif;font-size:var(--t-md);color:var(--hi) }
  .nav__sub   { font-size:var(--t-xs);color:var(--tx2);letter-spacing:.12em;text-transform:uppercase }
  .nav__links { display:none;align-items:center;gap:var(--s4) }

  .nav__link {
    font-size:var(--t-xs);color:var(--tx2);letter-spacing:.08em;text-transform:uppercase;
    transition:color var(--dur) var(--ease);position:relative;

    &:hover, &[aria-current] { color:var(--hi) }
    &[aria-current]::after {
      content:'';position:absolute;bottom:-4px;left:0;right:0;
      height:1px;background:var(--ac);
    }
  }

  .nav__item {
    position:relative;align-self:stretch;display:flex;align-items:center;

    &:hover .nav__drop { opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) }
    &:not(:hover) .nav__drop { transition-delay:.08s }
  }

  .nav__drop {
    position:absolute;top:100%;left:50%;
    transform:translateX(-50%) translateY(-4px);
    background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--r);
    padding:8px 0 var(--s2);min-width:210px;
    opacity:0;pointer-events:none;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
    z-index:200;

    & a {
      display:block;padding:var(--s2) var(--s4);
      font-size:var(--t-sm);color:var(--tx2);
      transition:color var(--dur) var(--ease),background var(--dur) var(--ease);

      &:hover { color:var(--hi);background:var(--sur2) }
    }
  }

  .nav__cta {
    padding:var(--s2) var(--s4);font-size:var(--t-xs);font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--bg);background:var(--ac);border-radius:var(--r);
    transition:background var(--dur) var(--ease);white-space:nowrap;

    &:hover { background:var(--hi) }
  }

  .nav__ham {
    display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:4px;

    & span {
      display:block;width:22px;height:1.5px;background:var(--tx);
      transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
    }
    &.open {
      & span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
      & span:nth-child(2) { opacity:0 }
      & span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }
    }
  }

  .nav__mob {
    display:none;position:fixed;top:var(--nav);left:0;right:0;z-index:99;
    background:var(--sur);border-bottom:1px solid var(--bdr);
    padding:var(--s3) var(--s4);flex-direction:column;

    &.open { display:flex }
    & a {
      padding:var(--s3) 0;font-size:var(--t-md);color:var(--tx2);
      border-bottom:1px solid var(--bdr);
      transition:color var(--dur) var(--ease);

      &:last-child { border-bottom:none }
      &:hover { color:var(--hi) }
    }
  }
  .nav__mob-sub { padding:var(--s2) var(--s4);font-size:var(--t-sm);color:var(--tx3);display:block }

  /* ── Hero ───────────────────────────────────────────────── */
  .hero {
    padding-block:var(--s7);position:relative;overflow:hidden;
    display:flex;flex-direction:column;align-items:center;
  }
  .hero__inner {
    display:flex;flex-direction:column;gap:var(--s5);
    align-items:center;text-align:center;width:100%;
  }
  #hero-cvs  { position:absolute;inset:0;width:100%;height:100%;pointer-events:none }
  .hero__img {
    width:min(260px,80%);border-radius:var(--r2);
    filter:grayscale(15%) contrast(1.05);
    box-shadow:0 20px 60px rgba(0,0,0,.5);
  }
  .hero__eye   { font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ac);font-weight:500 }
  .hero__name  { font-size:var(--t-3xl);color:var(--hi);line-height:1.05 }
  .hero__title { font-size:var(--t-lg);color:var(--tx2);font-family:'DMSerif',serif;font-style:italic }
  .hero__tags  { display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-top:var(--s1) }
  .hero__tag   {
    font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--tx2);
    border:1px solid var(--bdr2);padding:var(--s1) var(--s3);border-radius:100px;
  }
  .hero__btns { display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;margin-top:var(--s2) }

  /* ── Buttons ────────────────────────────────────────────── */
  .btn {
    display:inline-flex;align-items:center;gap:var(--s2);
    padding:var(--s3) var(--s5);font-size:var(--t-sm);font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r);
    cursor:pointer;white-space:nowrap;border:1px solid transparent;
    transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);

    &.btn--p { background:var(--ac);color:var(--bg); &:hover { background:var(--hi) } }
    &.btn--g { border-color:var(--bdr2);color:var(--tx2); &:hover { border-color:var(--ac);color:var(--hi) } }
    &.btn--sm { padding:var(--s2) var(--s3);font-size:var(--t-xs) }
  }

  /* ── Section labels & dividers ──────────────────────────── */
  .lbl     { font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ac);font-weight:500;display:block;margin-bottom:var(--s3) }
  .sec-h   { font-size:var(--t-2xl);color:var(--hi);margin-bottom:var(--s4) }
  .sec-sub { font-size:var(--t-md);color:var(--tx2);max-width:58ch;line-height:1.65;margin-bottom:var(--s5) }
  hr       { border:none;border-bottom:1px solid var(--bdr) }
  .hr-ac   { height:2px;width:60px;background:linear-gradient(90deg,var(--ac),transparent);border:none;margin-block:var(--s4) }

  /* ── Cards ──────────────────────────────────────────────── */
  .card {
    background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
    overflow:hidden;display:flex;flex-direction:column;position:relative;
    transition-property:background-color,border-color,color;
    transition-duration:.25s;transition-timing-function:ease;
    container-type:inline-size;

    /* Generic card part defaults — come first so modifier overrides win via source order */
    & .card__img {
      aspect-ratio:16/9;overflow:hidden;border-radius:var(--r) var(--r) 0 0;
      & img { width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1) }
    }
    &:hover .card__img img { transform:scale(1.04) }
    & .card__b    { padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1 }
    & .card__tag  { font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ac);font-weight:500 }
    & .card__h    { font-size:var(--t-lg);color:var(--hi);line-height:1.3 }
    & .card__x    { font-size:var(--t-sm);color:var(--tx2);line-height:1.65;flex:1 }
    & .card__meta { font-size:var(--t-xs);color:var(--tx3);margin-top:var(--s1) }
    & .card__a {
      display:inline-flex;align-items:center;gap:var(--s1);margin-top:var(--s3);
      font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
      color:var(--ac);font-weight:500;transition:gap var(--dur) var(--ease);
      &::after { content:'→' }
      &:hover  { gap:var(--s2) }
    }

    /* Standard (non-image, non-feat) hover */
    &:not(.card--img):not(.card--feat) {
      transition:border-color .3s var(--ease),box-shadow .3s var(--ease);

      & .card__h { transition:color .25s var(--ease) }
      &::after {
        content:'';position:absolute;bottom:0;left:0;
        height:2px;width:0;background:var(--ac);
        transition:width .4s cubic-bezier(.4,0,.2,1);
      }
      &:hover {
        border-color:var(--ac);
        box-shadow:0 0 0 1px var(--ac2),0 8px 32px rgba(0,0,0,.35);
        & .card__h { color:#fff }
        &::after   { width:100% }
      }
    }

    /* Text card */
    &.card--txt .card__lnk {
      display:flex;flex-direction:column;gap:var(--s2);
      padding:var(--s5);flex:1;color:inherit;
    }

    /* Featured card */
    &.card--feat {
      border:none;border-radius:var(--r);overflow:hidden;position:relative;
      box-shadow:0 0 0 0px var(--ac2);transition:box-shadow .45s ease;
      margin-bottom:var(--s6);

      &:hover { box-shadow:0 0 0 2px var(--ac),0 32px 80px rgba(200,147,42,.18) }
      & .card__lnk { display:block;position:relative;overflow:hidden }
      & img {
        display:block;width:100%;height:auto;
        filter:grayscale(40%) brightness(.7);transform:scale(1.04);transform-origin:center;
        transition:transform .9s cubic-bezier(.16,1,.3,1),filter .75s cubic-bezier(.16,1,.3,1);
      }
      &:hover img { filter:grayscale(0%) brightness(.85);transform:scale(1) }
      & .card__over {
        position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
        padding:var(--s7) var(--s6);
        background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.35) 50%,transparent 80%);
        transition:opacity .3s ease;
      }
      & .card__tag {
        font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
        color:var(--ac);font-weight:500;margin-bottom:var(--s3);display:block;
      }
      & .card__h { font-family:'DMSerif',serif;font-size:var(--t-2xl);color:#fff;line-height:1.15;max-width:22ch }
      & .card__x { font-size:var(--t-sm);color:rgba(255,255,255,.75);margin-top:var(--s3);max-width:55ch;line-height:1.6 }
      &::before {
        content:'';position:absolute;top:0;left:-100%;z-index:4;
        width:100%;height:2px;background:var(--ac);
        transition:left .55s cubic-bezier(.4,0,.2,1);
      }
      &:hover::before { left:0 }
    }

    /* Image card */
    &.card--img {
      border:none;
      box-shadow:0 0 0 0px var(--ac2);transition:box-shadow .45s ease;

      &:hover { box-shadow:0 0 0 2px var(--ac),0 24px 60px rgba(200,147,42,.2) }
      & .card__lnk {
        display:block;position:relative;overflow:hidden;
        &::after {
          content:'';position:absolute;inset:-10%;z-index:3;pointer-events:none;
          width:40%;height:120%;
          background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.07) 50%,transparent 80%);
          transform:translateX(-200%) skewX(-12deg);
          transition:transform .7s cubic-bezier(.4,0,.2,1);
        }
      }
      &:hover .card__lnk::after { transform:translateX(400%) skewX(-12deg) }
      & img {
        display:block;width:100%;height:auto;
        filter:grayscale(70%) brightness(.55) blur(1px);
        transform:scale(1.06);transform-origin:center;
        transition:transform .75s cubic-bezier(.16,1,.3,1),filter .65s cubic-bezier(.16,1,.3,1) .05s;
      }
      &:hover img { filter:blur(0) grayscale(0%) brightness(1);transform:scale(1) }
      & .card__over {
        position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
        padding:var(--s5);
        background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.1) 72%,transparent 100%);
        transition:opacity .25s ease .18s;
      }
      &:hover .card__over { opacity:0;pointer-events:none }
      & .card__tag {
        font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
        color:var(--ac);font-weight:500;display:block;margin-bottom:var(--s2);
        transition:opacity .18s ease,transform .25s ease;
      }
      &:hover .card__tag { opacity:0;transform:translateY(8px) }
      & .card__h {
        color:#fff;font-size:var(--t-md);line-height:1.22;
        transition:opacity .18s ease .06s,transform .25s ease .06s;
      }
      &:hover .card__h { opacity:0;transform:translateY(10px) }
      &::before {
        content:'';position:absolute;top:0;left:-100%;z-index:4;
        width:100%;height:2px;background:var(--ac);
        transition:left .55s cubic-bezier(.4,0,.2,1);
      }
      &:hover::before { left:0 }

      /* Flat modifier — extreme landscape ratios (>= 2:1) */
      &.card--flat {
        & .card__lnk { display:flex;flex-direction:column;overflow:visible }
        & .card__lnk::after { display:none }
        & .card__vis { overflow:hidden }
        & .card__b { padding:var(--s3) var(--s4) var(--s4);background:var(--sur2);border-top:1px solid var(--bdr) }
        & .card__tag { transition:none }
        &:hover .card__tag { opacity:1;transform:none }
        & .card__h { color:var(--hi);transition:color .25s var(--ease) }
        &:hover .card__h { opacity:1;transform:none;color:#fff }
      }
    }
  }

  /* ── Feature strip ──────────────────────────────────────── */
  .strip {
    display:grid;gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;
    container-type:inline-size;

    & .strip__it {
      background:var(--sur);padding:var(--s5);transition:background-color .25s ease;
      &:hover { background:var(--sur2) }
    }
    & .strip__lbl { font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--ac);margin-bottom:var(--s2);display:block }
    & .strip__h   { font-size:var(--t-lg);color:var(--hi);margin-bottom:var(--s2) }
    & .strip__d   { font-size:var(--t-sm);color:var(--tx2);line-height:1.6 }
  }

  /* ── Book block ─────────────────────────────────────────── */
  .book-blk {
    background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r2);
    padding:var(--s6);display:flex;flex-direction:column;align-items:center;
    gap:var(--s5);text-align:center;
    transition-property:background-color,border-color;transition-duration:.25s;transition-timing-function:ease;
  }
  .book-cover { width:min(160px,60%);border-radius:var(--r);box-shadow:16px 16px 48px rgba(0,0,0,.55) }

  /* ── Newsletter ─────────────────────────────────────────── */
  .nl {
    background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r2);
    padding:var(--s6);text-align:center;
    transition-property:background-color,border-color;transition-duration:.25s;transition-timing-function:ease;
  }
  .nl__h    { font-size:var(--t-xl);margin-bottom:var(--s3) }
  .nl__sub  { font-size:var(--t-sm);color:var(--tx2);margin-bottom:var(--s5);max-width:48ch;margin-inline:auto }
  .nl__form { display:flex;flex-direction:column;gap:var(--s3);max-width:440px;margin-inline:auto }

  /* ── Forms ──────────────────────────────────────────────── */
  .fg   { display:flex;flex-direction:column;gap:var(--s2) }
  .flbl { font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);font-weight:500 }
  .fin,.fta,.fsel {
    background:var(--sur2);border:1px solid var(--bdr2);border-radius:var(--r);
    padding:var(--s3) var(--s4);font-size:var(--t-b);color:var(--tx);
    transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
    width:100%;-webkit-appearance:none;

    &:focus        { border-color:var(--ac);box-shadow:0 0 0 3px var(--acg) }
    &::placeholder { color:var(--tx3) }
  }
  .fta   { resize:vertical;min-height:130px }
  .fnote { font-size:var(--t-xs);color:var(--tx3) }
  .ferr  { font-size:var(--t-xs);color:#e05c5c;margin-top:var(--s2) }
  .fsuc  {
    display:none;background:rgba(200,147,42,.1);border:1px solid var(--ac2);
    border-radius:var(--r);padding:var(--s4);text-align:center;color:var(--ac);font-size:var(--t-sm);
  }

  /* ── AI notice ──────────────────────────────────────────── */
  .ai {
    background:#1a1a0a;border:1px solid #5a4a10;border-radius:var(--r);
    padding:var(--s4);margin-bottom:var(--s6);
    display:flex;gap:var(--s3);align-items:flex-start;

    & .ai__icon { font-size:1.2em;flex-shrink:0;margin-top:2px }
    & p         { font-size:var(--t-sm);color:#c8a84a;line-height:1.6;margin:0 }
    & strong    { color:var(--ac) }
  }

  /* ── Page hero ──────────────────────────────────────────── */
  .ph {
    padding-top:var(--s7);padding-bottom:var(--s5);border-bottom:1px solid var(--bdr);margin-bottom:var(--s6);

    & .ph__lbl { font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ac);display:block;margin-bottom:var(--s3) }
    & .ph__h   { font-size:var(--t-2xl);color:var(--hi);line-height:1.1;max-width:20ch }
    & .ph__sub { font-size:var(--t-md);color:var(--tx2);font-family:'DMSerif',serif;font-style:italic;margin-top:var(--s3) }
  }

  /* ── Article header (text-only posts) ───────────────────── */
  .art-hd {
    padding-top:var(--s7);padding-bottom:var(--s5);border-bottom:1px solid var(--bdr);margin-bottom:var(--s6);

    & .art-hd__lbl  { font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ac);display:block;margin-bottom:var(--s3) }
    & .art-hd__h    { font-size:var(--t-2xl);color:var(--hi);line-height:1.1;margin-bottom:var(--s4) }
    & .art-hd__meta {
      font-size:var(--t-xs);color:var(--tx3);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center;
      & time { color:var(--tx3) }
    }
  }

  /* ── Post hero (posts with featured image) ──────────────── */
  .post-hero {
    background:var(--sur);border-bottom:1px solid var(--bdr);

    & .post-hero__in       { display:grid;grid-template-columns:1fr;gap:var(--s5);padding-block:var(--s6) }
    & .post-hero__txt      { display:flex;flex-direction:column;gap:var(--s3) }
    & .post-hero__lbl      { font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ac) }
    & .post-hero__h        { font-family:'DMSerif',Georgia,serif;font-size:var(--t-xl);color:var(--hi);line-height:1.15 }
    & .post-hero__meta     { font-size:var(--t-xs);color:var(--tx3);display:flex;gap:var(--s3);flex-wrap:wrap;
      & time { color:var(--tx3) }
    }
    & .post-hero__img-wrap { order:-1 }
    & .post-hero__img      { display:block;width:100%;height:auto;border-radius:var(--r) }
    & .post-hero__sub      { margin-top:var(--s3);padding-top:var(--s4);border-top:1px solid var(--bdr) }
    & .post-hero__sub-h    { font-size:var(--t-sm);color:var(--hi);font-weight:600;margin-bottom:var(--s2) }
    & .post-hero__sub-row  {
      display:flex;gap:var(--s2);
      & input[type=email] {
        flex:1;min-width:0;padding:var(--s2) var(--s3);
        background:var(--bg);border:1px solid var(--bdr2);border-radius:var(--r);
        color:var(--tx);font-size:var(--t-sm);font-family:inherit;
      }
      & button {
        padding:var(--s2) var(--s4);background:var(--ac);color:#000;border:none;
        border-radius:var(--r);font-size:var(--t-sm);font-weight:600;
        cursor:pointer;white-space:nowrap;font-family:inherit;
        &:hover { background:var(--hi) }
      }
    }

    @media(min-width:768px) {
      & .post-hero__in       { padding-block:var(--s7);align-items:center }
      & .post-hero__img-wrap { order:unset }
      & .post-hero__h        { font-size:var(--t-2xl) }
      &.post-hero--landscape .post-hero__in { grid-template-columns:4fr 6fr }
      &.post-hero--portrait  .post-hero__in { grid-template-columns:3fr 2fr }
    }
  }

  /* ── Prose ──────────────────────────────────────────────── */
  .prose {
    max-width:var(--copy);margin-inline:auto;

    & h2 {
      font-size:var(--t-xl);color:var(--hi);
      margin-top:var(--s7);margin-bottom:var(--s4);
      padding-top:var(--s5);border-top:1px solid var(--bdr);
    }
    & h3 { font-size:var(--t-lg);color:var(--hi);margin-top:var(--s5);margin-bottom:var(--s3) }
    & h4 {
      font-family:'DMSerif',serif;font-style:italic;font-weight:400;
      font-size:var(--t-xl);color:var(--hi);line-height:1.35;
      margin-block:var(--s6);padding-left:var(--s5);border-left:3px solid var(--ac);
      & em, & strong { font-style:normal;color:var(--hi) }
    }
    & p          { margin-bottom:var(--s4);line-height:1.8 }
    & ul, & ol   { margin-bottom:var(--s4);padding-left:var(--s5) }
    & ul         { list-style:disc }
    & ol         { list-style:decimal }
    & li         { margin-bottom:var(--s2);line-height:1.75 }
    & strong     { color:var(--hi);font-weight:600 }
    & em         { color:var(--tx2) }
    & a {
      color:var(--ac);border-bottom:1px solid var(--ac2);
      transition:border-color var(--dur) var(--ease);
      &:hover { border-color:var(--ac) }
    }
    & img {
      display:block;width:100%;height:auto;max-height:520px;
      object-fit:cover;object-position:center 20%;
      border-radius:var(--r);margin-block:var(--s5);
    }
    & iframe, & embed, & object {
      width:100%;height:auto;aspect-ratio:16/9;
      border:none;border-radius:var(--r);margin-block:var(--s5);
    }
    & blockquote {
      border-left:3px solid var(--ac);padding-left:var(--s5);
      margin-block:var(--s5);color:var(--tx2);
      font-family:'DMSerif',serif;font-size:var(--t-lg);font-style:italic;line-height:1.5;
    }
  }

  .art-signoff {
    font-family:'DMSerif',serif;font-style:italic;font-size:var(--t-lg);
    color:var(--ac);margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--bdr);
  }

  .callout {
    background:var(--sur);border:1px solid var(--bdr2);border-left:3px solid var(--ac);
    border-radius:0 var(--r) var(--r) 0;padding:var(--s4) var(--s5);margin-block:var(--s5);

    & code { font-family:ui-monospace,'Courier New',monospace;font-size:var(--t-lg);color:var(--ac);display:block;margin-bottom:var(--s2) }
    & p    { font-size:var(--t-sm);color:var(--tx2);margin:0 }
  }

  .cmds { display:flex;flex-direction:column;gap:var(--s3);padding:0 }
  .cmd {
    background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);
    padding:var(--s4) var(--s5);transition:background-color,border-color .25s ease;

    &:hover { border-color:var(--bdr2) }
    & .cmd__n { font-family:ui-monospace,'Courier New',monospace;font-size:var(--t-xs);color:var(--ac);letter-spacing:.1em;display:block;margin-bottom:var(--s2) }
    & .cmd__h { font-size:var(--t-md);color:var(--hi);margin-bottom:var(--s2) }
    & .cmd__d { font-size:var(--t-sm);color:var(--tx2);line-height:1.65 }
    & .cmd__a { display:inline-block;margin-top:var(--s3);font-size:var(--t-xs);color:var(--ac);text-decoration:none;letter-spacing:.04em;transition:opacity .2s;
      &:hover { opacity:.7 }
    }
  }
  a.cmd__h { text-decoration:none;display:block;transition:color .2s; &:hover { color:var(--ac) } }

  /* ── Back link ──────────────────────────────────────────── */
  .back {
    display:inline-flex;align-items:center;gap:var(--s2);
    font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
    color:var(--tx3);margin-bottom:var(--s4);transition:color var(--dur) var(--ease);

    &::before { content:'←' }
    &:hover   { color:var(--tx2) }
  }

  /* ── Footer ─────────────────────────────────────────────── */
  .ft {
    border-top:1px solid var(--bdr);padding-block:var(--s7);margin-top:var(--s8);
    transition-property:background-color,border-color,color;transition-duration:.25s;transition-timing-function:ease;

    & .ft__grid    { display:grid;gap:var(--s5) }
    & .ft__brand-h { font-family:'DMSerif',serif;font-size:var(--t-lg);color:var(--hi);margin-bottom:var(--s2) }
    & .ft__brand-d { font-size:var(--t-sm);color:var(--tx2);line-height:1.6;max-width:28ch }
    & .ft__col-h   { font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--tx3);margin-bottom:var(--s3) }
    & .ft__links   { display:flex;flex-direction:column;gap:var(--s2) }
    & .ft__link    { font-size:var(--t-sm);color:var(--tx2);transition:color var(--dur) var(--ease); &:hover { color:var(--hi) } }
    & .ft__bot     { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);padding-top:var(--s5);margin-top:var(--s5);border-top:1px solid var(--bdr) }
    & .ft__copy    { font-size:var(--t-xs);color:var(--tx3) }
    & .ft__soc     { display:flex;gap:var(--s2) }
    & .ft__s {
      width:30px;height:30px;border:1px solid var(--bdr);border-radius:var(--r);
      display:flex;align-items:center;justify-content:center;
      font-size:12px;color:var(--tx2);
      transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
      &:hover { border-color:var(--ac);color:var(--ac) }
    }
    & .ft__theme { text-align:center;padding-top:var(--s3);border-top:1px solid var(--bdr);margin-top:var(--s3) }
  }

  .theme-tog {
    display:inline-flex;align-items:center;gap:6px;
    padding:var(--s2) var(--s4);
    font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--tx2);border:1px solid var(--bdr2);border-radius:100px;
    cursor:pointer;background:none;
    transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);

    &:hover { color:var(--hi);border-color:var(--ac) }
  }

  /* ── Stats ──────────────────────────────────────────────── */
  .stats {
    display:grid;gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;margin-block:var(--s5);

    & .stat    { background:var(--sur);padding:var(--s4);text-align:center }
    & .stat__v { font-family:'DMSerif',serif;font-size:var(--t-2xl);color:var(--ac);line-height:1;margin-bottom:var(--s1) }
    & .stat__l { font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--tx2) }
  }

  /* ── Pagination ─────────────────────────────────────────── */
  .pag {
    display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-top:var(--s6);

    & .pag__it {
      display:flex;align-items:center;justify-content:center;
      width:34px;height:34px;border-radius:var(--r);font-size:var(--t-sm);
      color:var(--tx2);border:1px solid var(--bdr);transition:all var(--dur) var(--ease);
      &:hover, &.pag__it--on { border-color:var(--ac);color:var(--ac) }
    }
  }

} /* end @layer components */

/* ============================================================
   UTILITIES — layout helpers, grid, reveal, blog grid, breakpoints
   ============================================================ */
@layer utilities {

  /* ── Layout ─────────────────────────────────────────────── */
  .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s4)}
  .wrap--copy{max-width:var(--copy);padding-block:var(--s7)}
  .sec{padding-block:var(--s7)}
  .sec--sm{padding-block:var(--s5)}
  .page{padding-top:var(--nav)}

  /* ── Grid helpers ───────────────────────────────────────── */
  .grid{display:grid;gap:var(--s4);container-type:inline-size}
  .grid--loose{gap:var(--s6)}

  /* ── Blog grid — CSS columns masonry ────────────────────── */
  .blog-grid{columns:2;column-gap:var(--s4);container-type:inline-size}
  .blog-grid article,.blog-grid a.card{break-inside:avoid;margin-bottom:var(--s4);display:block}
  .blog-grid .card--txt{min-height:130px}

  /* ── Scroll reveal ──────────────────────────────────────── */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .reveal.visible{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
  }

  /* ── Responsive breakpoints ─────────────────────────────── */
  @media(min-width:640px){
    .nl__form{flex-direction:row}
    .book-blk{flex-direction:row;text-align:left;align-items:center}
    .book-cover{width:min(180px,30%)}
  }
  @media(min-width:768px){
    :root{--nav:68px}
    .nav__links{display:flex}
    .nav__ham{display:none}
    .hero{
      padding-block:var(--s8);
      min-height:calc(100svh - var(--nav));
      justify-content:center;
    }
    .hero__inner{flex-direction:row;text-align:left;justify-content:center;gap:var(--s7)}
    .hero__img{width:min(340px,40%);flex-shrink:0}
    .hero__tags{justify-content:flex-start}
    .hero__btns{justify-content:flex-start}
    .grid--2{grid-template-columns:1fr 1fr}
    .grid--3{grid-template-columns:repeat(3,1fr)}
    .strip{grid-template-columns:repeat(3,1fr)}
    .ft__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
    .stats{grid-template-columns:repeat(3,1fr)}
    .blog-grid{columns:3}
  }
  @media(min-width:1024px){
    .two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
  }

  /* ── Container queries — card content adapts to card width ─ */
  /* These fire based on each .card element's own inline size,   */
  /* not the viewport — correct when cards live in variable grids */
  @container (min-width:360px) {
    .card--img .card__h { font-size:var(--t-lg) }
  }
  @container (min-width:400px) {
    .card--txt .card__h { font-size:var(--t-xl) }
  }

} /* end @layer utilities */

/* ============================================================
   OVERRIDES — per-site customisation
   Anything here wins over all framework layers automatically.
   Add site-specific tokens, component tweaks, or one-off rules.
   ============================================================ */
@layer overrides {
  /* Per-site customisation goes here.
     Anything in this layer automatically wins over all framework layers.
     Override tokens, tweak components, add site-specific one-offs. */
}
/* ============================================================
   westernston.com — site.css
   Monochromatic greyscale · Light default · Dark toggle
   No hue anywhere. Typography and weight carry all hierarchy.
   ============================================================ */

/* ── @property overrides — re-register with light initial values ── */
/* Ensures transitions work correctly when light is the default      */
@property --bg   { syntax:'<color>'; inherits:true; initial-value:oklch(99%   0 0) }
@property --sur  { syntax:'<color>'; inherits:true; initial-value:oklch(96%   0 0) }
@property --sur2 { syntax:'<color>'; inherits:true; initial-value:oklch(92%   0 0) }
@property --bdr  { syntax:'<color>'; inherits:true; initial-value:oklch(85%   0 0) }
@property --bdr2 { syntax:'<color>'; inherits:true; initial-value:oklch(76%   0 0) }
@property --hi   { syntax:'<color>'; inherits:true; initial-value:oklch(10%   0 0) }
@property --tx   { syntax:'<color>'; inherits:true; initial-value:oklch(25%   0 0) }
@property --tx2  { syntax:'<color>'; inherits:true; initial-value:oklch(45%   0 0) }
@property --tx3  { syntax:'<color>'; inherits:true; initial-value:oklch(52%   0 0) }
@property --ac   { syntax:'<color>'; inherits:true; initial-value:oklch(12%   0 0) }

@layer overrides {

  /* ── Light palette (default) ─────────────────────────────── */
  :root {
    color-scheme: light dark;

    --_gray-950:  oklch(99%   0 0);   /* page background — pure white      */
    --_gray-900:  oklch(96%   0 0);   /* card / nav surface                */
    --_gray-850:  oklch(92%   0 0);   /* secondary surface, hover          */
    --_gray-800:  oklch(85%   0 0);   /* borders, dividers                 */
    --_gray-750:  oklch(76%   0 0);   /* secondary borders                 */

    --_warm-100:  oklch(10%   0 0);   /* headings — near black             */
    --_warm-300:  oklch(25%   0 0);   /* body text                         */
    --_warm-500:  oklch(45%   0 0);   /* secondary text                    */
    --_warm-600:  oklch(52%   0 0);   /* muted — 4.6:1 on white ✓ WCAG AA */

    /* Accent = near-black — CTAs, tags, active states */
    --_amber-400: oklch(12%   0 0);
  }

  /* ── Dark palette (toggle) ───────────────────────────────── */
  [data-theme="dark"] {
    color-scheme: dark light;

    --_gray-950:  oklch(10%   0 0);
    --_gray-900:  oklch(15%   0 0);
    --_gray-850:  oklch(20%   0 0);
    --_gray-800:  oklch(27%   0 0);
    --_gray-750:  oklch(35%   0 0);

    --_warm-100:  oklch(97%   0 0);   /* near white headings               */
    --_warm-300:  oklch(85%   0 0);
    --_warm-500:  oklch(68%   0 0);
    --_warm-600:  oklch(58%   0 0);   /* muted — 4.8:1 on dark bg ✓       */

    /* Accent = near-white in dark mode */
    --_amber-400: oklch(90%   0 0);
  }

  /* ── Nav backgrounds ─────────────────────────────────────── */
  .nav                  { background: rgba(255,255,255,.96) }
  [data-theme="dark"] .nav { background: rgba(14,14,14,.94) }
  [data-theme="light"] .nav { background: rgba(255,255,255,.96) }

  /* ── Buttons ─────────────────────────────────────────────── */
  .btn.btn--p {
    background: var(--hi);
    color: var(--bg);
    &:hover { background: var(--tx); color: var(--bg) }
  }
  .btn.btn--g {
    border-color: var(--bdr2);
    color: var(--tx2);
    &:hover { border-color: var(--hi); color: var(--hi) }
  }

  /* ── Nav CTA pill ────────────────────────────────────────── */
  .nav__cta {
    background: var(--hi);
    color: var(--bg);
    &:hover { background: var(--tx); color: var(--bg) }
  }

  /* ── Card hovers — no amber, greyscale depth only ────────── */
  .card:not(.card--img):not(.card--feat):hover {
    border-color: var(--bdr2);
    box-shadow: 0 0 0 1px var(--bdr2), 0 8px 32px rgba(0,0,0,.06);
  }
  /* Keep heading readable in light mode — base layer sets color:#fff on hover */
  .card:not(.card--img):not(.card--feat):hover .card__h {
    color: var(--hi);
  }
  [data-theme="dark"] .card:not(.card--img):not(.card--feat):hover .card__h {
    color: var(--hi);  /* near-white in dark, stays readable */
  }
  [data-theme="dark"] .card:not(.card--img):not(.card--feat):hover {
    box-shadow: 0 0 0 1px var(--bdr2), 0 8px 32px rgba(0,0,0,.4);
  }
  .card.card--img:hover,
  .card.card--feat:hover {
    box-shadow: 0 0 0 2px var(--bdr2), 0 24px 60px rgba(0,0,0,.10);
  }
  [data-theme="dark"] .card.card--img:hover,
  [data-theme="dark"] .card.card--feat:hover {
    box-shadow: 0 0 0 2px var(--bdr2), 0 24px 60px rgba(0,0,0,.5);
  }

  /* ── Accent line — greyscale ─────────────────────────────── */
  .hr-ac { background: linear-gradient(90deg, var(--bdr2), transparent) }

  /* ── Focus ring ──────────────────────────────────────────── */
  :focus-visible { outline-color: var(--hi) }

  /* ── Form success ────────────────────────────────────────── */
  .fsuc {
    background: var(--sur2);
    border-color: var(--bdr2);
    color: var(--tx);
  }

  /* ── Prose links ─────────────────────────────────────────── */
  .prose a {
    color: var(--tx);
    border-bottom-color: var(--bdr2);
    &:hover { color: var(--hi); border-bottom-color: var(--hi) }
  }

  /* ── Prose & callout accent borders ─────────────────────── */
  .prose blockquote  { border-left-color: var(--bdr2) }
  .prose h4          { border-left-color: var(--bdr2) }
  .callout           { border-left-color: var(--bdr2) }

  /* ── Stat value — heading colour not amber ───────────────── */
  .stat__v { color: var(--hi) }

  /* ── Art signoff ─────────────────────────────────────────── */
  .art-signoff { color: var(--tx2) }

  /* ── Video thumbnail (hero) ──────────────────────────────── */
  .vid-thumb {
    position: relative;
    display: block;
    width: 100%;
    max-width: 720px;
    margin: var(--s4) auto 0;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: var(--r);
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
    &:hover { box-shadow: 0 16px 60px rgba(0,0,0,.28); transform: translateY(-2px); }
    & img { display: block; width: 100%; height: auto; opacity: .88; transition: opacity var(--dur) var(--ease); }
    &:hover img { opacity: 1; }
  }
  .vid-thumb__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
    pointer-events: none;
  }

  /* ── Footer video cards ───────────────────────────────────── */
  .ft__vids {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s4);
    padding: var(--s6) 0;
    border-bottom: 1px solid var(--bdr);
    margin-bottom: var(--s6);
  }
  .vid-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: none;
    padding: 0;
    cursor: pointer;
    background: none;
    text-align: left;
    border-radius: var(--r);
    overflow: hidden;
    transition: opacity var(--dur) var(--ease);
    &:hover { opacity: .85; }
    & img { display: block; width: 100%; height: auto; border-radius: var(--r); }
  }
  .vid-card__play {
    position: absolute;
    top: calc(50% - 1.5em);
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2.5rem;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
    pointer-events: none;
  }
  .vid-card__title {
    display: block;
    margin-top: var(--s2);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--tx2);
    line-height: 1.4;
  }

  /* ── Video modal (native <dialog>) ───────────────────────── */
  #vid-modal {
    /* Override framework resets — dialog must be fixed + centred */
    position: fixed;
    inset: 0;
    margin: auto;
    border: none;
    border-radius: var(--r);
    padding: 0;
    background: #000;
    max-width: min(900px, 96vw);
    width: 100%;
    height: fit-content;
    box-shadow: 0 32px 80px rgba(0,0,0,.7);
    overflow: visible;
    &::backdrop { background: rgba(0,0,0,.85); backdrop-filter: blur(4px); }
  }
  .vid-modal__wrap {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
    width: 100%;
  }
  #vid-modal__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--r);
  }
  .vid-modal__close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: var(--s1);
    opacity: .8;
    &:hover { opacity: 1; }
  }

  /* ── Business Insights — editorial masonry ───────────────── */
  .insight-feat {
    padding: var(--s6) 0;
    border-top: 2px solid var(--hi);
    border-bottom: 1px solid var(--bdr);
    margin-bottom: var(--s7);
    position: relative;
    overflow: hidden;
  }
  .insight-feat::before {
    content: '\201C';
    position: absolute;
    top: -.1em;
    right: -.05em;
    font-size: clamp(7rem, 14vw, 11rem);
    line-height: 1;
    color: var(--bdr);
    font-family: 'DMSerif', serif;
    pointer-events: none;
    user-select: none;
  }
  .insight-feat__lbl {
    display: block;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tx3);
    margin-bottom: var(--s3);
  }
  .insight-feat__q {
    font-size: var(--t-lg);
    line-height: 1.55;
    color: var(--tx);
    font-weight: 500;
    max-width: 72ch;
  }

  .insight-masonry {
    columns: 2;
    column-gap: var(--s6);
  }
  @media (max-width: 600px) {
    .insight-masonry { columns: 1; }
  }
  .insight-item {
    break-inside: avoid;
    padding: var(--s4) 0;
    border-top: 1px solid var(--bdr);
  }
  .insight-lbl {
    display: block;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tx2);
    margin-bottom: var(--s2);
  }
  .insight-item p {
    font-size: var(--t-sm);
    color: var(--tx);
    line-height: 1.65;
  }

  /* ── Show-more button ────────────────────────────────────── */
  .show-more-btn {
    display: block;
    margin: var(--s5) auto 0;
    background: none;
    border: 1px solid var(--bdr2);
    border-radius: var(--r);
    padding: var(--s2) var(--s5);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tx2);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
    &:hover { border-color: var(--hi); color: var(--hi) }
  }

}