/* ==========================================================================
   RAY MANCINI - Official Website
   Design system synthesised from Rm-D wireframe + ART / BOOKS / PODCAST /
   COLLECTIVE / TxP page designs: luxury near-black, antique gold, ivory serif.
   ========================================================================== */

:root{
  --black:#0a0908;
  --charcoal:#141110;
  --charcoal-2:#1c1815;
  --charcoal-3:#221c18;
  --gold:#c9a35c;
  --gold-bright:#e6c883;
  --gold-deep:#8b6f47;
  --gold-glow:rgba(201,163,92,0.14);
  --red:#b4222c;
  --red-bright:#d6303b;
  --ivory:#f2ede4;
  --ivory-dim:#c9c2b4;
  --grey:#8b8478;
  --line:rgba(242,237,228,0.09);
  --line-strong:rgba(242,237,228,0.16);
  --line-gold:rgba(201,163,92,0.35);
  --ff-display:'Fraunces',Georgia,'Times New Roman',serif;
  --ff-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --ff-mono:'JetBrains Mono','Courier New',monospace;
  --ease:cubic-bezier(.22,.61,.21,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  /* The header is fixed, so an in-page jump - books.html#zen and the other
     dropdown anchors - otherwise parks its target underneath the bar. This is
     the scrolled bar's height (10 + 50 + 10) plus a little air. */
  scroll-padding-top:90px;
}
body{
  background:var(--black);
  color:var(--ivory);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--black);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* custom scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--black);}
::-webkit-scrollbar-thumb{background:#2e2822;border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold-deep);}

.wrap{max-width:1240px;margin:0 auto;padding:0 40px;}
@media(max-width:640px){.wrap{padding:0 22px;}}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--ff-mono);
  font-size:11px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:'';width:34px;height:1px;background:var(--gold);flex-shrink:0;}
.eyebrow.center{justify-content:center;}
.eyebrow.center::after{content:'';width:34px;height:1px;background:var(--gold);flex-shrink:0;}
.eyebrow.red{color:var(--red-bright);}
.eyebrow.red::before,.eyebrow.red::after{background:var(--red-bright);}

.section-title{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(30px,4.2vw,52px);
  line-height:1.1;
  letter-spacing:-0.01em;
  margin-top:20px;
}
.section-title em{font-style:italic;font-weight:300;color:var(--gold);}
.section-title em.red{color:var(--red-bright);}
.section-title .x{color:var(--gold);font-weight:300;}

