/* ============================================================
   CORNERSTONE CHURCH — heritage-classical design system
   Deep forest green · warm stone · aged gold · jewel-glass light
   ============================================================ */

:root {
  /* palette */
  --green-deepest: #101f18;
  --green-deep:    #16281f;
  --green:         #23422f;
  --green-soft:    #3c5c46;
  --stone-bg:      #f3eee3;
  --stone-warm:    #e9e1cf;
  --stone-deep:    #ddd2ba;
  --ink:           #26251d;
  --ink-soft:      #55523f;
  --gold:          #a8862f;
  --gold-bright:   #c9a445;
  --gold-pale:     #e5cf94;
  /* jewel glass */
  --jewel-emerald: #2e7a52;
  --jewel-sapphire:#31549b;
  --jewel-ruby:    #9b3247;
  --jewel-amber:   #c98a2e;

  --serif-display: "Cormorant Garamond", Georgia, serif;
  --serif-body:    "EB Garamond", Georgia, serif;

  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --measure: 38rem;
  --ease-liturgical: cubic-bezier(.55, .06, .22, .99);
}

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

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  font-family: var(--serif-body);
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--stone-bg);
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--gold-pale); color: var(--ink); }

/* ---------- typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif-display);
  font-weight: 500;
  line-height: 1.08;
  color: inherit;
}

h1 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); }

.kicker {
  font-family: var(--serif-body);
  font-variant: small-caps;
  letter-spacing: 0.32em;
  text-transform: lowercase;
  font-size: 0.9375rem;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
}
.kicker::before, .kicker.rule-both::after {
  content: "";
  width: 2.4rem; height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.on-dark { color: var(--stone-bg); }
.on-dark .kicker { color: var(--gold-bright); }

p.lede {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  line-height: 1.5;
  font-weight: 500;
  font-family: var(--serif-display);
}

.measure { max-width: var(--measure); }

/* illuminated drop cap */
.dropcap::first-letter {
  font-family: var(--serif-display);
  font-weight: 600;
  float: left;
  font-size: 4.6em;
  line-height: 0.78;
  padding: 0.08em 0.14em 0 0;
  color: var(--green);
  text-shadow: 2px 2px 0 var(--gold-pale);
}

/* ornament divider  ── ❖ ── */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem;
  color: var(--gold);
  margin: clamp(2rem, 5vw, 3.5rem) auto;
}
.ornament::before, .ornament::after {
  content: ""; height: 1px; width: min(7rem, 20vw);
  background: linear-gradient(to var(--dir, right), currentColor, transparent);
}
.ornament::before { --dir: left; }
.ornament svg { width: 14px; height: 14px; flex: none; }

/* ---------- layout ---------- */

.wrap { max-width: 76rem; margin-inline: auto; padding-inline: var(--pad-x); }

section { padding-block: clamp(4.5rem, 10vw, 8.5rem); }
section.tight { padding-block: clamp(3rem, 7vw, 5.5rem); }

.section-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.section-head h2 { margin-top: 0.9rem; }
.section-head .sub { margin-top: 1.1rem; max-width: 44rem; color: var(--ink-soft); }
.on-dark .sub, .band-dark .sub { color: rgba(243, 238, 227, 0.72); }

/* ---------- nav ---------- */

.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background 0.5s var(--ease-liturgical), box-shadow 0.5s, backdrop-filter 0.5s;
}
.site-nav .bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--pad-x);
  max-width: 90rem; margin-inline: auto;
}
.site-nav.scrolled {
  background: rgba(16, 31, 24, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(201, 164, 69, 0.25);
}

.brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: var(--stone-bg);
}
.brand svg { width: 30px; height: 30px; flex: none; }
.brand .name {
  font-family: var(--serif-display);
  font-weight: 600; font-size: 1.22rem; letter-spacing: 0.05em;
}
.brand .name small {
  display: block;
  font-family: var(--serif-body);
  font-variant: small-caps; text-transform: lowercase;
  font-size: 0.62rem; letter-spacing: 0.42em;
  color: var(--gold-bright); font-weight: 500;
}

