/* Keep the primary action first in the desktop slide-out, and retain a
   legible masthead descriptor on small screens that display it. */
.site-root.site-root header #navigation .nav-rsvp { order:-1; }
.site-root.site-root header #navigation .nav-donate {
  order:-2;
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  margin:0 0 10px;
  padding:13px 20px;
  border:1px solid #6ee7d080;
  border-radius:8px;
  background:linear-gradient(120deg,#0f9f87,#08708f);
  color:#fff;
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1;
  text-transform:uppercase;
  box-shadow:0 14px 30px -22px #23d5ab;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.site-root.site-root header #navigation .nav-donate:hover,
.site-root.site-root header #navigation .nav-donate:focus-visible {
  background:linear-gradient(120deg,#13b99d,#0781a6);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 18px 34px -20px #23d5ab;
}
@media (max-width:760px) {
  .site-root.site-root header .brand small {
    color:#fff !important;
    text-shadow:0 1px 2px #000;
  }
}

/* 2.2 responsive and interaction refinements. */
@media (min-width:901px) {
  /* Align the reel to the same 1120px content rails as the copy. The old
     viewport-relative offset drifted noticeably right on ultrawide screens. */
  .site-root.site-root .hero-video-card {
    right:max(7vw, calc((100vw - 1120px) / 2));
    width:clamp(420px,36vw,560px);
  }

  /* Keep the last at-a-glance value on a natural word boundary. */
  .site-root.site-root .detail-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .site-root.site-root .detail {
    display:flex;
    min-width:0;
    flex-direction:column;
  }
  .site-root.site-root .detail p {
    min-height:3.48em;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
    text-wrap:balance;
  }
  .site-root.site-root .detail:last-child p {
    font-size:clamp(21px,1.8vw,28px);
    white-space:normal;
  }
  .site-root.site-root .detail small { margin-top:auto; }
}

@media (max-width:900px) {
  .site-root.site-root .hero-video-card { width:min(92%,680px); }
}

@media (min-width:761px) and (max-width:1000px) {
  .site-root.site-root .detail-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
  }
  .site-root.site-root .detail {
    min-height:190px;
    padding:28px;
    border-top:1px solid var(--line);
  }
  .site-root.site-root .detail:nth-child(-n+2) { border-top:0; }
  .site-root.site-root .detail:nth-child(odd) { border-left:0; }
  .site-root.site-root .detail p {
    min-height:0;
    overflow-wrap:normal;
    word-break:normal;
  }
}

/* Sponsor art uses one invariant frame. Individual uploaded logos can be
   centered with object-fit:contain without changing card height or cropping. */
.site-root.site-root .sponsor-logo-stage {
  width:100%;
  min-height:0;
  aspect-ratio:16 / 10;
}
.site-root.site-root .sponsor-logo-stage img {
  display:block;
  width:100%;
  height:100%;
  padding:clamp(10px,1.5vw,20px);
  object-fit:contain;
  object-position:center;
}
.site-root.site-root .sponsor-logo-placeholder {
  display:grid;
  width:100%;
  height:100%;
  padding:16px;
  place-items:center;
  color:var(--gold);
  font-family:var(--font-display);
  font-size:clamp(23px,3vw,38px);
  line-height:1.12;
  text-align:center;
}

/* Keep the credit readable as two distinct phrases, then give the sponsor
   name a vivid, continuously shifting PartyWorks-style treatment. */