.lead{color:var(--ivory-dim);font-size:clamp(16px,1.8vw,19px);margin-top:22px;max-width:660px;}
.section-head{max-width:720px;margin-bottom:64px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center .lead{margin-left:auto;margin-right:auto;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:16px 30px;
  border-radius:2px;
  cursor:pointer;
  transition:all .3s var(--ease);
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn .arr{transition:transform .3s var(--ease);}
.btn:hover .arr{transform:translateX(5px);}
.btn-gold{background:var(--gold);color:#141008;border-color:var(--gold);font-weight:600;}
.btn-gold:hover{background:var(--gold-bright);border-color:var(--gold-bright);transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(201,163,92,0.45);}
.btn-outline{border-color:var(--line-gold);color:var(--gold);}
.btn-outline:hover{background:var(--gold-glow);border-color:var(--gold);transform:translateY(-2px);}
.btn-ghost{border-color:var(--line-strong);color:var(--ivory-dim);}
.btn-ghost:hover{border-color:var(--ivory-dim);color:var(--ivory);}
.btn-red{background:var(--red);color:var(--ivory);border-color:var(--red);}
.btn-red:hover{background:var(--red-bright);border-color:var(--red-bright);transform:translateY(-2px);}
.btn-red-outline{border-color:rgba(214,48,59,0.5);color:var(--red-bright);}
.btn-red-outline:hover{background:rgba(180,34,44,0.1);border-color:var(--red-bright);}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;}

/* text link with underline sweep */
.tlink{
  font-family:var(--ff-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold);display:inline-flex;align-items:center;gap:10px;
  background:none;border:none;cursor:pointer;padding:0;
}
.tlink::after{content:'';display:block;width:100%;height:1px;background:var(--gold);transform:scaleX(.35);transform-origin:left;transition:transform .35s var(--ease);opacity:.6;}
.tlink:hover::after{transform:scaleX(1);opacity:1;}

/* ---------- header ---------- */
/* Nothing on this element may set backdrop-filter, filter, transform or a
   will-change naming one: each of those makes it the containing block for the
   fixed drawer nested inside it, which is what once opened the mobile menu a
   few pixels tall. The bar's painted surface lives on ::before instead, so the
   rule is easy to keep. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  transition:padding .4s var(--ease);
  padding:18px 0;
}
.site-header.scrolled{padding:10px 0;}
/* The visible bar. A position:fixed element that carries a backdrop-filter is
   composited against a snapshot of the scrolling contents, and at the ends of
   the document - exactly where mobile browsers rubber-band past the content and
   re-show their toolbar - that snapshot region falls outside the scrolled area,
   so the bar painted blank or half-drawn until the next scroll invalidated the
   layer. Hanging the blur on a static child of the fixed element keeps it out
   of that path. Cross-fading opacity, which the compositor animates on its own,
   also means the bar is never re-rastered mid-scroll the way transitioning
   background and border-color forced it to be. */
.site-header::before{
  content:'';
  position:absolute;inset:0;z-index:-1;
  background:rgba(10,9,8,0.9);
  border-bottom:1px solid var(--line);
  opacity:0;
  transition:opacity .4s var(--ease);
  pointer-events:none;
}
/* The blur is attached only once the bar is actually on screen, so an unscrolled
   page carries no backdrop layer at all. */
.site-header.scrolled::before{
  opacity:1;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
/* Behind a full-screen drawer the blur samples nothing anyone can see, and a
   live backdrop under a scrolling overlay is the expensive case on mobile. */
.site-header.nav-open::before{backdrop-filter:none;-webkit-backdrop-filter:none;}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;}
.brand{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.brand img{height:62px;width:auto;transition:height .3s var(--ease);}
.site-header.scrolled .brand img{height:50px;}
.brand .brand-word{
  font-family:var(--ff-display);font-weight:500;font-size:14px;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--ivory);line-height:1;white-space:nowrap;
}
.brand .brand-word span{color:var(--gold);}
@media(max-width:500px){.brand .brand-word{display:none;}}

.main-nav{display:flex;align-items:center;gap:4px;}
.main-nav > li{position:relative;}
/* Drawer-only Contact item. On desktop the header CTA covers this, so it stays
   out of the way; the mobile block below turns it on. */
.main-nav > li.nav-cta{display:none;}
.main-nav > li > a{
  display:flex;align-items:center;gap:7px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--ivory-dim);
  padding:12px 13px;transition:color .25s var(--ease);
}
.main-nav > li > a:hover,.main-nav > li.active > a{color:var(--gold);}
.main-nav > li > a .carets{font-size:8px;color:var(--grey);transition:transform .3s var(--ease);}
.main-nav > li:hover > a .carets{transform:rotate(180deg);color:var(--gold);}
.main-nav > li.txp-nav > a{color:var(--red-bright);}
.main-nav > li.txp-nav > a:hover{color:var(--red-bright);filter:brightness(1.2);}

.drop{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,8px);
  min-width:250px;
  background:rgba(16,13,11,0.97);
  backdrop-filter:blur(16px);
  border:1px solid var(--line-strong);
  border-radius:3px;
  padding:10px;
  opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  box-shadow:0 30px 60px -18px rgba(0,0,0,0.8);
}
.main-nav > li:hover .drop,.main-nav > li.drop-open .drop{opacity:1;visibility:visible;transform:translate(-50%,0);}
.drop::before{content:'';position:absolute;top:-7px;left:0;right:0;height:7px;}
.drop a{
  display:flex;align-items:baseline;gap:12px;
  padding:11px 16px;border-radius:2px;
  font-size:13px;color:var(--ivory-dim);
  transition:all .2s var(--ease);
  white-space:nowrap;
}
.drop a:hover{background:var(--gold-glow);color:var(--gold);transform:translateX(3px);}
.drop a .d-num{font-family:var(--ff-mono);font-size:9px;color:var(--grey);letter-spacing:0.1em;}
.drop a:hover .d-num{color:var(--gold);}
.drop .drop-div{height:1px;background:var(--line);margin:6px 10px;}

