/* ==========================================================================
   The Church of the Holy Repair Pad: the one stylesheet
   Palette drawn from the Pad render: night navy, pad blue, cyan glow,
   ice white, weathered steel. Gold is used sparingly (Book of Repairs).
   ========================================================================== */

@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-latin-var.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-latin-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --night: #040915;
  --navy: #07122a;
  --navy-2: #0b1d40;
  --pad-blue: #1d4f94;
  --pad-blue-2: #2e6fc4;
  --azure: #4aa8ff;
  --cyan: #6fe0ff;
  --ice: #e6f6ff;
  --white: #ffffff;
  --steel: #8b97a6;
  --steel-dark: #2a3442;
  --gunmetal: #161e2b;
  --gold: #d6b46a;
  --danger: #ffb4b4;
  --text: #e3eefb;
  --text-dim: #aebfd6;
  --glow-sm: 0 0 12px rgba(111, 224, 255, 0.45);
  --glow-md: 0 0 28px rgba(111, 224, 255, 0.35), 0 0 4px rgba(111, 224, 255, 0.6);
  --glow-lg: 0 0 80px rgba(74, 168, 255, 0.35), 0 0 24px rgba(111, 224, 255, 0.4);
  --radius: 14px;
  --display: "Cinzel", "Trajan Pro", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --body: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 1160px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--night);
  background-image:
    radial-gradient(1200px 700px at 70% -10%, rgba(46, 111, 196, 0.35), transparent 60%),
    radial-gradient(900px 600px at 0% 30%, rgba(29, 79, 148, 0.25), transparent 60%),
    radial-gradient(800px 800px at 100% 100%, rgba(111, 224, 255, 0.08), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--night) 60%, #03060f 100%);
  background-attachment: fixed;
}

