/* ==========================================================================
   Ink Duncan family of sites: shared design system
   inkduncan.com · aprayinggeneration.com · fullyloadedmentorshipacademy.com
   Palette: Royal (lighter) + Gold + Ivory, used in shades across all three.
   Source of truth lives in sites/shared/. Run sites/sync.ps1 after editing.
   ========================================================================== */

:root {
  /* Royal */
  --royal-950: #1c1233;
  --royal-900: #26184a;
  --royal-800: #34225f;
  --royal-700: #45307d;
  --royal-600: #5b40a0;
  --royal-500: #7358bb;
  --royal-400: #9580d0;
  --royal-300: #b7a7e2;
  --royal-200: #d6ccf0;
  --royal-100: #ebe5f8;
  --royal-50:  #f6f3fc;
  /* Gold */
  --gold-700: #8f6b25;
  --gold-600: #ae8637;
  --gold-500: #c9a24e;
  --gold-400: #dbbb70;
  --gold-300: #e8d29b;
  --gold-100: #f6ecd2;
  /* Ivory */
  --ivory: #fcf9f4;
  --ivory-2: #f5efe5;
  --white: #ffffff;
  --ink: #1f1733;
  --muted: #5d5570;

  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(38, 24, 74, .08);
  --shadow: 0 18px 50px -18px rgba(38, 24, 74, .35);
  --shadow-lg: 0 40px 90px -30px rgba(28, 18, 51, .55);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 8vw, 112px);
  --header-h: 78px;

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Per-site accents: same family, different emphasis */
body[data-site="apg"] { --accent: var(--gold-500); --hero-a: var(--royal-700); --hero-b: var(--royal-950); }
body[data-site="ink"] { --accent: var(--gold-500); --hero-a: var(--royal-500); --hero-b: var(--royal-800); }
body[data-site="academy"] { --accent: var(--gold-500); --hero-a: var(--royal-400); --hero-b: var(--royal-700); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font: 400 clamp(16px, 1.05vw, 17.5px)/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.6rem, 7.2vw, 6.2rem); }
h2 { font-size: clamp(2.1rem, 4.8vw, 4rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
p { margin: 0 0 1.1em; }
em.gold, h1 em, h2 em { font-style: italic; color: var(--gold-500); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--royal-900); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 999; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(1240px, 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-narrow { width: min(820px, 100% - var(--gutter) * 2); margin-inline: auto; }
section { position: relative; }
.section { padding-block: var(--section); position: relative; overflow: hidden; }
.center { text-align: center; }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.32rem); color: var(--muted); max-width: 60ch; }
.center .lede { margin-inline: auto; }
.dark { background: var(--royal-900); color: #f3eefc; }
.dark .lede, .dark p { color: #d9d0ee; }
.tint { background: var(--royal-50); }
.cream { background: var(--ivory-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 .78rem/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 34px; height: 1.5px; background: currentColor; }
.dark .eyebrow, .on-photo .eyebrow { color: var(--gold-400); }
.tagline-strong { font: italic 500 clamp(1.3rem, 2.3vw, 1.9rem)/1.3 var(--font-display); color: var(--royal-600); margin-bottom: 1em; }
.dark .tagline-strong { color: var(--gold-300); }
.meta-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; padding: 0; list-style: none; }
.meta-strip li { padding: 9px 16px; border-radius: 999px; background: var(--royal-100); color: var(--royal-800); font-weight: 600; font-size: .9rem; }
.dark .meta-strip li { background: rgba(255,255,255,.1); color: #fff; }
.titles { font: 600 .82rem/1.8 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--royal-600); }
.titles span { color: var(--gold-500); padding-inline: .5em; }
.note { font-size: .9rem; color: var(--muted); }
.ph { color: var(--royal-500); background: var(--royal-100); padding: 0 .35em; border-radius: 4px; font-weight: 600; }
.dark .ph { color: var(--gold-300); background: rgba(255,255,255,.1); }

/* ---------- Buttons ---------- */
.btn {
  --b: var(--royal-600); --c: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px; min-height: 52px; border-radius: 999px; border: 1.5px solid var(--b);
  background: var(--b); color: var(--c); text-decoration: none;
  font: 600 .95rem/1 var(--font-body); letter-spacing: .02em; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease), background .3s, color .3s;
  -webkit-tap-highlight-color: transparent;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--b) 80%, transparent); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(.96); }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-gold { --b: var(--gold-500); --c: var(--royal-950); }
.btn-ghost { background: transparent; --c: var(--royal-700); }
.btn-ghost:hover { background: var(--royal-600); color: #fff; }
.btn-light { background: transparent; --b: rgba(255,255,255,.7); --c: #fff; }
.btn-light:hover { background: #fff; color: var(--royal-900); }
.btn-sm { padding: 11px 20px; min-height: 42px; font-size: .88rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.center .btn-row { justify-content: center; }
.link-btn { background: none; border: 0; padding: 8px; text-decoration: underline; text-underline-offset: 4px; color: var(--muted); }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.55); animation: ripple .7s var(--ease) forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- Progress + header ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200; background: linear-gradient(90deg, var(--gold-500), var(--royal-400)); transform-origin: 0 50%; transform: scaleX(0); }

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center; color: #fff;
  transition: background .4s var(--ease), box-shadow .4s, color .4s, height .4s var(--ease);
}
.site-header.is-solid { background: color-mix(in srgb, var(--ivory) 88%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); color: var(--ink); box-shadow: 0 1px 0 rgba(38,24,74,.08); --header-h: 66px; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header { transition: transform .45s var(--ease), background .4s, color .4s, height .4s; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.brand b { font: 700 1.2rem/1 var(--font-display); letter-spacing: .14em; }
.brand small { font: italic 500 .9rem/1 var(--font-display); color: var(--gold-400); margin-top: 6px; letter-spacing: .02em; }
.is-solid .brand small { color: var(--gold-600); }
.nav { display: flex; align-items: center; gap: 4px; }
/* Nav type matches the gold uppercase title style Ink chose (e.g. "Prophetess · Therapist · Evangelist"). */
.nav a:not(.btn) { position: relative; padding: 10px 9px; font: 600 .7rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; text-decoration: none; opacity: .95; }
.nav .btn { white-space: nowrap; }
.brand b { white-space: nowrap; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1.5px; background: var(--gold-500); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav a:not(.btn):hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav .btn { margin-left: 10px; }
.menu-toggle { display: none; width: 48px; height: 48px; border: 0; background: transparent; position: relative; border-radius: 50%; }
.menu-toggle span { position: absolute; left: 13px; right: 13px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease), opacity .3s; }
.menu-toggle span:nth-child(1) { top: 17px; } .menu-toggle span:nth-child(2) { top: 23px; } .menu-toggle span:nth-child(3) { top: 29px; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Collapse point measured: 7 links + the full programme button need ~1290px */
@media (max-width: 1290px) {
  .menu-toggle { display: block; z-index: 3; }
  .nav {
    position: fixed; inset: 0; z-index: 2; flex-direction: column; justify-content: center; gap: 6px;
    background: radial-gradient(circle at 80% 10%, var(--royal-600), var(--royal-900) 70%); color: #fff;
    clip-path: circle(0% at calc(100% - 40px) 40px); transition: clip-path .7s var(--ease); visibility: hidden;
  }
  .menu-open .nav { clip-path: circle(150% at calc(100% - 40px) 40px); visibility: visible; }
  .menu-open .site-header { color: #fff; }
  /* The scrolled header's frosted glass (backdrop-filter) and hide-on-scroll (transform) would trap the full-screen menu
     inside the header bar; while the menu is open the header drops both, so the menu covers the whole screen. */
  .menu-open .site-header, .menu-open .site-header.is-solid, .menu-open .site-header.is-hidden { backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; background: transparent; box-shadow: none; }
  .nav { height: 100vh; height: 100dvh; overflow-y: auto; padding-block: max(80px, env(safe-area-inset-top)) max(30px, env(safe-area-inset-bottom)); }
  .nav a:not(.btn) { font: 600 clamp(1rem, 4.2vw, 1.35rem)/1.2 var(--font-body); letter-spacing: .2em; text-transform: uppercase; padding: 12px; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .6s var(--ease); }
  .menu-open .nav a:not(.btn) { opacity: 1; transform: none; }
  .nav a:nth-child(2) { transition-delay: .05s !important; } .nav a:nth-child(3) { transition-delay: .1s !important; }
  .nav a:nth-child(4) { transition-delay: .15s !important; } .nav a:nth-child(5) { transition-delay: .2s !important; }
  .nav a:nth-child(6) { transition-delay: .25s !important; } .nav a:nth-child(7) { transition-delay: .3s !important; }
  .nav .btn { margin: 22px 0 0; }
  body.menu-open { overflow: hidden; }
}

/* ---------- Reveal animations ---------- */
.js [data-reveal] { opacity: 0; transition: opacity 1s var(--ease), transform 1.1s var(--ease), clip-path 1.2s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="up"], .js [data-reveal=""] { transform: translateY(46px); }
.js [data-reveal="left"] { transform: translateX(-70px); }
.js [data-reveal="right"] { transform: translateX(70px); }
.js [data-reveal="zoom"] { transform: scale(.88); }
.js [data-reveal="blur"] { filter: blur(14px); transform: translateY(20px); }
.js [data-reveal="wipe"] { opacity: 1; clip-path: inset(0 99% 0 0 round var(--radius)); }
.js [data-reveal="rise"] { opacity: 1; clip-path: inset(0 0 99% 0 round var(--radius)); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.js [data-reveal="wipe"].is-in, .js [data-reveal="rise"].is-in { clip-path: inset(-60px round var(--radius)); }
/* Pointer tilt (data-tilt). After the reveal finishes, JS adds .tilt-ready so tilt responds quickly. */
[data-tilt] { transform: perspective(1200px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s var(--ease), box-shadow .5s; }
.js [data-reveal].is-in[data-tilt] { transform: perspective(1200px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.js [data-tilt].tilt-ready { transition: transform .5s var(--ease), box-shadow .5s, opacity 1s; transition-delay: 0s; }

/* Headline word split */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; transform: translateY(110%) rotate(4deg); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 70ms + var(--d0, .1s)); }
.split.is-in .w > span { transform: none; }

/* ---------- Motion primitives ---------- */
@keyframes drift-a { 0%,100% { transform: translate3d(0,0,0) rotate(-1.5deg); } 50% { transform: translate3d(8px,-18px,0) rotate(1deg); } }
@keyframes drift-b { 0%,100% { transform: translate3d(0,0,0) rotate(1.5deg); } 50% { transform: translate3d(-10px,14px,0) rotate(-1deg); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes kenburns { 0% { transform: scale(1.02) translate(0,0); } 100% { transform: scale(1.16) translate(-2%, -2%); } }
@keyframes kenburns-b { 0% { transform: scale(1.14) translate(-2%, 1%); } 100% { transform: scale(1.02) translate(1%, -1%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-ring { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes shimmer { to { background-position: 200% 50%; } }
@keyframes twinkle { 0%,100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.drift-a { animation: drift-a 9s ease-in-out infinite; }
.drift-b { animation: drift-b 11s ease-in-out infinite; }
.bob { animation: bob 6s ease-in-out infinite; }
.shimmer-text {
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300), var(--gold-500), var(--gold-300)); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: shimmer 6s linear infinite;
}
.grain::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .12; mix-blend-mode: overlay; pointer-events: none; z-index: 1; }
.sparkle { position: absolute; width: 18px; height: 18px; pointer-events: none; animation: twinkle 3.5s ease-in-out infinite; animation-delay: var(--d, 0s); z-index: 2; }
.sparkle::before, .sparkle::after { content: ""; position: absolute; inset: 0; background: var(--gold-300); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }

/* ---------- Photos ---------- */
/* Horizontal photo shown whole: the frame matches the 1616x1080 photo ratio, so nothing is cropped. */
.pw { position: relative; margin: 0; aspect-ratio: 1616 / 1080; }
.pw .pw-in { position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); z-index: 1; background: var(--royal-200); }
.pw img { width: 100%; height: 100%; object-fit: cover; }
.pw::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--gold-500); border-radius: var(--radius-lg); transform: translate(18px, 18px); transition: transform .8s var(--ease); }
.pw.alt::before { transform: translate(-18px, 18px); }
.pw:hover::before { transform: translate(8px, 8px); }
.pw.alt:hover::before { transform: translate(-8px, 8px); }
.pw figcaption { position: absolute; left: 18px; bottom: 16px; z-index: 2; padding: 8px 14px; border-radius: 999px; background: rgba(28,18,51,.6); backdrop-filter: blur(8px); color: #fff; font-size: .8rem; letter-spacing: .06em; }
.pw .pw-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%); transform: translateX(-100%); transition: transform 1.3s var(--ease); }
.pw:hover .pw-in::after { transform: translateX(100%); }

/* Arch cutout frames for flyer graphics (standing photos only).
   When a background-removed PNG exists, add class "cutout" to the <figure> and point the <img> at the PNG. */
.arch { position: relative; margin: 0; width: var(--w, 260px); aspect-ratio: 3 / 4.2; }
.arch .a-in { position: absolute; inset: 0; border-radius: 999px 999px var(--radius) var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: linear-gradient(180deg, var(--royal-300), var(--royal-600)); }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 20%); }
.arch::before { content: ""; position: absolute; inset: -12px; border: 1.5px solid var(--gold-400); border-radius: 999px 999px calc(var(--radius) + 10px) calc(var(--radius) + 10px); opacity: .9; }
.arch::after { content: ""; position: absolute; width: 58%; aspect-ratio: 1; right: -18%; top: -8%; border-radius: 50%; background: radial-gradient(circle, var(--gold-400), var(--gold-600)); z-index: -1; opacity: .9; }
.arch.cutout .a-in { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.arch.cutout img { object-fit: contain; object-position: bottom; filter: drop-shadow(0 24px 30px rgba(20,10,40,.45)); }

/* Full-bleed background photo (sitting photos may only be used this way) */
.bg-photo { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.bg-photo img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 28s ease-in-out infinite alternate; }
.bg-photo.b img { animation-name: kenburns-b; }
.bg-photo::after { content: ""; position: absolute; inset: 0; background: var(--veil, linear-gradient(100deg, rgba(28,18,51,.92) 0%, rgba(38,24,74,.78) 45%, rgba(69,48,125,.35) 100%)); }
.bg-photo + * { position: relative; z-index: 2; }
.on-photo { color: #fff; }
.on-photo .lede, .on-photo p { color: #e8e1f7; }

/* ---------- Hero (inkduncan.com) ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; color: #fff; isolation: isolate;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(circle at 50% 120%, var(--gold-600), transparent 45%),
    linear-gradient(160deg, var(--hero-a), var(--hero-b));
  padding: calc(var(--header-h) + 30px) 0 60px;
}
.hero .rays { position: absolute; inset: -40%; z-index: -1; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.07) 0 6deg, transparent 6deg 18deg); animation: spin 140s linear infinite; mask: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); }
.hero .ring { position: absolute; border: 1.5px solid rgba(232,210,155,.45); border-radius: 50%; z-index: -1; }
.hero .ring.r1 { width: min(78vw, 820px); aspect-ratio: 1; animation: spin 90s linear infinite; border-style: dashed; }
.hero .ring.r2 { width: min(56vw, 600px); aspect-ratio: 1; }
.hero-copy { position: relative; z-index: 3; text-align: center; max-width: 760px; padding-inline: var(--gutter); }
.hero-copy h1 { text-shadow: 0 10px 40px rgba(20,10,40,.35); }
.hero-copy .lede { color: #efe9fb; margin-inline: auto; margin-bottom: 34px; }
.hero-photos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-photos .hp { position: absolute; }
.hero-photos .p1 { --w: clamp(150px, 16vw, 270px); left: 3%; top: 16%; }
.hero-photos .p2 { --w: clamp(120px, 12vw, 205px); left: 15%; bottom: 7%; }
.hero-photos .p3 { --w: clamp(150px, 16vw, 270px); right: 3%; top: 14%; }
.hero-photos .p4 { --w: clamp(120px, 12vw, 205px); right: 15%; bottom: 6%; }
.hero-photos .p2 .arch::after, .hero-photos .p4 .arch::after { display: none; }
.scroll-cue { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; z-index: 3; width: 26px; height: 42px; border: 1.5px solid rgba(255,255,255,.6); border-radius: 20px; }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: #fff; animation: cue 2s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@media (max-width: 1080px) {
  .hero { place-items: start center; padding-top: calc(var(--header-h) + 40px); padding-bottom: 0; align-content: start; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-photos { position: relative; inset: auto; display: flex; justify-content: center; align-items: flex-end; gap: 2.5vw; margin-top: 40px; width: 100%; padding-inline: 14px; }
  .hero-photos .hp { position: relative; inset: auto !important; --w: 18vw; translate: none !important; flex: none; }
  .hero-photos .p1, .hero-photos .p3 { --w: 23vw; margin-bottom: 26px; }
  .hero-photos .p3 { order: 3; } .hero-photos .p4 { order: 4; } .hero-photos .p2 { order: 2; }
  .hero-photos .arch::before { inset: -7px; }
  .scroll-cue { display: none; }
}

/* ---------- Layout helpers ---------- */
.split-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.split-grid.rev > :first-child { order: 2; }
@media (max-width: 900px) { .split-grid { grid-template-columns: 1fr; } .split-grid.rev > :first-child { order: 0; } }
.stack-lg > * + * { margin-top: clamp(40px, 6vw, 80px); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 50px; background: var(--royal-200); border-radius: var(--radius); overflow: hidden; }
.stats div { background: var(--ivory); padding: 26px 20px; text-align: center; }
.stats b { display: block; font: 600 clamp(2rem, 4vw, 3rem)/1 var(--font-display); color: var(--royal-600); }
.stats span { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }

/* ---------- Video ---------- */
.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--royal-900); box-shadow: var(--shadow-lg); isolation: isolate; }
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; animation: kenburns 24s ease-in-out infinite alternate; }
.video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,18,51,.75), rgba(28,18,51,.1) 60%); z-index: 1; pointer-events: none; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.video .play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; width: 88px; height: 88px; border-radius: 50%;
  border: 0; background: var(--gold-500); color: var(--royal-950); display: grid; place-items: center;
  transition: transform .4s var(--ease-spring);
}
.video .play::before, .video .play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold-300); animation: pulse-ring 2.4s var(--ease) infinite; }
.video .play::after { animation-delay: 1.2s; }
.video .play svg { width: 30px; height: 30px; margin-left: 4px; }
.video:hover .play { transform: scale(1.1); }
.video:hover img { filter: brightness(1.05); }
.video .v-label { position: absolute; left: 22px; bottom: 18px; right: 22px; z-index: 2; color: #fff; font: italic 500 clamp(1rem, 1.6vw, 1.2rem)/1.35 var(--font-display); }
.video .v-tag { position: absolute; left: 18px; top: 18px; z-index: 2; background: rgba(255,255,255,.14); backdrop-filter: blur(8px); color: #fff; padding: 8px 14px; border-radius: 999px; font: 600 .75rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.v-tag i { width: 8px; height: 8px; border-radius: 50%; background: #ff5b6e; animation: twinkle 1.6s infinite; }
.video-caption { margin-top: 16px; font: italic 500 1.05rem/1.5 var(--font-display); color: var(--muted); }

/* ---------- Flyer graphic cards ---------- */
.flyers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); perspective: 1400px; }
@media (max-width: 980px) { .flyers { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.flyer {
  --tx: 0deg; --ty: 0deg; --mx: 50%; --my: 50%;
  position: relative; display: flex; flex-direction: column; min-height: 640px; border-radius: var(--radius-lg); overflow: hidden;
  color: #fff; text-decoration: none; isolation: isolate; transform: rotateX(var(--tx)) rotateY(var(--ty)); transform-style: preserve-3d;
  transition: transform .5s var(--ease), box-shadow .5s; box-shadow: var(--shadow);
  background: linear-gradient(165deg, var(--f1, var(--royal-500)), var(--f2, var(--royal-900)));
}
.flyer:hover { box-shadow: var(--shadow-lg); }
.flyer::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.22), transparent 45%); opacity: 0; transition: opacity .4s; }
.flyer:hover::before { opacity: 1; }
.flyer .f-big { position: absolute; top: 18px; left: -6px; right: -6px; font: 800 italic clamp(4rem, 8vw, 6.4rem)/.85 var(--font-display); color: rgba(255,255,255,.1); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; z-index: 0; }
.flyer .f-circle { position: absolute; width: 78%; aspect-ratio: 1; left: 11%; top: 17%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-300), var(--gold-600)); z-index: 0; transition: transform 1.2s var(--ease); }
.flyer .f-circle::after { content: ""; position: absolute; inset: -18px; border: 1.5px dashed rgba(255,255,255,.4); border-radius: 50%; animation: spin 40s linear infinite; }
.flyer:hover .f-circle { transform: scale(1.08) translateY(-10px); }
.flyer .f-photo { position: relative; z-index: 1; margin: 90px auto 0; width: 72%; aspect-ratio: 3/3.6; border-radius: 999px 999px 0 0; overflow: hidden; transform: translateZ(40px); }
.flyer .f-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 18%); transition: transform 1.4s var(--ease); }
.flyer:hover .f-photo img { transform: scale(1.06); }
.flyer .f-photo.cutout { border-radius: 0; overflow: visible; }
.flyer .f-photo.cutout img { object-fit: contain; object-position: bottom; }
.flyer .f-body { position: relative; z-index: 2; margin-top: -60px; padding: 90px 28px 30px; background: linear-gradient(0deg, var(--f2, var(--royal-900)) 55%, transparent); transform: translateZ(60px); }
.flyer .f-kicker { font: 700 .74rem/1 var(--font-body); letter-spacing: .26em; color: var(--gold-300); text-transform: uppercase; }
.flyer h3 { font-size: clamp(1.9rem, 2.6vw, 2.4rem); margin: 10px 0 8px; }
.flyer p { color: #e3dbf5; margin-bottom: 20px; }
.flyer .f-tape { position: absolute; top: 26px; right: -38px; z-index: 3; transform: rotate(35deg); background: var(--gold-500); color: var(--royal-950); font: 700 .7rem/1 var(--font-body); letter-spacing: .2em; padding: 8px 48px; text-transform: uppercase; }

/* Flyer banner (large section graphic) */
.flyer-banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; color: #fff; padding: clamp(40px, 6vw, 80px); background: linear-gradient(135deg, var(--royal-600), var(--royal-900)); min-height: 520px; display: flex; align-items: center; }
.flyer-banner .fb-shape { position: absolute; z-index: -1; border-radius: 50%; }
.flyer-banner .s1 { width: 520px; aspect-ratio: 1; right: -120px; top: -140px; background: radial-gradient(circle, var(--gold-400), var(--gold-700) 70%); opacity: .8; }
.flyer-banner .s2 { width: 340px; aspect-ratio: 1; left: -120px; bottom: -160px; border: 2px solid rgba(232,210,155,.4); }
.flyer-banner .fb-photos { position: absolute; right: clamp(20px, 5vw, 80px); bottom: 0; display: flex; align-items: flex-end; gap: 16px; }
.flyer-banner .fb-copy { max-width: 540px; position: relative; z-index: 2; }
@media (max-width: 900px) { .flyer-banner { flex-direction: column; align-items: flex-start; padding-bottom: 0; } .flyer-banner .fb-photos { position: relative; right: auto; margin-top: 40px; align-self: center; } }

/* ---------- Flip cards (whole horizontal photo on the front) ---------- */
.flips { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.5vw, 30px); }
@media (max-width: 760px) { .flips { grid-template-columns: 1fr; } }
.flip { perspective: 1400px; aspect-ratio: 1616 / 1080; cursor: pointer; border: 0; padding: 0; background: none; text-align: left; width: 100%; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--ease); }
.flip.is-flipped .flip-in { transform: rotateY(180deg); }
@media (hover: hover) { .flip:hover .flip-in { transform: rotateY(180deg); } }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.flip-front img { width: 100%; height: 100%; object-fit: cover; }
.flip-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,18,51,.8), transparent 55%); }
.flip-front .fl-title { position: absolute; left: 24px; bottom: 20px; right: 24px; z-index: 2; color: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.flip-in, .flip-face { display: block; }
.fl-h { display: block; font: 600 clamp(1.35rem, 2.2vw, 1.9rem)/1.1 var(--font-display); margin: 0 0 .5em; }
.flip-front .fl-h { margin: 0; }
.flip-front .fl-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-500); color: var(--royal-950); display: grid; place-items: center; font-size: 1.3rem; animation: bob 3s ease-in-out infinite; }
.flip-back { transform: rotateY(180deg); background: linear-gradient(145deg, var(--royal-600), var(--royal-900)); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 4vw, 50px); }
.flip-back::before { content: ""; position: absolute; width: 260px; aspect-ratio: 1; right: -70px; bottom: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(219,187,112,.5), transparent 70%); }
.flip-back .fl-h { color: var(--gold-300); }
.flip-back .fl-p { display: block; font: 500 clamp(1.1rem, 1.8vw, 1.45rem)/1.45 var(--font-display); margin: 0; }