.header-cta{flex-shrink:0;}
.header-cta .btn{padding:12px 22px;font-size:10.5px;}

/* nav burger */
.burger{
  display:none;flex-direction:column;gap:5px;position:relative;
  background:none;border:none;cursor:pointer;padding:10px;z-index:300;
}
/* The button itself is 35px tall, under the 44px touch guideline. This overlay
   enlarges the tappable area without occupying any layout space, so nothing on
   the page moves and the icon is unchanged. */
.burger::after{content:'';position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;}
.burger span{display:block;width:26px;height:1.5px;background:var(--ivory);transition:all .35s var(--ease);}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

@media(max-width:1100px){
  .main-nav{
    /* The drawer had no z-index of its own and relied on the header's stacking
       context. Stated explicitly it always covers page content, and stays below
       the burger (300) so the close button remains on top. */
    z-index:250;
    /* Deliberately NOT inset:0. `bottom:0` is the one edge whose meaning changes
       if a browser decides the header - rather than the viewport - is this
       drawer's containing block, and it collapses the whole menu to the height
       of the header bar: a ~100px block with the page showing through beneath
       it. Safari does exactly that once the header has ever carried a
       backdrop-filter, and it does not re-resolve the relationship when the
       filter is later removed, which is why clearing the filter on open and
       forcing a reflow never reliably fixed it.
       The filter is gone from the header for good now, but the height is stated
       in viewport units as well so the drawer covers the screen whether or not
       any given engine gets the containing block right. top/left/right are safe
       either way: the header is itself fixed at top:0/left:0/right:0 with no
       border or margin, so its padding box starts exactly at the viewport
       origin and those three edges resolve to the same place under either
       interpretation. */
    position:fixed;top:0;left:0;right:0;
    height:100vh;   /* floor for engines without dvh */
    height:100dvh;  /* the actually-visible height, as mobile toolbars come and go */
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    /* No backdrop-filter here either: the background is 98.5% opaque so the blur
       was never visible, yet it kept a full-viewport composited backdrop alive
       on every page - parked off-screen, alongside the fixed header, the whole
       time. That is the neighbouring layer that made the header's own
       compositing fragile on phones. */
    background:rgba(10,9,8,0.985);
    padding:120px 40px 40px;gap:2px;
    transform:translateX(100%);
    /* Genuinely hidden while closed, not merely translated out of view, so it
       leaves the paint and the tab order. visibility flips immediately on open
       and only after the slide-out finishes on close. */
    visibility:hidden;
    transition:transform .45s var(--ease),visibility 0s linear .45s;
    overflow-y:auto;
    /* Scrolling to either end of the drawer must not chain through to the page
       behind it; body{overflow:hidden} alone does not stop that on iOS. */
    overscroll-behavior:contain;
  }
  .main-nav.open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .45s var(--ease),visibility 0s;
  }

  /* Contact is the one destination the drawer has no route to, since the header
     CTA is hidden at this width. It is a real list item rather than a pinned
     overlay, so it slides in with the drawer, scrolls with the list and reveals
     itself on the same stagger as everything else. */
  .main-nav > li.nav-cta{display:block;margin-bottom:20px;}
  .main-nav > li.nav-cta > a{
    justify-content:center;gap:10px;
    border:1px solid var(--line-gold);border-radius:2px;
    color:var(--gold);background:var(--gold-glow);
    font-family:var(--ff-mono);font-size:11.5px;letter-spacing:0.18em;
    text-transform:uppercase;padding:18px 24px;
  }
  .main-nav > li.nav-cta > a .arr{transition:transform .3s var(--ease);}
  .main-nav > li{width:100%;}
  .main-nav > li > a{font-size:14px;padding:16px 4px;border-bottom:1px solid var(--line);justify-content:space-between;width:100%;}
  .main-nav > li:hover > a .carets{transform:none;}
  .drop{
    position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;
    background:transparent;border:none;border-radius:0;padding:0 0 8px 16px;
    display:none;min-width:0;backdrop-filter:none;
  }
  /* The desktop rule that opens a dropdown also centres it with
     translate(-50%,0), and it outranks the .drop reset above (media queries add
     no specificity). Left alone it drags the submenu half its width off-screen
     inside the drawer, so the transform is cancelled at matching specificity. */
  .main-nav > li:hover .drop,
  .main-nav > li.drop-open .drop{transform:none;}
  .main-nav > li.drop-open .drop{display:block;}
  /* visibility is inherited, and the rule above re-asserts visible on an open
     submenu, so a drawer closed while a submenu was expanded would leave that
     submenu focusable off-screen. Matched specificity, later in source. */
  .main-nav:not(.open) > li > .drop{visibility:hidden;}
  .header-cta{display:none;}
  .burger{display:flex;}
}
@media(max-width:1100px) and (min-width:640px){
  .main-nav{width:420px;right:0;left:auto;border-left:1px solid var(--line);}
}