.nav-links { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); list-style: none; }
.nav-links a {
  font-variant: small-caps; text-transform: lowercase;
  letter-spacing: 0.22em; font-size: 1rem;
  color: var(--stone-bg); text-decoration: none;
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.nav-links a:hover { color: var(--gold-bright); }
.nav-links a[aria-current="page"] { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.nav-links .nav-cta a {
  border: 1px solid var(--gold-bright);
  padding: 0.5rem 1.2rem;
  transition: background 0.35s, color 0.35s;
}
.nav-links .nav-cta a:hover { background: var(--gold-bright); color: var(--green-deepest); }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px;
  position: relative; z-index: 70;
}
.nav-toggle span {
  display: block; width: 26px; height: 2px; margin: 6px auto;
  background: var(--stone-bg);
  transition: transform 0.4s var(--ease-liturgical), opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 0;
    background: linear-gradient(180deg, var(--green-deepest), var(--green-deep));
    flex-direction: column; justify-content: center; gap: 2.2rem;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.45s var(--ease-liturgical), visibility 0.45s;
  }
  .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-links a { font-size: 1.5rem; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--serif-body);
  font-variant: small-caps; text-transform: lowercase;
  letter-spacing: 0.24em; font-size: 1.02rem;
  text-decoration: none; cursor: pointer;
  padding: 0.95rem 2.2rem;
  border: 1px solid var(--gold);
  color: var(--green-deepest);
  background: var(--gold-bright);
  transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.btn:hover { background: transparent; color: var(--gold-bright); border-color: var(--gold-bright); }

.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn.ghost:hover { background: var(--gold-bright); color: var(--green-deepest); border-color: var(--gold-bright); }

.btn.ghost.on-light-ghost { color: var(--green); border-color: var(--green-soft); }
.btn.ghost.on-light-ghost:hover { background: var(--green); color: var(--stone-bg); border-color: var(--green); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  color: var(--stone-bg);
  background: var(--green-deepest);
  overflow: clip;
  padding: 0;
}
.hero .hero-media {
  position: absolute; inset: -8% 0;
  background-size: cover; background-position: center 30%;
  will-change: transform;
}
.hero .hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,31,24,0.66) 0%, rgba(16,31,24,0.2) 42%, rgba(16,31,24,0.84) 100%);
}
.hero .hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: 8rem var(--pad-x) clamp(3rem, 7vh, 5.5rem);
  max-width: 76rem; margin-inline: auto;
}
.hero .kicker { color: var(--gold-pale); text-shadow: 0 1px 14px rgba(16, 31, 24, 0.85); }
.hero h1 { max-width: 15ch; margin-top: 1.2rem; text-wrap: balance; }
.hero .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }
.hero .hero-note {
  margin-top: 2.8rem;
  font-variant: small-caps; text-transform: lowercase;
  letter-spacing: 0.26em; font-size: 0.95rem;
  color: rgba(243, 238, 227, 0.78);
}
.hero .hero-note b { color: var(--gold-bright); font-weight: 500; }

/* subpage hero (shorter) */
.hero.short { min-height: 72svh; }

/* scroll cue */
.scroll-cue {
  position: absolute; z-index: 2;
  right: var(--pad-x); bottom: 2.4rem;
  width: 1px; height: 72px;
  background: linear-gradient(to bottom, transparent, var(--gold-bright));
  overflow: hidden;
}
.scroll-cue::after {
  content: ""; position: absolute; inset: 0;
  background: var(--green-deepest);
  animation: cueDrop 2.6s var(--ease-liturgical) infinite;
}
@keyframes cueDrop {
  0% { transform: translateY(0); }
  60%, 100% { transform: translateY(100%); }
}

/* ---------- jewel light layer (signature) ---------- */

.jewel-field {
  position: absolute; inset: 0;
  overflow: clip; pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
}
.jewel-field .jewel {
  position: absolute;
  width: 46vmax; height: 46vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.24;
  will-change: transform;
}
.jewel.j-emerald  { background: radial-gradient(circle, var(--jewel-emerald), transparent 65%); top: -12%; left: -10%; }
.jewel.j-sapphire { background: radial-gradient(circle, var(--jewel-sapphire), transparent 65%); top: 22%; right: -14%; }
.jewel.j-ruby     { background: radial-gradient(circle, var(--jewel-ruby), transparent 65%); bottom: -18%; left: 18%; width: 36vmax; height: 36vmax; }
.jewel.j-amber    { background: radial-gradient(circle, var(--jewel-amber), transparent 65%); bottom: 4%; right: 16%; width: 30vmax; height: 30vmax; opacity: 0.18; }

/* ---------- arch imagery (signature) ---------- */

