/* =====================================================================
   VESPERS — Reflections / Articles
   Listing (/articles), single (/articles/<slug>), + homepage rail.
   Inherits tokens from main.css. Mobile-first. Editorial, not "blog".
   ===================================================================== */

/* ---------------------------------------------------------------------
   Shared bits
   --------------------------------------------------------------------- */
.art-cat{display:inline-block; font:700 .64rem/1 var(--font-body); letter-spacing:.18em; text-transform:uppercase; color:var(--accent-strong);}
.art-meta{display:block; font:500 .8rem/1.4 var(--font-body); color:var(--fg3); margin-top:10px;}

/* ---------------------------------------------------------------------
   Listing — hero
   --------------------------------------------------------------------- */
.art-hero{position:relative; overflow:hidden; isolation:isolate; color:var(--on-dark-1);
  background:radial-gradient(120% 90% at 50% -10%, #2b2f5c 0%, var(--ink-900) 48%, var(--ink-950) 100%);
  padding-top:clamp(116px,15vw,154px); padding-bottom:clamp(40px,6vw,72px); text-align:center;}
.art-hero-glow{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(46% 42% at 50% 24%, rgba(226,203,148,.26), transparent 64%);}
.art-hero .hero-arch{bottom:-30%; opacity:.5;}
.art-hero-inner{position:relative; z-index:2; max-width:60ch; margin-inline:auto;}
.art-hero .mvt{justify-content:center;}
.art-hero .mvt .num{font-family:var(--font-display); color:var(--gilt-300);}
.art-hero h1{color:var(--on-dark-1); font-size:clamp(2.4rem,5.6vw,4rem); line-height:1.04; margin:12px 0 0;}
.art-hero h1 em{font-style:italic; color:var(--gilt-300);}
.art-hero .lead{color:var(--on-dark-2); margin:16px auto 0; max-width:54ch;}

/* ---------------------------------------------------------------------
   Listing — body
   --------------------------------------------------------------------- */
.art-body{background:var(--parchment-50);}

/* featured / latest */
.art-feature{display:grid; grid-template-columns:1fr; gap:0; background:var(--surface);
  border:1px solid var(--border-soft); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;}
.art-feature-media{position:relative; aspect-ratio:16/10; display:block;}
.art-feature-media img{width:100%; height:100%; object-fit:cover; display:block;}
.art-feature-flag{position:absolute; top:14px; left:14px; z-index:2; font:700 .6rem/1 var(--font-body); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-900); background:var(--gilt-300); padding:7px 12px; border-radius:999px;}
.art-feature-text{display:flex; flex-direction:column; padding:clamp(22px,3.2vw,38px);}
.art-feature-title{font:600 clamp(1.7rem,3vw,2.5rem)/1.08 var(--font-display); color:var(--fg1); letter-spacing:-.01em; margin:12px 0 0;}
.art-feature-dek{font:400 1.02rem/1.6 var(--font-body); color:var(--fg2); margin-top:12px; max-width:52ch;}
.art-feature .qlink{margin-top:auto; padding-top:18px;}
@media (hover:hover){ .art-feature:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--hairline-gold);} }
@media (min-width:860px){
  .art-feature{grid-template-columns:1.05fr .95fr; align-items:stretch;}
  .art-feature-media{aspect-ratio:auto; height:100%; min-height:340px;}
}

/* list */
.art-list-head{margin:clamp(40px,6vw,68px) 0 clamp(20px,3vw,28px);}
.art-list-head .kicker{margin-top:8px;}
.art-list{display:grid; grid-template-columns:1fr; gap:clamp(16px,2vw,22px);}
@media (min-width:620px){ .art-list{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .art-list{grid-template-columns:repeat(3,1fr);} }

.art-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border-soft); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;}
.art-card-media{position:relative; aspect-ratio:7/5; display:block; overflow:hidden;}
.art-card-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease);}
.art-card-text{display:flex; flex-direction:column; padding:18px 20px 22px;}
.art-card-title{font:600 1.25rem/1.18 var(--font-display); color:var(--fg1); margin:9px 0 0; letter-spacing:-.01em;}
.art-card-dek{font:400 .92rem/1.55 var(--font-body); color:var(--fg2); margin-top:8px;}
.art-card-cta{display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:16px;
  font:700 .78rem/1 var(--font-body); letter-spacing:.03em; color:var(--accent-strong);}
.art-card-cta vm-icon{transition:transform .25s var(--ease);}
@media (hover:hover){ .art-card:hover .art-card-cta vm-icon{transform:translateX(4px);} }
@media (hover:hover){
  .art-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--hairline-gold);}
  .art-card:hover .art-card-media img{transform:scale(1.05);}
  .art-card:hover .art-card-title{color:var(--accent-strong);}
}

/* ---------------------------------------------------------------------
   Single article
   --------------------------------------------------------------------- */
.as-hero{background:var(--parchment-50); padding-top:clamp(104px,13vw,140px); padding-bottom:clamp(18px,3vw,28px); text-align:center;}
.as-hero-inner{max-width:50rem; margin-inline:auto;}
.as-crumb{display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap; font:600 .8rem/1 var(--font-body); color:var(--fg3); margin-bottom:16px;}
.as-crumb a{color:var(--fg2); transition:color .25s;}
@media (hover:hover){ .as-crumb a:hover{color:var(--accent-strong);} }
.as-cat{display:inline-block; font:700 .66rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--accent-strong);}
.as-hero h1{font:600 clamp(2.1rem,4.6vw,3.4rem)/1.08 var(--font-display); color:var(--fg1); letter-spacing:-.015em; margin:12px 0 0;}
.as-dek{font:italic 500 clamp(1.05rem,1.8vw,1.3rem)/1.5 var(--font-display); color:var(--fg2); margin:14px auto 0; max-width:46ch;}
.as-byline{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; font:600 .82rem/1 var(--font-body); color:var(--fg3);}
.as-byline .dot{width:4px; height:4px; border-radius:50%; background:var(--border-strong);}
.as-by{color:var(--accent-strong);}
.as-share{display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; border:1px solid var(--border);
  color:var(--fg2); transition:color .25s, border-color .25s, background-color .25s;}
.as-share vm-icon{color:var(--gilt-700);}
.as-share.is-copied{color:var(--sage-600); border-color:var(--sage-300,#b9c7b0);}
.as-share.is-copied .as-share-lbl::after{content:" ✓";}
@media (hover:hover){ .as-share:hover{color:var(--accent-strong); border-color:var(--gilt-500); background:var(--gilt-100);} }

.as-media-wrap{margin-top:clamp(18px,3vw,30px);}
.as-media{position:relative; margin:0; aspect-ratio:16/9; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg); background:var(--gilt-100);}
.as-media img{width:100%; height:100%; object-fit:cover; display:block;}
@media (min-width:820px){ .as-media{aspect-ratio:21/9;} }

/* prose column — narrow, generous, contemplative */
.as-shell{padding-top:clamp(30px,4vw,52px); padding-bottom:clamp(48px,7vw,90px);}
.as-prose{max-width:40rem; margin-inline:auto;}
.as-prose p{font:400 clamp(1.06rem,1.5vw,1.18rem)/1.75 var(--font-body); color:var(--fg1); margin:0 0 1.25em;}
.as-prose .as-lede{margin-top:0;}
.as-prose .as-lede::first-letter{float:left; font-family:var(--font-display); font-weight:600; font-size:3.5em; line-height:.78;
  padding:8px 12px 0 0; color:var(--accent-strong);}
.as-pull{position:relative; margin:1.8em 0; padding:6px 0 6px 26px; border-left:3px solid var(--gilt-500);
  font:italic 500 clamp(1.3rem,2.2vw,1.65rem)/1.4 var(--font-display); color:var(--ink-900); letter-spacing:-.01em;}
.as-pull-mark{display:block; color:var(--gilt-500); opacity:.7; margin-bottom:6px;}
.as-scripture{margin:2em 0; text-align:center;}
.as-scripture blockquote{font:italic 500 clamp(1.2rem,2vw,1.5rem)/1.5 var(--font-display); color:var(--ink-900); margin:0;}
.as-scripture .cite{display:block; margin-top:12px; font:700 .72rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-strong);}
.as-scripture::before{content:""; display:block; width:34px; height:1px; background:var(--hairline-gold); margin:0 auto 18px;}
.as-sign{display:flex; align-items:center; gap:14px; margin-top:2.4em;}
.as-sign-rule{flex:1; height:1px; background:var(--border);}
.as-sign-by{font:italic 600 1.1rem/1 var(--font-display); color:var(--accent-strong);}

/* reflections (reuses .t-comments / .tcm-* from teaching.css) — narrow to match prose */
.as-shell .t-comments{max-width:40rem; margin-inline:auto; margin-top:clamp(40px,6vw,64px);}

/* keep reading */
.as-more{background:var(--surface-warm); border-top:1px solid var(--border-soft);}
.as-more-head{margin-bottom:clamp(20px,3vw,30px);}
.as-more-head .kicker{margin-top:8px;}

@media (prefers-reduced-motion:reduce){
  .art-feature, .art-card, .art-card-media img{transition:none !important;}
}

/* ---------------------------------------------------------------------
   Homepage "Reflections" rail
   --------------------------------------------------------------------- */
.hrefl{background:var(--surface-warm); border-top:1px solid var(--border-soft);}
.hrefl-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap;}
.hrefl-head .kicker{margin-top:8px;}
.hrefl-head .lead{margin-top:10px; max-width:52ch;}
.hrefl-grid{margin-top:clamp(24px,3vw,36px);}
.hrefl-foot{display:flex; justify-content:center; margin-top:clamp(26px,3.4vw,40px);}