/* Highlight card */
.highlight { --cols: auto 1fr;
  position: relative; display: grid; grid-template-columns: var(--cols); gap: 18px clamp(20px, 3vw, 34px); align-items: center;
  padding: clamp(26px, 4vw, 44px); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, var(--gold-100), var(--ivory)); border: 1.5px solid var(--gold-300);
}
.highlight::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, var(--gold-400) 85%, transparent); animation: spin-var 6s linear infinite; opacity: .35; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin-var { to { --ang: 360deg; } }
.highlight .h-date { width: 110px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--royal-600); color: #fff; line-height: 1.05; }
.highlight .h-date b { font: 700 2.2rem/1 var(--font-display); display: block; }
.highlight .h-date small { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.highlight h3 { margin-bottom: 6px; }
.highlight p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .highlight { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ---------- Marquee gallery ---------- */
.marquee { position: relative; overflow: hidden; padding-block: 10px; mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: clamp(14px, 2vw, 26px); width: max-content; animation: marquee var(--speed, 70s) linear infinite; }
.marquee.reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.m-item { flex: none; width: clamp(280px, 36vw, 540px); aspect-ratio: 1616 / 1080; border-radius: var(--radius); overflow: hidden; position: relative; border: 0; padding: 0; background: var(--royal-200); box-shadow: var(--shadow); transition: transform .6s var(--ease); }
.m-item:nth-child(even) { transform: translateY(26px); }
.m-item:hover { transform: translateY(-8px) scale(1.02); }
.m-item img { width: 100%; height: 100%; object-fit: cover; }
.m-item span { position: absolute; left: 12px; bottom: 12px; padding: 7px 12px; border-radius: 999px; background: rgba(28,18,51,.6); backdrop-filter: blur(6px); color: #fff; font-size: .78rem; letter-spacing: .06em; opacity: 0; transform: translateY(8px); transition: .4s var(--ease); }
.m-item:hover span, .m-item:focus-visible span { opacity: 1; transform: none; }
.marquee-wrap { padding-bottom: 40px; }

/* ---------- Lightbox / dialogs ---------- */
dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; color: inherit; }
/* The close button sits just outside the corner; let it overhang instead of adding scrollbars. */
.video-dlg, .lightbox { overflow: visible; }
dialog::backdrop { background: rgba(20, 12, 38, .78); backdrop-filter: blur(8px); }
dialog[open] { animation: dlg-in .6s var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.lightbox { width: min(1200px, 94vw); }
.lightbox figure { margin: 0; }
.lightbox img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--radius); }
.lightbox figcaption { color: #fff; text-align: center; margin-top: 14px; letter-spacing: .06em; }
.dlg-close { position: absolute; top: -8px; right: -8px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #fff; color: var(--royal-900); font-size: 1.5rem; z-index: 5; box-shadow: var(--shadow); transition: transform .4s var(--ease-spring); }
.dlg-close:hover { transform: rotate(90deg); }
.lb-nav { position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--royal-900); font-size: 1.4rem; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.video-dlg { width: min(1100px, 94vw); }
.video-dlg .video { box-shadow: none; }

/* Popup */
.popup { width: min(880px, 94vw); }
.popup-card { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--ivory); box-shadow: var(--shadow-lg); }
.popup-art { position: relative; min-height: 440px; overflow: hidden; background: radial-gradient(circle at 50% 35%, var(--gold-400), var(--royal-600) 55%, var(--royal-900)); display: flex; align-items: flex-end; justify-content: center; isolation: isolate; }
.popup-art .rays { position: absolute; inset: -50%; background: repeating-conic-gradient(rgba(255,255,255,.12) 0 5deg, transparent 5deg 15deg); animation: spin 60s linear infinite; z-index: -1; }
.popup-art .num { position: absolute; top: 10px; left: 20px; font: 800 italic 9rem/1 var(--font-display); color: rgba(255,255,255,.18); }
.popup-art .arch { --w: 72%; margin-bottom: -4px; }
.popup-art .arch::before { border-color: rgba(255,255,255,.6); }
.popup-body { padding: clamp(28px, 4vw, 50px); display: flex; flex-direction: column; justify-content: center; }
.popup-body h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.popup-body .btn-row { margin-top: 10px; }
@media (max-width: 700px) { .popup-card { grid-template-columns: 1fr; } .popup-art { min-height: 250px; } .popup-art .arch { --w: 46%; } }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 300; translate: -50% 0; background: var(--royal-900); color: #fff; padding: 14px 22px; border-radius: 999px; box-shadow: var(--shadow-lg); font-size: .92rem; opacity: 0; transform: translateY(20px); transition: .5s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: none; }

/* ---------- Background video section (Fully Loaded on inkduncan.com) ---------- */
.bgvideo { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; color: #fff; isolation: isolate; padding-block: var(--section); }
.bgv-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bgv-media img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 26s ease-in-out infinite alternate; }
/* Background videos cover their section like a photo. Scaled up a little so YouTube's captions and title bar fall outside the frame. */
.bgv-media, .apg-hero-media { container-type: size; }
.bgv-media iframe { position: absolute; top: 50%; left: 50%; max-width: none; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); translate: -50% -50%; scale: 1.3; border: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); }
.bgv-media.is-playing iframe, .apg-hero-media.is-playing iframe { opacity: 1; }
/* APG hero: keep the night-and-fire look over the video so the headline and altar stay the focus. */
.apg-hero-media::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease); background: radial-gradient(ellipse 80% 55% at 50% 118%, rgba(255,110,30,.5), transparent 62%), linear-gradient(180deg, rgba(7,4,10,.8), rgba(18,8,23,.74) 55%, rgba(31,11,20,.88)); }
.apg-hero-media.is-playing::after { opacity: 1; }
.bgvideo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(28,18,51,.94) 0%, rgba(38,24,74,.8) 45%, rgba(38,24,74,.25) 100%); }
.bgv-tag { position: absolute; top: calc(var(--header-h) + 14px); left: var(--gutter); z-index: 3; display: inline-flex; align-items: center; gap: 12px; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.25); color: #fff; padding: 10px 18px 10px 10px; border-radius: 999px; font-weight: 600; font-size: .88rem; transition: background .3s, transform .4s var(--ease-spring); }
.bgv-tag:hover { background: rgba(255,255,255,.22); transform: scale(1.04); }
.bgv-tag .pi { width: 34px; height: 34px; border-radius: 50%; background: var(--gold-500); color: var(--royal-950); display: grid; place-items: center; }
.bgv-tag .pi svg { width: 13px; height: 13px; margin-left: 2px; }
.academy-lockup { font: 700 .8rem/1.2 var(--font-body); letter-spacing: .28em; color: var(--gold-400); text-transform: uppercase; }
.academy-lockup b { display: block; font: 700 italic clamp(2.2rem, 4vw, 3.2rem)/1 var(--font-display); letter-spacing: 0; color: #fff; text-transform: none; margin-top: 6px; }

/* ---------- Timeline testimonies ---------- */
.tl-years { display: flex; justify-content: space-between; position: relative; margin: 50px 0 34px; padding: 0; list-style: none; }
.tl-years::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--royal-200); }
.tl-years .tl-fill { position: absolute; left: 0; top: 50%; height: 2px; background: linear-gradient(90deg, var(--gold-500), var(--royal-500)); width: var(--p, 0%); transition: width .9s var(--ease); }
.tl-years button { position: relative; z-index: 1; border: 0; background: var(--ivory); padding: 0 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; font: 600 clamp(.95rem, 2vw, 1.3rem)/1 var(--font-display); color: var(--muted); transition: color .3s; }
.tl-years button i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--royal-300); background: var(--ivory); transition: .5s var(--ease-spring); }
.tl-years button[aria-selected="true"] { color: var(--royal-700); }
.tl-years button[aria-selected="true"] i { background: var(--gold-500); border-color: var(--gold-500); transform: scale(1.5); box-shadow: 0 0 0 6px rgba(201,162,78,.2); }
.tl-panels { position: relative; }
.tl-panel { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; color: #fff; isolation: isolate; box-shadow: var(--shadow-lg); }
.tl-panel[hidden] { display: none; }
.tl-panel.is-entering { animation: tl-in .9s var(--ease); }
@keyframes tl-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.tl-panel .bg-photo { z-index: -1; }
.tl-panel .bg-photo::after { background: linear-gradient(0deg, rgba(28,18,51,.95) 10%, rgba(28,18,51,.35) 70%, rgba(28,18,51,.1)); }
.tl-quote { padding: clamp(28px, 5vw, 60px); max-width: 820px; }
.tl-quote .yr { font: 800 italic clamp(4rem, 10vw, 8rem)/.8 var(--font-display); color: rgba(232,210,155,.35); display: block; margin-bottom: 10px; }
.tl-quote blockquote { margin: 0 0 16px; font: 500 clamp(1.25rem, 2.3vw, 1.8rem)/1.4 var(--font-display); }
.tl-quote cite { font-style: normal; color: var(--gold-300); letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; font-weight: 600; }

/* ---------- 3D books ---------- */
.shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(26px, 3vw, 44px); align-items: end; }
@media (max-width: 1000px) { .shelf { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .shelf { grid-template-columns: 1fr; } }
.book-item { text-align: center; }
.book-scene { perspective: 1200px; display: grid; place-items: center; height: 330px; margin-bottom: 20px; }
.book { --bw: 200px; --bh: 290px; --bd: 38px; position: relative; width: var(--bw); height: var(--bh); transform-style: preserve-3d; transform: rotateY(-32deg) rotateX(6deg); animation: book-sway 7s ease-in-out infinite; animation-delay: var(--d, 0s); transition: transform .9s var(--ease); display: block; text-decoration: none; color: inherit; }
@keyframes book-sway { 0%,100% { transform: rotateY(-34deg) rotateX(6deg) translateY(0); } 50% { transform: rotateY(-18deg) rotateX(3deg) translateY(-10px); } }
.book-item:hover .book, .book:focus-visible { animation-play-state: paused; transform: rotateY(-4deg) rotateX(0) translateY(-14px) scale(1.04); }
.book > * { position: absolute; }
.b-front { inset: 0; transform: translateZ(calc(var(--bd) / 2)); border-radius: 2px 8px 8px 2px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 18px; text-align: left; color: #fff; background: var(--cover, linear-gradient(160deg, var(--royal-500), var(--royal-900))); box-shadow: inset 4px 0 8px rgba(0,0,0,.25); }
.b-front::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,.28), transparent 30%, transparent 70%, rgba(255,255,255,.12)); }
.b-front::after { content: ""; position: absolute; width: 150px; aspect-ratio: 1; right: -40px; top: 60px; border-radius: 50%; background: radial-gradient(circle, var(--gold-400), transparent 70%); opacity: .7; }
.b-front small { position: relative; z-index: 1; font: 700 .62rem/1 var(--font-body); letter-spacing: .24em; color: var(--gold-300); text-transform: uppercase; }
.b-front strong { position: relative; z-index: 1; font: 600 italic 1.45rem/1.1 var(--font-display); }
.b-front span { position: relative; z-index: 1; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.b-back { inset: 0; transform: translateZ(calc(var(--bd) / -2)) rotateY(180deg); background: var(--royal-900); border-radius: 8px 2px 2px 8px; }
.b-spine { top: 0; left: 0; width: var(--bd); height: 100%; transform: rotateY(-90deg) translateZ(calc(var(--bd) / 2)); background: linear-gradient(90deg, var(--royal-900), var(--royal-700)); }
.b-pages { top: 3px; left: 2px; width: calc(var(--bd) - 4px); height: calc(100% - 6px); transform: rotateY(90deg) translateZ(calc(var(--bw) - var(--bd) / 2 - 2px)); background: repeating-linear-gradient(90deg, #fff 0 2px, #e9e3d6 2px 3px); }
.book-shadow { position: absolute; bottom: -24px; left: 10%; width: 90%; height: 20px; background: radial-gradient(ellipse, rgba(28,18,51,.35), transparent 70%); filter: blur(4px); }
.book-item h3 { font-size: 1.3rem; margin-bottom: 6px; }
.book-item p { color: var(--muted); font-size: .95rem; }
.dark .book-item p { color: #d9d0ee; }
.story-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 330px; margin-bottom: 20px; border-radius: var(--radius-lg); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; box-shadow: var(--shadow); }
.story-tile .bg-photo { z-index: -1; }
.story-tile .bg-photo::after { background: linear-gradient(0deg, rgba(28,18,51,.95), rgba(69,48,125,.3)); }
.story-tile .st-in { padding: 24px; text-align: left; }
.story-tile .st-in b { font: 600 italic 1.6rem/1.1 var(--font-display); display: block; }

/* ---------- Forms ---------- */
.form-card { position: relative; background: var(--white); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow-lg); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field { position: relative; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--royal-800); margin-bottom: 7px; letter-spacing: .02em; }
.field label .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--royal-50);
  border: 1.5px solid var(--royal-100); border-radius: 12px; padding: 14px 16px; min-height: 52px;
  transition: border-color .3s, box-shadow .3s, background .3s; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--royal-600) 50%), linear-gradient(135deg, var(--royal-600) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--royal-500); background: #fff; box-shadow: 0 0 0 4px rgba(115,88,187,.15); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #c0405a; }
.field .err { display: none; color: #b0324c; font-size: .8rem; margin-top: 6px; }
.field.invalid .err { display: block; }
.form-success { display: none; text-align: center; padding: 30px 10px; }
.form-success .check { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; background: var(--gold-500); display: grid; place-items: center; animation: pop .7s var(--ease-spring); }
.form-success .check svg { width: 36px; height: 36px; stroke: var(--royal-950); stroke-width: 3; fill: none; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .6s .3s var(--ease) forwards; }
@keyframes pop { from { transform: scale(0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.form-success p { font: 500 1.3rem/1.4 var(--font-display); color: var(--royal-800); margin: 0; }
form.is-sent > :not(.form-success) { display: none; }
form.is-sent .form-success { display: block; }
.inline-form { display: flex; gap: 12px; flex-wrap: wrap; }
.inline-form .field { flex: 1 1 200px; }
.inline-form .field label { color: inherit; }
.inline-form .btn { align-self: flex-end; }
.dark .inline-form .field input, .on-photo .inline-form .field input { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
.dark .inline-form .field input::placeholder, .on-photo .inline-form .field input::placeholder { color: rgba(255,255,255,.55); }
.dark .form-success p, .on-photo .form-success p { color: #fff; }

/* ---------- Topics / lists ---------- */
.topics { list-style: none; padding: 0; margin: 20px 0 30px; display: grid; gap: 12px; }
.topics li { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); font: 600 1.1rem/1.3 var(--font-display); transition: transform .4s var(--ease), box-shadow .4s; }
.topics li:hover { transform: translateX(8px); box-shadow: var(--shadow); }
.topics li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 5px var(--gold-100); }

/* ---------- Social + footer ---------- */
.socials { display: flex; flex-wrap: wrap; gap: 12px; }
.socials a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1.5px solid currentColor; text-decoration: none; font-weight: 600; font-size: .9rem; transition: transform .35s var(--ease-spring), background .3s, color .3s; }
.socials a:hover { transform: translateY(-3px); background: var(--gold-500); border-color: var(--gold-500); color: var(--royal-950); }
.site-footer { background: var(--royal-950); color: #cfc6e6; padding: 80px 0 40px; position: relative; overflow: hidden; }
.site-footer .f-mark { font: 800 italic clamp(3.5rem, 13vw, 12rem)/.8 var(--font-display); color: rgba(255,255,255,.05); white-space: nowrap; position: absolute; bottom: -.1em; left: 50%; translate: -50% 0; pointer-events: none; }
.site-footer .f-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; align-items: flex-start; margin-bottom: 50px; position: relative; }
.site-footer .brand b { color: #fff; }
.f-links { display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; padding: 0; margin: 0; }
.f-links a { text-decoration: none; transition: color .3s; }
.f-links a:hover { color: var(--gold-400); }
.f-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 26px; font-size: .88rem; position: relative; }
.f-bottom a { color: inherit; }

/* ---------- Generic cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card {
  --mx: 50%; --my: 50%; position: relative; padding: 30px 26px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s; overflow: hidden; isolation: isolate;
}
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(320px circle at var(--mx) var(--my), var(--royal-100), transparent 60%); opacity: 0; transition: opacity .4s; }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }
.card .ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--royal-500), var(--royal-700)); color: #fff; margin-bottom: 18px; transition: transform .6s var(--ease-spring); }
.card:hover .ic { transform: rotate(-8deg) scale(1.1); }
.card .ic svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.card p { color: var(--muted); margin: 0; font-size: .97rem; }
.dark .card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.dark .card::before { background: radial-gradient(320px circle at var(--mx) var(--my), rgba(201,162,78,.18), transparent 60%); }
.dark .card p { color: #cfc6e6; }

.quote-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.quote-card { position: relative; background: var(--white); padding: 34px 28px 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s; }
.quote-card:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--shadow); }
.quote-card::before { content: "\201C"; position: absolute; top: -10px; left: 20px; font: 700 6rem/1 var(--font-display); color: var(--gold-400); }
.quote-card blockquote { margin: 18px 0 18px; font: 500 1.15rem/1.5 var(--font-display); }
.quote-card cite { font-style: normal; font-weight: 600; color: var(--royal-600); font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; }
.dark .quote-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.dark .quote-card cite { color: var(--gold-300); }

/* Section heading row */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head > div { max-width: 680px; }
.sec-head h2 { margin-bottom: .25em; }
.sec-head p { margin: 0; }

/* Decorative big word that slides with scroll */
.bigword { font: 800 italic clamp(5rem, 16vw, 15rem)/.85 var(--font-display); color: var(--royal-100); white-space: nowrap; pointer-events: none; user-select: none; position: absolute; left: 0; z-index: 0; }
.dark .bigword { color: rgba(255,255,255,.04); }
.section > .wrap, .section > .wrap-narrow { position: relative; z-index: 2; }

/* ==========================================================================
   Page components
   ========================================================================== */

/* Two by Two steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { padding: 24px; border-radius: var(--radius); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); transition: transform .5s var(--ease), background .4s; }
.step:hover { transform: translateY(-6px); background: rgba(255,255,255,.14); }
.step b { display: block; font: 600 1.4rem/1.2 var(--font-display); color: var(--gold-300); margin-bottom: 6px; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; } }

/* Academy photo stack on inkduncan.com */
.academy-stack { display: grid; gap: 30px; }
.academy-stack > :nth-child(2) { width: 80%; margin-left: auto; margin-top: -60px; }
@media (max-width: 900px) { .academy-stack > :nth-child(2) { margin-top: -30px; } }

/* ---------- A Praying Generation hero ---------- */
.apg-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; color: #fff; isolation: isolate; padding: calc(var(--header-h) + 40px) 0 80px; background: var(--royal-950); }
.apg-hero-media { position: absolute; inset: 0; z-index: -2; }
.apg-hero-media iframe { position: absolute; top: 50%; left: 50%; max-width: none; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); translate: -50% -50%; scale: 1.3; border: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 1.2s var(--ease); }
.apg-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 75% 60%, rgba(201,162,78,.28), transparent 50%), linear-gradient(95deg, rgba(28,18,51,.96) 0%, rgba(38,24,74,.86) 45%, rgba(38,24,74,.55) 100%); }
.bg-slides { position: absolute; inset: 0; }
.bg-slides .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s var(--ease); }
.bg-slides .slide.is-on { opacity: 1; }
.bg-slides .slide img { width: 100%; height: 100%; object-fit: cover; }
.bg-slides .slide.is-on img { animation: kenburns 9s ease-out forwards; }
.apg-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.apg-hero-copy .lede { color: #e8e1f7; }
.apg-hero-art { position: relative; display: grid; place-items: center; }
.altar-glow { position: absolute; width: 130%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(232,210,155,.55), rgba(201,162,78,.15) 40%, transparent 65%); animation: glow 5s ease-in-out infinite; }
@keyframes glow { 0%,100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
.stamp { position: absolute; left: -10px; bottom: 30px; z-index: 3; width: 124px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--gold-500); color: var(--royal-950); font: 700 italic .95rem/1.1 var(--font-display); box-shadow: var(--shadow); animation: spin 22s linear infinite; }
.embers { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.embers i { position: absolute; bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #fff4d6, var(--gold-400) 50%, transparent 70%); box-shadow: 0 0 12px 2px rgba(219,187,112,.6); animation: ember var(--t) linear infinite; animation-delay: var(--d); opacity: 0; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: .7; } 100% { transform: translate(var(--x), -105vh); opacity: 0; } }
@media (max-width: 900px) {
  .apg-hero-grid { grid-template-columns: 1fr; }
  .apg-hero-art { margin-top: 20px; }
  .apg-hero-art .arch { --w: 58vw !important; }
  .stamp { width: 96px; font-size: .8rem; left: 4%; }
}

/* Countdown */
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 34px; max-width: 520px; }
.countdown div { text-align: center; padding: 20px 8px 16px; border-radius: var(--radius); background: linear-gradient(160deg, var(--royal-600), var(--royal-900)); color: #fff; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.countdown div::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.25); }
.countdown b { display: block; font: 700 clamp(1.9rem, 4vw, 2.8rem)/1 var(--font-display); color: var(--gold-300); font-variant-numeric: tabular-nums; }
.countdown b.tick { animation: tick .5s var(--ease); }
@keyframes tick { from { transform: translateY(-40%); opacity: 0; } }
.countdown span { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.how { list-style: none; padding: 0; margin: 18px 0 26px; counter-reset: how; display: grid; gap: 12px; }
.how li { counter-increment: how; position: relative; padding: 18px 20px 18px 70px; border-radius: 14px; background: var(--white); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease); }
.how li:hover { transform: translateX(6px); }
.how li::before { content: counter(how); position: absolute; left: 18px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-500); color: var(--royal-950); font: 700 1rem/1 var(--font-display); }
.how b { display: block; color: var(--royal-700); }

/* Challenge flyer */
.challenge-flyer { --tx: 0deg; --ty: 0deg; position: relative; aspect-ratio: 4 / 3.4; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; color: #fff; background: radial-gradient(circle at 70% 30%, var(--gold-400), var(--royal-600) 45%, var(--royal-900)); display: flex; align-items: flex-end; justify-content: flex-end; padding-right: 6%; box-shadow: var(--shadow-lg); transform: perspective(1200px) rotateX(var(--tx)) rotateY(var(--ty)); transition: transform .5s var(--ease); }
.challenge-flyer .rays { position: absolute; inset: -50%; z-index: -1; background: repeating-conic-gradient(from 0deg at 65% 45%, rgba(255,255,255,.1) 0 5deg, transparent 5deg 15deg); animation: spin 80s linear infinite; }
.cf-num { position: absolute; left: 4%; top: -4%; font: 800 italic clamp(10rem, 22vw, 17rem)/1 var(--font-display); color: rgba(255,255,255,.16); }
.cf-kicker { position: absolute; left: 7%; top: 10%; font: 700 .75rem/1 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-300); z-index: 2; }
.cf-title { position: absolute; left: 7%; bottom: 10%; font: 700 clamp(2.2rem, 4vw, 3.4rem)/.95 var(--font-display); z-index: 2; text-shadow: 0 6px 20px rgba(0,0,0,.3); }
.cf-title em { color: var(--gold-300); }
.challenge-flyer .arch { margin-bottom: -2px; }
.challenge-flyer .arch::before { border-color: rgba(255,255,255,.5); }

/* Expanding panels */
.panels { display: flex; gap: 12px; height: clamp(460px, 62vh, 620px); }
.panel { position: relative; flex: 1; min-width: 0; border-radius: var(--radius-lg); overflow: hidden; color: #fff; isolation: isolate; transition: flex 1s var(--ease); box-shadow: var(--shadow); }
.panel.is-open { flex: 4.2; }
.panel .bg-photo { z-index: -1; }
.panel .bg-photo::after { background: linear-gradient(0deg, rgba(28,18,51,.95) 5%, rgba(38,24,74,.35) 60%, rgba(38,24,74,.15)); transition: background .6s; }
.panel:not(.is-open) .bg-photo::after { background: linear-gradient(0deg, rgba(28,18,51,.92), rgba(69,48,125,.7)); }
.panel > button { position: absolute; inset: 0; width: 100%; border: 0; background: none; color: #fff; text-align: left; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; z-index: 1; }
.panel .pn { font: 700 italic 1.8rem/1 var(--font-display); color: var(--gold-300); }
.panel .pl { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 1.25rem/1.1 var(--font-display); white-space: nowrap; transition: opacity .4s; }
.panel.is-open .pl { opacity: 0; }
.panel-body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 3vw, 40px); z-index: 2; opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .8s var(--ease); pointer-events: none; max-width: 560px; }
.panel.is-open .panel-body { opacity: 1; transform: none; transition-delay: .35s; }
.panel-body p { color: #e8e1f7; margin: 0; }
@media (max-width: 800px) {
  .panels { flex-direction: column; height: auto; }
  .panel { flex: none; height: 84px; transition: height .9s var(--ease); }
  .panel.is-open { height: 400px; flex: none; }
  .panel > button { flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 16px; }
  .panel .pl { writing-mode: horizontal-tb; transform: none; white-space: normal; }
}

/* Events */
.events { display: grid; gap: 16px; margin-top: 40px; }
.event { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 22px 26px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s; }
.event:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.event h3 { margin: 0 0 4px; font-size: 1.35rem; }
.event p { margin: 0; color: var(--muted); }
.ev-date { width: 86px; aspect-ratio: 1; border-radius: 18px; display: grid; place-content: center; text-align: center; background: linear-gradient(160deg, var(--royal-600), var(--royal-900)); color: #fff; }
.ev-date b { font: 700 1.5rem/1 var(--font-display); color: var(--gold-300); }
.ev-date span { font-size: .75rem; letter-spacing: .14em; }
.event.is-soon { background: transparent; border: 1.5px dashed var(--royal-300); box-shadow: none; }
.event.is-soon .ev-date { background: var(--royal-100); color: var(--royal-700); }
.event.is-soon .ev-date b { color: var(--royal-600); }
@media (max-width: 620px) { .event { grid-template-columns: auto 1fr; } .event .btn { grid-column: 1 / -1; } }

.shelf-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 520px) { .shelf-2 { grid-template-columns: 1fr; } }
.video-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .video-pair { grid-template-columns: 1fr; } }
.qc-tag { position: absolute; top: 18px; right: 18px; font: 700 .68rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; background: var(--gold-100); color: var(--gold-700); }
.dark .qc-tag { background: rgba(219,187,112,.15); color: var(--gold-300); }
.invite { min-height: 70vh; display: flex; align-items: center; }

/* ---------- Fully Loaded hero ---------- */
.fl-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; color: #fff; isolation: isolate; padding: calc(var(--header-h) + 40px) 0 80px; background: radial-gradient(circle at 78% 40%, var(--royal-400), transparent 55%), linear-gradient(150deg, var(--royal-500), var(--royal-800)); }
.fl-grid-paper { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 38px 38px; mask: linear-gradient(90deg, #000, transparent 85%); -webkit-mask: linear-gradient(90deg, #000, transparent 85%); animation: paper 40s linear infinite; }
@keyframes paper { to { background-position: 38px 38px, 38px 38px; } }
.fl-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.fl-hero-copy .lede { color: #efe9fb; }
.fl-strict { display: inline-block; font-weight: 600; padding: 12px 18px; border-left: 3px solid var(--gold-400); background: rgba(255,255,255,.08); border-radius: 0 12px 12px 0; color: #fff !important; }
.meter { max-width: 440px; margin: 26px 0 30px; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #d9d0ee; margin-bottom: 8px; }
.meter-top b { font: 700 1.3rem/1 var(--font-display); color: var(--gold-300); letter-spacing: 0; }
.meter-bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; padding: 2px; }
.meter-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold-600), var(--gold-300), var(--gold-500)); background-size: 200% 100%; animation: shimmer 3s linear infinite; transition: width 1.8s var(--ease) .2s; }
.meter.is-in .meter-bar i { width: 100%; }
.fl-slides { position: relative; width: min(420px, 100%); margin-inline: auto; aspect-ratio: 3 / 4.2; }
.fl-slides .slide { position: absolute; inset: 0; opacity: 0; transform: translateX(40px) rotate(3deg) scale(.96); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.fl-slides .slide.is-on { opacity: 1; transform: none; z-index: 1; }
.fl-slides .slide .arch::after { display: none; }
.fl-slides .slide.is-on img { animation: kenburns 6s ease-out forwards; }
.fl-circle { position: absolute; width: 70%; aspect-ratio: 1; right: -18%; top: -10%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-300), var(--gold-600)); animation: bob 7s ease-in-out infinite; }
.fl-stamp { position: absolute; left: -34px; bottom: 60px; z-index: 3; width: 112px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--ivory); color: var(--royal-800); font: 700 .7rem/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; box-shadow: var(--shadow); border: 2px dashed var(--royal-300); transform: rotate(-12deg); }
.fl-stamp b { font: 800 italic 1.6rem/1 var(--font-display); letter-spacing: 0; color: var(--gold-600); }
.dots { position: absolute; left: 50%; bottom: -34px; translate: -50% 0; display: flex; gap: 8px; z-index: 3; }
.dots button { width: 34px; height: 5px; border: 0; padding: 0; border-radius: 4px; background: rgba(255,255,255,.3); overflow: hidden; position: relative; }
.dots button::after { content: ""; position: absolute; inset: 0; background: var(--gold-400); transform: scaleX(0); transform-origin: left; }
.dots button.is-on::after { animation: dotfill var(--ms, 5s) linear forwards; }
@keyframes dotfill { to { transform: scaleX(1); } }
@media (max-width: 900px) { .fl-hero-grid { grid-template-columns: 1fr; } .fl-slides { width: min(320px, 78vw); margin-top: 20px; margin-bottom: 30px; } .fl-stamp { left: -14px; width: 92px; } }
.brand-sub { font: 600 .62rem/1 var(--font-body); letter-spacing: .26em; display: block; margin-top: 5px; opacity: .85; }