.arch-frame {
  position: relative;
  overflow: hidden;
  border-radius: 999px 999px 0 0;          /* rounded Romanesque arch */
  aspect-ratio: 3 / 4.1;
  background: var(--stone-deep);
  isolation: isolate;
}
.arch-frame.pointed {
  border-radius: 0;
  clip-path: polygon(0% 100%, 0% 46%, 0.23% 42.08%, 0.91% 38.18%, 2.05% 34.35%, 3.62% 30.59%, 5.63% 26.95%, 8.05% 23.45%, 10.87% 20.11%, 14.07% 16.96%, 17.63% 14.02%, 21.51% 11.31%, 25.69% 8.85%, 30.15% 6.67%, 34.84% 4.76%, 39.74% 3.16%, 44.8% 1.87%, 50% 0.89%, 55.2% 1.87%, 60.26% 3.16%, 65.16% 4.76%, 69.85% 6.67%, 74.31% 8.85%, 78.49% 11.31%, 82.37% 14.02%, 85.93% 16.96%, 89.13% 20.11%, 91.95% 23.45%, 94.37% 26.95%, 96.38% 30.59%, 97.95% 34.35%, 99.09% 38.18%, 99.77% 42.08%, 100% 46%, 100% 100%);
}
.arch-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  will-change: transform;
}
.arch-frame .veil {
  position: absolute; inset: -1px;
  background: linear-gradient(180deg, var(--stone-warm), var(--stone-deep));
  z-index: 2;
  transform-origin: top;
}
.band-dark .arch-frame .veil { background: linear-gradient(180deg, var(--green-deep), var(--green-deepest)); }

/* thin gold keyline offset around the arch */
.arch-wrap { position: relative; }
.arch-wrap::after {
  content: "";
  position: absolute; inset: -12px;
  border: 1px solid rgba(168, 134, 47, 0.55);
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}
.arch-wrap.pointed-wrap::after { content: none; }
.arch-wrap.pointed-wrap {
  filter:
    drop-shadow(1px 0 0 rgba(168, 134, 47, 0.65))
    drop-shadow(-1px 0 0 rgba(168, 134, 47, 0.65))
    drop-shadow(0 1px 0 rgba(168, 134, 47, 0.65))
    drop-shadow(0 8px 26px rgba(38, 37, 29, 0.16));
}

/* ---------- dark band sections ---------- */

.band-dark {
  position: relative;
  background: linear-gradient(180deg, var(--green-deepest) 0%, var(--green-deep) 100%);
  color: var(--stone-bg);
  overflow: clip;
}
.band-dark .kicker { color: var(--gold-bright); }
.band-dark > .wrap { position: relative; z-index: 2; }

/* stone texture wash (pure CSS grain) */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  opacity: 0.5;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(243,238,227,0.045) 1px, transparent 1.4px),
    radial-gradient(rgba(0,0,0,0.09) 1px, transparent 1.4px);
  background-size: 5px 5px, 9px 9px;
  background-position: 0 0, 3px 4px;
}

/* ---------- service times ---------- */

.times-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1px;
  background: rgba(168, 134, 47, 0.35);
  border: 1px solid rgba(168, 134, 47, 0.35);
}
.time-card {
  background: var(--green-deep);
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.4rem, 3vw, 2.2rem);
}
.time-card .day {
  font-variant: small-caps; text-transform: lowercase;
  letter-spacing: 0.3em; font-size: 0.9rem;
  color: var(--gold-bright);
}
.time-card .hour {
  font-family: var(--serif-display);
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 500; line-height: 1.1;
  margin: 0.7rem 0 0.5rem;
}
.time-card .desc { color: rgba(243, 238, 227, 0.72); font-size: 1rem; }

/* ---------- ministry teaser cards ---------- */

.ministry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
}
@media (max-width: 860px) {
  .ministry-grid { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; }
}
.ministry-card { text-decoration: none; color: inherit; display: block; }
.ministry-card h3 { margin-top: 1.5rem; transition: color 0.3s; }
.ministry-card:hover h3 { color: var(--gold); }
.band-dark .ministry-card:hover h3 { color: var(--gold-bright); }
.ministry-card .m-desc { color: var(--ink-soft); margin-top: 0.45rem; font-size: 1.02rem; }
.ministry-card .m-more {
  display: inline-block; margin-top: 0.8rem;
  font-variant: small-caps; text-transform: lowercase;
  letter-spacing: 0.24em; font-size: 0.9rem;
  color: var(--gold);
  border-bottom: 1px solid rgba(168,134,47,0.4);
  padding-bottom: 2px;
}
.ministry-card:hover .arch-frame img { transform: scale(1.05); }
.ministry-card .arch-frame img { transition: transform 1.4s var(--ease-liturgical); }

