/* Instadelic base stylesheet.
   Prefer `npm run build:css` (Tailwind). This file is committed so the site
   is not unstyled if Tailwind has not been built yet. */

:root {
  --color-bg: #0b0b0c;
  --color-ink: #f4f0e8;
  --color-accent: #c4a35a;
  --color-navy: #1b2a4a;
}

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-accent); }

button {
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.plane-control { min-height: 100vh; background: var(--color-bg); color: var(--color-ink); }

.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.inline { display: inline; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-y-4 > * + * { margin-top: 1rem; }

.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-2 { margin-top: 0.5rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }

.max-w-sm { max-width: 24rem; }
.max-w-3xl { max-width: 48rem; }

.border { border: 1px solid var(--color-accent); }
.border-b { border-bottom: 1px solid rgba(196, 163, 90, 0.3); }
.border-gold { border-color: var(--color-accent); }

.text-gold { color: var(--color-accent); }
.text-sm { font-size: 0.875rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; line-height: 1.3; }
.text-4xl { font-size: 2.25rem; line-height: 1.2; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.tracking-widest { letter-spacing: 0.2em; }
.underline { text-decoration: underline; }
.opacity-80 { opacity: 0.8; }

.prose { max-width: 42rem; }
.aspect-video { aspect-ratio: 16 / 9; }

input, textarea, select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: #161618;
  color: var(--color-ink);
  border: 1px solid rgba(196, 163, 90, 0.35);
  border-radius: 2px;
}


.dash-body { min-height: 100vh; }
.dash-layout { display: flex; min-height: 100vh; }
.dash-side {
  width: 15rem;
  padding: 1.5rem 1.25rem;
  border-right: 1px solid rgba(196,163,90,.25);
  background: #101012;
}
.dash-brand { display: block; letter-spacing: .2em; color: #c4a35a; font-size: .8rem; font-weight: 600; }
.dash-site { margin: .75rem 0 1.5rem; opacity: .75; font-size: .9rem; }
.dash-nav { display: flex; flex-direction: column; gap: .35rem; }
.dash-nav a { padding: .35rem 0; opacity: .85; }
.dash-nav a:hover { color: #c4a35a; }
.dash-logout { margin-top: 2rem; }
.dash-main { flex: 1; padding: 2.5rem 2rem; max-width: 56rem; }
.dash-messages { margin-bottom: 1.5rem; opacity: .85; }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.dash-card { border: 1px solid rgba(196,163,90,.3); padding: 1.25rem; }
.mt-2 { margin-top: .5rem; }
.mb-6 { margin-bottom: 1.5rem; }

.btn {
  display: inline-block;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  padding: 0.5rem 1rem;
  background: transparent;
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.04em;
}
.btn:hover { background: rgba(196, 163, 90, 0.12); color: var(--color-accent); }


[data-pack="parish"] {
  --color-bg: #f4ead4;
  --color-ink: #1b2a4a;
  --color-accent: #8b6914;
  --color-panel: #fff8ea;
  --font-display: "Palatino Linotype", Palatino, "Times New Roman", serif;
}
[data-pack="stage"] {
  --color-bg: #09090b;
  --color-ink: #f4f0e8;
  --color-accent: #c4a35a;
  --color-panel: #141416;
  --font-display: ui-sans-serif, system-ui, sans-serif;
}
[data-pack="sanctuary"] {
  --color-bg: #fbfbf8; --color-ink: #1a1a1a; --color-accent: #2c5f5d; --color-panel: #fff;
  --font-display: ui-sans-serif, system-ui, sans-serif;
}
[data-pack="session"] {
  --color-bg: #f3efe6; --color-ink: #222; --color-accent: #6b3f3f; --color-panel: #fff;
  --font-display: Georgia, serif;
}

.pub-body {
  background: var(--color-bg);
  color: var(--color-ink);
  min-height: 100vh;
  margin: 0;
}
.pub-body img,
.pub-body video { max-width: 100%; height: auto; display: block; }
.pub-body iframe { max-width: 100%; }
.aspect-video { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.aspect-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pub-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.25rem;
}
.pub-brand { min-width: 0; }
.pub-kicker {
  margin: 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--color-accent);
}
.pub-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-ink);
  word-break: break-word;
}
.pub-name:hover { color: var(--color-accent); }
.nav-toggle-btn {
  display: none;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}
.pub-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.pub-nav a { color: var(--color-ink); opacity: 0.85; }
.pub-nav a:hover { color: var(--color-accent); opacity: 1; }

.pub-main { padding: 0 1.25rem 3rem; }
.pub-content { max-width: 42rem; }
.pub-hero { padding: 2rem 0 1.5rem; }
.pub-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 4rem);
  line-height: 1.05;
  margin: 0.35rem 0 0;
  word-break: break-word;
}
.pub-page-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  margin: 1.5rem 0 1rem;
}
.pub-block { margin: 1.25rem 0; }
.pub-block h2, .pub-block h3 { font-family: var(--font-display); line-height: 1.2; }
.pub-empty { opacity: 0.75; }
.pub-footer {
  padding: 1.5rem 1.25rem 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.prose { max-width: 42rem; }

[data-pack="parish"] .pub-header {
  background: #1b2a4a;
  color: #f4ead4;
}
[data-pack="parish"] .pub-name,
[data-pack="parish"] .pub-nav a { color: #f4ead4; }
[data-pack="parish"] .pub-kicker { color: #c4a35a; }
[data-pack="parish"] .pub-hero {
  border-bottom: 1px solid #d9c89a;
  margin-bottom: 1.5rem;
}
[data-pack="parish"] .pub-content { background: var(--color-panel); padding: 1.5rem; }

[data-pack="stage"] .pub-header {
  background: #000;
  border-bottom: 1px solid rgba(196,163,90,.35);
}
[data-pack="stage"] .pub-hero {
  padding: 1.25rem 0 1rem;
}
[data-pack="stage"] .pub-hero-title { letter-spacing: -0.03em; }
[data-pack="stage"] .pub-content { max-width: 46rem; }

@media (max-width: 700px) {
  .nav-toggle-btn { display: inline-block; }
  .pub-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0 0.75rem;
  }
  .nav-toggle:checked ~ .pub-nav { display: flex; }
  .pub-main { padding: 0 1rem 2rem; }
  .pub-header { padding: 0.85rem 1rem; }
}


[data-pack="sanctuary"] .pub-header {
  background: #fbfbf8;
  border-bottom: 1px solid #d5ddd9;
}
[data-pack="sanctuary"] .pub-name { font-weight: 500; letter-spacing: 0.04em; }
[data-pack="sanctuary"] .pub-hero { padding: 2.5rem 0 1.25rem; }
[data-pack="sanctuary"] .pub-hero-title { font-weight: 500; }
[data-pack="sanctuary"] .pub-content { max-width: 38rem; }

[data-pack="session"] .pub-header {
  background: #f3efe6;
  border-bottom: 1px solid #d4c4b0;
}
[data-pack="session"] .pub-hero {
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid #d4c4b0;
  margin-bottom: 1.25rem;
}
[data-pack="session"] .pub-hero-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}
[data-pack="session"] .pub-content { max-width: 40rem; }

.pub-logo { height: 2.25rem; width: auto; max-width: 8rem; vertical-align: middle; margin-right: .5rem; }
.pub-tagline { margin: .25rem 0 0; opacity: .8; font-size: .95rem; }
.pub-hero-photo {
  background-size: cover;
  background-position: center;
  min-height: 12rem;
  padding: 3rem 1rem;
  color: #f4f0e8;
  text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.pub-divider { border: 0; border-top: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent); margin: 2rem 0; }
.pub-cta { margin: 1.25rem 0; }
.pub-name { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }

[data-fonts="serif"] { --font-display: Palatino, "Times New Roman", serif; --font-body: Georgia, serif; }
[data-fonts="sans"] { --font-display: ui-sans-serif, system-ui, sans-serif; --font-body: ui-sans-serif, system-ui, sans-serif; }
[data-fonts="mixed"] { --font-display: Palatino, "Times New Roman", serif; --font-body: ui-sans-serif, system-ui, sans-serif; }
[data-fonts] .pub-body, [data-fonts] body { font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif); }
[data-width="narrow"] .pub-content { max-width: 32rem; }
[data-width="wide"] .pub-content { max-width: 60rem; }
[data-sticky="on"] .pub-header { position: sticky; top: 0; z-index: 20; }
[data-header="overlay"] .pub-header { position: absolute; left: 0; right: 0; background: transparent; border-bottom: 0; }
[data-header="overlay"][data-sticky="on"] .pub-header { position: sticky; background: color-mix(in srgb, var(--color-bg) 86%, transparent); }
[data-header="overlay"] .pub-main { padding-top: 0; }
.pub-figure { margin: 1.5rem 0; }
.pub-figure figcaption { font-size: .9rem; opacity: .75; margin-top: .4rem; }
.pub-figure-bleed { margin-left: -1rem; margin-right: -1rem; }
.pub-gallery { display: grid; grid-template-columns: 1fr; gap: .75rem; margin: 1.5rem 0; }
@media (min-width: 700px) { .pub-gallery { grid-template-columns: 1fr 1fr; } }
.pub-social { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }