/* ============================================================
   ALIVE CHURCH — SITE-WIDE DESIGN SYSTEM (grunge/torn-paper)
   ============================================================
   Loaded on every public page under body.redesign. The homepage
   additionally loads home-redesign.css (scoped body.home-redesign)
   for its bespoke sections; shared token values are duplicated
   there intentionally — keep them in sync.
   ============================================================ */

/* Brand script font (falls back to Yellowtail until the file exists) */
@font-face {
  font-family: 'Mayonice';
  src: url('/assets/fonts/mayonice.otf') format('opentype'),
       url('/assets/fonts/mayonice.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body.redesign {
  --hr-script-font: 'Mayonice', 'Yellowtail', cursive;
  --hr-pink:        var(--color-magenta, #eb008b);
  --hr-pink-deep:   #c40074;
  --hr-pink-soft:   #ff4db3;
  --hr-purple:      var(--color-secondary, #4b2679);
  --hr-purple-deep: #35195a;
  --hr-ink:         var(--color-text, #1e1a2b);
  --hr-bg:          var(--color-bg, #f6f6f8);
  --hr-surface:     var(--color-card-bg, #ffffff);
  --hr-line:        var(--color-border, rgba(30, 26, 43, .09));
  --hr-muted:       var(--color-text-muted, #5c5570);
  --hr-muted-dark:  rgba(255, 255, 255, .72);

  --hr-ink-lit:    #1e1a2b;
  --hr-pink-lit:   #eb008b;
  --hr-purple-lit: #4b2679;
  --hr-grad-brand: linear-gradient(112deg, #eb008b 0%, #b0157f 48%, #4b2679 100%);
  --hr-grad-dark:  linear-gradient(160deg, #241c3a 0%, #1e1a2b 55%, #191428 100%);

  --hr-r-pill: 999px;
  --hr-ease-out: cubic-bezier(.22,.9,.28,1);
  --hr-t-fast: .22s; --hr-t-med: .45s; --hr-t-slow: .8s;

  --hr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --hr-grain-heavy: 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='0.8' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.7'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --hr-tear-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='t' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01' numOctaves='3' seed='7' result='c'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='c' scale='18' xChannelSelector='R' yChannelSelector='G' result='d1'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='2' seed='3' result='f'/%3E%3CfeDisplacementMap in='d1' in2='f' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='11' y='11' width='578' height='378' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
  --hr-tear-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='t' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='3' seed='13' result='c'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='c' scale='17' xChannelSelector='R' yChannelSelector='G' result='d1'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.38' numOctaves='2' seed='5' result='f'/%3E%3CfeDisplacementMap in='d1' in2='f' scale='8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='12' y='12' width='576' height='376' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
  --hr-tear-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='t' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009' numOctaves='3' seed='29' result='c'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='c' scale='19' xChannelSelector='R' yChannelSelector='G' result='d1'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' seed='11' result='f'/%3E%3CfeDisplacementMap in='d1' in2='f' scale='6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='10' y='10' width='580' height='380' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
  --hr-tear-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='t' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='47' result='c'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='c' scale='16' xChannelSelector='R' yChannelSelector='G' result='d1'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='2' seed='19' result='f'/%3E%3CfeDisplacementMap in='d1' in2='f' scale='8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='11' y='11' width='578' height='378' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
  --hr-tear-5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Cfilter id='t' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0095' numOctaves='3' seed='61' result='c'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='c' scale='18' xChannelSelector='R' yChannelSelector='G' result='d1'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' seed='23' result='f'/%3E%3CfeDisplacementMap in='d1' in2='f' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='12' y='11' width='576' height='378' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");

  --hr-neo:
    drop-shadow(1px 2px 1.5px rgba(30, 26, 43, .25))
    drop-shadow(4px 7px 9px rgba(30, 26, 43, .16))
    drop-shadow(10px 16px 20px rgba(30, 26, 43, .09));
  --hr-neo-deep:
    drop-shadow(1px 2px 2px rgba(30, 26, 43, .28))
    drop-shadow(6px 10px 14px rgba(30, 26, 43, .2))
    drop-shadow(16px 26px 34px rgba(75, 38, 121, .22));
}
html[data-theme="dark"] body.redesign {
  --hr-neo:
    drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .65))
    drop-shadow(4px 7px 9px rgba(0, 0, 0, .45))
    drop-shadow(10px 16px 20px rgba(0, 0, 0, .3));
  --hr-neo-deep:
    drop-shadow(1px 2px 2px rgba(0, 0, 0, .7))
    drop-shadow(6px 10px 14px rgba(0, 0, 0, .5))
    drop-shadow(16px 26px 34px rgba(0, 0, 0, .35));
}

/* The off-canvas mobile menu (translateX(100%)) and tilted torn cards
   must never create sideways page scroll. clip (not hidden) so no new
   scroll container is created and position:sticky keeps working. */
body.redesign { overflow-x: clip; }

/* ---------- Global film grain ---------- */
body.redesign::after {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  background-image: var(--hr-grain);
  opacity: .14; mix-blend-mode: overlay; pointer-events: none;
}

/* ---------- Type & furniture ---------- */
body.redesign .script {
  font-family: var(--hr-script-font); font-weight: 400;
  letter-spacing: 0; text-transform: none;
  display: inline-block; transform: rotate(-2deg);
  color: var(--hr-pink);
}
body.redesign .eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hr-pink);
}
body.redesign .eyebrow::before {
  content: ""; width: 2rem; height: 2px; background: var(--hr-pink); border-radius: 2px;
}
body.redesign .section-heading h2,
body.redesign .page-hero h1 {
  font-weight: 900; line-height: 1.1; letter-spacing: -.03em;
}

/* ---------- Buttons ---------- */
body.redesign .btn {
  border-radius: var(--hr-r-pill);
  font-weight: 700; letter-spacing: .01em;
  transition: transform var(--hr-t-fast) var(--hr-ease-out),
              box-shadow var(--hr-t-fast) var(--hr-ease-out),
              background-color var(--hr-t-fast) var(--hr-ease-out),
              color var(--hr-t-fast) var(--hr-ease-out),
              border-color var(--hr-t-fast) var(--hr-ease-out);
}
body.redesign .btn:hover { transform: translateY(-2px); }
body.redesign .btn:active { transform: translateY(1px) scale(.99); }
/* Solid buttons: brand gradient with heavy film grain baked in */
body.redesign .btn-primary,
body.redesign .btn-play {
  background-color: var(--hr-pink-lit);
  background-image: var(--hr-grain), linear-gradient(112deg, #ff2d9c 0%, #eb008b 55%, #c40074 100%);
  background-size: 56px 56px, auto; /* much finer than the 180px band grain — screen-print, not paper */
  background-blend-mode: overlay, normal;
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(235, 0, 139, .45);
}
body.redesign .btn-primary:hover,
body.redesign .btn-play:hover {
  background-image: var(--hr-grain), linear-gradient(112deg, #eb008b 0%, #c40074 60%, #a3005f 100%);
}
body.redesign .btn-secondary {
  background-color: var(--hr-purple-lit);
  background-image: var(--hr-grain), linear-gradient(112deg, #6d3ab1 0%, #4b2679 55%, #35195a 100%);
  background-size: 56px 56px, auto; /* much finer than the 180px band grain — screen-print, not paper */
  background-blend-mode: overlay, normal;
  color: #fff; border-color: transparent;
  box-shadow: 0 10px 30px -10px rgba(75, 38, 121, .5);
}
body.redesign .btn-secondary:hover {
  background-image: var(--hr-grain), linear-gradient(112deg, #5a2f95 0%, #3d1f63 60%, #2c1449 100%);
}
body.redesign .btn-outline { border-radius: var(--hr-r-pill); }
html[data-theme="dark"] body.redesign .btn-outline { border-color: rgba(255, 255, 255, .35); }

/* ---------- Header: permanent frosted glass on non-home pages ----------
   The blur lives on a ::before layer, NOT the header itself:
   backdrop-filter creates a containing block, and the fixed
   full-screen mobile nav lives inside the header — filtering the
   header traps the menu inside the header's box. */
body.redesign:not(.home-redesign) .site-header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 var(--hr-line), 0 8px 24px -12px rgba(30, 26, 43, .12);
}
body.redesign:not(.home-redesign) .site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-theme="dark"] body.redesign:not(.home-redesign) .site-header::before {
  background: rgba(22, 17, 34, .85);
}

/* ---------- Page heroes: dark grunge band ---------- */
body.redesign .page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* Literal ink — --hr-ink is the theme text colour (light in dark mode) */
  background: var(--hr-ink-lit, #1e1a2b); color: #fff;
}
body.redesign .page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(48rem 28rem at 10% 110%, rgba(235, 0, 139, .38), transparent 62%),
    radial-gradient(40rem 24rem at 92% -8%, rgba(18, 91, 154, .32), transparent 60%),
    linear-gradient(102deg, rgba(30, 26, 43, .95) 6%, rgba(53, 25, 90, .82) 44%, rgba(30, 26, 43, .55) 100%),
    var(--hero-bg-image, var(--hr-grad-dark)) center 30% / cover no-repeat;
}
body.redesign .page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--hr-grain-heavy);
  background-size: 180px 180px;
  /* base ::before rules set no-repeat center — must win per-property */
  background-repeat: repeat;
  background-position: 0 0;
  opacity: .3; mix-blend-mode: overlay; pointer-events: none;
}
body.redesign .page-hero h1,
body.redesign .page-hero p { color: #fff; }
/* Mayonice flourish available to any page hero */
body.redesign .page-hero .page-hero-script {
  display: block;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  color: var(--hr-pink-soft);
  text-shadow: 0 2px 18px rgba(235, 0, 139, .35);
  margin: .3rem 0 .2rem;
}
body.redesign .page-hero p { color: rgba(255, 255, 255, .82); }

/* ---------- Torn cards on common grids ---------- */
body.redesign :is(.card-grid, .events-grid, .blog-grid) > article,
body.redesign :is(.card-grid, .events-grid, .blog-grid) > a,
body.redesign :is(.card-grid, .events-grid, .blog-grid) > div,
body.redesign .page-card {
  border-radius: 0;
  -webkit-mask-image: var(--hr-tear, var(--hr-tear-1));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--hr-tear, var(--hr-tear-1));
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  box-shadow: none;
}
/* Shadows on the parents (filter before mask would erase them) */
body.redesign :is(.card-grid, .events-grid, .blog-grid) {
  filter: var(--hr-neo);
}
/* Clearance: the tear scales with card height, so tall cards bite
   deeper — keep content off the fibre edge */
body.redesign :is(.card-grid, .events-grid, .blog-grid) > article,
body.redesign :is(.card-grid, .events-grid, .blog-grid) > a,
body.redesign :is(.card-grid, .events-grid, .blog-grid) > div {
  padding-bottom: 28px;
}
/* Scatter: tear variants, tilts, scales on coprime cycles */
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(5n+2) { --hr-tear: var(--hr-tear-2); }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(5n+3) { --hr-tear: var(--hr-tear-3); }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(5n+4) { --hr-tear: var(--hr-tear-4); }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(5n)   { --hr-tear: var(--hr-tear-5); }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(7n+1) { --hr-tilt: -.9deg; }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(7n+2) { --hr-tilt: .55deg; }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(7n+3) { --hr-tilt: -.35deg; }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(7n+4) { --hr-tilt: .8deg; }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(7n+5) { --hr-tilt: -.6deg; }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(7n+6) { --hr-tilt: .4deg; }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(7n)   { --hr-tilt: -.75deg; }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(5n+1) { --hr-scale: .988; }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(5n+2) { --hr-scale: 1.012; }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(5n+3) { --hr-scale: .995; }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(5n+4) { --hr-scale: 1.006; }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > :nth-child(5n)   { --hr-scale: .982; }
body.redesign :is(.card-grid, .events-grid, .blog-grid) > * {
  transform: rotate(var(--hr-tilt, 0deg)) scale(var(--hr-scale, 1));
}
/* ponytail: no per-card padding compensation here — most subpage cards
   have >=1.5rem padding and the tear bites <=19px. Revisit per page if
   text ever kisses a fibre edge. */

/* ---------- Newsletter band (shared include) ---------- */
body.redesign .newsletter-section {
  background: transparent; padding: 0;
  position: relative; z-index: 5;
  transform: translateY(clamp(2.5rem, 5vw, 4rem));
  margin-top: calc(-1 * clamp(1rem, 2vw, 2rem));
}
body.redesign .newsletter-card {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--hr-grad-brand); color: #fff;
  border-radius: 0;
  -webkit-mask-image: var(--hr-tear-5);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--hr-tear-5);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  padding: calc(clamp(2.5rem, 5vw, 4.5rem) + 13px) calc(clamp(2.5rem, 5vw, 4.5rem) + 8px);
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  box-shadow: none;
  --hr-tilt: -.5deg;
  transform: rotate(-.5deg);
}
body.redesign .newsletter-section .container { filter: var(--hr-neo-deep); }
body.redesign .newsletter-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(30rem 18rem at 90% 120%, rgba(255, 255, 255, .16), transparent 60%);
}
body.redesign .newsletter-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--hr-grain-heavy); background-size: 180px 180px;
  opacity: .55; mix-blend-mode: overlay;
}
body.redesign .newsletter-card h3 {
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  font-weight: 900; letter-spacing: -.02em; line-height: 1.12;
  margin: .3rem 0 .6rem;
}
body.redesign .newsletter-card h3::before {
  content: "stay connected";
  display: block;
  font-family: var(--hr-script-font, 'Yellowtail', cursive); font-weight: 400;
  font-size: 2.2rem; letter-spacing: 0;
  transform: rotate(-2deg); transform-origin: left bottom;
  opacity: .95; margin-bottom: .2rem;
}
body.redesign .newsletter-card p { color: rgba(255, 255, 255, .85); font-size: .95rem; }
body.redesign .newsletter-card .newsletter-message { grid-column: 1 / -1; }
/* Email capture: one white capsule — input and grainy pink button
   fused into a single pill (band is always the brand gradient, so
   literal colours are safe in both themes) */
