/* ==========================================================================
   domus.css — the shared Domus design system.

   Before this file, every page carried its own inline copy of the tokens,
   the reset, the nav and the footer: 15 copies of the same design system,
   which is why it drifted. Everything in here is now defined ONCE.

   Load order on every page:
       <link rel="stylesheet" href="domus.css">   <-- this file
       <style> ...page-specific rules... </style> <-- still wins

   So a page can still override anything here locally; it just no longer
   has to re-declare it.

   Last full pass: 5 September 2026 — type legibility overhaul.
   ========================================================================== */

:root {
  /* Sky & atmosphere */
  --sky:#D8E8F2;
  --sky2:#C4D8EB;
  --sky3:#E8F2F8;
  --mist:#B8CCE0;
  --fog:#D0DDE8;
  --cloud:#F2EEE8;
  --cloud2:#EDE7DE;

  /* Stone & ground */
  --marble:#F8F4EE;
  --travertine:#F0EBE0;
  --parchment:#F5EFE2;
  --plaster:#E8E0D4;
  --robe-white:#F6F2EC;

  /* Marian blue */
  --marian:#4A6E9A;
  --marian2:#6A8EB8;
  --marian3:#8AAED0;
  --marian-pale:#B8D0E8;
  --marian-dim:rgba(74,110,154,0.12);
  --marian-glow:rgba(74,110,154,0.08);

  /* Gold / halo */
  --halo:#C4A060;
  --halo2:#D4B478;
  --halo-pale:#E8D4A8;
  --halo-dim:rgba(196,160,96,0.18);

  /* Ink & text */
  --ink:#2A3A4E;
  --ink2:#3A4E62;
  --quill:#46596E;
  --dust:#6E8296;
  --chalk:#F8F4EE;
  --chalk2:#E8E0D4;

  /* Liturgical */
  --crimson:#8A3040;
  --crimson-dim:rgba(138,48,64,0.15);
  --purple:#5A4878;
  --green:#4A6848;
  --robe-rose:#D4A898;
  --robe-warm:#C49888;

  /* Other */
  --col-advent:#3A3A6E;
  --col-christmas:#B89A4A;
  --col-lent:#5A3A6E;
  --col-easter:#B89A4A;
  --col-ordinary:#3E7A50;
  --col-red:#8A3040;
  --col-rose:#C47A8A;

  /* ---- Type scale ------------------------------------------------------
     Set after the September 2026 legibility pass. Nothing on the site may
     render below --t-micro: Cinzel is an inscriptional display face and
     stops reading as words under ~11px, especially with open tracking.
     ---------------------------------------------------------------------- */
  --t-micro: 11.5px;   /* deepest label — was as low as 5px */
  --t-label: 12.5px;   /* nav, buttons, chips, eyebrows */
  --t-meta:  13.5px;   /* captions, distances, timestamps */
  --t-small: 14.5px;   /* dense secondary text */
  --t-body:  17px;     /* running body copy */
  --t-lead:  18px;     /* intros and ledes */

  /* Cinzel caps need weight and TIGHT tracking once they're 12px+.
     The old 0.20–0.30em tracking is what made small labels unreadable. */
  --track-caps: 0.10em;
  --weight-caps: 600;
}

/* ==========================================================================
   Shared chrome — reset, body, nav, tracery, footer.
   Extracted verbatim from the pages; identical on all of them.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'EB Garamond',serif;background:var(--marble);color:var(--ink);overflow-x:hidden;}
body::after{content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");}
nav{position:fixed;top:0;left:0;right:0;z-index:300;height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 52px;background:rgba(242,238,232,0.94);backdrop-filter:blur(20px);border-bottom:1px solid rgba(74,110,154,0.14);}
nav::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--marian2),transparent);opacity:0.3;}
.nav-links{display:flex;gap:34px;list-style:none;position:absolute;left:50%;transform:translateX(-50%);}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--marian);transform:scaleX(0);transition:transform 0.25s;transform-origin:left;}
.nav-links a:hover{color:var(--marian);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-item{position:relative;}
.nav-item:hover .nav-dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.nav-dd a:last-child{border-bottom:none;}
.nav-dd a:hover{background:rgba(74,110,154,0.06);color:var(--marian);padding-left:26px;}
.nav-btn::before{content:'';position:absolute;inset:0;background:var(--marian);transform:translateX(-101%);transition:transform 0.3s;}
.nav-btn:hover::before{transform:translateX(0);}
.nav-btn span{position:relative;z-index:1;}
.tracery{height:52px;background:var(--sky3);display:flex;align-items:center;justify-content:center;gap:20px;border-top:1px solid rgba(74,110,154,0.1);border-bottom:1px solid rgba(74,110,154,0.1);}
.t-rule{flex:1;height:1px;}
.t-rule.l{background:linear-gradient(90deg,transparent,rgba(74,110,154,0.2));}
.t-rule.r{background:linear-gradient(90deg,rgba(74,110,154,0.2),transparent);}
.t-sym{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--marian3);opacity:0.5;letter-spacing:16px;}
.hero-title em{font-style:italic;color:var(--marian);}
.f-logo{font-family:'Cinzel',serif;font-size:17.5px;font-weight:600;letter-spacing:0.22em;color:var(--chalk);margin-bottom:14px;display:block;}
.f-verse{font-family:'Cormorant Garamond',serif;font-size:14px;font-style:italic;color:var(--chalk2);line-height:1.7;max-width:240px;margin-bottom:12px;opacity:0.7;}
.f-ref{font-family:'Cinzel',serif;font-weight:600;font-size:12px;letter-spacing:0.1em;color:var(--marian3);opacity:0.6;}
.f-head{font-family:'Cinzel',serif;font-weight:600;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--marian3);margin-bottom:18px;opacity:0.75;}
.f-links{list-style:none;}
.f-links li{margin-bottom:10px;}
.f-links a:hover{opacity:1;}
.footer-base{border-top:1px solid rgba(255,255,255,0.08);padding-top:22px;display:flex;justify-content:space-between;}
.f-copy{font-family:'Cinzel',serif;font-weight:600;font-size:12px;letter-spacing:0.1em;color:var(--chalk2);text-transform:uppercase;opacity:0.4;}
.f-cross{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--marian3);opacity:0.2;letter-spacing:12px;}
.rv{opacity:0;transform:translateY(20px);transition:opacity 0.65s ease,transform 0.65s ease;}
.rv.in{opacity:1;transform:none;}
.nav-btn:hover{color:var(--marble);}
.sec-eyebrow{font-family:'Cinzel',serif;font-weight:600;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--marian);margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.sec-title em{font-style:italic;color:var(--marian);}
.footer-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;}
.f-logo .em{color:var(--marian3);}

/* ==========================================================================
   Small screens.

   The site previously had a single @media(max-width:900px) breakpoint, so
   anything narrower than ~560px overflowed horizontally. Several of these
   were already broken before the September 2026 type pass; they only became
   obvious once the labels were big enough to see.

   NOTE ON SPECIFICITY: this file loads BEFORE each page's inline <style>,
   so the pages can still override it. These fixes are deliberately written
   as `body .thing` (0,1,1) rather than `.thing` (0,1,0) so they outrank the
   page's own rule without needing !important.
   ========================================================================== */