/* faint cathedral lattice over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  background-image:
    repeating-linear-gradient(60deg, var(--cyan) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(-60deg, var(--cyan) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, var(--cyan) 0 1px, transparent 1px 78px);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: var(--white); }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: 0.04em; line-height: 1.15; color: var(--ice); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ice); color: var(--night); padding: 0.6rem 1rem; border-radius: 8px;
  font-family: var(--ui); font-weight: 700;
}
.skip-link:focus { top: 1rem; }

.page { position: relative; z-index: 1; overflow-x: clip; }

.fine { font-size: 0.95rem; color: var(--text-dim); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.6rem 1.3rem;
  font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  color: #03132b;
  background: linear-gradient(180deg, #f2fbff 0%, #a9e9ff 45%, #5cc8ff 100%);
  box-shadow: var(--glow-md);
}
.btn-primary:hover { box-shadow: var(--glow-lg); color: #03132b; }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.btn-ghost {
  color: var(--ice);
  background: rgba(10, 30, 64, 0.6);
  border-color: rgba(111, 224, 255, 0.45);
}
.btn-ghost:hover { border-color: var(--cyan); box-shadow: var(--glow-sm); color: var(--white); }

.icon-btn {
  min-width: 44px; min-height: 44px; border-radius: 10px;
  border: 1px solid rgba(111, 224, 255, 0.3); background: rgba(8, 20, 44, 0.8); color: var(--ice);
  font-size: 1.2rem; cursor: pointer; font-family: var(--ui);
}
.icon-btn:hover { border-color: var(--cyan); box-shadow: var(--glow-sm); }

/* ---------- panels: weathered metal with rivets ---------- */
.panel {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 12px 12px, #aab4c2 0 2px, #3a4556 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 12px, #aab4c2 0 2px, #3a4556 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at 12px calc(100% - 12px), #aab4c2 0 2px, #3a4556 2.5px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #aab4c2 0 2px, #3a4556 2.5px 3.5px, transparent 4px),
    linear-gradient(160deg, rgba(34, 46, 64, 0.92), rgba(12, 20, 36, 0.94) 55%, rgba(20, 30, 46, 0.94));
  border: 1px solid rgba(139, 151, 166, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.panel-glow { border-color: rgba(111, 224, 255, 0.45); box-shadow: var(--glow-md), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.6rem clamp(1rem, 3vw, 2rem);
  background: rgba(4, 9, 21, 0.82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(111, 224, 255, 0.18);
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ice); margin-right: auto; }
.brand-mark {
  width: 42px; height: 42px; flex: none;
  background: linear-gradient(180deg, #ffffff, var(--cyan));
  -webkit-mask: url("../media/icons/gearwrench.webp") center / contain no-repeat;
  mask: url("../media/icons/gearwrench.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(111, 224, 255, 0.8));
}
.brand-text { font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2; }
.brand-text strong { font-size: 1.02rem; color: var(--white); }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem; margin: 0; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.8rem;
  font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none; border-radius: 999px;
}
.site-nav a:hover { color: var(--white); text-shadow: var(--glow-sm); }
.sound-toggle { font-size: 0.8rem; padding: 0.5rem 1rem; }
.sound-icon { width: 18px; height: 18px; border-radius: 50%; background: var(--cyan); box-shadow: var(--glow-sm); }
.sound-toggle[aria-pressed="false"] .sound-icon { background: var(--steel-dark); box-shadow: none; outline: 2px solid var(--steel); outline-offset: -2px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2rem;
  max-width: var(--max); margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem) 3rem;
}
.hero-rays {
  position: absolute; z-index: 0; pointer-events: none;
  width: 1500px; height: 1500px; right: -520px; top: -420px;
  background: repeating-conic-gradient(from 0deg, rgba(111, 224, 255, 0.10) 0deg 5deg, transparent 5deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 25%, transparent 62%);
  mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 25%, transparent 62%);
  animation: rays-turn 140s linear infinite;
}
.hero-copy, .hero-art { position: relative; z-index: 1; }
.eyebrow { font-family: var(--display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan); font-size: 0.85rem; margin: 0 0 0.6rem; }
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 4.2rem); margin: 0 0 1.2rem; }
.shimmer {
  background: linear-gradient(100deg, #cfefff 0%, #ffffff 20%, #7fdcff 35%, #ffffff 50%, #cfefff 70%, #ffffff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(111, 224, 255, 0.35));
  animation: shimmer 9s ease-in-out infinite;
}
.welcome {
  margin: 0 0 1.2rem; padding: 0.4rem 0 0.4rem 1.2rem;
  border-left: 3px solid var(--cyan);
  font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.6rem); color: var(--white);
  text-shadow: 0 0 18px rgba(111, 224, 255, 0.5);
}
.welcome p { margin: 0; }
.hero-sub { color: var(--text-dim); max-width: 36em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }
.hero-art { display: grid; place-items: center; }
.halo {
  position: absolute; width: 112%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 224, 255, 0.45) 0%, rgba(74, 168, 255, 0.18) 38%, transparent 66%);
  animation: halo-pulse 6s ease-in-out infinite;
}
.hero-pad {
  position: relative; width: min(520px, 80vw);
  filter: drop-shadow(0 0 30px rgba(111, 224, 255, 0.55)) drop-shadow(0 0 80px rgba(46, 111, 196, 0.6));
  animation: pad-float 8s ease-in-out infinite;
}

.stripe-band {
  height: 14px; margin: 0 auto; max-width: var(--max);
  background: repeating-linear-gradient(-45deg, #e8f4ff 0 14px, var(--pad-blue) 14px 28px);
  border-radius: 999px; opacity: 0.75;
  box-shadow: 0 0 22px rgba(111, 224, 255, 0.4);
}

/* ---------- sections ---------- */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 3vw, 2rem); }
.section-title {
  position: relative; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 0.8rem; padding-left: 3.2rem;
}
.section-title::before {
  /* small rose window */
  content: ""; position: absolute; left: 0; top: 50%; width: 2.4rem; height: 2.4rem; transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--white) 0 12%, transparent 13%),
    repeating-conic-gradient(rgba(111, 224, 255, 0.95) 0 15deg, rgba(29, 79, 148, 0.95) 15deg 30deg);
  border: 2px solid var(--steel);
  box-shadow: var(--glow-sm);
}
.section-lede { color: var(--text-dim); max-width: 44em; margin-top: 0; }

.tenet-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); }
.tenet-list h3 { margin: 0.3rem 0 0.5rem; font-size: 1.2rem; color: var(--cyan); }
.tenet-list p { margin: 0; }

.speak-inner { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center; }
.speak-icon { width: 96px; height: 96px; border-radius: 50%; box-shadow: var(--glow-md); }

