/* ============================================================
   VENE — SECTIONS
   Folio by folio: hero, enemy, reframe, mechanics, schole,
   gallery walk, accumulation, vespers, colophon.
   ============================================================ */

/* ================= NAV ================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem var(--page-margin);
  background: color-mix(in srgb, var(--vellum) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transform: translateY(-110%);
  transition: transform 600ms var(--ease-settle), border-color var(--t-small);
}
.nav.is-shown { transform: none; border-bottom-color: var(--gold-whisper); }
/* night mode: the bar follows the room it hangs in */
.nav.is-night {
  background: color-mix(in srgb, var(--night) 78%, transparent);
  border-bottom-color: rgba(232, 204, 126, 0.14);
}
.nav.is-night .nav__mark { color: var(--on-night); }
.nav.is-night .nav__links a { color: var(--on-night-dim); }
.nav.is-night .nav__links a:hover { color: var(--gold-bright); }
.nav.is-night .nav__cta {
  background: var(--gold); border-color: var(--gold); color: var(--night);
}
.nav.is-night .nav__cta:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.nav__mark {
  font-family: var(--serif); font-weight: 560; font-size: 1.45rem;
  letter-spacing: 0.01em;
}
.nav__period { color: var(--gold); }
.nav__links { display: flex; gap: 2.2rem; }
.nav__links a {
  font-family: var(--sans); font-size: 0.875rem; font-weight: 480;
  color: var(--ink-faded); letter-spacing: 0.03em;
  transition: color var(--t-small);
}
.nav__links a:hover { color: var(--gold-deep); }
.nav__cta { padding: 0.62em 1.3em; font-size: 0.875rem; }
@media (max-width: 720px) { .nav__links { display: none; } }

/* ================= FOLIO MARKERS ================= */
.folio-no { display: block; text-align: center; margin-bottom: var(--s-12); }
.folio-no::before, .folio-no::after { content: "·"; color: var(--gold); margin: 0 0.8em; }
.folio-no--night { color: var(--on-night-ghost); }

/* ================= HERO ================= */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--s-24) var(--page-margin) 0;
  position: relative;
}
.hero__kicker { margin-bottom: var(--s-8); }

/* one deliberate ornament under the eyebrow: a short gold hairline carrying a
   small gold bezant at its centre — the same idiom as .rule-gold and the
   bezant discs used elsewhere on the page. */
.hero__ornament {
  position: relative;
  width: clamp(80px, 12vw, 130px);
  height: 6px;
  margin: 0 auto var(--s-12);
}
.hero__ornament::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
}
.hero__ornament::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--gold);
}
.hero__title {
  font-size: var(--text-hero);
  text-wrap: balance;
}
/* the illuminated initial: the first letter of "A day that ends." set as a
   versal in gold leaf, so the sentence reads at a glance with its opening
   letter illuminated — no box, the way the preload's gold A reads (ATELIER:
   gold is leaf; a refined typographic illuminated capital). */