@media (max-width:560px){

  /* --- footer: link columns were pushing ~8px past the right edge --- */
  body .footer-grid{gap:26px;}
  body .f-head,body .f-copy,body .f-link,body .f-drop-sub{
    font-size:var(--t-micro);letter-spacing:0.05em;
  }
  body .f-links a{font-size:16px;}
  body .f-links,body .f-links li,body .f-links a{min-width:0;overflow-wrap:anywhere;}

  /* --- any row of pills, tabs or chips wraps instead of pushing sideways --- */
  body .chips,body .myst-tabs,body .tab-row,body .radio-group{flex-wrap:wrap;}
  body :is(div,nav,section):has(> .myst-tab, > .month-btn, > .chip, > .radio-option){
    flex-wrap:wrap;
  }
  body .myst-tab,body .month-btn,body .radio-option{white-space:normal;}

  /* --- calendar: month nav was a nowrap flex row (broken before this pass) --- */
  body .cal-month-nav{flex-wrap:wrap;gap:12px;}

  /* --- chaplet: the .rv section stayed a two-column grid at phone width --- */
  body .rv{grid-template-columns:1fr;}

  /* --- events: the location search bar wouldn't wrap its Go button --- */
  body .loc-search-wrap{min-width:0;}
  body .loc-search{flex-wrap:wrap;}
  body .loc-search input{flex:1 1 auto;min-width:0;}
  body .loc-go{flex:1 1 100%;width:100%;text-align:center;padding:13px 20px;}

  /* --- inline-styled layouts -------------------------------------------
     A lot of the site's sections are laid out with an inline
     style="display:grid;grid-template-columns:..." attribute. Inline styles
     beat every stylesheet, so those grids could never respond to a
     breakpoint — they stayed multi-column at phone width and pushed the
     page sideways. These are the only !important rules in this file, and
     they exist solely to undo that. Each pattern is targeted by name;
     the icon+text `48px 1fr` rows are deliberately left alone.
     --------------------------------------------------------------------- */
  body [style*="1.8fr 1fr 1fr 1fr"],
  body [style*="1fr 1fr"]:not([style*="48px"]),
  body [style*="1.1fr 0.9fr"]{ grid-template-columns:1fr !important; }

  body [style*="repeat(5,1fr)"],
  body [style*="repeat(5, 1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }

  body [style*="padding:80px"]{ padding:44px 22px !important; }
  body [style*="padding:72px"]{ padding:40px 22px !important; }
  body [style*="padding:64px"]{ padding:36px 22px !important; }
  body [style*="padding:60px"]{ padding:34px 22px !important; }
}

/* ==========================================================================
   ELEVATION PASS — September 2026
   =========================================================================
   The homepage hero set a register: a dark ground, cream type, one gold
   hairline, and no ornament. Everything below brings the other pages onto
   that same register so the site reads as one object.

   Three rules of thumb applied throughout:
     1. A hairline instead of a box. Borders on four sides read as a widget;
        a single rule reads as typography.
     2. No glyph used as a bullet. The little ✦ before every label was the
        main thing making the site feel young — it has been replaced with
        the gold rule the homepage eyebrow uses.
     3. Air between sections, not inside boxes.

   Specificity note: this file loads BEFORE each page's inline <style>, so
   every rule here is written `body .thing` (0,1,1) to outrank the page's
   own `.thing` (0,1,0) without !important.
   ========================================================================== */

/* ---------- 1. every page header becomes a dark band ---------- */
body:not(.home) .hero,
body .page-hero,
body .cal-hero,
body .saint-hero,
body .shop-hero{
  position:relative;
  background:#182231;
  border-bottom:1px solid rgba(212,180,120,0.32);
  padding-top:clamp(122px,15vh,166px);
  padding-bottom:clamp(60px,8vh,96px);
  overflow:hidden;
}
/* NO decorative wash. Two radial gradients used to sit here trying to fake
   depth on a flat panel; faked depth always reads cheaper than either real
   depth (the homepage's photograph) or honest flatness. This is flat, and
   carries its weight with colour and a single gold rule instead. */
body:not(.home) .hero > *,
body .page-hero > *,
body .cal-hero > *,
body .saint-hero > *,
body .shop-hero > *{position:relative;z-index:2;}

/* type inside those bands */
body:not(.home) .hero .hero-title,
body .page-hero .hero-title,
body .cal-hero .cal-title-big,
body .saint-hero .saint-title,
body .shop-hero .shop-title{color:var(--chalk);letter-spacing:-0.015em;}

body:not(.home) .hero .hero-title em,
body:not(.home) .hero .hero-title .italic,
body .page-hero .hero-title em,
body .page-hero .hero-title .italic,
body .cal-hero .cal-title-big em,
body .cal-hero .cal-title-big .italic,
body .saint-hero .saint-title em,
body .shop-hero .shop-title em,
body .shop-hero .shop-title .italic{color:var(--halo-pale);font-style:italic;}

body:not(.home) .hero .hero-sub,
body:not(.home) .hero .hero-subtitle,
body .page-hero .hero-sub,
body .cal-hero .cal-sub,
body .shop-hero .shop-sub,
body .saint-hero .saint-dates{color:rgba(248,244,238,0.80);}

body:not(.home) .hero .hero-eyebrow,
body:not(.home) .hero .h-eyebrow,
body .page-hero .hero-eyebrow,
body .page-hero .eyebrow,
body .cal-hero .cal-eyebrow,
body .saint-hero .eyebrow,
body .saint-hero .saint-eyebrow,
body .shop-hero .shop-eyebrow{color:var(--halo-pale);}

/* the pull-quote in a header: a gold rule on one side, never a box */
body:not(.home) .hero .hero-quote,
body .page-hero .hero-quote{
  background:none;border:0;border-left:1px solid rgba(212,180,120,0.5);
  padding:2px 0 2px 20px;color:rgba(248,244,238,0.74);
}
body:not(.home) .hero .hero-quote *,
body .page-hero .hero-quote *{color:inherit;}

/* ---------- 2. the ✦ bullets become the gold rule ---------- */
body .hero-eyebrow::before,
body .eyebrow::before,
body .cal-eyebrow::before,
body .saint-eyebrow::before,
body .shop-eyebrow::before,
body .dc-eyebrow::before,
body .dcf-eyebrow::before,
body .sec-eyebrow::before,
body .sidebar-title::before,
body .s-card-title::before,
body .season-name::before{
  content:'';display:inline-block;vertical-align:middle;
  width:30px;height:1px;margin:-2px 13px 0 0;
  background:linear-gradient(90deg,transparent,currentColor);
  opacity:0.65;border-radius:0;
}

/* ---------- 3. the repeated ✦ ✝ ✦ flourish becomes one quiet rule ---------- */
body .tracery{height:1px;background:none;border:0;padding:0;margin:0;overflow:hidden;}
body .tracery .t-sym{display:none;}
body .t-rule.l{background:linear-gradient(90deg,transparent,rgba(74,110,154,0.26));}
body .t-rule.r{background:linear-gradient(90deg,rgba(74,110,154,0.26),transparent);}

/* ---------- 4. native selects stop looking like OS widgets ---------- */
body select{
  -webkit-appearance:none;appearance:none;
  font-family:'EB Garamond',serif;font-size:15.5px;color:var(--ink2);
  background:transparent;border:0;border-bottom:1px solid rgba(74,110,154,0.3);
  padding:7px 26px 7px 2px;cursor:pointer;border-radius:0;
  background-image:linear-gradient(45deg,transparent 50%,var(--marian) 50%),
                   linear-gradient(135deg,var(--marian) 50%,transparent 50%);
  background-position:calc(100% - 11px) 50%,calc(100% - 6px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
body select:focus{outline:0;border-bottom-color:var(--marian);}

/* ---------- 5. the multi-coloured category dots go monochrome ---------- */
body .cat-dot,body .s-chip-dot,body .pdot,body .c-dot{
  background:var(--marian2) !important;
  width:5px;height:5px;border-radius:50%;box-shadow:none;
}

/* ---------- 6. more air between sections ---------- */
body section + section{margin-top:0;}
body .sec-eyebrow{margin-bottom:16px;}

/* ---------- 7. the navigation floats over every dark header ---------- */
/* --- navigation floats over the hero, then solidifies on scroll --- */
body.hero-page nav{
  background:transparent;backdrop-filter:none;border-bottom-color:transparent;
  transition:background .45s ease,backdrop-filter .45s ease,border-color .45s ease;
}
body.hero-page nav::after{opacity:0;transition:opacity .45s ease;}
body.hero-page nav .logo,
body.hero-page nav .logo .em,
body.hero-page nav .nav-links a{color:var(--chalk);}
body.hero-page nav .logo .cx{color:var(--halo2);}
body.hero-page nav .nav-btn{color:var(--chalk);border-color:rgba(248,244,238,0.5);background:transparent;}
body.hero-page nav .nav-btn:hover{background:rgba(248,244,238,0.12);}
body.hero-page nav .burger span{background:var(--chalk);}

body.hero-page nav.solid{
  background:rgba(242,238,232,0.94);backdrop-filter:blur(20px);
  border-bottom-color:rgba(74,110,154,0.14);
}
body.hero-page nav.solid::after{opacity:0.3;}
body.hero-page nav.solid .logo,
body.hero-page nav.solid .logo .em,
body.hero-page nav.solid .nav-links a{color:var(--ink);}
body.hero-page nav.solid .logo .cx{color:var(--marian);}
body.hero-page nav.solid .nav-btn{color:var(--marian);border-color:rgba(74,110,154,0.4);}
body.hero-page nav.solid .burger span{background:var(--ink);}


/* ---------- 8. the events header joins the same register ---------- */
body .ev-hero{
  position:relative;
  background:#182231;
  border-bottom:1px solid rgba(212,180,120,0.32);
  padding-top:clamp(122px,15vh,166px);padding-bottom:clamp(60px,8vh,96px);
  overflow:hidden;
}
body .ev-hero-bg{opacity:0.20;}
body .ev-hero-inner,body .ev-hero-right{position:relative;z-index:2;}
body .ev-eyebrow{color:var(--halo-pale);}
body .ev-h1{color:var(--chalk);letter-spacing:-0.015em;}
body .ev-h1 em,body .ev-h1 .italic{color:var(--halo-pale);}
body .ev-hero-sub{color:rgba(248,244,238,0.80);}
body .ev-tracery{display:none;}

/* the three stat boxes become hairline-ruled rows — a figure and a label,
   not a card each */
body .ev-hero-stat{
  background:none;border:0;border-top:1px solid rgba(248,244,238,0.18);
  border-radius:0;box-shadow:none;padding:16px 0 14px;
}
body .ev-hero-stat:first-child{border-top:1px solid rgba(212,180,120,0.42);}
body .ev-hero-stat-n{color:var(--halo-pale);}
body .ev-hero-stat-l{color:rgba(248,244,238,0.66);}

/* ---------- 9. controls sitting on a dark header ---------- */
body .page-hero .date-btn,
body .page-hero .btn-primary,
body:not(.home) .hero .btn-primary,
body .shop-hero .notify-label{
  background:transparent;color:var(--chalk);
  border:1px solid rgba(248,244,238,0.42);
}
body .page-hero .date-btn:hover,
body .page-hero .btn-primary:hover,
body:not(.home) .hero .btn-primary:hover{
  background:rgba(248,244,238,0.12);border-color:var(--chalk);color:var(--chalk);
}
body .page-hero input,
body .page-hero select,
body .ev-hero input{
  background:rgba(248,244,238,0.08);color:var(--chalk);
  border:1px solid rgba(248,244,238,0.3);border-bottom-color:rgba(248,244,238,0.3);
}
body .page-hero input::placeholder{color:rgba(248,244,238,0.5);}
body .page-hero input[type="date"]{color-scheme:dark;}

/* ---------- 10. de-boxing the light content ---------- */
/* striped list rows read as a spreadsheet; hairlines read as a table of contents */
body .week-item{
  background:none;border-radius:0;
  border-bottom:1px solid rgba(74,110,154,0.14);padding:11px 2px;
}
body .week-list{gap:0;}
body .week-item:last-child{border-bottom:0;}
body .week-item:hover,body .week-item.active{background:none;color:var(--marian);}
body .week-item.active{box-shadow:inset 2px 0 0 var(--halo);padding-left:12px;}

/* liturgical colour dots stay meaningful but stop shouting */
body .sb-dot{width:5px;height:5px;opacity:0.85;}

/* section eyebrow rules pick up the gold on dark, marian on light */
body .page-hero .hero-eyebrow::before,
body .page-hero .eyebrow::before,
body .ev-hero .ev-eyebrow::before,
body .cal-hero .cal-eyebrow::before,
body .shop-hero .shop-eyebrow::before,
body .saint-hero .eyebrow::before,
body:not(.home) .hero .hero-eyebrow::before{opacity:0.85;}

/* ---------- 11. filled panels become ruled regions ---------- */
body .sidebar-card{
  background:none;padding:22px 0 26px;margin-bottom:26px;
  border-top:1px solid rgba(212,160,96,0.4);
}
body .sidebar-card:first-child{border-top-color:rgba(212,160,96,0.55);}

/* ---------- 12. chips: crisp, not bubbly ---------- */
body .dc-tag,body .page-chip,body .ev-chip,body .s-chip,
body .cat-soon,body .month-btn,body .radio-option,body .season-badge{
  border-radius:0;
  border-color:rgba(74,110,154,0.24);
}
body .dc-tag,body .page-chip,body .ev-chip,body .s-chip{
  background:none;
}

/* ---------- 13. sections breathe ---------- */
body section{padding-top:clamp(64px,8vh,104px);padding-bottom:clamp(64px,8vh,104px);}
body:not(.home) .hero,
body .page-hero,body .cal-hero,body .saint-hero,body .shop-hero,body .ev-hero{
  padding-top:clamp(122px,15vh,166px);padding-bottom:clamp(60px,8vh,96px);
}

/* ---------- 14. the events location bar stacks properly on a phone ---------- */
@media (max-width:640px){
  body .location-bar{flex-direction:column;align-items:stretch;gap:16px;}
  body .loc-search-wrap{width:100%;max-width:none;min-width:0;}
  body .loc-search-label{white-space:nowrap;}
  body .loc-search{flex-wrap:nowrap;}
  body .loc-search input{flex:1 1 auto;min-width:0;}
  body .loc-go{flex:0 0 auto;width:auto;padding:13px 20px;}
}


/* ==========================================================================
   TYPE — reverted to Lidia's own faces.

   A sans-serif was tried here and taken back out: she likes the serifs, and
   she is right that they are the brand. What the small type actually needed
   was size and weight, not a different family. Cinzel keeps the labels,
   Cormorant keeps the display, EB Garamond keeps the body — all of them a
   step larger and a step heavier than they were.

   The one thing kept from that experiment: EB Garamond is now set HERE
   rather than in 101 inline style attributes scattered through the markup,
   so the body face can be changed in one place from now on.
   ========================================================================== */
:root{ --ease:cubic-bezier(.22,.68,.24,1); }

body{
  font-family:'EB Garamond',Georgia,serif;
  font-size:17.5px;line-height:1.68;
}
body p,body li,body td,body dd,body .body-text,body .sec-body,body .f-p,
body .dev-sub,body .dc-desc,body .feat-desc,body .hs-v,body .hero-sub,
body .ev-hero-sub,body .cal-sub,body .shop-sub{
  font-family:'EB Garamond',Georgia,serif;font-size:17.5px;line-height:1.68;
}

/* display voice */
body h1,body h2,body h3,
body .hero-h1,body .hero-title,body .cal-title-big,body .saint-title,
body .shop-title,body .ev-h1,body .dev-title,body .feat-title,body .dir-name,
body blockquote,body .hero-quote,body .hero-latin,body .prayer,body .f-verse{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
}

/* labels keep Cinzel — bigger and heavier than they were, tracking tamed */
body .nav-links a,body .nav-dd a,body .nav-btn,body .logo,body .f-logo,
body .hero-eyebrow,body .eyebrow,body .sec-eyebrow,body .cal-eyebrow,
body .shop-eyebrow,body .saint-eyebrow,body .ev-eyebrow,body .sidebar-title,
body .h-sup-text,body .hs-k,body .f-head,body .f-copy,body .f-link,
body .hero-latin-ref,body .btn-primary,body .btn-ghost,body .hero-cta,
body .chip,body .dc-tag,body .page-chip,body .ev-chip,body .s-chip,
body .date-btn,body .month-btn,body .loc-go,body .micro{
  font-family:'Cinzel',Georgia,serif;font-weight:600;
}
body .nav-links a{font-size:13.5px;letter-spacing:0.08em;}
body .hero-eyebrow,body .eyebrow,body .sec-eyebrow,body .cal-eyebrow,
body .shop-eyebrow,body .saint-eyebrow,body .ev-eyebrow,body .sidebar-title,
body .h-sup-text,body .hs-k,body .hero-latin-ref{
  font-size:12.5px;letter-spacing:0.1em;
}
body .btn-primary,body .btn-ghost,body .hero-cta,body .nav-btn,
body .date-btn,body .month-btn,body .loc-go{font-size:13px;letter-spacing:0.08em;}

/* motion kept from the experiment — this part was working */
body a{transition:color .25s var(--ease),opacity .25s var(--ease);}
body .nav-btn,body .btn-primary,body .btn-ghost,body .chip,body .date-btn,
body .month-btn,body .loc-go,body .dc-tag,body .page-chip,body .ev-chip{
  transition:background .28s var(--ease),color .28s var(--ease),
             border-color .28s var(--ease),transform .28s var(--ease);
}
body .nav-btn:hover,body .btn-primary:hover,body .btn-ghost:hover,
body .chip:hover,body .date-btn:hover{transform:translateY(-1px);}
body .rv{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);}
body .rv.in{opacity:1;transform:none;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  body *,body *::before,body *::after{
    animation-duration:.01ms !important;transition-duration:.01ms !important;}
  body .rv{opacity:1;transform:none;}
}

/* ==========================================================================
   INTERIOR HEADERS — flat, deep, and quiet.

   The homepage hero works because it is a PHOTOGRAPH: real depth, real
   light, a real subject. The interior bands were a flat panel with two
   radial washes painted on to imitate that, which is what read as "random
   lighter areas". They are gone. What is left is one deep field, one gold
   hairline, and the type — which is all a header needs when the type is
   good. The accent colour is now the gold that is already in the palette
   rather than the pale blue that was invented for it.
   ========================================================================== */
body:not(.home) .hero,
body .page-hero,body .cal-hero,body .saint-hero,body .shop-hero,body .ev-hero{
  background:#182231;
  border-top:0;
  border-bottom:1px solid rgba(196,160,96,0.38);
}
/* the eyebrow rule and the title accent share one gold */
body:not(.home) .hero .hero-title em,
body:not(.home) .hero .hero-title .italic,
body .page-hero .hero-title em,
body .page-hero .hero-title .italic,
body .cal-hero .cal-title-big em,
body .cal-hero .cal-title-big .italic,
body .saint-hero .saint-title em{
  color:var(--halo-pale);
}
body:not(.home) .hero .hero-eyebrow,
body .page-hero .hero-eyebrow,body .page-hero .eyebrow,
body .cal-hero .cal-eyebrow,body .saint-hero .eyebrow,
body .shop-hero .shop-eyebrow,body .ev-hero .ev-eyebrow{
  color:var(--halo);
}
/* titles get the size and weight she asked for */
body:not(.home) .hero .hero-title,
body .page-hero .hero-title,body .cal-hero .cal-title-big,
body .saint-hero .saint-title,body .shop-hero .shop-title,body .ev-h1{
  font-size:clamp(42px,5vw,78px);line-height:1.0;font-weight:500;
}
body .ev-hero-bg{display:none;}

/* ==========================================================================
   INTERIOR HEADERS — back to light. Final.

   The dark bands were tried in three shades and none of them were right:
   they fought the warm, airy ground the rest of the site sits on, and they
   pushed marian blue out of the role it should be playing. The homepage
   keeps its dark hero — that is a photograph, it is the front door, and the
   contrast between it and the rest of the site is deliberate.

   Everything else goes back to light, but not back to pale-on-pale. What
   the old headers lacked was contrast and confidence, not colour:
     - the ground is warm stone with the faintest marian wash, not grey
     - the title is full-strength ink at a real display size
     - marian blue does the accent work, as it did originally
     - a gold hairline closes the band
   ========================================================================== */
body:not(.home) .hero,
body .page-hero,body .cal-hero,body .saint-hero,body .shop-hero,body .ev-hero{
  background:linear-gradient(168deg,#F7F3EC 0%,#EFF2F6 46%,#E8EEF5 100%);
  border-bottom:1px solid rgba(196,160,96,0.5);
  padding-top:clamp(120px,14vh,158px);
  padding-bottom:clamp(58px,7.5vh,92px);
}

/* titles: ink, large, and actually bold enough to carry the band */
body:not(.home) .hero .hero-title,
body .page-hero .hero-title,body .cal-hero .cal-title-big,
body .saint-hero .saint-title,body .shop-hero .shop-title,body .ev-h1{
  color:var(--ink);font-size:clamp(42px,5vw,78px);line-height:1.0;font-weight:500;
}
/* marian blue takes the accent line back */
body:not(.home) .hero .hero-title em,
body:not(.home) .hero .hero-title .italic,
body .page-hero .hero-title em,body .page-hero .hero-title .italic,
body .cal-hero .cal-title-big em,body .cal-hero .cal-title-big .italic,
body .saint-hero .saint-title em,
body .shop-hero .shop-title em,body .shop-hero .shop-title .italic,
body .ev-h1 em,body .ev-h1 .italic{color:var(--marian);}

body:not(.home) .hero .hero-sub,
body:not(.home) .hero .hero-subtitle,
body .page-hero .hero-sub,body .cal-hero .cal-sub,
body .shop-hero .shop-sub,body .saint-hero .saint-dates,
body .ev-hero-sub{color:var(--quill);}

body:not(.home) .hero .hero-eyebrow,
body:not(.home) .hero .h-eyebrow,
body .page-hero .hero-eyebrow,body .page-hero .eyebrow,
body .cal-hero .cal-eyebrow,body .saint-hero .eyebrow,
body .saint-hero .saint-eyebrow,body .shop-hero .shop-eyebrow,
body .ev-hero .ev-eyebrow{color:var(--marian);}

body:not(.home) .hero .hero-quote,body .page-hero .hero-quote{
  border-left:1px solid rgba(196,160,96,0.6);color:var(--quill);
}
body:not(.home) .hero .hero-quote *,body .page-hero .hero-quote *{color:inherit;}

/* controls on a light band go back to marian outlines */
body .page-hero .date-btn,body .page-hero .btn-primary,
body:not(.home) .hero .btn-primary,body .shop-hero .notify-label{
  background:transparent;color:var(--marian);
  border:1px solid rgba(74,110,154,0.4);
}
body .page-hero .date-btn:hover,body .page-hero .btn-primary:hover,
body:not(.home) .hero .btn-primary:hover{
  background:var(--marian);border-color:var(--marian);color:#fff;
}
body .page-hero input,body .page-hero select,body .ev-hero input{
  background:rgba(255,255,255,0.7);color:var(--ink);
  border:1px solid rgba(74,110,154,0.28);
}
body .page-hero input::placeholder{color:var(--dust);}
body .page-hero input[type="date"]{color-scheme:light;}

/* the events stat rows on a light ground */
body .ev-hero-stat{border-top-color:rgba(74,110,154,0.18);}
body .ev-hero-stat:first-child{border-top-color:rgba(196,160,96,0.5);}
body .ev-hero-stat-n{color:var(--marian);}
body .ev-hero-stat-l{color:var(--quill);}

/* ---- the nav: cream only over the homepage photograph ---- */
body.hero-page:not(.home) nav .logo,
body.hero-page:not(.home) nav .logo .em,
body.hero-page:not(.home) nav .nav-links a{color:var(--ink);}
body.hero-page:not(.home) nav .logo .cx{color:var(--marian);}
body.hero-page:not(.home) nav .nav-btn{
  color:var(--marian);border-color:rgba(74,110,154,0.4);background:transparent;
}
body.hero-page:not(.home) nav .nav-btn:hover{background:rgba(74,110,154,0.09);}
body.hero-page:not(.home) nav .burger span{background:var(--ink);}

/* ==========================================================================
   HOMEPAGE REFINEMENT
   The hero sets a very high bar and the sections beneath it were not
   meeting it. Three things were wrong: the headline scale fell off a cliff
   after the hero, the Gospel band carried the same fake radial "shimmer"
   that was removed everywhere else, and the feature grid was numbered for
   no reason. Fixed below.
   ========================================================================== */

/* ---- the Gospel band: the most valuable thing on the page, treated as such ---- */
body.home .gospel-shimmer{display:none;}            /* the fake radial glow, again */
body.home .gospel{
  background:linear-gradient(172deg,#E7EEF7 0%,#DFE9F4 100%);
  border-top:1px solid rgba(196,160,96,0.42);
  border-bottom:1px solid rgba(196,160,96,0.42);
  padding:clamp(64px,9vh,110px) clamp(24px,6vw,80px);
  gap:clamp(28px,5vw,72px);align-items:start;
}
body.home .g-title{
  font-size:clamp(38px,4.6vw,68px);line-height:1.02;font-weight:500;
  color:var(--ink);margin-bottom:14px;
}
body.home .g-ref{font-size:12.5px;letter-spacing:0.1em;color:var(--marian);}
body.home .g-nabre{color:var(--dust);}
/* the Gospel text itself is the point — give it real size and a gold rule */
body.home .g-text{
  font-size:clamp(20px,1.9vw,26px);line-height:1.55;color:var(--ink2);
  border-left:1px solid rgba(196,160,96,0.6);padding-left:24px;margin-bottom:26px;
}
body.home .g-read{
  display:inline-flex;align-items:center;gap:9px;
  border-bottom:1px solid rgba(74,110,154,0.32);padding-bottom:6px;
}
body.home .g-read:hover{color:var(--ink);border-bottom-color:var(--ink);}
/* the loading label shouldn't read as a heading before the text arrives */
body.home .g-load,body.home #gLoad{color:var(--dust);font-size:11.5px;}

/* ---- section headings stop shrinking after the hero ---- */
body.home .sec-title{
  font-size:clamp(40px,4.8vw,64px);line-height:1.04;font-weight:500;
}
body.home .sec-eye{color:var(--marian);}

/* ---- the numerals on the feature grid meant nothing ---- */
body.home .feat-num{display:none;}
body.home .feat-title{font-size:clamp(24px,2.2vw,30px);font-weight:500;}
body.home .feat-card{padding:clamp(28px,3vw,44px);}
body.home .feat-link{border-bottom:1px solid rgba(74,110,154,0.28);padding-bottom:5px;}

/* ---- the stat row: bigger figures, hairlines between the bays ---- */
body.home .stats{
  background:var(--marble);
  border-top:1px solid rgba(74,110,154,0.14);
  border-bottom:1px solid rgba(74,110,154,0.14);
  padding:clamp(44px,6vh,68px) clamp(24px,6vw,80px);
}
body.home .s-num{font-size:clamp(38px,3.6vw,54px);font-weight:500;line-height:1;}
body.home .s-lbl2{color:var(--quill);font-size:11.5px;letter-spacing:0.1em;}
body.home .s-bay + .s-bay{border-left:1px solid rgba(74,110,154,0.16);}
@media(max-width:700px){
  body.home .s-bay + .s-bay{border-left:0;}
}

/* ==========================================================================
   LIVE-SITE FIXES — found by finally looking at domusdeo.com itself
   ========================================================================== */

/* 1. The ✦ glyph was never actually removed.
      The earlier rule won on width/height/background but LOST on `content`
      to a more specific page rule, so every eyebrow was rendering a 30px
      gold rule with the diamond still sitting inside it. This settles it. */
body .hero-eyebrow::before,
body .eyebrow::before,
body .cal-eyebrow::before,
body .saint-eyebrow::before,
body .shop-eyebrow::before,
body .dc-eyebrow::before,
body .dcf-eyebrow::before,
body .sec-eyebrow::before,
body .sidebar-title::before,
body .s-card-title::before,
body .season-name::before,
body .ev-eyebrow::before,
body .panel-eye::before,
body .sacr-eye::before,
body .h-tag::before{
  content:'' !important;
  display:inline-block;vertical-align:middle;overflow:hidden;
  width:30px;height:1px;margin:-2px 13px 0 0;
  background:linear-gradient(90deg,transparent,currentColor);
  opacity:0.65;
}

/* 2. The navigation was colliding with its own CTA button.
      Enlarging the nav links (10px -> 13.5px) widened that row by ~240px,
      and between 900px and about 1440px the links ran straight through the
      "Find Mass Near Me" button — 79px of overlap on a 1280px laptop, which
      is one of the most common screen widths there is. Below 1120px the CTA
      steps aside (the burger still carries it); between there and 1440px the
      links tighten instead of shrinking back to unreadable. */
@media (max-width:1120px){
  body nav .nav-btn{display:none;}
}
@media (min-width:901px) and (max-width:1440px){
  body nav{padding:0 30px;}
  body nav .nav-links{gap:18px;}
  body nav .nav-links a{font-size:12px;letter-spacing:0.04em;}
}

/* ---------- rounded buttons, back by request ----------
   These came in with the sans-serif experiment and were lost when that
   whole block was reverted — the radius had nothing to do with the fonts. */
body .nav-btn,body .btn-primary,body .btn-ghost,
body .chip,body .dc-tag,body .page-chip,body .ev-chip,body .s-chip,
body .date-btn,body .month-btn,body .loc-go,body .sb-btn,body .submit-btn,
body .cat-soon,body .season-badge,body .s-go,body .novena-tab,
body .myst-tab,body .radio-option,body .sb-date-btn,body .filter-chip{
  border-radius:999px;
}
body .btn-primary,body .btn-ghost{padding:13px 26px;}
body .date-btn,body .month-btn{padding:10px 20px;}
/* the underlined text links stay square — a pill would make them look like buttons */
body .hero-cta,body .f-link,body .g-read,body .feat-link,body .dc-link{border-radius:0;}

/* ==========================================================================
   ROUND 2 — cosmetic pass
   ========================================================================== */

/* ---- the gold divider had a hole in the middle ----
   .tracery was a flex row of two fading rules with a 20px gap between them
   for the ✦ ✝ ✦ ornament that used to sit there. The ornament is gone; the
   gap stayed, so every divider on the site had a break in its centre. It is
   now one continuous gold hairline. */
body .tracery{
  height:1px;gap:0;border:0;padding:0;margin:0;overflow:visible;
  background:linear-gradient(90deg,transparent,rgba(196,160,96,0.55) 16%,
             rgba(196,160,96,0.55) 84%,transparent);
}
body .tracery .t-rule,body .tracery .t-sym{display:none;}

/* ---- every button rounds, including the ones the first pass missed ---- */
body button,
body .rank-chip,body .readings-btn,body .sb-submit,body .ev-tag,
body .ev-cta-btn,body .h-btn,body .lit-tab,body .usccb-link,
body .notify-btn,body .exam-btn,body .modal-btn,body .nd-btn,
body input[type="submit"],body input[type="button"]{
  border-radius:999px;
}
/* cards and row links are not buttons and stay square */
body .dev-card,body .dev-card-featured,body .card,body .feat-card,
body .ev-card,body .c-card,body .sidebar-card,body .exam-cat,
body .reading-link,body .g-read,body .hero-cta,body .f-link,body .feat-link{
  border-radius:0;
}

/* ---- quote of the day (replaces Today's Gospel) ---- */
body.home .quote-day{
  background:linear-gradient(172deg,#E7EEF7 0%,#DFE9F4 100%);
  border-top:1px solid rgba(196,160,96,0.42);
  border-bottom:1px solid rgba(196,160,96,0.42);
  padding:clamp(60px,9vh,104px) clamp(24px,6vw,80px);
}
body.home .qd-inner{max-width:60ch;margin:0 auto;text-align:center;}
body.home .qd-eyebrow{
  font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:12.5px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--marian);
  margin-bottom:26px;
}
body.home .qd-text{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(26px,3.4vw,46px);line-height:1.24;color:var(--ink);
  margin:0 0 22px;text-wrap:balance;
}
body.home .qd-source{
  font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:12px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--quill);
  margin-bottom:30px;
}
body.home .qd-link{
  font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:12.5px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--marian);
  text-decoration:none;border-bottom:1px solid rgba(74,110,154,0.32);
  padding-bottom:6px;display:inline-flex;align-items:center;gap:9px;
}
body.home .qd-link:hover{color:var(--ink);border-bottom-color:var(--ink);}
body.home .qd-link .qd-arr{transition:transform .25s var(--ease);display:inline-block;}
body.home .qd-link:hover .qd-arr{transform:translateX(5px);}

/* the devotions section lost its illustration column */
body.home .devotions{grid-template-columns:1fr;}

/* ---- calendar: the month grid had ragged rows ----
   Cell heights were coming out at 14px, 19px, 38px, 57px, 92px, 99px in the
   same grid depending on whether a day carried a saint, so the month read as
   a broken comb. Every cell now holds the same floor and stacks from the top. */
body .cal-grid > *,
body .cal-day,
body [class*="cal-day"]{
  min-height:108px;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:10px 11px;
}
body .cal-day-num{font-variant-numeric:tabular-nums;line-height:1;}
body .cal-day-saint{line-height:1.35;}
/* the leading and trailing blanks stop competing with real days */
body .cal-day.empty,body .cal-day:empty{background:rgba(74,110,154,0.03);min-height:108px;}
/* the season legend reads as a legend, not a row of buttons */
body .season-chips{gap:8px;flex-wrap:wrap;}
body .s-chip{border-radius:999px;padding:7px 14px;}

@media(max-width:700px){
  body .cal-grid > *,body .cal-day,body [class*="cal-day"]{min-height:74px;padding:7px 8px;}
}