/* Who it's for checklist */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checks li { position: relative; padding: 20px 22px 20px 70px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); font: 500 clamp(1.05rem, 1.6vw, 1.25rem)/1.4 var(--font-display); }
.checks li:hover { background: rgba(255,255,255,.18); }
.checks li::before { content: ""; position: absolute; left: 20px; top: 50%; margin-top: -16px; width: 32px; height: 32px; border-radius: 50%; background: var(--gold-500) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1233' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/18px no-repeat; transform: scale(0); transition: transform .6s var(--ease-spring) calc(var(--d, 0s) + .4s); }
.checks li.is-in::before { transform: scale(1); }

/* Four weeks */
.weeks { position: relative; --p: 0; }
.weeks-line { height: 6px; border-radius: 6px; background: var(--royal-100); margin-bottom: 30px; overflow: hidden; }
.weeks-line i { display: block; height: 100%; width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--royal-400), var(--gold-500)); border-radius: 6px; }
.weeks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; perspective: 1200px; }
@media (max-width: 980px) { .weeks-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .weeks-grid { grid-template-columns: 1fr; } }
.week { --tx: 0deg; --ty: 0deg; position: relative; padding: 30px 26px 44px; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; }

.week:hover { box-shadow: var(--shadow); }
.week .wk { font: 700 .72rem/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-600); }
.week h3 { font-size: clamp(2rem, 3vw, 2.6rem); margin: 12px 0 10px; color: var(--royal-700); }
.week p { color: var(--muted); margin: 0; }
.wk-fill { position: absolute; left: 0; bottom: 0; height: 8px; width: 100%; background: var(--royal-100); }
.wk-fill::after { content: ""; position: absolute; inset: 0; width: var(--f); background: linear-gradient(90deg, var(--royal-400), var(--gold-500)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) calc(var(--d, 0s) + .3s); }
.week.is-in .wk-fill::after { transform: scaleX(1); }

/* Coaches */
.coaches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; perspective: 1200px; }
@media (max-width: 980px) { .coaches { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .coaches { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; } }
.coach { --tx: 0deg; --ty: 0deg; text-align: center; }

.coach .arch { margin: 12px auto 26px; }
.coach .arch::after { width: 40%; }
.coach h3 { margin-bottom: 4px; }
.coach p { color: var(--muted); font-size: .95rem; }
.mono { position: relative; margin: 12px auto 26px; aspect-ratio: 3 / 4.2; border-radius: 999px 999px var(--radius) var(--radius); display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, var(--m1, var(--royal-400)), var(--m2, var(--royal-800))); box-shadow: var(--shadow); }
.mono::before { content: ""; position: absolute; inset: -40%; background: repeating-conic-gradient(rgba(255,255,255,.08) 0 8deg, transparent 8deg 20deg); animation: spin 50s linear infinite; }
.mono span { position: relative; font: 700 italic 5rem/1 var(--font-display); color: rgba(255,255,255,.9); }

/* FAQ */
.faq { margin-top: 44px; display: grid; gap: 12px; }
.faq details { border-radius: 16px; background: var(--white); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .4s; }
.faq details[open] { box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 64px 22px 26px; font: 600 1.15rem/1.35 var(--font-display); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; margin-top: -17px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--royal-100); color: var(--royal-700); font: 400 1.4rem/1 var(--font-body); transition: transform .5s var(--ease-spring), background .3s, color .3s; }
.faq details[open] summary::after { transform: rotate(135deg); background: var(--gold-500); color: var(--royal-950); }
.faq details > div { padding: 0 26px 22px; color: var(--muted); }
.faq details[open] > div { animation: faq-in .6s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-8px); } }
.faq p { margin: 0; }

/* ==========================================================================
   Client review round 1 (Ink's walkthrough)
   ========================================================================== */

/* Flowing line of words (titles on inkduncan.com, "set free, delivered..." on APG) */
.word-ticker { position: relative; overflow: hidden; margin: 0 0 22px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.word-ticker .marquee-track { gap: 0; align-items: center; animation: marquee var(--speed, 34s) linear infinite; }
.word-ticker span { font: 600 .8rem/1 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-300); white-space: nowrap; padding-inline: 16px; }
.word-ticker i { font-style: normal; color: var(--gold-500); font-size: .7rem; }
.word-ticker.lg span { font: italic 600 clamp(1.5rem, 3vw, 2.4rem)/1.15 var(--font-display); letter-spacing: 0; text-transform: none; color: #fff; padding-inline: 24px; }
.word-ticker.lg i { font-size: 1.1rem; color: #ffd36b; }

/* Big background word that keeps travelling (loops instead of only shifting on scroll) */
.bigword.loop { left: 0; right: 0; overflow: hidden; }
.bigword.loop .marquee-track { gap: .35em; align-items: center; animation: marquee var(--speed, 46s) linear infinite; }
.bigword.loop .bw-star { font-size: .45em; font-style: normal; color: var(--gold-300); opacity: .8; }
.dark .bigword.loop .bw-star, .fire-section .bigword.loop .bw-star { color: rgba(232,210,155,.3); }

/* inkduncan.com hero as a flyer: background-removed photo of Ink */
.hero-flyer { padding-bottom: 0; place-items: stretch; }
.hero-flyer .hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(10px, 3vw, 50px); width: min(1240px, 100% - var(--gutter) * 2); margin-inline: auto; }
.hero-flyer .hero-copy { text-align: left; width: 100%; max-width: 640px; min-width: 0; padding: 0 0 clamp(40px, 6vh, 70px); }
.word-ticker { max-width: 100%; min-width: 0; }
.hero-flyer .hero-copy .lede { margin-inline: 0; }
.hero-flyer .word-ticker { max-width: 560px; }
.hero-art { position: relative; align-self: end; height: min(84svh, 780px); display: grid; place-items: end center; }
.hero-art .ha-word { position: absolute; top: 2%; left: 50%; translate: -50% 0; z-index: 0; font: 800 italic clamp(7rem, 16vw, 15rem)/.8 var(--font-display); color: transparent; -webkit-text-stroke: 1.5px rgba(232,210,155,.5); white-space: nowrap; letter-spacing: -.02em; }
.hero-art .ha-sun { position: absolute; z-index: 0; width: 72%; aspect-ratio: 1; left: 14%; top: 17%; border-radius: 50%; background: radial-gradient(circle at 38% 32%, var(--gold-300), var(--gold-500) 45%, var(--gold-700)); box-shadow: 0 0 140px 40px rgba(219,187,112,.3); animation: glow 6s ease-in-out infinite; }
.hero-art .ha-ring { position: absolute; z-index: 0; width: 90%; aspect-ratio: 1; left: 5%; top: 8%; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.35); animation: spin 70s linear infinite; }
.hero-art .ha-cut { position: absolute; z-index: 2; bottom: 0; left: 50%; translate: -50% 0; height: 97%; width: auto; max-width: none; filter: drop-shadow(0 30px 40px rgba(20,10,40,.5)); -webkit-mask: linear-gradient(180deg, #000 80%, transparent 99%); mask: linear-gradient(180deg, #000 80%, transparent 99%); }
.hero-art .ha-badge { position: absolute; z-index: 3; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.13); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.28); color: #fff; font: 600 .68rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; box-shadow: var(--shadow); text-decoration: none; transition: transform .4s var(--ease-spring), background .3s; }
.hero-art a.ha-badge:hover { transform: translateY(-4px); background: rgba(255,255,255,.22); }
.hero-art .ha-badge b { display: block; font: 700 italic 1.3rem/1.1 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--gold-300); }
.hero-art .b1 { left: -12%; top: 24%; }
.hero-art .b2 { right: -4%; bottom: 16%; }
@media (max-width: 1080px) {
  .hero-flyer .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-flyer .hero-copy { text-align: center; margin-inline: auto; padding-bottom: 10px; }
  .hero-flyer .hero-copy .lede { margin-inline: auto; }
  .hero-flyer .btn-row { justify-content: center; }
  .hero-flyer .word-ticker { margin-inline: auto; }
  .hero-art { height: min(118vw, 600px); }
  .hero-art .b1 { left: 0; top: 3%; } .hero-art .b2 { right: 0; bottom: 10%; }
}

