/* ============================================================
   essay.css — rules from styles.css used by the pages it is linked from: /the-wide-path, /limbo-and-the-harrowing-of-hell, /the-beatitudes, /the-sea-in-a-seashell, /by-a-tree-we-are-saved, /must-you-die-to-meet-christ, /the-root-bears-thee, /the-last-farthing, /the-surrender-that-makes-saints, /the-fire-no-bridle-holds, /why-speak-a-dead-language, /bitter-cup-meditation, /strait-is-the-gate, /the-lost-rhythm, /the-assumption-of-mary, /the-refusal-before-the-world, /the-didache-and-the-first-christians, /reading-the-patriarchs-by-lamplight, /the-tower-we-carry, /the-battle-for-souls, /bitter-cup-theological-analysis.
   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.
   ============================================================ */

.a-rule{height:1px;background:var(--rule);max-width:120px;margin:26px auto;}
.article-figure{max-width:var(--measure);margin:0 auto 34px;}
.article-figure.article-figure-end{margin:42px auto 0;}
.article-figure img{display:block;width:100%;height:auto;border:1px solid var(--rule);box-shadow:0 18px 44px rgba(60,45,25,.12);}
.article-figure figcaption{text-align:center;font-family:var(--display);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:10px;}
.article-list-block{margin:28px 0;}
.article-list-item{border-top:1px solid var(--rule);padding-top:18px;margin-top:18px;}
.article-list-item h3{font-family:var(--display);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px;}
.article-list-item h3 .vk{font-family:var(--head);font-style:italic;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);}
.notes-block{margin-top:44px;padding-top:26px;border-top:1px solid var(--rule);}
.notes-block h2{margin-top:0;}
.notes-block ol,.notes-block ul{padding-left:22px;color:var(--muted);font-size:16px;line-height:1.55;}
.pullquote{margin:38px auto;max-width:600px;text-align:center;position:relative;}
.pullquote p{font-family:var(--head);font-style:italic;font-size:26px;line-height:1.4;color:var(--ink);}
.pullquote::before{content:"\201C";font-family:var(--display);font-size:70px;color:var(--gold);opacity:.35;display:block;line-height:.6;margin-bottom:6px;}

/* The register of the byline label directly above it rather than of a homepage
   section heading: this is the quiet end of an essay, not the top of a page. */
.keep-reading-head{
  font-family:var(--display);font-size:15px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
  text-align:center;margin-bottom:26px;
}

.keep-reading-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}

/* Same card as the homepage row, a size down: less padding, a smaller title,
   and no description, because the reader has just finished 2,000 words and
   three more paragraphs of summary is a wall, not an invitation. */
