/* ============================================================
   the-blessed-mother.css — the-blessed-mother's own styles, moved out of the <style>
   block that followed styles.css in the-blessed-mother.html.
   Linked from the same place in the page, so the order is unchanged.
   ============================================================ */

/* ── Rules from styles.css used only by this page ── */

.sec-title{text-align:center;font-size:clamp(26px,4vw,40px);margin-bottom:10px;}

/* ── The page's own rules, from its <style> block ── */

:root{
  --marian-blue:#16335c;
  --marian-blue-deep:#0d2240;
  --marian-blue-mid:#1f4778;
  --gold:#c9a24b;
  --gold-bright:#e3c474;
  --ivory:#f6f1e4;
  --ivory-dim:#e9dfc9;
  --parchment:#fbf8f0;
  --ink:#23262d;
  --ink-soft:#4a4f59;
  --rule:#d8cba6;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'EB Garamond',Garamond,serif;
  color:var(--ink);
  background:var(--parchment);
  line-height:1.5;
  font-size:19px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- decorative atmosphere ---------- */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(227,196,116,.18), transparent 55%),
    linear-gradient(180deg,var(--marian-blue-deep) 0%,var(--marian-blue) 60%,var(--marian-blue-mid) 100%);
  color:var(--ivory);
  padding:clamp(80px,14vh,150px) 24px clamp(64px,10vh,110px);
  text-align:center;
  overflow:hidden;
}
/* painting behind the hero — Leonardo's Annunciation */
.hero-art{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("images/the-blessed-mother-masthead.webp") center 36% / cover no-repeat;
  filter:saturate(.76) contrast(1.06);
}
/* veil that keeps the type legible and pulls the panel toward Marian blue */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(9,24,46,.58),transparent 24%,transparent 76%,rgba(9,24,46,.58)),
    radial-gradient(ellipse at 50% 20%, rgba(227,196,116,.14), transparent 58%),
    linear-gradient(180deg,rgba(13,34,64,.80) 0%,rgba(22,51,92,.70) 46%,rgba(13,34,64,.90) 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:2;
  background-image:radial-gradient(circle at 1px 1px, rgba(227,196,116,.35) 1px, transparent 0);
  background-size:46px 46px;
  opacity:.12;mask-image:radial-gradient(ellipse at center,#000,transparent 75%);
}
.hero-stars{position:absolute;top:38px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:2;}
.hero-stars span{color:var(--gold-bright);font-size:13px;opacity:.85;}
.hero-kicker{
  position:relative;z-index:2;
  font-family:'Cinzel',serif;letter-spacing:.42em;text-transform:uppercase;
  font-size:13px;color:var(--gold-bright);margin-bottom:30px;font-weight:500;
}
.hero-monogram{
  position:relative;z-index:2;display:block;
  width:clamp(72px,11vw,108px);height:auto;margin:0 auto 22px;
  filter:drop-shadow(0 2px 22px rgba(0,0,0,.4));opacity:.96;
}
.hero h1{
  position:relative;z-index:2;color:#fff;
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(48px,9vw,104px);line-height:.98;letter-spacing:-.01em;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero h1 em{font-style:italic;color:var(--gold-bright);display:block;font-size:.52em;font-weight:500;margin-top:.35em;letter-spacing:.01em;}
.hero-sub{
  position:relative;z-index:2;max-width:620px;margin:34px auto 0;
  font-size:21px;font-style:italic;color:var(--ivory-dim,#e9dfc9);line-height:1.6;
}
.hero-scripture{
  position:relative;z-index:2;margin-top:46px;font-family:'Cormorant Garamond',serif;
  font-size:24px;font-style:italic;color:var(--ivory);opacity:.92;
}
.hero-scripture cite{display:block;font-style:normal;font-family:'Cinzel',serif;font-size:12px;letter-spacing:.25em;color:var(--gold-bright);margin-top:14px;text-transform:uppercase;}
.hero .pagehead-credit{position:relative;z-index:2;margin-top:34px;}

/* ---------- layout shell ---------- */
.ll-wrap{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:0 26px;}
.ll-wrap.ll-main{padding-top:clamp(28px,5vw,56px);}

/* ---------- sections ---------- */
section{padding:30px 0 56px;scroll-margin-top:30px;}
.sec-num{
  font-family:'Cinzel',serif;font-size:12px;letter-spacing:.3em;color:var(--gold);
  text-transform:uppercase;display:block;margin-bottom:10px;
}
h2.sec-title{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(34px,5.5vw,52px);line-height:1.05;color:var(--marian-blue-deep);
  letter-spacing:-.01em;margin-bottom:8px;
}
.sec-lede{
  font-size:21px;font-style:italic;color:var(--ink-soft);margin:14px 0 30px;
  padding-bottom:26px;border-bottom:1px solid var(--rule);line-height:1.55;
}
h3{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-size:28px;
  color:var(--marian-blue);margin:40px 0 12px;line-height:1.15;
}
h4{
  font-family:'Cinzel',serif;font-weight:600;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin:30px 0 10px;
}
:where(main, footer) p{margin:0 0 .85em;}
p .first-letter{
  float:left;font-family:'Cormorant Garamond',serif;font-size:74px;line-height:.72;
  color:var(--marian-blue);margin:8px 12px -4px 0;font-weight:600;
}
strong{font-weight:600;color:var(--marian-blue-deep);}
em.term{font-style:italic;color:var(--marian-blue-mid);font-weight:500;}

a.ref{
  color:var(--marian-blue-mid);text-decoration:none;
  border-bottom:1px dotted var(--gold);transition:all .15s;
}
a.ref:hover{color:var(--gold);border-bottom-style:solid;}

/* ---------- scripture & quote blocks ---------- */
blockquote.scripture{
  margin:28px 0;padding:24px 30px;
  background:linear-gradient(100deg,rgba(22,51,92,.04),rgba(201,162,75,.05));
  border-left:3px solid var(--gold);
  font-family:'Cormorant Garamond',serif;font-size:23px;font-style:italic;
  color:var(--marian-blue-deep);line-height:1.5;border-radius:0 4px 4px 0;
}
blockquote.scripture cite{
  display:block;margin-top:12px;font-style:normal;font-family:'Cinzel',serif;
  font-size:11px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;
}
blockquote.saint{
  margin:26px 0;padding:22px 28px 22px 56px;position:relative;
  background:var(--marian-blue-deep);color:var(--ivory);border-radius:5px;
  font-size:19px;line-height:1.6;box-shadow:0 18px 40px -26px rgba(13,34,64,.7);
}
blockquote.saint::before{
  content:"\201C";position:absolute;left:16px;top:6px;
  font-family:'Cormorant Garamond',serif;font-size:64px;color:var(--gold);opacity:.55;
}
blockquote.saint cite{
  display:block;margin-top:14px;font-style:normal;font-family:'Cinzel',serif;
  font-size:11px;letter-spacing:.18em;color:var(--gold-bright);text-transform:uppercase;
}

/* ---------- typology table ---------- */
.typo-grid{
  margin:30px 0;border:1px solid var(--rule);border-radius:6px;overflow:hidden;
  box-shadow:0 16px 44px -32px rgba(13,34,64,.5);
}
.typo-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule);}
.typo-row:last-child{border-bottom:none;}
.typo-head{background:var(--marian-blue);color:var(--ivory);}
.typo-head>div{
  padding:14px 22px;font-family:'Cinzel',serif;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;
}
.typo-head>div:first-child{border-right:1px solid rgba(227,196,116,.3);color:var(--gold-bright);}
.typo-row>div{padding:16px 22px;font-size:17px;line-height:1.5;}
.typo-row>div:first-child{border-right:1px solid var(--rule);background:rgba(22,51,92,.03);}
.typo-row:nth-child(even)>div{background:rgba(201,162,75,.045);}
.typo-row:nth-child(even)>div:first-child{background:rgba(22,51,92,.05);}

/* ---------- callout / note ---------- */
.note{
  margin:28px 0;padding:20px 24px;border-radius:5px;
  background:#fff;border:1px solid var(--rule);
  font-size:17px;line-height:1.6;color:var(--ink-soft);
  position:relative;padding-left:54px;
}
.note::before{
  content:"\271D";position:absolute;left:20px;top:18px;color:var(--gold);font-size:22px;
}
.note.caution{background:#fdf9ee;border-color:var(--gold);}
.note strong{color:var(--marian-blue-deep);}
.truth-status{font-size:16px;color:var(--ink-soft);font-style:italic;margin:0 0 18px;}

.mystic-card{
  margin:26px 0;padding:28px 32px;border:1px solid var(--rule);border-radius:6px;
  background:linear-gradient(180deg,#fff,var(--parchment));
  box-shadow:0 18px 48px -34px rgba(13,34,64,.45);
}
.mystic-card .meta{
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:6px;
}
.mystic-card h3{margin-top:0;}
hr.fleur::after{
  content:"\2766";color:var(--gold);font-size:24px;background:var(--parchment);padding:0 18px;
}
hr.fleur{border:none;text-align:center;margin:54px 0;overflow:visible;border-top:1px solid var(--rule);line-height:0;}

/* ---------- references ---------- */
.references{background:var(--marian-blue-deep);color:var(--ivory);padding:64px 0 80px;margin-top:40px;}
.references .ll-wrap{max-width:780px;}
.references h2{
  font-family:'Cormorant Garamond',serif;font-size:40px;color:var(--ivory);
  text-align:center;margin-bottom:10px;font-weight:600;
}
.references .sub{text-align:center;color:var(--gold-bright);font-style:italic;margin-bottom:42px;font-size:18px;}
.ref-group h3{color:var(--gold-bright);font-size:21px;margin:34px 0 14px;border-bottom:1px solid rgba(227,196,116,.25);padding-bottom:8px;}
.ref-list{list-style:none;}
.ref-list li{margin-bottom:16px;font-size:16px;line-height:1.55;color:#dfe6f0;padding-left:20px;position:relative;}
.ref-list li::before{content:"\2014";position:absolute;left:0;color:var(--gold);}
.ref-list a{color:var(--gold-bright);text-decoration:none;border-bottom:1px dotted rgba(227,196,116,.5);}
.ref-list a:hover{border-bottom-style:solid;}

@media(max-width:680px){
  body{font-size:18px;}
  /* a 2.2:1 painting crops hard in a portrait hero — hold the Virgin in frame */
  .hero-art{background-position:74% 42%;}
  .hero::after{
    background:
      radial-gradient(ellipse at 50% 20%, rgba(227,196,116,.14), transparent 58%),
      linear-gradient(180deg,rgba(13,34,64,.84) 0%,rgba(22,51,92,.76) 46%,rgba(13,34,64,.92) 100%);
  }
  .typo-row{grid-template-columns:1fr;}
  .typo-row>div:first-child{border-right:none;border-bottom:1px solid var(--rule);}
  .typo-head{display:none;}
  .typo-row>div::before{display:block;font-family:'Cinzel',serif;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
  .typo-row>div:first-child::before{content:"Old Testament — Type";}
  .typo-row>div:last-child::before{content:"New Testament — Fulfillment";}
  .moses-grid .typo-row>div:first-child::before{content:"Moses";}
  .moses-grid .typo-row>div:last-child::before{content:"Jesus";}
	    .feast-grid .typo-row>div:first-child::before{content:"Date";}
	    .feast-grid .typo-row>div:last-child::before{content:"Celebration";}
	    .title-grid .typo-row>div:first-child::before{content:"Title";}
	    .title-grid .typo-row>div:last-child::before{content:"Meaning";}
	    blockquote.scripture{font-size:20px;padding:18px 22px;}
	  }

/* ---------- Protoevangelium: text left, large image sticky right ---------- */
.bm-proto-grid{
display:grid;
grid-template-columns:minmax(340px,1fr) 460px;  /* text | image — 460px is the size knob */
gap:48px;
align-items:start;

/* break this section out wider than the 820px article column */
width:min(1140px, calc(100vw - 48px));
margin-left:50%;
transform:translateX(-50%);
}
.bm-proto-text{min-width:0;}

.bm-proto-fig{
position:sticky;
top:84px;
align-self:start;
margin:0;
}
.bm-aml-frame{
border:1px solid var(--rule);
border-radius:6px;
overflow:hidden;
box-shadow:0 18px 48px -30px rgba(13,34,64,.5);
}
.bm-aml-frame img{display:block;width:100%;height:auto;}
.bm-aml-cap{
margin-top:12px;font-size:14px;font-style:italic;line-height:1.5;
color:var(--ink-soft);text-align:center;
}

/* phones/tablets: stack, full width, drop sticky + breakout */
@media(max-width:900px){
.bm-proto-grid{
  grid-template-columns:1fr;gap:10px;
  width:auto;margin-left:0;transform:none;   /* cancel the breakout */
}
.bm-proto-text{order:2;}
.bm-proto-fig{position:static;order:1;margin-bottom:18px;}
.bm-aml-cap{font-size:13px;}
}

/* ── Single-element styles, once written inline on the page ──
   Each class carries what one style="" attribute said. They sit last in
   the page's cascade, as the attributes did; where a rule elsewhere
   matched the same element more specifically, the class is doubled so it
   still wins, exactly as the attribute won. */
.u-m-0{margin:0;}
.u-m-28-0-0{margin:28px 0 0;}
.u-m-0-0-20-1p2em-lh-1p7{margin:0 0 20px 1.2em;line-height:1.7;}
.u-the-blessed-mother-4{text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;color:var(--marian-blue);margin-top:36px;}