/* ============================================================
   DJ MATTY F EVENTS — DESIGN SYSTEM
   This is the same system as the djmattyf.com landing page:
   Display face: Anton, all-caps, tight leading
   Body face:    Helvetica Neue / Arial
   Palette:      pure black + pure white, no third hue
   Extended here for a multi-page site: real navigation,
   page mastheads, FAQ, blog index.
   ============================================================ */
:root{
  --ink:#000;
  --paper:#fff;
  --paper-dim:rgba(255,255,255,.66);
  --ink-dim:rgba(0,0,0,.62);
  --rule:rgba(255,255,255,.16);
  --rule-ink:rgba(0,0,0,.14);
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;

  --step--1:clamp(.72rem,.70rem + .1vw,.80rem);
  --step-0: clamp(.95rem,.90rem + .25vw,1.05rem);
  --step-1: clamp(1.15rem,1.05rem + .5vw,1.35rem);
  --step-2: clamp(1.6rem,1.35rem + 1.2vw,2.2rem);
  --step-3: clamp(2.1rem,1.6rem + 2.4vw,3.4rem);
  --step-4: clamp(2.6rem,1.9rem + 3.6vw,5.2rem);

  --gutter:clamp(1.25rem,5vw,3rem);
  --section:clamp(3.5rem,10vw,7rem);
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  line-height:.94;letter-spacing:.005em;margin:0;
}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section);scroll-margin-top:80px}
.section--tight{padding-block:clamp(2.5rem,6vw,4rem)}
.ruled{border-top:1px solid var(--rule)}
.paper{background:var(--paper);color:var(--ink)}
.paper .eyebrow{color:var(--ink-dim)}
.paper.ruled{border-top-color:var(--rule-ink)}
.eyebrow{
  font-family:var(--body);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.22em;color:var(--paper-dim);margin:0 0 1rem;font-weight:700;
}
.lede{font-size:var(--step-1);line-height:1.5;max-width:56ch}
.muted{color:var(--paper-dim)}
.paper .muted{color:var(--ink-dim)}
h2.h-lg{font-size:var(--step-3)}
h3.h-md{font-size:var(--step-2)}
.measure{max-width:62ch}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:56px;padding:1rem 1.75rem;border:2px solid var(--paper);
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-weight:700;font-size:var(--step--1);
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;transition:transform .15s ease,background .2s ease,color .2s ease;
  width:100%;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--paper)}
.btn--ghost:hover{background:var(--paper);color:var(--ink)}
.paper .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.paper .btn--ghost{background:transparent;color:var(--ink)}
.paper .btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn-row{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}
@media(min-width:620px){
  .btn{width:auto}
  .btn-row{flex-direction:row;flex-wrap:wrap}
}
.link-underline{
  display:inline-block;text-decoration:none;font-weight:700;
  font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:3px;margin-top:1.5rem;
}

/* ---------- Sticky header + navigation ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.6rem var(--gutter);
  background:transparent;transition:background .3s ease,box-shadow .3s ease;
  padding-top:max(.6rem,env(safe-area-inset-top));
}
.hdr.is-stuck{background:rgba(0,0,0,.92);backdrop-filter:blur(10px)}
.hdr__mark{display:block;text-decoration:none;line-height:0;flex:0 0 auto}
/* The logo file is white-on-solid-black. Over the hero video that would show
   as a black square, so `screen` drops the black and keeps the white mark. */
.hdr__mark img{height:54px;width:auto;mix-blend-mode:screen}
@media(min-width:760px){.hdr__mark img{height:66px}}
.hdr .btn{min-height:44px;padding:.6rem 1rem;font-size:.65rem;width:auto}

.hdr__nav{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.75rem)}
.hdr__links{display:none;align-items:center;gap:clamp(1rem,2.2vw,1.9rem);list-style:none;margin:0;padding:0}
.hdr__links a{
  text-decoration:none;font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-dim);padding-block:.35rem;
  border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.hdr__links a:hover{color:var(--paper)}
.hdr__links a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--paper)}
@media(min-width:1000px){.hdr__links{display:flex}}

/* Burger + full-screen drawer, phone and tablet only */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:44px;padding:0 10px;background:transparent;cursor:pointer;
  border:1px solid var(--rule);color:inherit;
}
.burger span{display:block;height:2px;background:var(--paper);transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1000px){.burger{display:none}}

