/* ==========================================================================
   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;}
/* <picture> wraps a few images for browsers without WebP. It is inline by
   default, which would make it the flex child instead of the img and shift
   the masthead; contents removes it from layout entirely. */
picture{display:contents;}
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;
  /* A <button> carries the browser's grey face and system text colour by
     default; an <a> does not. Both must look the same in this class. */
  background:transparent;
  color:inherit;
}
.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. */
/* ---------- announcement bar ---------- */
/* Sits above the fixed header, injected by sitewide.js on every page. The
   header's own `top` is pushed down to the bar's measured height only while
   it is present, so dismissing it collapses cleanly back to the normal
   top:0 header with nothing left reserving space. */
.announce-bar{
  position:fixed;top:0;left:0;right:0;z-index:300;
  background:linear-gradient(90deg,var(--charcoal-2),var(--charcoal-3));
  border-bottom:1px solid var(--line-gold);
}
.announce-bar .wrap{position:relative;display:flex;align-items:center;justify-content:center;padding:11px 46px;}
.announce-bar .a-link{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;text-align:center;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:0.03em;color:var(--ivory-dim);
  transition:color .2s var(--ease);
}
.announce-bar .a-link:hover{color:var(--ivory);}
.announce-bar .a-link .a-tag{
  background:var(--gold);color:#141008;font-weight:700;font-size:9px;
  letter-spacing:0.14em;text-transform:uppercase;padding:3px 10px;border-radius:20px;flex-shrink:0;
}
.announce-bar .a-link .a-arr{color:var(--gold);}
.announce-bar .a-close{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--grey);font-size:18px;line-height:1;cursor:pointer;
  transition:color .2s var(--ease);
}
.announce-bar .a-close:hover{color:var(--ivory);}
@media(max-width:640px){
  .announce-bar .wrap{padding:10px 42px 10px 14px;}
  .announce-bar .a-link{font-size:10px;gap:7px;}
}

body.has-announce .site-header{top:var(--announce-h,0px);}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  transition:padding .4s var(--ease),top .3s 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);}
/* Track order: a utility rather than a section, so a hairline sets it off
   from the pages and it sits a shade quieter until hovered. */
.main-nav > li.nav-track-item{margin-left:6px;padding-left:8px;border-left:1px solid var(--line-strong);}
.main-nav > li.nav-track-item > a{color:var(--grey);}
.main-nav > li.nav-track-item > a:hover{color:var(--gold);}
.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;display:flex;align-items:center;gap:10px;}
.header-cta .btn{padding:12px 18px;font-size:10.5px;}
.header-cta .btn-cal{border-color:var(--gold);background:var(--gold-glow);color:var(--gold);}
.header-cta .btn-cal:hover{background:var(--gold);color:#141008;}

/* 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:12px;}
  .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:16px 20px;
    cursor:pointer;
  }
  .main-nav > li.nav-cta.nav-cta-secondary > a{
    background:transparent;border-color:var(--line);color:var(--ivory-dim);
  }
  /* Track order sits under Contact as the third entry, in Contact's style.
     It is last in the markup (the desktop nav wants it there), so the
     drawer's flex order brings it up: Book Meeting, Contact, Track order. */
  .main-nav > li.nav-cta{order:-3;}
  .main-nav > li.nav-cta.nav-cta-secondary{order:-2;}
  .main-nav > li.nav-track-item{order:-1;margin:0 0 20px;padding-left:0;border-left:0;}
  .main-nav > li.nav-track-item > a{
    justify-content:center;gap:10px;
    border:1px solid var(--line);border-radius:2px;
    color:var(--ivory-dim);background:transparent;
    font-family:var(--ff-mono);font-size:11.5px;letter-spacing:0.18em;
    text-transform:uppercase;padding:16px 20px;
  }
  .main-nav > li.nav-track-item > a::after{content:'→';}
  .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;}

/* ---------- floating book meeting button ---------- */
.cal-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  background: rgba(16, 13, 11, 0.92);
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7), 0 0 20px rgba(201, 163, 92, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s var(--ease);
}
.cal-float:hover {
  background: var(--gold);
  color: #141008;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -10px rgba(201, 163, 92, 0.45);
}
.cal-float svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
@media(max-width: 640px) {
  .cal-float {
    bottom: 20px;
    right: auto;
    left: 20px;
    padding: 10px 15px;
    font-size: 10px;
  }
}