.hero__initial {
  /* the versal: noticeably larger than the rest of the line so "A day" reads at
     a glance. em-sized so it scales with the responsive headline; inline and
     baseline-aligned (it rises above the line, the classic illuminated capital). */
  font-size: 1.48em;
  line-height: 1;
  margin-right: 0.06em;
  font-weight: 600;
  background-image:
    linear-gradient(168deg, var(--gold-bright) 0%, var(--gold) 44%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  /* a whisper of raised gold leaf, lit from the top-left like the rest of the page */
  filter:
    drop-shadow(0 1px 0 rgba(248, 245, 240, 0.5))
    drop-shadow(0 2px 7px rgba(142, 115, 39, 0.28));
}

.hero__sub {
  margin-top: var(--s-8);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 44rem;
}
.hero__cta { margin-top: var(--s-12); display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

.hero__edge {
  margin-top: auto;
  width: 100%; max-width: 56rem;
  padding: var(--s-16) 0 var(--s-8);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
}
.hero__edge-line {
  display: block; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
  box-shadow: 0 0 18px 0 rgba(196,162,74,0.45);
}

/* ================= GUILT (the enemy) ================= */
.guilt {
  background:
    radial-gradient(120% 80% at 50% 0%, #221C13 0%, var(--night) 55%);
  color: var(--on-night);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: clip;
}
.guilt__stage {
  display: block;
  max-width: clamp(34rem, 60vw, 52rem);
  margin: 0 auto;
  padding-block: clamp(2rem, 6vw, 5rem);
}
.guilt__h { font-size: var(--text-xl); }
/* editorial line breaks are art-directed for wide folios only */
@media (max-width: 700px) {
  .guilt__h br, .reframe__h br, .mech__head h2 br, .schole__h br { display: none; }
}
.guilt__word {
  font-size: var(--text-2xl);
  margin: var(--s-6) 0 var(--s-8);
  color: var(--vellum-bright);
}
.guilt__word em { letter-spacing: -0.01em; }
.guilt__prose { color: var(--on-night-dim); }
.guilt__prose em { color: var(--on-night); }

/* ================= REFRAME ================= */
.reframe { padding: var(--section-pad) 0; }
.reframe__h { font-size: var(--text-xl); margin-bottom: var(--s-16); }

.law { max-width: 46rem; margin: 0 auto var(--s-24); }
.law figcaption { margin-bottom: var(--s-6); }
.law__text {
  font-size: var(--text-lg);
  font-weight: 470;
  line-height: 1.25;
}
.law__gloss {
  margin-top: var(--s-6);
  color: var(--ink-faded);
  font-size: var(--text-base);
  max-width: 36rem;
  margin-inline: auto;
}

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: var(--s-16);
}
.principle h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--text-lg); line-height: 1.12;
  margin: var(--s-6) 0 var(--s-4);
}
.principle p { color: var(--ink-faded); font-size: 1rem; line-height: 1.6; }
.principle .rule-gold { margin: 0; }
@media (max-width: 880px) { .principles { grid-template-columns: 1fr; gap: var(--s-12); } }

/* ================= MECHANICS ================= */
.mech {
  background: linear-gradient(180deg, var(--vellum) 0%, var(--vellum-deep) 8%, var(--vellum-deep) 92%, var(--vellum) 100%);
  padding: var(--section-pad) 0;
  position: relative;
}
.mech__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-8); flex-wrap: wrap;
  margin-bottom: var(--s-16);
}
.mech__head h2 { font-size: var(--text-xl); }
.mech__head .lead { color: var(--ink-faded); font-style: italic; }

.mech__grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem) clamp(2.5rem, 6vw, 6.5rem);
}
.mech__item { position: relative; padding-top: var(--s-2); }
.mech__no { display: block; margin-bottom: var(--s-4); font-size: 0.8125rem; }
.mech__fig {
  background: var(--vellum-bright);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 3px;
  padding: clamp(1rem, 2vw, 1.75rem);
  margin-bottom: var(--s-6);
  box-shadow: 0 1px 0 rgba(26,22,16,0.04), 0 14px 34px -26px rgba(26,22,16,0.35);
}
.mech__item h3 {
  font-family: var(--serif); font-weight: 520;
  font-size: var(--text-lg); line-height: 1.1;
  margin-bottom: var(--s-3);
}
.mech__item p { color: var(--ink-faded); max-width: 34rem; }
.mech__item p em { color: var(--ink-soft); }

.mech__more {
  margin-top: var(--s-16);
  font-family: var(--sans); font-size: 0.875rem; line-height: 2;
  color: var(--ink-faded);
  max-width: 50rem;
}
.mech__more span {  /* a quiet gold lead-in, sentence case */
  font-style: italic; letter-spacing: 0.01em;
  font-weight: 560; color: var(--gold-deep);
}
@media (max-width: 880px) { .mech__grid { grid-template-columns: 1fr; } }

/* --- mechanics figures --- */
.fig-label {  /* tiny diagram captions, sentence case (sans stays legible at 6.5px) */
  font-family: var(--sans); font-size: 6.5px; letter-spacing: 0.03em;
  fill: var(--ink-ghost);
}
.fig-label--dim  { fill: color-mix(in srgb, var(--ink-ghost) 75%, transparent); text-transform: none; letter-spacing: 0.02em; }
.fig-label--gold { fill: var(--gold-deep); }

/* the relocated edge caption: a quiet serif line under the edge diagram,
   captioning the literal drawn edge (moved out of the hero in pass 3) */
.fig-cap {
  margin: calc(-1 * var(--s-2)) 0 var(--s-4);
  font-family: var(--serif); font-style: italic;
  font-size: var(--text-sm); line-height: 1.45;
  color: var(--ink-faded); max-width: 30rem;
}

.fig-load__curve { stroke: var(--ink-soft); stroke-width: 2; }
.fig-load__base  { stroke: var(--ink); opacity: 0.15; }
.fig-load__peak  { fill: var(--gold); }

