/* ============================================================
   home.css — rules from styles.css used by one page, /.
   They were moved here so that no other page downloads them; their
   order, and the comments that went with them, are as they were.
   Linked straight after styles.css (and any family sheet).
   ============================================================ */

/* The hero's doors — the two calls to action and the Blessed Mother shortcut —
   on a band of their own directly under the picture, so nothing but the title,
   the line under it and the slide credit sits over the artwork. The ground is
   the masthead's own espresso, so the band reads as the foot of the hero
   rather than as a new section, with one hairline where the picture ends. Every
   colour below was set for that dark ground and is unchanged by the move: the
   champagne labels and the white monogram need it. */
.masthead-doors{
  background:var(--espresso);color:var(--paper);text-align:center;
  border-top:1px solid var(--rule-dark);padding:30px 0 40px;
}
/* Masthead call to action — gold rule on a smoked pane, inverting to solid gold
   on hover. Scoped under .masthead-doors so the hover colours outrank the global
   a:hover rule, which is more specific than a bare class would be. */
.masthead-doors .masthead-cta{
  display:inline-block;margin-top:32px;padding:14px 32px;border-radius:2px;
  font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;line-height:1;
  color:var(--champagne);background:rgba(26,18,11,.38);
  border:1px solid var(--champagne);text-decoration:none;
  transition:background-color .25s ease,color .25s ease,box-shadow .25s ease;
}
@media(max-width:540px){.masthead-doors .masthead-cta{padding:13px 28px;letter-spacing:.16em;}}
/* Three calls to action now (the Faith, the latest essay, Catholic News), so
   they need a row that wraps rather than inline-blocks colliding on a narrow
   screen. The row carries the space the
   single button used to carry on itself; below 480px they stack, because two
   uppercase letterspaced labels do not sit side by side on a phone. */
.masthead-doors .masthead-actions{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px;
}
.masthead-doors .masthead-actions .masthead-cta{margin-top:0;}
@media(max-width:480px){
  .masthead-doors .masthead-actions{flex-direction:column;gap:12px;}
  .masthead-doors .masthead-actions .masthead-cta{width:100%;max-width:290px;text-align:center;}
}
.masthead-marian-mark{
  width:76px;height:auto;flex:none;
  filter:drop-shadow(0 0 14px rgba(201,168,90,.35));
}
.masthead-marian-text{display:flex;flex-direction:column;gap:3px;}
.masthead-marian-kicker{
  font-family:var(--display);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--champagne);
}
.masthead-doors .masthead-marian:hover .masthead-marian-title,
.masthead-doors .masthead-marian:focus-visible .masthead-marian-title{color:var(--champagne);}
.masthead-marian-desc{font-family:var(--body);font-style:italic;font-size:15px;color:var(--muted-dark);}
@media(max-width:480px){
  .masthead-doors .masthead-marian{flex-direction:column;text-align:center;gap:10px;padding:16px 20px;max-width:290px;}
  .masthead-marian-mark{width:68px;}
}
/* The slideshow's credits — one line per slide, stacked in a single grid cell
   so the box is as tall as the longest credit and the hero does not jump when
   a shorter one comes round. They fade with the slide they name, on the same
   1.6s, and wear .pagehead-credit's type and its .72 alpha: the line sits at
   the foot of the hero, where the veil is at its darkest. A baked still has no
   credit here to match it, so the lines leave with the slides. */
.masthead-credits{
  display:grid;max-width:640px;margin:26px auto 0;
  font-family:var(--display);font-size:10px;font-weight:500;
  letter-spacing:.18em;line-height:1.5;text-transform:uppercase;
  color:rgba(246,241,230,.72);
}
.masthead-credit{grid-area:1/1;opacity:0;transition:opacity 1.6s ease-in-out;}
@media(max-width:640px){
  .masthead-credits{font-size:9px;letter-spacing:.14em;padding:0 8px;}
}
@media(prefers-reduced-motion:reduce){
  .masthead-credit{transition:none;}
}

/* HOME / THE AIM, AS A LEDE
   The Aim was a full section with a heading and two verses under it. It is
   three sentences and a door to /about now, so it takes a lede's air rather
   than a section's band, and it sits on the same paper as the liturgical strip
   directly below so the two read as one piece of front matter. */
.home-lede{padding:38px 0 34px;background:var(--paper-card);}
@media(max-width:540px){.home-lede{padding:30px 0 28px;}}

/* HOME / THE SCRIPTURE PULL QUOTE
   One verse, set between the pillars and the subscribe form. .pullquote is the
   component the essays use and it draws its own opening quotation glyph; this
   text carries its own marks, so it is set from the same tokens instead.
   gold-deep on paper is 5.1:1 — the same pairing the verse had inside .aim. */
.home-scripture-sec{padding:54px 0 58px;border-top:1px solid var(--rule);}
.home-scripture{margin:26px 0 0;text-align:center;}
.home-scripture cite{
  display:block;font-family:var(--display);font-style:normal;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
@media(max-width:540px){.home-scripture-sec{padding:40px 0 44px;}}

/* LATEST WRITING (home page) */
/* Generated by scripts/build-latest-writing.mjs from the newest dated entries
   in articles.html, so every class below is reached from exactly one place. The
   card is a <div>-shaped <article> with the title link stretched over it rather
   than an <a> wrapping everything: the description holds em-dashes and the odd
   <em>, and a card with two anchors in it — title and "Read →" — would announce
   each essay twice to a screen reader and cost two tab stops for one
   destination. So the title is the only link, it covers the whole tile, and
   "Read →" is a span. Same pattern as the four pillars below. */
.latest-sec{padding:48px 0 32px;}
.latest-heading{text-align:center;font-size:clamp(24px,3.6vw,36px);margin-top:10px;margin-bottom:32px;}

.latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:var(--wide);margin:0 auto;}

/* The plate at the head of a card. Inset inside the card's padding rather than
   bled to its edges: a picture running edge to edge under a headline is the
   feed idiom, and this is a study. Being inset also means width:100% is
   correct at every breakpoint, with no arithmetic to keep in step with the
   card's padding when it changes at 900px.

   Present only when all three essays in the row have a picture — see
   scripts/build-latest-writing.mjs — so the aspect ratio here never has to
   stand in for a missing one. */
.latest-thumb{
  display:block;width:100%;height:auto;
  aspect-ratio:16/10;object-fit:cover;
  margin-bottom:20px;border-radius:2px;
  box-shadow:0 0 0 1px var(--rule);
  filter:saturate(.72) sepia(.12) contrast(1.08);
}
/* The feature is the full 1120px. At 16:10 its plate would stand 700px tall
   and the three essays under it would start below the fold. */
