:root {
  --ink: #18120e;
  --wine: #420d16;
  --wine-deep: #1d070b;
  --gold: #c8a45a;
  --gold-light: #ead6a2;
  --ivory: #f4ecdc;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}
a { color: inherit; text-decoration: none; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff8e9;
  isolation: isolate;
}
.hero-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("/san-jose-portada.png") center 40% / cover no-repeat;
  transform: scale(1.015);
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 35%, rgba(37, 4, 9, .14) 0 22%, rgba(24, 4, 8, .76) 78%),
    linear-gradient(180deg, rgba(20, 4, 7, .7), rgba(35, 5, 10, .2) 40%, rgba(17, 3, 6, .82));
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .24;
  background-image: radial-gradient(rgba(236, 207, 142, .52) .6px, transparent .6px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
}
.sacred-frame {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(222, 188, 112, .62);
  pointer-events: none;
}
.sacred-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(222, 188, 112, .18);
}
.corner { position: absolute; width: 38px; height: 38px; border-color: var(--gold-light); }
.corner-tl { top: 8px; left: 8px; border-top: 1px solid; border-left: 1px solid; }
.corner-tr { top: 8px; right: 8px; border-top: 1px solid; border-right: 1px solid; }
.corner-bl { bottom: 8px; left: 8px; border-bottom: 1px solid; border-left: 1px solid; }
.corner-br { bottom: 8px; right: 8px; border-bottom: 1px solid; border-right: 1px solid; }
.topbar {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 42px clamp(34px, 6vw, 92px);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--gold-light); }
.topbar nav { display: flex; gap: clamp(22px, 4vw, 54px); }
.topbar nav a { color: rgba(255, 248, 233, .72); transition: color .2s; }
.topbar nav a:hover { color: var(--gold-light); }
.hero-content {
  width: min(920px, calc(100% - 54px));
  padding: 150px 0 120px;
  text-align: center;
}
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 13px; color: var(--gold-light); }
.eyebrow span { width: 55px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow p, .kicker, .section-kicker { margin: 0; text-transform: uppercase; letter-spacing: .29em; font-size: .66rem; }
.kicker { margin-top: 48px; color: var(--gold-light); }
h1 {
  margin: 10px 0 0;
  font-size: clamp(3rem, 8vw, 7.5rem);
  font-weight: 400;
  line-height: .85;
  letter-spacing: -.065em;
  text-shadow: 0 5px 40px rgba(0, 0, 0, .48);
}
.date-title {
  display: block;
  margin-bottom: .3em;
  font-size: .46em;
  line-height: 1;
  letter-spacing: .08em;
}
.title-flourish { margin: 31px auto 22px; color: var(--gold-light); font-size: 1rem; }
.hero-copy {
  width: min(580px, 100%);
  margin: auto;
  color: rgba(255, 248, 233, .82);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.72;
  font-style: italic;
}
.hero-actions { display: flex; justify-content: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.button {
  min-width: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 22px;
  border: 1px solid rgba(231, 203, 143, .65);
  font-family: Arial, sans-serif;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: transform .2s, background .2s;
}
.button:hover { transform: translateY(-2px); }
.button-gold { background: var(--gold-light); border-color: var(--gold-light); color: var(--wine-deep); }
.button-ghost { background: rgba(20, 3, 7, .22); backdrop-filter: blur(8px); }
.scroll-cue {
  position: absolute;
  bottom: 39px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 11px;
  font-family: Arial, sans-serif;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 248, 233, .55);
}
.scroll-cue i { display: block; width: 1px; height: 24px; background: var(--gold); }
.intro {
  position: relative;
  padding: clamp(90px, 13vw, 170px) 24px;
  text-align: center;
  background:
    linear-gradient(rgba(244,236,220,.96), rgba(244,236,220,.96)),
    radial-gradient(circle at center, var(--gold) 1px, transparent 1px);
  background-size: auto, 22px 22px;
}
.intro-ornament { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--gold); }
.intro-ornament span { width: 70px; height: 1px; background: currentColor; }
.section-kicker { margin-top: 28px; color: #876b35; }
h2 { margin: 13px auto 25px; color: var(--wine); font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 400; letter-spacing: -.045em; }
.dropcap { width: min(720px, 100%); margin: auto; font-size: 1.16rem; line-height: 1.9; color: #54483b; }
.dropcap::first-letter { float: left; padding: .08em .12em 0 0; color: var(--wine); font-size: 4.3em; line-height: .72; }

.portrait-section {
  min-height: 780px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(400px, 1.08fr);
  align-items: center;
  gap: clamp(55px, 8vw, 120px);
  padding: clamp(80px, 10vw, 150px) clamp(30px, 8vw, 140px);
  background: #efe3cd;
  overflow: hidden;
}
.portrait-copy { max-width: 610px; }
.portrait-copy .section-kicker { color: #8c6e35; }
.portrait-copy h2 { margin-left: 0; font-size: clamp(3rem, 5.6vw, 6rem); line-height: .94; }
.portrait-copy > p:not(.section-kicker) { max-width: 550px; color: #5d5041; font-size: 1.06rem; line-height: 1.85; }
.seal-row { display: flex; align-items: center; gap: 24px; margin-top: 42px; }
.date-seal {
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid #a5874b;
  outline: 1px solid rgba(165,135,75,.35);
  outline-offset: 5px;
  border-radius: 50%;
  color: var(--wine);
}
.date-seal strong { font-size: 2rem; line-height: .9; font-weight: 400; }
.date-seal span { margin-top: 7px; font-size: .59rem; letter-spacing: .2em; text-transform: uppercase; }
.seal-row b, .seal-row small { display: block; }
.seal-row b { color: var(--wine); font-weight: 400; font-size: 1.15rem; }
.seal-row small { max-width: 290px; margin-top: 7px; color: #796b5b; line-height: 1.5; }
.portrait-wrap {
  position: relative;
  justify-self: center;
  width: min(560px, 100%);
  aspect-ratio: 4 / 5;
  padding: 19px;
  border: 1px solid rgba(132, 97, 40, .7);
  box-shadow: 0 30px 70px rgba(55, 35, 14, .18);
}
.portrait-wrap::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(132,97,40,.27); }
.portrait-wrap img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.08) contrast(1.03); }
.portrait-halo {
  position: absolute;
  top: -15%;
  left: 50%;
  width: 70%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 1px solid rgba(166,126,53,.28);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(166,126,53,.04), 0 0 0 32px rgba(166,126,53,.025);
  pointer-events: none;
}
.portrait-caption {
  position: absolute;
  left: 50%;
  bottom: -35px;
  min-width: 220px;
  transform: translateX(-50%);
  padding: 15px 24px;
  background: var(--wine);
  color: #f7ecd5;
  text-align: center;
  box-shadow: 0 10px 28px rgba(41,9,14,.28);
}
.portrait-caption span, .portrait-caption strong { display: block; }
.portrait-caption span { color: var(--gold-light); font-size: .56rem; letter-spacing: .25em; text-transform: uppercase; }
.portrait-caption strong { margin-top: 4px; font-weight: 400; font-style: italic; }

.virtues { padding: clamp(100px, 12vw, 165px) clamp(24px, 7vw, 110px); text-align: center; background: #faf5ea; }
.virtues .section-kicker { color: #94743b; }
.virtues h2 { margin-bottom: 66px; }
.virtue-grid { max-width: 1180px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #cbb888; border-bottom: 1px solid #cbb888; }
.virtue-grid article { position: relative; min-height: 330px; padding: 60px 40px; }
.virtue-grid article + article { border-left: 1px solid #cbb888; }
.virtue-grid svg, .virtue-symbol { color: #9d7934; font-size: 1.8rem; font-weight: 400; }
.virtue-grid article > span { position: absolute; top: 24px; right: 25px; color: #a88d59; font-size: .65rem; letter-spacing: .2em; }
.virtue-grid h3 { margin: 24px 0 15px; color: var(--wine); font-size: 2rem; font-weight: 400; }
.virtue-grid p { margin: 0 auto; max-width: 240px; color: #756756; line-height: 1.75; font-size: .94rem; }

.litany { padding: clamp(105px, 13vw, 190px) 24px; color: #f5ead4; background: var(--wine-deep); text-align: center; }
.litany-inner { max-width: 930px; margin: auto; }
.litany-mark { color: var(--gold); margin-bottom: 25px; }
.litany .section-kicker { color: var(--gold-light); }
.litany h2 { margin: 28px auto 65px; color: #f5ead4; font-size: clamp(2.75rem, 6.1vw, 5.7rem); line-height: 1.02; }
.responses { border-top: 1px solid rgba(220,184,110,.35); }
.responses p { margin: 0; padding: 20px 8px; display: flex; justify-content: space-between; gap: 30px; border-bottom: 1px solid rgba(220,184,110,.25); text-align: left; }
.responses span { color: rgba(245,234,212,.68); }
.responses em { color: var(--gold-light); white-space: nowrap; }

.calendar-section {
  padding: clamp(90px, 12vw, 170px) clamp(25px, 10vw, 170px);
  display: grid;
  grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
  gap: clamp(60px, 10vw, 150px);
  align-items: center;
  background: #efe3cd;
}
.calendar-card {
  position: relative;
  aspect-ratio: 1;
  max-width: 440px;
  width: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #a98a4c;
  outline: 1px solid rgba(169,138,76,.25);
  outline-offset: 14px;
  color: var(--wine);
  background: rgba(255,250,239,.34);
}
.calendar-icon { margin: 0 auto 12px; color: #987637; }
.calendar-card p { margin: 0; font-size: .64rem; letter-spacing: .35em; text-transform: uppercase; }
.calendar-card strong { font-size: clamp(6rem, 13vw, 10rem); line-height: .8; font-weight: 400; letter-spacing: -.09em; }
.calendar-card span { margin-top: 20px; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; }
.calendar-copy { max-width: 650px; }
.calendar-copy .section-kicker { color: #906f31; }
.calendar-copy h2 { margin-left: 0; font-size: clamp(3rem, 5.6vw, 5.5rem); line-height: .98; }
.calendar-copy > p:not(.section-kicker) { color: #665847; line-height: 1.85; font-size: 1.05rem; }
.text-link { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid #a17e3c; color: var(--wine); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; }

.prayers {
  padding: clamp(105px, 13vw, 185px) 24px;
  text-align: center;
  color: #f5ead4;
  background:
    linear-gradient(rgba(48,8,14,.89), rgba(32,5,9,.95)),
    url("/san-jose-portada.png") center 58% / cover fixed;
}
.prayer-stars { color: var(--gold-light); }
.prayers .section-kicker { margin-top: 28px; color: var(--gold-light); }
.prayers h2 { color: #fff6e5; margin-bottom: 22px; }
.prayers > p:not(.section-kicker) { max-width: 620px; margin: 0 auto 37px; color: rgba(245,234,212,.77); font-size: 1.06rem; line-height: 1.8; }

footer { padding: 48px clamp(26px, 7vw, 100px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; background: #150408; color: rgba(245,234,212,.55); font-family: Arial, sans-serif; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.footer-brand { display: flex; align-items: center; gap: 9px; color: var(--gold-light); }
footer p { margin: 0; color: #f5ead4; }
footer small { justify-self: end; text-align: right; max-width: 300px; font-size: .57rem; line-height: 1.5; }

@media (max-width: 650px) {
  .sacred-frame { inset: 10px; }
  .topbar { padding: 30px 26px; }
  .topbar nav { display: none; }
  .eyebrow span { width: 25px; }
  .eyebrow p { letter-spacing: .18em; }
  .hero-content { padding-top: 130px; }
  .scroll-cue { display: none; }
  .portrait-section, .calendar-section { grid-template-columns: 1fr; }
  .portrait-section { padding-bottom: 110px; }
  .portrait-copy { order: 2; }
  .portrait-wrap { order: 1; width: min(420px, 100%); }
  .virtue-grid { grid-template-columns: 1fr; }
  .virtue-grid article + article { border-left: 0; border-top: 1px solid #cbb888; }
  .responses p { display: grid; gap: 8px; text-align: center; }
  .responses em { white-space: normal; }
  .calendar-card { max-width: 340px; justify-self: center; }
  footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  footer small { justify-self: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}