.fig-budget__cells rect { fill: var(--gold); opacity: 0.85; }
.fig-budget__cells rect:nth-child(2) { opacity: 0.7; }
.fig-budget__cells rect:nth-child(3) { opacity: 0.6; }
.fig-budget__cells rect:nth-child(4) { opacity: 0.5; }
.fig-budget__cells rect:nth-child(5) { opacity: 0.4; }
.fig-budget__cells rect.is-last { fill: none; stroke: var(--gold-deep); stroke-dasharray: 3 3; opacity: 0.8; }

.fig-seal__moon { fill: var(--vellum-deep); stroke: var(--ink-soft); stroke-width: 1.6; }
.fig-seal__shadow { fill: var(--ink); opacity: 0.82; }
.fig-seal__cards rect { fill: none; stroke: var(--ink-soft); stroke-width: 1.4; opacity: 0.6; }
.fig-seal__cards rect:first-child { fill: var(--gold-whisper); stroke: var(--gold-deep); opacity: 1; }

.fig-edge__evening { fill: var(--gold); opacity: 0.16; }           /* the open evening, gently golden */
.fig-edge__base { stroke: var(--ink); opacity: 0.14; stroke-width: 1.4; }
.fig-edge__work rect { fill: var(--ink-soft); opacity: 0.6; }      /* work, solid and packed into the day */
.fig-edge__line { stroke: var(--gold); stroke-width: 2.4; }        /* the edge: the finish line at dusk */
.fig-edge__sun  { fill: var(--gold); opacity: 0.92; }

/* --- the day re-plans itself (a calm, self-running proof of the engine) --- */
.replan { margin: var(--s-24) auto 0; max-width: 46rem; text-align: center; }
.replan__eyebrow { display: block; text-align: center; color: var(--gold-deep); }
.replan__eyebrow::before, .replan__eyebrow::after { content: none; }

.replan__stage {
  --board-h: clamp(290px, 42vh, 392px);
  display: grid; grid-template-columns: 3.1rem minmax(0, 30rem);
  justify-content: center; gap: 0.6rem;
  margin: var(--s-8) auto 0;
}
.replan__rail { position: relative; height: var(--board-h); }
.replan__rail span {
  position: absolute; top: calc(var(--at) * 100%); right: 0.5rem;
  transform: translateY(-50%);
  font-family: var(--sans); font-size: 0.625rem; letter-spacing: 0.02em;
  color: var(--ink-ghost); white-space: nowrap;
}
.replan__rail span::after {  /* a small tick reaching the board */
  content: ""; position: absolute; right: -0.55rem; top: 50%;
  width: 0.3rem; height: 1px; background: color-mix(in srgb, var(--ink) 20%, transparent);
}

.replan__board {
  position: relative; height: var(--board-h);
  background: var(--vellum-bright);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(26,22,16,0.04), 0 16px 38px -28px rgba(26,22,16,0.4);
}
.replan__board::before {  /* faint hour bands, like the app's day grid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg,
    transparent 0 calc(100% / 6 - 1px),
    color-mix(in srgb, var(--ink) 5%, transparent) calc(100% / 6 - 1px) calc(100% / 6));
}

.rblock {
  position: absolute; left: 10px; right: 10px;
  top: calc(var(--ay) * 1%); height: calc(var(--ah) * 1%);
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 0.3rem 0.7rem; border-radius: 4px; overflow: hidden;
  border-left: 2px solid transparent;
  font-family: var(--sans); text-align: left;
  box-shadow: 0 1px 2px rgba(26,22,16,0.09);
  /* a calm ~2.4s settle (not a 1.5s snap), so the day visibly reorganizes */
  transition: top 2400ms var(--ease-settle), height 2400ms var(--ease-settle),
              opacity 1100ms var(--ease-drift), transform 2400ms var(--ease-settle);
  transition-delay: var(--d, 0ms);
}
.replan__board.is-b .rblock { top: calc(var(--by) * 1%); height: calc(var(--bh) * 1%); }
.rblock b { font-size: 0.78rem; font-weight: 560; letter-spacing: 0.01em; line-height: 1.05; }
.rblock i { font-style: normal; font-size: 0.6rem; letter-spacing: 0.05em; opacity: 0.72; }

