/* =======================================================================
   CATHOLICSAY — MODERN ECCLESIASTICAL · SHARED SYSTEM
   Restrained, hairline, editorial. The counterpart to Illuminated.
   ======================================================================= */
:root {
  --cs-purple: #5B2A86;
  --cs-purple-deep: #3F1C5F;
  --cs-purple-ink: #2A1248;
  --cs-red: #9E2B2B;
  --cs-red-deep: #6E1A1A;
  --cs-green: #2F6F4E;
  --cs-teal: #1F6B7A;
  --cs-gold: #C9A24B;
  --cs-gold-deep: #8F6E28;
  --cs-gold-pale: #E4CE90;
  --cs-bg: #FAF7F0;
  --cs-bg-alt: #F5F0E4;
  --cs-ink: #1C1814;
  --cs-ink-soft: #4A4139;
  --cs-rule: #D8CEB8;
  --cs-rule-soft: #E8E1CD;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Cormorant Garamond', Garamond, serif;
  color: var(--cs-ink);
  background: var(--cs-bg);
  line-height: 1.6;
  font-size: 18px;
  font-feature-settings: "liga" 1, "kern" 1;
}
.cs-page { position: relative; }

/* ═══════════ RIBBON — liturgical purple ═══════════ */
.cs-ribbon {
  background: var(--cs-purple-deep);
  color: #EFE6CD;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--cs-gold);
}
.cs-ribbon .cs-feast { color: #F4ECD8; font-weight: 500; }
.cs-ribbon .cs-feast::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--cs-gold);
  transform: rotate(45deg);
  margin-right: 10px;
  vertical-align: middle;
}
.cs-ribbon-links a {
  color: rgba(239, 230, 205, 0.78);
  text-decoration: none;
  margin-left: 26px;
  transition: color 0.25s;
}
.cs-ribbon-links a:hover { color: var(--cs-gold); }

/* ═══════════ MASTHEAD ═══════════ */
.cs-masthead {
  padding: 18px 60px 0;
  text-align: center;
}
.cs-masthead-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid #B3261E;
  position: relative;
}
.cs-masthead-inner::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 7px; height: 7px;
  background: #B3261E;
}
.cs-mast-home {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: inherit;
}
.cs-mast-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.cs-mast-logo svg { display: block; width: 42px; height: auto; }
.cs-mast-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.cs-mast-title {
  font-family: 'Fraunces', 'Cormorant Garamond', serif;
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 144;
  font-size: 44px;
  font-weight: 400;
  color: var(--cs-ink);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.cs-mast-title em {
  font-style: italic;
  color: var(--cs-purple-deep);
  font-weight: 400;
}
.cs-mast-tag {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cs-ink-soft);
  margin-top: 6px;
}