/* ---------- events ---------- */

.event-list { list-style: none; border-top: 1px solid rgba(38, 37, 29, 0.18); }
.event-item {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.4rem, 3vw, 2rem) 0;
  border-bottom: 1px solid rgba(38, 37, 29, 0.18);
}
.event-item .date {
  font-family: var(--serif-display);
  color: var(--green);
  line-height: 1;
}
.event-item .date b {
  display: block; font-size: 2.4rem; font-weight: 500;
}
.event-item .date span {
  font-variant: small-caps; text-transform: lowercase;
  letter-spacing: 0.28em; font-size: 0.85rem; color: var(--gold);
}
.event-item h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem); }
.event-item .e-meta { color: var(--ink-soft); font-size: 1rem; margin-top: 0.3rem; }
.event-item .e-tag {
  font-variant: small-caps; text-transform: lowercase;
  letter-spacing: 0.22em; font-size: 0.85rem;
  color: var(--green-soft);
  border: 1px solid rgba(60, 92, 70, 0.4);
  padding: 0.3rem 0.9rem; border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .event-item { grid-template-columns: 4.6rem 1fr; }
  .event-item .e-tag { display: none; }
  .event-item .date b { font-size: 1.9rem; }
}

/* ---------- split layouts ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.split.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
@media (max-width: 860px) {
  .split, .split.flip { grid-template-columns: 1fr; }
  .split .arch-wrap { max-width: 22rem; margin-inline: auto; }
}

/* ---------- timeline (about) ---------- */

.timeline { position: relative; padding-left: 2.4rem; max-width: 44rem; }
.timeline::before {
  content: "";
  position: absolute; left: 6px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold), rgba(168,134,47,0.15));
}
.timeline .t-item { position: relative; padding-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.timeline .t-item:last-child { padding-bottom: 0; }
.timeline .t-item::before {
  content: "";
  position: absolute; left: calc(-2.4rem + 2px); top: 9px;
  width: 9px; height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
}
.timeline .t-year {
  font-family: var(--serif-display);
  font-size: 1.9rem; font-weight: 600;
  color: var(--green);
  line-height: 1;
}
.timeline .t-item p { margin-top: 0.6rem; color: var(--ink-soft); max-width: 36rem; }

/* ---------- beliefs ---------- */

.belief-list { list-style: none; counter-reset: belief; max-width: 40rem; }
.belief-list li {
  counter-increment: belief;
  position: relative;
  padding: 1.6rem 0 1.6rem 4.4rem;
  border-bottom: 1px solid rgba(243, 238, 227, 0.14);
}
.belief-list li::before {
  content: counter(belief, upper-roman);
  position: absolute; left: 0; top: 1.75rem;
  font-family: var(--serif-display);
  font-size: 1.5rem; font-weight: 600;
  color: var(--gold-bright);
}
.belief-list h3 { font-size: 1.4rem; margin-bottom: 0.35rem; }
.belief-list p { color: rgba(243, 238, 227, 0.72); font-size: 1.02rem; }

/* ---------- leadership medallions ---------- */

.leader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  max-width: 56rem;
}
.leader { text-align: center; }
.leader .medallion {
  width: min(11rem, 60vw);
  aspect-ratio: 3 / 3.6;
  margin-inline: auto;
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201, 164, 69, 0.24), transparent 55%),
    linear-gradient(180deg, var(--green), var(--green-deep));
  border: 1px solid rgba(168, 134, 47, 0.5);
  display: grid; place-items: center;
  position: relative;
}
.leader .medallion span {
  font-family: var(--serif-display);
  font-size: 2.6rem; font-weight: 500;
  color: var(--gold-pale);
  letter-spacing: 0.06em;
}
.leader h3 { margin-top: 1.3rem; font-size: 1.35rem; }
.leader .role {
  font-variant: small-caps; text-transform: lowercase;
  letter-spacing: 0.26em; font-size: 0.88rem;
  color: var(--gold); margin-top: 0.3rem;
}
.leader p.bio { font-size: 0.98rem; color: var(--ink-soft); margin-top: 0.7rem; }