.rblock--deep  { background: linear-gradient(135deg, #221c14, #2e2619); color: var(--on-night); border-left-color: var(--gold); }
.rblock--make  { background: color-mix(in srgb, var(--ink) 13%, var(--vellum-bright)); color: var(--ink); border-left-color: var(--ink-faded); }
.rblock--admin { background: color-mix(in srgb, var(--ink) 6%, var(--vellum-bright)); color: var(--ink-faded); border-left-color: var(--ink-ghost); }
.rblock--new {
  background: color-mix(in srgb, var(--madder) 13%, var(--vellum-bright));
  color: color-mix(in srgb, var(--madder) 78%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--madder) 42%, transparent);
  border-left: 2px solid var(--madder);
  opacity: 0; transform: scale(0.96);  /* arrives only once the day re-plans */
}
.replan__board.is-b .rblock--new { opacity: 1; transform: none; }

.replan__edge {
  position: absolute; left: 0; right: 0; top: 86%; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold) 8%, var(--gold) 92%, transparent);
  box-shadow: 0 0 10px rgba(196,162,74,0.4);
}
.replan__edge i {
  position: absolute; right: 6px; top: 4px;
  font-family: var(--serif); font-style: italic; font-size: 0.7rem;
  color: var(--gold-deep);
}

.replan__cap {
  margin: var(--s-8) auto 0; max-width: 38rem;
  font-family: var(--serif); font-style: italic;
  font-size: var(--text-base); line-height: 1.5; color: var(--ink-faded);
}

/* reduced-motion: a clean before / after of the two arrangements */
.replan__stage--pair { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-8); justify-content: center; }
.replan__one { width: min(100%, 19rem); }
.replan__one .replan__board { height: clamp(250px, 34vh, 320px); }
.replan__pair-cap {
  margin-top: var(--s-3); text-align: center;
  font-family: var(--serif); font-style: italic; font-size: var(--text-sm);
  color: var(--ink-ghost);
}

@media (max-width: 560px) {
  .replan__stage { grid-template-columns: 2.4rem minmax(0, 1fr); }
}

/* ================= SCHOLE (the evening) ================= */
.schole { padding: var(--section-pad) 0; position: relative; }
.schole__h { font-size: var(--text-xl); margin-bottom: var(--s-8); }
.schole__prose { margin-inline: auto; color: var(--ink-faded); }
.schole__prose em { color: var(--ink-soft); }
/* σχολή stays only as a small grace note, never the towering gold hero */
.schole__grace {
  margin: var(--s-12) auto 0;
  font-family: var(--serif); font-style: italic;
  font-size: var(--text-md); color: var(--ink-faded);
}
.schole__grace .greek {
  font-family: var(--greek); font-style: normal;
  font-size: 1.25em; color: var(--gold-deep); letter-spacing: 0.02em;
}
.schole__hook { margin-top: var(--s-8); color: var(--ink-ghost); }

/* ================= GALLERY WALK ================= */
.gallery {
  background: var(--gallery-wall);
  /* one fixed mat window for every canvas, so frames of portraits with
     different aspect ratios read as one coherent set (the gilt border and
     plaque sit identically down the line) */
  --gw: clamp(220px, 52vw, 322px);
  --gh: calc(var(--gw) * 1.34);
}
.gallery__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.gallery__lighting {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(110% 60% at 50% -5%, rgba(232, 204, 126, 0.07), transparent 60%),
    radial-gradient(140% 90% at 50% 115%, rgba(0,0,0,0.55), transparent 55%);
}
.gallery__track {
  display: flex; align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
}

.gpanel {
  flex: 0 0 auto;
  width: min(82vw, 560px);
  margin-right: clamp(4rem, 10vw, 10rem);
  color: var(--on-night);
}
.gpanel--intro {
  width: min(86vw, 620px);
  margin-left: var(--page-margin);
  margin-right: clamp(6rem, 14vw, 14rem);
}
.gpanel--intro h2 { font-size: var(--text-xl); color: var(--vellum-bright); margin: var(--s-6) 0; }
.gpanel--intro .folio-no { text-align: left; margin-bottom: var(--s-4); }
.gpanel--intro .folio-no::before { content: none; }
.gpanel__lead { color: var(--on-night-dim); font-size: var(--text-md); line-height: 1.5; max-width: 34rem; }
.gpanel__lead em { color: var(--on-night); }
.gallery__hint { margin-top: var(--s-12); color: var(--on-night-ghost); }

.gpanel--portrait {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  /* the printed plaque and the wall description share one column width so they
     read as a single extended object label (card, then paragraph beneath it) */
  --caption-w: 23rem;
}

