/* Seraph By The River: the one stylesheet. Velvet: deep plum and antique gold, arched windows, candle glow, moon and stars.
   Every color is a token in the first two blocks (night, then day). Fonts are self-hosted (SIL Open Font License; each family's licence file, OFL.txt, sits beside its font files in assets/fonts). */

@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/young-serif/young-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/figtree/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/figtree/figtree-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg: #170E1B;          /* velvet night */
  --panel: #231428;
  --soft: #2C1832;
  --ink: #F3E8D8;        /* candle cream */
  --muted: #CDB9C9;
  --head: #F1D595;       /* gold leaf, headings */
  --accent: #E8BA6C;     /* links, icons, rules */
  --herb: #A9CBA4;       /* small labels */
  --line: #5B3D63;
  --btn: #E8BA6C;
  --btn-ink: #1E0F22;
  --focus: #8EC9FF;
  --gold: #E8BA6C; --plum: #5B2A6B; --amethyst: #9A74D9; --moon: #F6EBD2;
  --leaf: #7FAF86; --wax: #EADBC0; --flame: #FFC76A; --night: #1B0F2E; --night2: #4A2352; --wood: #8A6248;
  --glow1: #E8BA6C2B; --glow2: #9A74D926;
  --shadow: 0 1px 2px #00000080, 0 10px 28px #00000059;
  --display-font: "Young Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body-font: "Figtree", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --display-weight: 400; --body-size: 1.0625rem; --lede-size: 1.25rem; --wordmark-size: 1.3rem;
  --h1-size: clamp(2.3rem, 8vw, 4rem); --h2-size: clamp(1.6rem, 5.2vw, 2.3rem); --h3-size: 1.1rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #F5ECDD;        /* vellum by candlelight */
    --panel: #FFF9EC;
    --soft: #EADBC6;
    --ink: #2A1530;
    --muted: #5C4760;
    --head: #5A1E3B;      /* wine */
    --accent: #8A2B50;
    --herb: #3F6A4C;
    --line: #CDB89B;
    --btn: #5A1E3B;
    --btn-ink: #FFF4DC;
    --focus: #1F5FA8;
    --gold: #B8862B; --plum: #6E3C7E; --amethyst: #7A58B8; --moon: #FFF6DD;
    --leaf: #4F7C5A; --wax: #F4E8CF; --flame: #F2A93B; --night: #2A1840; --night2: #5E2F66; --wood: #7A5640;
    --glow1: #B8862B26; --glow2: #7A58B81F;
    --shadow: 0 1px 2px #2a15301f, 0 8px 22px #2a153017;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body-font); font-size: var(--body-size); line-height: 1.65;
  background-image: radial-gradient(60rem 26rem at 50% -6rem, var(--glow1), transparent 72%), radial-gradient(34rem 26rem at 105% 34rem, var(--glow2), transparent 70%);
  background-repeat: no-repeat;
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; /* short pages keep the footer at the bottom */
}

h1, h2, h3 { font-family: var(--display-font); font-weight: var(--display-weight); line-height: 1.15; margin: 0; color: var(--head); text-wrap: balance; }
h1 { font-size: var(--h1-size); letter-spacing: -0.005em; line-height: 1.08; }
h2 { font-size: var(--h2-size); margin-bottom: 0.6rem; }
h3 { font-size: var(--h3-size); margin-bottom: 0.3rem; }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.2rem; }
address { font-style: normal; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.16em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
main:focus, main:focus-visible { outline: none; } /* the skip link's landing spot, not a control */
svg { max-width: 100%; }

.skip-link { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 30; padding: 0.6rem 1rem; background: var(--panel); color: var(--ink); border: 2px solid var(--focus); border-radius: 6px; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 70rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .wrap { padding: 0 2rem; } }

.site-banner { background: var(--soft); border-bottom: 1px solid var(--line); padding: 0.6rem 0; text-align: center; }
.site-banner p { margin: 0; }

/* Header: a gold hairline underneath */
.site-header { position: relative; background: transparent; }
.site-header::after { content: ""; display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent); opacity: 0.7; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-top: 0.5rem; padding-bottom: 0.35rem; }
.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; font-family: var(--display-font); color: var(--head); text-decoration: none; font-size: var(--wordmark-size); }
.wordmark .mark { width: 1.5rem; height: 1.5rem; color: var(--accent); flex: none; }
.nav { display: flex; flex-wrap: wrap; gap: 0 0.25rem; margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.7rem; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; font-weight: 700; }
.nav a:hover { border-bottom-color: var(--line); }
.nav a[aria-current="page"] { border-bottom-color: var(--accent); }
@media (max-width: 30rem) { .nav { gap: 0; margin-left: -0.45rem; } .nav a { padding: 0 0.45rem; letter-spacing: 0.03em; font-size: 0.76rem; } }