/* ═══════════ NAV ═══════════ */
.cs-nav {
  padding: 18px 60px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  position: relative;
}
.cs-nav ul { list-style: none; margin: 0; padding: 0; }
.cs-nav > ul,
.cs-nav > .cs-nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 0; padding: 0;
}
.cs-nav > ul > li,
.cs-nav > .cs-nav-list > li { position: relative; }
.cs-nav a {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cs-ink);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color 0.25s;
  display: inline-block;
}
/* Caret indicator on parent items */
.cs-nav li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  margin-left: 8px;
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.5;
  transition: opacity 0.25s, transform 0.25s;
}
.cs-nav li.menu-item-has-children:hover > a::after,
.cs-nav li.menu-item-has-children:focus-within > a::after {
  opacity: 1;
  transform: translateY(0) rotate(225deg);
}
/* Dropdown panel */
.cs-nav li > ul.sub-menu,
.cs-nav li > .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 240px;
  margin-top: 0;
  padding: 14px 0;
  background: var(--cs-bg);
  border: 1px solid var(--cs-rule);
  border-top: 2px solid var(--cs-purple-deep);
  box-shadow: 0 18px 40px -18px rgba(42, 18, 72, 0.35), 0 4px 14px -8px rgba(42, 18, 72, 0.18);
  list-style: none;
  display: flex; flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  z-index: 50;
}
.cs-nav li > ul.sub-menu::before {
  content: '';
  position: absolute;
  top: -5px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px; height: 6px;
  background: var(--cs-gold);
}
/* Invisible hover bridge so mouse can cross from parent to sub-menu */
.cs-nav li.menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 18px;
  pointer-events: none;
}
.cs-nav li.menu-item-has-children:hover::after,
.cs-nav li.menu-item-has-children:focus-within::after {
  pointer-events: auto;
}
.cs-nav li:hover > ul.sub-menu,
.cs-nav li:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.cs-nav li > ul.sub-menu li { position: relative; }
.cs-nav li > ul.sub-menu a {
  display: block;
  padding: 10px 22px;
  font-family: 'Cinzel', serif;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cs-ink);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, padding-left 0.2s;
}
.cs-nav li > ul.sub-menu a:hover {
  color: var(--cs-purple-deep);
  background: var(--cs-bg-alt);
  padding-left: 28px;
}
.cs-nav a.active { color: var(--cs-purple-deep); }
.cs-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -7px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 1px;
  background: var(--cs-gold);
}
.cs-nav a:hover { color: var(--cs-purple-deep); }
.cs-nav-search {
  margin-left: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #B3261E;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  transition: color 0.25s;
  flex-shrink: 0;
  line-height: 0;
}
.cs-nav-search svg {
  width: 16px; height: 16px;
  display: block;
  stroke: currentColor;
  transition: transform 0.3s ease;
}
.cs-nav-search:hover {
  color: #7A1A15;
}
.cs-nav-search:hover svg {
  transform: scale(1.08);
}
.cs-nav-search::after { display: none !important; }

/* Off-canvas menu + burger are mobile-only; hide on desktop */
.cs-burger { display: none; }
.cs-menu {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 92vw);
  height: 100vh;
  background: var(--cs-bg);
  border-left: 1px solid var(--cs-rule);
  box-shadow: -20px 0 60px -20px rgba(42, 18, 72, 0.3);
  transform: translateX(100%);
  transition: transform 0.35s ease;
  overflow-y: auto;
  z-index: 200;
  visibility: hidden;
}
.cs-menu.open { transform: translateX(0); visibility: visible; }

/* ═══════════ KICKER ═══════════ */
.cs-kicker {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cs-red);
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 10px;
}
.cs-kicker::before {
  content: ''; display: inline-block;
  width: 18px; height: 1px; background: currentColor;
}
.cs-kicker.k-purple { color: var(--cs-purple-deep); }
.cs-kicker.k-green { color: var(--cs-green); }
.cs-kicker.k-teal { color: var(--cs-teal); }
.cs-kicker.k-gold { color: var(--cs-gold-deep); }

/* ═══════════ BYLINE ═══════════ */
.cs-byline {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-ink-soft);
}
.cs-byline strong { color: var(--cs-ink); font-weight: 500; }
.cs-byline span { margin: 0 10px; color: var(--cs-rule); }

/* ═══════════ DIVIDER ═══════════ */
.cs-divider {
  display: flex; align-items: center; gap: 24px;
  padding: 0 60px;
  margin: 40px 0 30px;
}
.cs-divider-line {
  flex: 1; height: 1px;
  background: var(--cs-rule);
}
.cs-divider-mark {
  width: 10px; height: 10px;
  background: var(--cs-gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.cs-divider-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cs-ink);
}

/* Minor hairline divider (no title) */
.cs-hairline {
  width: 100%;
  height: 1px;
  background: var(--cs-rule);
  margin: 30px 0;
  position: relative;
}
.cs-hairline::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 6px; height: 6px;
  background: var(--cs-gold);
}

/* ═══════════ BREADCRUMB ═══════════ */
.cs-breadcrumb {
  padding: 24px 60px 0;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cs-ink-soft);
}
.cs-breadcrumb a { color: var(--cs-ink-soft); text-decoration: none; }
.cs-breadcrumb a:hover { color: var(--cs-purple-deep); }
.cs-breadcrumb span { margin: 0 10px; color: var(--cs-rule); }
.cs-breadcrumb strong { color: var(--cs-ink); font-weight: 500; }

