/* ─────────────────────────────────────────────────────────────────────────────
   Torment of Roses — third-pass identity: graphite-and-red.

   Client feedback driving this pass:
     1. The wine/blush palette read as "blushy and funereal" → replaced with
        near-black graphite greys and a single true red.
     2. Headings looked like Arial Black → replaced with a real typographic
        system: Bodoni Moda (display didone), Barlow Semi Condensed (labels/nav)
        and Inter (body). Faces are bundled locally in assets/fonts via fonts.css.
     3. The date band was plain → given display typography, texture and a red rule.
     4. RSVP calls to action needed constant focus → slow looping border shimmer.
     5. Backgrounds were flat → subtle CSS-generated grain, hatching and vignettes.

   Load order: this file is always last, so it overrides index.html's legacy inline
   styles, pages.css and ninja-forms.css (it absorbed the retired polish.css).
   WordPress port: keep this enqueue last (child theme) and scope the bare
   element selectors (header, details, h1…) per PORTING.md §3; the class hooks
   the drip and reveals rely on are .rose-mark, .brand-symbol, .hero-content
   and [data-reveal].
   No external requests, no extra assets, no markup dependencies.
   ───────────────────────────────────────────────────────────────────────────── */.site-root{
  /* Graphite ramp: black → dark grey panels. No warm or green cast. */
  --bg:#0a0a0b;
  --bg-soft:#101013;
  --panel:#16161a;
  --panel-2:#1d1d22;
  --ink:#f4f4f6;
  --muted:#9a9aa2;
  --line:#ffffff1c;

  /* One red, three roles: fill, shadowed depth, and legible text on black. */
  --red:#c8102e;
  --red-deep:#8f0b21;
  --red-bright:#ef4056;

  /* Neutral accent (bone/steel) keeps the layout from being red-on-red. */
  --accent:#c9ccd3;
  /* Legacy token name kept so shared rules in polish/pages/ninja-forms.css resolve. */
  --gold:var(--accent);
  --steel:#c9ccd3;

  --font-display:Georgia, 'Times New Roman', serif;
  --font-ui:'Barlow Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;

  /* Texture layers: monochrome SVG grain + a fine engineered hatch. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  --hatch:repeating-linear-gradient(115deg,#ffffff09 0 1px,transparent 1px 9px);
  --hairline:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 4px);
  --grain-opacity:.42;
}/* ── Base surface ──────────────────────────────────────────────────────────── */.site-root{
  background-color:var(--bg);
  background-image:var(--grain), radial-gradient(120% 80% at 50% -12%,#ffffff0d,transparent 62%);
  background-repeat:repeat, no-repeat;
  background-blend-mode:soft-light, normal;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}/* Grain sits on the photograph too, so the hero is not a flat rectangle. */.site-root .hero:before{
  background-image:var(--grain), var(--hatch),
    linear-gradient(90deg,#0a0a0b 4%,#0a0a0be8 26%,#0a0a0b93 62%,#0a0a0b1f),
    linear-gradient(0deg,#0a0a0b,transparent 32%);
  background-repeat:repeat, repeat, no-repeat, no-repeat;
}.site-root .hero:after{ background-image:radial-gradient(ellipse at 76% 44%,#c8102e30,transparent 64%); }.site-root .hero-image{ filter:brightness(.55) saturate(.62) contrast(1.04); }.site-root ::selection{ background:var(--red); color:#fff; }.site-root a:focus-visible,.site-root button:focus-visible,.site-root summary:focus-visible,.site-root [tabindex]:focus-visible{
  outline:2px solid var(--red-bright);
  outline-offset:4px;
}/* ── Typography system ─────────────────────────────────────────────────────── */.site-root h1,.site-root h2,.site-root h3,.site-root .serif,.site-root .brand-name,.site-root .card-num,.site-root .signature,.site-root .hero-seal strong,.site-root .detail-value,.site-root .invitation h2,.site-root .page-heading h1,.site-root .prose h2,.site-root .prose h3,.site-root .comparison-heading h3,.site-root .performer h2,.site-root .donation-card h2{
  font-family:var(--font-display);
  font-weight:400;
}.site-root h1,.site-root h2{ letter-spacing:-.015em; }.site-root h1{ font-weight:400; }.site-root h3{ letter-spacing:-.005em; }/* The italic accent word is where the red enters the headline. */.site-root h1 em,.site-root h2 em,.site-root .invitation h2 em{ font-style:italic; font-weight:400; color:var(--red-bright); }.site-root h1{ text-shadow:0 10px 46px #0007; }.site-root p,.site-root .body-copy,.site-root .prose,.site-root .hero-copy,.site-root figcaption,.site-root .comparison-card dd,.site-root .donation-card p,.site-root .performer p,.site-root .tor-form .nf-field-description{
  font-family:var(--font-body);
}/* Condensed grotesque for every label, control and micro-copy. */.site-root .eyebrow,.site-root nav,.site-root .menu-toggle,.site-root .button,.site-root .nav-cta,.site-root .nav-donate,.site-root .text-link,.site-root summary,.site-root .preview-note,.site-root .footer-links,.site-root .skip,.site-root .hero-note,.site-root .presenter span,.site-root .hero-seal span,.site-root .card .eyebrow,.site-root .comparison-heading span,.site-root .performer-role,.site-root .tor-form .nf-field-label label,.site-root .tor-form .nf-field-element input[type="submit"],.site-root .tor-form .nf-field-element button,.site-root .tor-form .nf-error-msg,.site-root .tor-form .nf-form-fields-required,.site-root .site-map-scroll-hint,.site-root figcaption{
  font-family:var(--font-ui);
}.site-root .eyebrow,.site-root .detail .eyebrow,.site-root .card .eyebrow,.site-root .comparison-heading span{
  font-weight:600;
  letter-spacing:.22em;
  color:var(--accent);
}.site-root nav{ font-weight:500; letter-spacing:.14em; text-transform:uppercase; }.site-root summary{ font-weight:500; letter-spacing:.03em; }.site-root .body-copy,.site-root .prose{ color:#e4e4e9; }.site-root .hero-copy,.site-root .page-lead{ color:var(--muted); }.site-root .signature{ color:var(--ink); }/* Wordmark: real masthead lettering instead of default-sans caps. */.site-root .brand-name{
  font-family:var(--font-display);
  font-size:clamp(19px,1.7vw,25px);
  font-weight:700;
  letter-spacing:.09em;
  color:var(--ink);
}.site-root .brand small{
  margin-top:2px;
  line-height:1.15;
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:500;
  letter-spacing:.3em;
  color:var(--accent);
}.site-root .brand-symbol{ color:var(--red); }/* ── 3. Date band: the "at a glance" strip was the plainest area ───────────── */.site-root .details{
  position:relative;
  background-color:var(--bg-soft);
  background-image:var(--grain), var(--hatch),
    linear-gradient(100deg,#101013,#0a0a0b 45%,#131317);
  background-repeat:repeat, repeat, no-repeat;
  background-size:160px 160px, auto, cover;
  background-blend-mode:soft-light, normal, normal;
  border-top:1px solid #c8102e66;
  border-bottom:1px solid var(--line);
}/* Red hairline that anchors the strip to the brand instead of floating flat. */.site-root .details:before{
  content:'';
  position:absolute;
  inset:0 auto auto 0;
  height:2px;
  width:min(220px,26%);
  background:linear-gradient(90deg,var(--red),transparent);
}.site-root .detail{ border-left-color:#ffffff1f; }.site-root .detail .eyebrow{
  display:block;
  font-weight:600;
  letter-spacing:.26em;
  color:var(--accent);
}.site-root .detail .eyebrow:before{
  content:'';
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:9px;
  background:var(--red);
  vertical-align:middle;
  transform:rotate(45deg);
}/* The date/time itself gets display type, lining figures and real presence. */.site-root .detail p,.site-root .detail .detail-value{
  font-family:var(--font-display);
  font-size:clamp(23px,2.35vw,34px);
  line-height:1.16;
  letter-spacing:-.005em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--ink);
  margin:14px 0 0;
  overflow-wrap:anywhere;
}.site-root .detail small{
  font-family:var(--font-ui);
  font-size:12.5px;
  letter-spacing:.01em;
  color:var(--muted);
  margin-top:10px;
}/* First slot is the date: let one red value carry the accent. */.site-root .detail:first-child p{ color:var(--red-bright); }.site-root .time{
  font-family:var(--font-display);
  font-size:clamp(22px,2.2vw,30px);
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--ink);
}.site-root .card-num{
  font-family:var(--font-display);
  color:#ffffff2e;
  font-size:clamp(42px,4vw,58px);
}.site-root .hero-seal{
  border-color:#ffffff2b;
  color:var(--accent);
  background:#0a0a0b8c;
  box-shadow:0 0 0 7px #ffffff08, inset 0 0 30px #0006;
}.site-root .hero-seal strong{ color:var(--red-bright); }/* ── 4. RSVP call to action: constant, slow, looping border shimmer ────────── */.site-root a.button[href*="rsvp"],.site-root .nav-cta{
  position:relative;
  border:1px solid #ffffff24;
  border-radius:10px;
  background:linear-gradient(118deg,var(--red),var(--red-deep));
  color:#fff;
  font-family:var(--font-ui);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 #ffffff26, 0 10px 30px #0000004d;
}.site-root a.button[href*="rsvp"]::after,.site-root .nav-cta::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background-image:linear-gradient(115deg,
    #ffffff00 0 34%, #ef4056 46%, #ffe3e7 50%, #ef4056 54%, #ffffff00 66% 100%);
  background-size:260% 100%;
  background-repeat:no-repeat;
  background-position:190% 0;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:tor-rsvp-shimmer 6s linear infinite;
}
@keyframes tor-rsvp-shimmer {
  from { background-position:190% 0; }
  to   { background-position:-90% 0; }
}.site-root a.button[href*="rsvp"]:hover,.site-root a.button[href*="rsvp"]:focus-visible,.site-root .nav-cta:hover,.site-root .nav-cta:focus-visible{
  background:linear-gradient(118deg,#e01633,#a20d26);
  border-color:#ef405699;
  transform:translateY(-2px);
}.site-root .button:not([href*="rsvp"]){
  border:1px solid #ffffff24;
  border-radius:10px;
  background:linear-gradient(118deg,#232329,#141418);
  box-shadow:inset 0 1px 0 #ffffff1f;
}.site-root .button:not([href*="rsvp"]):hover{ background:linear-gradient(118deg,#2e2e35,#181820); }/* ── 5. Modern surface: sticky glass header, scroll reveals, hero entrance ─── *//* The header stays with you; content scrolls under a frosted graphite pane. */.site-root header{
  position:sticky;
  top:0;
  z-index:40;
  background:#0a0a0bf2;
}/* Header fit: one-line masthead, tighter nav, always-visible RSVP cluster. */.site-root .brand-name{ white-space:nowrap; }.site-root nav{ gap:clamp(12px,1.5vw,29px); font-size:10.5px; letter-spacing:.12em; margin-left:auto; justify-content:flex-start; order:1; }.site-root nav a{ white-space:nowrap; }.site-root .nav-donate{ color:var(--muted); }.site-root .nav-actions{ display:flex; align-items:center; gap:14px; flex:0 0 auto; order:2; }.site-root .nav-cta{ display:inline-flex; align-items:center; white-space:nowrap; }.site-root .menu-toggle{ display:none; }/* Mid widths: links collapse behind the hamburger; RSVP Now never hides. */

@media (max-width:1280px) {.site-root .nav-donate{ display:none; }.site-root .brand small{ display:none; }
}
@media (max-width:1180px) {.site-root .menu-toggle{ display:inline-block; }.site-root .nav{ flex-wrap:wrap; }.site-root nav{ order:3; display:none; width:100%; flex-direction:column; align-items:stretch; gap:0; padding:10px 0 6px; }.site-root nav.open{ display:flex; }.site-root nav a{ padding:14px 10px; border-top:1px solid var(--line); }.site-root nav a:first-child{ border-top:0; }
}
@media (max-width:600px) {.site-root .brand-symbol img{ width:34px; height:39px; }.site-root .brand-name{ font-size:14px; letter-spacing:.06em; }.site-root .nav-actions{ width:100%; gap:10px; margin:2px 0 8px; }.site-root .nav-actions .nav-cta{ flex:1; justify-content:center; padding:13px 16px; }.site-root .menu-toggle{ flex:0 0 auto; }
}/* Modern text setting and a slim dark scrollbar. */.site-root h1,.site-root h2,.site-root h3,.site-root .invitation h2,.site-root .page-heading h1{ text-wrap:balance; }.site-root p,.site-root .body-copy,.site-root .prose{ text-wrap:pretty; }.site-root{ scrollbar-color:#2e2e36 transparent; scrollbar-width:thin; }.site-root ::-webkit-scrollbar{ width:10px; height:10px; }.site-root ::-webkit-scrollbar-thumb{ background:#2b2b33; border-radius:8px; border:2px solid var(--bg); }.site-root ::-webkit-scrollbar-thumb:hover{ background:#3c3c46; }.site-root ::-webkit-scrollbar-track{ background:transparent; }/* Cards lift toward the visitor with a faint red edge-light. */.site-root .card,.site-root .donation-card,.site-root .performer,.site-root .comparison-card{
  transition:transform .5s cubic-bezier(.22,.61,.36,1), border-color .5s, box-shadow .5s;
}.site-root .card:hover,.site-root .donation-card:hover,.site-root .performer:hover,.site-root .comparison-card:hover{
  transform:translateY(-5px);
  border-color:#ef405659;
  box-shadow:0 30px 60px -30px #000000e6, 0 0 0 1px #ef40561f;
}.site-root summary:hover{ color:var(--red-bright); }/* The FAQ answer drifts in when a question is opened. */.site-root details[open] p{ animation:tor-faq-in .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes tor-faq-in {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:none; }
}/* Hero entrance: staged rise on load, independent of JavaScript. */.site-root .hero-content > *{ animation:tor-hero-rise .9s cubic-bezier(.22,.61,.36,1) both; }.site-root .hero-content > *:nth-child(2){ animation-delay:.14s; }.site-root .hero-content > *:nth-child(3){ animation-delay:.28s; }.site-root .hero-content > *:nth-child(4){ animation-delay:.42s; }.site-root .hero-content > *:nth-child(n+5){ animation-delay:.56s; }.site-root .hero-seal{ animation:tor-seal-in 1.1s cubic-bezier(.22,.61,.36,1) .5s both; }
@keyframes tor-hero-rise {
  from { opacity:0; transform:translateY(34px); }
  to   { opacity:1; transform:none; }
}
@keyframes tor-seal-in {
  from { opacity:0; transform:rotate(9deg) scale(.82); }
  to   { opacity:1; transform:rotate(9deg); }
}/* Scroll reveals: reveal.js tags blocks with data-reveal; .is-in lands them.
   No JS → no attribute → everything visible. Reduced motion → static. */.site-root [data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--reveal-step, 0) * 90ms);
}.site-root [data-reveal].is-in{ opacity:1; transform:none; }/* ── 6. The bleeding rose: droplets swell, detach and fall from the mark ───── */.site-root .brand-symbol{ position:relative; display:inline-block; }.site-root .brand-symbol img{ display:block; }.site-root .rose-mark::before,.site-root .rose-mark::after{
  content:'';
  position:absolute;
  top:calc(100% - 1px);
  width:4px;
  height:9px;
  background:linear-gradient(180deg,#ff8296,var(--red) 45%,var(--red-deep));
  border-radius:50% 50% 55% 55% / 32% 32% 68% 68%;
  box-shadow:0 0 8px #c8102e59, inset 0 -2px 3px #7f0c1e;
  transform-origin:50% 0;
  pointer-events:none;
}/* Two drips off the bloom and the leaf, out of phase with each other. */.site-root .rose-mark::before{ left:44%; animation:tor-rose-drip 3.4s cubic-bezier(.5,.05,.7,1) .6s infinite; }.site-root .rose-mark::after{ left:66%; animation:tor-rose-drip 4.2s cubic-bezier(.5,.05,.7,1) 2.1s infinite; }
@keyframes tor-rose-drip {
  0%   { opacity:0; transform:scale(.15,.25); }
  14%  { opacity:1; transform:scale(.55,1); }
  42%  { opacity:1; transform:scale(.85,1.35) translateY(2px); }
  55%  { opacity:1; transform:scale(1,1.7) translateY(4px); }
  78%  { opacity:1; transform:scale(.7,1.5) translateY(30px); }
  100% { opacity:0; transform:scale(.35,1.1) translateY(46px); }
}/* ── 7. Home page video loop: silent, autoplaying, framed like a still ─────── */.site-root .video-feature{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:48px;
  align-items:center;
}.site-root .video-copy .body-copy{ max-width:430px; }.site-root .video-frame{
  margin:0;
  position:relative;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:#000;
  box-shadow:0 40px 80px -40px #000000d9, 0 0 0 1px #c8102e1a;
}.site-root .video-frame::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:var(--grain);
  background-repeat:repeat;
  mix-blend-mode:soft-light;
  opacity:.28;
}.site-root .video-frame video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }.site-root .video-frame figcaption{ padding:12px 16px; border-top:1px solid var(--line); background:#0a0a0b; }
@media (max-width:900px) {.site-root .video-feature{ grid-template-columns:1fr; gap:22px; }
}/* ── Reduced motion: stillness for everyone who asks for it ────────────────── */



@media (prefers-reduced-motion: reduce) {.site-root header{ backdrop-filter:none; -webkit-backdrop-filter:none; }.site-root .hero-content > *,.site-root .hero-seal{ animation:none; }.site-root [data-reveal]{ opacity:1; transform:none; transition:none; }.site-root .rose-mark::before,.site-root .rose-mark::after{ animation:none; opacity:0; }.site-root .card,.site-root .donation-card,.site-root .performer,.site-root .comparison-card{ transition:none; }.site-root details[open] p{ animation:none; }.site-root a.button[href*="rsvp"]::after,.site-root .nav-cta::after{ animation:none; }
}/* ── @@NEXT2@@ ─────────────────────────────────────────────────────────────── *//* ── 8. Prominent off-canvas navigation ───────────────────────────────────── *//* Keep the masthead calm at every desktop width: the complete navigation now
   lives in a dedicated panel, while the primary RSVP action never disappears. */.site-root .nav{
  flex-wrap:nowrap !important;
  position:relative;
}.site-root,.site-root{ overflow-x:clip; }.site-root .nav-actions{
  margin-left:auto;
  position:relative;
  z-index:62;
}.site-root .menu-toggle{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-width:92px;
  padding:13px 18px;
  border:1px solid #ffffff38;
  border-radius:999px;
  color:var(--ink);
  background:#17171cd9;
  cursor:pointer;
  letter-spacing:.13em;
  text-transform:uppercase;
  transition:color .25s, border-color .25s, background .25s, transform .25s;
}.site-root .menu-toggle::before{
  content:'';
  width:8px;
  height:8px;
  margin-right:9px;
  border-radius:50%;
  background:var(--red-bright);
  box-shadow:0 0 14px #ef4056a8;
}.site-root .menu-toggle:hover,.site-root .menu-toggle[aria-expanded="true"]{
  color:#fff;
  border-color:#ef40568c;
  background:#24171b;
  transform:translateY(-1px);
}.site-root header #navigation{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:58;
  display:flex !important;
  width:min(440px,92vw);
  height:100dvh;
  margin:0;
  padding:clamp(120px,16vh,170px) clamp(28px,5vw,58px) 42px;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:0;
  overflow-y:auto;
  background:
    radial-gradient(circle at 100% 0,#8f102835,transparent 42%),
    linear-gradient(150deg,#17171cf8,#09090cfb 76%);
  border-left:1px solid #ffffff20;
  box-shadow:-32px 0 80px #000b;
  transform:translateX(104%);
  visibility:hidden;
  transition:transform .55s cubic-bezier(.22,.61,.36,1), visibility 0s linear .55s;
}.site-root header #navigation.open{
  transform:translateX(0);
  visibility:visible;
  transition:transform .55s cubic-bezier(.22,.61,.36,1), visibility 0s;
}.site-root header #navigation a{
  display:flex;
  align-items:center;
  min-height:62px;
  padding:13px 2px;
  border-top:1px solid #ffffff18;
  color:#d8d8df;
  font-family:var(--font-display);
  font-size:clamp(24px,3vw,35px);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.05;
  text-transform:none;
  transition:color .2s, padding-left .25s;
}.site-root header #navigation a:first-child{ border-top:0; }.site-root header #navigation a::after{
  content:'↗';
  margin-left:auto;
  color:#ffffff30;
  font-family:var(--font-ui);
  font-size:15px;
}.site-root header #navigation a:hover,.site-root header #navigation a[aria-current="page"]{
  padding-left:10px;
  color:#fff;
}.site-root header #navigation a[aria-current="page"]::before{
  content:'';
  width:7px;
  height:7px;
  margin-right:12px;
  border-radius:50%;
  background:var(--red-bright);
  box-shadow:0 0 13px #ef4056a8;
}.site-root header:has(#navigation.open)::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:50;
  background:#050507b8;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}.site-root body:has(#navigation.open){ overflow:hidden; }/* ── 9. Hero highlights reel ──────────────────────────────────────────────── */.site-root .hero-video-card{
  position:absolute;
  right:clamp(24px,5vw,72px);
  top:50%;
  bottom:auto;
  z-index:3;
  width:min(35vw,455px);
  margin:0;
  overflow:hidden;
  border:1px solid #ffffff30;
  border-radius:24px;
  background:#0a0a0bea;
  box-shadow:0 34px 90px -26px #000, 0 0 0 1px #ef405619;
  animation:tor-hero-video-in .7s cubic-bezier(.22,.61,.36,1) .3s both;
}.site-root .hero-video-window{ position:relative; overflow:hidden; background:#000; }.site-root .hero-video-window::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,#050507b8),var(--grain);
  opacity:.62;
}.site-root .hero-video-card video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1), filter .5s;
}.site-root .hero-video-card:hover video{ transform:scale(1.035); filter:saturate(1.08); }.site-root .hero-video-play{
  position:absolute;
  right:15px;
  bottom:14px;
  z-index:2;
  padding:8px 11px;
  border:1px solid #ffffff36;
  border-radius:999px;
  background:#09090bbd;
  color:#fff;
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}.site-root .hero-video-card figcaption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 18px 17px;
}.site-root .hero-video-card figcaption span{
  color:var(--muted);
  font-family:var(--font-ui);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
}.site-root .hero-video-card figcaption strong{
  color:#fff;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:400;
  text-align:right;
}.site-root .hero .hero-seal{
  right:clamp(18px,4vw,60px);
  top:calc(50% - 215px);
  bottom:auto;
  z-index:4;
  width:100px;
  height:100px;
  background:#0a0a0bd9;
  box-shadow:0 18px 40px #0008, 0 0 0 7px #ffffff08;
}
@keyframes tor-hero-video-in {
  from { opacity:0; transform:translateY(calc(-50% + 24px)) scale(.97); }
  to { opacity:1; transform:translateY(-50%); }
}