/* --- The gilded frame --- */
.gframe { position: relative; }
.gframe__mat {
  position: relative;
  /* a real carved gilt frame: a leaf texture sliced into the border, with its
     own moulding profile, craquelure, wear to the bole, and a top-left light.
     A thin dark rabbet reveal sits between the gilt and the canvas. */
  padding: clamp(6px, 0.9vw, 11px);
  border: clamp(17px, 2.4vw, 34px) solid transparent;
  border-image: url("../assets/frame/gilt.png") 96 round;
  background-color: #120c06;
  box-shadow:
    0 0 0 1px rgba(20, 13, 5, 0.95),               /* crisp outer edge against the wall */
    0 30px 66px -26px rgba(5, 3, 1, 0.85),         /* soft warm shadow on the wall */
    0 12px 24px -15px rgba(5, 3, 1, 0.7);          /* nearer contact shadow */
}
.gframe__mat img {
  /* every canvas sits in the same fixed window, matted by an even dark mount.
     never crop a masterpiece: object-fit contain fits the whole painting, and
     the mat takes up the slack, so the gilt frame is identical for all of them */
  width: var(--gw); height: var(--gh);
  box-sizing: border-box;
  object-fit: contain; object-position: center;
  padding: clamp(8px, 1.4vw, 16px);
  background-color: #0f0a05;
  filter: sepia(0.16) saturate(0.9) contrast(1.05) brightness(0.95);
}
/* the canvas (a portrait, or the reserved void) sits recessed below the gilt */
.gframe__mat > img,
.gframe__vacant {
  position: relative;
  box-shadow:
    0 0 0 2px rgba(18, 12, 5, 0.9),    /* a thin dark liner around the canvas */
    inset 0 0 26px rgba(0, 0, 0, 0.4), /* the canvas dips into shadow */
    0 3px 14px rgba(0, 0, 0, 0.5);
}
.gframe__mat::after {  /* gallery light falling on the canvas */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(168deg, rgba(252,250,246,0.10) 0%, transparent 38%, rgba(0,0,0,0.18) 100%);
}
.gplaque {
  margin-top: clamp(1.1rem, 2.6vh, 1.7rem);
  display: inline-block; max-width: var(--caption-w);
  /* a small printed museum label on aged card, pinned a hair off-square */
  background:
    radial-gradient(130% 150% at 16% -10%, rgba(255, 252, 245, 0.7), transparent 62%),
    linear-gradient(176deg, #ece3d0 0%, #ddd0b5 100%);
  color: var(--ink);
  padding: 0.6rem 1.3rem 0.68rem;
  border: 1px solid rgba(58, 44, 22, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 247, 0.5),         /* the card catches a little light */
    0 11px 24px -13px rgba(5, 3, 1, 0.85);          /* a soft shadow where it leaves the wall */
  transform: rotate(-0.6deg);  /* printed and pinned by hand, not set square */
}
.gplaque strong {
  display: block;
  font-family: var(--serif); font-weight: 560; font-size: 1.02rem;
  color: var(--ink); letter-spacing: 0.01em;
  padding-bottom: 0.26rem; margin-bottom: 0.24rem;
  border-bottom: 1px solid rgba(58, 44, 22, 0.22);  /* a fine engraved rule under the name */
}
.gplaque span { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--ink-faded); }
.gplaque em {
  display: block; margin-top: 0.24rem;
  font-family: var(--serif); font-style: italic; font-size: 0.85rem;
  color: var(--ink-faded);
}

.gpanel__note { max-width: var(--caption-w); margin-top: var(--s-3); }
.gpanel__note p { color: var(--on-night-dim); font-size: 0.95rem; line-height: 1.6; }
.gpanel__note p em { color: var(--on-night); }
.gpanel__quote {
  font-family: var(--serif); font-size: var(--text-md);
  color: var(--vellum-bright) !important; font-style: italic;
  margin-bottom: var(--s-3);
}