.drawer{
  position:fixed;inset:0;z-index:55;background:#000;
  display:none;flex-direction:column;justify-content:center;
  padding:5.5rem var(--gutter) 2rem;overflow-y:auto;
}
.drawer.is-open{display:flex}
.drawer ul{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.drawer a{
  display:block;text-decoration:none;font-family:var(--display);
  text-transform:uppercase;font-size:clamp(1.6rem,7vw,2.4rem);line-height:1.15;
  padding-block:.35rem;border-bottom:1px solid var(--rule);
}
.drawer a[aria-current="page"]{color:var(--paper-dim)}
.drawer .btn{margin-top:2rem;width:100%}
.drawer__contact{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1.25rem;font-size:.8rem;color:var(--paper-dim)}
.drawer__contact a{font-family:var(--body);font-size:.8rem;text-transform:none;border:0;padding:0;display:inline}
body.nav-open{overflow:hidden}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0;background:#000}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.15) 26%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.85) 68%,rgba(0,0,0,.96) 100%);
}
/* Phone: no room for side-by-side, so the picture sits behind the copy.
   The hero footage is landscape (1080x608) — filling a full-height phone
   screen with it would crop away everything but a narrow vertical strip, so
   the hero is shortened instead and the frame anchored high, which keeps the
   subject in the upper half and leaves the darkened lower half for the
   headline. Stills are portrait already and need neither. */
@media(max-width:819px){
  .hero{min-height:86svh}
  .hero__media video{object-position:50% 22%}
  .hero__media img{object-position:50% 30%}
  .hero--page{min-height:clamp(460px,66svh,640px)}
}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(4.5rem,14vh,6rem) clamp(2.5rem,8vh,4.5rem)}
.hero h1{font-size:var(--step-4);max-width:16ch;margin-bottom:1.25rem}
.hero .lede{font-size:var(--step-1);color:var(--paper-dim);max-width:42ch}

/* Desktop: picture right, copy left, nothing overlapping. The horizontal fade
   is a mask on the footage itself rather than black laid over it — that avoids
   the hard vertical seam you get where a solid overlay meets the edge. */
@media(min-width:820px){
  .hero{align-items:center}
  .hero__media{
    left:50%;width:50%;
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 5%,rgba(0,0,0,.9) 10%,#000 14%);
            mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 5%,rgba(0,0,0,.9) 10%,#000 14%);
  }
  .hero__media video,.hero__media img{object-position:50% 28%}
  /* The top stop carries the navigation. Most of the photography is dark
     enough not to need it, but the bright ballroom shot on the parties page
     washes the nav links out, so the fade starts heavier than the funnel's. */
  .hero__scrim{
    background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 12%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 70%,rgba(0,0,0,.6) 100%);
  }
  .hero__inner{padding-block:0}
  .hero h1{max-width:12ch}
  .hero .lede{max-width:28ch}
  .hero .btn-row{max-width:520px}
}

/* Inner-page masthead: the same treatment, shorter, so a section page opens
   with a picture without stealing a whole screen from the content. */
.hero--page{min-height:clamp(500px,72svh,720px)}
.hero--page h1{font-size:var(--step-3);max-width:14ch}
@media(min-width:820px){.hero--page h1{max-width:13ch}}

/* Text-only masthead for pages with no photograph of their own. */
.masthead{padding-block:clamp(7rem,16vh,10rem) clamp(2.5rem,7vw,4rem);border-bottom:1px solid var(--rule)}
.masthead h1{font-size:var(--step-3);max-width:16ch;margin-bottom:1.25rem}
/* Centred variant — used on the enquiry page so the heading sits squarely
   over the form rather than off to one side of it. */
.masthead--centred{text-align:center}
.masthead--centred h1,.masthead--centred .lede{margin-inline:auto}
.masthead--centred .btn-row{justify-content:center}

/* Cinematic banner hero. For a wide, symmetrical photograph whose whole
   composition is the point — the split hero's tall crop would keep a third
   of the width and throw the rest away, so the picture runs full-bleed
   across the top instead and the copy sits beneath it. */