@media (max-width:900px) {.site-root .hero{
    display:block;
    min-height:0;
    padding-bottom:34px;
  }.site-root .hero-content{ padding-bottom:36px; }.site-root .hero-video-card{
    position:relative;
    right:auto;
    top:auto;
    bottom:auto;
    width:min(86%,620px);
    margin:0 auto;
    border-radius:20px;
    transform:none;
  }.site-root .hero .hero-seal{ display:none; }
}
@media (max-width:600px) {/* One compact, intentional phone toolbar: brand mark + RSVP + Menu. */.site-root .nav{
    min-height:72px;
    flex-wrap:nowrap !important;
    gap:8px;
    padding:12px 0;
  }.site-root .brand{ flex:0 1 auto; min-width:0; gap:6px; }.site-root .brand-symbol img{ width:34px; height:39px; }/* Keep the actual wordmark on phones; only the descriptor is omitted. */.site-root .brand-name{
    display:block;
    min-width:0;
    font-size:11.5px;
    letter-spacing:.035em;
    line-height:1;
  }.site-root .brand small{ display:none; }.site-root .nav-actions{
    width:auto;
    margin:0 0 0 auto;
    gap:8px;
  }.site-root .nav-actions .nav-cta{
    flex:0 0 auto;
    min-height:44px;
    padding:12px 14px;
    font-size:0;
    letter-spacing:0;
  }.site-root .nav-actions .nav-cta::before{
    content:'RSVP';
    font-family:var(--font-ui);
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
  }.site-root .menu-toggle{
    min-width:78px;
    min-height:44px;
    padding:10px 12px;
    font-size:11px;
    letter-spacing:.11em;
  }.site-root .menu-toggle::before{ width:6px; height:6px; margin-right:6px; }.site-root header #navigation{ width:100%; padding:112px 24px 34px; }.site-root .hero-video-card figcaption{ align-items:flex-start; flex-direction:column; gap:5px; }.site-root .hero-video-card figcaption strong{ text-align:left; }
}