/* ---------- store: the purchase unit book-commerce.js builds ----------
   One column, one width: the edition row, the action row and the note all
   share it, so the unit reads as a single object under the cover. */
.buy-block{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:300px;}
.buy-formats{display:flex;border:1px solid var(--line-gold);border-radius:2px;overflow:hidden;}
.buy-fmt{
  flex:1;display:flex;justify-content:center;align-items:baseline;gap:10px;min-width:0;
  padding:9px 12px;background:transparent;border:0;border-right:1px solid var(--line-gold);
  color:var(--ivory-dim);cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);
}
.buy-fmt:last-child{border-right:0;}
.buy-fmt span{font-family:var(--ff-mono);font-size:8.5px;letter-spacing:0.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.buy-fmt b{font-family:var(--ff-mono);font-weight:500;font-size:12px;line-height:1;color:var(--ivory);}
.buy-fmt:hover{background:var(--gold-glow);}
.buy-fmt.is-on{background:var(--gold);color:#141008;}
.buy-fmt.is-on b{color:#141008;}
.buy-actions{display:flex;gap:8px;}
.buy-actions .btn-gold{flex:1;justify-content:center;padding:13px 16px;font-size:10.5px;letter-spacing:0.12em;gap:8px;margin:0;}
/* Add to cart: secondary, so an icon in a square the height of the button. */
.buy-add{
  flex:0 0 44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-gold);border-radius:2px;background:transparent;color:var(--gold);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.buy-add svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.buy-add:hover{background:var(--gold-glow);border-color:var(--gold);}
.buy-add.is-added{background:var(--gold);color:#141008;}
.buy-note{font-family:var(--ff-mono);font-size:8.5px;letter-spacing:0.08em;color:var(--grey);line-height:1.6;text-align:center;}
/* Read more, wherever it follows the unit: a link, not a second button. */
.buy-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);
}
.buy-more .arr{transition:transform .3s var(--ease);}
.buy-more:hover .arr{transform:translateX(4px);}
.book-col .buy-block{margin-top:26px;}
.book-col .buy-more{margin-top:18px;}

/* ---------- store: the cart button and drawer sitewide.js injects ---------- */
/* The header's square icon button. */
.hdr-icon{
  position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--line-gold);border-radius:2px;color:var(--gold);
  background:transparent;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease);
}
.hdr-icon:hover{background:var(--gold-glow);border-color:var(--gold);}
.hdr-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.cart-btn{margin-left:-14px;}   /* sits with the header buttons, not a full flex gap away */
.cart-btn .cart-badge{
  position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--gold);color:#141008;font-family:var(--ff-mono);font-size:10px;font-weight:600;line-height:18px;text-align:center;
}
.cart-btn .cart-badge[hidden]{display:none;}
/* Below the desktop nav the wrap holds brand, cart and burger under
   space-between, which would centre the cart. Pushed right so it sits with
   the burger, and slightly smaller to match the burger's visual weight. */
@media(max-width:1100px){
  .cart-btn{margin-left:auto;margin-right:-10px;width:40px;height:40px;}
  .cart-btn svg{width:17px;height:17px;}
  .cart-btn .cart-badge{top:-6px;right:-6px;min-width:16px;height:16px;line-height:16px;font-size:9px;}
}
@media(max-width:640px){
  .cart-btn{margin-right:-6px;}
}