.hero-banner{position:relative;overflow:hidden;background:#000}
.hero-banner img{width:100%;display:block;object-fit:cover;object-position:50% 50%;
  height:clamp(300px,48svh,430px)}
@media(min-width:820px){.hero-banner img{height:auto;max-height:82svh}}
/* The fixed header sits over the top of the picture, and this one is bright,
   so the navigation needs its own fade to read against. */
.hero-banner::after{
  content:"";position:absolute;inset:0 0 auto 0;height:180px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,0) 100%);
}
.hero-banner + .masthead{padding-top:clamp(2.5rem,6vw,4rem)}

.award{
  display:inline-flex;align-items:center;margin-bottom:1.5rem;
  border:1px solid var(--rule);padding:.45rem .8rem;
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
}
.scroll-cue{
  position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);z-index:2;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-dim);
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0);opacity:.5}50%{transform:translate(-50%,6px);opacity:1}}
@media(prefers-reduced-motion:reduce){.scroll-cue{animation:none}}

/* ---------- Proof stats ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-ink);border:1px solid var(--rule-ink);margin-top:2.5rem}
.stat{background:var(--paper);padding:1.5rem 1.25rem}
.stat b{display:block;font-family:var(--display);font-size:var(--step-2);line-height:1}
.stat span{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-top:.5rem;font-weight:700}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}

/* ---------- Split (text beside a picture) ---------- */
.split{display:grid;gap:2rem}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}}
.split img,.split .media-4x5{aspect-ratio:4/5;object-fit:cover;width:100%;display:block}
/* A vertical clip in a picture slot: same frame as the stills around it, so a
   section with video and a section with a photograph sit at the same size. */
.media-4x5{background:#000}
@media(min-width:900px){.split--flip>*:first-child{order:2}}
.split figure{margin:0}
.split figcaption{font-size:.78rem;color:var(--paper-dim);margin-top:.9rem}
.paper .split figcaption{color:var(--ink-dim)}

/* ---------- Cards (packages, blog, anything in a row) ---------- */
.cards{display:grid;gap:1.25rem;margin-top:2.5rem}
@media(min-width:860px){.cards{grid-template-columns:repeat(3,1fr)}}
.cards--2{grid-template-columns:1fr}
@media(min-width:860px){.cards--2{grid-template-columns:repeat(2,1fr)}}
.card{
  border:1px solid var(--rule);padding:1.75rem 1.5rem;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
}
.paper .card{border-color:var(--rule-ink);background:transparent}
.card--lead{border-color:var(--paper);background:var(--paper);color:var(--ink)}
.card--lead .card__tag{background:var(--ink);color:var(--paper)}
.card__tag{
  align-self:flex-start;font-size:.6rem;letter-spacing:.2em;font-weight:700;text-transform:uppercase;
  border:1px solid currentColor;padding:.25rem .55rem;margin-bottom:1rem;
}
.card h3{font-size:var(--step-2);margin-bottom:.4rem}
/* Reserve the same title height across a row on desktop so the price rule —
   and the feature list under it — start level in every column. */
@media(min-width:860px){.cards--pkg .card h3{min-height:calc(var(--step-2) * 2.82)}}
.card__sub{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:inherit;opacity:.6;margin:0 0 .9rem}
.card__price{
  font-family:var(--display);font-weight:400;line-height:1;
  font-size:clamp(1.9rem,1.5rem + 1.3vw,2.4rem);
  /* flex-end, not baseline: baseline alignment makes the box taller than the
     numerals, which puts the POA card's divider out of line with the rest. */
  display:flex;align-items:flex-end;gap:.55rem;
  min-height:calc(clamp(1.9rem,1.5rem + 1.3vw,2.4rem) + 1.4rem + 1px);
  margin:0 0 1.4rem;padding-bottom:1.4rem;
  border-bottom:1px solid var(--rule);
}
.card__price small{
  font-family:var(--body);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;opacity:.55;
  line-height:1;position:relative;bottom:.35em;
}
.card__price--poa{
  font-family:var(--body);font-size:.95rem;font-weight:400;
  letter-spacing:0;text-transform:none;opacity:.6;align-items:flex-end;
}
.card p{margin:0 0 1.25rem;color:var(--paper-dim)}
.card ul{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.6rem;font-size:.92rem}
.card ul li{position:relative;padding-left:1.25rem;color:var(--paper-dim);line-height:1.45}
.card ul li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:1px;background:var(--paper)}
.card .btn,.card .link-underline{margin-top:auto}
.card .link-underline{align-self:flex-start}
/* lead-card overrides must follow .card rules to win on equal specificity */
.card.card--lead ul li{color:var(--ink-dim)}
.card.card--lead ul li::before{background:var(--ink)}
.card.card--lead .card__sub{opacity:.65}
.card.card--lead .card__price{border-bottom-color:rgba(0,0,0,.16)}
.card.card--lead p{color:var(--ink-dim)}
/* The default .btn is white-on-white, which disappears inside the white
   "most booked" card. Give it a black border so it reads as a button, and
   invert on hover to match the ghost buttons on the dark cards. */
