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

.bitter-cup-page .hero{
  position:relative;
  overflow:hidden;
  min-height:0;
  padding:48px 0 40px;
  border-bottom:1px solid rgba(201,162,75,.28);
  background:linear-gradient(180deg,var(--espresso) 0%,#251910 60%,var(--espresso) 100%);
  color:var(--paper);
}
.bitter-cup-page .hero::before{
  content:"";position:absolute;inset:-2%;display:block;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%),
    url("/.netlify/images?url=/images/bitter-cup/agony-in-the-garden.webp&w=1600&q=78") center 32% / 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; see
   essay.css. */
html[data-article-hero="js"] .bitter-cup-page .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);
}
.bitter-cup-page .hero::after{
  content:"";position:absolute;inset:0;display:block;pointer-events:none;
  background:linear-gradient(90deg,rgba(18,11,6,.54),transparent 25%,transparent 75%,rgba(18,11,6,.54));
}
.bitter-cup-page .hero__inner{position:relative;z-index:2;max-width:var(--measure);padding:0 32px}
.bitter-cup-page .topic-return{display:none}
.bitter-cup-page .eyebrow{
  margin:0 0 12px;
  color:var(--champagne);
  font-family:var(--display);
  font-size:11px;
  font-weight:600;
  letter-spacing:.28em;
}
.bitter-cup-page .chalice-img{width:84px;margin:0 auto 14px;filter:drop-shadow(0 0 30px rgba(201,168,90,.44)) brightness(1.08)}
.bitter-cup-page .hero h1{
  margin:0 0 10px;
  color:#f5ecd6;
  text-shadow:0 3px 24px rgba(0,0,0,.36);
  font-family:var(--display);
  font-size:clamp(30px,5.2vw,52px);
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.08;
}
.bitter-cup-page .hero h1 .sub{
  margin-top:10px;
  color:var(--champagne);
  font-family:var(--head);
  font-size:clamp(19px,2.6vw,25px);
  font-weight:500;
}
.bitter-cup-page .hero .dek{
  max-width:620px;
  margin:14px auto 12px;
  color:var(--muted-dark);
  font-family:var(--body);
  font-size:19px;
  line-height:1.6;
}
.bitter-cup-page .byline{
  margin-bottom:8px;
  color:rgba(246,241,230,.68);
  font-family:var(--display);
  font-size:11px;
  letter-spacing:.18em;
}
.bitter-cup-page .byline .nm{color:var(--champagne)}
.bitter-cup-page .a-rule{height:1px;max-width:120px;margin:16px auto;background:rgba(201,168,90,.38)}
.bitter-cup-page .article-hero-credit{margin-top:16px;animation-delay:.72s}
.bitter-cup-page .epigraph{
  max-width:540px;
  margin:16px auto 0;
  color:rgba(246,241,230,.9);
  font-family:var(--head);
  font-size:23px;
  line-height:1.45;
}
.bitter-cup-page .epigraph .attrib{
  margin-top:12px;
  color:rgba(246,241,230,.6);
  font-family:var(--display);
  font-size:10px;
  letter-spacing:.18em;
}
.bitter-cup-page .article-shell{display:block;max-width:var(--measure);margin:0 auto;padding:12px 32px 32px}
.bitter-cup-page main .article{max-width:none;margin:0;padding:0}
.bitter-cup-page main .article section{margin-top:0}
.bitter-cup-page main .article section + section{margin-top:44px}
.bitter-cup-page main .article p{margin:0 0 .85em;text-align:justify;hyphens:auto}
.bitter-cup-page .sec-head{display:block;margin:0 0 18px;text-align:center}
.bitter-cup-page .sec-num{
  display:block;
  min-width:0;
  padding:0;
  color:var(--gold);
  font-family:var(--display);
  font-size:10px;
  letter-spacing:.24em;
}
.bitter-cup-page .sec-head h2{
  margin:8px 0 0;
  color:var(--gold-deep);
  font-family:var(--display);
  font-size:16px;
  font-weight:600;
  letter-spacing:.16em;
  line-height:1.35;
  text-transform:uppercase;
}
.bitter-cup-page .lead::first-letter{
  color:var(--gold);
  font-family:var(--display);
  font-size:74px;
  font-weight:700;
  line-height:.74;
  padding:8px 12px 0 0;
}
.bitter-cup-page .scripture{color:var(--ink);font-family:var(--head);font-size:1.18rem}
.bitter-cup-page blockquote{
  max-width:600px;
  margin:38px auto;
  padding:0;
  border:0;
  color:var(--ink);
  font-family:var(--head);
  font-size:26px;
  line-height:1.4;
  text-align:center;
}
.bitter-cup-page blockquote::before{content:"\201C";display:block;margin-bottom:6px;color:var(--gold);font-family:var(--display);font-size:70px;line-height:.6;opacity:.35}
.bitter-cup-page blockquote .attrib{color:var(--muted);font-family:var(--display);font-size:10px;letter-spacing:.16em}
.bitter-cup-page .inscription{
  margin:38px 0;
  padding:34px 26px;
  background:rgba(154,122,46,.06);
  border-color:var(--gold);
}
.bitter-cup-page .inscription p{color:var(--ink);font-family:var(--head)}
.bitter-cup-page .inscription .src{color:var(--muted);font-family:var(--display)}
.bitter-cup-page .notes{max-width:var(--measure);margin:0 auto;padding:42px 32px 22px;border-top:1px solid var(--rule)}
.bitter-cup-page .notes h2{color:var(--gold-deep);font-family:var(--display);font-size:16px;letter-spacing:.16em;text-align:center;text-transform:uppercase}
.bitter-cup-page .notes .note-intro{color:var(--muted);font-family:var(--body);font-size:17px;line-height:1.6;text-align:justify}
.bitter-cup-page .deeper-dive{margin:30px 0;padding:24px;border:1px solid var(--rule);background:var(--paper-card)}
.bitter-cup-page .deeper-dive h2{margin:0 0 10px;font-size:13px}
.bitter-cup-page .deeper-dive p{color:var(--muted);font-family:var(--body);font-size:17px}
.bitter-cup-page .notes ol{color:var(--muted);font-family:var(--body);font-size:16px}
.bitter-cup-page .notes li::before{color:var(--gold);font-family:var(--display)}
.bitter-cup-page .article-foot{margin-bottom:40px;padding-left:32px;padding-right:32px}
@media(max-width:640px){
  .bitter-cup-page .hero{padding:36px 0 26px}
  .bitter-cup-page .hero__inner,
  .bitter-cup-page .article-shell,
  .bitter-cup-page .notes{padding-left:22px;padding-right:22px}
  .bitter-cup-page main .article p,
  .bitter-cup-page .notes .note-intro{text-align:left}
}