@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/source-sans-3-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/source-sans-3-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/source-sans-3-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/source-sans-3-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/source-sans-3-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/source-sans-3-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Metric-matched fallbacks. Without these the page renders in Georgia/Arial at their own
   proportions and then visibly resizes when the real faces arrive — the "text flashes big
   then shrinks" effect. size-adjust scales the fallback so the swap is near-invisible. */
@font-face{font-family:'Cormorant fallback';src:local('Georgia'),local('Times New Roman'),local('serif');
  size-adjust:88%;ascent-override:95%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:'Source Sans fallback';src:local('Arial'),local('Helvetica'),local('sans-serif');
  size-adjust:96%;ascent-override:97%;descent-override:28%;line-gap-override:0%}


/* ══ TOKENS ══ */
:root{
  --bg:#f6f0e4; --bg2:#ece3d2; --bg3:#e2d8c6;
  /* AA verified on ALL grounds (bg/bg2/bg3): ink 12.84/11.4/10.3 · ink-2 10.98/9.8/8.8 · ink-dim 6.04/5.38/4.86 · ink-mute NON-TEXT ONLY */
  --ink:#102850; --ink-2:#133364; --ink-dim:#4f5b70;
  --ink-mute:#8a94a6;   /* borders, dividers, disabled fills — never body text */
  --accent:#991a28; --accent-dk:#500008;
  --gold:#b08038; --gold-soft:#d9c08a;
  --rule:rgba(16,40,80,.12); --rule-2:rgba(16,40,80,.22);
  --shadow:0 2px 8px rgba(16,40,80,.08), 0 12px 32px rgba(16,40,80,.06);
  --shadow-lift:0 4px 14px rgba(16,40,80,.12), 0 20px 48px rgba(16,40,80,.10);
  --display:'Cormorant Garamond','Cormorant fallback',Georgia,serif;
  --sans:'Source Sans 3','Source Sans fallback',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --measure:68ch;
  --container:1200px;
  --radius:14px; --radius-sm:8px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Any component with an author `display` rule beats the UA [hidden] rule, so JS that
   sets `el.hidden = true` silently does nothing. This makes [hidden] mean hidden. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); font-size:17px; line-height:1.65;
  color:var(--ink);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;

  /* PARCHMENT SURFACE (audit R1). The token is called parchment and was painted flat.
     Three authority mockups show mottled, glowing paper.
     - Grain opacity is baked into the SVG <rect>, so there is NO live filter on a large
       element — that is the mobile performance trap this avoids.
     - The five scattered ultra-low-alpha radials exist to break up the 200px tile repeat.
       Without them a tiled turbulence reads as a screen door instead of aged paper.
     - Cards (--bg2/--bg3) paint opaque over it, so the grain stays on the ground. */
  background-color:var(--bg);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.10'/></svg>"),
    radial-gradient(120% 62% at 50% 108%, rgba(176,128,56,.13) 0%, rgba(176,128,56,.05) 42%, rgba(176,128,56,0) 72%),
    radial-gradient(at 15% 22%, rgba(176,128,56,.055), transparent 50%),
    radial-gradient(at 78% 14%, rgba(176,128,56,.045), transparent 45%),
    radial-gradient(at 42% 68%, rgba(176,128,56,.038), transparent 55%),
    radial-gradient(at 86% 64%, rgba(176,128,56,.045), transparent 40%),
    radial-gradient(at 22% 86%, rgba(176,128,56,.030), transparent 50%);
  background-size:200px 200px, auto, auto, auto, auto, auto, auto;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment:fixed;
}
/* fixed attachment is a scroll cost on mobile and reads as parallax-by-accident, which
   DESIGN §5.5 forbids — pin it to the page on small screens and under reduced motion. */
@media(max-width:767px){body{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){body{background-attachment:scroll}}
@media(min-width:768px){body{font-size:18px}}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

/* ══ A11Y ══ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:1000;
  background:var(--accent);color:#fff;padding:10px 18px;border-radius:var(--radius-sm);
  font-weight:600;transition:top .2s var(--ease);
}
.skip-link:focus{top:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* The intro/skip flow moves focus to the page h1 so keyboard and screen-reader users land
   in the right place. The h1 is not operable, so the painted ring is noise — suppress it
   there only. Every operable control keeps its ring. */
h1[tabindex="-1"]:focus,h1[tabindex="-1"]:focus-visible{outline:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ══ LAYOUT ══ */
/* padding-inline, NOT the padding shorthand: a <section class="container"> would otherwise
   have its vertical rhythm from `section{padding:64px 0}` silently zeroed out. */
.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:24px}
@media(min-width:768px){.container{padding-inline:40px}}
section{padding:64px 0}
@media(min-width:768px){section{padding:96px 0}}
/* Consecutive sections doubled their padding into a 192px void on the thin pages
   (events, videos, vip, testimonies, blog, giving). One gap between blocks, not two. */
section + section{padding-top:0}
/* Sticky nav is 72px — anything jumped to must clear it. */
section[id],h1[id],h2[id],h3[id],[id].tier-card{scroll-margin-top:88px}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:1.1em}
.prose p{text-wrap:pretty}
.prose h2{margin:1.6em 0 .5em}
.prose h3{margin:1.4em 0 .4em}
.prose ul,.prose ol{margin:1em 0 1em 1.3em}
.prose li+li{margin-top:.4em}
.prose blockquote{
  border-left:3px solid var(--gold);padding:4px 0 4px 20px;margin:1.4em 0;
  font-family:var(--display);font-size:1.24em;line-height:1.45;color:var(--ink-2)
}