.site-root.site-root .presenter {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.45em;
}
.site-root.site-root .presenter a {
  display:inline-block;
  font-weight:800;
  letter-spacing:.015em;
  background:linear-gradient(100deg,#a855f7 0%,#f000b8 28%,#ff4fd8 50%,#7c3aed 76%,#a855f7 100%);
  background-size:260% 100%;
  background-position:0 50%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 8px #d946ef42);
  animation:tor-partyworks-gradient 4s linear infinite;
}
@keyframes tor-partyworks-gradient {
  to { background-position:260% 50%; }
}

.site-root.site-root .tor-site-credit {
  margin:22px auto 0;
  padding:16px 7% 0;
  border-top:1px solid #ffffff12;
  color:#77747b;
  font-size:11px;
  letter-spacing:.08em;
  line-height:1.5;
  text-align:center;
  text-transform:uppercase;
}
.site-root.site-root .tor-site-credit a {
  background:linear-gradient(105deg,#9b979f 0%,#d8d6da 35%,#fff 50%,#c7c4ca 65%,#9b979f 100%);
  background-size:240% 100%;
  background-position:100% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-decoration:none;
  filter:drop-shadow(0 0 5px #ffffff10);
  animation:tor-credit-shimmer 6.5s ease-in-out infinite;
}
.site-root.site-root .tor-site-credit a:hover,
.site-root.site-root .tor-site-credit a:focus-visible {
  background:none;
  color:var(--gold);
}
@keyframes tor-credit-shimmer {
  0%,18% { background-position:100% 50%; }
  72%,100% { background-position:-100% 50%; }
}
@media (prefers-reduced-motion:reduce) {
  .site-root.site-root .tor-site-credit a {
    animation:none;
    background:none;
    color:#c4c1c7;
  }
}

/* Reusable host portrait: compact beside the homepage signature and a more
   editorial framed contact card on Eric's page. */
.site-root.site-root .tor-host-signature {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:22px;
}
.site-root.site-root .tor-host-signature .signature { margin:0 0 5px; }
.site-root.site-root .tor-host-photo {
  display:block;
  object-fit:cover;
  object-position:center;
  background:linear-gradient(145deg,#2b1b21,#101014);
}
.site-root.site-root .tor-host-photo--small {
  flex:0 0 64px;
  width:64px;
  height:64px;
  border:2px solid #dfb45c88;
  border-radius:50%;
  box-shadow:0 12px 30px -17px #dfb45c;
}
.site-root.site-root .tor-host-photo-placeholder {
  place-items:center;
  color:var(--gold);
  font-family:var(--font-display);
  font-weight:700;
}
.site-root.site-root .tor-host-contact-section {
  padding:0 0 90px;
}
.site-root.site-root .tor-host-contact-card {
  display:grid;
  grid-template-columns:minmax(220px,300px) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);
  max-width:920px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid #dfb45c4f;
  border-radius:24px;
  background:linear-gradient(145deg,#22171c,#111114 70%);
  box-shadow:0 35px 75px -55px #dfb45c;
}
.site-root.site-root .tor-host-contact-photo {
  min-height:360px;
  aspect-ratio:4 / 5;
  overflow:hidden;
  background:radial-gradient(circle at 50% 20%,#dfb45c22,transparent 55%),#0b0b0d;
}
.site-root.site-root .tor-host-photo--contact {
  width:100%;
  height:100%;
  min-height:360px;
  font-size:clamp(48px,7vw,82px);
}
.site-root.site-root .tor-host-contact-copy {
  align-self:center;
  padding:38px 46px 38px 0;
}
.site-root.site-root .tor-host-contact-copy h2 {
  margin:12px 0 16px;
  font-size:clamp(38px,5vw,62px);
}
.site-root.site-root .tor-host-contact-copy p {
  max-width:460px;
  margin:0 0 25px;
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
}
.site-root.site-root .tor-host-phone {
  display:inline-flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border:1px solid #dfb45c73;
  border-radius:10px;
  background:linear-gradient(120deg,#a32337,#741526);
  color:#fff;
  font-family:var(--font-ui);
  font-weight:700;
  letter-spacing:.08em;
  transition:transform .2s ease,background .2s ease;
}
.site-root.site-root .tor-host-phone:hover,
.site-root.site-root .tor-host-phone:focus-visible {
  background:linear-gradient(120deg,#bd2d43,#8c1c30);
  transform:translateY(-2px);
}
@media (max-width:700px) {
  .site-root.site-root .tor-host-contact-card { grid-template-columns:1fr; }
  .site-root.site-root .tor-host-contact-photo {
    width:100%;
    min-height:0;
    aspect-ratio:4 / 3;
  }
  .site-root.site-root .tor-host-photo--contact { min-height:0; }
  .site-root.site-root .tor-host-contact-copy { padding:4px 26px 32px; }
  .site-root.site-root .tor-host-phone { width:100%; }
}

/* Warm but unmistakable privacy reminder above the live RSVP form. */
.site-root.site-root .tor-rsvp-notice {
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:22px;
  max-width:850px;
  margin:0 auto 26px;
  overflow:hidden;
  padding:26px 28px;
  border:1px solid transparent;
  border-radius:18px;
  background:
    linear-gradient(145deg,#241522,#15131a) padding-box,
    linear-gradient(110deg,#dfb45c,#ef4056,#d946ef,#dfb45c) border-box;
  background-size:100% 100%,260% 100%;
  box-shadow:0 22px 55px -38px #d946ef, inset 0 1px #ffffff12;
  animation:tor-notice-border 7s linear infinite;
}
.site-root.site-root .tor-rsvp-notice::after {
  content:"";
  position:absolute;
  inset:-80% -20%;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,#ffffff0d 49%,#ffffff1a 50%,#ffffff0d 51%,transparent 58%);
  transform:translateX(-38%);
  animation:tor-notice-sheen 5.5s ease-in-out infinite;
}
.site-root.site-root .tor-rsvp-notice > * { position:relative; z-index:1; }
.site-root.site-root .tor-rsvp-notice-icon {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid #dfb45c66;
  border-radius:50%;
  background:#dfb45c12;
  color:#f3cf82;
  font-size:22px;
  box-shadow:0 0 24px #dfb45c20;
  animation:tor-notice-pulse 3.2s ease-in-out infinite;
}
.site-root.site-root .tor-rsvp-notice .eyebrow { margin:0 0 8px; }
.site-root.site-root .tor-rsvp-notice h2 {
  margin:0 0 10px;
  font-size:clamp(25px,3vw,34px);
  line-height:1.12;
}
.site-root.site-root .tor-rsvp-notice p:last-child {
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}
@keyframes tor-notice-border {
  to { background-position:0 0,260% 0; }
}
@keyframes tor-notice-sheen {
  0%,28% { transform:translateX(-38%); opacity:0; }
  45% { opacity:1; }
  68%,100% { transform:translateX(38%); opacity:0; }
}
@keyframes tor-notice-pulse {
  0%,100% { transform:scale(1); box-shadow:0 0 20px #dfb45c1c; }
  50% { transform:scale(1.06); box-shadow:0 0 32px #d946ef35; }
}

/* Give the FAQ room to breathe and make each question feel intentional. */
.site-root.site-root .faq { max-width:980px; }
.site-root.site-root .faq details {
  margin:12px 0;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(135deg,#1a1a1f,#101014);
  overflow:hidden;
  transition:border-color .3s ease, background-color .3s ease, transform .3s ease;
}
.site-root.site-root .faq details:hover,
.site-root.site-root .faq details[open] {
  border-color:#dfb45c55;
  transform:translateY(-2px);
}
.site-root.site-root .faq summary {
  min-height:72px;
  align-items:center;
  padding:22px 24px;
  font-size:17px;
}
.site-root.site-root .faq summary::after {
  flex:0 0 auto;
  transition:transform .3s ease, color .3s ease;
}
.site-root.site-root .faq details[open] summary::after { transform:rotate(180deg); }
.site-root.site-root .faq details p {
  max-width:760px;
  margin:0;
  padding:0 24px 26px;
}

/* Light, consistent depth cues for cards and side-by-side comparisons. */
.site-root.site-root .card,
.site-root.site-root .donation-card,
.site-root.site-root .performer,
.site-root.site-root .comparison-card { position:relative; }
.site-root.site-root .card::before,
.site-root.site-root .donation-card::before,
.site-root.site-root .performer::before,
.site-root.site-root .comparison-card::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(120deg,#dfb45c12,transparent 38%,#c8102e0d);
  opacity:0;
  transition:opacity .35s ease;
}
.site-root.site-root .card:hover::before,
.site-root.site-root .donation-card:hover::before,
.site-root.site-root .performer:hover::before,
.site-root.site-root .comparison-card:hover::before { opacity:1; }
.site-root.site-root .comparison-card dl > div {
  transition:background-color .3s ease, color .3s ease;
}
.site-root.site-root .comparison-card dl > div:hover { background-color:#dfb45c0b; }

/* Make the comparison emotionally legible at a glance: our side is warm,
   generous, and vivid; the alternative is intentionally flat and tedious. */
.site-root.site-root .comparison-card .with-us {
  background:
    radial-gradient(circle at 0 0,#dfb45c22,transparent 52%),
    linear-gradient(145deg,#6f203033,#2a161d)!important;
  box-shadow:inset -1px 0 #dfb45c38;
  color:#f4eee6;
}
.site-root.site-root .comparison-card .with-us dt {
  color:#f0c978;
  font-weight:800;
}
.site-root.site-root .comparison-card .with-us dt::before {
  content:"\2713";
  display:inline-grid;
  width:20px;
  height:20px;
  margin-right:7px;
  place-items:center;
  border-radius:50%;
  background:#dfb45c;
  color:#17130c;
  font-size:12px;
}
.site-root.site-root .comparison-card .with-us dt::after {
  content:"The easy way";
  display:block;
  margin:7px 0 0 27px;
  color:#d8c5a2;
  font-size:9px;
  font-weight:600;
  letter-spacing:.14em;
}
.site-root.site-root .comparison-card .with-us dd strong { color:#fff; }
.site-root.site-root .comparison-card .with-them {
  background:
    repeating-linear-gradient(135deg,#ffffff08 0,#ffffff08 1px,transparent 1px,transparent 10px),
    linear-gradient(145deg,#121216,#0b0b0d)!important;
  color:#85848a!important;
  filter:saturate(.25);
}
.site-root.site-root .comparison-card .with-them dt {
  color:#8a8990!important;
  font-weight:700;
}
.site-root.site-root .comparison-card .with-them dt::before {
  content:"\2639";
  display:inline-block;
  margin-right:7px;
  color:#8a8990;
  font-size:17px;
  line-height:1;
  vertical-align:-1px;
}
.site-root.site-root .comparison-card .with-them dt::after {
  content:"The hard way";
  display:block;
  margin:7px 0 0 24px;
  color:#66656b;
  font-size:9px;
  font-weight:600;
  letter-spacing:.14em;
}
.site-root.site-root .comparison-card .with-them dd { color:#77767c; }
.site-root.site-root .comparison-card .with-them::before {
  content:"VS";
  display:grid;
  place-items:center;
  background:#121216;
  background-image:none;
  color:#8a8990;
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}
.site-root.site-root .comparison-card .with-us:hover {
  background:
    radial-gradient(circle at 0 0,#dfb45c30,transparent 52%),
    linear-gradient(145deg,#7f26383d,#321921)!important;
}
.site-root.site-root .comparison-card .with-them:hover {
  background:
    repeating-linear-gradient(135deg,#ffffff08 0,#ffffff08 1px,transparent 1px,transparent 10px),
    linear-gradient(145deg,#151519,#0c0c0e)!important;
}

/* Turn the three experience cards into distinct editorial panels. */
.site-root.site-root .experience .cards { gap:22px; }
.site-root.site-root .experience .card {
  display:flex;
  min-height:380px;
  flex-direction:column;
  overflow:hidden;
  padding:36px 34px 32px;
  border-radius:20px;
  border-color:#ffffff24;
  background:
    radial-gradient(circle at 94% 4%,#c8102e24 0,transparent 35%),
    linear-gradient(155deg,#202027,#111116 70%);
  box-shadow:inset 0 1px #ffffff0d,0 24px 55px -42px #000;
}
.site-root.site-root .experience .card:nth-child(2) {
  background:
    radial-gradient(circle at 94% 4%,#dfb45c24 0,transparent 35%),
    linear-gradient(155deg,#222027,#111116 70%);
}
.site-root.site-root .experience .card:nth-child(3) {
  background:
    radial-gradient(circle at 94% 4%,#a855f724 0,transparent 35%),
    linear-gradient(155deg,#211d28,#111116 70%);
}
.site-root.site-root .experience .card::after {
  content:"";
  position:absolute;
  right:-54px;
  top:-54px;
  width:150px;
  height:150px;
  border:1px solid #ffffff12;
  border-radius:50%;
  box-shadow:0 0 0 26px #ffffff06,0 0 0 54px #ffffff03;
  pointer-events:none;
  transition:transform .65s cubic-bezier(.22,.61,.36,1),opacity .35s;
}
.site-root.site-root .experience .card > * { position:relative; z-index:1; }
.site-root.site-root .experience .card-num {
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  border:1px solid #ef40565c;
  border-radius:50%;
  background:#c8102e13;
  color:#ff7185;
  font-size:30px;
  line-height:1;
  box-shadow:inset 0 0 24px #c8102e17;
  transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s,border-color .45s;
}
.site-root.site-root .experience .card:nth-child(2) .card-num {
  border-color:#dfb45c66;
  background:#dfb45c12;
  color:#f2cc7a;
  box-shadow:inset 0 0 24px #dfb45c14;
}
.site-root.site-root .experience .card:nth-child(3) .card-num {
  border-color:#d946ef66;
  background:#a855f714;
  color:#e879f9;
  box-shadow:inset 0 0 24px #a855f717;
}
.site-root.site-root .experience .card h3 {
  margin:34px 0 16px;
  font-size:clamp(28px,2.5vw,36px);
  line-height:1.06;
}
.site-root.site-root .experience .card .body-copy { margin-bottom:26px; }
.site-root.site-root .experience .card .eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid #ffffff16;
}
.site-root.site-root .experience .card .eyebrow::before {
  content:"";
  width:20px;
  height:2px;
  background:currentColor;
  box-shadow:0 0 10px currentColor;
}
.site-root.site-root .experience .card:hover { transform:translateY(-9px); }
.site-root.site-root .experience .card:hover::after { transform:translate(-12px,12px) scale(1.1); }
.site-root.site-root .experience .card:hover .card-num {
  transform:translateY(-3px) rotate(-5deg) scale(1.06);
  border-color:currentColor;
  box-shadow:inset 0 0 30px #ffffff0c,0 12px 30px -16px currentColor;
}

@media (max-width:600px) {
  .site-root.site-root .nav { min-height:82px; gap:10px; }
  .site-root.site-root .brand { gap:9px; }
  .site-root.site-root .brand-symbol img { width:46px; height:52px; }
  .site-root.site-root .brand-name {
    font-size:14px;
    letter-spacing:.045em;
    line-height:1.05;
  }
  .site-root.site-root header .brand small {
    display:block;
    margin-top:5px;
    font-size:7px;
    letter-spacing:.13em;
    line-height:1.2;
    white-space:nowrap;
  }
  .site-root.site-root .faq summary { min-height:68px; padding:20px 18px; font-size:16px; }
  .site-root.site-root .faq details p { padding:0 18px 22px; }
  .site-root.site-root .experience .card {
    min-height:0;
    padding:28px 24px 25px;
  }
  .site-root.site-root .experience .card h3 { margin-top:24px; }
  .site-root.site-root .tor-rsvp-notice {
    grid-template-columns:1fr;
    gap:14px;
    padding:22px 20px;
  }
  .site-root.site-root .tor-rsvp-notice-icon { width:44px; height:44px; }
}

@media (max-width:350px) {
  .site-root.site-root .brand-symbol img { width:40px; height:46px; }
  .site-root.site-root .brand-name { font-size:12px; }
  .site-root.site-root header .brand small { font-size:6.25px; letter-spacing:.1em; }
}

@media (prefers-reduced-motion:reduce) {
  .site-root.site-root .faq details,
  .site-root.site-root .faq summary::after,
  .site-root.site-root .card::before,
  .site-root.site-root .donation-card::before,
  .site-root.site-root .performer::before,
  .site-root.site-root .comparison-card::before,
  .site-root.site-root .comparison-card dl > div { transition:none; }
  .site-root.site-root .faq details:hover,
  .site-root.site-root .faq details[open] { transform:none; }
  .site-root.site-root .presenter a { animation:none; }
  .site-root.site-root .experience .card::after,
  .site-root.site-root .experience .card-num { transition:none; }
  .site-root.site-root .experience .card:hover { transform:none; }
  .site-root.site-root .experience .card:hover::after,
  .site-root.site-root .experience .card:hover .card-num { transform:none; }
  .site-root.site-root .tor-rsvp-notice,
  .site-root.site-root .tor-rsvp-notice::after,
  .site-root.site-root .tor-rsvp-notice-icon { animation:none; }
}