.kr-card{
  position:relative;display:flex;flex-direction:column;
  padding:22px 22px 20px;border:1px solid var(--rule);border-radius:4px;
  background:var(--paper-card);
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.kr-card:hover,
.kr-card:has(a:focus-visible){border-color:var(--champagne);box-shadow:0 6px 24px rgba(154,122,46,.12);transform:translateY(-3px);}

/* 16:10, matching .latest-thumb, and inset inside the card's padding for the
   same reasons given there. Present only when all three essays in the row have
   a picture — see scripts/build-keep-reading.mjs — so the ratio never stands
   in for one that is missing. */
.kr-thumb{
  display:block;width:100%;height:auto;
  aspect-ratio:16/10;object-fit:cover;
  margin-bottom:16px;border-radius:2px;
  box-shadow:0 0 0 1px var(--rule);
  filter:saturate(.72) sepia(.12) contrast(1.08);
}

/* A label, not a door — the same reasoning as .latest-card .topic-chip. The
   chip's hover paint can never fire under the stretched link anyway, and a
   label that looks live promises something the card does not do. */
.kr-topic{margin-bottom:10px;}
.kr-card .topic-chip{cursor:default;}
.kr-card .topic-chip:hover{background:none;color:var(--gold-deep);border-color:var(--rule);}

.kr-title{font-size:clamp(19px,1.8vw,22px);line-height:1.16;margin-bottom:12px;}
.kr-title a{color:var(--ink);transition:color .2s;}
.kr-card:hover .kr-title a{color:var(--gold-deep);}

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

/* The stretched link, as on the homepage: the title is the card's only anchor
   and its overlay covers the tile, so the whole card is clickable while a
   screen reader and the tab key meet one link per essay. The focus ring is
   drawn on the overlay so the keyboard outlines the tile about to open rather
   than the wrapped title text inside it. */
.kr-link::after{content:"";position:absolute;inset:0;border-radius:4px;}
.kr-link:focus-visible{outline:none;}
.kr-link:focus-visible::after{outline:2px solid var(--gold-deep);outline-offset:3px;}

/* ── Previous and next, by date ────────────────────────────────────────────
   Back at --measure, where the essay and the foot links sit: this is part of
   the closing apparatus rather than a third section.

   A two-column grid rather than flex with space-between, because the newest
   essay has no next and the oldest no previous, and the generated markup
   simply leaves that link out. With explicit columns the survivor keeps its
   own side — previous on the left, next on the right — instead of sliding
   across to fill the gap and pointing the wrong way. Nothing stands in for
   the missing one. */
.article-seq{
  max-width:var(--measure);margin:34px auto 0;padding:26px 32px 0;
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.article-seq-link{
  display:flex;flex-direction:column;gap:6px;
  color:var(--ink);
  border:1px solid transparent;border-radius:3px;
  /* The hover plate is bled back out of the cell so the title stays flush with
     the prose measure above it rather than being inset by the padding. The
     bleed is 10px a side, which is why the grid gap above is 24px: at the 20px
     it started on, the two plates met in the middle of the gap. */
  padding:10px 10px;margin:-10px -10px;
  transition:border-color .25s,background .25s;
}
.article-seq-prev{grid-column:1;}
.article-seq-next{grid-column:2;text-align:right;align-items:flex-end;}
.article-seq-link:hover{border-color:var(--rule);background:var(--paper-card);}
.article-seq-link:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;}

/* The direction is the small label and the essay's own name is the large
   text, so the link reads as a destination rather than as a pager control. */
.article-seq-dir{
  font-family:var(--display);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
  display:flex;align-items:center;gap:8px;
}
.article-seq-title{
  font-family:var(--head);font-size:19px;font-weight:600;line-height:1.2;
  color:var(--ink);transition:color .2s;
}
.article-seq-link:hover .article-seq-title{color:var(--gold-deep);}

/* Three across needs ~330px a card, the same floor .latest-grid works to.
   Below it the cards stack — but not as three full-width plates, which at the
   end of a long essay would be three more screens to scroll past. The plate
   moves to the side instead and the card becomes a compact row, which is the
   shape /articles already uses for a picture beside a title. */
@media(max-width:900px){
  .keep-reading-grid{grid-template-columns:1fr;gap:14px;}
  .kr-card{padding:16px 18px;}
  .kr-card:has(.kr-thumb){
    display:grid;grid-template-columns:104px 1fr;column-gap:16px;row-gap:4px;
    align-items:start;
  }
  .kr-card:has(.kr-thumb) .kr-thumb{grid-row:1 / span 3;aspect-ratio:3/2;margin-bottom:0;}
  .kr-card:has(.kr-thumb) .kr-meta{margin-top:2px;}
  .kr-title{font-size:19px;margin-bottom:8px;}
  .article-seq{padding:24px 24px 0;}
}
@media(max-width:480px){
  .kr-card:has(.kr-thumb){grid-template-columns:80px 1fr;column-gap:13px;}
  .article-seq{grid-template-columns:1fr;}
  /* One column, so the columns cannot hold the sides apart any more. Next
     keeps its own row under previous and both read from the left. */
  .article-seq-prev,.article-seq-next{grid-column:1;text-align:left;align-items:flex-start;}
}
@media(prefers-reduced-motion:reduce){
  .kr-card{transition:none;}
  .kr-card:hover,
  .kr-card:has(a:focus-visible){transform:none;}
}

/* ── ARTICLE WITH SIDE IMAGE — image-right sticky layout ──
   The centred header is left untouched; the body becomes two columns — the
   meditation on the left and a devotional image on the right that stays still
   (sticky) while the article is read, the way the Scriptural Rosary pairs each
   mystery with a stationary illustration. Collapses to a single column, image
   first, on narrow screens. */
.aml-body{
  width:min(1140px,94vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.6fr);
  gap:clamp(1.8rem,4vw,3.6rem);
  align-items:start;
}
.aml-figure{position:sticky;top:96px;margin:0;align-self:start;}
.aml-frame{
  position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--rule);
  box-shadow:0 24px 56px -30px rgba(40,28,8,.55);
  background:var(--paper-card);
}
.aml-frame::after{
  content:"";position:absolute;inset:7px;
  border:1px solid rgba(125,98,36,.20);border-radius:7px;pointer-events:none;
}
.aml-frame img{display:block;width:100%;height:auto;}
.aml-cap{
  text-align:center;font-style:italic;color:var(--gold-deep);
  font-size:.92rem;margin:.85rem .3rem 0;line-height:1.5;
}
@media(max-width:880px){
  .aml-body{width:auto;grid-template-columns:1fr;gap:0;}
  .aml-figure{position:static;top:auto;order:-1;margin:0 auto 2rem;max-width:460px;}
}
@media print{
  .aml-body{display:block;width:auto;}
  .aml-figure{position:static;break-inside:avoid;margin:0 auto 1.5rem;max-width:440px;}
}