/* ══ TYPE ══ */
h1,h2,h3,h4{color:var(--ink-2);line-height:1.15;text-wrap:balance}
h1,.h1{font-family:var(--display);font-weight:600;font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:-.01em}
h2,.h2{font-family:var(--display);font-weight:600;font-size:clamp(1.875rem,4vw,2.875rem)}
h3,.h3{font-family:var(--sans);font-weight:600;font-size:clamp(1.1875rem,2vw,1.375rem);line-height:1.3}
.section-label{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);display:flex;align-items:center;gap:12px;margin-bottom:14px
}
.section-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-soft),transparent)}
.section-title{margin-bottom:14px}
.section-title em{font-style:italic;color:var(--accent)}
.lede{font-size:1.125em;color:var(--ink-dim);max-width:var(--measure)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}


/* ══ TYPOGRAPHY DETAIL (audit R6) ══
   The display face was doing two jobs at one weight. These are shaping hints resolved
   during normal layout — no main-thread cost, and invisible where unsupported. */
.prose{font-variant-numeric:oldstyle-num proportional-nums}
/* Old-style figures are lovely in prose and wrong anywhere a number must be scanned:
   prices, dates, counters, phone numbers. Opt those back out explicitly. */
.product-price,.pdp-price,.cart-item-price,.cart-subtotal,.char-counter,
.date-chip,.event-meta,.post-meta,.nl-stat-num,.order-meta,.tile-num{
  font-variant-numeric:tabular-nums lining-nums
}
/* Trim the leading above and below display type so headings optically align with the
   boxes beside them. No effect where unsupported. */
h1,h2,.page-banner h1,.product-title,.tile-title,.post-title,.event-title{
  text-box-trim:trim-both;text-box-edge:cap alphabetic
}
/* The italic-crimson emphasis rule style.css already defined and no page used. */
.section-title em{font-style:italic;color:var(--accent)}

/* ══ BUTTONS ══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 26px;border-radius:999px;border:1px solid transparent;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.02em;
  cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
  text-align:center
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--rule-2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-pending{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-pending:hover{background:var(--accent);color:#fff}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;pointer-events:none}

/* ══ NAV ══ */
.nav{
  position:sticky;top:0;z-index:100;background:rgba(246,240,228,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)
}
.nav.scrolled{border-bottom-color:var(--rule);box-shadow:0 2px 12px rgba(16,40,80,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.nav-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink-2);min-height:44px}  /* 44px floor (§5.6) while the mark itself stays 38px — padding on the link, not the image. */
/* The mark is cream-on-transparent; without a shadow it nearly vanishes on parchment. */
.nav-brand img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(16,40,80,.30))}
.foot-brand img{filter:drop-shadow(0 1px 2px rgba(16,40,80,.30))}
/* Ten links have to fit beside the brand and the cart. The gap flexes with the viewport
   instead of dropping items — a nav that differs between desktop and mobile hides whole
   sections from one set of visitors, which is what happened here (desktop had 7, the
   drawer had 10; Testimonies, Videos and VIP were unreachable on desktop). */