.card.card--lead .btn{border-color:var(--ink);background:var(--paper);color:var(--ink)}
.card.card--lead .btn:hover{background:var(--ink);color:var(--paper)}
.paper .card p{color:var(--ink-dim)}
.paper .card ul li{color:var(--ink-dim)}
.paper .card ul li::before{background:var(--ink)}

/* Call to action sitting directly under a row of cards, so the reader doesn't
   have to reach the bottom of the page to act on what they've just read. */
.suite-cta{
  margin-top:2.5rem;padding-top:2.25rem;border-top:1px solid var(--rule);
  display:grid;gap:1.5rem;align-items:center;
}
@media(min-width:900px){.suite-cta{grid-template-columns:1.5fr auto;gap:3rem}}
.suite-cta h3{font-size:var(--step-2);margin-bottom:.75rem}
.suite-cta p{margin:0;max-width:56ch}
.paper .suite-cta{border-top-color:var(--rule-ink)}

/* ---------- Standalone tick list ---------- */
.checks{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.75rem}
@media(min-width:760px){.checks--2{grid-template-columns:1fr 1fr;gap:.75rem 2.5rem}}
.checks li{position:relative;padding-left:1.4rem;color:var(--paper-dim);line-height:1.5}
.checks li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1px;background:var(--paper)}
.paper .checks li{color:var(--ink-dim)}
.paper .checks li::before{background:var(--ink)}

/* ---------- Numbered steps ---------- */
.steps{list-style:none;counter-reset:s;margin:2.5rem 0 0;padding:0;display:grid;gap:1px;background:var(--rule)}
@media(min-width:860px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:s;background:var(--ink);padding:1.75rem 1.5rem}
.steps li::before{
  content:counter(s,decimal-leading-zero);display:block;font-family:var(--display);
  font-size:var(--step-2);line-height:1;margin-bottom:1rem;color:var(--paper-dim);
}
.steps h3{font-size:1.15rem;margin-bottom:.6rem}
.steps p{margin:0;color:var(--paper-dim);font-size:.92rem;line-height:1.5}

/* ---------- Full-width image band ---------- */
.band{margin:var(--section) 0 0;padding:0}
.band img{width:100%;aspect-ratio:16/10;object-fit:cover}
@media(min-width:760px){.band img{aspect-ratio:21/9}}
.band figcaption{
  max-width:var(--maxw);margin-inline:auto;padding:1rem var(--gutter) 0;
  font-size:.78rem;letter-spacing:.02em;color:var(--paper-dim);
}

/* ---------- Testimonials ---------- */
.quotes{display:grid;gap:1.25rem;margin-top:2.5rem}
@media(min-width:860px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quotes--1{grid-template-columns:1fr;max-width:760px}
@media(min-width:860px){.quotes--1{grid-template-columns:1fr}}
.quote{border:1px solid var(--rule-ink);padding:1.75rem 1.5rem;display:flex;flex-direction:column;margin:0}
.quote p{margin:0 0 1.25rem;font-size:1.02rem;line-height:1.55}
.quote footer{margin-top:auto;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-dim)}
.stars{letter-spacing:.25em;font-size:.8rem;margin-bottom:1rem}

/* ---------- FAQ ---------- */
.faq{margin-top:2.5rem;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font-family:var(--display);text-transform:uppercase;font-size:1.2rem;line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.35rem;top:50%;width:12px;height:12px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{margin:0 0 1.5rem;color:var(--paper-dim);max-width:72ch}
.paper .faq,.paper .faq details{border-color:var(--rule-ink)}
.paper .faq p{color:var(--ink-dim)}

/* ---------- Studio Ninja embed ----------
   The form inside is styled by Studio Ninja and cannot be restyled from here
   (it's cross-origin). What we can control is the frame around it, so it gets
   the same square-cornered, hairline-bordered treatment as the cards. */
.sn-embed{margin-top:2.5rem;border:1px solid var(--rule);background:rgba(255,255,255,.03)}
.sn-embed iframe{display:block;width:100%;border:0;height:900px}
@media(min-width:720px){.sn-embed iframe{height:760px}}
.form-note{font-size:.78rem;color:var(--paper-dim);margin:1rem 0 0}
.paper .form-note{color:var(--ink-dim)}
.contact-direct{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--rule);font-size:.85rem}
.contact-direct a{text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}