/* The reserved (empty) frame */
.gframe__vacant {
  width: var(--gw); height: var(--gh);  /* the same window as every portrait */
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(80% 60% at 50% 40%, #241E15 0%, #15100A 80%);
}

/* hand-hung: nothing in the hall sits perfectly square */
.gpanel--portrait:nth-of-type(even) .gframe__mat { transform: rotate(0.5deg); }
.gpanel--portrait:nth-of-type(odd)  .gframe__mat { transform: rotate(-0.45deg); }
.gpanel--portrait:nth-of-type(even) .gplaque { transform: rotate(0.7deg); }
.gpanel--reserved .gframe__mat { transform: rotate(0.35deg); }
.gpanel--reserved .gplaque { transform: rotate(-0.45deg); }
.gframe__reserved {
  font-size: var(--text-lg); color: var(--on-night-ghost);
  transition: color 1.2s var(--ease-drift);
}
.gpanel--reserved:hover .gframe__reserved { color: var(--gold-bright); }
.gpanel__cta { margin-top: var(--s-6); }

/* Painting entrance: lit as you arrive */
.gpanel--portrait .gframe { opacity: 0.55; transform: scale(0.97); transition: opacity 900ms var(--ease-drift), transform 900ms var(--ease-drift); }
.gpanel--portrait.is-lit .gframe { opacity: 1; transform: none; }
.gpanel__note { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-settle) 150ms, transform 700ms var(--ease-settle) 150ms; }
.gpanel--portrait.is-lit .gpanel__note { opacity: 1; transform: none; }

/* Mobile gallery: vertical stroll */
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .gallery__pin { position: static; height: auto; overflow: visible; padding: var(--section-pad) 0; }
  .gallery__track { display: block; width: auto; height: auto; }
  .gpanel { width: auto; max-width: 34rem; margin: 0 auto var(--s-24); padding: 0 var(--page-margin); }
  .gpanel--intro { margin-left: auto; }
  .gpanel--portrait .gframe { opacity: 1; transform: none; }
  .gpanel__note { opacity: 1; transform: none; }
  .gallery__hint { display: none; }
}

/* ================= ACCUMULATION ================= */
.accum { padding: var(--section-pad) 0; position: relative; }
.accum .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.accum__copy h2 { font-size: var(--text-xl); margin-bottom: var(--s-8); }
.accum__copy .prose { color: var(--ink-faded); }
.accum__copy .prose em { color: var(--ink-soft); }

.accum__ledger {
  background: var(--vellum-bright);
  border: 1px solid var(--gold-whisper);
  box-shadow: 0 1px 0 rgba(26,22,16,0.05), 0 24px 60px -38px rgba(26,22,16,0.4);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}
.ledger__title {  /* names the feature: this ledger is Vene's Practices */
  margin-bottom: 0.4rem;
  padding-bottom: 0.9rem;
  font-size: var(--text-md);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.ledger__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;  /* name · leader · count · unit, all aligned */
  align-items: baseline; gap: 0.8rem;
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
}
.ledger__row:last-of-type { border-bottom: 0; }
.ledger__name { font-family: var(--serif); font-size: var(--text-md); font-weight: 480; }
.ledger__dots { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--ink) 25%, transparent); transform: translateY(-4px); }
.ledger__count {
  font-family: var(--sans); font-variant-numeric: tabular-nums;
  font-size: var(--text-lg); font-weight: 300; color: var(--gold-deep);
  text-align: right;  /* every number right-aligns into one gold column */
}
/* Each step ROLLS like an odometer: the old and new numbers are STACKED in a
   one-line clip window (never overlaid, so there is no ghost) and the reel
   slides up exactly one line — old exits the top, new arrives in its place.
   Steps are batched (1-5) and paced calmly so each roll fully settles before
   the next. The web echo of the app timer's .contentTransition(.numericText()). */
.count__clip {
  display: inline-block;
  overflow: hidden;
  height: 1.18em;            /* exactly one line tall — the roll window */
  line-height: 1.18;
  vertical-align: -0.49em;   /* overflow:hidden shifts the baseline to the box edge; nudge back onto the row baseline (measured) */
}
.count__reel { display: block; will-change: transform; transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1); }
.count__reel.count__reel--still { transition: none; }
.count__line { display: block; height: 1.18em; line-height: 1.18; text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .count__reel { transition: none; }
}
/* the units stay varied (each practice counted its own honest way) but get one
   deliberate treatment: a quiet italic column, left-aligned, all the same */
.ledger__unit {
  font-family: var(--serif); font-style: italic;
  font-size: 0.95rem; color: var(--ink-faded);
  text-align: left;
}
.ledger__foot { margin-top: var(--s-6); text-align: center; color: var(--ink-ghost); }
@media (max-width: 880px) { .accum .wrap { grid-template-columns: 1fr; } }