.nav-links{display:none;align-items:center;gap:clamp(12px,1.5vw,24px)}
@media(min-width:960px){.nav-links{display:flex}}
@media(min-width:960px) and (max-width:1199px){.nav-links a{font-size:14px}}
.nav-links a{font-size:15px;font-weight:600;color:var(--ink);padding:6px 0;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--accent);transition:right .25s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current=page]::after{right:0}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:1px solid var(--rule-2);border-radius:var(--radius-sm);cursor:pointer}
@media(min-width:960px){.nav-toggle{display:none}}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink-2);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink-2)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
/* Open state: the bars become an X, so the control reports what it did. */
.nav-toggle[aria-expanded=true] span{background:transparent}
.nav-toggle[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{transition:transform .2s var(--ease),background .2s var(--ease)}
.nav-drawer{display:none;padding:8px 0 24px;border-top:1px solid var(--rule)}
.nav-drawer.open{display:block}
@media(min-width:960px){.nav-drawer{display:none!important}}
.nav-drawer a{display:block;padding:14px 0;font-weight:600;border-bottom:1px solid var(--rule)}


/* ══ PAGE TRANSITIONS (audit R8) ══
   CSS-only cross-document view transitions. Four rules, zero JS, zero library bytes.
   Every page shares the same parchment ground, nav and footer, so a hard white flash
   between two near-identical pages is a small ugliness this removes.

   Support is Chrome 126+ / Safari 18.2+ and NOT Firefox — claims that this went
   cross-browser are wrong. Firefox visitors get a plain navigation, which is the
   pre-existing behaviour, so the failure mode is benign.

   Durations are deliberately shorter than the browser's 250ms default: on a text site
   the default reads as sluggish, and this audience values instant over cinematic. */
@view-transition{navigation:auto}

/* A plain cross-fade overlaps both pages at partial opacity. Every page here shares the
   same parchment ground, nav and footer, so the overlap reads as a ghosted double
   exposure — "it looks like it loads twice". Sequencing fixes it: the outgoing page
   leaves first, the incoming one arrives after, and the two are never both half-visible.
   The slight horizontal travel gives the motion a direction so it reads as one movement. */
::view-transition-old(root){animation:vt-out .16s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .26s .14s cubic-bezier(0,0,.2,1) both}
@keyframes vt-out{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translate3d(-1.5%,0,0)}
}
@keyframes vt-in{
  from{opacity:0;transform:translate3d(2.5%,0,0)}
  to{opacity:1;transform:none}
}
/* The nav and footer are named below, so they never take part in the swipe — the chrome
   stays put and only the page content moves under it. */

/* Naming the persistent chrome stops it cross-fading with itself — without this the nav
   and footer briefly ghost double during the transition. */
.nav{view-transition-name:site-nav}
.site-footer{view-transition-name:site-foot}

/* Override the at-rule itself rather than zeroing the animations — the clean way. */
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* The current page should be legible in the nav at a glance, not just on hover. */
.nav-links a[aria-current=page]{color:var(--ink-2)}
.nav-drawer a[aria-current=page]{color:var(--accent);font-weight:700}

/* ══ INTRO OVERLAY ══ */
body.intro-running{overflow:hidden}
#intro-overlay{
  position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity 1s var(--ease),visibility 0s linear 0s
}
#intro-overlay.fade-out{opacity:0;visibility:hidden;transition:opacity 1s var(--ease),visibility 0s linear 1s}
#intro-overlay video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--bg)}
#intro-overlay .intro-veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(16,40,80,.28) 100%);pointer-events:none}
.intro-skip{
  position:absolute;bottom:28px;right:24px;z-index:2;
  display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;
  border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(16,40,80,.42);
  color:#fff;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.04em;cursor:pointer;
  backdrop-filter:blur(4px);transition:background .2s var(--ease),border-color .2s var(--ease)
}
.intro-skip:hover,.intro-skip:focus-visible{background:var(--accent);border-color:var(--accent)}
.intro-skip .arr{transition:transform .25s var(--ease)}
.intro-skip:hover .arr{transform:translateX(4px)}
@media(min-width:768px){.intro-skip{bottom:40px;right:40px}}
.intro-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(16,40,80,.12);z-index:2}
.intro-progress-fill{height:100%;width:0;background:var(--accent);transition:width .25s linear}
/* No-JS and reduced-motion users must never be trapped behind the overlay */
html.no-js #intro-overlay{display:none}
@media(prefers-reduced-motion:reduce){#intro-overlay{display:none}}

/* ══ HERO ══ */
.hero{padding:56px 0 40px;text-align:center}
@media(min-width:768px){.hero{padding:88px 0 64px}}

/* ── MEDIA HERO (sunrise footage) ──
   Text sits on moving footage, so contrast cannot be left to chance: the scrim is sized
   to guarantee AA for cream on the brightest frame of the clip, not the darkest. */
.hero-media{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(460px,72vh,760px);
  display:flex;align-items:center;justify-content:center;
  padding-block:72px;text-align:center;
  background:var(--ink);   /* paints before the poster decodes — never a white flash */
}
.hero-poster,.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2
}
.hero-video{opacity:0;transition:opacity .9s var(--ease)}
.hero-video.is-playing{opacity:1}
/* The sun crests mid-frame — pure white pixels land exactly where the h1 sits. A flat
   scrim heavy enough to survive that would flatten the whole picture, so the darkening is
   concentrated on the text block and stays light at the edges. Verified against real
   frames of hero.mp4: worst-case cream-on-brightest-pixel is measured, not assumed. */