/* ---------- Planner / lead magnet ---------- */
.planner{
  border-top:1px solid var(--rule);
  padding-block:clamp(2.5rem,7vw,4rem);
}
.planner__grid{display:grid;gap:1.75rem;align-items:center}
@media(min-width:860px){.planner__grid{grid-template-columns:1.4fr auto;gap:3rem}}
.planner h3{font-size:var(--step-2);margin-bottom:.9rem}
.planner p{margin:0;color:var(--paper-dim);max-width:60ch}
.planner .btn{width:100%}
@media(min-width:620px){.planner .btn{width:auto}}

/* ---------- Blog index card with a video thumbnail ----------
   Both posts are videos first, so the card leads with the still and a play
   badge — a text link alone reads as an article and gets passed over. */
.post-card{padding:0;overflow:hidden}
.post-card__media{position:relative;display:block;line-height:0}
.post-card__media img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-card__media img{transform:scale(1.03)}
/* Circle first, triangle above it — ::after paints over ::before, so the
   z-index is what keeps the play arrow on top of its own disc. */
.post-card__media::after{
  content:"";position:absolute;z-index:1;left:50%;top:50%;
  transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  background:rgba(0,0,0,.5);border:2px solid #fff;transition:background .2s ease;
}
.post-card:hover .post-card__media::after{background:rgba(0,0,0,.78)}
.post-card__media::before{
  content:"";position:absolute;z-index:2;left:50%;top:50%;
  transform:translate(-34%,-50%);
  border-left:17px solid #fff;
  border-top:11px solid transparent;border-bottom:11px solid transparent;
}
.post-card__body{padding:1.6rem 1.5rem 1.75rem;display:flex;flex-direction:column;flex:1}
.post-card__body h3 a{text-decoration:none}
.post-card__body h3 a:hover{text-decoration:underline;text-underline-offset:.14em}
.post-card .card__tag{margin-bottom:.9rem}

/* ---------- Blog post video ----------
   Sits above the article at the full column width. It carries speech, so it
   is a click-to-play player rather than an autoplaying loop. */
.post-video{margin:0;max-width:840px}
.post-video video{
  width:100%;display:block;aspect-ratio:16/9;background:#000;
  border:1px solid var(--rule);
}
.post-video figcaption{font-size:.78rem;color:var(--paper-dim);margin-top:.9rem}

/* ---------- Long-form prose (privacy, blog posts) ---------- */
.prose{max-width:68ch}
.prose h2{font-size:var(--step-2);margin:2.5rem 0 1rem}
.prose h3{font-size:1.25rem;margin:2rem 0 .75rem}
.prose p,.prose li{color:var(--paper-dim)}
.prose ul,.prose ol{padding-left:1.2rem;display:grid;gap:.5rem}

/* ---------- Footer ---------- */
.ftr{border-top:1px solid var(--rule);padding-block:2.5rem;font-size:.78rem;color:var(--paper-dim)}
.ftr__grid{display:grid;gap:1.75rem}
@media(min-width:760px){.ftr__grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.ftr a{text-decoration:none}
.ftr a:hover{color:var(--paper)}
.ftr h4{font-size:.95rem;margin-bottom:.75rem;color:var(--paper)}
.ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.ftr img{height:44px;width:auto;margin-bottom:1rem;mix-blend-mode:screen}
.ftr__legal{margin-top:.75rem}
.ftr__base{border-top:1px solid var(--rule);margin-top:2rem;padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.74rem}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.94);backdrop-filter:blur(10px);border-top:1px solid var(--rule);
  transform:translateY(120%);transition:transform .3s ease;
}
.sticky-cta.is-on{transform:translateY(0)}
body.nav-open .sticky-cta{transform:translateY(120%)!important}
@media(min-width:860px){.sticky-cta{display:none}}

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