/* ================= VESPERS ================= */
.vespers { height: 540vh; position: relative; background: var(--night); }
.vespers__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.vespers__sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sky-top, #F8F5F0) 0%, var(--sky-mid, #F2E8D5) 55%, var(--sky-low, #E5CE9E) 100%);
}
.vespers__sun {
  position: absolute; left: 50%; top: 18%;
  width: clamp(72px, 10vw, 130px); aspect-ratio: 1;
  margin-left: calc(clamp(72px, 10vw, 130px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #F4E2A8, #C4A24A 60%, #A3812F);
  box-shadow: 0 0 90px 24px rgba(196,162,74,0.5);
  transform: translateY(var(--sun-y, 0));
}
.vespers__horizon {
  position: absolute; left: 0; right: 0; top: 72%;
  height: 1px; z-index: 2;  /* the edge stays above the ground; the sun sets behind it */
  background: linear-gradient(90deg, transparent, var(--gold) 10%, var(--gold) 90%, transparent);
  box-shadow: 0 0 24px rgba(196,162,74,0.6);
}
.vespers__sky::after {  /* ground below the edge */
  content: ""; position: absolute; left: 0; right: 0; top: 72%; bottom: 0;
  background: linear-gradient(180deg, #14110c 0%, var(--night) 100%);
}

.vespers__script { position: relative; z-index: 2; text-align: center; padding: 0 var(--page-margin); }
.vespers__script > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity 800ms var(--ease-settle), transform 800ms var(--ease-settle);
}
.vespers__script > .is-on { opacity: 1; transform: none; }
.vespers__time { margin-bottom: var(--s-6); color: var(--ink-faded); }
.vespers__line { font-size: var(--text-xl); color: var(--ink); position: absolute; left: 0; right: 0; }
.vespers__line--big { font-size: var(--text-2xl); color: var(--vellum-bright); }
.vespers__line--gold { font-size: var(--text-2xl); color: var(--gold-bright); }
.vespers__time + .vespers__line { position: static; }

.vespers__cta {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; padding: clamp(11vh, 14vh, 16vh) var(--page-margin) 0;
  opacity: 0; transform: translateY(30px); pointer-events: none;
  transition: opacity 900ms var(--ease-settle), transform 900ms var(--ease-settle);
}
.vespers__cta.is-on { opacity: 1; transform: none; pointer-events: auto; }
.vespers__pitch { font-size: var(--text-2xl); color: var(--vellum-bright); margin: var(--s-4) 0 var(--s-10, 2.5rem); }
.vespers__buttons { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: var(--s-8); }
.btn--night {
  border: 1px solid rgba(239,233,223,0.25); color: var(--on-night);
}
.btn--night:hover { border-color: var(--gold); color: var(--gold-bright); }
.vespers__fine {
  margin-top: var(--s-8);
  font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--on-night-ghost);
}

/* ================= COLOPHON ================= */
.colophon {
  background: var(--night); color: var(--on-night-dim);
  padding: var(--s-24) 0 var(--s-12);
  border-top: 1px solid rgba(232,204,126,0.12);
}
.colophon__scene {
  display: flex; align-items: flex-end; justify-content: center; gap: clamp(1rem, 4vw, 3rem);
  margin-bottom: var(--s-8);
}
.colophon__scene .beast--knight { width: clamp(90px, 12vw, 150px); }
.colophon__scene .beast--snail  { width: clamp(70px, 9vw, 110px); }
.colophon__vs { flex: 0 1 260px; text-align: center; padding-bottom: 2rem; }
.colophon__vs .label { margin-top: 0.8rem; color: var(--on-night-ghost); }
.colophon__legend {
  max-width: 36rem; margin: 0 auto var(--s-16);
  text-align: center; font-style: italic;
  color: var(--on-night-dim);
}
.colophon__nav {
  display: flex; justify-content: center; gap: 2.4rem; flex-wrap: wrap;
  margin-bottom: var(--s-12);
}
.colophon__nav a {
  font-family: var(--sans); font-size: 0.875rem; color: var(--on-night-dim);
  transition: color var(--t-small);
}
.colophon__nav a:hover { color: var(--gold-bright); }
.colophon__meta {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--sans); font-size: 0.8125rem; color: var(--on-night-ghost);
  border-top: 1px solid rgba(239,233,223,0.08);
  padding-top: var(--s-8);
}

/* ================= MARGIN NOTES ================= */
.margin-note {
  position: absolute; right: clamp(0.5rem, 3vw, 3rem); top: 18%;
  width: clamp(110px, 11vw, 160px);
  text-align: center;
  z-index: var(--z-margin-beast);
}
.margin-note__text {
  margin-top: 0.6rem;
  font-family: var(--serif); font-style: italic; font-size: 0.8125rem;
  color: var(--ink-ghost); line-height: 1.45;
}
.margin-note--accum { top: auto; bottom: 10%; left: clamp(0.5rem, 3vw, 3rem); right: auto; }
/* margin beasts only exist where a real margin exists */
@media (max-width: 1500px) { .margin-note { display: none; } }

