:root{
  --bg:#0a0a0a;            /* deep matte black */
  --ox:#3a0b10;            /* oxblood */
  --ox-deep:#2a0206;       /* deeper oxblood */
  --gold:#e0c183;          /* soft gold */
  --text:#f3f0e9;          /* bone */
  --muted:#c8bdac;         /* muted */
}
body.day{ --bg:#0b0b0b; --ox:#5a1a1f; --ox-deep:#3a0b10; --gold:#e6cc8f }
body.night{ --bg:#070707; --ox:#3a0b10; --ox-deep:#2a0206; --gold:#e0c183 }

html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0; color:var(--text);
  font-family:"Cormorant Garamond", Garamond, "Palatino Linotype", serif;

  /* --- Cross‑browser fallback (iOS Chrome/Safari) --- */
  background:
    radial-gradient(1100px 700px at 50% 28%, rgba(58,11,16,0.58), transparent 60%),
    radial-gradient(1200px 900px at 18% 85%, rgba(42, 2, 6,0.40), transparent 70%),
    radial-gradient(900px 600px  at 72% 78%, rgba(224,193,131,0.18), transparent 65%),
    var(--bg);

  /* --- Preferred rich blend for modern engines (Android/desktop Chrome/Edge/Firefox) --- */
  background:
    radial-gradient(1100px 700px at 50% 28%, color-mix(in oklab, var(--ox) 58%, transparent), transparent 60%),
    radial-gradient(1200px 900px at 18% 85%, color-mix(in oklab, var(--ox-deep) 40%, transparent), transparent 70%),
    radial-gradient(900px 600px  at 72% 78%, color-mix(in oklab, var(--gold) 18%, transparent), transparent 65%),
    var(--bg);

  transition: background 900ms ease;
}

.wrap{ max-width:1120px; margin:0 auto; padding:22px 18px 68px; min-height:100vh; display:flex; flex-direction:column; justify-content:flex-start }

/* =====================
   HERO (HOME)
===================== */
h1.brand{
  font-family:"Cinzel", serif; letter-spacing:.22em; text-align:center; margin:8px 0 6px;
  font-size:clamp(40px,6vw,64px); text-shadow:0 0 14px rgba(224,193,131,.28);
  animation:breatheHero 7s ease-in-out infinite alternate, glowPulse 7s ease-in-out infinite alternate
}
.strap{ text-align:center; font:12px/1.4 ui-sans-serif, system-ui; letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }
.statement{ text-align:center; font-size:16px; line-height:1.5; margin:10px auto 8px; color:var(--muted) }
.beta{ text-align:center; font:11px/1 ui-sans-serif, system-ui; letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }

/* =====================
   HOME GRID (2 cols)
===================== */
.grid{ display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:14px }
.tile{
  border:1px solid rgba(224,193,131,.42); border-radius:18px; padding:14px 16px; background:rgba(255,255,255,.03);
  box-shadow:0 0 18px rgba(224,193,131,.15); text-align:left; cursor:pointer;
  animation: tilebreath 9s ease-in-out infinite alternate, glowPulse 9s ease-in-out infinite alternate; will-change:transform;
  text-decoration:none; color:var(--text);
  /* Pill text containment & wrapping (device-safe) */
  overflow:hidden; padding-right:20px; transform-origin:center;
}
.tile:hover{ box-shadow:0 0 26px rgba(224,193,131,.28) }
.tile .name{
  font-family:"Cinzel", serif; font-size:18px; letter-spacing:.08em; margin:0 0 6px;
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto; text-rendering:optimizeLegibility
}
.tile .desc{ font-size:14px; color:var(--muted); margin:0 }
@media (max-width:430px){ .tile .name{ letter-spacing:.05em; font-size:17px; line-height:1.15 }}

/* =====================
   TOP CHROME + DOCK
===================== */
.chrome{ position:fixed; top:12px; right:18px; display:none; gap:10px; z-index:50 }
.chip{ border:1px solid rgba(224,193,131,.35); background:rgba(255,255,255,.03); color:var(--text);
  padding:6px 12px; border-radius:999px; letter-spacing:.18em; text-transform:uppercase;
  font:10px/1 ui-sans-serif, system-ui; cursor:pointer }
.chip:hover{ box-shadow:0 0 18px rgba(224,193,131,.22) }

.dock{ position:fixed; left:18px; right:18px; bottom:16px; display:flex; justify-content:space-between; align-items:flex-end; z-index:60 }
.contact{ position:absolute; bottom:38px; left:0; border:1px solid rgba(224,193,131,.3); background:rgba(15,15,15,.9);
  border-radius:14px; padding:10px 12px; min-width:260px; display:none; z-index:61 }
.contact.open{ display:block }
.contact .desk{ font:11px/1 ui-sans-serif; letter-spacing:.18em; text-transform:uppercase; margin-bottom:4px }
.contact .note{ font:11px/1.4 ui-sans-serif; color:var(--muted) }

/* Cathedral panel (legacy card) */
.cathedral{ position:absolute; bottom:38px; right:0; border:1px solid rgba(224,193,131,.3); background:rgba(15,15,15,.9);
  border-radius:14px; padding:14px 16px; min-width:320px; max-width:560px; display:none;
  box-shadow:0 0 22px rgba(224,193,131,.18); animation:pillbreath 10s ease-in-out infinite alternate, glowPulse 10s ease-in-out infinite alternate; z-index:61 }
.cathedral.open{ display:block }
.cathedral .title{ font-family:"Cinzel", serif; letter-spacing:.12em; font-size:14px; text-transform:uppercase; color:var(--gold); margin:0 0 8px; text-align:center }
.cathedral p{ margin:6px 0; color:var(--muted); text-align:center; font-size:14px }
.cathedral ul{ margin:8px 0 0 18px; font-size:14px }
.cathedral .fine{ font:10px/1.2 ui-sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:8px }

/* =====================
   INNER PAGES
===================== */
.backbar{ position:fixed; top:12px; left:18px; display:none; align-items:center; gap:10px; z-index:50 }
.back{ font-family:"Cinzel", serif; letter-spacing:.18em; font-size:12px; color:var(--text); text-decoration:none;
  animation:breatheBrand 6.5s ease-in-out infinite alternate, glowPulse 6.5s ease-in-out infinite alternate }
.section-title{ font-family:"Cinzel", serif; font-size:28px; letter-spacing:.1em; margin:44px 0 16px; text-align:center }

/* Inner content grids */
.pillgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; align-items:start }
.pill{ border:1px solid rgba(224,193,131,.42); border-radius:18px; padding:16px; background:rgba(255,255,255,.02);
  box-shadow:0 0 18px rgba(224,193,131,.15); animation:pillbreath 10s ease-in-out infinite alternate, glowPulse 10s ease-in-out infinite alternate }