.hero-scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 68% 52% at 50% 44%, rgba(6,14,30,.74) 0%, rgba(6,14,30,.38) 55%, rgba(6,14,30,0) 78%),
    linear-gradient(to bottom, rgba(10,22,45,.34) 0%, rgba(10,22,45,.48) 45%, rgba(10,22,45,.80) 100%)
  /* Measured worst case under the text block: 5.45:1 across the whole clip (AA, with margin).
     The first attempt at .62/.28 measured 4.35:1 — a fail nobody would have caught by eye,
     because it only breaks on the two brightest seconds of the sunrise. */
}
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.hero-media h1{
  color:#fdfaf3;
  text-shadow:0 2px 18px rgba(6,14,30,.68), 0 1px 3px rgba(6,14,30,.5)
}
.hero-media .hero-tagline{
  color:#f4ede0;
  text-shadow:0 1px 12px rgba(6,14,30,.7)
}
.hero-media .hero-lockup{
  width:min(150px,34vw);margin:0 auto 14px;
  filter:drop-shadow(0 3px 14px rgba(6,14,30,.55))
}
/* The parchment ghost button disappears on dark footage — give it a light variant. */
.btn-hero-ghost{
  background:rgba(253,250,243,.10);color:#fdfaf3;border-color:rgba(253,250,243,.62);
  backdrop-filter:blur(3px)
}
.btn-hero-ghost:hover{background:#fdfaf3;color:var(--ink-2);border-color:#fdfaf3}
/* Hand-off into the parchment page below, so the dark hero does not end on a hard seam. */
.hero-media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(96px,14vh,180px);z-index:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(246,240,228,0), var(--bg))
}
/* The video is NOT hidden under reduced-motion — client directive 2026-08-13. It plays once
   and stops; the parallax (which moves the page under the reader) stays disabled in JS. */
.hero-lockup{width:min(300px,64vw);margin:0 auto 22px}
.hero-tagline{font-family:var(--display);font-size:clamp(1.25rem,3vw,1.75rem);font-style:italic;color:var(--ink-2);max-width:34ch;margin:0 auto 28px;line-height:1.35;text-wrap:balance}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ══ TILE GRID (home bento) ══ */
.tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:768px){.tile-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.tile{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:150px;padding:20px;border-radius:var(--radius);
  background:var(--bg2);border:1px solid var(--rule);box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
  overflow:hidden
}
@media(min-width:768px){.tile{min-height:210px;padding:26px}}
.tile::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--gold-soft) 22%,var(--gold) 50%,var(--gold-soft) 78%,transparent);
  opacity:.55;transition:opacity .3s var(--ease)
}
/* A warm glow rising from the lower edge, so the tile reads as lit paper rather than a
   flat swatch. Both layers are decoration only — no text sits on them. */
.tile::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 118%, rgba(176,128,56,.16), rgba(176,128,56,0) 62%);
  transition:opacity .3s var(--ease)
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--gold-soft)}
.tile:hover::before{opacity:1}
.tile:hover::after{opacity:1.6}
.tile-accent::before{background:linear-gradient(90deg,transparent,rgba(253,250,243,.5) 30%,rgba(253,250,243,.85) 50%,rgba(253,250,243,.5) 70%,transparent)}
.tile-accent::after{background:radial-gradient(120% 70% at 50% 118%, rgba(253,250,243,.14), rgba(253,250,243,0) 62%)}
/* The number was decoration competing with the title; make it a quiet index. */
.tile-num{opacity:.5}
.tile-num{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink-dim)}
/* The numerals index the desktop matrix. Phones re-sequence the tiles via `order`,
   so the badges would read 04, 03, 01, 05… — visibly wrong. They are decorative,
   so drop them where they cannot be truthful rather than renumber and break desktop. */
@media(max-width:767px){.tile-num{display:none}}
.tile-title{font-family:var(--display);font-size:clamp(1.35rem,3vw,1.875rem);font-weight:600;color:var(--ink-2);margin-top:4px}
.tile-desc{font-size:14px;color:var(--ink-dim);margin-top:6px}
.tile-accent{background:var(--accent);border-color:var(--accent)}
.tile-accent .tile-title,.tile-accent .tile-desc,.tile-accent .tile-num{color:#fff}
.tile-accent .tile-desc{color:rgba(255,255,255,.85)}
.tile-wide{grid-column:span 2}

/* ══ COMPONENTS REQUESTED BY WAVE 0 (§5.4 inventory) ══
   Authored by A-foundation, merged here by the orchestrator so page agents
   never re-declare them. Token colours only. */
.nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:999px;background:var(--accent);color:#fff;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.02em;border:1px solid var(--accent);transition:background .2s var(--ease)}
.nav-cta:hover,.nav-cta.is-hover{background:var(--accent-dk);border-color:var(--accent-dk)}

.breadcrumb{margin-bottom:18px;font-size:13px;color:var(--ink-dim)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0}
.breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--ink-dim)}
.breadcrumb a{color:var(--ink-dim);text-decoration:underline}
.breadcrumb a:hover,.breadcrumb a.is-hover{color:var(--accent)}
.breadcrumb [aria-current=page]{color:var(--ink-2);font-weight:600}