.latest-feature .latest-thumb{aspect-ratio:3/1;margin-bottom:24px;}
.latest-card{
  position:relative;display:flex;flex-direction:column;
  padding:28px 26px 24px;border:1px solid var(--rule);border-radius:4px;
  background:#fff;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}

/* The topic is a label here, not a door. /articles carries no topic link
   beside its entries, and adding one would put a second anchor under the
   stretched title. The hover paint that the chips wear elsewhere is therefore
   switched off — it can never fire under the overlay anyway, and a label that
   looks live is a promise the card does not keep. */
.latest-topic{margin-bottom:12px;}
.latest-card .topic-chip{cursor:default;}

.latest-title{font-size:clamp(22px,2.4vw,27px);line-height:1.14;margin-bottom:10px;}
.latest-card:hover .latest-title a{color:var(--gold-deep);}
.latest-dek{font-size:17px;line-height:1.5;color:var(--muted);margin-bottom:16px;}

/* margin-top:auto so the date sits on the floor of every card whatever the
   length of the description above it, and the three line up across the row. */
.latest-meta{
  font-family:var(--display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:auto;
}
.latest-meta time{color:var(--gold-deep);}
.latest-dot{margin:0 .62em;}
.latest-more{margin-top:14px;}

/* The stretched link. The focus ring is drawn on the overlay rather than the
   anchor's own box so that the keyboard outlines the tile a reader is about to
   open, not just the wrapped title text inside it. */
.latest-link::after{content:"";position:absolute;inset:0;border-radius:4px;}
.latest-link:focus-visible{outline:none;}
.latest-link:focus-visible::after{outline:2px solid var(--gold-deep);outline-offset:3px;}

/* The optional featured essay: the same card, given room. Size is the whole
   signal — no ribbon, no second accent, nothing the liturgical colour would
   have to argue with. */
.latest-feature{max-width:var(--wide);margin:0 auto 24px;padding:36px 34px 32px;}
.latest-feature .latest-title{font-size:clamp(27px,4vw,40px);margin-bottom:12px;}
.latest-feature .latest-dek{font-size:19px;max-width:64ch;margin-bottom:18px;}

.latest-all{text-align:center;margin-top:36px;}

/* Three across needs ~330px a card to keep the titles off four lines. Below
   that it goes straight to one column: two cards and an orphan reads worse
   than a short stack, and this is a study, not a feed. */
@media(max-width:900px){
  .latest-grid{grid-template-columns:1fr;gap:18px;}
  .latest-card{padding:24px 22px 22px;}
  .latest-feature{padding:28px 24px 24px;margin-bottom:18px;}
  .latest-feature .latest-dek{font-size:18px;}
}
@media(prefers-reduced-motion:reduce){
  .latest-card{transition:none;}
  .latest-card:hover,
  .latest-card:has(a:focus-visible){transform:none;}
}
.begin-here-heading{text-align:center;font-size:clamp(24px,3.6vw,36px);margin-top:10px;margin-bottom:14px;}
/* The ornament and one-line lede under the heading give the band the same
   opening the Scripture pull quote has, so the list starts after a pause
   rather than straight under the title. */
.begin-here-orn{margin-bottom:12px;}
.begin-here-lede{
  text-align:center;font-family:var(--head);font-style:italic;font-size:clamp(18px,2.2vw,21px);
  color:var(--muted);margin:0 auto 40px;max-width:var(--measure);
}

/* Two columns, and the same --wide measure as every other band so the list's
   edges line up with the cards above it rather than floating at some width of
   its own. The gutter is wide enough that the two columns read as two columns
   without a vertical rule between them — one more line this section does not
   need. */
.begin-here-list{
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:64px;max-width:var(--wide);margin:0 auto;list-style:none;
}
/* Hairlines *between* entries, which is not the same as a rule on every entry:
   the first row's border is taken off so the list does not open with a line
   directly under the heading, and there is none trailing after the last row
   either. Because the two cells of a grid row share a top edge, the two
   segments of the divider land on the same line however uneven the blurbs
   above them are. */
/* Each entry is a medallion beside a text column: still no card, no frame and
   no fill, only the ring around the icon and the rules between rows. */
.begin-here-item{
  display:grid;grid-template-columns:58px 1fr;column-gap:20px;align-items:start;
  padding:26px 0 28px;border-top:1px solid var(--rule);
}
.begin-here-item:nth-child(-n+2){border-top:0;padding-top:0;}
.begin-here-item-title{
  font-family:var(--head);font-weight:600;font-size:clamp(22px,2.4vw,26px);line-height:1.2;
  color:var(--ink);margin-bottom:8px;
}
/* The Latin imperative over each title — Disce, Ora, Lege, Vive. gold-deep on
   this paper is 5.1:1, so it passes AA at this small size where --gold would not. */
.begin-here-latin{
  display:block;margin-bottom:4px;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);
}
/* The medallion: a hairline ring in the day's accent, a faint halo inside it.
   Its color is set by the liturgical block, like the icon's, and the ring is
   drawn from currentColor so the two always match. */
.begin-here-mark{
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;color:var(--gold);
  border:1px solid color-mix(in srgb,currentColor 55%,transparent);
  box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px color-mix(in srgb,currentColor 24%,transparent);
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,currentColor 10%,#fff),color-mix(in srgb,currentColor 4%,#fff) 72%);
}
/* The inner ring above is a gap of the section's own white, so the medallion
   reads as a double hairline rather than a ring with an off-white band in it.
   When the entry's title is hovered or focused the inner hairline firms up —
   a change of weight, not of position. */
.begin-here-item:has(.begin-here-link:hover,.begin-here-link:focus-visible) .begin-here-mark{
  box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px color-mix(in srgb,currentColor 45%,transparent);
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,currentColor 15%,#fff),color-mix(in srgb,currentColor 6%,#fff) 72%);
}
.begin-here-body{min-width:0;}
/* The four line icons — an open book under a cross, a rosary of ten beads, a
   scroll, and a calendar marked with a cross for the feast — are drawn on one
   24px grid with one 1.3 stroke, so none of them looks heavier than the rest.
   They are inline SVG stroked in currentColor, which is the whole reason the
   class stays on the <svg> itself: the accent block near the end of this file
   sets `color` here, so they keep taking the day's liturgical colour. */
.begin-here-icon{display:block;width:28px;height:28px;color:var(--gold);}
/* The title is the only link to the pillar now. The stretched ::after overlay
   that made the whole card clickable is gone with the card — an entry in a list
   has no edges to stretch to, and a hit area with no visible boundary is a
   promise the layout no longer makes. Ink, not gold, and no underline until it
   is hovered or focused, exactly as the step links in the band above. */
.begin-here-link{color:var(--ink);text-decoration:none;}
.begin-here-link:focus-visible{
  outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
}
/* Thicken on hover, do not lighten. --gold on 17px text over this section is
   3.8:1, under the 4.5:1 AA needs, so gold-deep is the one that can carry
   text — the same call .howto-links li::marker makes further down. These two
   inline links keep the underline they always had: they sit inside a sentence,
   where an underline is the only thing marking them out. */
.begin-here-alt{color:var(--gold-deep);text-decoration:underline;text-decoration-color:var(--champagne);text-underline-offset:2px;text-decoration-thickness:1px;transition:text-decoration-thickness .2s,text-decoration-color .25s;}
.begin-here-item .begin-here-alt:hover{text-decoration-thickness:2px;}
.begin-here-alt:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px;}
/* One column below 640px, where the second row's divider has to come back: in a
   single column every entry but the first is preceded by one. */
