/* ===========================================================
   SCHĒMA
   Black ink on parchment. BCP red as accent only.
   Lino-cut assets carried over; treatment calmed down.
   =========================================================== */

:root{
  --parchment:      #efe5cf;
  --parchment-warm: #e9dcc0;
  --parchment-deep: #e3d4b2;
  --ink:            #1b1611;
  --ink-soft:       #383026;
  --ink-mute:       #756751;
  --red:            #9d2a2e;
  --red-deep:       #7a1f22;
  --gold:           #a68442;

  --display: "IM Fell English", "EB Garamond", Georgia, serif;
  --body:    "EB Garamond", Georgia, "Times New Roman", serif;
  --sc:      "IM Fell English SC", "EB Garamond", Georgia, serif;

  --measure: 41rem;
  --wide:    72rem;
  --hair:    1px solid rgba(27,22,17,.22);
  --hair-strong: 1px solid rgba(27,22,17,.42);

  /* One rhythm for every section break. Ornaments sit INSIDE this gap
     rather than adding their height to it — see the .divider /
     .scatter-band rules below, which tighten the padding either side. */
  --sec: 4rem;
  --sec-at-divider: 1.3rem;
  --sec-at-band: 1.25rem;

  /* Artwork, embedded so the page is a single self-contained file. */
  --img-logo: url("/brand/logo.png");
  --img-divider: url("/brand/divider.png");
  --img-pattern: url("/brand/pattern.png");
  --img-door: url("/brand/door.png");
  --img-hand: url("/brand/hand.png");
  --img-lattice: url("/brand/lattice.png");
  --img-flame: url("/brand/flame.png");
  --img-well: url("/brand/well.png");
  --img-chalice: url("/brand/chalice.png");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--body);
  font-size:20px;
  line-height:1.66;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* A whisper of grain — far lighter than before, and no vignette. */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11  0 0 0 0 0.09  0 0 0 0 0.07  0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.5;
  mix-blend-mode:multiply;
}

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--display); font-weight:400; margin:0; color:var(--ink); }
h1{ font-size:clamp(3.6rem,13vw,7.5rem); line-height:.9; letter-spacing:.01em; }
h2{ font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.1; }
h3{ font-size:clamp(1.2rem,2.2vw,1.5rem); line-height:1.25; }
p{ margin:0 0 1.15em; }
a{ color:inherit; }

.sc{
  font-family:var(--sc);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
  color:var(--ink-mute);
}

.eyebrow{
  display:flex; align-items:center; gap:1rem;
  margin:0 0 1.6rem;
}
.eyebrow::after{
  content:""; flex:1 1 auto; height:1px;
  background:rgba(27,22,17,.24);
}
.eyebrow .num{ color:var(--red); }