@media (max-width:350px) {.site-root .brand{ gap:4px; }.site-root .brand-symbol img{ width:29px; height:34px; }.site-root .brand-name{ font-size:9.5px; letter-spacing:.02em; }.site-root .nav-actions{ gap:6px; }.site-root .nav-actions .nav-cta{ min-height:40px; padding:10px 11px; }.site-root .menu-toggle{ min-width:65px; min-height:40px; padding-inline:8px; font-size:10px; }
}

@media (prefers-reduced-motion:reduce) {.site-root .hero-video-card{ animation:none; transform:translateY(-50%); }.site-root .hero-video-card video{ transition:none; }.site-root header #navigation{ transition:none; }
}/* ── 10. Tighter hero rhythm and immediate menu response ─────────────────── */.site-root .hero h1{ margin-bottom:12px; }.site-root .hero-copy{ margin-top:0; }.site-root header #navigation{
  background:linear-gradient(150deg,#17171c,#09090c 76%);
  box-shadow:-18px 0 36px #0009;
  transition:transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s linear .24s;
}.site-root header #navigation.open{
  transition:transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s;
}.site-root header:has(#navigation.open)::before{
  background:#050507c7;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}/* Once the panel is open, its own RSVP item replaces the header CTA. */.site-root header:has(#navigation.open) .nav-actions .nav-cta{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}.site-root header #navigation .nav-rsvp{
  min-height:auto;
  margin:0 0 20px;
  padding:15px 18px;
  border:1px solid #ef405699;
  border-radius:10px;
  background:linear-gradient(118deg,var(--red),var(--red-deep));
  color:#fff;
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}.site-root header #navigation .nav-rsvp::after{ color:#fff; }.site-root header #navigation .nav-rsvp:hover{ padding-left:18px; background:linear-gradient(118deg,#e01633,#a20d26); }