.download-list{list-style:none;margin:0;display:grid;gap:10px}
.download-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius-sm)}
.download-list .dl-name{font-weight:600;color:var(--ink-2)}
.download-list .dl-meta{font-size:13px;color:var(--ink-dim)}

.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calendar-grid .cal-head{padding:6px 0;text-align:center;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.calendar-grid .cal-day{min-height:56px;padding:6px;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--bg2);font-size:13px;color:var(--ink)}
.calendar-grid .cal-day.is-outside{background:transparent;border-color:transparent;color:var(--ink-dim)}
.calendar-grid .cal-day.has-event{border-color:var(--gold);box-shadow:inset 0 -3px 0 var(--gold-soft)}
.calendar-grid .cal-day.is-today{background:var(--ink-2);border-color:var(--ink-2);color:#fff;font-weight:700}

.embed-wrapper{background:var(--bg3);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.embed-wrapper iframe{display:block;width:100%;min-height:640px;border:0}
.embed-fallback{display:inline-block;margin-top:10px;font-size:14px;color:var(--ink-dim);text-decoration:underline}
.embed-fallback:hover,.embed-fallback.is-hover{color:var(--accent)}


.inline-loading{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-dim)}
.inline-loading::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--rule-2);border-top-color:var(--accent);animation:kkm-spin .7s linear infinite}
@keyframes kkm-spin{to{transform:rotate(360deg)}}

.related-group{margin-top:56px;padding-top:32px;border-top:1px solid var(--rule)}
.related-group>h2{font-family:var(--display);font-size:1.75rem;margin-bottom:20px}
.related-card{display:flex;flex-direction:column;gap:10px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.related-cover{display:flex;justify-content:center;background:var(--bg3);border-radius:var(--radius-sm);padding:16px}
.related-cover img{width:100%;max-width:170px;height:auto;border-radius:3px;box-shadow:0 4px 14px rgba(16,40,80,.20)}
.related-card h3{color:var(--ink-2)}
.related-card:hover h3{color:var(--accent)}

.social-links{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0}
.social-links a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:8px 16px;border:1px solid var(--rule-2);border-radius:999px;font-size:14px;font-weight:600;color:var(--ink)}
.social-links a:hover,.social-links a.is-hover{border-color:var(--accent);color:var(--accent)}