/* ───────────────── FEATURED ARTICLE HEROES ───────────────── */
/* Each essay's picture is no longer named here. It comes from data-image on
   that essay's entry in articles.html, and scripts/build-article-images.mjs
   writes it onto the hero as an inline --article-hero-image pointing at the
   Image CDN. One source, and the banner, the thumbnail on /articles and the
   share card can no longer disagree about which painting an essay has.

   What stays is the art direction. These positions were chosen by eye against
   each particular picture, they are measured on the source frame, and no CDN
   parameter can express them — `position` there takes center/top/bottom/left/
   right and nothing finer. So the CDN call carries a width only, the picture
   keeps its proportions, and these percentages keep meaning what they meant.
   An essay with no data-image simply has no --article-hero-image and the hero
   below falls through to its gradient. */
.article-hero-page{padding:0 0 40px;}
.article-hero-strait{
  --article-hero-position:center 58%;
  --article-hero-position-mobile:center 54%;
}
.article-hero-refusal{
  --article-hero-position:center 48%;
  --article-hero-position-mobile:center 50%;
}
.article-hero-root-bears{
  --article-hero-position:center 50%;
  --article-hero-position-mobile:center 50%;
}
.article-hero-tower{
  --article-hero-position:center 42%;
  --article-hero-position-mobile:center 46%;
}
.article-hero-latin{
  --article-hero-position:center 40%;
  --article-hero-position-mobile:58% 42%;
}
.article-hero-battle{
  --article-hero-position:center 38%;
  --article-hero-position-mobile:center 42%;
}
.article-hero-rhythm{
  --article-hero-position:center 55%;
  --article-hero-position-mobile:center 60%;
}
.article-hero-surrender{
  --article-hero-position:center 36%;
  --article-hero-position-mobile:center 40%;
}
.article-hero-fire{
  --article-hero-position:center 50%;
  --article-hero-position-mobile:center 52%;
}
.article-hero-didache{
  --article-hero-position:center 45%;
  --article-hero-position-mobile:center 48%;
}
.article-hero-patriarchs{
  --article-hero-position:center 42%;
  --article-hero-position-mobile:center 46%;
}
.article-hero-assumption{
  --article-hero-position:center 47%;
  --article-hero-position-mobile:center 50%;
}
/* The bronze serpent is a 3:1 banner, so on a wide screen almost the whole
   painting is in frame and centring it is right. A phone crops to roughly a
   third of that width, and the centre third is the crowd alone — the pole and
   Moses, which are the point of the picture, sit left of it. Hence the shift
   on mobile. */
.article-hero-cross{
  --article-hero-position:center 50%;
  --article-hero-position-mobile:34% 50%;
}
/* Augustine and the child sit left of centre in a 2:1 frame, with the sunset
   on the right. A phone's crop keeps the shell, the child's face and the
   bishop's open hand — the exchange the essay is about — rather than the sea. */
.article-hero-seashell{
  --article-hero-position:center 30%;
  --article-hero-position-mobile:44% 35%;
}
/* The essay's own subheads, and the stepped-down subheads of its source list —
   the same two sizes .discernment-prose uses, scoped so other essays' bare
   h3s are untouched. */
.seashell-prose h3{
  margin:38px 0 14px;font-family:var(--head);font-size:clamp(24px,3vw,30px);
  line-height:1.25;color:var(--gold-deep);text-align:center;
}
.seashell-prose .notes-block h3{
  margin:26px 0 10px;font-family:var(--display);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);text-align:left;
}
.seashell-prose .notes-block h3:first-of-type{margin-top:18px;}
/* The Wide Path: the broad road and its chasm of fire on the left, the narrow
   way climbing to the city on the right, in a 3:2 frame. The banner keeps the
   signposts and both roads; a phone's crop moves right of centre so the crowd
   on the broad road and the foot of the narrow way share the frame. */
.article-hero-wide-path{
  --article-hero-position:center 45%;
  --article-hero-position-mobile:58% 50%;
}
/* Its lists (the figures at Calvary, the five elements of the sacrament) and
   the bracketed reference marks that link down to the numbered sources. */
.widepath-prose .wp-list{margin:0 0 1.1em;padding-left:24px;}
.widepath-prose .wp-list li{margin-bottom:.4em;line-height:1.55;}
.widepath-prose .wp-ref{color:var(--gold-deep);text-decoration:none;font-size:.85em;white-space:nowrap;}
.widepath-prose .wp-ref:hover{text-decoration:underline;}
.widepath-prose .wp-ref:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;border-radius:2px;}
.widepath-prose .wp-refs li{scroll-margin-top:96px;}
.widepath-prose .wp-refs li:target{color:var(--ink);}
/* The Beatitudes, The Sea in a Seashell and By a Tree We Are Saved read on
   plain white rather than the site's paper and grain; the Beatitudes contents
   box keeps its warm card so it still reads as a panel. */