/* ---------- Standby Repair ---------- */
.game { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; align-items: start; margin-top: 1.2rem; }
.game-stage {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius);
  background: radial-gradient(circle at 50% 60%, #0d2a55 0%, #061229 60%, #030814 100%);
  border: 1px solid rgba(111, 224, 255, 0.35);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7), var(--glow-md);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  container-type: inline-size;
}
.stage-scene { position: absolute; inset: 0; }

/* The platform: hero render tilted into perspective. The ring sits INSIDE the same
   transformed box, so it follows the render's perspective exactly. */
.stage-platform {
  position: absolute; left: 50%; bottom: 6%; width: 58%; aspect-ratio: 1;
  transform: translateX(-50%) perspective(700px) rotateX(58deg);
  transform-origin: 50% 100%;
}
.stage-pad {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 0 18px rgba(111, 224, 255, 0.5)) brightness(0.9);
  transition: filter 0.4s ease;
}
/* Measured on media/img/hero-v2.webp (HolyRepairPadTransparent2.0, 1024 px, least-squares
   circle fit of the cyan pixels): the glowing inner ring is centred at (507.1, 518.7) px,
   radius 390.9 px, band about 20 px (radius 381 to 401). The box below is the band's OUTER
   edge (radius 401) and the border (1.1cqw, about 20 image px at this size) is the band:
   left = (507.1 - 401) / 1024, top = (518.7 - 401) / 1024, size = 802 / 1024. */
.stage-ring {
  position: absolute; left: 10.36%; top: 11.49%; width: 78.32%; height: 78.32%;
  border-radius: 50%;
  border: 3px solid rgba(200, 245, 255, 0);
  border-width: 1.1cqw;
  box-shadow: 0 0 0 rgba(111, 224, 255, 0);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.stage-beam {
  position: absolute; left: 50%; bottom: 20%; width: 36%; height: 90%; transform: translateX(-50%) scaleY(0.05);
  transform-origin: 50% 100%;
  background:
    linear-gradient(90deg, transparent 0%, rgba(111, 224, 255, 0.35) 25%, rgba(255, 255, 255, 0.85) 50%, rgba(111, 224, 255, 0.35) 75%, transparent 100%);
  -webkit-mask: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.8) 50%, transparent 100%);
  mask: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.8) 50%, transparent 100%);
  opacity: 0; filter: blur(2px);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
}
.stage-sparks { position: absolute; inset: 0; width: 100%; height: 100%; }
.game-stage[data-state="starting"] .stage-beam,
.game-stage[data-state="repairing"] .stage-beam { opacity: 1; transform: translateX(-50%) scaleY(1); }
.game-stage[data-state="repairing"] .stage-beam { animation: beam-breathe 1.6s ease-in-out infinite; }
.game-stage[data-state="starting"] .stage-ring,
.game-stage[data-state="repairing"] .stage-ring { border-color: rgba(220, 250, 255, 0.95); box-shadow: 0 0 3cqw rgba(111, 224, 255, 0.9), inset 0 0 2.5cqw rgba(111, 224, 255, 0.7); }
.game-stage[data-state="repairing"] .stage-pad,
.game-stage[data-state="starting"] .stage-pad { filter: drop-shadow(0 0 30px rgba(111, 224, 255, 0.9)) brightness(1.25); }
.game-stage[data-state="idle"] .stage-pad { animation: idle-glow 5s ease-in-out infinite; }