/* ---------- visit page ---------- */

.steps { counter-reset: step; display: grid; gap: 0; max-width: 46rem; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 1.4rem;
  padding: clamp(1.6rem, 4vw, 2.4rem) 0;
  border-bottom: 1px solid rgba(38, 37, 29, 0.16);
}
.step:first-child { border-top: 1px solid rgba(38, 37, 29, 0.16); }
.step::before {
  content: counter(step, upper-roman);
  font-family: var(--serif-display);
  font-size: 2.2rem; font-weight: 600;
  color: var(--gold);
  line-height: 1;
  text-align: center;
  padding-top: 0.2rem;
}
.step h3 { margin-bottom: 0.4rem; }
.step p { color: var(--ink-soft); max-width: 34rem; }

/* info card (directions) */
.info-card {
  background: var(--stone-warm);
  border: 1px solid rgba(168, 134, 47, 0.35);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  position: relative;
}
.info-card::before {
  content: "";
  position: absolute; inset: 8px;
  border: 1px solid rgba(168, 134, 47, 0.25);
  pointer-events: none;
}
.info-card h3 { color: var(--green); }
.info-card dl { margin-top: 1.4rem; display: grid; gap: 1.1rem; }
.info-card dt {
  font-variant: small-caps; text-transform: lowercase;
  letter-spacing: 0.26em; font-size: 0.88rem;
  color: var(--gold);
}
.info-card dd { margin-top: 0.2rem; color: var(--ink-soft); }

/* ---------- form ---------- */

.form-grid { display: grid; gap: 1.4rem; }
.form-row { display: grid; gap: 1.4rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-variant: small-caps; text-transform: lowercase;
  letter-spacing: 0.26em; font-size: 0.9rem;
  color: var(--gold-bright);
  margin-bottom: 0.5rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit; color: var(--stone-bg);
  background: rgba(243, 238, 227, 0.06);
  border: 1px solid rgba(243, 238, 227, 0.28);
  padding: 0.85rem 1rem;
  border-radius: 0;
  transition: border-color 0.3s, background 0.3s;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold-bright) 50%), linear-gradient(135deg, var(--gold-bright) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { color: var(--ink); background: var(--stone-bg); }
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold-bright);
  background: rgba(243, 238, 227, 0.1);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(243, 238, 227, 0.4); }

.form-confirm {
  border: 1px solid var(--gold-bright);
  padding: 2rem;
  text-align: center;
  display: none;
}
.form-confirm.show { display: block; }
.form-confirm h3 { color: var(--gold-bright); }
.form-confirm p { color: rgba(243, 238, 227, 0.78); margin-top: 0.5rem; }

/* ---------- CTA band ---------- */

.cta-band { text-align: center; }
.cta-band h2 { max-width: 18ch; margin-inline: auto; margin-top: 1rem; }
.cta-band .btn { margin-top: 2.4rem; }
.cta-band p.sub { max-width: 34rem; margin: 1.2rem auto 0; }

/* ---------- footer ---------- */

footer {
  background: var(--green-deepest);
  color: rgba(243, 238, 227, 0.72);
  position: relative;
  overflow: clip;
}
footer .foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
}
@media (max-width: 780px) { footer .foot-grid { grid-template-columns: 1fr; } }
footer h4 {
  font-variant: small-caps; text-transform: lowercase;
  font-family: var(--serif-body);
  letter-spacing: 0.3em; font-size: 0.92rem;
  color: var(--gold-bright);
  margin-bottom: 1.1rem; font-weight: 500;
}
footer a { color: inherit; text-decoration: none; transition: color 0.3s; }
footer a:hover { color: var(--gold-bright); }
footer ul { list-style: none; display: grid; gap: 0.55rem; }
footer .foot-brand p { max-width: 26rem; margin-top: 1rem; font-size: 1rem; }
footer .foot-bottom {
  border-top: 1px solid rgba(243, 238, 227, 0.14);
  padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem;
  justify-content: space-between;
  font-size: 0.95rem;
}
footer .foot-bottom .credit { color: rgba(243, 238, 227, 0.5); }

/* ---------- reveal defaults (JS enhances) ---------- */

.reveal { opacity: 0; transform: translateY(28px); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .scroll-cue { display: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}
.no-js .reveal { opacity: 1; transform: none; }
.no-js .arch-frame .veil { display: none; }
.no-js .arch-frame img { transform: none; }