@media (max-width:900px) {.site-root .hero-video-card{ transform:none; }
}
@media (prefers-reduced-motion:reduce) and (max-width:900px) {.site-root .hero-video-card{ transform:none; }
}/* ── 11. Hero composition: explicit mobile flow, enlarged desktop frame ─── */


@media (min-width:901px) {.site-root .hero-video-card{
    /* A larger, centered companion to the copy—not a corner ornament. */
    right:clamp(22px,3.25vw,52px);
    width:min(41vw,560px);
  }
}

@media (max-width:900px) {.site-root .hero-content{ padding-bottom:24px; }.site-root .hero-video-card{
    /* The entrance animation owns transform on desktop; turn it off here so
       it cannot pull the in-flow card back over the CTA buttons. */
    position:relative;
    inset:auto;
    display:block;
    width:min(86%,620px);
    margin:0 auto;
    transform:none !important;
    animation:none;
  }
}/* A quiet milestone label, not a novelty seal. It aligns to the video frame
   and leaves the title and image to do the visual work. */.site-root .hero .hero-seal{
  display:inline-flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:8px;
  width:auto;
  height:auto;
  padding:9px 12px 10px;
  border:1px solid #ffffff2e;
  border-radius:5px;
  background:#0a0a0bd9;
  box-shadow:none;
  color:var(--muted);
  transform:none;
}.site-root .hero .hero-seal strong{
  color:var(--red-bright);
  font-size:22px;
  line-height:1;
}.site-root .hero .hero-seal span{
  font-size:9px;
  font-weight:600;
  letter-spacing:.14em;
  line-height:1;
  text-transform:uppercase;
}
@media (min-width:901px) {.site-root .hero .hero-seal{
    right:clamp(22px,3.25vw,52px);
    top:calc(50% - 247px);
  }
}/* Retire the milestone badge entirely; it is not stable across hero crops. */.site-root .hero .hero-seal{ display:none !important; }/* Content words stay intact; line breaks occur between words only. */.site-root p,.site-root li,.site-root dd,.site-root dt,.site-root small,.site-root figcaption,.site-root .detail-value,.site-root .page-heading h1,.site-root .comparison-card,.site-root .donation-card,.site-root .content-note,.site-root .prose,.site-root .tor-form{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

@media (max-width:600px) {/* A phone header needs one clear control: the conventional hamburger. */.site-root .nav-actions .nav-cta{ display:none; }.site-root .nav-actions{ gap:0; }.site-root .menu-toggle{
    position:relative;
    width:46px;
    min-width:46px;
    min-height:44px;
    padding:0;
    border:0;
    border-radius:6px;
    background:transparent;
    font-size:0;
  }.site-root .menu-toggle::before{
    width:21px;
    height:2px;
    margin:0;
    border-radius:1px;
    background:#fff;
    box-shadow:0 -7px #fff, 0 7px #fff;
  }.site-root .menu-toggle[aria-expanded="true"]::before{
    transform:rotate(45deg);
    box-shadow:none;
  }.site-root .menu-toggle[aria-expanded="true"]::after{
    content:'';
    position:absolute;
    width:21px;
    height:2px;
    border-radius:1px;
    background:#fff;
    transform:rotate(-45deg);
  }
}