/* ══ REVIEW BANNER (unapproved policy copy) ══ */
.review-banner{
  display:flex;gap:12px;align-items:flex-start;
  background:#fbf3e0;border:1px solid var(--gold);border-left:4px solid var(--gold);
  border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:28px;
  font-size:15px;color:#5a4413
}
.review-banner strong{color:#42320e}

/* ══ TILE ART (product covers inside a home tile) ══ */
.tile-art{display:flex;gap:12px;align-items:flex-end;margin-bottom:16px}
.tile-art img{flex:1 1 0;min-width:0;border-radius:6px;box-shadow:var(--shadow)}

/* Mobile tile order — WIREFRAMES locks a different sequence than the desktop span matrix.
   DOM order serves desktop; these rules re-sequence for phones. */
@media(max-width:767px){
  .page-home .tile-grid .tile-wide{grid-column:span 2}
  .page-home .tile-grid [data-tile=shop]{order:1}
  .page-home .tile-grid [data-tile=prayer]{order:2}
  .page-home .tile-grid [data-tile=blog]{order:3}
  .page-home .tile-grid [data-tile=events]{order:4}
  .page-home .tile-grid [data-tile=giving]{order:5}
  .page-home .tile-grid [data-tile=videos]{order:6}
  .page-home .tile-grid [data-tile=vip]{order:7}
  .page-home .tile-grid [data-tile=about]{order:8}
}

/* ══ CARDS ══ */
.card{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.card-grid{grid-template-columns:repeat(3,1fr)}}

/* ══ PRODUCTS ══ */
.filter-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.chip{
  min-height:44px;padding:9px 20px;border-radius:999px;border:1px solid var(--rule-2);
  background:transparent;color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)
}
.chip[aria-pressed=true]{background:var(--ink-2);color:#fff;border-color:var(--ink-2)}
.product-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:640px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.product-grid{grid-template-columns:repeat(3,1fr)}}
.product-card{
  display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)
}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.product-cover{background:var(--bg3);padding:22px;display:flex;justify-content:center}
.product-cover img{width:100%;max-width:230px;border-radius:4px;box-shadow:0 6px 20px rgba(16,40,80,.18)}
.product-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.format-chip{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);border:1px solid var(--rule-2);border-radius:999px;padding:4px 10px}
.product-title{font-family:var(--display);font-size:1.375rem;font-weight:600;color:var(--ink-2)}
.product-byline{font-size:13px;color:var(--ink-dim)}
.product-price{font-size:1.375rem;font-weight:700;color:var(--ink)}
.product-actions{margin-top:auto;padding-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.badge-soon{background:var(--gold-soft);color:#5a4413}
.badge-featured{background:var(--accent);color:#fff}
.variant-toggle{display:inline-flex;border:1px solid var(--rule-2);border-radius:999px;padding:4px;gap:4px;background:var(--bg2)}
.variant-toggle button{
  min-height:40px;padding:8px 20px;border:none;border-radius:999px;background:transparent;
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)
}
/* The variant switcher is a role=tablist (it reuses main.js's tab module), and a tab
   carries aria-selected, never aria-pressed. Style both so either markup works. */
.variant-toggle button[aria-pressed=true],
.variant-toggle button[aria-selected=true]{background:var(--ink-2);color:#fff}
/* Without JS no tab can be selected, so every format panel stays open and the switcher
   would sit there inert. Hide the control; the content is still all present. */
html.no-js .variant-toggle{display:none}

/* ══ FORMS ══ */
.form-panel{max-width:720px;margin-inline:auto;background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
@media(min-width:768px){.form-panel{padding:32px}}
.form-field{margin-bottom:18px}
.form-field label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);margin-bottom:6px}
.form-field .req{color:var(--accent)}
.form-field input,.form-field select,.form-field textarea{
  width:100%;min-height:48px;padding:12px 14px;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--bg);border:1px solid var(--rule-2);border-radius:var(--radius-sm);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)
}
.form-field textarea{min-height:140px;resize:vertical;line-height:1.5}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(153,26,40,.12);outline:none}
.form-field .hint{font-size:13px;color:var(--ink-dim);margin-top:5px}
.form-field .error{font-size:13px;color:var(--accent);margin-top:5px;font-weight:600}
.form-field.invalid input,.form-field.invalid textarea{border-color:var(--accent)}
.char-counter{font-size:13px;color:var(--ink-dim);text-align:right;margin-top:5px;font-variant-numeric:tabular-nums}
.char-counter.near{color:var(--accent);font-weight:600}
.consent-check{display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--bg3);border-radius:var(--radius-sm);margin-bottom:18px}
.consent-check input{width:22px;height:22px;min-height:0;flex:0 0 auto;margin-top:2px;accent-color:var(--accent)}
.consent-check label{font-size:15px;font-weight:400;color:var(--ink);margin:0;line-height:1.45}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:16px 18px;border-radius:var(--radius-sm);font-weight:600;margin-bottom:18px}
.alert-success{background:#e3efe4;color:#1d5b2a;border:1px solid #9ec5a5}
.alert-error{background:#f7e3e5;color:var(--accent-dk);border:1px solid #d9a3aa}

/* ══ TABS ══ */
/* WIREFRAMES: tabs scroll horizontally on phones, never wrap to a second row —
   a wrapped tablist reads as three broken buttons rather than one control. */
.tablist{
  display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;border-bottom:1px solid var(--rule);margin-bottom:28px
}
.tablist button{flex:0 0 auto;white-space:nowrap}
.tablist button{
  min-height:48px;padding:12px 22px;border:none;background:transparent;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink-dim);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s var(--ease),border-color .2s var(--ease)
}
.tablist button[aria-selected=true]{color:var(--ink-2);border-bottom-color:var(--accent)}

/* ══ EVENTS ══ */
.event-card{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--rule)}
.date-chip{
  flex:0 0 auto;width:64px;text-align:center;background:var(--ink-2);color:#fff;
  border-radius:var(--radius-sm);padding:8px 4px
}
.date-chip .m{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.date-chip .d{display:block;font-size:24px;font-weight:700;line-height:1.1}
.event-body{flex:1}
.event-title{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--ink-2)}
.event-meta{font-size:14px;color:var(--ink-dim);margin-top:2px}
.event-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--bg3);color:var(--ink-dim);margin-top:6px}
.empty-state{text-align:center;padding:56px 24px;color:var(--ink-dim);background:var(--bg2);border:1px dashed var(--rule-2);border-radius:var(--radius)}