/* inkduncan.com hero with a full background graphic (hero-banner.jpg). Ink is on the right, the copy on the dark left. */
/* Desktop: the section takes the banner's own shape (2000x848) so the whole graphic shows and the copy sits in its dark left side. */
.hero-banner { background: #110b0c; min-height: 0; height: max(700px, 44vw); max-height: 100svh; padding: 0; }
.hero-banner .hero-copy { max-width: min(600px, 44vw); }
.hero-banner .hero-copy h1 { font-size: clamp(2.6rem, 4.4vw, 4.8rem); }
.hero-banner .hb-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-banner .hb-media img { width: 100%; height: 100%; object-fit: cover; object-position: 100% center; transform-origin: 85% 50%; animation: hb-breathe 22s ease-in-out infinite alternate; }
@keyframes hb-breathe { from { transform: scale(1); } to { transform: scale(1.05); } }
.hero-banner .hb-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,9,10,.88) 0%, rgba(14,9,10,.62) 30%, rgba(14,9,10,.12) 55%, transparent 70%), linear-gradient(0deg, rgba(14,9,10,.45), transparent 22%); }
.hero-banner .hero-grid { height: 100%; align-items: center; padding-top: var(--header-h); }
.hero-banner .hero-copy { padding-bottom: 0; }
.hero-banner .hero-copy h1 { text-shadow: 0 6px 30px rgba(0,0,0,.45); }
.hero-banner .hero-copy .lede { color: #f1e9de; }
@media (max-width: 1080px) {
  .hero-banner { align-content: start; height: auto; max-height: none; padding: 0; }
  .hero-banner .hero-copy { max-width: 640px; }
  .hero-banner .hero-grid { height: auto; padding-top: calc(var(--header-h) + 30px); order: 1; }
  .hero-banner .hb-media { position: relative; inset: auto; order: 2; height: min(110vw, 520px); margin-top: 30px; -webkit-mask: linear-gradient(180deg, transparent, #000 18%); mask: linear-gradient(180deg, transparent, #000 18%); }
  .hero-banner .hb-media img { object-position: 76% center; }
  .hero-banner .hb-media::after { background: linear-gradient(0deg, rgba(14,9,10,.35), transparent 30%); }
}

/* Welcome video band: the video plays silently behind the section once its ID is set */
.video-band { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding-block: calc(var(--section) * 1.15); background: var(--royal-950); text-align: center; }
.video-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgba(28,18,51,.4), rgba(28,18,51,.88) 72%), linear-gradient(180deg, rgba(28,18,51,.55), rgba(28,18,51,.8)); }
.video-band h2 { margin-bottom: .2em; }
.video-band .lede { color: #efe9fb; margin-inline: auto; font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.55rem); }
.play-big { display: inline-flex; flex-direction: column; align-items: center; gap: 16px; margin: 22px auto 0; background: none; border: 0; color: #fff; font: 600 .74rem/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; }
.play-big .pi { position: relative; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-500); color: var(--royal-950); transition: transform .45s var(--ease-spring); box-shadow: 0 20px 50px -12px rgba(201,162,78,.7); }
.play-big .pi::before, .play-big .pi::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold-300); animation: pulse-ring 2.4s var(--ease) infinite; }
.play-big .pi::after { animation-delay: 1.2s; }
.play-big:hover .pi { transform: scale(1.08); }
.play-big svg { width: 34px; height: 34px; margin-left: 5px; }
.video-band .stats { background: rgba(255,255,255,.16); margin-top: 44px; }
.video-band .stats div { background: rgba(28,18,51,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.video-band .stats b { color: var(--gold-300); }
.video-band .stats div > span { color: #d9d0ee; }

/* Ministerial fire world (APG section on inkduncan.com, and aprayinggeneration.com) */
.fire-section { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(ellipse 70% 55% at 72% 105%, rgba(240,122,42,.5), transparent 60%), radial-gradient(ellipse 50% 40% at 12% 0%, rgba(115,88,187,.32), transparent 60%), linear-gradient(180deg, #120a1c, #1b0e22 55%, #2a1020); }
.fire-section p, .fire-section .lede { color: #eee2f0; }
.fire-section .eyebrow { color: var(--gold-300); }
.fire-section .tagline-strong { color: var(--gold-300); }
.fire-section > .wrap, .fire-section > .wrap-narrow { position: relative; z-index: 2; }
.fire-section .bgv-media { z-index: -2; }
.fire-section .bgv-media.is-playing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,10,28,.95), rgba(18,10,28,.78) 55%, rgba(42,16,32,.55)); }
.fire-section .bgv-tag { top: 22px; left: auto; right: var(--gutter); }
@media (max-width: 700px) { .fire-section .bgv-tag { position: relative; top: auto; right: auto; left: auto; margin: 0 var(--gutter) 28px; } }
.glory { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: conic-gradient(from 180deg at 50% -8%, transparent 0 158deg, rgba(255,236,200,.08) 166deg, transparent 172deg, rgba(255,236,200,.06) 182deg, transparent 188deg, rgba(255,236,200,.08) 197deg, transparent 204deg 360deg); animation: glory 9s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes glory { to { opacity: .55; transform: scaleX(1.1); } }

/* CSS flame (no photo needed) */
.flame { position: relative; width: var(--fw, 170px); aspect-ratio: 1 / 1.45; filter: drop-shadow(0 0 40px rgba(255,140,40,.55)); }
.flame i { position: absolute; left: 50%; bottom: 6%; aspect-ratio: 1; border-radius: 50% 0 50% 50%; translate: -50% 0; rotate: -45deg; animation: flicker 1.6s ease-in-out infinite alternate; }
.flame i:nth-child(1) { width: 76%; background: radial-gradient(circle at 60% 40%, #ff9a3c, #e2461d 55%, #8a1d12); }
.flame i:nth-child(2) { width: 54%; bottom: 7%; background: radial-gradient(circle at 60% 40%, #ffd36b, #ff8a2a 70%); animation-duration: 1.2s; animation-delay: -.4s; }
.flame i:nth-child(3) { width: 32%; bottom: 8%; background: radial-gradient(circle at 60% 40%, #fffbe8, #ffd36b 75%); animation-duration: .9s; animation-delay: -.2s; }
@keyframes flicker { 0% { transform: scale(1, 1) skewX(0); } 50% { transform: scale(.93, 1.07) skewX(2deg); } 100% { transform: scale(1.04, .96) skewX(-2deg); } }
.altar { position: relative; display: grid; justify-items: center; text-align: center; }
.altar .flame { --fw: clamp(150px, 17vw, 230px); }
.altar-stone { width: min(320px, 80%); height: 16px; margin-top: -10px; border-radius: 6px; background: linear-gradient(180deg, #5a3040, #221020); box-shadow: 0 -8px 34px rgba(255,140,40,.45); }
.altar-verse { margin: 22px auto 0; font: italic 500 clamp(1.1rem, 1.7vw, 1.35rem)/1.45 var(--font-display); color: #f6e7cf; max-width: 30ch; }
.altar-verse cite { display: block; margin-top: 10px; font: 600 .72rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-400); font-style: normal; }
.altar .highlight { margin-top: 34px; text-align: left; }
.fire-section .highlight { color: var(--ink); }
.fire-section .highlight p { color: var(--muted); }
.fire-section .highlight .eyebrow { color: var(--gold-700); }
.decl { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; gap: 2px; }
.decl li { font: 600 clamp(1.7rem, 3.3vw, 2.6rem)/1.15 var(--font-display); color: #fff; }
.decl li span { font-weight: 500; opacity: .85; }
.decl li b { font-style: italic; background: linear-gradient(90deg, #ffd36b, #ff8a2a, #ffd36b); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5s linear infinite; }

/* "Sparks": glowing tags for prayer meetings, campus nights... */
.sparks { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.sparks li { position: relative; padding: 12px 18px 12px 38px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(232,210,155,.35); color: #fff; font: 600 .74rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; overflow: hidden; }
.sparks li::before { content: ""; position: absolute; left: 15px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: radial-gradient(circle, #fff4d6, #ffb347 55%, transparent 72%); box-shadow: 0 0 12px 3px rgba(255,160,60,.75); animation: ember-pulse 1.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.sparks li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,210,140,.35) 50%, transparent 65%); transform: translateX(-120%); animation: sweep 4.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes ember-pulse { 50% { transform: scale(1.5); opacity: .7; } }
@keyframes sweep { 60%, 100% { transform: translateX(120%); } }

/* Flip card fronts made as graphics (scripture / flame) instead of photos */
.flip-art { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 30px 34px 76px; color: #fff; background: radial-gradient(ellipse at 50% 112%, rgba(240,122,42,.6), transparent 60%), linear-gradient(160deg, #2a1433, #120a1c); }
.flip-art.royal { background: radial-gradient(circle at 82% 12%, rgba(219,187,112,.4), transparent 50%), linear-gradient(160deg, var(--royal-600), var(--royal-900)); }
.flip-art .flame { --fw: 64px; margin-bottom: 14px; }
.flip-art .fa-q { display: block; font: italic 500 clamp(1.1rem, 1.9vw, 1.5rem)/1.4 var(--font-display); max-width: 28ch; }
.flip-art .fa-c { display: block; margin-top: 12px; font: 600 .7rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-300); }
.today-pill { position: absolute; top: 18px; left: 18px; z-index: 2; font: 700 .64rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; background: var(--gold-500); color: var(--royal-950); padding: 7px 11px; border-radius: 999px; }

/* Testimony timeline: event, what it was, city, year */
.tl-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.tl-meta li { padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); font: 600 .68rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #fff; }

/* Two libraries: free devotionals (ministry) and ebooks (academy) */
.lib-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 22px; background: var(--white); box-shadow: var(--shadow-sm); margin-bottom: 44px; }
.lib-tabs button { border: 0; background: none; padding: 13px 22px; border-radius: 16px; text-align: left; font: 600 .76rem/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); transition: background .3s, color .3s; }
.lib-tabs button small { display: block; margin-top: 4px; font-size: .72rem; letter-spacing: .02em; text-transform: none; font-weight: 500; opacity: .85; }
.lib-tabs button[aria-selected="true"] { background: var(--royal-600); color: #fff; }
.lib-panel[hidden] { display: none; }
.lib-panel.is-entering { animation: tl-in .7s var(--ease); }
.shelf-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .shelf-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .shelf-3 { grid-template-columns: 1fr; } }
.badge { display: inline-block; margin-bottom: 10px; padding: 7px 12px; border-radius: 999px; font: 700 .64rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.badge-free { background: #e1f2e4; color: #2d6a3a; }
.badge-paid { background: var(--gold-100); color: var(--gold-700); }
.lib-note { height: 330px; margin-bottom: 20px; border-radius: var(--radius-lg); border: 1.5px dashed var(--royal-300); display: grid; place-content: center; gap: 10px; padding: 26px; text-align: center; color: var(--royal-700); }
.lib-note b { font: 600 italic 1.5rem/1.2 var(--font-display); }

/* Graphic backgrounds for the APG "What we do" panels (ministerial, no photos) */
.panel-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; display: grid; place-items: center; }
.panel-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,5,12,.95) 5%, rgba(10,5,12,.35) 62%, rgba(10,5,12,.08)); }
.art-fire { background: radial-gradient(ellipse at 50% 105%, #ff8a2a, #b8401a 28%, #3a1634 60%, #120a17); }
.art-fire .flame { --fw: 140px; margin-bottom: 26%; }
.art-word { background: radial-gradient(circle at 72% 18%, rgba(219,187,112,.35), transparent 50%), linear-gradient(160deg, #3a1634, #120a17); }
.art-word b { position: absolute; top: 10%; left: 8%; right: 8%; font: 800 italic clamp(3.4rem, 7vw, 6rem)/.92 var(--font-display); color: rgba(255,236,200,.14); }
.art-stage { background: radial-gradient(ellipse 34% 60% at 50% 0%, rgba(255,236,200,.42), transparent 70%), linear-gradient(180deg, #2a1330, #0b0610); }
.art-stage::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 158deg at 28% 0%, transparent 0 8deg, rgba(255,210,150,.2) 12deg, transparent 18deg 360deg), conic-gradient(from 182deg at 72% 0%, transparent 0 6deg, rgba(255,210,150,.18) 10deg, transparent 16deg 360deg); animation: glory 7s ease-in-out infinite alternate; }
.art-sound { background: radial-gradient(ellipse at 50% 100%, rgba(255,138,42,.4), transparent 60%), linear-gradient(160deg, #3a1634, #0b0610); }
.eq { position: absolute; left: 14%; right: 14%; bottom: 44%; height: 28%; display: flex; align-items: flex-end; gap: 5%; }
.eq i { flex: 1; height: var(--h, 60%); border-radius: 6px; background: linear-gradient(0deg, #b8401a, #ffd36b); transform-origin: bottom; animation: eq 1.1s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes eq { from { transform: scaleY(.3); } }

/* Gallery placeholder tiles (APG) until real ministry photos arrive */
.m-art { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 112%, rgba(255,138,42,.65), transparent 60%), linear-gradient(160deg, #3a1634, #140a17); color: #fff; cursor: default; }
.m-art .m-word { font: 700 italic clamp(2.2rem, 4vw, 3.4rem)/1 var(--font-display); background: linear-gradient(90deg, #ffd36b, #ff8a2a, #ffd36b); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5s linear infinite; }
.m-art > span { opacity: .9; transform: none; }

/* Video posters as fire graphics (APG), replaced by the YouTube thumbnail once an ID is set */
.video.poster-fire { background: radial-gradient(ellipse at 50% 118%, #ff8a2a, #b8401a 28%, #3a1634 58%, #0b0610); display: grid; place-items: center; }
.video.poster-fire .flame { --fw: 90px; position: absolute; left: 50%; bottom: 8%; translate: -50% 0; opacity: .9; }
.video .pf-title { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; color: #fff; font: italic 600 clamp(1.2rem, 2.2vw, 1.8rem)/1.2 var(--font-display); }
.video img.yt-poster { animation: none; }

/* Daily scripture card */
.scripture-card { position: relative; margin-top: 32px; padding: 54px 30px 28px; border-radius: var(--radius-lg); overflow: hidden; background: radial-gradient(circle at 88% 0%, rgba(255,138,42,.35), transparent 50%), linear-gradient(150deg, var(--royal-700), var(--royal-900)); color: #fff; box-shadow: var(--shadow); }
.scripture-card blockquote { margin: 0 0 12px; font: italic 500 clamp(1.2rem, 2vw, 1.5rem)/1.45 var(--font-display); }
.scripture-card cite { font: 600 .72rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); font-style: normal; }

/* Pills and small helpers */
.soon-pill { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--gold-500); color: var(--royal-950); font: 700 .68rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; }
.flyer.long h3 { font-size: clamp(1.6rem, 2.2vw, 2.05rem); }
.sticky-col { position: sticky; top: 100px; }
.row-gap { margin-top: clamp(44px, 6vw, 80px); }
.popup-art .pop-cut { position: absolute; z-index: 1; bottom: 0; left: 50%; translate: -50% 0; height: 94%; width: auto; max-width: none; filter: drop-shadow(0 20px 30px rgba(20,10,40,.5)); -webkit-mask: linear-gradient(180deg, #000 80%, transparent); mask: linear-gradient(180deg, #000 80%, transparent); }
.ticker-band { position: relative; z-index: 3; padding: 20px 0; overflow: hidden; background: linear-gradient(90deg, #7a2414, #c24d1d 50%, #7a2414); box-shadow: 0 -20px 40px -20px rgba(255,138,42,.5); }
.ticker-band .word-ticker { margin: 0; -webkit-mask: none; mask: none; }
.dark .event { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); box-shadow: none; }
.dark .event h3 { color: #fff; }
.dark .event p { color: #e2d4d8; }
.dark .event.is-soon { background: transparent; border: 1.5px dashed rgba(255,255,255,.28); }
.dark .event.is-soon .ev-date { background: rgba(255,255,255,.1); color: #fff; }
.dark .event.is-soon .ev-date b { color: var(--gold-300); }
.dark .btn-ghost { --c: #fff; --b: rgba(255,255,255,.6); }
.m-item.m-art:hover { transform: translateY(-8px); }

/* ---------- A Praying Generation: its own ministerial world (night + fire + gold) ---------- */
body[data-site="apg"] {
  --royal-950: #0b0610; --royal-900: #150a18; --royal-800: #241027; --royal-700: #8e2f16; --royal-600: #b23f18;
  --royal-500: #d45a22; --royal-400: #eb7d3a; --royal-300: #f4a86c; --royal-200: #f8d2ae; --royal-100: #fce8d6; --royal-50: #fff6ee;
  --ivory: #fffaf4; --ivory-2: #fbf0e3; --ink: #1e0f18; --muted: #6b5560;
  --shadow: 0 18px 50px -18px rgba(40, 12, 10, .4); --shadow-lg: 0 40px 90px -30px rgba(20, 6, 8, .6);
}
body[data-site="apg"] .dark { background: radial-gradient(ellipse 60% 50% at 85% 100%, rgba(255,120,40,.22), transparent 60%), linear-gradient(180deg, #120817, #1b0b16); color: #f6ece6; }
body[data-site="apg"] .dark .lede, body[data-site="apg"] .dark p { color: #e6d6d3; }
body[data-site="apg"] .on-photo .lede, body[data-site="apg"] .on-photo p { color: #f1e4df; }
body[data-site="apg"] .bg-photo::after { background: var(--veil, linear-gradient(100deg, rgba(11,6,16,.92) 0%, rgba(21,10,24,.78) 45%, rgba(90,30,20,.35) 100%)); }
body[data-site="apg"] .video::after { background: linear-gradient(0deg, rgba(11,6,16,.8), rgba(11,6,16,.08) 60%); }
body[data-site="apg"] .panel .bg-photo::after { background: linear-gradient(0deg, rgba(11,6,16,.95) 5%, rgba(21,10,24,.35) 60%, rgba(21,10,24,.1)); }
body[data-site="apg"] .panel:not(.is-open) .bg-photo::after, body[data-site="apg"] .panel:not(.is-open) .panel-art::after { background: linear-gradient(0deg, rgba(11,6,16,.92), rgba(60,20,24,.72)); }
body[data-site="apg"] .site-footer { background: #07040a; color: #d8c8c6; }
body[data-site="apg"] dialog::backdrop { background: rgba(10, 5, 8, .82); }
body[data-site="apg"] .field input:focus, body[data-site="apg"] .field select:focus, body[data-site="apg"] .field textarea:focus { box-shadow: 0 0 0 4px rgba(212,90,34,.18); }
.apg-hero.fire-hero { background: radial-gradient(ellipse 80% 52% at 50% 118%, rgba(255,120,40,.6), transparent 62%), radial-gradient(ellipse 55% 45% at 85% 5%, rgba(115,88,187,.22), transparent 60%), linear-gradient(180deg, #07040a, #120817 60%, #1f0b14); }
body[data-site="apg"] .apg-hero::before { background: linear-gradient(95deg, rgba(7,4,10,.72), rgba(7,4,10,.2) 62%, transparent); }
.apg-hero .altar .flame { --fw: clamp(170px, 19vw, 270px); }
.apg-hero .stamp { left: 2%; bottom: auto; top: 6%; }
.fire-floor { position: absolute; left: -5%; right: -5%; bottom: -50px; height: 230px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 18% 70% at 10% 100%, rgba(255,138,42,.55), transparent 70%), radial-gradient(ellipse 14% 80% at 30% 100%, rgba(255,90,30,.5), transparent 70%), radial-gradient(ellipse 20% 70% at 52% 100%, rgba(255,160,60,.55), transparent 70%), radial-gradient(ellipse 15% 85% at 72% 100%, rgba(255,90,30,.5), transparent 70%), radial-gradient(ellipse 18% 70% at 92% 100%, rgba(255,138,42,.55), transparent 70%); filter: blur(18px); animation: floor 3s ease-in-out infinite alternate; }
@keyframes floor { to { transform: scaleY(1.18) translateY(-6px); opacity: .85; } }
.challenge-flyer.fire { background: radial-gradient(ellipse at 70% 115%, #ff8a2a, #b8401a 30%, #3a1634 62%, #120817); align-items: center; justify-content: flex-end; padding-right: 8%; }
.challenge-flyer.fire .flame { --fw: clamp(120px, 14vw, 190px); }
.challenge-flyer .cf-verse { position: absolute; right: 7%; top: 9%; z-index: 2; max-width: 44%; text-align: right; font: italic 500 clamp(.9rem, 1.3vw, 1.05rem)/1.4 var(--font-display); color: #ffe7c9; }
.challenge-flyer.fire .flame { margin-top: 12%; }

/* ==========================================================================
   Review round 2: one continuous page.
   Light sections share the page colour (with soft, edgeless glows); dark, photo and
   video sections dissolve into it at their edges instead of starting on a hard line.
   Decorative effects are calmed: no CSS flames, sparkles, spinning rays or shimmering text.
   ========================================================================== */
.tint, .cream { background: transparent; }
.tint { background-image: radial-gradient(60% 55% at 85% 0%, rgba(183,167,226,.16), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(219,187,112,.1), transparent 70%); }
.cream { background-image: radial-gradient(55% 50% at 10% 0%, rgba(219,187,112,.14), transparent 70%), radial-gradient(50% 45% at 100% 100%, rgba(183,167,226,.12), transparent 70%); }
body[data-site="apg"] .tint, body[data-site="apg"] .cream { background-image: radial-gradient(60% 55% at 85% 0%, rgba(235,125,58,.09), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(219,187,112,.1), transparent 70%); }

/* Long, eased fades (an "easing gradient"): the change starts imperceptibly and only deepens
   near the end, so there is no visible band where a dark section meets the page. */
.fade-top, .fade-bottom, .fade-both {
  --fade: clamp(160px, 21vw, 320px);
  --ease-mask: transparent, rgba(0,0,0,.013) 8.1%, rgba(0,0,0,.049) 15.5%, rgba(0,0,0,.104) 22.5%, rgba(0,0,0,.175) 29%, rgba(0,0,0,.259) 35.3%, rgba(0,0,0,.352) 41.2%, rgba(0,0,0,.45) 47.1%, rgba(0,0,0,.55) 52.9%, rgba(0,0,0,.648) 58.8%, rgba(0,0,0,.741) 64.7%, rgba(0,0,0,.825) 71%, rgba(0,0,0,.896) 77.5%, rgba(0,0,0,.951) 84.5%, rgba(0,0,0,.987) 91.9%, #000;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.fade-top {
  -webkit-mask-image: linear-gradient(180deg, var(--ease-mask)), linear-gradient(#000, #000);
          mask-image: linear-gradient(180deg, var(--ease-mask)), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--fade), 100% calc(100% - var(--fade) + 6px); mask-size: 100% var(--fade), 100% calc(100% - var(--fade) + 6px);
  -webkit-mask-position: top, bottom; mask-position: top, bottom;
}
.fade-bottom {
  -webkit-mask-image: linear-gradient(0deg, var(--ease-mask)), linear-gradient(#000, #000);
          mask-image: linear-gradient(0deg, var(--ease-mask)), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--fade), 100% calc(100% - var(--fade) + 6px); mask-size: 100% var(--fade), 100% calc(100% - var(--fade) + 6px);
  -webkit-mask-position: bottom, top; mask-position: bottom, top;
}
.fade-both {
  -webkit-mask-image: linear-gradient(180deg, var(--ease-mask)), linear-gradient(#000, #000), linear-gradient(0deg, var(--ease-mask));
          mask-image: linear-gradient(180deg, var(--ease-mask)), linear-gradient(#000, #000), linear-gradient(0deg, var(--ease-mask));
  -webkit-mask-size: 100% var(--fade), 100% calc(100% - 2 * var(--fade) + 12px), 100% var(--fade); mask-size: 100% var(--fade), 100% calc(100% - 2 * var(--fade) + 12px), 100% var(--fade);
  -webkit-mask-position: top, center, bottom; mask-position: top, center, bottom;
}
/* Keep text clear of the fade */
:is(.section, .video-band, .bgvideo):is(.fade-top, .fade-both) { padding-top: calc(var(--section) * .5 + var(--fade) * .62); }
:is(.section, .video-band, .bgvideo):is(.fade-bottom, .fade-both) { padding-bottom: calc(var(--section) * .5 + var(--fade) * .62); }
.fade-top > .bgv-tag, .fade-both > .bgv-tag { top: calc(var(--fade) * .6); }
/* Heroes fade only at the bottom, a little shorter, and the banner gets room for it */
.hero.fade-bottom, .fl-hero.fade-bottom { --fade: clamp(90px, 10vw, 150px); }
@media (min-width: 1081px) { .hero-banner { height: max(760px, 47vw); } }

/* Calmer dark sections that match the rest of the palette */
.fire-section { background: radial-gradient(ellipse 60% 50% at 78% 100%, rgba(219,187,112,.16), transparent 62%), radial-gradient(ellipse 50% 40% at 10% 0%, rgba(115,88,187,.28), transparent 60%), linear-gradient(180deg, #1a1030, #231741); }
body[data-site="apg"] .fire-section { background: radial-gradient(ellipse 60% 50% at 78% 100%, rgba(212,90,34,.2), transparent 62%), linear-gradient(180deg, #120817, #1b0b16); }
.apg-hero.fire-hero { background: radial-gradient(ellipse 70% 45% at 50% 118%, rgba(212,90,34,.32), transparent 62%), radial-gradient(ellipse 55% 45% at 85% 5%, rgba(115,88,187,.18), transparent 60%), linear-gradient(180deg, #07040a, #120817 60%, #1a0a14); }
.challenge-flyer.fire { background: radial-gradient(ellipse at 78% 112%, rgba(212,90,34,.5), transparent 58%), linear-gradient(160deg, #2a1330, #120817); }
.video.poster-fire, .m-art { background: radial-gradient(ellipse at 50% 120%, rgba(212,90,34,.45), transparent 60%), linear-gradient(160deg, #2a1330, #0b0610); }
.flip-art { background: radial-gradient(ellipse at 50% 118%, rgba(219,187,112,.3), transparent 60%), linear-gradient(160deg, #2a1745, #160d2a); }
.ticker-band { background: #150a18; box-shadow: none; border-block: 1px solid rgba(219,187,112,.25); }

/* Scripture set as type, without the flame */
.altar-verse { margin: 0 auto; padding: 26px 0; max-width: 26ch; border-block: 1px solid rgba(219,187,112,.45); font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.4; }
.altar .highlight { margin-top: 40px; }

/* Effects removed or made still */
.sparkle, .glory, .fire-floor, .altar-glow, .popup-art .rays, .challenge-flyer .rays, .mono::before, .highlight::before { display: none; }
.flyer .f-circle::after, .stamp { animation: none; }
.stamp { transform: rotate(-8deg); }
.apg-hero .stamp { position: relative; left: auto; top: auto; bottom: auto; margin: 30px auto 0; }
.word-ticker i { display: inline-block; width: 22px; height: 1px; background: var(--gold-500); opacity: .8; vertical-align: middle; font-size: 0; }
.word-ticker.lg i { width: 28px; background: var(--gold-400); }
.bigword.loop .marquee-track { gap: 1.1em; }
.decl li b, .m-art .m-word { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold-300); animation: none; }
.sparks li { padding: 11px 18px; }
.sparks li::before, .sparks li::after { display: none; }

/* Prayer challenge popup: Ink kneeling in prayer on warm, quiet light */
.popup-art.prayer { background: radial-gradient(ellipse 70% 60% at 50% 38%, #fffaf2, #f6e9da 55%, #ead6c2); }
.popup-art.prayer .num { color: rgba(174,134,55,.16); }
.popup-art.prayer .pop-cut { height: 90%; filter: none; -webkit-mask: linear-gradient(180deg, #000 86%, transparent); mask: linear-gradient(180deg, #000 86%, transparent); }

/* Testimony tabs use words, not years */
.tl-quote .yr { font-size: clamp(3rem, 8vw, 6.5rem); }
@media (max-width: 620px) { .tl-years button { font-size: .74rem; padding: 0 3px; } }

/* ==========================================================================
   Build brief 16 Oct 2026 (inkduncan.com, final review edition)
   Zone A = Ink Duncan (approved Royal + gold + current fonts, unchanged).
   Zone B = A Praying Generation section, built from the "A Praying Generation" brand book.
   ========================================================================== */
:root {
  /* Prayer Challenge 2.0 #CollegeEdition */
  --pc-night: #0A0A14; --pc-dusk: #2A1622; --pc-cream: #F7EFE2;
  --pc-gold: #F0B860; --pc-gold-light: #FFD99A; --pc-ember: #E2541B;
  /* Prayer University */
  --pu-oxblood: #3E0E15; --pu-burgundy: #7A1C2C; --pu-rose: #C98E7E; --pu-blush: #EBD3CB; --pu-ivory: #F7F1EA;
  /* Zone B fonts: tokens so Ink's written font pick is a one-line change (decision D7).
     Never set a programme name in Bodoni italic or in cursive. */
  --font-pc-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;  /* "PRAYER CHALLENGE 2.0", weight 900 */
  --font-pc-script: "Yellowtail", "Brush Script MT", cursive;              /* "#CollegeEdition" (option A) */
  --font-pu-display: "Graduate", "Rockwell", Georgia, serif;               /* "PRAYER UNIVERSITY" (option 1) */
  --font-pu-script: "Yellowtail", "Brush Script MT", cursive;              /* the word "Enroll" only */
  --font-zoneb-body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}

/* Placeholders (section 9): obviously unfinished. check.ps1 blocks any "[" placeholder from shipping. */
.ph { outline: 1.5px dashed currentColor; outline-offset: 2px; }
.ph-block { display: grid; place-items: center; min-height: 120px; padding: 18px; border: 2px dashed currentColor; border-radius: 14px; font: 700 .78rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; text-align: center; opacity: .8; }
.draft-tag { display: inline-block; margin-left: .5em; padding: 2px 8px; border: 1.5px dashed currentColor; border-radius: 6px; font: 700 .62rem/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; opacity: .85; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Transitions (section 3): short blends, never taller than ~96px desktop / 64px mobile, never over Ink's face */
.fade-top, .fade-bottom, .fade-both { --fade: clamp(48px, 7vw, 96px); }
@media (max-width: 700px) { .fade-top, .fade-bottom, .fade-both { --fade: 56px; } }
:is(.section, .video-band, .bgvideo):is(.fade-top, .fade-both) { padding-top: calc(var(--section) * .75 + var(--fade) * .4); }
:is(.section, .video-band, .bgvideo):is(.fade-bottom, .fade-both) { padding-bottom: calc(var(--section) * .75 + var(--fade) * .4); }
.hero.fade-bottom, .fl-hero.fade-bottom { --fade: clamp(48px, 6vw, 80px); }
.fade-top > .bgv-tag, .fade-both > .bgv-tag { top: calc(var(--fade) + 6px); }
/* Less empty space overall (Ink: people do not stay long on a website) */
:root { --section: clamp(56px, 6.5vw, 96px); }

/* Marquee "Transforming lives": pause on hover */
.bigword.loop { pointer-events: auto; }
.bigword.loop:hover .marquee-track { animation-play-state: paused; }

/* Header button can carry the full programme name */
.nav .btn-prog { font-family: var(--font-pc-display); font-weight: 800; letter-spacing: .01em; }

/* My story: Ink's casual photos beside Video 1 (horizontal photos shown whole) */
.casual-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 22px); margin-top: 40px; }
.casual-strip .pw::before { display: none; }
@media (max-width: 700px) { .casual-strip { grid-template-columns: 1fr 1fr; } .casual-strip > :last-child { grid-column: 1 / -1; } }
.video-band .wrap-narrow.wide { width: min(1080px, 100% - var(--gutter) * 2); }

/* What I do: resources card shows books, not a person */
.flyer .f-books { position: relative; z-index: 1; margin: 110px auto 0; height: 260px; width: 72%; display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.flyer .f-books span { width: 30%; border-radius: 3px 8px 8px 3px; box-shadow: -8px 12px 22px -8px rgba(0,0,0,.5); display: flex; align-items: flex-end; padding: 10px 8px; font: 700 .58rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.flyer .f-books span:nth-child(1) { height: 78%; background: linear-gradient(160deg, #2A1622, #0A0A14); transform: rotate(-4deg); }
.flyer .f-books span:nth-child(2) { height: 92%; background: linear-gradient(160deg, var(--pu-burgundy), var(--pu-oxblood)); }
.flyer .f-books span:nth-child(3) { height: 70%; background: linear-gradient(160deg, var(--royal-400), var(--royal-800)); transform: rotate(5deg); }

/* ---------- ZONE B base ---------- */
.zone-b { --ink-on: var(--pc-cream); background: var(--pc-night); color: var(--pc-cream); font-family: var(--font-zoneb-body); }
.zone-b p, .zone-b .lede { color: rgba(247,239,226,.86); }
.zone-b h2, .zone-b h3 { font-family: var(--font-pc-display); font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; line-height: .98; }
.zone-b h2 em, .zone-b h3 em { font-style: normal; color: var(--pc-gold); }
.zone-b .eyebrow { color: var(--pc-gold-light); font-family: var(--font-zoneb-body); }
.zone-b .eyebrow::before { background: var(--pc-gold); }
.zone-b .btn { --b: var(--pc-gold); --c: var(--pc-night); font-family: var(--font-zoneb-body); font-weight: 800; border-radius: 14px; }
.zone-b .btn-light { --b: rgba(247,239,226,.6); --c: var(--pc-cream); background: transparent; }
.zone-b .btn-light:hover { background: var(--pc-cream); color: var(--pc-night); }
.zone-b .link-line { color: var(--pc-gold-light); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(232,210,155,.45); }
.zone-b .link-line:hover { border-color: var(--pc-gold); }
.zone-b.dusk { background: linear-gradient(180deg, var(--pc-night), var(--pc-dusk) 40%, var(--pc-night)); }

/* Programme lockup: "PRAYER CHALLENGE 2.0" on ONE line, #CollegeEdition beneath and large */
.pc-lockup { display: grid; gap: 2px; justify-items: start; }
.pc-lockup.center { justify-items: center; text-align: center; }
.pc-title { font: 900 clamp(1.6rem, 4.4vw, 3.6rem)/.95 var(--font-pc-display); letter-spacing: -.025em; text-transform: uppercase; color: var(--pc-cream); white-space: nowrap; }
.pc-title b { color: var(--pc-gold); font-weight: 900; }
.pc-script { font: 400 clamp(2.4rem, 6.2vw, 4.8rem)/1 var(--font-pc-script); color: var(--pc-gold-light); margin-top: -.06em; }
.pc-script i { font-style: normal; color: var(--pc-ember); }

/* The web flyer: brand-book plate (circle of light + faded ministry photos) + Ink cut-out + lockup. Clickable. */
.pc-flyer { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border: 0; padding: 0; cursor: pointer; text-align: center; color: var(--pc-cream); background: var(--pc-night) center / cover no-repeat; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); text-decoration: none; isolation: isolate; }
.pc-flyer::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,20,.35), transparent 22%, transparent 55%, rgba(10,10,20,.92) 82%); pointer-events: none; }
.pc-flyer .f-cut { position: absolute; z-index: 0; left: 50%; top: 13%; height: 56%; width: auto; max-width: none; translate: -50% 0; }
.pc-flyer .f-scripture { position: absolute; z-index: 2; top: 4.2%; left: 6%; right: 6%; font: 700 clamp(.5rem, 1.15vw, .7rem)/1.5 var(--font-zoneb-body); letter-spacing: .32em; text-transform: uppercase; color: var(--pc-cream); }
.pc-flyer .f-scripture span { display: block; letter-spacing: .08em; text-transform: none; font-weight: 600; color: var(--pc-gold-light); }
.pc-flyer .f-lock { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 15%; }
.pc-flyer .pc-title { font-size: clamp(1.25rem, 3.6vw, 2.5rem); }
.pc-flyer .pc-script { font-size: clamp(2rem, 6.2vw, 3.7rem); }
.pc-flyer .f-dates { display: block; margin-top: 8px; font: 700 clamp(.62rem, 1.4vw, .82rem)/1.3 var(--font-zoneb-body); letter-spacing: .2em; text-transform: uppercase; color: var(--pc-cream); }
.pc-flyer .f-foot { position: absolute; z-index: 2; left: 6%; right: 6%; bottom: 4.5%; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(201,162,78,.35); font: 700 clamp(.5rem, 1.1vw, .66rem)/1.5 var(--font-zoneb-body); letter-spacing: .2em; text-transform: uppercase; text-align: left; }
.pc-flyer .f-foot b { color: var(--pc-gold); }
.pc-flyer .f-foot .reg { text-align: right; }
.pc-flyer .f-foot .reg strong { display: block; padding: 7px 12px; margin-top: 4px; background: var(--pc-gold); color: var(--pc-night); border-radius: 10px; letter-spacing: .12em; }
.pc-flyer:hover .f-foot .reg strong, .pc-flyer:focus-visible .f-foot .reg strong { background: var(--pc-gold-light); }
.pc-flyer:focus-visible { outline: 3px solid var(--pc-gold); outline-offset: 4px; }

/* Challenge block */
.pc-block { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.pc-block .pc-flyer { max-width: 460px; justify-self: center; }
.pc-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 26px; padding: 0; list-style: none; }
.pc-facts li { padding: 9px 14px; border: 1px solid rgba(201,162,78,.4); border-radius: 999px; font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pc-cream); }
.pc-next { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(201,162,78,.25); font-weight: 600; }
.pc-tagline { font: 700 clamp(1.05rem, 1.8vw, 1.3rem)/1.4 var(--font-zoneb-body); color: var(--pc-gold-light); margin: 14px 0 0; }
@media (max-width: 900px) { .pc-block { grid-template-columns: 1fr; } }

/* APG intro over Video 3 */
.apg-intro { position: relative; isolation: isolate; overflow: hidden; color: var(--pc-cream); background: var(--pc-night); }
.apg-intro .bgv-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,20,.92), rgba(10,10,20,.62) 55%, rgba(42,22,34,.45)); }
.apg-intro .wrap { position: relative; z-index: 2; }
.apg-intro h2 { font-size: clamp(2.6rem, 7vw, 5.6rem); max-width: 12ch; }
.apg-intro .apg-line { font: 400 clamp(1.8rem, 4vw, 3rem)/1.1 var(--font-pc-script); color: var(--pc-gold-light); margin: 10px 0 26px; }

/* Prayer University block: a real university, not a ministry flyer */
.pu-block { background: radial-gradient(ellipse 70% 60% at 85% 10%, rgba(201,142,126,.2), transparent 60%), linear-gradient(170deg, var(--pu-burgundy), var(--pu-oxblood) 70%); color: var(--pu-blush); font-family: var(--font-zoneb-body); }
.pu-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
@media (max-width: 900px) { .pu-grid { grid-template-columns: 1fr; } }
.pu-name { font: 400 clamp(2.2rem, 5.6vw, 4.4rem)/.95 var(--font-pu-display); letter-spacing: .02em; text-transform: uppercase; color: var(--pu-ivory); margin: 0; }
.pu-motto { margin: 14px 0 0; font: 700 .78rem/1.4 var(--font-zoneb-body); letter-spacing: .32em; text-transform: uppercase; color: var(--pu-rose); }
.pu-est { display: inline-block; margin-top: 10px; padding: 5px 12px; border: 1px solid var(--pu-rose); border-radius: 999px; font: 700 .7rem/1 var(--font-zoneb-body); letter-spacing: .24em; text-transform: uppercase; color: var(--pu-rose); }
.pu-enroll { margin: 30px 0 4px; font: 400 clamp(1.7rem, 3.4vw, 2.6rem)/1.1 var(--font-pu-display); text-transform: uppercase; color: var(--pu-ivory); }
.pu-enroll span { color: var(--pu-rose); }
.pu-begins { margin: 0 0 22px; color: var(--pu-blush); font-weight: 600; }
.pu-syllabus { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 26px; padding: 0; list-style: none; background: rgba(201,142,126,.35); border: 1px solid rgba(201,142,126,.35); border-radius: 12px; overflow: hidden; }
.pu-syllabus li { padding: 14px 16px; background: rgba(62,14,21,.6); font-weight: 600; color: var(--pu-ivory); }
.pu-syllabus li small { display: block; font: 700 .64rem/1.4 var(--font-zoneb-body); letter-spacing: .2em; text-transform: uppercase; color: var(--pu-rose); margin-bottom: 4px; }
.pu-block .btn { --b: var(--pu-ivory); --c: var(--pu-burgundy); border-radius: 14px; font-weight: 800; }
.pu-block .btn .script { font: 400 1.5rem/1 var(--font-pu-script); }
.pu-block .link-line { color: var(--pu-blush); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(201,142,126,.6); }
.pu-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pu-photos figure { margin: 0; position: relative; aspect-ratio: 1616 / 1080; overflow: hidden; border: 4px solid var(--pu-ivory); box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); }
.pu-photos figure img { width: 100%; height: 100%; object-fit: cover; }
.pu-photos figure.main { grid-column: 1 / -1; }
.pu-photos figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; background: var(--pu-oxblood); color: var(--pu-blush); font: 700 .62rem/1.3 var(--font-zoneb-body); letter-spacing: .18em; text-transform: uppercase; }

/* Mission and vision graphic (replaces "How the fire spreads") */
.mission-quote { font: 900 clamp(1.8rem, 4.2vw, 3.4rem)/1.02 var(--font-pc-display); letter-spacing: -.02em; text-transform: uppercase; color: var(--pc-cream); max-width: 22ch; margin: 0 auto; text-align: center; }
.mission-quote em { font-style: normal; color: var(--pc-gold); }
.mission-vision { max-width: 640px; margin: 18px auto 0; text-align: center; color: rgba(247,239,226,.82); }
.facets { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 12px; margin-top: clamp(34px, 5vw, 56px); }
.facet { position: relative; overflow: hidden; margin: 0; background: var(--pc-dusk); min-height: 220px; isolation: isolate; }
.facet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.facet::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,10,20,.9), rgba(10,10,20,.1) 55%); }
.facet figcaption { position: absolute; left: 18px; right: 18px; bottom: 16px; font: 900 clamp(1rem, 1.8vw, 1.35rem)/1.05 var(--font-pc-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--pc-cream); }
.facet.tall { grid-row: span 2; min-height: 460px; }
.facet.wide { grid-column: span 2; aspect-ratio: auto; }
.facet.word { display: grid; place-content: center; padding: 26px; text-align: center; background: radial-gradient(ellipse at 50% 120%, rgba(201,162,78,.3), transparent 60%), var(--pc-dusk); }
.facet.word::after { display: none; }
.facet.word blockquote { margin: 0 0 10px; font: 600 clamp(1.05rem, 1.7vw, 1.3rem)/1.4 var(--font-zoneb-body); color: var(--pc-cream); }
.facet.word cite { font: 700 .7rem/1.3 var(--font-zoneb-body); letter-spacing: .22em; text-transform: uppercase; color: var(--pc-gold-light); font-style: normal; }
.facet.word figcaption { position: static; margin-top: 14px; }
@media (max-width: 900px) { .facets { grid-template-columns: 1fr 1fr; } .facet.tall { grid-row: auto; grid-column: 1 / -1; min-height: 300px; } .facet.wide { grid-column: 1 / -1; } }
@media (max-width: 560px) { .facets { grid-template-columns: 1fr; } }

/* Power in motion: one composed graphic, every word with its image */
.pim-head { text-align: center; }
.pim-words { font: 900 clamp(2.4rem, 7vw, 5.6rem)/.92 var(--font-pc-display); letter-spacing: -.03em; text-transform: uppercase; color: var(--pc-cream); margin: 0; }
.pim-words em { font-style: normal; color: var(--pc-gold); }
.pim-graphic { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; margin-top: clamp(30px, 4vw, 50px); }
.pim-graphic figure { position: relative; margin: 0; overflow: hidden; background: var(--pc-dusk); isolation: isolate; }
.pim-graphic figure.main { grid-row: span 2; aspect-ratio: 1600 / 1068; }
.pim-graphic figure img { width: 100%; height: 100%; object-fit: cover; }
.pim-graphic figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,20,.85), transparent 45%); pointer-events: none; }
.pim-graphic figcaption { position: absolute; z-index: 1; left: 16px; bottom: 14px; font: 900 clamp(.95rem, 1.6vw, 1.25rem)/1 var(--font-pc-display); text-transform: uppercase; color: var(--pc-cream); }
.pim-graphic .ph-block { height: 100%; color: var(--pc-gold-light); border-radius: 0; }
@media (max-width: 760px) { .pim-graphic { grid-template-columns: 1fr; } .pim-graphic figure.main { grid-row: auto; } .pim-graphic figure:not(.main) { min-height: 150px; } }

/* Testimonies in Zone B */
.zone-b .tl-years::before { background: rgba(201,162,78,.25); }
.zone-b .tl-years button { background: var(--pc-night); color: rgba(247,239,226,.6); font-family: var(--font-zoneb-body); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(.72rem, 1.4vw, .95rem); }
.zone-b .tl-years button i { background: var(--pc-night); border-color: rgba(201,162,78,.5); }
.zone-b .tl-years button[aria-selected="true"] { color: var(--pc-gold-light); }
.zone-b .tl-years button[aria-selected="true"] i { background: var(--pc-gold); border-color: var(--pc-gold); box-shadow: 0 0 0 6px rgba(201,162,78,.18); }
.zone-b .tl-years .tl-fill { background: linear-gradient(90deg, var(--pc-gold), var(--pc-ember)); }
.zone-b .tl-panel { background: radial-gradient(ellipse 70% 70% at 90% 0%, rgba(201,162,78,.16), transparent 60%), var(--pc-dusk); min-height: 380px; }
.zone-b .tl-quote .yr { font-family: var(--font-pc-display); font-style: normal; font-weight: 900; text-transform: uppercase; color: rgba(201,162,78,.22); }
.zone-b .tl-quote blockquote { font-family: var(--font-zoneb-body); font-weight: 500; font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: var(--pc-cream); }
.zone-b .tl-quote cite { color: var(--pc-gold-light); }
.zone-b .tl-meta li { border-color: rgba(201,162,78,.35); }
.tl-photo-ph { position: absolute; right: 18px; top: 18px; color: var(--pc-gold-light); font: 700 .62rem/1.3 var(--font-zoneb-body); letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border: 1.5px dashed currentColor; border-radius: 8px; max-width: 220px; text-align: right; }
.pending-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.pending-row .ph-block { color: rgba(247,239,226,.7); min-height: 110px; }
@media (max-width: 760px) { .pending-row { grid-template-columns: 1fr; } }
.ig-line { margin-top: 18px; font-weight: 600; color: rgba(247,239,226,.86); }

/* Ministry timeline (decision D4, off by default) */
.ministry-timeline { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; margin-top: 30px; }
.ministry-timeline details { flex: 0 0 auto; min-width: 150px; border: 1px solid rgba(201,162,78,.3); border-radius: 12px; padding: 12px 14px; background: rgba(247,239,226,.04); }
.ministry-timeline summary { cursor: pointer; font: 900 1.2rem/1 var(--font-pc-display); color: var(--pc-gold); list-style: none; }
.ministry-timeline details p { margin: 8px 0 0; font-size: .9rem; }

/* Two by Two teaser card (decision D3 = teaser) */
.tbt-teaser { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: clamp(22px, 3vw, 34px); border-radius: 20px; background: linear-gradient(120deg, var(--pc-dusk), var(--pc-night)); color: var(--pc-cream); border: 1px solid rgba(201,162,78,.25); }
.tbt-teaser h3 { margin: 0 0 4px; font: 900 clamp(1.4rem, 2.6vw, 2rem)/1 var(--font-pc-display); text-transform: uppercase; }
.tbt-teaser p { margin: 0; color: rgba(247,239,226,.82); }
.tbt-teaser .play-sm { width: 60px; height: 60px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--pc-gold); color: var(--pc-night); }
.tbt-teaser .play-sm svg { width: 22px; height: 22px; margin-left: 3px; }
.tbt-teaser .btn { --b: var(--pc-gold); --c: var(--pc-night); }
@media (max-width: 700px) { .tbt-teaser { grid-template-columns: 1fr; text-align: left; } }

/* Challenge registration dialog: flyer + form, in the challenge brand */
.reg-dlg { width: min(1040px, 96vw); }
.reg-card { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); background: var(--pc-night); color: var(--pc-cream); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); max-height: 92vh; }
.reg-card .pc-flyer { aspect-ratio: auto; height: 100%; min-height: 100%; box-shadow: none; }
.reg-card .reg-form { padding: clamp(22px, 3vw, 38px); overflow-y: auto; max-height: 92vh; font-family: var(--font-zoneb-body); }
.reg-card .reg-form h2 { font: 900 clamp(1.3rem, 2.4vw, 1.8rem)/1 var(--font-pc-display); text-transform: uppercase; margin: 0 0 4px; color: var(--pc-cream); }
.reg-card .reg-form .lede { color: rgba(247,239,226,.8); font-size: .98rem; margin: 6px 0 18px; }
@media (max-width: 820px) { .reg-card { grid-template-columns: 1fr; overflow-y: auto; } .reg-card .pc-flyer { aspect-ratio: 4 / 3; height: auto; } .reg-card .pc-flyer .f-cut { height: 70%; top: 4%; } .reg-card .pc-flyer .f-scripture { display: none; } .reg-card .reg-form { max-height: none; overflow: visible; } }
.reg-card div.pc-flyer { cursor: default; }
/* Flyer type scales with the flyer itself, so "PRAYER CHALLENGE 2.0" always fits on one line */
.pc-flyer { container-type: inline-size; }
.pc-flyer .pc-title { font-size: 7.4cqi; }
.pc-flyer .pc-script { font-size: 12.5cqi; }
.pc-flyer .f-scripture { font-size: 2.1cqi; }
.pc-flyer .f-dates { font-size: 2.7cqi; }
.pc-flyer .f-foot { font-size: 2.1cqi; }
/* Programme names keep their exact spelling: never uppercase "#CollegeEdition" */
.pc-script, .zone-b h2 .pc-script, .zone-b h1 .pc-script { text-transform: none; letter-spacing: 0; font-weight: 400; }
.zone-b h2.pc-lockup { line-height: 1; }
.keep-case { text-transform: none; }
/* Placeholders on dark programme grounds */
.zone-b .ph, .challenge-page .ph, .reg-card .ph, .pc-flyer .ph { color: var(--pc-gold-light); background: rgba(201,162,78,.12); }
.pu-block .ph { color: var(--pu-blush); background: rgba(235,211,203,.12); }
/* Prayer University keeps its own university face inside Zone B */
.zone-b .pu-name { font: 400 clamp(2.2rem, 5.6vw, 4.4rem)/.95 var(--font-pu-display); letter-spacing: .02em; }
.pu-enroll .enroll { font: 400 1.35em/1 var(--font-pu-script); text-transform: none; color: var(--pu-ivory); margin-right: .1em; }
/* Fully Loaded: room above the lockup for the "Watch" tag */
.bgvideo.fade-both { padding-top: calc(var(--fade) + 84px); }
/* Challenge heading fits its column on one line */
.pc-block > div:last-child { container-type: inline-size; }
.pc-block h2 .pc-title { font-size: min(7.6cqi, 3.6rem); }
.pc-block h2 .pc-script { font-size: min(12cqi, 4.8rem); }
/* Zone B fades at its outer edges only: keep the first and last sections' content clear of the blend */
.zone-b.fade-both > .section:first-child { padding-top: calc(var(--section) + var(--fade) * .5); }
.zone-b.fade-both > .section:last-child { padding-bottom: calc(var(--section) + var(--fade) * .5); }
/* Dark-ground form styling (challenge dialog, /challenge page) */
.form-night .field label, .form-night .check-field { color: var(--pc-cream); }
.form-night .field input, .form-night .field select, .form-night .field textarea { background: rgba(247,239,226,.06); border-color: rgba(201,162,78,.3); color: var(--pc-cream); }
.form-night .field select option { color: #111; }
.form-night .field input:focus, .form-night .field select:focus, .form-night .field textarea:focus { background: rgba(247,239,226,.1); border-color: var(--pc-gold); box-shadow: 0 0 0 4px rgba(201,162,78,.18); }
.form-night .field .err { color: #ffb4a1; }
.form-night .field label .opt { color: rgba(247,239,226,.6); }
.form-night .btn { --b: var(--pc-gold); --c: var(--pc-night); font-weight: 800; border-radius: 14px; }
.form-night .form-success p { color: var(--pc-cream); }
.form-night .form-success .check { background: var(--pc-gold); }
/* Consent checkboxes: unticked by default, separate for email and SMS */
.check-field { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; line-height: 1.45; color: var(--muted); }
.check-field input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--royal-600); }
.form-night .check-field input { accent-color: var(--pc-gold); }
.form-grid .check-field { grid-column: 1 / -1; }
.radio-row { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 6px; }
.radio-row label { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; }

/* /challenge page: full screen, mobile first */
.challenge-page { min-height: 100svh; background: var(--pc-night); color: var(--pc-cream); font-family: var(--font-zoneb-body); }
.challenge-page .cp-head { display: flex; justify-content: space-between; align-items: center; padding: 16px var(--gutter); }
.challenge-page .cp-head a { color: var(--pc-cream); text-decoration: none; font: 700 .9rem/1 var(--font-display); letter-spacing: .14em; }
.challenge-page .cp-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); width: min(1180px, 100% - var(--gutter) * 2); margin: 0 auto; padding: 10px 0 60px; align-items: start; }
.challenge-page .cp-flyer { position: sticky; top: 20px; }
.challenge-page .pc-flyer { max-width: 520px; margin-inline: auto; }
.challenge-page h1 { margin: 0; }
@media (max-width: 860px) { .challenge-page .cp-grid { grid-template-columns: 1fr; } .challenge-page .cp-flyer { position: static; } .challenge-page .pc-flyer { max-width: 420px; } }

/* Simple content pages (privacy, 404) */
.page-simple { min-height: 100svh; display: grid; align-content: center; padding: 100px 0 60px; }
.page-simple .prose { width: min(760px, 100% - var(--gutter) * 2); margin: 0 auto; }
.page-simple .prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 1.6em; }

/* ---------- Reduced motion: still fallback ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .split .w > span { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .marquee { overflow-x: auto; mask: none; -webkit-mask: none; }
  .marquee-track { width: max-content; }
  .marquee-track [aria-hidden="true"] { display: none; }
}

/* Late overrides */
.highlight .btn { grid-column: 2; justify-self: start; white-space: nowrap; }
@media (max-width: 760px) { .highlight .btn { grid-column: auto; justify-self: center; } }
.hero .eyebrow { color: var(--gold-300); }
.flyer-banner .eyebrow, .apg-hero .eyebrow, .fl-hero .eyebrow { color: var(--gold-300); }
.bgvideo { padding-top: calc(var(--header-h) + 110px); }
.on-photo .meta-strip li, .bgvideo .meta-strip li { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.on-photo .ph, .bgvideo .ph { color: var(--gold-300); background: rgba(255,255,255,.1); }

/* ---------- UX pass, 16 Oct 2026 (measured fixes) ---------- */
/* Contrast: small gold labels on ivory measured 3.19:1 (needs 4.5:1); gold-700 = ~4.6:1 */
.eyebrow, .is-solid .brand small { color: var(--gold-700); }
/* Gold italic words in headings on light grounds measured 2.28:1 (large text needs 3:1); gold-600 = 3.2:1 */
body[data-site="ink"] main > section:not(.on-photo):not(.bgvideo):not(.video-band):not(.hero):not(.dark) h2 em { color: var(--gold-600); }
/* Field edges on light forms measured ~1.1:1 (needs 3:1) */
.field input, .field select, .field textarea { border-color: #8a7bbd; }

/* Header: the full programme name stays (brief), set on two short lines so the desktop nav fits on laptops */
.nav .btn-prog .keep-case { display: inline; }
@media (min-width: 1291px) {
  .nav a:not(.btn) { padding: 10px 6px; letter-spacing: .1em; }
  .nav .btn-prog { padding: 9px 16px; font-size: .74rem; line-height: 1.15; text-align: left; white-space: normal; }
  .nav .btn-prog .keep-case { display: block; }
}
@media (min-width: 1291px) and (max-width: 1365px) { .nav a:not(.btn) { padding-inline: 5px; letter-spacing: .08em; } }

/* What we offer: on tablets and phones the three cards become one swipeable row instead of a 2,800px stack */
@media (max-width: 980px) {
  .flyers { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 380px); max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 22px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .flyers::-webkit-scrollbar { display: none; }
  .flyers > * { scroll-snap-align: center; }
}

/* Long statements read in sentence case; heavy capitals stay for short punches */
.mission-quote { text-transform: none; font-weight: 800; letter-spacing: -.015em; font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.12; max-width: 26ch; }

/* Challenge block: the flyer already carries the lockup, so the heading beside it steps down */
.pc-block h2 .pc-title { font-size: min(6cqi, 2.6rem); }
.pc-block h2 .pc-script { font-size: min(9.5cqi, 3.6rem); }

/* Pending testimonies: a compact row, not three full-width boxes */
.pending-row .ph-block { min-height: 72px; font-size: .68rem; }
@media (max-width: 760px) { .pending-row { grid-template-columns: repeat(3, 1fr); gap: 8px; } .pending-row .ph-block { padding: 10px 6px; } }
/* Testimony tabs on phones: uppercase + tracking pushed the last tab ~85px off a 375px screen.
   Sentence case and tighter type fit all five; scrolling is the safety net on very narrow screens. */
@media (max-width: 620px) {
  .zone-b .tl-years button { text-transform: none; letter-spacing: 0; font-size: .7rem; padding: 0 2px; }
  .zone-b .tl-years { overflow-x: auto; scrollbar-width: none; padding-block: 12px; margin-block: 38px 22px; }
}
/* =====================================================================
   Final review edition (16 Oct 2026): one continuous ground, one gold, nothing over Ink
   ===================================================================== */
/* One gold: Zone B uses Zone A's gold, so two different golds never share a screen */
:root { --pc-gold: var(--gold-500); --pc-gold-light: var(--gold-300); }

/* One continuous ground (site.js paints it from each block's data-ground). Blocks become see-through
   so the page reads as one flowing background; blends run only through the space between content. */
html.has-ground body { position: relative; }
.page-ground { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--ivory); }
html.has-ground [data-ground]:not(.hero), html.has-ground .zone-b { background: transparent !important; }
html.has-ground .video-band::before { display: none; }

/* Prayer University: a warm oxblood glow that fades out well before the block's edges */
html.has-ground .pu-block { position: relative; isolation: isolate; }
html.has-ground .pu-block::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 52% 40% at 66% 50%, rgba(122,28,44,.7), transparent 78%), radial-gradient(ellipse 30% 26% at 18% 52%, rgba(201,142,126,.12), transparent 80%); }

/* Hero: nothing over Ink. The copy shade stops before her, there is no bottom shade, and on desktop
   the banner is positioned so both photos of her stay in the right half at every width. */
.hero-banner .hb-media::after { background: linear-gradient(90deg, rgba(14,9,10,.78) 0%, rgba(14,9,10,.5) 24%, transparent 42%); }
@media (min-width: 1081px) {
  .hero-banner .hero-copy { max-width: min(560px, 40vw); }
  /* banner 2000x848; Ink's photos start at 52.5% of its width. Rendered height H = min(max(760px, 47vw), 100svh). */
  .hero-banner .hb-media img { object-position: clamp(calc(100vw - 2.3585 * min(max(760px, 47vw), 100svh)), calc(50vw - 1.2382 * min(max(760px, 47vw), 100svh)), 0px) 50%; transform-origin: 100% 50%; }
  /* Soft blend into the page only along the bottom-left, where the banner is gold swirl, never under Ink */
  html.has-ground .hero-banner { background: transparent; }
  .hero-banner .hb-media { -webkit-mask: linear-gradient(0deg, transparent, #000 110px), linear-gradient(90deg, transparent 36%, #000 46%); -webkit-mask-composite: source-over; mask: linear-gradient(0deg, transparent, #000 110px), linear-gradient(90deg, transparent 36%, #000 46%); mask-composite: add; }
}
@media (max-width: 1080px) {
  .hero-banner .hb-media { -webkit-mask: linear-gradient(180deg, transparent, #000 7%); mask: linear-gradient(180deg, transparent, #000 7%); }
  .hero-banner .hb-media::after { background: none; }
}

/* Background-video sections (Video 3, Fully Loaded): the muted loop fills the section behind the words.
   - It starts below and ends above the colour blends (site.js sets --blend-top/--blend-bottom), so no blend crosses it.
   - It is anchored at the top of the frame, so cropping only ever trims the bottom: Ink's head is never cut off.
   - Desktop: the video takes the right of the section and fades in from the left, beside her, never over her;
     the words sit on the left on the section's own ground. Phones: the video runs edge to edge above the words. */
.vsec { position: relative; isolation: isolate; overflow: hidden; }
.vsec .bgv-media { position: absolute; z-index: -1; top: var(--blend-top, 0px); bottom: var(--blend-bottom, 0px); left: 0; right: 0; }
.vsec .bgv-media::after { display: none !important; }
.vsec .bgv-media img { animation: none; object-position: 50% 12%; }
.vsec .bgv-media iframe { top: 0; translate: -50% 0; scale: 1; }
.vsec-copy { position: relative; }
.vsec-copy .bgv-tag { position: static; margin-top: 22px; }
.apg-intro .vsec-copy h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); max-width: 11ch; }
@media (min-width: 901px) {
  .vsec { min-height: min(80svh, 720px); display: grid; align-content: center; }
  .vsec .bgv-media { left: 30%;
    -webkit-mask: linear-gradient(90deg, transparent, #000 22%), linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); -webkit-mask-composite: source-in;
    mask: linear-gradient(90deg, transparent, #000 22%), linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-composite: intersect; }
  .vsec-copy { max-width: min(560px, 44%); }
}
@media (max-width: 900px) {
  .vsec .bgv-media { position: relative; top: auto; bottom: auto; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 26px;
    -webkit-mask: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 22px), transparent); mask: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 22px), transparent); }
}



/* Captions sit under photos, never on them; photos keep their own shape (shown whole) */
.facets { grid-template-columns: 1fr 1fr; grid-template-rows: none; align-items: start; }
.facet, .facet.tall, .facet.wide { grid-row: auto; grid-column: auto; min-height: 0; display: flex; flex-direction: column; overflow: visible; background: transparent; isolation: auto; }
.facet::after { display: none; }
.facet img { position: static; z-index: auto; width: 100%; height: auto; aspect-ratio: 1600 / 1068; object-fit: cover; border-radius: 16px; }
.facet figcaption, .facet.word figcaption { position: static; margin: 0; padding: 12px 2px 0; }
.facet.word { display: flex; padding: 0; background: transparent; }
.facet-word { display: grid; place-content: center; aspect-ratio: 1600 / 1068; padding: 24px; text-align: center; border-radius: 16px; background: radial-gradient(ellipse at 50% 120%, rgba(201,162,78,.3), transparent 60%), var(--pc-dusk); }
@media (max-width: 900px) { .facets { grid-template-columns: 1fr 1fr; } .facet.tall, .facet.wide { grid-column: auto; } }
@media (max-width: 560px) { .facets { grid-template-columns: 1fr; } }
.pim-graphic { align-items: start; }
.pim-graphic figure { display: flex; flex-direction: column; overflow: visible; background: transparent; isolation: auto; }
.pim-graphic figure::after { display: none; }
.pim-graphic figure.main { aspect-ratio: auto; }
.pim-graphic figure img { height: auto; aspect-ratio: 1600 / 1068; border-radius: 16px; }
.pim-graphic figcaption { position: static; padding: 10px 2px 0; }
.pim-graphic figure:not(.main) .ph-block { height: auto; min-height: 140px; flex: 1; border-radius: 16px; }

/* Photos: no light sweep across Ink on hover */
body[data-site="ink"] .pw .pw-in::after { display: none; }

/* Challenge flyer: the cut-out of Ink ends above the lettering, and no shade crosses her */
.pc-flyer::after { background: linear-gradient(180deg, rgba(10,10,20,.4), transparent 10%, transparent 63%, rgba(10,10,20,.92) 77%); }
.pc-flyer .f-cut { top: 11%; height: 52%; -webkit-mask: linear-gradient(180deg, #000 84%, transparent 100%); mask: linear-gradient(180deg, #000 84%, transparent 100%); }
@media (max-width: 820px) {
  .reg-card .pc-flyer { aspect-ratio: 1; }
  .reg-card .pc-flyer .f-cut { top: 4%; height: 54%; }
  .reg-card .pc-flyer::after { background: linear-gradient(180deg, transparent 63%, rgba(10,10,20,.92) 77%); }
}
/* Welcome (Video 1) as a background-video section; Ink's casual photos follow on the same ground */
#welcome .play-big { margin-top: 8px; }
#welcome-photos { padding-top: 0; }
#welcome-photos .casual-strip { margin-top: 0; }
/* Power in motion: each photo shown whole, side by side at one height (landscape and portrait mixed) */
.pim-graphic { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: flex-start; }
.pim-graphic figure, .pim-graphic figure.main { flex: 0 0 auto; grid-row: auto; max-width: 100%; }
.pim-graphic figure img { height: clamp(240px, 28vw, 400px); width: auto; max-width: 100%; aspect-ratio: auto; object-fit: contain; }
.pim-graphic figure:not(.main) .ph-block { flex: none; width: clamp(200px, 22vw, 300px); height: clamp(240px, 28vw, 400px); min-height: 0; }
@media (max-width: 640px) {
  .pim-graphic figure, .pim-graphic figure.main { flex: 1 1 100%; }
  .pim-graphic figure img { width: 100%; height: auto; }
  .pim-graphic figure:not(.main) .ph-block { width: 100%; height: 180px; }
}

/* The journey since 2016, merged with the testimonies */
.journey { list-style: none; margin: 0 auto clamp(28px, 4vw, 46px); padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: relative; max-width: 1080px; }
.journey::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: linear-gradient(90deg, rgba(201,162,78,.15), var(--pc-gold) 20%, var(--pc-gold) 80%, rgba(201,162,78,.15)); }
.j-node { position: relative; padding: 34px 16px 0 0; }
.j-node::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--pc-night); border: 2px solid var(--pc-gold); box-sizing: border-box; }
.j-node b { display: block; font: 900 clamp(1.5rem, 2.6vw, 2.1rem)/1 var(--font-pc-display); letter-spacing: -.02em; color: var(--pc-gold); }
.j-node p { margin: 8px 0 0; max-width: 26ch; font-size: .92rem; line-height: 1.45; color: rgba(247,239,226,.84); }
.j-node a { color: var(--pc-gold-light); text-decoration: none; border-bottom: 1px solid rgba(232,210,155,.45); }
.j-node.is-next::before { background: var(--pc-gold); box-shadow: 0 0 0 6px rgba(201,162,78,.2); }
.j-life { margin: 10px 6px 0 0; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(201,162,78,.45); background: rgba(247,239,226,.06); color: var(--pc-cream); font: 700 .74rem/1 var(--font-zoneb-body); cursor: pointer; }
.j-life:hover { background: var(--pc-gold); color: var(--pc-night); }
.journey-sub { margin: 0 0 4px; text-align: center; font: 800 .78rem/1 var(--font-zoneb-body); letter-spacing: .22em; text-transform: uppercase; color: var(--pc-gold-light); }
@media (max-width: 760px) {
  .journey { grid-auto-flow: row; grid-auto-columns: auto; }
  .journey::before { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--pc-gold), rgba(201,162,78,.15)); }
  .j-node { padding: 0 0 20px 34px; }
}

/* Testimony panels: Ink's photo beside the words, shown whole, never under the text */
.zone-b .tl-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(18px, 3vw, 40px); align-items: center; padding: clamp(18px, 3vw, 32px); }
.zone-b .tl-panel[hidden] { display: none; }
.zone-b .tl-panel .tl-quote { padding: 0; }
.tl-photo { margin: 0; display: grid; place-items: center; }
.tl-photo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 440px; border-radius: 16px; }
.tl-photo .ph-block { width: 100%; min-height: 220px; color: var(--pc-gold-light); }
@media (max-width: 760px) { .zone-b .tl-panel { grid-template-columns: minmax(0, 1fr); } .tl-photo img { max-height: 340px; } }
/* Social links: platform name, then the handle */
.socials .handle { font-weight: 500; opacity: .72; }

/* =====================================================================
   Ink's review, 17 Oct 2026
   ===================================================================== */
/* #CollegeEdition in FFF Tusj, the font on Ink's flyer */
:root { --font-pc-script: "FFF Tusj", "Yellowtail", "Brush Script MT", cursive; }
.pc-script { letter-spacing: .01em; }

/* Ministry line in Ink's staple face (the "A PRAYING GENERATION" family), not a script */
.apg-intro .apg-line { font: 700 clamp(1.2rem, 2.3vw, 1.7rem)/1.3 var(--font-zoneb-body); letter-spacing: .005em; color: var(--pc-gold-light); margin: 12px 0 24px; }
/* Less space between Welcome, Who I am, the ministry and the challenge */
@media (min-width: 901px) { .apg-intro.vsec { min-height: min(66svh, 620px); } #welcome.vsec { min-height: min(66svh, 620px); } }
#who { padding-top: calc(var(--section) * .35); padding-bottom: calc(var(--section) * .6); }
#praying-generation { padding-top: calc(var(--section) * .6); padding-bottom: calc(var(--section) * .45); }
#challenge { padding-top: calc(var(--section) * .45); }

/* Who I am: each word sits in a corner of its photo where Ink is not (data-at) */
.who-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); margin-top: 6px; }
.who { position: relative; margin: 0; grid-column: span 2; border-radius: 16px; overflow: hidden; aspect-ratio: 1600 / 1068; box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); }
.who:nth-child(1), .who:nth-child(2) { grid-column: span 3; }
.who img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.who:hover img { transform: scale(1.03); }
.who figcaption { position: absolute; padding: 7px 14px; border-radius: 999px; background: rgba(28,18,51,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--gold-300); font: italic 600 clamp(.95rem, 1.5vw, 1.2rem)/1 var(--font-display); white-space: nowrap; }
.who[data-at="tl"] figcaption { top: 12px; left: 12px; }
.who[data-at="tr"] figcaption { top: 12px; right: 12px; }
.who[data-at="bl"] figcaption { bottom: 12px; left: 12px; }
.who[data-at="br"] figcaption { bottom: 12px; right: 12px; }
@media (max-width: 760px) { .who-grid { grid-template-columns: 1fr 1fr; } .who, .who:nth-child(1), .who:nth-child(2) { grid-column: span 1; } .who:last-child { grid-column: 1 / -1; } }

/* A Praying Generation online: icons */
.apg-icons { display: flex; gap: 10px; margin-top: 18px; }
.apg-icons a, .f-social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(201,162,78,.55); color: var(--pc-gold-light); transition: background .3s, color .3s, transform .35s var(--ease-spring); }
.apg-icons a:hover, .f-social a:hover { background: var(--gold-500); color: var(--royal-950); transform: translateY(-3px); }
.apg-icons svg, .f-social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.apg-icons svg .fill, .f-social svg .fill { fill: currentColor; stroke: none; }

/* Prayer University: varsity lettering from Ink's brand board (oxblood, metallic rose gold, optic white, charcoal) */
.pu-block { --pu-charcoal: #4a4544; --pu-white: #ffffff; }
.pu-marks { display: flex; align-items: center; gap: clamp(8px, 2vw, 20px); margin: 0 0 6px; }
.pu-mono { width: clamp(84px, 11vw, 132px); flex: none; overflow: visible; }
.pu-mono text { font: 400 118px/1 var(--font-pu-display); paint-order: stroke; stroke-linejoin: round; }
.pu-mono-p, .pu-mono-u { fill: var(--pu-white); stroke: var(--pu-rose); stroke-width: 7px; filter: drop-shadow(5px 5px 0 var(--pu-charcoal)); }
.pu-mono-u { fill: var(--pu-burgundy); }
.pu-name { margin: 0; flex: 1; min-width: 0; }
.pu-arch { width: 100%; max-width: 520px; display: block; overflow: visible; }
.pu-arch text { font-family: var(--font-pu-display); paint-order: stroke; stroke-linejoin: round; fill: var(--pu-white); stroke: var(--pu-rose); filter: drop-shadow(4px 4px 0 var(--pu-charcoal)); }
.pu-arch-1 { font-size: 112px; stroke-width: 6px; letter-spacing: 2px; }
.pu-arch-2 { font-size: 74px; stroke-width: 5px; letter-spacing: 1px; }
.pu-enroll { font-family: var(--font-pu-display); }
.pu-badges { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; text-align: center; }
.pu-badges li { display: grid; justify-items: center; gap: 4px; }
.pu-badges .pu-stamp { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: var(--pu-oxblood); border: 2px solid var(--pu-rose); box-shadow: inset 0 0 0 5px var(--pu-oxblood), inset 0 0 0 6.5px rgba(201,142,126,.6), 4px 4px 0 var(--pu-charcoal); margin-bottom: 6px; }
.pu-badges svg { width: 30px; height: 30px; fill: none; stroke: var(--pu-white); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pu-badges b { font: 400 .92rem/1.15 var(--font-pu-display); color: var(--pu-white); }
.pu-badges small { font: 700 .66rem/1.3 var(--font-zoneb-body); letter-spacing: .16em; text-transform: uppercase; color: var(--pu-rose); }
@media (max-width: 560px) { .pu-badges { grid-template-columns: 1fr 1fr; row-gap: 18px; } }
.pu-photos figure:not(.main) { aspect-ratio: 1616 / 1080; }

/* Book Ink: bio */
.bio p { margin: 0 0 14px; }
.bio .lede { font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 2vw, 1.55rem); color: var(--royal-700); }

/* Resources: digital downloads on devices */
.dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
@media (max-width: 900px) { .dl-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
.dl-item { text-align: center; }
.dl-item h3 { margin: 18px 0 6px; }
.dl-scene { position: relative; display: grid; place-items: center; height: 300px; text-decoration: none; }
.device { position: relative; display: block; background: #15111c; box-shadow: 0 30px 60px -28px rgba(28,18,51,.55), inset 0 0 0 1.5px rgba(255,255,255,.08); transition: transform .6s var(--ease); }
.dl-scene:hover .device.tablet, .dl-scene:hover .device.laptop { transform: translateY(-6px); }
.device .screen { position: absolute; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 12%; text-align: center; background: var(--cover); color: var(--ink); overflow: hidden; }
.device .screen small { font: 700 .58rem/1.2 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.device .screen strong { font: 700 clamp(.9rem, 1.4vw, 1.1rem)/1.15 var(--font-display); }
.device .screen em { font: 600 .6rem/1 var(--font-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.device .screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,.14), transparent 38%); pointer-events: none; }
.device.tablet { width: 190px; aspect-ratio: 3 / 4; border-radius: 18px; }
.device.tablet .screen { inset: 9px; border-radius: 10px; }
.device.phone { position: absolute; right: calc(50% - 130px); bottom: 6px; width: 84px; aspect-ratio: 9 / 19; border-radius: 16px; transform: rotate(6deg); }
.device.phone .screen { inset: 5px; border-radius: 12px; padding: 18% 10%; }
.device.phone .screen strong { font-size: .8rem; }
.device.phone::before { content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0; width: 22px; height: 5px; border-radius: 4px; background: #15111c; z-index: 2; }
.device.laptop { width: 280px; aspect-ratio: 16 / 10.5; border-radius: 12px 12px 4px 4px; margin-bottom: 18px; }
.device.laptop .screen { inset: 9px 9px 12px; border-radius: 4px; }
.device.laptop::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: -14px; height: 14px; border-radius: 0 0 14px 14px; background: linear-gradient(#d9d3e6, #a79fbb); }

/* Footer: socials, compact email sign-up */
.f-social { display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer .f-social a { color: var(--gold-300); }
.f-mid { display: flex; flex-wrap: wrap; gap: 26px 40px; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; position: relative; }
.f-signup { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; max-width: 620px; }
.f-signup > p { flex-basis: 100%; margin: 0 0 4px; color: #e8e1f7; }
.f-signup .field { flex: 1 1 160px; margin: 0; }
.f-signup .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.f-signup input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.f-signup input::placeholder { color: rgba(255,255,255,.55); }
.f-signup .form-success p { color: #fff; }
/* =====================================================================
   aprayinggeneration.com (body[data-site="pg"]): the whole site in the brand-book look
   ===================================================================== */
body[data-site="pg"] { background: var(--pc-night); }
body[data-site="pg"] .site-header { color: var(--pc-cream); }
body[data-site="pg"] .site-header.is-solid { background: color-mix(in srgb, var(--pc-night) 90%, transparent); color: var(--pc-cream); box-shadow: 0 1px 0 rgba(201,162,78,.18); }
body[data-site="pg"] .brand b { font-family: var(--font-pc-display); font-weight: 900; letter-spacing: .04em; font-size: 1.05rem; }
body[data-site="pg"] .brand small { color: var(--pc-gold-light); font: 700 .62rem/1 var(--font-zoneb-body); letter-spacing: .26em; text-transform: uppercase; }
body[data-site="pg"] .nav a:not(.btn) { font-family: var(--font-zoneb-body); }
body[data-site="pg"] .nav .btn { --b: var(--pc-gold); --c: var(--pc-night); }
@media (max-width: 1290px) { body[data-site="pg"] .nav { background: radial-gradient(circle at 80% 10%, var(--pc-dusk), var(--pc-night) 70%); } }
body[data-site="pg"] .pw .pw-in::after { display: none; }
body[data-site="pg"] .site-footer { color: rgba(247,239,226,.78); }
body[data-site="pg"] .site-footer .brand b { color: var(--pc-cream); }
body[data-site="pg"] .site-footer .brand small { color: var(--pc-gold-light); }
body[data-site="pg"] .f-mark { color: rgba(247,239,226,.04); font-family: var(--font-pc-display); font-style: normal; text-transform: uppercase; }
body[data-site="pg"] h1 { font-family: var(--font-pc-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; }
body[data-site="pg"] h1 em { font-style: normal; color: var(--pc-gold); }
.pg-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); max-width: 11ch; }
.pg-hero { padding-top: calc(var(--header-h) + var(--section) * .6); }

/* Registration on the page */
.pg-register { margin-top: clamp(30px, 4vw, 54px); }
.form-card-night { max-width: 900px; margin-inline: auto; padding: clamp(22px, 3.5vw, 44px); border-radius: 22px; background: linear-gradient(160deg, rgba(42,22,34,.9), rgba(10,10,20,.9)); border: 1px solid rgba(201,162,78,.28); }
.form-card-night h2 { font: 900 clamp(1.3rem, 2.6vw, 2rem)/1.05 var(--font-pc-display); text-transform: uppercase; margin: 0 0 6px; }
.form-card-night .lede { margin: 0 0 18px; font-size: 1rem; }

/* Our journey: the reach in numbers, then year by year */
.pg-stats { list-style: none; margin: 0 0 clamp(34px, 5vw, 60px); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(201,162,78,.25); border: 1px solid rgba(201,162,78,.25); border-radius: 18px; overflow: hidden; }
.pg-stats li { background: color-mix(in srgb, var(--pc-dusk) 70%, var(--pc-night)); padding: clamp(18px, 2.4vw, 28px) 18px; text-align: center; }
.pg-stats b { font: 900 clamp(2rem, 4.4vw, 3.4rem)/1 var(--font-pc-display); color: var(--pc-cream); letter-spacing: -.02em; }
.pg-stats span { font: 900 clamp(1.6rem, 3.4vw, 2.6rem)/1 var(--font-pc-display); color: var(--pc-gold); }
.pg-stats small { display: block; margin-top: 10px; font: 600 .82rem/1.4 var(--font-zoneb-body); color: rgba(247,239,226,.78); }
@media (max-width: 820px) { .pg-stats { grid-template-columns: 1fr 1fr; } }
.pg-years { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; position: relative; }
.pg-years::before { content: ""; position: absolute; left: clamp(70px, 11vw, 120px); top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--pc-gold), rgba(201,162,78,.2)); }
.pg-years li { display: grid; grid-template-columns: clamp(70px, 11vw, 120px) minmax(0, 1fr); gap: 0 clamp(22px, 3vw, 38px); padding: 0 0 clamp(18px, 2.4vw, 28px); position: relative; }
.pg-years li::before { content: ""; position: absolute; left: clamp(70px, 11vw, 120px); top: 8px; width: 14px; height: 14px; translate: -6px 0; border-radius: 50%; background: var(--pc-night); border: 2px solid var(--pc-gold); }
.pg-years li.is-now::before, .pg-years li.is-next::before { background: var(--pc-gold); box-shadow: 0 0 0 6px rgba(201,162,78,.2); }
.pg-years b { font: 900 clamp(1.2rem, 2.4vw, 1.8rem)/1 var(--font-pc-display); color: var(--pc-gold); text-align: right; padding-right: 14px; }
.pg-years h3 { margin: 0 0 4px; font: 800 clamp(1rem, 1.7vw, 1.2rem)/1.2 var(--font-pc-display); text-transform: uppercase; letter-spacing: .01em; color: var(--pc-cream); }
.pg-years p { margin: 0; color: rgba(247,239,226,.82); }

/* Testimony cards: the photo with the word, name and year; touch to turn over */
.t-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 20px); }
@media (max-width: 900px) { .t-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .t-cards { grid-template-columns: 1fr; } }
.t-card { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: 18px; background: none; color: var(--pc-cream); text-align: left; cursor: pointer; perspective: 1400px; font: inherit; }
.t-front, .t-back { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .8s var(--ease); box-shadow: 0 24px 50px -26px rgba(0,0,0,.7); }
.t-front { background: var(--pc-dusk); }
.t-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-front.contain img { object-fit: contain; background: radial-gradient(ellipse at 50% 60%, #2a1a26, var(--pc-night)); }
.t-front.no-photo { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 120%, rgba(201,162,78,.28), transparent 60%), var(--pc-dusk); }
.t-front.no-photo .ph-block { position: absolute; inset: 14px; min-height: 0; color: rgba(232,210,155,.55); font-size: .62rem; place-items: end center; padding-bottom: 46px; }
.t-word { position: absolute; font: 900 clamp(1.5rem, 2.6vw, 2.2rem)/1 var(--font-pc-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--pc-cream); text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.t-front[data-at="tl"] .t-word, .t-front.no-photo .t-word { top: 14px; left: 16px; }
.t-front.no-photo .t-word { top: auto; left: auto; position: relative; }
.t-who { position: absolute; left: 14px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(10,10,20,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 700 .74rem/1 var(--font-zoneb-body); letter-spacing: .08em; text-transform: uppercase; color: var(--pc-gold-light); }
.t-back { transform: rotateY(180deg); display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 2vw, 24px); background: radial-gradient(ellipse 80% 70% at 90% 0%, rgba(201,162,78,.16), transparent 60%), var(--pc-dusk); overflow-y: auto; }
.t-prog { font: 800 .7rem/1.3 var(--font-zoneb-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pc-gold); }
.t-back q { font: 500 clamp(.86rem, 1.15vw, .98rem)/1.5 var(--font-zoneb-body); color: var(--pc-cream); quotes: "\201C" "\201D"; }
.t-back cite { font: 800 .74rem/1 var(--font-zoneb-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--pc-gold-light); margin-top: auto; }
.t-card.is-flipped .t-front { transform: rotateY(-180deg); }
.t-card.is-flipped .t-back { transform: rotateY(0); }
.t-card:focus-visible { outline: 3px solid var(--pc-gold); outline-offset: 4px; }
.t-pending { cursor: default; display: grid; }
.t-pending .ph-block { color: rgba(247,239,226,.6); height: 100%; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .t-front, .t-back { transition: opacity .2s; transform: none !important; } .t-back { opacity: 0; } .t-card.is-flipped .t-back { opacity: 1; } .t-card.is-flipped .t-front { opacity: 0; } }
@media (max-width: 760px) { .t-card { aspect-ratio: 4 / 3.4; } }

/* Two by Two: the whole video frame shows, centred on the right (Ink: "all you see is my head") */
@media (min-width: 901px) {
  .vsec.whole .bgv-media { top: 50%; bottom: auto; left: auto; right: var(--gutter); width: min(58%, 820px); aspect-ratio: 16 / 9; translate: 0 -50%; border-radius: 22px; overflow: hidden; -webkit-mask: none; mask: none; box-shadow: 0 40px 80px -34px rgba(0,0,0,.7); }
  .vsec.whole .vsec-copy { max-width: min(460px, 36%); }
}
.vsec.whole .bgv-media iframe { width: 100%; height: 100%; top: 0; left: 0; translate: none; }
.vsec.whole .bgv-media img { object-position: 50% 50%; }

/* Resources on the cream ground */
.pg-light { color: var(--pc-night); }
.pg-light p, .pg-light .lede { color: rgba(10,10,20,.78); }
.pg-light h2, .pg-light h3 { color: var(--pc-night); }
.pg-light .eyebrow { color: #7a5a1e; }
.pg-light .eyebrow::before { background: #7a5a1e; }
body[data-site="pg"] .pg-light .ph { color: #6b2a10; background: rgba(226,84,27,.1); }
.dl-grid.dl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
@media (max-width: 760px) { .dl-grid.dl-2 { grid-template-columns: 1fr; } }

/* Prayer University page */
.pu-page .pu-hero { padding-top: calc(var(--header-h) + var(--section) * .5); }
.pu-page h1.pu-name { margin: 0; }
.pu-ivory-sec { color: var(--pu-oxblood); }
.pu-ivory-sec .eyebrow { color: var(--pu-burgundy); }
.pu-ivory-sec .eyebrow::before { background: var(--pu-burgundy); }
.pu-ivory-sec .lede, .pu-ivory-sec p { color: #4a2a2e; }
.pu-h2 { font: 400 clamp(1.8rem, 4vw, 3rem)/1 var(--font-pu-display); color: var(--pu-burgundy); text-transform: uppercase; margin: 0 0 8px; }
.pu-badges-light { max-width: 900px; margin: 10px auto 30px; }
.pu-badges-light b { color: var(--pu-oxblood); }
.pu-badges-light small { color: var(--pu-burgundy); }
.pu-badges-light .pu-stamp { background: var(--pu-burgundy); box-shadow: inset 0 0 0 5px var(--pu-burgundy), inset 0 0 0 6.5px rgba(247,241,234,.5), 4px 4px 0 #4a4544; }
.pu-schedule { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(122,28,44,.2); border: 1px solid rgba(122,28,44,.2); border-radius: 16px; overflow: hidden; }
.pu-schedule div { background: #fffaf6; padding: 16px 18px; }
.pu-schedule dt { font: 700 .66rem/1.3 var(--font-zoneb-body); letter-spacing: .18em; text-transform: uppercase; color: var(--pu-burgundy); }
.pu-schedule dd { margin: 6px 0 0; font: 600 1rem/1.4 var(--font-zoneb-body); color: var(--pu-oxblood); }
@media (max-width: 560px) { .pu-schedule { grid-template-columns: 1fr; } }
.pu-ivory-sec .ph { color: var(--pu-burgundy); background: rgba(122,28,44,.08); }
.pu-campus { padding-top: 0; }
.pu-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.pu-strip figure { margin: 0; border-radius: 14px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 18px 40px -22px rgba(62,14,21,.5); aspect-ratio: 1616 / 1080; }
.pu-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .pu-strip { grid-template-columns: 1fr 1fr; } }
.pu-enroll-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 50px); align-items: start; }
@media (max-width: 900px) { .pu-enroll-grid { grid-template-columns: 1fr; } }
.pu-form h2 { font: 400 clamp(1.4rem, 2.6vw, 2rem)/1.05 var(--font-pu-display); color: var(--pu-burgundy); text-transform: uppercase; margin: 0; }
.pu-form .eyebrow { color: var(--pu-burgundy); }
.pu-form .btn { --b: var(--pu-burgundy); --c: var(--pu-ivory); }
.pu-merch { padding: clamp(20px, 3vw, 32px); border-radius: 20px; background: rgba(247,241,234,.06); border: 1px solid rgba(201,142,126,.4); color: var(--pu-blush); }
.pu-merch h3 { font: 400 1.4rem/1.1 var(--font-pu-display); color: var(--pu-ivory); text-transform: uppercase; margin: 6px 0 14px; }
.pu-merch-art { display: grid; place-items: center; margin: 0 0 14px; }
.pu-merch-art .sweat { width: 200px; height: 170px; border-radius: 40px 40px 18px 18px; background: #fff; display: grid; place-items: center; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.pu-merch-art svg { width: 160px; }
.pu-merch-art .m1 { font: 400 34px var(--font-pu-display); fill: var(--pu-burgundy); }
.pu-merch-art .m2 { font: 400 22px var(--font-pu-display); fill: var(--pu-burgundy); }
.pg-years b { white-space: nowrap; font-size: clamp(1.05rem, 2.1vw, 1.7rem); }

/* Testimony cards: upright photos sit to the right, leaving the left side clear for the word and name */
.t-front.contain img { object-position: right center; }
.t-word { padding: 4px 10px 5px; border-radius: 10px; background: rgba(10,10,20,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.t-front.no-photo { place-items: center; }
.t-front.no-photo .ph-block { place-items: start center; padding: 12px 10px 0; }
/* Resources on cream: readable placeholders on the device screens, and a darker gold word (contrast) */
body[data-site="pg"] .device .ph { color: inherit; background: rgba(255,255,255,.14); }
.pg-light h2 em { color: var(--gold-700); }
/* Prayer University page: badge icons and the semester heading on ivory */
.pu-ivory-sec { --pu-white: #ffffff; --pu-charcoal: #4a4544; }
.zone-b .pu-h2 { font: 400 clamp(1.8rem, 4vw, 3rem)/1 var(--font-pu-display); letter-spacing: .01em; color: var(--pu-burgundy); }
/* ============ Transformation University block (inkduncan.com; renamed from Prayer University, 20 Oct) ============
   Ink, 20 and 21 Oct: a university banner across the top, straight, with the TU monogram at the side and the slogan
   underneath; a light (cream) ground with burgundy lettering; the facts as icons, including the fee; two photos on
   the right at one size. Colours and marks come from the Transformation University brand kit (21 Oct). */
:root { --tu-oxblood: #50090E; --tu-burgundy: #7A1C2C; --tu-rose: #D49684; --tu-cream: #F3ECE1; --tu-charcoal: #46423F; --tu-blush: #EBD3CB; }
.tu-block { color: var(--tu-charcoal); font-family: var(--font-zoneb-body); }
/* The banner runs the full width of the screen, like the top banner of a college website */
.tu-banner { margin: 0 calc(50% - 50vw) clamp(26px, 4vw, 46px); padding: clamp(18px, 2.6vw, 30px) max(var(--gutter), calc(50vw - 620px));
  display: flex; align-items: center; gap: clamp(14px, 2.6vw, 34px); background: #F7F1E8;
  border-block: clamp(7px, 1vw, 12px) solid var(--tu-oxblood);
  box-shadow: inset 0 5px 0 #F7F1E8, inset 0 8px 0 var(--tu-rose), inset 0 -5px 0 #F7F1E8, inset 0 -8px 0 var(--tu-rose); }
.tu-mono { width: clamp(62px, 8vw, 118px); height: auto; flex: none; }
.tu-banner-name { flex: 1; min-width: 0; }
.tu-name { margin: 0; line-height: 0; }
.tu-name img { display: block; height: auto; }
.tu-name .wm-line { width: 100%; max-width: 1000px; }
.tu-name .wm-stack { display: none; width: min(100%, 420px); }
.tu-block .tu-slogan { margin: clamp(8px, 1.2vw, 14px) 0 0; font: 700 clamp(.72rem, 1.15vw, .98rem)/1.3 var(--font-zoneb-body); letter-spacing: .34em; text-transform: uppercase; color: var(--tu-burgundy); }
@media (max-width: 700px) {
  .tu-name .wm-line { display: none; }
  .tu-name .wm-stack { display: block; }
  .tu-slogan { letter-spacing: .22em; }
}
.tu-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(26px, 4.5vw, 64px); align-items: center; }
@media (max-width: 900px) { .tu-grid { grid-template-columns: 1fr; } }
.tu-block .tu-enroll { margin: 0 0 4px; font: 400 clamp(1.5rem, 3vw, 2.3rem)/1.1 var(--font-pu-display); text-transform: uppercase; color: var(--tu-oxblood); }
.tu-block .tu-enroll span { color: var(--tu-burgundy); }
.tu-block .tu-begins { margin: 0 0 24px; font-weight: 600; color: var(--tu-charcoal); }
.tu-badges { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; text-align: center; }
.tu-badges li { display: grid; justify-items: center; align-content: start; gap: 4px; }
.tu-stamp { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; background: var(--tu-oxblood);
  box-shadow: inset 0 0 0 4px var(--tu-oxblood), inset 0 0 0 5.5px var(--tu-rose), 4px 4px 0 var(--tu-charcoal); }
.tu-stamp svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tu-badges b { font: 400 1rem/1.15 var(--font-pu-display); color: var(--tu-oxblood); }
.tu-badges small { font: 700 .64rem/1.35 var(--font-zoneb-body); letter-spacing: .16em; text-transform: uppercase; color: var(--tu-burgundy); }
@media (max-width: 560px) { .tu-badges { grid-template-columns: 1fr 1fr; } }
.tu-block .btn { --b: var(--tu-burgundy); --c: #fff; border-radius: 14px; font-weight: 800; }
.tu-block .link-line { color: var(--tu-burgundy); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(122,28,44,.5); }
/* Two photos, the same size, one above the other */
.tu-photos { display: grid; gap: 16px; }
.tu-photos figure { margin: 0; aspect-ratio: 1616 / 1080; overflow: hidden; border: 4px solid #fff; border-radius: 6px; box-shadow: 0 22px 44px -22px rgba(80,9,14,.45); }
.tu-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .tu-photos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tu-photos { grid-template-columns: 1fr; } }

/* Book Ink: the bio's proof points as short notes (Ink, 20 Oct) */
.bio-notes { list-style: none; margin: 18px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bio-notes li { padding: 12px 14px; border-left: 3px solid var(--gold-500); background: rgba(91,64,160,.06); border-radius: 0 10px 10px 0; font-size: .95rem; line-height: 1.35; }
.bio-notes b { display: block; font-family: var(--font-display); font-size: 1.2rem; color: var(--royal-700); }
.bio-ask { font-family: var(--font-display); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--royal-800); }
@media (max-width: 480px) { .bio-notes { grid-template-columns: 1fr; } }
/* Transformation University page (aprayinggeneration.com/transformation-university/): cream, with the six weeks as cards */
.tu-hero { padding-top: calc(var(--header-h) + 22px); }
.tu-weeks { list-style: none; margin: 10px auto 26px; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.tu-weeks li { display: grid; gap: 4px; justify-items: center; padding: 14px 8px; background: #fff; border: 1px solid rgba(122,28,44,.18); border-radius: 14px; text-align: center; }
.tu-weeks b { font: 400 1rem/1.1 var(--font-pu-display); color: var(--tu-oxblood); text-transform: uppercase; }
.tu-weeks span { font-weight: 600; color: var(--tu-charcoal); }
.tu-weeks em { font: 700 .62rem/1.3 var(--font-zoneb-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--tu-burgundy); }
.tu-weeks em.free { padding: 3px 9px; border-radius: 999px; background: var(--tu-burgundy); color: #fff; }
@media (max-width: 760px) { .tu-weeks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .tu-weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The Transformation University page opens on cream: its header is solid night from the start, so the cream links stay readable */
.tu-page .site-header { background: color-mix(in srgb, var(--pc-night) 92%, transparent); }

/* ============ aprayinggeneration.com, Ink's 21 Oct list ============ */
/* The challenge flyer as one image (the final flyer of 21 Oct); clicking it opens registration */
.pc-flyer.pc-flyer-img { aspect-ratio: 4 / 5; background: var(--pc-night); }
.pc-flyer.pc-flyer-img::after { display: none; }
.pc-flyer.pc-flyer-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Testimonies: postcards in a slideshow (words only). Programme and year, the testimony, the person. */
.tp-show { position: relative; margin-top: clamp(22px, 3vw, 34px); }
.tp-track { list-style: none; margin: 0; padding: 6px 4px 18px; display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 84%);
  column-gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.tp-track::-webkit-scrollbar { display: none; }
.tp-track:focus-visible { outline: 2px solid var(--pc-gold); outline-offset: 4px; border-radius: 8px; }
.tp-card { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 300px; padding: 26px 24px 22px;
  background: linear-gradient(180deg, #fbf5ea, var(--pc-cream)); color: #2a1a20; border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 22px 40px -24px rgba(0,0,0,.8); }
/* the stamp and postmark of a postcard */
.tp-card::before { content: ""; position: absolute; top: 16px; right: 16px; width: 40px; height: 48px; border: 2px dashed rgba(226,84,27,.55); border-radius: 3px;
  background: radial-gradient(circle at 50% 58%, rgba(201,162,78,.9) 0 7px, transparent 8px), linear-gradient(180deg, rgba(226,84,27,.12), rgba(201,162,78,.18)); }
.tp-card::after { content: ""; position: absolute; top: 30px; right: 44px; width: 46px; height: 24px; border-top: 1.5px solid rgba(42,26,32,.18); border-bottom: 1.5px solid rgba(42,26,32,.18); border-radius: 50%; }
.tp-card .tp-label { margin: 0; padding-right: 64px; font: 700 .68rem/1.4 var(--font-zoneb-body); letter-spacing: .2em; text-transform: uppercase; color: #b8401a; }
.tp-card blockquote { margin: 0; flex: 1; padding-top: 14px; border-top: 1px dashed rgba(42,26,32,.22); font: 500 1rem/1.55 var(--font-zoneb-body); color: #2a1a20; }
.tp-card .tp-who { margin: 0; font: 800 .82rem/1.2 var(--font-zoneb-body); letter-spacing: .14em; text-transform: uppercase; color: #2a1a20; }
.tp-card .tp-who::before { content: ""; }
.tp-card .ph { color: #7a3a22; }
.tp-nav, .pim-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(247,239,226,.35);
  background: rgba(10,10,20,.72); color: var(--pc-cream); font: 400 1.8rem/1 var(--font-zoneb-body); cursor: pointer; display: grid; place-items: center; padding-bottom: 4px; }
.tp-nav:hover, .pim-nav:hover { background: var(--pc-gold); color: var(--pc-night); }
.tp-nav.prev { left: -10px; } .tp-nav.next { right: -10px; }
@media (max-width: 640px) { .tp-nav { display: none; } }

/* Power in motion: a smaller slideshow of photos and videos, no captions */
.pim-show { position: relative; max-width: 760px; margin: clamp(24px, 3.5vw, 40px) auto 0; }
.pim-slides { position: relative; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: #0d0a12; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.pim-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s var(--ease); }
.pim-slide.is-active { opacity: 1; }
.pim-slide img, .pim-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pim-slide.contain img, .pim-slide.contain video { object-fit: contain; }
.pim-nav.prev { left: 12px; } .pim-nav.next { right: 12px; }
.pim-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.pim-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(247,239,226,.35); cursor: pointer; }
.pim-dots button[aria-current="true"] { background: var(--pc-gold); width: 22px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .pim-slide { transition: none; } }
/* Mission and testimonies sit close together (Ink: no empty space); both are on night, so no blend needs the room */
body[data-site="pg"] #mission { padding-bottom: calc(var(--section) * .35); }
body[data-site="pg"] #testimonies { padding-top: calc(var(--section) * .35); }

/* Book Ink photo: no hover sheen across Ink */
.book-photo .pw-in::after { display: none; }

/* ============ Phones and tablets (iOS and Android), checked 21 Oct ============ */
/* iPhone notch and home bar: the page uses viewport-fit=cover, so keep content clear of the safe areas */
.wrap, .wrap-narrow { width: min(1240px, 100% - max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)) * 2); }
.wrap-narrow { width: min(820px, 100% - max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)) * 2); }
.site-footer { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
/* Touch screens: every link and button is at least 44 px tall, so it is easy to tap with a thumb */
@media (hover: none), (max-width: 1199px) {
  .f-links a, .f-bottom a, .site-footer a:not(.brand), .link-line, .site-footer button { display: inline-flex; align-items: center; min-height: 44px; }
  .f-links { gap: 0 26px; }
  .brand { min-height: 44px; justify-content: center; }
  .tu-block .tu-slogan { font-size: .8rem; }
}/* touch sizes on the other pages: the /challenge header links and the Power in motion dots (the dot stays small; the tap area is 32 px) */
.cp-head a { display: inline-flex; align-items: center; min-height: 44px; }
.pim-dots { gap: 0; }
.pim-dots button { position: relative; width: 32px; height: 32px; background: none; border-radius: 0; }
.pim-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; translate: -50% -50%; border-radius: 6px; background: rgba(247,239,226,.35); transition: width .3s; }
.pim-dots button[aria-current="true"] { width: 40px; background: none; }
.pim-dots button[aria-current="true"]::before { width: 22px; background: var(--pc-gold); }
/* ============ Ink's 22 Oct call and notes ============ */
/* Closer sections everywhere (Ink: "make the spaces closer in between the sections") */
:root { --section: clamp(44px, 5vw, 76px); }
/* Prayer Challenge block: the flyer as one image; the name without the big script hashtag; the two columns the same height */
.pc-block { align-items: stretch; }
.pc-block > div:last-child { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.pc-lockup-plain .pc-title { font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
.pc-lockup .pc-tag { display: block; margin-top: 8px; font: 800 clamp(1rem, 1.6vw, 1.3rem)/1.2 var(--font-zoneb-body); letter-spacing: .24em; text-transform: uppercase; color: var(--pc-gold); }
#challenge .pc-facts li { font-size: 1rem; }
/* Transformation University: fuller left side, the same height as the two photos (Ink: "left and right have to be in sync") */
.tu-grid { align-items: stretch; }
.tu-grid > div:first-child { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.tu-block .tu-enroll { font-size: clamp(1.8rem, 3.3vw, 2.7rem); }
.tu-block .tu-begins { font-size: 1.15rem; margin-bottom: 0; }
.tu-badges { gap: 26px 16px; margin: 0; }
.tu-stamp { width: 98px; height: 98px; box-shadow: inset 0 0 0 5px var(--tu-oxblood), inset 0 0 0 7px var(--tu-rose), 5px 5px 0 var(--tu-charcoal); }
.tu-stamp svg { width: 42px; height: 42px; }
.tu-badges b { font-size: 1.15rem; }
.tu-badges small { font-size: .72rem; }
.tu-block .btn-row { margin-top: 4px; }
@media (max-width: 560px) { .tu-stamp { width: 80px; height: 80px; } .tu-stamp svg { width: 34px; height: 34px; } }
/* Book Ink: the four boxes, Ink's question and tagline, the photo on the left; the form and her topics on the right */
.book-grid { align-items: stretch; }
.book-left, .book-right { display: flex; flex-direction: column; gap: 22px; }
.book-left h2 { margin-bottom: 0; }
.bio-notes { margin: 0; gap: 12px; }
.bio-notes li { padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; font-size: .95rem; }
.bio-notes li span { display: block; color: var(--muted); }
.bio-notes li i { font-style: italic; color: var(--ink); }
.bio-notes b { margin-bottom: 4px; }
.book-ask { padding: 22px 24px; border-radius: 16px; background: linear-gradient(135deg, var(--royal-800), var(--royal-950)); color: #fff; }
.book-ask .ask-q { margin: 0 0 10px; font: 800 clamp(1.25rem, 2vw, 1.6rem)/1.2 "Inter Tight", var(--font-body); letter-spacing: -.01em; }
.book-ask .ask-tag { margin: 0; font: 700 .82rem/1.5 "Inter Tight", var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-400); }
.book-ask .ask-small { margin: 8px 0 0; font-size: .92rem; color: rgba(255,255,255,.75); }
.book-left .book-photo { margin: 6px 18px 0 0; }
.book-right .form-card { margin: 0; }
.topics-card { padding: 22px 24px; border-radius: 18px; background: var(--white); box-shadow: var(--shadow-sm); }
.topics-card h3 { margin: 0 0 12px; }
.topics-card .topics { margin: 0; gap: 8px; }
.topics-card .topics li { padding: 12px 16px; font-size: 1rem; box-shadow: none; background: var(--royal-50); }
/* Ink Duncan testimonies: the postcard slideshow in Ink's royal and gold */
.ink-testimonies .tp-card { background: #fff; box-shadow: 0 18px 40px -24px rgba(38,24,74,.45); border: 1px solid rgba(91,64,160,.1); }
.ink-testimonies .tp-card .tp-label { color: var(--royal-600); }
.ink-testimonies .tp-card .tp-who::before { color: var(--gold-500); }
.ink-testimonies .tp-card::before { border-color: rgba(201,162,78,.6); }
.ink-testimonies .tp-nav { background: var(--royal-800); }.book-right .form-card { flex: 1; }
.topics-wide { margin-top: 26px; }
.topics-wide .topics { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .topics-wide .topics { grid-template-columns: 1fr; } }
.pc-tiles { list-style: none; margin: 14px 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pc-tiles li { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(247,239,226,.05); border: 1px solid rgba(201,162,78,.28); }
.pc-tiles svg { grid-row: 1 / 3; width: 44px; height: 44px; padding: 9px; border-radius: 50%; background: rgba(226,84,27,.16); fill: none; stroke: var(--pc-gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pc-tiles b { font: 800 1.02rem/1.2 var(--font-zoneb-body); color: var(--pc-cream); }
.pc-tiles small { font: 600 .74rem/1.3 var(--font-zoneb-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(247,239,226,.65); }
@media (max-width: 420px) { .pc-tiles { grid-template-columns: 1fr; } }.book-right .form-card { display: flex; flex-direction: column; }
.book-right .form-card form { flex: 1; display: flex; flex-direction: column; }
.book-right .form-card .form-grid { flex: 1; align-content: space-between; }
.book-right .form-card .field.full textarea { min-height: 150px; }.pc-block > .pc-flyer-img { align-self: center; height: auto; aspect-ratio: 4 / 5; }
.pc-flyer.pc-flyer-img img { object-fit: contain; }.tu-grid > div:first-child { justify-content: flex-start; gap: 10px; }
.tu-grid > div:first-child .tu-badges { flex: 1; align-content: space-evenly; margin: 14px 0; }@media (min-width: 641px) { .tp-nav.prev { left: -24px; } .tp-nav.next { right: -24px; } }.topics-wide .topics li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ============ Ink's notes, 23 Oct ============ */
.keep-line { white-space: nowrap; }
/* Welcome and the ministry: a little taller, like Fully Loaded, so the video shows more and the purple covers less */
@media (min-width: 901px) {
  #welcome.vsec, .apg-intro.vsec { min-height: min(84svh, 760px); }
  .vsec .vsec-copy { padding-block: 10px; }
}
.vsec-list { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 10px; max-width: 520px; }
.vsec-list li { display: grid; grid-template-columns: 14px 1fr; column-gap: 12px; align-items: baseline; font-size: 1rem; line-height: 1.45; }
.vsec-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 4px rgba(201,162,78,.2); translate: 2px -1px; }
.vsec-list b { font-weight: 700; color: #fff; margin-right: 6px; }
.vsec-list span { color: rgba(255,255,255,.78); }
.vsec-list li > b, .vsec-list li > span { grid-column: 2; display: inline; }
.vsec-list li { display: block; padding-left: 26px; position: relative; }
.vsec-list li::before { position: absolute; left: 4px; top: .55em; translate: none; }
.vsec-mission { margin: 0 0 4px; font: 600 clamp(1rem, 1.5vw, 1.15rem)/1.5 var(--font-zoneb-body); color: var(--pc-cream); max-width: 34ch; }
/* The challenge flyer a bit bigger (Ink, 23 Oct) */
@media (min-width: 901px) { .pc-block { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); } }
/* phones and tablets: one column, the flyer large and centred, then the text */
@media (max-width: 900px) { .pc-block { grid-template-columns: 1fr; gap: 26px; } .pc-block > .pc-flyer-img { width: min(100%, 460px); max-width: none; justify-self: center; } }.pc-block .pc-flyer { max-width: 580px; }

/* ============ Testimony cards, 23 Oct: no em dash before the name; the inkduncan.com cards made richer ============ */
.tp-card .tp-who::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 10px; vertical-align: middle; background: currentColor; opacity: .55; }
.ink-testimonies .tp-track { grid-auto-columns: min(360px, 86%); padding-block: 16px 26px; }
.ink-testimonies .tp-card { position: relative; overflow: hidden; min-height: 320px; padding: 30px 28px 26px; border-radius: 22px; border: 1px solid rgba(201,162,78,.28);
  background: radial-gradient(120% 70% at 100% 0%, rgba(201,162,78,.14), transparent 60%), linear-gradient(180deg, #fff, #fbf7ff);
  box-shadow: 0 26px 50px -30px rgba(38,24,74,.55); transition: transform .45s var(--ease), box-shadow .45s; }
.ink-testimonies .tp-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -30px rgba(38,24,74,.6); }
.ink-testimonies .tp-card::before { content: "\201C"; position: absolute; top: -14px; right: 18px; width: auto; height: auto; border: 0; background: none;
  font: 700 7rem/1 var(--font-display); color: rgba(201,162,78,.28); }
.ink-testimonies .tp-card::after { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 5px; border: 0; border-radius: 0; background: linear-gradient(90deg, var(--royal-600), var(--gold-500)); }
.ink-testimonies .tp-label { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--royal-50); color: var(--royal-700); font-size: .66rem; letter-spacing: .16em; }
.ink-testimonies .tp-card blockquote { border-top: 0; padding-top: 4px; font: 500 1.02rem/1.6 var(--font-body); color: var(--ink); }
.ink-testimonies .tp-who { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(91,64,160,.12); color: var(--royal-800); letter-spacing: .12em; }
.ink-testimonies .tp-who::before { width: 30px; height: 30px; margin: 0; border-radius: 50%; opacity: 1; background: linear-gradient(135deg, var(--gold-400), var(--gold-500)); box-shadow: 0 0 0 4px rgba(201,162,78,.18); }.ink-testimonies .tp-card::after { width: auto; border-top: 0; border-bottom: 0; }
.ink-testimonies .tp-who::before { width: 12px; height: 12px; }
.dl-grid.dl-2:has(> .dl-item:only-child) { grid-template-columns: minmax(0, 420px); justify-content: center; }

/* ============ Phone review, 23 Oct ============ */
/* Resources: the small phone sits beside the tablet, not over its title */
.dl-scene .device.tablet { translate: -32px 0; }
.dl-scene .device.phone { right: calc(50% - 146px); bottom: -4px; }
.fl-copy-title em, #fully-loaded h2 em { white-space: nowrap; }
@media (max-width: 700px) {
  /* hero: the photos fade softly into the section below instead of a straight cut */
  .hero-banner .hb-media { -webkit-mask: linear-gradient(180deg, transparent, #000 7%, #000 80%, transparent); mask: linear-gradient(180deg, transparent, #000 7%, #000 80%, transparent); }
  /* challenge: a bigger name, and a full-width register button */
  #challenge .pc-lockup-plain .pc-title { font-size: clamp(1.9rem, 8.6vw, 2.4rem); }
  #challenge .pc-block .btn-row .btn { width: 100%; justify-content: center; }
  #challenge .pc-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  #challenge .pc-tiles li { grid-template-columns: 1fr; padding: 12px; row-gap: 6px; }
  #challenge .pc-tiles svg { grid-row: auto; width: 38px; height: 38px; padding: 8px; }
  /* welcome: the play button centred and clear of the edge */
  #welcome .play-big { display: flex; margin-inline: auto; }
  /* Book Ink photo: no offset outline running off the screen */
  .book-photo::before { display: none; }
  /* footer sign-up: one field per line */
  .f-signup .field { flex-basis: 100%; }
  .f-signup .btn { width: 100%; justify-content: center; }
}
/* ============ Thorough review, 23 Oct ============ */
/* No lines that read as dashes: labels stand on their own, separators are small gold dots */
.eyebrow::before, .eyebrow::after { display: none !important; }
.eyebrow { gap: 0; }
.word-ticker i { width: 5px !important; height: 5px !important; border-radius: 50%; background: var(--gold-500) !important; opacity: .9; }
.tp-card .tp-who::before { width: 8px; height: 8px; border-radius: 50%; opacity: .8; }
/* Social icons centred in their circles; footer bottom line aligned */
.f-social a, .apg-icons a { display: inline-flex; align-items: center; justify-content: center; }
.f-social a svg, .apg-icons a svg { display: block; margin: 0; }
.f-bottom { align-items: center; }
/* Book Ink: two balanced columns, the form in a pop-up */
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 64px); align-items: start; }
.book-left, .book-right { display: flex; flex-direction: column; gap: 20px; }
.book-left h2 { margin: 0; }
.book-ask .btn-row { margin-top: 16px; }
.book-photo { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 1600 / 1067; }
.book-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-right .topics-card { padding: 20px 22px; }
.book-right .topics { gap: 6px; }
.book-right .topics li { padding: 10px 14px; font-size: .95rem; }
@media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .bio-notes { grid-template-columns: 1fr 1fr; } .bio-notes li:nth-child(-n+2) { grid-column: 1 / -1; } }
#book-dialog .form-card { max-height: calc(100dvh - 32px); overflow-y: auto; }.tp-card .tp-label { font-size: .75rem; }
.brand small { font-size: max(.72rem, 11.5px); }
.device.phone .screen small { font-size: 6px; letter-spacing: .12em; white-space: nowrap; }
.device.phone .screen strong { font-size: 11px; }
.page-simple a, .prose .eyebrow a, .err-page a { display: inline-flex; align-items: center; min-height: 40px; }#book-dialog .form-card { overflow-x: hidden; }
body[data-site="pg"] .brand small { font-size: 11.5px; letter-spacing: .2em; }
.soon-pill { font-size: .75rem; }

/* ============ Registration pop-up, 23 Oct (iPhone overlap) ============
   The flyer is a plain image at its own shape; no percentage heights or forced squares inside the scrolling card,
   which iPhone Safari sizes differently. Phones: one simple scrolling card, flyer on top, form below. */
.reg-card .pc-flyer.pc-flyer-img { aspect-ratio: auto !important; min-height: 0 !important; overflow: hidden; }
.reg-card .pc-flyer.pc-flyer-img img { display: block; width: 100%; object-fit: cover; }
@media (min-width: 821px) {
  .reg-card { align-items: stretch; }
  .reg-card .pc-flyer.pc-flyer-img { height: auto !important; max-height: 92vh; }
  .reg-card .pc-flyer.pc-flyer-img img { height: 100%; }
}
@media (max-width: 820px) {
  .reg-dlg { width: min(560px, calc(100vw - 20px)); margin: auto; }
  .reg-card { display: block; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .reg-card .pc-flyer.pc-flyer-img { height: auto !important; max-height: none; border-radius: 0; }
  .reg-card .pc-flyer.pc-flyer-img img { height: auto; }
  .reg-card .reg-form { display: block; max-height: none; overflow: visible; padding: 22px 18px 26px; }
  .reg-card .dlg-close { position: sticky; top: 10px; float: right; margin: 10px 10px -54px 0; z-index: 5; background: rgba(10,10,20,.75); color: #fff; }
}/* the flyer image keeps its own 4:5 shape from its width and height, on every browser */
.pc-flyer.pc-flyer-img img { max-width: 100%; }
@media (max-width: 820px) { .reg-card .pc-flyer.pc-flyer-img img { width: 100%; height: auto !important; aspect-ratio: 1600 / 2000; } .reg-card .pc-flyer.pc-flyer-img { position: relative; display: block; } }

/* ============ Ink's phone notes, 24 Oct ============ */
/* Banner on phones and tablets: her words, the headline, the photo, the line, then the buttons */
@media (max-width: 1080px) {
  .hero-banner { display: flex; flex-direction: column; align-items: center; }
  .hero-banner .hero-grid, .hero-banner .hero-copy { display: contents; }
  .hero-banner .hero-copy > * { width: min(640px, calc(100% - 2 * var(--gutter))); margin-inline: auto; text-align: center; }
  .hero-banner .word-ticker { order: 1; max-width: 560px; margin-top: calc(var(--header-h) + 26px); margin-bottom: 16px; }
  .hero-banner .hero-copy h1 { order: 2; margin-bottom: 0; }
  .hero-banner .hb-media { order: 3; width: 100%; margin-top: 10px; }
  .hero-banner .hero-copy .lede { order: 4; margin-top: 0; }
  .hero-banner .btn-row { order: 5; justify-content: center; margin-top: 22px; margin-bottom: 44px; }
}
/* Welcome and the ministry on phones: the play button sits on the video, small; Welcome's heading comes before its video */
@media (max-width: 900px) {
  #welcome.vsec, .apg-intro.vsec { display: flex; flex-direction: column; }
  #welcome > .wrap, #welcome .vsec-copy, .apg-intro > .wrap, .apg-intro .vsec-copy { display: contents; }
  #welcome .vsec-copy > *, .apg-intro .vsec-copy > * { margin-inline: var(--gutter); order: 4; }
  #welcome .vsec-copy > .eyebrow { order: 1; }
  #welcome .vsec-copy > h2 { order: 2; margin-bottom: 20px; }
  #welcome .bgv-media { order: 3; }
  .apg-intro .bgv-media { order: 1; }
  #welcome .vsec-copy > .play-big, .apg-intro .vsec-copy > .bgv-tag { order: 3; }
  #welcome .vsec-copy > .play-big, .apg-intro .vsec-copy > .bgv-tag {
    position: relative; inset: auto; z-index: 2; align-self: flex-start; display: inline-flex; flex-direction: row; align-items: center; gap: 10px;
    margin: -90px 0 38px calc(var(--gutter) - 2px); padding: 6px 16px 6px 6px; border-radius: 999px;
    background: rgba(14,9,10,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.3);
    color: #fff; font: 600 .72rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
  #welcome .play-big .pi, .apg-intro .bgv-tag .pi { width: 40px; height: 40px; box-shadow: none; }
  #welcome .play-big svg, .apg-intro .bgv-tag .pi svg { width: 15px; height: 15px; margin-left: 2px; }
}
/* "Turning ordinary hearts into burning altars." on one line */
.apg-intro .apg-line { white-space: nowrap; font-size: min(1.7rem, 1.95vw); }
@media (max-width: 900px) { .apg-intro .apg-line { font-size: min(1.5rem, calc((100vw - 2 * var(--gutter)) / 21)); } }
/* Book Ink: the four boxes two by two at every size, a little smaller on phones */
@media (max-width: 480px) {
  .bio-notes li:nth-child(-n+2) { grid-column: auto; }
  .bio-notes { gap: 10px; }
  .bio-notes li { padding: 12px 12px 12px 13px; font-size: .8rem; line-height: 1.35; }
  .bio-notes b { font-size: 1rem; margin-bottom: 2px; }
  .book-ask { padding: 18px 18px; }
  .book-ask .ask-q { font-size: 1.15rem; }
  .book-ask .ask-tag { font-size: .7rem; letter-spacing: .12em; }
}
/* Digital resources: a slideshow like the testimonies; two side by side on wide screens, one at a time on phones */
.dl-show { max-width: 860px; margin-inline: auto; }
.dl-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 12px); column-gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; padding: 6px 4px 18px; }
.dl-track::-webkit-scrollbar { display: none; }
.dl-track > .dl-item { scroll-snap-align: start; min-width: 0; }
.dl-show .tp-nav { background: var(--royal-800); }
@media (min-width: 761px) { .dl-show:not(:has(.dl-item:nth-child(3))) .tp-nav { display: none; } }
@media (max-width: 760px) { .dl-track { grid-auto-columns: 100%; } }
/* Footer: Share your testimony is a button */
.f-links .btn { min-height: 44px; }
/* Pop-ups never run off the screen: the card scrolls inside, and its close button stays in reach */
dialog.popup > .form-card { max-height: calc(100dvh - 24px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
dialog.popup > .form-card > .dlg-close { position: sticky; top: 0; float: right; margin: -12px -12px -36px 0; }
/* Share your testimony: the same night look as the Prayer Challenge registration */
.ts-card { background: var(--pc-night); color: var(--pc-cream); border-radius: 22px; font-family: var(--font-zoneb-body); }
.ts-card .eyebrow { color: var(--pc-gold-light); }
.ts-card h3 { font: 900 clamp(1.3rem, 2.4vw, 1.8rem)/1.05 var(--font-pc-display); text-transform: uppercase; color: var(--pc-cream); margin: 0; }
.ts-card .dlg-close { background: rgba(247,239,226,.12); color: var(--pc-cream); box-shadow: none; }
.ts-card input[type="file"] { color: var(--pc-cream); }
@media (max-width: 560px) { .ts-card { padding: 22px 18px; } .ts-card .form-grid { grid-template-columns: 1fr; } }
@media (max-width: 1080px) {
  .hero-banner .hb-media { margin-top: 16px; -webkit-mask: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent); mask: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent); }
}
@media (max-width: 900px) { #welcome .vsec-copy > .lede, .apg-intro .vsec-copy > .eyebrow { margin-top: 0; } }
/* the new banner line breaks after "finish." and stays on the dark side, clear of the light behind the photos */
@media (min-width: 1081px) { .hero-banner .hero-copy .lede { max-width: 21em; } }

/* ============ Hero, 26 Oct: Judah's finished banner (hero-glow.jpg, 2000x1364), used exactly as made ============ */
/* Desktop: the picture sits on the right at the hero's full height and fades in from the dark left, where the words are.
   The hero is never taller than the picture allows, so her photos always stay clear of the words. */
@media (min-width: 1081px) {
  .hero-banner { height: max(600px, min(47vw, 100svh)); max-height: none; background: #110b0c; }
  .hero-banner .hb-media { background: #110b0c; -webkit-mask: linear-gradient(0deg, transparent, #000 90px); mask: linear-gradient(0deg, transparent, #000 90px); }
  .hero-banner .hb-media img { position: absolute; top: 0; right: 0; left: auto; width: auto; height: 100%; max-width: none; object-fit: cover; object-position: 100% 0;
    transform-origin: 100% 40%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%); mask-image: linear-gradient(90deg, transparent, #000 20%); }
}
/* Phones and tablets: both photos of her in the frame */
@media (max-width: 1080px) {
  .hero-banner .hb-media img { object-position: 93% 0; }
  .hero-banner .hb-media { -webkit-mask: linear-gradient(180deg, transparent, #000 7%, #000 84%, transparent); mask: linear-gradient(180deg, transparent, #000 7%, #000 84%, transparent); }
}

/* ============ 27 Oct ============ */
/* The ministry on inkduncan.com: its two facts as cards */
.apg-stats { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; }
.apg-stats li { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 18px; border-radius: 18px; border: 1px solid rgba(201,162,78,.38);
  background: linear-gradient(160deg, rgba(201,162,78,.16), rgba(255,255,255,.03)); box-shadow: 0 18px 40px -28px rgba(0,0,0,.8); }
.apg-stats svg { width: 40px; height: 40px; padding: 9px; margin-bottom: 6px; border-radius: 50%; background: rgba(201,162,78,.18); fill: none; stroke: var(--pc-gold-light); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.apg-stats b { font: 800 clamp(1.25rem, 2vw, 1.55rem)/1.1 var(--font-zoneb-body); color: var(--pc-gold-light); }
.apg-stats span { font-size: .88rem; line-height: 1.4; color: rgba(247,239,226,.8); }
/* Resources slideshow on aprayinggeneration.com: its arrows in the ministry's night colour */
body[data-site="pg"] .dl-show .tp-nav { background: var(--pc-night); }
.dl-item .soon-pill { margin-top: 4px; }