/* ---------- page hero (full-bleed media) ---------- */
.page-hero{
  position:relative;
  min-height:72vh;
  display:flex;align-items:flex-end;
  padding:180px 0 90px;
  overflow:hidden;
  isolation:isolate;
}
.page-hero .bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
}
.page-hero .scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top, rgba(10,9,8,0.96) 0%, rgba(10,9,8,0.45) 45%, rgba(10,9,8,0.55) 100%);
}
.page-hero .scrim.heavy{
  background:
    linear-gradient(to top, rgba(10,9,8,0.97) 0%, rgba(10,9,8,0.62) 50%, rgba(10,9,8,0.72) 100%);
}
.page-hero h1{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(44px,7.5vw,104px);
  line-height:1.02;
  letter-spacing:0.01em;
}
.page-hero h1 em{font-style:italic;font-weight:300;color:var(--gold);}
.page-hero .sub{color:var(--ivory-dim);font-size:clamp(15px,1.9vw,19px);max-width:640px;margin-top:22px;}
.page-hero .btn-row{margin-top:38px;}
.page-hero .wrap{position:relative;z-index:2;}
.page-hero.has-monogram{
  background:
    radial-gradient(ellipse 65% 55% at 85% 50%, rgba(180,34,44,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 55% 55% at 15% 30%, rgba(201,163,92,0.07) 0%, transparent 60%),
    var(--black);
}
.hero-monogram{
  position:absolute;
  right:clamp(15px, 7vw, 110px);
  top:50%;
  transform:translateY(-50%);
  width:clamp(190px, 26vw, 350px);
  height:clamp(190px, 26vw, 350px);
  max-height:360px;
  pointer-events:none;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-monogram img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
  opacity:0.26;
  filter:drop-shadow(0 0 50px rgba(180,34,44,0.3)) drop-shadow(0 0 25px rgba(201,163,92,0.2));
  mix-blend-mode:screen;
  mask-image:radial-gradient(circle at center, black 55%, transparent 96%);
  -webkit-mask-image:radial-gradient(circle at center, black 55%, transparent 96%);
}
@media(max-width:768px){
  .hero-monogram{
    right:10px;
    width:180px;
    height:180px;
    opacity:0.18;
  }
}
.breadcrumb{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--grey);margin-bottom:22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.breadcrumb a{color:var(--grey);transition:color .2s;}
.breadcrumb a:hover{color:var(--gold);}
.breadcrumb .sep{color:var(--gold-deep);}

/* ---------- sections ---------- */
.section{position:relative;padding:120px 0;}
@media(max-width:768px){.section{padding:80px 0;}}
.section.tight{padding:80px 0;}
.section.dark-2{background:var(--charcoal);}
.section.dark-3{background:var(--charcoal-2);}
.section.gold-tint{
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, var(--gold-glow), transparent 65%),
    var(--charcoal);
}
.section.red-tint{
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(124,28,34,0.16), transparent 65%),
    var(--black);
}
.divider{height:1px;background:var(--line);width:100%;}