body.page-beatitudes,body.page-seashell,body.page-cross{background:#fff;background-image:none;}
/* The article hero used to run about 650px tall at 1280 — emblem, kicker,
   chips, title, dek, byline, rule, verse, rule — which with the nav above it
   swallowed a laptop viewport before the first sentence. The padding is only
   a quarter of that; the rest lives in the stack below, so the emblem and the
   margins between the rules and the verse come down with it. Everything still
   sits above the fold on a 13in screen, with the opening paragraph now under
   it rather than a scroll away. The homepage .masthead is deliberately left
   alone — that one is meant to be a full curtain. */
.article-hero{
  position:relative;overflow:hidden;text-align:center;color:var(--paper);
  background:linear-gradient(180deg,var(--espresso) 0%,#251910 60%,var(--espresso) 100%);
  padding:48px 0 40px;min-height:auto;border-bottom:1px solid rgba(201,162,75,.28);
}
.article-hero::before{
  content:"";position:absolute;inset:-2%;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(26,18,11,.6) 0%,rgba(26,18,11,.76) 70%,rgba(26,18,11,.93) 100%),
    radial-gradient(ellipse at 50% 28%,rgba(201,168,90,.08),rgba(26,18,11,.34) 68%),
    var(--article-hero-image) var(--article-hero-position,center) / cover no-repeat;
  filter:saturate(.72) sepia(.12) contrast(1.08);transform:scale(1.025);
}
/* With JavaScript, article-hero.js picks the width the screen needs and the
   page's own 1600px URL is never fetched. The same layers, only the picture
   swapped; positions and sizes come from the rule above. */
html[data-article-hero="js"] .article-hero[data-hero-src]::before{
  background-image:
    linear-gradient(180deg,rgba(26,18,11,.6) 0%,rgba(26,18,11,.76) 70%,rgba(26,18,11,.93) 100%),
    radial-gradient(ellipse at 50% 28%,rgba(201,168,90,.08),rgba(26,18,11,.34) 68%),
    var(--article-hero-pick,none);
}
.article-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(18,11,6,.54),transparent 25%,transparent 75%,rgba(18,11,6,.54)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.article-hero-inner{position:relative;z-index:2;}
.article-hero .a-emblem{
  height:72px;margin-bottom:14px;
  filter:drop-shadow(0 0 30px rgba(201,168,90,.44)) brightness(1.08);
}
.article-hero .a-kicker{color:var(--champagne);}
/* White reading ground for essays. The cream --paper is kept for the
   furniture inside the page (contents boxes, tables, cards), which now sits
   forward of the white as an accent; plain white under long prose gives the
   text its strongest contrast. bitter-cup-meditation does the same through
   its own --parchment. */
body.article-white{background:#fff;}
.article-hero .topic-chip{color:var(--champagne);border-color:rgba(201,168,90,.46);background:rgba(26,18,11,.26);}
.article-hero .topic-chip:hover{color:var(--espresso);background:var(--champagne);border-color:var(--champagne);}
.article-hero h1{color:#f5ecd6;font-size:clamp(32px,5.6vw,58px);letter-spacing:.07em;text-shadow:0 3px 24px rgba(0,0,0,.36);}
.article-hero .dek{color:var(--muted-dark);margin-bottom:14px;}
.article-hero .a-rule{background:rgba(201,168,90,.38);margin:14px auto;}
@media(max-width:640px){
  .article-hero{padding:40px 0 32px;}
  .article-hero::before{background-position:var(--article-hero-position-mobile,center);}
  .article-hero .a-emblem{height:62px;}
}
.root-article-prose section,
.discernment-prose section{margin:26px 0 0;}
.root-article-prose h2,
.discernment-prose h2{
  margin:0 0 13px;font-family:var(--display);font-size:clamp(25px,4vw,36px);
  font-weight:600;letter-spacing:.07em;line-height:1.24;text-align:left;color:var(--ink);
}

/* ============================================================
   PRINT
   Paper is a different medium: no navigation to follow, no
   buttons to press, no colour worth spending ink on. What
   survives the trip is the argument itself — title, byline,
   body, and the plates that carry meaning rather than mood.
   ============================================================ */
@media print {

  /* The [class*="hero"] sweep above is wider than it looks on this site:
     the root <article> of every essay carries .article-hero-page, and the
     masthead that holds the title and byline is .article-hero. Left alone,
     the rule prints thirteen blank pages. Restore the three structural
     containers by name — the decorative children (.hero-emblem, .hero-art,
     .article-hero-credit and friends) stay hidden, which is the point. */
  article.article-hero-page,
  header.article-hero,
  .article-hero .article-hero-inner {
    display: block !important;
  }
}