.lede{
  font-size:1.28rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.lede em{ color:var(--ink); }

.pull{
  font-family:var(--display);
  font-size:clamp(1.7rem,4vw,2.5rem);
  line-height:1.2;
  margin:3rem 0;
  padding-left:1.4rem;
  border-left:3px solid var(--red);
  color:var(--ink);
}

.verse{
  text-align:center;
  font-style:italic;
  color:var(--ink-soft);
  margin:0;
}
.verse cite{
  display:block; font-style:normal;
  font-family:var(--sc); text-transform:uppercase;
  letter-spacing:.16em; font-size:.7rem;
  margin-top:.7rem; color:var(--ink-mute);
}

.greek{ font-style:italic; }
.aside-note{
  font-size:.95rem;
  line-height:1.6;
  color:var(--ink-mute);
  font-style:italic;
  border-top:var(--hair);
  padding-top:1.2rem;
  margin-top:2.5rem;
}
.aside-note .sig{ font-style:normal; font-family:var(--sc); letter-spacing:.14em; text-transform:uppercase; font-size:.7rem; }

/* ---------- layout ---------- */
/* A section's last element must not carry a trailing margin past its final
   line, or that margin adds to the gap and the rhythm drifts by ~23px. */
section .prose > *:last-child,
section .wrap > *:last-child,
.form-note{ margin-bottom:0; }

.wrap{ max-width:var(--wide); margin:0 auto; padding:0 1.5rem; position:relative; z-index:3; }
.prose{ max-width:var(--measure); margin:0 auto; padding:0 1.5rem; position:relative; z-index:3; }
section{ padding:var(--sec) 0; position:relative; z-index:3; }

/* Where an ornament breaks two sections, it replaces the gap instead of
   extending it, so every break reads as the same pause. */
.divider + section{ padding-top:var(--sec-at-divider); }
section:has(+ .divider){ padding-bottom:var(--sec-at-divider); }
.scatter-band + section{ padding-top:var(--sec-at-band); }
section:has(+ .scatter-band){ padding-bottom:var(--sec-at-band); }

hr.rule{
  border:0; height:1px; background:rgba(27,22,17,.2);
  max-width:var(--measure); margin:0 auto;
}

/* Quiet section break: a single hairline that keeps the same pause
   rhythm as the ornaments without shouting. */
.page-rule{ max-width:var(--measure); margin:0 auto; padding:0 1.5rem; position:relative; z-index:3; }
.page-rule + section{ padding-top:var(--sec-at-divider); }
section:has(+ .page-rule){ padding-bottom:var(--sec-at-divider); }

/* ---------- top chrome ---------- */
#progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--red); z-index:60; transition:width .1s linear;
}
nav.bar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:.7rem 1.5rem;
  background:rgba(239,229,207,.94);
  backdrop-filter:blur(6px);
  border-bottom:var(--hair);
  transform:translateY(-105%);
  transition:transform .35s ease;
}
nav.bar.show{ transform:translateY(0); }
nav.bar .mark{
  font-family:var(--display); font-size:1.1rem; letter-spacing:.04em;
  text-decoration:none; margin-right:auto;
}
nav.bar a.link{
  font-family:var(--sc); text-transform:uppercase; letter-spacing:.14em;
  font-size:.68rem; color:var(--ink-mute); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
nav.bar a.link:hover{ color:var(--ink); border-bottom-color:var(--red); }
nav.bar a.cta{ color:var(--red); }
@media (max-width:820px){ nav.bar a.link:not(.cta){ display:none; } }

/* ---------- hero ---------- */
header.hero{
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:5rem 1.5rem 3rem;
  position:relative; overflow:hidden;
}
.hero-scatter{
  position:absolute; pointer-events:none; z-index:0;
  width:min(46vw,560px); aspect-ratio:3/2; opacity:.1;
  background:var(--img-pattern) center/contain no-repeat;
}
.hero-scatter.tl{ top:-3vw; left:-6vw; transform:rotate(180deg); }
.hero-scatter.br{ bottom:-3vw; right:-6vw; }
.hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.hero-logo{
  width:min(190px,38vw); aspect-ratio:1; margin-bottom:2.2rem;
  background:var(--img-logo) center/contain no-repeat;
}
/* The wordmark is the whole first impression, so it runs larger than the
   base h1 scale and is allowed to fill the hero. */
h1.wordmark{ margin:0; font-size:clamp(4.6rem,17vw,10.5rem); }
.hero-sub{
  font-family:var(--sc); text-transform:uppercase;
  letter-spacing:.3em; font-size:.75rem; color:var(--ink-mute);
  margin:1.6rem 0 0;
}
.hero-line{
  max-width:34rem; margin:2.4rem auto 0;
  font-size:1.2rem; line-height:1.55; color:var(--ink-soft);
}
.hero-meta{
  margin-top:2.8rem;
  display:flex; gap:.9rem; align-items:center; justify-content:center;
  font-family:var(--sc); text-transform:uppercase; letter-spacing:.18em;
  font-size:.68rem; color:var(--ink-mute);
}
.hero-meta .dot{ color:var(--red); }
.scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  z-index:2; font-family:var(--sc); text-transform:uppercase;
  letter-spacing:.2em; font-size:.64rem; color:var(--ink-mute);
  text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.scroll-cue .stroke{ display:block; width:1px; height:36px; background:rgba(27,22,17,.3); }

/* ---------- dividers ---------- */
/* Capped at 52rem on purpose: divider.png is 1730px native, so any wider
   than this gets upscaled on a 2x display and the lino texture goes soft. */
/* 32rem keeps the art ~464px wide: comfortably inside divider.png's
   1730px native width (so it stays crisp on a 2x display) and sized to
   sit within one section gap rather than blowing it open. */
.divider{ margin:0 auto; max-width:32rem; padding:0 1.5rem; position:relative; z-index:3; }
.divider .art{
  width:100%; aspect-ratio:1730/320; opacity:.82;
  background:var(--img-divider) center/contain no-repeat;
}
.divider.flip .art{ transform:scaleX(-1); }

/* The sign-off cuts. One small figure per page, sized off each block's
   native proportions so nothing is stretched. */
.footer-cut{
  display:flex; justify-content:center; padding:0 1.5rem;
  position:relative; z-index:3;
}
.footer-cut i{
  display:block; height:58px; opacity:.78;
  background:center/contain no-repeat;
}
.footer-cut + footer{ padding-top:3.2rem; }
.cut-well i{ aspect-ratio:198/261; background-image:var(--img-well); }
.cut-flame i{ aspect-ratio:263/284; background-image:var(--img-flame); }
.cut-chalice i{ aspect-ratio:234/284; background-image:var(--img-chalice); }
.cut-hand i{ aspect-ratio:170/261; background-image:var(--img-hand); }
.cut-lattice i{ aspect-ratio:234/261; background-image:var(--img-lattice); }
.scatter-band{
  max-width:100%; overflow:hidden; position:relative; z-index:3;
  height:88px;
}
/* Tiled at 520px rather than cover-cropped: the middle of pattern.png is
   nearly empty, so a full-bleed crop showed one stray mark and read as a
   void. 520px matches the scale the same artwork sits at in the hero. */
.scatter-band .art{
  width:100%; height:100%;
  background:var(--img-pattern) center 62%/520px auto repeat-x;
  opacity:.28;
}

/* ---------- panels & grids ---------- */
.grid{ display:grid; gap:1px; background:rgba(27,22,17,.3); border:var(--hair-strong); }
.grid.two{ grid-template-columns:repeat(2,1fr); }
.grid.four{ grid-template-columns:repeat(4,1fr); }
.cell{
  background:var(--parchment);
  padding:1.9rem 1.6rem;
  display:flex; flex-direction:column;
}
.cell .sc{ margin-bottom:.9rem; }
.cell h3{ margin-bottom:.7rem; }
.cell p{ font-size:.98rem; line-height:1.58; color:var(--ink-soft); margin:0; }
@media (max-width:900px){ .grid.four{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid.four,.grid.two{ grid-template-columns:1fr; } }

/* ---------- the long read ---------- */
/*
  Most of the site is scanned; a few passages are actually read, sometimes for
  twenty minutes. Inside .long-read the measure gets more air between
  paragraphs and the headings step up a size, which gives the eye somewhere to
  land after a long block and makes the structure legible at a glance. The Rule
  uses it throughout; the home page uses it for the opening passage.
*/
.long-read .prose p{ margin-bottom:1.7em; line-height:1.72; }
.long-read .prose > h2{
  font-size:clamp(2.3rem,5.2vw,3.7rem); line-height:1.06;
  margin-bottom:1.5rem;
}
.long-read .prose > .lede{
  font-size:1.34rem; line-height:1.68; margin-bottom:1.7em;
}
.long-read h3{ font-size:clamp(1.3rem,2.4vw,1.65rem); line-height:1.3; }

/* Beliefs, practices and habits each get a wider gutter of their own, so the
   seven claims read as seven things rather than one wall. */
.long-read .belief{ padding:2.9rem 0; }
.long-read .belief-claim{ font-size:clamp(1.45rem,3vw,1.95rem); line-height:1.24; }
.long-read .belief-body{ margin-top:1.4rem; }
.long-read .belief-body p{ margin-bottom:1.4em; }
.long-read .practice{ padding:2.2rem 0; }
.long-read .practice p{ line-height:1.7; }
.long-read .habit{ padding:1.9rem 0; }
.long-read .habit h3{ font-size:1.3rem; margin-bottom:.5rem; }
.long-read .habit p{ line-height:1.7; }
.long-read .aside-note{ margin-top:3rem; padding-top:1.5rem; line-height:1.72; }

/* ---------- beliefs ---------- */
.belief{
  border-top:var(--hair-strong);
  padding:2.2rem 0;
}
.belief:last-of-type{ border-bottom:var(--hair-strong); }
.belief-head{
  display:flex; gap:1.4rem; align-items:baseline;
}
.belief-num{
  font-family:var(--display); font-size:1.5rem;
  color:var(--red); flex:0 0 auto; width:1.6rem;
}
.belief-claim{ font-family:var(--display); font-size:clamp(1.3rem,2.6vw,1.7rem); line-height:1.22; }
.belief-body{ padding-left:3rem; margin-top:1rem; }
@media (max-width:600px){ .belief-body{ padding-left:0; } }
.belief-body p:last-child{ margin-bottom:0; }

details.fold{ margin-top:.6rem; }
details.fold > summary{
  list-style:none; cursor:pointer;
  font-family:var(--sc); text-transform:uppercase; letter-spacing:.16em;
  font-size:.68rem; color:var(--red);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.2rem 0;
}
details.fold > summary::-webkit-details-marker{ display:none; }
details.fold > summary::after{ content:"+"; font-family:var(--body); font-size:1rem; line-height:1; }
details.fold[open] > summary::after{ content:"–"; }
details.fold[open] > summary{ color:var(--ink-mute); }
/* The four reference points in belief 3 */
dl.refs{ margin:1.5rem 0 0; }
dl.refs dt{
  font-family:var(--sc); text-transform:uppercase; letter-spacing:.14em;
  font-size:.7rem; color:var(--red); margin-top:1.1rem;
}
dl.refs dt:first-of-type{ margin-top:0; }
dl.refs dd{
  margin:.35rem 0 0; padding-left:1rem;
  border-left:2px solid rgba(27,22,17,.18);
  color:var(--ink-soft); font-size:.98rem; line-height:1.58;
}

/* ---------- the essay ---------- */
/*
  "Why Sch\u0113ma?" is the longest single read on the site, so it borrows the
  long-read measure and adds two things of its own: an epigraph under each
  section heading, and pull quotes that are allowed to breathe.
*/
.essay-read .verse.epigraph{
  margin:2rem 0 2.6rem; font-size:1.12rem; line-height:1.65;
  max-width:34rem; margin-left:auto; margin-right:auto;
}
.essay-read blockquote.q{
  margin:2.6rem 0; padding:.3rem 0 .3rem 1.6rem;
  font-size:1.2rem; line-height:1.7;
}
.essay-read .sig-line{
  margin-top:2.4rem;
  font-family:var(--sc); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; color:var(--ink-mute);
}

/* The pointer between the Rule and the essay, in both directions. */
.side-page{
  margin:2.6rem 0 0; padding-top:1.8rem; border-top:var(--hair-strong);
}
.side-page h3{ font-size:1.5rem; margin:.2rem 0 .6rem; }
.side-page h3 a{ text-decoration:none; }
.side-page h3 a:hover{ color:var(--red); }
.side-page p{ color:var(--ink-soft); max-width:34rem; }

blockquote.q{
  margin:1.4rem 0; padding-left:1.2rem;
  border-left:2px solid var(--red);
  font-style:italic; color:var(--ink);
}

details.fold .fold-body{ margin-top:1rem; }
details.fold .fold-body p:last-child{ margin-bottom:0; }

/* ---------- practices (what we do) ---------- */
.practice{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem;
  padding:1.8rem 0; border-top:var(--hair);
}
.practice:first-of-type{ border-top:var(--hair-strong); }
.practice:last-of-type{ border-bottom:var(--hair-strong); }
.practice-icon{ width:44px; opacity:.9; }
.practice-icon i{
  display:block; width:100%;
  background-position:center; background-repeat:no-repeat; background-size:contain;
}
.ic-hand i{ aspect-ratio:170/261; background-image:var(--img-hand); }
.ic-lattice i{ aspect-ratio:234/261; background-image:var(--img-lattice); }
.ic-flame i{ aspect-ratio:263/284; background-image:var(--img-flame); }
.ic-well i{ aspect-ratio:198/261; background-image:var(--img-well); }
.ic-chalice i{ aspect-ratio:234/284; background-image:var(--img-chalice); }
.practice h3{ margin-bottom:.5rem; }
.practice p{ margin:0; color:var(--ink-soft); font-size:1rem; line-height:1.6; }

/* ---------- the rule list ---------- */
.habit{ padding:1.4rem 0; border-top:var(--hair); }
.habit:first-of-type{ border-top:none; }
.habit h3{ font-size:1.15rem; margin-bottom:.35rem; }
.habit p{ margin:0; font-size:1rem; line-height:1.62; color:var(--ink-soft); }

/* ---------- who / sending ---------- */
.sending{
  display:grid; grid-template-columns:1fr 1fr;
  gap:3.5rem; align-items:center;
}
@media (max-width:820px){ .sending{ grid-template-columns:1fr; gap:2.5rem; } }
.sending .art{
  width:100%; aspect-ratio:1;
  background:var(--img-door) center/contain no-repeat;
}

/* ---------- contact ---------- */
#come{ background:var(--parchment-warm); border-top:var(--hair-strong); border-bottom:var(--hair-strong); }
.form-shell{ max-width:44rem; margin:0 auto; }
.paths{
  display:flex; gap:1px; background:rgba(27,22,17,.3);
  border:var(--hair-strong); margin:2.5rem 0 2rem;
}
.path-btn{
  flex:1 1 0; background:var(--parchment); border:0; cursor:pointer;
  font-family:var(--sc); text-transform:uppercase; letter-spacing:.14em;
  font-size:.7rem; color:var(--ink-mute);
  padding:1.1rem .9rem; text-align:center; line-height:1.5;
  transition:background .2s ease,color .2s ease;
}
.path-btn:hover{ background:var(--parchment-deep); color:var(--ink); }
.path-btn[aria-pressed="true"]{ background:var(--ink); color:var(--parchment); }
@media (max-width:520px){ .paths{ flex-direction:column; } }

.path-blurb{ color:var(--ink-soft); font-size:1.02rem; margin-bottom:2rem; }

.field{ margin-bottom:1.5rem; }
.field label{
  display:block; font-family:var(--sc); text-transform:uppercase;
  letter-spacing:.14em; font-size:.68rem; color:var(--ink-mute);
  margin-bottom:.5rem;
}
.field label .opt{ text-transform:none; letter-spacing:.02em; font-family:var(--body); font-style:italic; }
.field input,.field textarea{
  width:100%; font-family:var(--body); font-size:1.02rem; color:var(--ink);
  background:var(--parchment); border:0; border-bottom:var(--hair-strong);
  padding:.6rem .1rem; line-height:1.5;
  transition:border-color .2s ease;
}
.field input:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--red);
}
.field textarea{ resize:vertical; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:600px){ .row{ grid-template-columns:1fr; } }