@media(max-width:639px){
  .begin-here-list{grid-template-columns:1fr;column-gap:0;}
  .begin-here-item:nth-child(2){border-top:1px solid var(--rule);padding-top:26px;}
  .begin-here-item{grid-template-columns:48px 1fr;column-gap:16px;}
  .begin-here-mark{width:48px;height:48px;}
  .begin-here-icon{width:24px;height:24px;}
}
@supports (color:color-mix(in srgb,red 50%,transparent)){
  .howto-sec{background-color:color-mix(in srgb,var(--paper) 96.5%,var(--ink));}
}
/* The rule between the panel above and this band belongs to the band. Written
   as :has so the dependency is stated rather than assumed: move the band and
   the panel takes its own bottom edge back. */
.litcal-panel-sec:has(+.howto-sec){border-bottom:0;}
.howto-sec .howto-paths{text-align:left;}
.howto-heading{text-align:center;font-size:clamp(22px,3.2vw,32px);margin-top:10px;margin-bottom:10px;}
/* One line of instruction, because the cards only make sense read as paths:
   find your door, then walk it in order. */
.howto-lede{text-align:center;font-size:17px;line-height:1.5;color:var(--muted);margin:0 auto 32px;max-width:42ch;}

.howto-paths{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:var(--wide);margin:0 auto;}
/* The gold left stripe is gone. It was carried over from the stacked version,
   and against four numbered cards it read as a fifth piece of gold competing
   with the numerals — a full hairline on all four sides, radius all round, is
   quieter and lets the numeral be the only thing announcing the card.

   Flex column so the step list can be pinned to the bottom with margin-top:auto
   below. The grid stretches the cards to equal height already; that is what
   makes the four hairlines above the lists land on the same line across the
   row, however long the descriptions run. */
.howto-path{
  display:flex;flex-direction:column;
  padding:20px 22px 18px;background:#fff;
  border:1px solid var(--rule);border-radius:4px;
}
/* Deliberately no hover on the card itself. Three separate steps sit inside it,
   so a tile that lit up as a whole would promise a click it cannot answer —
   unlike the pillars below, which are each a single link. */
/* White cards on the band's tinted paper, so each one lifts off it cleanly.
   The numeral is set large and bold in Cinzel 700 — it is the card's one
   ornament — and gold-deep on white is 5.6:1, well past AA. */