/* Sections */
main { display: block; flex: 1 0 auto; }
.section { padding: 2.75rem 0; position: relative; }
.section.band { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lede { font-size: var(--lede-size); max-width: 40rem; color: var(--muted); }
h1 + .lede { margin-top: 0.8rem; }
.eyebrow { color: var(--herb); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 0.6rem; }

.hero { padding: 2.25rem 0 2.5rem; position: relative; overflow: hidden; }
.hero .wrap { display: grid; gap: 2.5rem; position: relative; }
.hero-art { width: 100%; max-width: 26rem; margin: 0 auto; filter: drop-shadow(0 18px 36px var(--glow1)); }
.hero-art svg { display: block; width: 100%; height: auto; }
@media (min-width: 52rem) { .hero { padding: 3.5rem 0 4rem; } .hero .wrap { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 3.5rem; } }
/* Stars sprinkled behind the hero copy */
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: 0.55; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 18%, var(--moon), transparent 80%), radial-gradient(1px 1px at 22% 64%, var(--moon), transparent 80%),
    radial-gradient(1.5px 1.5px at 41% 12%, var(--gold), transparent 80%), radial-gradient(1px 1px at 55% 78%, var(--moon), transparent 80%),
    radial-gradient(1.5px 1.5px at 72% 22%, var(--moon), transparent 80%), radial-gradient(1px 1px at 88% 58%, var(--gold), transparent 80%),
    radial-gradient(1px 1px at 93% 12%, var(--moon), transparent 80%), radial-gradient(1.5px 1.5px at 33% 90%, var(--gold), transparent 80%);
}

.split { display: grid; gap: 1.75rem; }
@media (min-width: 48rem) { .split { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; } .split.top { align-items: start; } }
.pair-art, .scene-art { width: 100%; max-width: 30rem; margin: 0 auto; }
.scene-art { max-width: 20rem; }
.pair-art svg, .scene-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 22px var(--glow1)); }

/* Cards: arched windows with a thin inner frame */
.cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); list-style: none; padding: 0; margin: 1.25rem 0; }
.card { position: relative; background: var(--panel); border: 1px solid var(--line); padding: 1.7rem 1rem 1.2rem; box-shadow: var(--shadow); text-align: center; border-radius: 6.5rem 6.5rem 14px 14px; }
.card::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--line); border-radius: 6.1rem 6.1rem 10px 10px; pointer-events: none; }
.card .ico { display: block; width: 2.2rem; height: 2.2rem; margin: 0 auto 0.55rem; color: var(--accent); }
.card h3 { margin: 0; font-size: 1.05rem; }
@media (max-width: 36rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .card { border-radius: 4.6rem 4.6rem 12px 12px; padding: 1.4rem 0.6rem 1rem; }
  .card::before { border-radius: 4.3rem 4.3rem 8px 8px; }
  .card h3 { font-size: 0.98rem; }
}
.panel { position: relative; background: var(--panel); border: 1px solid var(--line); padding: 1.3rem 1.4rem; box-shadow: var(--shadow); border-radius: 14px; }
.panel::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--line); border-radius: 10px; pointer-events: none; }
.panel > :last-child { margin-bottom: 0; }
.address-line { font-size: 1.15rem; }