.hp{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

button.send{
  font-family:var(--sc); text-transform:uppercase; letter-spacing:.18em;
  font-size:.74rem; color:var(--parchment); background:var(--ink);
  border:0; padding:1rem 2.4rem; cursor:pointer;
  transition:background .2s ease;
}
button.send:hover{ background:var(--red-deep); }
button.send[disabled]{ opacity:.5; cursor:progress; }

.form-note{ font-size:.9rem; color:var(--ink-mute); margin-top:1.2rem; line-height:1.55; }
.form-error{ color:var(--red); font-size:.95rem; margin-top:1rem; min-height:1.2em; }

.thanks{ text-align:center; padding:2rem 0; }
.thanks .art{
  width:56px; aspect-ratio:263/284; margin:0 auto 1.4rem; opacity:.9;
  background:var(--img-flame) center/contain no-repeat;
}
.thanks h3{ margin-bottom:.8rem; }
.thanks p{ color:var(--ink-soft); max-width:30rem; margin-left:auto; margin-right:auto; }

/* ---------- footer ---------- */
footer{
  padding:4rem 0 3.5rem; text-align:center;
  position:relative; z-index:3;
}
footer .mark-art{
  width:64px; aspect-ratio:1; opacity:.85; margin:0 auto 1.6rem;
  background:var(--img-logo) center/contain no-repeat;
}
footer .sc{ display:block; margin-bottom:.5rem; }
footer p{ font-size:.9rem; color:var(--ink-mute); margin:0 0 .4rem; }
footer a{ color:var(--ink-mute); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease,transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ===========================================================
   MULTI-PAGE CHROME
   Added when the single page became four. Everything above
   this line is shared with the original one-page version.
   =========================================================== */

/* On inner pages there is no full-height hero to scroll past,
   so the bar is present from the start rather than revealed. */
nav.bar.always{ transform:translateY(0); }
body.inner{ padding-top:3.1rem; }
nav.bar a.link[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--red); }

/* Inner-page header — the hero's quieter sibling */
.page-head{ padding:4.5rem 0 0; position:relative; z-index:3; }
.page-head .prose{ text-align:left; }
.page-head h1{
  font-size:clamp(2.6rem,7vw,4.6rem); line-height:.98; margin:0;
}
.page-head .standfirst{
  font-size:1.2rem; line-height:1.55; color:var(--ink-soft);
  margin:1.6rem 0 0; max-width:34rem;
}

/* Front door: the three ways in */
.doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(27,22,17,.3); border:var(--hair-strong); }
@media (max-width:760px){ .doors{ grid-template-columns:1fr; } }
a.door{
  background:var(--parchment); padding:2.2rem 1.7rem 2rem;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:background .2s ease;
}
a.door:hover{ background:var(--parchment-deep); }
/* Fixed box, not aspect-driven: the three marks have different
   proportions, and without this the headings below them don't line up. */