.howto-numeral{
  display:block;font-family:var(--display);font-size:24px;font-weight:700;line-height:1;
  letter-spacing:.08em;color:var(--gold-deep);margin-bottom:10px;
}
.howto-path-title{font-family:var(--head);font-size:19px;line-height:1.2;margin-bottom:6px;color:var(--ink);}
.howto-path-desc{font-size:16px;line-height:1.45;color:var(--muted);margin:0 0 16px;}

/* The step list, pinned to the bottom of the card. The hairline is the list's
   own top border rather than an element of its own, so it cannot drift away
   from the thing it divides. */
.howto-links{
  list-style:decimal outside;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--rule);
}
.howto-links li+li{margin-top:9px;}
/* The step numbers are the second place gold appears on the card, and the only
   other one besides the numeral and the arrow. --gold-deep rather than --gold
   for the same reason as .begin-here-alt above: at this size --gold lands on
   3.8:1 against the card and AA wants 4.5:1. */
.howto-links li::marker{color:var(--gold-deep);font-family:var(--display);font-size:13px;}
/* Step one is where the reader is meant to begin, so it is the one line at full
   ink, a little heavier, with the arrow the rest of the site uses for "onward"
   (.readmore .arr). */
.howto-step-lead{color:var(--ink);}
.howto-arr{color:var(--gold-deep);transition:transform .25s;display:inline-block;}
.howto-links a:hover .howto-arr{transform:translateX(4px);}
@media(prefers-reduced-motion:reduce){
  .howto-arr{transition:none;}
  .howto-links a:hover .howto-arr{transform:none;}
}
/* 4 / 2 / 1. Wider fold points than the pillar grid below, because a card now
   carries a description and three steps rather than two words: at 820px four of
   them were already too narrow, and two across holds the line down to the
   phone. */
@media(max-width:1024px){.howto-paths{grid-template-columns:repeat(2,1fr);gap:18px;}}
@media(max-width:639px){
  .howto-paths{grid-template-columns:1fr;gap:14px;}
  /* A 400px pool is wider than the phone, which turns the glow into a flat
     wash over the whole band. Drawn smaller, and a little higher, it stays a
     pool of light behind the heading. */
  .howto-sec{background-image:radial-gradient(circle 260px at 50% 84px,
    rgba(154,122,46,.05) 0%, rgba(154,122,46,.02) 52%, rgba(154,122,46,0) 100%);}
}

/* 2 ── the line icons beside the pillar titles ── */
/* They are stroked in currentColor, so setting `color` here is all it takes —
   exactly as it was when this was four copies of a ☩ glyph. */
.begin-here-icon,.begin-here-mark{color:var(--lit-accent);transition:var(--lit-fade);}

/* ═══════════════════════════════════════════════════
   TODAY IN THE CHURCH — the card beneath the masthead
   ═══════════════════════════════════════════════════
   This was a one-line strip for a long time, and a strip is what you build when
   the day is a footnote. It is not a footnote on this site, so it is a card: the
   label, the date, the feast in the largest type the homepage carries after the
   masthead, the rank and the season on one line, and two doors out — today's
   Scripture and the full calendar.

   The wrapper keeps the class name .litcal-panel because the bake, the edge
   function and the client all find it by that name. Only its contents changed.
   ═══════════════════════════════════════════════════ */

.litcal-panel-sec{
  padding:34px 0 38px;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}

/* On a phone the Roman date takes its own line rather than disappearing, and
   below 560px the three doors still share one row: the letterspacing eases,
   and a label too long for its third of the width wraps inside its own
   button — the three stay the same height — rather than the row breaking. */
@media(max-width:640px){
  .litcal-panel-sec{padding:26px 0 30px;}
}

/* Printed, the card is a short block of text: the band, the circle, the shadow
   and the hover affordance mean nothing on paper. The day, the feast and the
   citation still do, so the reading keeps its label with the button chrome
   stripped off it. */
@media print{
  .litcal-panel-sec{border:0;padding:0;}
}

/* ── Slideshow pictures ──
   With JavaScript, masthead.js picks each slide's picture for this screen and
   sets --masthead-pick; index-head.js has already set data-masthead on <html>,
   so the first slide's fallback in --masthead-image is never fetched too.
   Without JavaScript the attribute is absent and the fallback draws. */
html[data-masthead="js"] .masthead-slide{background-image:var(--masthead-pick,none);}