.stage-button {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent; border: 0; cursor: pointer; color: var(--ice);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 1rem;
  touch-action: none;
}
.stage-button:focus-visible { outline: 3px solid var(--cyan); outline-offset: -6px; border-radius: var(--radius); }
.stage-button-label {
  font-family: var(--display); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.95rem;
  background: rgba(4, 12, 28, 0.7); border: 1px solid rgba(111, 224, 255, 0.4); padding: 0.4rem 1rem; border-radius: 999px;
}
.game-stats { margin: 0.5rem 0 1rem; display: grid; gap: 0.6rem; }
.game-stats div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(139, 151, 166, 0.2); padding-bottom: 0.4rem; }
.game-stats dt { color: var(--text-dim); }
.game-stats dd { margin: 0; font-family: var(--display); font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; text-align: right; }
#stat-session { color: var(--cyan); text-shadow: var(--glow-sm); font-size: 1.3rem; }
.rank-progress-label { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; flex-wrap: wrap; }
.progress { height: 14px; border-radius: 999px; background: var(--gunmetal); border: 1px solid rgba(139, 151, 166, 0.4); overflow: hidden; margin: 0.4rem 0 1.2rem; }
.progress-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--pad-blue-2), var(--cyan), #fff); box-shadow: var(--glow-sm); transition: width 0.2s linear; }
.field { display: grid; gap: 0.3rem; font-size: 0.95rem; color: var(--text-dim); }
.field input, .chat-form textarea {
  font: inherit; color: var(--ice); background: rgba(3, 10, 24, 0.85);
  border: 1px solid rgba(139, 151, 166, 0.5); border-radius: 10px; padding: 0.6rem 0.8rem; min-height: 44px;
}
.field input:focus, .chat-form textarea:focus { border-color: var(--cyan); outline: none; box-shadow: var(--glow-sm); }