.pill h4{ font-family:"Cinzel", serif; font-size:22px; text-align:center; margin:0 0 8px }
.pill p{ margin:0 0 8px; color:var(--muted); text-align:center }
.pillar-blurb{ text-align:center; color:var(--muted); font-size:16px; line-height:1.5; margin:0 0 16px }
.pill ul{ margin:6px 0 0 20px }
.subhead{ font-family:"Cinzel", serif; font-size:28px; text-align:center; margin:14px 0 8px }

/* =====================
   ANIMATIONS
===================== */
@keyframes breatheHero{0%{transform:scale(1)}100%{transform:scale(1.06)}}
@keyframes tilebreath{0%{transform:scale(1)}100%{transform:scale(1.038)}}
@keyframes pillbreath{0%{transform:scale(1)}100%{transform:scale(1.035)}}
@keyframes glowPulse{0%{filter:drop-shadow(0 0 4px rgba(224,193,131,.15))}100%{filter:drop-shadow(0 0 14px rgba(224,193,131,.35))}}
@keyframes breatheBrand{0%{transform:scale(1)}100%{transform:scale(1.045)}}

/* One-frame landing (no scroll) */
body[data-route="/"]{ overflow:hidden }
/* Fullscreen scrim for overlays */
.scrim{ position:fixed; inset:0; background:rgba(10,10,10,.62); backdrop-filter:blur(2px); display:none; z-index:40 }
.scrim.open{ display:block }
/* Cathedral full-page paper */
.paper{ max-width:900px; margin:0 auto; padding:8px 6px 40px }
.paper h2{ font-family:"Cinzel", serif; font-size:28px; letter-spacing:.1em; text-align:center; margin:12px 0 8px }
.paper h3{ font-family:"Cinzel", serif; font-size:22px; letter-spacing:.06em; margin:18px 0 8px; text-align:center }
.paper p{ color:var(--muted); line-height:1.6; text-align:center; margin:6px 0 }
.paper .divider{ height:1px; background:linear-gradient(90deg, transparent, rgba(224,193,131,.35), transparent); margin:16px 0 }
.paper .twocol{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; align-items:start }

/* Link & list normalization (prevents blue links/heavy bullets on fallback) */
a{ color:var(--gold); text-decoration:none }
a:hover{ text-decoration:underline }
ul{ list-style:none; padding-left:0; margin-left:0 }
ul li{ position:relative; padding-left:1.1em }
ul li::before{ content:"•"; position:absolute; left:0; top:0; color:var(--gold) }