a.door .door-icon{ width:40px; height:42px; opacity:.9; margin-bottom:1.2rem; }
a.door .door-icon i{ display:block; width:100%; height:100%; aspect-ratio:auto;
  background-position:left bottom; background-repeat:no-repeat; background-size:contain; }
a.door h3{ margin:0 0 .6rem; }
a.door p{ margin:0 0 1.4rem; font-size:.98rem; line-height:1.58; color:var(--ink-soft); }
a.door .go{
  margin-top:auto; font-family:var(--sc); text-transform:uppercase;
  letter-spacing:.16em; font-size:.68rem; color:var(--red);
}

/* Upcoming gatherings */
.event{ display:grid; grid-template-columns:10.5rem 1fr; gap:1.6rem;
  padding:1.7rem 0; border-top:var(--hair); }
.event:first-of-type{ border-top:var(--hair-strong); }
.event:last-of-type{ border-bottom:var(--hair-strong); }
@media (max-width:620px){ .event{ grid-template-columns:1fr; gap:.5rem; } }
.event .when{ font-family:var(--sc); text-transform:uppercase;
  letter-spacing:.12em; font-size:.72rem; color:var(--red); line-height:1.6; padding-top:.3rem; }
.event .when .time{ display:block; color:var(--ink-mute); }
.event h3{ margin:0 0 .3rem; }
.event .kind{ font-family:var(--sc); text-transform:uppercase; letter-spacing:.14em;
  font-size:.66rem; color:var(--ink-mute); }