body.redesign .newsletter-form {
  background: #fff;
  border-radius: var(--hr-r-pill);
  position: relative;
  padding: .3rem 64px .3rem .3rem; /* right gutter = send circle */
  min-height: 60px;
  gap: .3rem;
  align-items: center;
  flex-wrap: nowrap;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .35);
  transition: box-shadow var(--hr-t-fast) var(--hr-ease-out);
}
body.redesign .newsletter-form:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .6), 0 14px 30px -12px rgba(0, 0, 0, .35);
}
body.redesign .newsletter-input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  color: var(--hr-ink-lit); font-weight: 600;
  padding: 1.05rem 1.4rem;
  border-radius: var(--hr-r-pill);
}
body.redesign .newsletter-input::placeholder { color: rgba(30, 26, 43, .45); }
body.redesign .newsletter-input:focus,
body.redesign .newsletter-input:focus-visible {
  outline: none; border: none; background: transparent;
}
/* Send cap: fills the capsule's full right end (grainy pink gradient
   inherited); label stays for screen readers */
/* Send circle: pinned to the capsule's right end, diameter = full
   capsule height, so it fills the end completely */
body.redesign .newsletter-form .btn-primary {
  position: absolute; top: 0; right: 0; bottom: 0;
  height: 100%; aspect-ratio: 1; width: auto;
  padding: 0; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
body.redesign .newsletter-form .btn-primary:hover { transform: none; }
body.redesign .newsletter-form .btn-primary svg {
  transform: translateX(-1px) rotate(-8deg);
}
body.redesign .hr-sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
@media (max-width: 480px) {
  body.redesign .newsletter-form { border-radius: 22px; flex-wrap: wrap; padding: .3rem; }
  body.redesign .newsletter-form .btn-primary {
    position: static; aspect-ratio: auto;
    flex: 1 1 100%; width: 100%; height: 48px;
    border-radius: var(--hr-r-pill);
  }
}

/* ---------- Footer ---------- */
body.redesign .site-footer {
  background: var(--hr-grad-dark);
  position: relative; isolation: isolate; overflow: hidden;
}
body.redesign .site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(40rem 24rem at 100% 0%, rgba(75, 38, 121, .5), transparent 60%),
              radial-gradient(30rem 20rem at 0% 100%, rgba(235, 0, 139, .12), transparent 60%);
}
body.redesign .site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--hr-grain-heavy); background-size: 180px 180px;
  opacity: .5; mix-blend-mode: overlay; pointer-events: none;
}
body.redesign .footer-main { padding-top: calc(4rem + clamp(2.5rem, 5vw, 4rem)); }
body.redesign .footer-heading {
  color: var(--hr-pink-soft);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
body.redesign .footer-links a {
  display: inline-block;
  transition: color var(--hr-t-fast), transform var(--hr-t-fast) var(--hr-ease-out);
}
body.redesign .footer-links a:hover { color: #fff; transform: translateX(4px); }
body.redesign .social-icon {
  transition: transform var(--hr-t-fast) var(--hr-ease-out),
              background-color var(--hr-t-fast), color var(--hr-t-fast);
}
body.redesign .social-icon:hover { transform: translateY(-3px); background: var(--hr-pink); color: #fff; }

/* ---------- Brand spice, site-wide ---------- */
body.redesign .theme-toggle { border-radius: 50%; }

/* ---------- Mobile nav + hamburger (same breakpoint as the base
   mobile styles — unscoped, the panel pseudos paint against the
   wrong containing block at desktop widths) ---------- */
@media (max-width: 960px) {
  /* Hamburger + theme toggle: frosted glass discs */
  body.redesign .nav-toggle-label {
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--hr-line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-radius: 50%;
  }
  body.redesign .nav-toggle-label:hover {
    background: rgba(255, 255, 255, .8);
    border-color: var(--hr-pink);
  }
  html[data-theme="dark"] body.redesign .nav-toggle-label {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .15);
  }
  html[data-theme="dark"] body.redesign .nav-toggle-label:hover {
    background: rgba(255, 255, 255, .15);
    border-color: var(--hr-pink);
  }
  /* Open state: stay a glass disc over the dark panel (base paints it
     solid magenta) */
  body.redesign .nav-toggle:checked + .nav-toggle-label {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
  }

  /* Panel: editorial ink sheet, not an app panel */
  body.redesign .mobile-nav {
    background: var(--hr-grad-dark);
    isolation: isolate;
  }
  /* Backdrop layers are FIXED so they don't scroll away with the
     panel content (the panel's transform scopes them to the panel
     box, not the page) */
  body.redesign .mobile-nav::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background:
      radial-gradient(40rem 30rem at 90% -10%, rgba(235, 0, 139, .35), transparent 60%),
      radial-gradient(30rem 24rem at -10% 110%, rgba(18, 91, 154, .3), transparent 60%);
  }
  body.redesign .mobile-nav::after {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background-image: var(--hr-grain-heavy);
    background-size: 180px 180px;
    opacity: .3; mix-blend-mode: overlay; pointer-events: none;
  }
  /* Inner scroller: no scrollbar; fade + bouncing chevron say "scroll" */
  body.redesign .mobile-nav-content {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body.redesign .mobile-nav-content::-webkit-scrollbar { display: none; }
  body.redesign .mobile-nav-content::after {
    content: ""; display: block;
    position: sticky; bottom: -1.5rem;
    height: 72px;
    /* span the scroller's full width, across its side padding */
    margin: -72px -1.25rem 0;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ff4db3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center bottom 12px / 22px 22px no-repeat,
      linear-gradient(180deg, transparent, #191428 88%);
    pointer-events: none;
    animation: hr-nav-cue 1.6s ease-in-out infinite;
    transition: opacity .3s;
  }
  /* Cue disappears once there's nothing left to scroll to
     (class toggled by design-system.js) */
  body.redesign .mobile-nav-content.hr-at-bottom::after { opacity: 0; }
  @keyframes hr-nav-cue {
    0%, 100% { background-position: center bottom 14px, 0 0; }
    50%      { background-position: center bottom 6px, 0 0; }
  }
  /* Mayonice flourish above the links */
  body.redesign .mobile-nav-links::before {
    content: "where to?";
    display: block;
    font-family: var(--hr-script-font, 'Yellowtail', cursive);
    font-size: 2.2rem; font-weight: 400;
    color: var(--hr-pink-soft);
    transform: rotate(-2deg);
    margin: .4rem 0 .6rem;
    text-shadow: 0 2px 18px rgba(235, 0, 139, .35);
  }
  /* Links: big editorial type, dashed rip separators, no app chrome */
  body.redesign .mobile-nav-link {
    background: transparent;
    border-radius: 0;
    border-bottom: 1px dashed rgba(255, 77, 179, .3);
    padding: .95rem .4rem;
  }
  body.redesign .mobile-nav-link-icon { display: none; }
  body.redesign .mobile-nav-link-text {
    font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em;
  }
  body.redesign .mobile-nav-link:hover,
  body.redesign .mobile-nav-link:active {
    background: transparent;
    color: var(--hr-pink-soft);
  }
  body.redesign .mobile-nav-link.is-active {
    background: transparent;
    box-shadow: none;
    color: var(--hr-pink-soft);
  }
  /* Quick actions: glass pills with pink hover */
  body.redesign .mobile-nav-action {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .15);
  }
  body.redesign .mobile-nav-action:hover { border-color: var(--hr-pink-soft); }
  /* The global hamburger morphs into the close X on top of the panel,
     so the panel's own close button is redundant */
  body.redesign .mobile-nav-close { display: none; }

  @media (prefers-reduced-motion: reduce) {
    body.redesign .mobile-nav-content::after { animation: none; }
  }
}
/* Text selection in brand pink */
body.redesign ::selection { background: rgba(235, 0, 139, .85); color: #fff; }
/* Consistent pink focus ring (a11y + brand) */
body.redesign :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--hr-pink); outline-offset: 3px;
}
/* Netflix-style sermon hero buttons -> brand pills */
body.redesign .btn-play {
  background: var(--hr-pink); color: #fff;
  border-radius: var(--hr-r-pill);
  box-shadow: 0 10px 30px -8px rgba(235, 0, 139, .45);
  transition: transform var(--hr-t-fast) var(--hr-ease-out),
              background-color var(--hr-t-fast) var(--hr-ease-out);
}
body.redesign .btn-play:hover { background: var(--hr-pink-deep); transform: translateY(-2px); }
body.redesign .btn-info { border-radius: var(--hr-r-pill); }
/* Sub-navigation strips: frosted glass to match the header */
body.redesign .study-subnav,
body.redesign .section-subnav {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top-color: transparent;
  box-shadow: 0 1px 0 var(--hr-line);
}
html[data-theme="dark"] body.redesign .study-subnav,
html[data-theme="dark"] body.redesign .section-subnav {
  background: rgba(22, 17, 34, .72);
}
/* Active subnav chips get the brand pill treatment */
body.redesign :is(.study-subnav-item, .section-subnav-item) { border-radius: var(--hr-r-pill); }

/* ---------- Reveal-on-scroll ---------- */
body.redesign [data-hr-reveal] {
  opacity: 0; transform: translateY(26px) rotate(var(--hr-tilt, 0deg)) scale(var(--hr-scale, 1));
  transition: opacity var(--hr-t-slow) var(--hr-ease-out), transform var(--hr-t-slow) var(--hr-ease-out);
  transition-delay: var(--hr-d, 0s);
}
body.redesign [data-hr-reveal].hr-in-view {
  opacity: 1; transform: rotate(var(--hr-tilt, 0deg)) scale(var(--hr-scale, 1));
}
@media (prefers-reduced-motion: reduce) {
  body.redesign [data-hr-reveal] {
    opacity: 1; transform: rotate(var(--hr-tilt, 0deg)) scale(var(--hr-scale, 1)); transition: none;
  }
  body.redesign :is(.card-grid, .events-grid, .blog-grid) > * { transform: none; }
}