/* stat rows */
.stat-row{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stat{
  font-family:var(--ff-mono);text-align:center;
  padding:26px 34px;border-right:1px solid var(--line);flex:1;min-width:140px;
}
.stat:last-child{border-right:none;}
.stat .num{display:block;font-size:clamp(24px,3vw,34px);color:var(--gold);font-weight:600;}
.stat .lbl{display:block;font-size:9.5px;letter-spacing:0.16em;color:var(--grey);text-transform:uppercase;margin-top:6px;}
.stat-row.red .stat .num{color:var(--red-bright);}

/* chips */
.chip{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  border:1px solid var(--line-gold);color:var(--gold);
  padding:9px 18px;border-radius:20px;
}
.chip .blip{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:blip 1.8s ease-in-out infinite;}
.chip.red{border-color:rgba(214,48,59,0.5);color:var(--red-bright);}
.chip.red .blip{background:var(--red-bright);}
@keyframes blip{0%,100%{opacity:1;}50%{opacity:0.25;}}

/* ---------- cards ---------- */
.card-grid{display:grid;gap:26px;}
.card-grid.c2{grid-template-columns:repeat(2,1fr);}
.card-grid.c3{grid-template-columns:repeat(3,1fr);}
.card-grid.c4{grid-template-columns:repeat(4,1fr);}
@media(max-width:960px){.card-grid.c3,.card-grid.c4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.card-grid.c2,.card-grid.c3,.card-grid.c4{grid-template-columns:1fr;}}

.card{
  background:var(--charcoal-2);
  border:1px solid var(--line);
  border-radius:3px;
  padding:36px 32px;
  transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
  position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-6px);border-color:var(--line-gold);background:var(--charcoal-3);}
.card .c-tag{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);}
.card h3{font-family:var(--ff-display);font-weight:500;font-size:21px;line-height:1.3;margin:14px 0 12px;}
.card p{font-size:14px;color:var(--grey);line-height:1.65;}
.card .c-foot{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}

/* media card (updates / videos / episodes) */
.mcard{
  background:var(--charcoal-2);border:1px solid var(--line);border-radius:3px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.mcard:hover{transform:translateY(-6px);border-color:var(--line-gold);}
.mcard .m-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--charcoal);}
.mcard .m-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.mcard:hover .m-media img{transform:scale(1.05);}
.mcard .m-tag{
  position:absolute;top:14px;left:14px;
  font-family:var(--ff-mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;
  background:rgba(10,9,8,0.82);backdrop-filter:blur(6px);
  color:var(--gold);border:1px solid var(--line-gold);
  padding:6px 12px;border-radius:16px;
}
.mcard .m-body{padding:26px 26px 30px;display:flex;flex-direction:column;gap:10px;flex:1;}
.mcard .m-date{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:0.16em;color:var(--grey);text-transform:uppercase;}
.mcard h3{font-family:var(--ff-display);font-weight:500;font-size:20px;line-height:1.35;}
.mcard p{font-size:13.5px;color:var(--grey);line-height:1.6;}
.mcard .m-foot{margin-top:auto;padding-top:18px;}

/* ---------- pull quote ---------- */
.pullquote{
  font-family:var(--ff-display);font-style:italic;font-weight:300;
  font-size:clamp(22px,2.8vw,32px);line-height:1.45;color:var(--ivory);
  border-left:2px solid var(--gold);padding-left:28px;
}
.pullquote .accent{color:var(--gold);font-style:normal;}

/* ---------- prose (about page) ---------- */
.prose{max-width:760px;}
.prose p{color:var(--ivory-dim);font-size:16.5px;margin-bottom:22px;}
.prose h2{
  font-family:var(--ff-display);font-weight:400;font-size:clamp(26px,3.2vw,38px);
  line-height:1.2;margin:64px 0 24px;color:var(--ivory);
}
.prose h2 em{font-style:italic;color:var(--gold);font-weight:300;}
.prose .dropcap::first-letter{
  font-family:var(--ff-display);float:left;font-size:76px;line-height:0.85;
  padding:10px 14px 0 0;color:var(--gold);font-weight:300;
}
.prose strong{color:var(--ivory);font-weight:600;}
.prose ul{margin:0 0 22px 4px;display:flex;flex-direction:column;gap:10px;}
.prose ul li{color:var(--ivory-dim);font-size:16px;padding-left:22px;position:relative;}
.prose ul li::before{content:'-';position:absolute;left:0;color:var(--gold);}

/* equation feature */
.equation{
  font-family:var(--ff-display);
  font-size:clamp(52px,9vw,120px);
  font-weight:300;letter-spacing:0.04em;
  color:var(--gold);text-align:center;line-height:1;
  text-shadow:0 0 60px rgba(201,163,92,0.25);
}
.equation-label{
  text-align:center;font-family:var(--ff-mono);font-size:10.5px;
  letter-spacing:0.3em;text-transform:uppercase;color:var(--grey);margin-top:18px;
}

/* ---------- banner strip sections (home) ---------- */
.banner-strip{
  position:relative;isolation:isolate;overflow:hidden;
  padding:150px 0;
}
.banner-strip .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform 1.2s var(--ease);}
.banner-strip:hover .bg{transform:scale(1.04);}
.banner-strip .scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg, rgba(10,9,8,0.94) 0%, rgba(10,9,8,0.66) 48%, rgba(10,9,8,0.3) 100%);
}
.banner-strip .scrim.bottom{
  background:linear-gradient(to top, rgba(10,9,8,0.96) 0%, rgba(10,9,8,0.5) 55%, rgba(10,9,8,0.35) 100%);
}
.banner-strip h2{
  font-family:var(--ff-display);font-weight:400;
  font-size:clamp(38px,6vw,76px);line-height:1.04;
}
.banner-strip h2 em{font-style:italic;font-weight:300;color:var(--gold);}
.banner-strip .desc{color:var(--ivory-dim);max-width:520px;margin-top:20px;font-size:16px;}
.banner-strip .btn-row{margin-top:34px;}