.cart-backdrop{position:fixed;inset:0;background:rgba(10,9,8,0.6);z-index:400;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s;}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:401;
  background:var(--charcoal);border-left:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .4s var(--ease);
  height:100dvh;
}
body.cart-open .cart-backdrop{opacity:1;visibility:visible;transition-delay:0s;}
body.cart-open .cart-drawer{transform:none;}
body.cart-open{overflow:hidden;}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:26px 28px 18px;border-bottom:1px solid var(--line);}
.cart-head h2{font-family:var(--ff-mono);font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold);font-weight:500;}
.cart-head h2 span{color:var(--grey);margin-left:8px;}
.cart-close{background:none;border:0;color:var(--ivory-dim);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px;}
.cart-close:hover{color:var(--ivory);}
.cart-body{flex:1;overflow-y:auto;padding:6px 28px;}
.cart-line{display:grid;grid-template-columns:54px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);}
.cart-line img{width:54px;height:74px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,0.6));}
.cart-line .t{font-family:var(--ff-display);font-size:16px;line-height:1.25;}
.cart-line .f{font-family:var(--ff-mono);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);margin-top:4px;}
.cart-line .f em{color:var(--gold);font-style:normal;}
.cart-line .p{font-family:var(--ff-mono);font-size:13px;text-align:right;}
.cart-line .qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:2px;margin-top:10px;}
.cart-line .qty button{width:28px;height:28px;background:transparent;border:0;color:var(--gold);font-size:15px;cursor:pointer;line-height:1;}
.cart-line .qty button:hover{background:var(--gold-glow);}
.cart-line .qty output{min-width:26px;text-align:center;font-family:var(--ff-mono);font-size:12px;}
.cart-line .rm{display:block;margin:8px 0 0 auto;font-family:var(--ff-mono);font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--grey);background:none;border:0;cursor:pointer;}
.cart-line .rm:hover{color:#d6303b;}
.cart-empty{text-align:center;padding:60px 10px;color:var(--ivory-dim);}
.cart-empty p{margin-bottom:22px;}
.cart-foot{padding:20px 28px 28px;border-top:1px solid var(--line);background:var(--charcoal-2);}
.cart-sub{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.cart-sub span{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);}
.cart-sub b{font-family:var(--ff-display);font-size:24px;font-weight:400;}
.cart-note{font-family:var(--ff-mono);font-size:9px;letter-spacing:0.08em;color:var(--grey);margin-bottom:18px;}
.cart-foot .btn{width:100%;justify-content:center;}
.cart-foot .btn + .btn{margin-top:10px;}

/* ---------- store: the order status timeline (order-status.js) ---------- */
.os{list-style:none;margin:0;padding:0;}
.os-step{position:relative;display:grid;grid-template-columns:22px 1fr;gap:0 18px;padding-bottom:26px;}
.os-step:last-child{padding-bottom:0;}
/* The line between dots. */
.os-step::before{content:'';position:absolute;left:10px;top:22px;bottom:-4px;width:1px;background:var(--line-strong);}
.os-step:last-child::before{display:none;}
.os-step.done::before{background:var(--gold);}
.os-dot{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);background:var(--black);position:relative;z-index:1;margin-top:1px;}
.os-step.done .os-dot{background:var(--gold);border-color:var(--gold);}
.os-step.done .os-dot::after{content:'';position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid #141008;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);}
.os-step.now .os-dot{border-color:var(--gold);box-shadow:0 0 0 5px var(--gold-glow);}
.os-step.now .os-dot::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--gold);animation:os-pulse 1.8s ease-in-out infinite;}
@keyframes os-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.os-title{font-family:var(--ff-mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ivory-dim);display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding-top:3px;}
.os-step.now .os-title{color:var(--gold);}
.os-step.todo .os-title{color:var(--grey);}
.os-title time{font-size:9.5px;letter-spacing:0.1em;color:var(--grey);text-transform:none;white-space:nowrap;}
.os-body p{color:var(--ivory-dim);font-size:15px;line-height:1.6;margin-top:8px;}
.os-track{margin-top:14px;padding:16px 18px;border:1px solid var(--line-gold);border-radius:2px;background:var(--gold-glow);}
.os-track .os-lbl{display:block;font-family:var(--ff-mono);font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--grey);margin-bottom:6px;}
.os-track code{display:block;font-family:var(--ff-mono);font-size:17px;letter-spacing:0.08em;color:var(--ivory);user-select:all;}
.os-track a{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--ff-mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);}
.os-track a .arr{transition:transform .3s var(--ease);}
.os-track a:hover .arr{transform:translateX(4px);}
.os-other .os-title{color:var(--gold);}
.os-other p{color:var(--ivory-dim);font-size:15px;line-height:1.6;margin-top:10px;}
.os-other a{color:var(--gold);}

@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;}
}