/* ═══════════ FOOTER — liturgical purple ink ═══════════ */
.cs-footer {
  border-top: 2px solid var(--cs-gold);
  padding: 60px 60px 32px;
  background: var(--cs-purple-ink);
  color: #EFE6CD;
  position: relative;
  margin-top: 70px;
}
.cs-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 50px;
}
.cs-footer-brand { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.cs-footer-brand-mark { display: flex; align-items: center; gap: 14px; }
.cs-footer-brand-mark img { width: 110px !important; height: auto !important; }
.cs-footer-brand h3 {
  font-family: 'Fraunces', 'Cormorant Garamond', serif;
  font-variation-settings: "opsz" 72;
  font-size: 32px; font-weight: 400;
  margin: 0; color: #F4ECD8;
  letter-spacing: -0.01em;
}
.cs-footer-brand h3 em { font-style: italic; color: var(--cs-gold); }
.cs-footer-brand p {
  font-size: 16px;
  color: rgba(239, 230, 205, 0.72);
  line-height: 1.6;
  max-width: 340px;
  font-style: italic;
}
.cs-footer h5 {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--cs-gold);
  text-transform: uppercase;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(201, 162, 75, 0.3);
  position: relative;
}
.cs-footer h5::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 5px; height: 5px;
  background: var(--cs-gold);
  transform: rotate(45deg);
}
.cs-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-footer a {
  color: rgba(239, 230, 205, 0.82);
  text-decoration: none;
  font-size: 15px;
  transition: color 0.25s;
}
.cs-footer a:hover { color: var(--cs-gold); }
.cs-footer-bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(201, 162, 75, 0.3);
  display: flex; justify-content: space-between;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(239, 230, 205, 0.7);
  text-transform: uppercase;
}
.cs-footer-bottom em { font-style: italic; color: var(--cs-gold); letter-spacing: 0.05em; font-family: 'Cormorant Garamond', serif; text-transform: none; font-size: 14px; }
/* Paint the footer logo mark outline gold (overrides inline stroke). */
.cs-footer-brand-mark svg path[stroke="#3F1C5F"],
.cs-footer-brand-mark svg line[stroke="#3F1C5F"],
.cs-footer-brand-mark svg g[stroke="#3F1C5F"] { stroke: #F4ECD8 !important; }

/* ═══════════ PAGE TITLE (generic) ═══════════ */
.cs-page-title {
  padding: 60px 60px 50px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.cs-page-title .cs-kicker {
  justify-content: center;
  display: inline-flex;
}
.cs-page-title .cs-kicker::after {
  content: ''; display: inline-block;
  width: 18px; height: 1px; background: currentColor;
}
.cs-page-title h1 {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 144, "SOFT" 20;
  font-size: 68px;
  font-weight: 400;
  line-height: 0.98;
  margin: 10px 0 16px;
  color: var(--cs-ink);
  letter-spacing: -0.02em;
}
.cs-page-title h1 em { font-style: italic; color: var(--cs-purple-deep); }
.cs-page-title .cs-page-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 21px;
  color: var(--cs-ink-soft);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.45;
}

/* ═══════════ SUBTLE CORNER ORNAMENT ═══════════ */
/* Smaller than illuminated — reserved for featured frames */
.cs-mod-corner {
  position: absolute;
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 0 L12 6 L6 12 L0 6 Z' fill='%23FAF7F0' stroke='%23C9A24B' stroke-width='1'/></svg>");
  background-size: contain;
  z-index: 2;
}
.cs-mod-corner.tl { top: -6px; left: -6px; }
.cs-mod-corner.tr { top: -6px; right: -6px; }
.cs-mod-corner.bl { bottom: -6px; left: -6px; }
.cs-mod-corner.br { bottom: -6px; right: -6px; }