/* ══ VIDEOS ══ */
.video-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.video-grid{grid-template-columns:repeat(3,1fr)}}
.video-card{background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;text-align:left}
.video-facade{position:relative;aspect-ratio:16/9;background:var(--bg3)}
.video-facade img{width:100%;height:100%;object-fit:cover}
.video-facade::after{
  content:"";position:absolute;inset:0;margin:auto;width:62px;height:44px;border-radius:12px;
  background:var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>") center/24px no-repeat;
  opacity:.92;transition:transform .2s var(--ease)
}
.video-card:hover .video-facade::after{transform:scale(1.08)}
.video-title{padding:14px 16px;font-weight:600;color:var(--ink-2);font-size:15px}

/* ══ GIVING ══ */
.tier-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:640px){.tier-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.tier-grid{grid-template-columns:repeat(3,1fr)}}
.tier-card{display:flex;flex-direction:column;gap:10px;background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.tier-card h3{font-family:var(--display);font-size:1.5rem}
.tier-card p{font-size:15px;color:var(--ink-dim);flex:1}
.tier-card .btn{margin-top:8px}
.partner-panel{display:grid;grid-template-columns:1fr;gap:24px;background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
@media(min-width:768px){.partner-panel{grid-template-columns:1fr 1fr;gap:40px;padding:36px}}
.partner-col h3{font-family:var(--display);font-size:1.5rem;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--gold-soft)}
.partner-col a{display:block;padding:12px 16px;margin-bottom:8px;background:var(--bg);border:1px solid var(--rule-2);border-radius:var(--radius-sm);font-weight:600;font-size:15px;transition:border-color .2s var(--ease),color .2s var(--ease)}
.partner-col a:hover{border-color:var(--accent);color:var(--accent)}


/* ══ PAGE BANNER ══
   Promoted from blog/index.src.html, where it was the best-looking thing in the repo and
   was trapped inline on one page. Seven other pages had no visual identity at all: nav,
   serif heading, paragraph, footer, on flat cream. Pure CSS — no request, on-palette,
   and the gold stays decorative (never text) per DESIGN §5.1. */
.page-banner{
  position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding:64px 24px 56px;border-radius:var(--radius);
  border:1px solid var(--rule);box-shadow:var(--shadow);
  background:linear-gradient(180deg,#e9dfc9 0%,var(--bg2) 45%,var(--bg) 100%)
}
.page-banner::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(115% 85% at 50% 100%, rgba(176,128,56,.30), rgba(176,128,56,0) 60%),
    repeating-conic-gradient(from 180deg at 50% 100%,
      rgba(176,128,56,.20) 0deg 2.2deg, rgba(176,128,56,0) 2.2deg 9deg);
  -webkit-mask-image:radial-gradient(90% 78% at 50% 100%, #000 12%, transparent 72%);
  mask-image:radial-gradient(90% 78% at 50% 100%, #000 12%, transparent 72%)
}
.page-banner h1{
  font-size:clamp(2.75rem,10vw,4.5rem);line-height:.94;letter-spacing:-.02em;
  margin:10px 0 0;color:var(--ink-2)
}
.page-banner .banner-sub{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.15rem,3.2vw,1.75rem);color:var(--accent);margin-top:6px
}
.page-banner .lede{margin:22px auto 0;max-width:56ch;text-align:center}
/* The blog keeps the larger display size it was designed at. */
.page-banner.is-feature h1{font-size:clamp(3.25rem,13vw,6rem);line-height:.92}

/* ══ BLOG ══ */
.post-list{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:768px){.post-list{grid-template-columns:repeat(2,1fr)}}
.post-card{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.post-thumb{aspect-ratio:16/9;background:var(--bg3);object-fit:cover;width:100%}
.post-body{padding:20px;display:flex;flex-direction:column;gap:8px}
.post-title{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--ink-2)}
.post-excerpt{font-size:15px;color:var(--ink-dim)}
.post-meta{font-size:13px;color:var(--ink-dim);display:flex;gap:14px;flex-wrap:wrap}

/* ══ MODAL ══ */
.modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(16,40,80,.55);display:none;align-items:center;justify-content:center;padding:24px}
.modal-backdrop.open{display:flex}
.modal-panel{background:var(--bg);border-radius:var(--radius);max-width:640px;width:100%;max-height:86vh;overflow-y:auto;padding:28px;box-shadow:var(--shadow-lift)}
.modal-close{float:right;background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink-dim);min-height:44px;min-width:44px}

/* ══ FOOTER ══ */
.site-footer{background:var(--bg2);border-top:1px solid var(--rule);padding:56px 0 28px;margin-top:64px}
.foot-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.foot-grid{grid-template-columns:2fr 1fr 1fr}}
.foot-brand img{width:64px;margin-bottom:12px}
.foot-brand p{font-size:15px;color:var(--ink-dim);max-width:42ch}
.foot-col h4{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:12px}
.foot-col a{display:block;padding:5px 0;font-size:15px;color:var(--ink)}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:var(--ink-dim)}
.foot-501c3{font-size:13px;color:var(--ink-dim);margin-top:10px;max-width:52ch}