/* Buttons: small caps, gold edge */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.35rem 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.6rem 1.4rem; border: 2px solid var(--btn); border-radius: 3px; background: var(--btn); color: var(--btn-ink); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.btn:hover { text-decoration: underline; }
.btn.secondary { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn.big { min-height: 56px; font-size: 1.05rem; padding: 0.7rem 1.7rem; }

/* Hours */
.hours-table { width: 100%; max-width: 26rem; border-collapse: collapse; margin: 0.5rem 0 1rem; }
.hours-table th, .hours-table td { text-align: left; padding: 0.5rem 0.25rem; border-bottom: 1px solid var(--line); font-weight: 400; }
.hours-table th { font-weight: 700; }
.hours-table tr[aria-current="date"] th, .hours-table tr[aria-current="date"] td { background: var(--soft); font-weight: 700; }
.call-hours { font-size: 1.25rem; margin-bottom: 0.5rem; }
.open-now { display: inline-block; margin: 0 0 1rem; padding: 0.25rem 0.85rem; border: 2px solid var(--herb); border-radius: 3px; color: var(--herb); font-weight: 700; }
.open-now[hidden] { display: none; }
.notice { border-left: 4px solid var(--accent); background: var(--soft); padding: 0.7rem 1rem; margin: 0 0 1rem; border-radius: 0 6px 6px 0; }
.notice p { margin: 0; }
.hours-short { margin-top: 1rem; }

/* Divider: a row of moon phases (a mask, so it takes the accent color) */
.divider {
  display: block; width: 100%; max-width: 14rem; height: 1.5rem; margin: 0 0 1.25rem; background: var(--accent); opacity: 0.9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cpath d='M56 4A8 8 0 0 0 56 20A12 12 0 0 1 56 4Z M78 4a8 8 0 0 0 0 16z M122 4a8 8 0 0 1 0 16z M144 4A8 8 0 0 1 144 20A12 12 0 0 0 144 4Z'/%3E%3Ccircle cx='100' cy='12' r='8'/%3E%3Cpath d='M4 12H40M160 12H196' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cpath d='M56 4A8 8 0 0 0 56 20A12 12 0 0 1 56 4Z M78 4a8 8 0 0 0 0 16z M122 4a8 8 0 0 1 0 16z M144 4A8 8 0 0 1 144 20A12 12 0 0 0 144 4Z'/%3E%3Ccircle cx='100' cy='12' r='8'/%3E%3Cpath d='M4 12H40M160 12H196' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Footer */
.site-footer { margin-top: 2rem; padding: 2.25rem 0; background: var(--soft); border-top: 1px solid var(--line); font-size: 0.97rem; }
.site-footer .wrap { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } }
.site-footer p { margin: 0 0 0.3rem; }

/* Colors for the drawings: the SVGs only carry class names, the tokens above supply the colors */
.f-gold { fill: var(--gold); } .f-plum { fill: var(--plum); } .f-amethyst { fill: var(--amethyst); } .f-moon { fill: var(--moon); }
.f-leaf { fill: var(--leaf); } .f-wax { fill: var(--wax); } .f-flame { fill: var(--flame); } .f-night { fill: var(--night); } .f-night2 { fill: var(--night2); }
.s-gold { stroke: var(--gold); } .s-ink { stroke: var(--ink); } .s-night { stroke: var(--night); } .s-moon { stroke: var(--moon); } .s-wood { stroke: var(--wood); }
.st-night { stop-color: var(--night); } .st-night2 { stop-color: var(--night2); } .st-flame { stop-color: var(--flame); }
.lines { fill: none; stroke-linecap: round; stroke-linejoin: round; }

@media (forced-colors: active) {
  .btn, .card, .panel { border: 2px solid CanvasText; }
}

/* Motion: candle flames flicker and stars twinkle. Off when the visitor asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 3.4s ease-in-out infinite; }
  .flame.f2 { animation-duration: 4.1s; animation-delay: -1.2s; }
  .flame.f3 { animation-duration: 2.9s; animation-delay: -2.1s; }
  .halo { animation: halo 3.6s ease-in-out infinite; }
  .twinkle { animation: twinkle 4.5s ease-in-out infinite; }
  .twinkle.t2 { animation-delay: -1.5s; animation-duration: 5.5s; }
  .twinkle.t3 { animation-delay: -3s; animation-duration: 3.8s; }
}
@keyframes flicker { 0%, 100% { transform: scale(1, 1) rotate(0deg); } 20% { transform: scale(0.96, 1.06) rotate(-1.5deg); } 45% { transform: scale(1.03, 0.95) rotate(1deg); } 70% { transform: scale(0.97, 1.04) rotate(-0.5deg); } }
@keyframes halo { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print { .skip-link, .nav, .hero-art, .pair-art, .scene-art { display: none; } }