/* ============ Waitlist — a screen of its own ============ */
.wl-screen {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--vellum, #F8F5F0);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .42s ease;
}
.wl-screen.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.wl-screen .waitlist { opacity: 0; transform: translateY(10px); transition: opacity .5s ease .12s, transform .5s ease .12s; }
.wl-screen.is-open .waitlist { opacity: 1; transform: none; }
.wl-screen__close {
  position: absolute; top: 22px; right: 28px;
  background: none; border: none; cursor: pointer;
  font: 300 30px/1 var(--serif); color: #A89C82;
  width: 44px; height: 44px;
  transition: color .15s;
}
.wl-screen__close:hover { color: #1A1610; }
@media (max-width: 480px) {
  .wl-screen { padding: 24px 18px; }
  .wl-screen__close { top: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-screen, .wl-screen .waitlist { transition: none; }
  .wl-screen .waitlist { transform: none; }
}

/* ============ Waitlist — the "register" treatment ============ */
.waitlist { max-width: 480px; margin: 0 auto; text-align: center; font-family: var(--serif); }
.waitlist-eyebrow { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:6px; }
.waitlist-eyebrow > span:nth-child(2) { font-size:11px; letter-spacing:3px; color:#9C7A28; }
.wl-rule { width:34px; height:1px; background:#C4A24A; opacity:.7; }
.waitlist-lede { font-style:italic; font-size:18px; color:#1A1610; margin:0 0 26px; }
.waitlist-row { display:flex; align-items:flex-end; gap:18px; }
.waitlist-input { flex:1; min-width:0; border:none; border-bottom:1px solid #1A1610; background:transparent; font-family: var(--serif); font-size:19px; font-style:italic; color:#1A1610; padding:0 0 7px; outline:none; }
.waitlist-input::placeholder { color:#A89C82; font-style:italic; }
.waitlist-input:focus { border-bottom-color:#C4A24A; }
.waitlist-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.waitlist-submit { font-family: var(--serif); font-size:15px; color:#2A2008; background:#C4A24A; border:none; border-radius:3px; padding:11px 22px; cursor:pointer; white-space:nowrap; transition: background .15s; }
.waitlist-submit:hover { background:#B8932F; }
.waitlist-consent { font-style:italic; font-size:12px; color:#A89C82; margin:18px 0 0; }
.waitlist-error { font-style:italic; font-size:13px; color:#973B2C; margin:10px 0 0; min-height:1em; }
.waitlist-success { display:none; }
.waitlist.waitlist-done .waitlist-eyebrow,
.waitlist.waitlist-done .waitlist-lede,
.waitlist.waitlist-done .waitlist-row,
.waitlist.waitlist-done .waitlist-consent,
.waitlist.waitlist-done .waitlist-error { display:none; }
.waitlist.waitlist-done .waitlist-success { display:block; }
.wl-seal { display:block; margin:0 auto; }
.wl-ring, .wl-check { stroke-dasharray:1; stroke-dashoffset:1; }
.waitlist-done .wl-ring { animation: wl-draw .62s ease-in-out forwards; }
.waitlist-done .wl-check { animation: wl-draw .46s cubic-bezier(.65,0,.35,1) .52s forwards; }
.waitlist-done .wl-seal { animation: wl-pop .34s ease-out .56s; }
.wl-done { font-size:25px; color:#1A1610; margin:14px 0 0; opacity:0; animation: wl-rise .56s ease-out .84s forwards; }
.wl-done em { font-style:italic; }
.wl-done-sub { font-size:14px; font-style:italic; color:#8F8270; margin:7px 0 0; opacity:0; animation: wl-rise .56s ease-out 1s forwards; }
@keyframes wl-draw { to { stroke-dashoffset:0; } }
@keyframes wl-pop { 0%{transform:scale(1)} 50%{transform:scale(1.07)} 100%{transform:scale(1)} }
@keyframes wl-rise { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
@media (prefers-reduced-motion: reduce) {
  .wl-ring, .wl-check { stroke-dashoffset:0; }
  .waitlist-done .wl-ring, .waitlist-done .wl-check, .waitlist-done .wl-seal, .wl-done, .wl-done-sub { animation:none; opacity:1; }
}