/* ══ CART ══ */
.cart-button{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--rule-2);border-radius:999px;background:transparent;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .2s var(--ease),color .2s var(--ease)}
.cart-button:hover{border-color:var(--accent);color:var(--accent)}
.cart-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.cart-count[hidden]{display:none}
/* Shadow only while open: the closed drawer sits at the viewport edge and its inward
   shadow painted a grey smear down the right of every page (overflow-x:hidden won't clip it). */
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);z-index:220;background:var(--bg);transform:translateX(100%);transition:transform .32s var(--ease);display:flex;flex-direction:column}
.cart-drawer.open{transform:none;box-shadow:-8px 0 40px rgba(16,40,80,.18)}
.cart-scrim{position:fixed;inset:0;z-index:210;background:rgba(16,40,80,.5);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.cart-scrim.open{opacity:1;visibility:visible;transition-delay:0s}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--rule)}
.cart-head h2{font-family:var(--display);font-size:1.5rem}
.cart-items{flex:1;overflow-y:auto;padding:8px 22px}
.cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule)}
.cart-item img{width:56px;height:72px;object-fit:contain;background:var(--bg3);border-radius:4px;flex:0 0 auto}
.cart-item-body{flex:1;min-width:0}
.cart-item-title{font-weight:600;font-size:15px;color:var(--ink-2);line-height:1.3}
.cart-item-fmt{font-size:12px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.cart-item-price{font-weight:700;margin-top:6px}
.qty-stepper{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--rule-2);border-radius:999px;margin-top:8px}
.qty-stepper button{width:36px;height:36px;border:none;background:transparent;font-size:18px;font-weight:700;color:var(--ink-2);cursor:pointer;border-radius:999px}
.qty-stepper button:hover{background:var(--bg3)}
.qty-stepper output{min-width:28px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.cart-remove{background:none;border:none;color:var(--ink-dim);font-size:13px;text-decoration:underline;cursor:pointer;padding:6px 0;min-height:36px}
.cart-remove:hover{color:var(--accent)}
.cart-foot{padding:20px 22px;border-top:1px solid var(--rule);background:var(--bg2)}
.cart-subtotal{display:flex;justify-content:space-between;align-items:baseline;font-size:1.125rem;font-weight:700;margin-bottom:6px}
.cart-note{font-size:13px;color:var(--ink-dim);margin-bottom:14px}
.cart-empty{text-align:center;color:var(--ink-dim);padding:48px 20px}


/* ══ POINTER TRUTH (audit R10) ══
   Whole cards were visually clickable but only their titles were. The stretched-link
   pattern makes the entire card the target while keeping exactly ONE link in the tab
   order — bigger target, no extra tab stops, no JS. */
.product-card{position:relative}
.product-card .product-title a::after{content:"";position:absolute;inset:0;z-index:0}
.product-card .product-actions,.product-card .btn,.product-card .format-chip{position:relative;z-index:1}
.post-card{position:relative}

/* Focus ring on filled crimson: the ring sits outside the button on --bg2 so it is visible
   today, but 1:1 against the button itself is a thin margin. Widen it. */
.btn-primary:focus-visible,.tile-accent:focus-visible,.btn-hero-ghost:focus-visible{outline-color:var(--ink-2)}

/* ══ CART + FORM MICRO-INTERACTIONS (audit R9) ══ */
/* An empty cart showed a "Subtotal $0.00" footer under 600px of blank panel. */
.cart-drawer[data-empty=true] .cart-foot{display:none}
.qty-stepper button:active{transform:scale(.92)}
.cart-item{transition:opacity .2s var(--ease)}
.cart-item[data-removing=true]{opacity:.35}
.form-field input:user-invalid,.form-field textarea:user-invalid{border-color:var(--accent)}
.btn[aria-busy=true]{opacity:.75;pointer-events:none}

/* ══ REVEAL ══ */
.reveal-on-scroll{opacity:0;transform:translateY(12px);transition:opacity .48s var(--ease),transform .48s var(--ease)}
.reveal-on-scroll.visible{opacity:1;transform:none}
/* Without JS there is nothing to add .visible, so the content would stay invisible forever.
   Anything that hides content by default MUST have a no-JS escape hatch. */
html.no-js .reveal-on-scroll{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.reveal-on-scroll{opacity:1;transform:none;transition:none}}

/* ══ ORNAMENT ══ */
.rule-gold{height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);margin:40px 0;border:0}