/* ---------- footer ---------- */
footer.site-footer{
  border-top:1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 70% at 50% 110%, rgba(201,163,92,0.07), transparent 60%),
    var(--black);
  padding:90px 0 0;
}
.foot-top{display:flex;justify-content:space-between;gap:60px;flex-wrap:wrap;padding-bottom:70px;}
.foot-brand img{height:56px;width:auto;}
.foot-brand .foot-mono{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:0.26em;text-transform:uppercase;
  color:var(--grey);margin-top:20px;line-height:2.1;
}
.foot-cols{display:flex;gap:70px;flex-wrap:wrap;}
.foot-col h4{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:20px;font-weight:500;
}
.foot-col ul{display:flex;flex-direction:column;gap:12px;}
.foot-col a{font-size:13.5px;color:var(--ivory-dim);transition:color .2s,transform .2s;display:inline-block;}
.foot-col a:hover{color:var(--gold);transform:translateX(3px);}
.foot-bottom{
  border-top:1px solid var(--line);padding:28px 0;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.foot-bottom p{font-family:var(--ff-mono);font-size:10px;letter-spacing:0.1em;color:var(--grey);}
.foot-bottom .eq{color:var(--gold-deep);}
.socials{display:flex;gap:10px;}
.socials a{
  width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--ivory-dim);
  transition:all .25s var(--ease);
}
.socials a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px);}
.socials svg{width:15px;height:15px;}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal[data-delay="1"]{transition-delay:.12s;}
.reveal[data-delay="2"]{transition-delay:.24s;}
.reveal[data-delay="3"]{transition-delay:.36s;}

/* ---------- misc ---------- */
.center{text-align:center;}
.gold{color:var(--gold);}
.mono{font-family:var(--ff-mono);}
.spacer-40{height:40px;}
.spacer-80{height:80px;}

@media(prefers-reduced-motion:reduce){
  /* Delays have to go too, not just durations: the drawer defers its
     visibility flip until the slide-out ends, and a delay left standing would
     hold it in the tab order long after it stopped moving. */
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:0.01ms !important;transition-delay:0s !important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}