.event p{ margin:.5rem 0 0; font-size:.98rem; line-height:1.58; color:var(--ink-soft); }

.empty{
  border:var(--hair-strong); padding:2.4rem 2rem; text-align:center;
  background:var(--parchment-warm);
}
.empty p{ margin:0 auto; max-width:30rem; color:var(--ink-soft); }
.empty p + p{ margin-top:1rem; }

/* The "next thing" strip on the front door */
.next-strip{
  border-top:var(--hair-strong); border-bottom:var(--hair-strong);
  background:var(--parchment-warm); padding:2rem 0;
}
.next-strip .inner{ max-width:var(--measure); margin:0 auto; padding:0 1.5rem;
  display:flex; gap:1.5rem; align-items:baseline; flex-wrap:wrap; }
.next-strip .lab{ font-family:var(--sc); text-transform:uppercase;
  letter-spacing:.16em; font-size:.68rem; color:var(--red); }
.next-strip .what{ font-family:var(--display); font-size:1.3rem; }
.next-strip .meta{ color:var(--ink-mute); font-size:.95rem; }

/* Closing call to action at the foot of an inner page */
.cta-block{ text-align:center; }
.cta-block h2{ margin-bottom:1.2rem; }
.cta-block p{ max-width:32rem; margin-left:auto; margin-right:auto; color:var(--ink-soft); }
a.button{
  display:inline-block; margin-top:1.6rem;
  font-family:var(--sc); text-transform:uppercase; letter-spacing:.18em;
  font-size:.74rem; color:var(--parchment); background:var(--ink);
  padding:1rem 2.4rem; text-decoration:none; transition:background .2s ease;
}
a.button:hover{ background:var(--red-deep); }

/* Icons reused outside section IV */
.i-lattice i{ aspect-ratio:234/261; background-image:var(--img-lattice); }
.i-hand i{ aspect-ratio:170/261; background-image:var(--img-hand); }
.i-flame i{ aspect-ratio:263/284; background-image:var(--img-flame); }
.i-well i{ aspect-ratio:198/261; background-image:var(--img-well); }
.i-chalice i{ aspect-ratio:234/284; background-image:var(--img-chalice); }