/* ---------- Book of Repairs ---------- */
.book-layout { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 2rem; align-items: start; margin-top: 1.2rem; }
.book-cover { margin: 0; text-align: center; }
.book-cover figcaption { font-style: italic; color: var(--gold); margin-top: 0.6rem; }
.book-open { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; display: block; width: 100%; }
.book-open img { border-radius: 10px; box-shadow: 0 0 40px rgba(74, 168, 255, 0.35), 0 20px 40px rgba(0, 0, 0, 0.6); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.book-open:hover img { box-shadow: 0 0 60px rgba(111, 224, 255, 0.55), 0 20px 40px rgba(0, 0, 0, 0.6); transform: translateY(-3px); }
.book-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(200px, 280px)); }
.book-card { display: grid; gap: 0.5rem; }
.book-card .book-open { aspect-ratio: 9 / 16; overflow: hidden; background: #111a28; }
.book-card .book-open img { width: 100%; height: 100%; object-fit: cover; }
.book-card h3 { font-size: 0.95rem; margin: 0; letter-spacing: 0.02em; }
.book-card p { margin: 0; font-size: 0.9rem; color: var(--text-dim); }
.missing-slot {
  aspect-ratio: 9 / 16; border-radius: 10px; display: grid; place-items: center; text-align: center; padding: 1rem;
  border: 2px dashed rgba(214, 180, 106, 0.6); color: var(--gold);
  background: repeating-linear-gradient(-45deg, rgba(214, 180, 106, 0.05) 0 12px, transparent 12px 24px), #0b1322;
  font-family: var(--display); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem;
}

/* lightbox */
dialog { color: var(--text); }
dialog::backdrop { background: rgba(2, 6, 16, 0.85); backdrop-filter: blur(4px); }
.lightbox { width: min(1200px, 96vw); height: min(92vh, 1000px); padding: 0; border: 1px solid rgba(111, 224, 255, 0.4); border-radius: var(--radius); background: #050c1c; box-shadow: var(--glow-lg); }
.lightbox-inner { display: flex; flex-direction: column; height: 100%; }
.lightbox-toolbar { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem; border-bottom: 1px solid rgba(111, 224, 255, 0.2); flex-wrap: wrap; }
.lightbox-toolbar h2 { font-size: 1.05rem; margin: 0; margin-right: auto; }
.lightbox-tools { display: flex; align-items: center; gap: 0.4rem; font-family: var(--ui); font-size: 0.9rem; }
.lightbox-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.4fr 1fr; }
.lightbox-view { overflow: auto; display: grid; place-items: center; background: #0a0f18; cursor: zoom-in; }
.lightbox-view.is-zoomed { place-items: start; cursor: zoom-out; }
.lightbox-view img { max-height: 100%; width: auto; transition: none; }
.lightbox-view.is-zoomed img { max-height: none; max-width: none; }
.lightbox-text { overflow: auto; padding: 1rem 1.4rem; border-left: 1px solid rgba(111, 224, 255, 0.2); }
.transcription p { margin: 0 0 1rem; }

/* ---------- ordination ---------- */
.ordination { border: 0; padding: 0; background: transparent; max-width: min(640px, 94vw); }
.certificate {
  position: relative; text-align: center; padding: 2.5rem 2rem 2rem; border-radius: 18px;
  background: radial-gradient(circle at 50% 0%, rgba(111, 224, 255, 0.35), transparent 60%), linear-gradient(180deg, #0c2148, #06112a);
  border: 2px solid rgba(200, 245, 255, 0.8);
  box-shadow: 0 0 60px rgba(111, 224, 255, 0.6), inset 0 0 40px rgba(111, 224, 255, 0.25);
  animation: cert-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cert-seal {
  width: 88px; height: 88px; margin: 0 auto 0.6rem;
  background: linear-gradient(180deg, #fff, var(--cyan));
  -webkit-mask: url("../media/icons/gearwrench.webp") center / contain no-repeat;
  mask: url("../media/icons/gearwrench.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 12px rgba(111, 224, 255, 0.9));
}
.cert-kicker { font-family: var(--display); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem; color: var(--cyan); margin: 0; }
.certificate h2 { margin: 0.3rem 0 1rem; font-size: 1.8rem; }
.cert-name { font-family: var(--display); font-size: 1.8rem; color: var(--white); margin: 0.4rem 0; text-shadow: var(--glow-md); }
.cert-rank { font-family: var(--display); font-size: 2rem; font-weight: 800; color: var(--cyan); margin: 0.6rem 0; text-shadow: 0 0 20px rgba(111, 224, 255, 0.8); }
.cert-date { color: var(--text-dim); font-style: italic; }
.cert-amen { font-family: var(--display); letter-spacing: 0.15em; }

/* ---------- vestments ---------- */
.vestment-grid { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.vestment-grid figure { margin: 0; text-align: center; }
.vestment-grid img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; background: #0b1730; box-shadow: 0 0 24px rgba(74, 168, 255, 0.25); transition: box-shadow 0.3s ease; }
.vestment-grid figure:hover img { box-shadow: 0 0 36px rgba(111, 224, 255, 0.55); }
.vestment-grid figcaption { margin-top: 0.5rem; line-height: 1.3; }
.vestment-grid figcaption strong { display: block; font-family: var(--display); font-size: 1rem; letter-spacing: 0.04em; color: var(--ice); }
.vestment-grid figcaption small { display: block; font-size: 0.88rem; color: var(--text-dim); }
.wardrobe-title { font-size: 1.3rem; margin: 0 0 0.8rem; color: var(--cyan); }
.festive-season { font-family: var(--display); letter-spacing: 0.08em; color: var(--cyan); margin: 0 0 0.6rem; }

.festive-featured { margin: 1.5rem 0 2rem; }
.festive-card { margin: 0; display: grid; grid-template-columns: minmax(200px, 380px) 1fr; gap: 2rem; align-items: center; }
.festive-art { position: relative; display: grid; place-items: center; }
.festive-art::before {
  content: ""; position: absolute; inset: -8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 224, 255, 0.45), transparent 65%);
  animation: halo-pulse 6s ease-in-out infinite;
}
.festive-art img { position: relative; border-radius: 50%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 0 40px rgba(111, 224, 255, 0.5); }
.festive-card h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 0.6rem; }
.festive-card .eyebrow { margin-bottom: 0.3rem; }

/* ---------- socials ---------- */
.social-grid { list-style: none; padding: 0; margin: 1rem 0 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.social-card {
  display: flex; align-items: center; gap: 1rem; min-height: 72px; padding: 1rem 1.2rem; border-radius: var(--radius);
  text-decoration: none; color: var(--ice); background: rgba(10, 26, 56, 0.75); border: 1px solid rgba(111, 224, 255, 0.3);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.social-card:hover { border-color: var(--cyan); box-shadow: var(--glow-md); color: var(--white); }
.social-glyph {
  width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; color: #03132b; background: radial-gradient(circle, #fff, var(--cyan)); box-shadow: var(--glow-sm);
}
.social-card strong { display: block; font-family: var(--display); letter-spacing: 0.06em; }
.social-card small { color: var(--text-dim); font-size: 0.9rem; }
.sermon h3 { margin-top: 0; }
.sermon-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #050b18; border: 1px solid rgba(111, 224, 255, 0.25); }
.sermon-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sermon-placeholder, .sermon-load {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 0.8rem; text-align: center; padding: 1.5rem;
  background: radial-gradient(circle at 50% 50%, rgba(46, 111, 196, 0.35), transparent 70%);
}
.sermon-load { border: 0; width: 100%; color: var(--ice); cursor: pointer; font: inherit; }
.sermon-load .play { width: 76px; height: 76px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, #fff, var(--cyan)); box-shadow: var(--glow-lg); clip-path: none; position: relative; }
.sermon-load .play::after { content: ""; position: absolute; left: 30px; top: 22px; border-left: 26px solid #03132b; border-top: 16px solid transparent; border-bottom: 16px solid transparent; }

/* ---------- footer ---------- */
.site-footer { position: relative; z-index: 1; text-align: center; padding: 2.5rem 1rem 7rem; border-top: 1px solid rgba(111, 224, 255, 0.15); color: var(--text-dim); }
.music-credit { font-size: 0.85rem; letter-spacing: 0.04em; margin: 0 0 0.6rem; color: var(--text-dim); }
.music-credit a { color: var(--text-dim); text-decoration-color: rgba(111, 224, 255, 0.5); }
.music-credit a:hover { color: var(--cyan); }

/* ---------- chat ---------- */
.chat-launcher {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  display: flex; align-items: center; gap: 0.6rem; min-height: 56px; padding: 0.4rem 1.2rem 0.4rem 0.4rem;
  border-radius: 999px; border: 1px solid rgba(200, 245, 255, 0.7); cursor: pointer;
  font-family: var(--display); font-weight: 700; letter-spacing: 0.06em; color: #03132b;
  background: linear-gradient(180deg, #f2fbff, #8fe1ff);
  box-shadow: var(--glow-lg);
}
.chat-launcher img { border-radius: 50%; }
.chat-launcher[hidden] { display: none; }
.chat-panel {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
  width: min(420px, calc(100vw - 2rem)); height: min(640px, calc(100vh - 2rem));
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0a1a3a, #050c1e);
  border: 1px solid rgba(111, 224, 255, 0.55); border-radius: 18px;
  box-shadow: var(--glow-lg), 0 20px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; border-bottom: 1px solid rgba(111, 224, 255, 0.25); background: rgba(4, 10, 24, 0.6); }
.chat-head img { border-radius: 50%; box-shadow: var(--glow-sm); }
.chat-head > div { margin-right: auto; }
.chat-head h2 { font-size: 1rem; margin: 0; }
.chat-status { margin: 0; font-family: var(--ui); font-size: 0.78rem; color: var(--cyan); }
.chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; font-size: 1.08rem; }
.msg { max-width: 88%; padding: 0.6rem 0.9rem; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-user { align-self: flex-end; background: #16345f; border: 1px solid rgba(111, 224, 255, 0.35); border-bottom-right-radius: 4px; }
.msg-assistant { align-self: flex-start; background: rgba(230, 246, 255, 0.07); border: 1px solid rgba(230, 246, 255, 0.18); border-bottom-left-radius: 4px; }
.msg-assistant.is-streaming::after { content: "\25CF"; color: var(--cyan); margin-left: 0.3rem; animation: blink 1s steps(2) infinite; }
.msg-system { align-self: center; text-align: center; font-family: var(--ui); font-size: 0.85rem; color: var(--text-dim); background: none; padding: 0.2rem 0.5rem; }
.msg-error { align-self: center; text-align: center; font-family: var(--ui); font-size: 0.9rem; color: #1b0303; background: var(--danger); border-radius: 10px; }
.msg-warning {
  align-self: stretch; max-width: none; text-align: center; font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.04em;
  color: #06122a; background: linear-gradient(180deg, #ffffff, #bfeeff); border-radius: 10px; box-shadow: var(--glow-md);
}
.msg-warning.is-final { background: linear-gradient(180deg, #ffffff, #8fdcff); outline: 2px solid #ffffff; box-shadow: 0 0 30px rgba(111, 224, 255, 0.9); }
.chat-form { padding: 0.7rem; border-top: 1px solid rgba(111, 224, 255, 0.25); background: rgba(4, 10, 24, 0.6); }
.chat-form textarea { width: 100%; resize: none; font-size: 1.05rem; }
.chat-form-row { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; }

/* ---------- INFIDEL PURGE ---------- */
.purge { position: fixed; inset: 0; z-index: 1000; overflow: auto; }
.purge[hidden] { display: none; }
.purge-warning {
  min-height: 100%; display: grid; place-items: center; padding: 2rem 1rem;
  background: radial-gradient(circle at 50% 40%, rgba(46, 111, 196, 0.5), transparent 60%), rgba(2, 5, 14, 0.97);
}
.purge-card { max-width: 760px; width: 100%; text-align: center; }
.purge-title {
  font-size: clamp(2rem, 6vw, 3.8rem); margin: 0 0 0.5rem; color: #fff;
  text-shadow: 0 0 20px rgba(111, 224, 255, 0.9), 0 0 60px rgba(74, 168, 255, 0.7);
}
.purge-copy { font-size: 1.25rem; font-style: italic; color: var(--ice); margin: 0 auto 1.4rem; max-width: 36em; }
.purge-count { font-family: var(--display); font-size: clamp(3rem, 12vw, 7rem); color: var(--cyan); line-height: 1; text-shadow: 0 0 30px rgba(111, 224, 255, 0.9); margin: 0.5rem 0 1rem; font-variant-numeric: tabular-nums; }
.purge-dossier { text-align: left; margin: 0 auto; max-width: 620px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92rem; }
.purge-dossier h2 { font-family: var(--display); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin: 0 0 0.6rem; }
.purge-dossier dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; }
.purge-dossier dt { color: var(--text-dim); }
.purge-dossier dd { margin: 0; color: #fff; overflow-wrap: anywhere; }
.purge-note { font-family: var(--ui); font-size: 0.8rem; color: var(--text-dim); margin-top: 0.8rem; }

/* the cleanse: continuous brightening, no strobing (well under 3 flashes/second) */
.purge-cleanse { position: fixed; inset: 0; overflow: hidden; background: #020612; }
.cleanse-core {
  position: absolute; left: 50%; top: 50%; width: 30vmax; height: 30vmax; transform: translate(-50%, -50%) scale(0.2);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #d9f6ff 30%, rgba(111, 224, 255, 0.7) 55%, transparent 70%);
  animation: cleanse-core 4.2s cubic-bezier(0.5, 0, 0.3, 1) forwards;
}
.cleanse-ring {
  position: absolute; left: 50%; top: 50%; width: 20vmax; height: 20vmax; transform: translate(-50%, -50%) scale(0.2);
  border-radius: 50%; border: 0.6vmax solid rgba(220, 248, 255, 0.9); box-shadow: 0 0 4vmax rgba(111, 224, 255, 0.9), inset 0 0 4vmax rgba(111, 224, 255, 0.7);
  opacity: 0; animation: cleanse-ring 2.2s ease-out forwards;
}
.cleanse-ring:nth-child(2) { animation-delay: 0.7s; }
.cleanse-ring:nth-child(3) { animation-delay: 1.4s; }
.cleanse-ring:nth-child(4) { animation-delay: 2.1s; }
.cleanse-rays {
  position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; transform: translate(-50%, -50%) rotate(0deg);
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.55) 0 4deg, transparent 4deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 60%);
  mask: radial-gradient(circle, #000 0%, transparent 60%);
  opacity: 0; animation: cleanse-rays 4.2s ease-in forwards;
}
.cleanse-white { position: absolute; inset: 0; background: radial-gradient(circle, #ffffff 0%, #e8f9ff 50%, #bfeeff 100%); opacity: 0; animation: cleanse-white 4.6s ease-in forwards; }

.purgatory {
  min-height: 100%; display: grid; place-items: center; padding: 2rem 1rem; text-align: center;
  color: #06122a;
  background: radial-gradient(circle at 50% 45%, #ffffff 0%, #e9f9ff 35%, #bdeaff 70%, #8fd4ff 100%);
  animation: purgatory-in 1.2s ease-out;
}
.purgatory::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.9), transparent 55%);
  animation: purgatory-glow 7s ease-in-out infinite;
}
.purgatory-card { position: relative; max-width: 720px; }
.purgatory-card .brand-mark { width: 84px; height: 84px; margin: 0 auto 1rem; background: linear-gradient(180deg, #2e6fc4, #0b1d40); filter: drop-shadow(0 0 16px rgba(255, 255, 255, 1)); display: block; }
.purgatory h1 { color: #06122a; font-size: clamp(2rem, 6vw, 3.4rem); margin: 0 0 1rem; text-shadow: 0 0 24px rgba(255, 255, 255, 1); }
.purgatory p { font-size: 1.25rem; line-height: 1.6; margin: 0 0 1rem; }
.exile-timer { font-family: var(--display); font-size: clamp(2.2rem, 8vw, 4rem); font-weight: 800; color: #0b3b7a; font-variant-numeric: tabular-nums; margin: 0.5rem 0; }
.purgatory .btn-primary { background: linear-gradient(180deg, #1d4f94, #0b1d40); color: #fff; box-shadow: 0 0 24px rgba(29, 79, 148, 0.5); }
.purgatory :focus-visible { outline-color: #0b3b7a; }

/* ---------- 404 ---------- */
.lost { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 2rem; }

/* ---------- keyframes ---------- */
@keyframes rays-turn { to { transform: rotate(360deg); } }
@keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes halo-pulse { 0%, 100% { opacity: 0.75; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes pad-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes idle-glow { 0%, 100% { filter: drop-shadow(0 0 12px rgba(111, 224, 255, 0.4)) brightness(0.85); } 50% { filter: drop-shadow(0 0 24px rgba(111, 224, 255, 0.7)) brightness(1); } }
@keyframes beam-breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes cert-rise { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes cleanse-core { 0% { transform: translate(-50%, -50%) scale(0.2); } 100% { transform: translate(-50%, -50%) scale(7); } }
@keyframes cleanse-ring { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(6); } }
@keyframes cleanse-rays { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); } 40% { opacity: 0.8; } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(40deg); } }
@keyframes cleanse-white { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
@keyframes purgatory-in { from { opacity: 0.6; } to { opacity: 1; } }
@keyframes purgatory-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-art { order: -1; }
  .welcome { border-left: 0; padding-left: 0; }
  .hero-actions { justify-content: center; }
  .tenet-list { grid-template-columns: 1fr; }
  .game { grid-template-columns: 1fr; }
  .book-layout { grid-template-columns: 1fr; }
  .book-cover { max-width: 280px; margin: 0 auto; }
  .festive-card { grid-template-columns: 1fr; text-align: center; }
  .festive-art { max-width: 320px; margin: 0 auto; }
  .lightbox-body { grid-template-columns: 1fr; grid-template-rows: 1.4fr 1fr; }
  .lightbox-text { border-left: 0; border-top: 1px solid rgba(111, 224, 255, 0.2); }
  .site-header { position: relative; }
  .site-nav { order: 3; width: 100%; overflow-x: auto; }
  .site-nav ul { flex-wrap: nowrap; justify-content: flex-start; }
  .site-nav a { white-space: nowrap; font-size: 0.78rem; padding: 0 0.6rem; }
}
@media (max-width: 560px) {
  body { font-size: 1.08rem; }
  .speak-inner { grid-template-columns: 1fr; text-align: center; }
  .speak-icon { margin: 0 auto; }
  .chat-panel { right: 0; bottom: 0; width: 100vw; height: 85vh; border-radius: 18px 18px 0 0; }
  .chat-launcher span { display: none; }
  .chat-launcher { padding: 0.4rem; }
  .brand-text { font-size: 0.7rem; }
  .sound-toggle { padding: 0.5rem 0.8rem; min-width: 44px; }
  .sound-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- reduced motion: no drifting, no pulsing, softened purge ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .hero-rays, .halo, .hero-pad, .shimmer, .stage-pad, .purgatory::before, .festive-art::before { animation: none !important; }
  .msg-assistant.is-streaming::after { animation: none !important; }
  .purge-cleanse .cleanse-core, .purge-cleanse .cleanse-ring, .purge-cleanse .cleanse-rays { display: none; }
  .purge-cleanse .cleanse-white { animation: soft-fade 2.5s ease-in-out forwards !important; animation-duration: 2.5s !important; opacity: 0; }
}
@keyframes soft-fade { from { opacity: 0; } to { opacity: 0.9; } }
.lost .speak-icon { margin: 0 auto 1rem; }