/* ════════════════════════════════════════════════════════════
   THE ONE · The Path to the Ring — path.css
   Loaded after css/style.css. Uses .velvet / .hallmark / .wax /
   .engraved / .btn.velvet / .btn.ivory and the :root tokens from
   style.css (the Écrin accent block) and never redefines them.
   Each package owns one marked section below.
   ════════════════════════════════════════════════════════════ */

/* ═ progression ═ */
/* The plaque (Home small · Us large), the metallic track, the medallions.
   Token fallbacks are inline (var(--x, …)) so the section also renders
   before the accent pass lands; the tokens in :root win when present.
   Glows are opacity on pseudo-elements — box-shadow is never animated. */

/* ── plaque ── */
.plaque { margin-top: 14px; padding: 16px 18px 18px; cursor: pointer; transition: transform .12s; outline: none; container-type: inline-size; }   /* the head sizes itself to this width */
.plaque.fade-up { animation-name: pathfade; }                                   /* opacity only, so :active can still press */
.plaque:active { transform: scale(.992); }
.plaque:focus-visible { box-shadow: var(--plum-shadow, 0 22px 50px -22px rgb(43 33 37 / .75)), 0 0 0 2px rgb(var(--blush-rgb) / .7); }
.plaque.large { cursor: default; margin-top: 16px; padding-bottom: 22px; }
.plaque.large:active { transform: none; }
.plaque.has-controls { cursor: default; }
.plaque.has-controls:active { transform: none; }
.plaque-tap { cursor: pointer; outline: none; border-radius: 12px; }
.plaque-tap:focus-visible { box-shadow: 0 0 0 2px rgb(var(--blush-rgb) / .7); }
.plaque-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plaque-eb { font-family: var(--trajan); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--on-plum-eb, #eccfc8); white-space: nowrap;
  /* the title always leaves room for the tier: 66px = 12 gap + 46 'TIER I' + 8 air; 19.5em = the title untracked, 31 letters take the tracking */
  font-size: clamp(8px, calc((100cqi - 66px) / 26.3), 9.5px);
  letter-spacing: clamp(.12em, calc((100cqi - 66px - 19.5em) / 31), .34em); }
.plaque-tier { font-family: var(--trajan); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; flex: none; }
.plaque-tier.metal, .cp-eb.metal, .cp-title.metal, .tonight-reveal .eyebrow.metal, .design-title.metal { background-image: var(--grad-metal-lit, var(--grad-metal)); }   /* every stop ≥5.6:1 on plum */

/* ── track ── */
.track { position: relative; height: 12px; margin: 30px 22px 0; border-radius: 8px;
  background: var(--plum-well, linear-gradient(180deg, #100a0d, #251519));
  box-shadow: inset 0 2px 5px rgb(0 0 0 / .8), inset 0 -1px 0 rgb(255 255 255 / .07), 0 0 0 1px rgb(255 255 255 / .05); }
.plaque.large .track { margin: 56px 36px 0; }
.track-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; overflow: hidden;
  background: var(--fill-rose, linear-gradient(180deg, #fbe4dc 0%, #e6a9ad 30%, #b76e79 58%, #d48f97 82%, #f3cfc9 100%));
  box-shadow: var(--fill-glow, 0 0 12px rgb(244 184 191 / .85), 0 0 30px rgb(220 147 160 / .55), inset 0 1px 0 rgb(255 255 255 / .6));
  transition: width .9s cubic-bezier(.2,.8,.2,1); }
.plaque.retreat .track-fill, .plaque.retreat .track-head { transition-duration: 1.2s; }
.track-fill::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%);
  background-size: 240% 100%; animation: sheen 3.4s ease-in-out infinite; }
.plaque.rest .track-fill::after, .plaque.large .track-fill::after, .plaque.waiting .track-fill::after { animation: none; }
.plaque.sheen-once .track-fill::after { animation: sheen 1.2s ease-in-out 1; }
@keyframes sheen { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.track-seg { position: absolute; top: -1px; bottom: -1px; width: 2px; background: rgb(18 11 14 / .95); box-shadow: 1px 0 0 rgba(246,217,206,.12); z-index: 1; }
.track-head { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; z-index: 2;
  box-shadow: 0 0 10px 3px rgb(255 235 230 / .95), 0 0 26px 8px rgb(var(--blush-rgb) / .55);
  transition: left .9s cubic-bezier(.2,.8,.2,1); }                       /* static — no pulse loop */
.track-head.flare { animation: flare .3s ease-out 1; }
@keyframes flare { 50% { transform: scale(1.6); } }
.plaque.waiting .track-head { display: none; }
.track-ghost { position: absolute; top: 50%; height: 0; border-top: 1px dashed rgba(246,217,206,.45); z-index: 1; opacity: 0; transition: opacity .4s; pointer-events: none; }
.track-ghost.on { opacity: .7; }
.track-node { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; flex-direction: column; align-items: center;
  border: 0; background: none; padding: 0; color: inherit; font: inherit; }
button.track-node { cursor: pointer; }
button.track-node::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }   /* ≥40px hit area, invisible */
.plaque.large .track-node:last-child::after { inset: -2px; }                                        /* V is 56–64px already; its zone must not reach IV's */
button.track-node:focus-visible .emb-ring { box-shadow: 0 0 0 2px rgb(var(--blush-rgb) / .8), 0 2px 8px -2px rgb(0 0 0 / .8); }
.track-num { position: absolute; top: calc(50% + 24px); white-space: nowrap; line-height: 1; }
.track-node:last-child .track-num { top: calc(50% + 30px); }                    /* V is 46px on Home */
.plaque.large .track-num { top: auto; bottom: calc(50% + 40px); }                /* numerals above the track on Us, one line for I–V */
.plaque.large .track-node:last-child .track-num { bottom: calc(50% + 40px); }   /* same line as the others */
.plaque .engraved:not(.lit) { color: #6b4655; text-shadow: 0 1px 0 rgba(246,217,206,.45), 0 -1px 0 rgba(0,0,0,.6); }   /* cut in, but present (~2.3:1: a stamp, clearly under the lit numerals) */
.track-lbl { position: absolute; top: calc(50% + 40px); white-space: nowrap; font-family: var(--trajan); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #ead0ca; text-align: center; line-height: 1; }
.track-lbl small { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: none; color: var(--on-plum-soft, #d9b8b3); margin-top: 3px; }
/* one baseline for all five labels (computed from the largest medallion). HUNDRED and DIAMOND are the two long words:
   up to 430px they lose their tracking and step apart; under 400px every word steps aside and 'day N' carries the meaning */
@media (max-width: 430px) {
  .plaque.large .track-lbl { letter-spacing: 0; }
  .plaque.large .track-node[data-i="3"] .track-lbl { transform: translateX(-5px); }
  .plaque.large .track-node[data-i="4"] .track-lbl { transform: translateX(5px); }
}
@media (max-width: 399px) {
  .plaque.large .track-node .track-lbl .lbl-word { display: none; }
  .plaque.large .track-node[data-i="3"] .track-lbl, .plaque.large .track-node[data-i="4"] .track-lbl { transform: none; }
}
@media (max-width: 379px) {
  .plaque.large .track { margin-left: 32px; margin-right: 32px; }
  .plaque.large .emb.big { width: 56px; height: 56px; }
  .plaque.large .track-node:last-child .track-num { bottom: calc(50% + 40px); }
}

/* ── foot ── */
.plaque-foot { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "day count" "mid mid"; row-gap: 6px; column-gap: 12px; align-items: baseline; margin-top: 38px; }
.plaque.large .plaque-foot { margin-top: 78px; }
.plaque-day { grid-area: day; font-family: var(--trajan); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.plaque-day .roll { font-weight: inherit; font-variant-numeric: tabular-nums; }
.plaque-mid { grid-area: mid; font-family: var(--serif); font-style: italic; font-size: 15px; color: #f3dfd9; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.plaque-mid.link { position: relative; display: block; width: 100%; min-height: 44px; border: 0; background: none; padding: 13px 0; margin: -13px 0; cursor: pointer; text-decoration: none; }
.plaque-count { grid-area: count; justify-self: end; font-family: var(--sans); font-size: 11px; letter-spacing: .08em; color: var(--on-plum-soft, #d9b8b3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plaque-count i { font-style: normal; opacity: .5; margin: 0 2px; }
.plaque-cta { margin-top: 14px; width: 100%; }
.plaque .plaque-cta.btn.ivory.small { width: 100%; display: flex; justify-content: center; min-height: 44px; padding: 13px 22px; }

/* ── medallions ── */
.emb { position: relative; width: 34px; height: 34px; display: grid; place-items: center; flex: none; }
.emb.big { width: 46px; height: 46px; }
.plaque.large .emb.big { width: 64px; height: 64px; }
.emb.hero { width: 96px; height: 96px; }
.emb.hero.model { width: 132px; height: 132px; }
.emb-ring { position: absolute; inset: 0; border-radius: 50%;
  background: var(--rim-metal, conic-gradient(from 210deg, #8E4F5C, #C98E92 22%, #F4D9CE 40%, #C98E92 58%, #93545F 76%, #E6B3B6 100%));
  box-shadow: 0 2px 8px -2px rgb(0 0 0 / .8), 0 0 0 1px rgb(0 0 0 / .35); }
.emb-disc { position: absolute; inset: 3px; border-radius: 50%; display: grid; place-items: center;
  background: var(--disc-metal, radial-gradient(circle at 35% 25%, #f7d8d1, #c98e92 45%, #a5626f 100%));
  color: #fff8f4; box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -2px 4px rgb(0 0 0 / .25); }
.emb.hero .emb-disc { inset: 4px; }
.emb-disc svg { width: 16px; height: 16px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .35)); }
.emb.big .emb-disc svg { width: 22px; height: 22px; }
.emb.hero .emb-disc svg { width: 52px; height: 52px; }
.cp-emb.reached .emb-disc, .cp-emb.open .emb-disc:has(svg) { background: var(--disc-metal, radial-gradient(circle at 35% 25%, #f7d8d1, #c98e92 45%, #a5626f 100%)); color: #fff8f4; box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -2px 4px rgb(0 0 0 / .25); }   /* a revealed piece looks minted, not sketched; the '?' keeps the glass */
.emb.locked .emb-ring, .emb.next .emb-ring { background: var(--rim-dim, conic-gradient(from 210deg, #4d3038, #6d4650 30%, #4d3038 60%, #6d4650)); }
.emb.locked .emb-disc, .emb.next .emb-disc, .emb.open .emb-disc { background: var(--disc-glass, radial-gradient(circle at 35% 25%, #3a252b, #22151a 70%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .06); }
.emb.locked .emb-disc { color: #9a7a81; }
.emb.next .emb-disc { color: #e4b9b8; }
.emb.open .emb-ring { background: var(--rim-bright, conic-gradient(from 210deg, #C98E92, #F4D9CE 40%, #C98E92 60%, #E6B3B6)); }
.emb.open .emb-disc { color: #f3cfc9; }
.emb.next::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px dashed rgba(246,217,206,.7); animation: orbit 9s linear infinite; }
.plaque.rest .emb.next::before { animation-play-state: paused; }
@keyframes orbit { to { transform: rotate(360deg); } }
.emb.next::after, .emb.open::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 18px 4px rgb(var(--blush-rgb) / .55); opacity: .6; pointer-events: none; animation: none; }   /* static glow (also pins the pre-Écrin dev block's embglow off) */
.emb.awaiting::before, .emb.reached::before, .emb.open::before, .emb.locked::before { content: none; }                                                                                   /* the orbit belongs to .next only */
.emb.last .emb-ring { background: var(--rim-last, conic-gradient(from 0deg, #F4D9CE, #E6B3B6, #b76e79, #f7e1d3, #C98E92, #F4D9CE)); }
.emb.last.awaiting::after, .emb.last.reached::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 18px 4px rgb(var(--blush-rgb) / .75); opacity: .8; pointer-events: none; animation: none; }
/* the goal stays the brightest object on the plaque, even before it is reached */
.emb.last.locked .emb-ring, .emb.last.next .emb-ring { background: var(--rim-metal, conic-gradient(from 210deg, #8E4F5C, #C98E92 22%, #F4D9CE 40%, #C98E92 58%, #93545F 76%, #E6B3B6 100%)); }
/* the well the ring turns in — lifted so it reads as velvet, not a hole, before/without the canvas */
.emb.big .emb-disc, .emb.model .emb-disc { background: radial-gradient(circle at 50% 35%, #55323d, #2a181e 60%, #1a1014 100%); box-shadow: inset 0 1px 0 rgba(246,217,206,.14), inset 0 -2px 4px rgb(0 0 0 / .35); overflow: hidden; }
.emb-q { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1; text-shadow: 0 1px 0 rgba(246,217,206,.14); }
.emb.big .emb-q { font-size: 26px; }
.emb.hero .emb-q { font-size: 44px; }
.emb-mark { position: absolute; bottom: -7px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--grad-rose); box-shadow: 0 0 6px rgb(var(--blush-rgb) / .9); }
.emb-3d-host { width: 100%; height: 100%; display: grid; place-items: center; color: inherit; }
.emb-3d-host svg { width: 18px; height: 18px; }
.emb.big .emb-3d-host svg { width: 22px; height: 22px; }
.plaque.large .emb.big .emb-3d-host svg { width: 30px; height: 30px; }
.emb.model .emb-3d-host svg { width: 60px; height: 60px; }
.emb-3d-host canvas { width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity .4s; }
.emb-3d-host canvas.in { opacity: 1; }
.emb.lit { animation: emblit .7s cubic-bezier(.2,.8,.2,1) 1; }
@keyframes emblit { 45% { transform: scale(1.14); filter: brightness(1.25); } }

/* ── reduced motion (the ONE block for the whole path) ── */
@media (prefers-reduced-motion: reduce) {
  .track-fill, .track-fill::after, .track-head, .track-ghost, .emb::before, .emb::after, .emb.lit,
  .wax.stamp, .wax.breathe, .wax.press, .leaf, .cp-emb, .cp-emb::after, .env-flap, .env-seal, .letter-paper, .env-actions,
  .pstage.flash, .pstage.flash::after, .tonight-strip, .plaque.sheen-once .track-fill::after, .plaque.large.sheen-once .track-fill::after { animation: none !important; transition: none !important; }
  .plaque:active { transform: none; }
  .fade-up, .cp-num, .cp-title, .cp-sub, .cp-line, .cp-actions, .answer-card.fade-up { animation: pathfade .2s ease both !important; transform: none !important; }
  .cp-emb, .cp-emb::after, .wax.pre { opacity: 1 !important; transform: none !important; }
  .fall-n .roll { transition: none; }
}
@keyframes pathfade { from { opacity: 0; } to { opacity: 1; } }
/* ═ end progression ═ */

/* ═ tiers ═ */
/* Us · tier cards, the ledger, "How a day is kept", the ceremony, the falling
   week, the letter of grace, the day-365 envelope and the private design page.
   Uses .velvet / .hallmark / .wax / .engraved / .btn.velvet / .btn.ivory from
   style.css (the Écrin accent block) and never redefines them. Box-shadow is
   never animated here; glows are opacity on pseudo-elements. */

/* ── the tier cards (ivory · a card is a page, not a box) ── */
.pstage { position: relative; padding: 18px 18px 16px; transition: border-color .4s, box-shadow .4s; }
.pstage-head { display: flex; align-items: center; gap: 14px; }
.pstage-t { flex: 1; min-width: 0; }
.pstage-t .eyebrow { letter-spacing: .28em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstage-t .serif-it { font-size: 21px; margin-top: 2px; color: var(--ink); }
.pstage p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin-top: 12px; }
.pstage.next { border-color: rgb(var(--rosegold-rgb) / .45); box-shadow: var(--shadow-soft), 0 0 26px -4px rgb(var(--blush-rgb) / .55); }
.pstage.next, .pstage.locked { cursor: pointer; }
.pstage.locked .serif-it { color: var(--ink-soft); }
/* the flash when a medallion is tapped: a glow pseudo-element fades — box-shadow itself is never animated */
.pstage::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 30px -2px rgb(var(--blush-rgb) / .7), inset 0 0 0 1px rgb(var(--rosegold-rgb) / .7); opacity: 0; pointer-events: none; }
.pstage.flash::after { animation: cardflash .9s ease-out 1; }
@keyframes cardflash { from { opacity: 1; } to { opacity: 0; } }
.pstage .btn.velvet { width: 100%; }
.pstage .btn.quiet { width: 100%; }
.pstage .hallmark { flex: none; }
.pstage .btn.small { animation: none; }   /* the shop link is quiet, like every path button */
.pstage .emb-poster { width: 100%; height: 100%; display: grid; place-items: center; color: inherit; }
.pstage .emb-poster svg { width: 18px; height: 18px; }
/* hallmark buttons keep their stamp size; the hit area grows invisibly to ≥40px */
.hallmark { font-size: 10px; height: 24px; padding: 0 11px; }
button.hallmark { position: relative; }
button.hallmark::after { content: ""; position: absolute; inset: -9px -8px; }
@media (max-width: 399px) {
  .pstage-t .eyebrow { letter-spacing: .2em; white-space: normal; overflow: visible; text-overflow: clip; }   /* two short lines beat an ellipsis */
  .pstage-t .serif-it { font-size: 19px; }
  .pill { padding: 6px 9px; }
}

/* the honest ledger · what a piece is */
.ledger { margin-top: 12px; border-top: 1px solid var(--line); }
.ledger-row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ledger-row .k { font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); padding-top: 3px; }
.ledger-row .v { font-family: var(--serif); font-size: 15px; color: var(--ink); line-height: 1.35; }
.ledger-row .v.q { font-style: italic; color: var(--plum-0, #5a323c); }

/* status pills · ivory, never plum (plum is capped to the hallmark) */
.pill { font-family: var(--sans); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line-strong); background: var(--ivory-0); padding: 7px 11px; border-radius: 999px; white-space: nowrap; cursor: default; flex: none; }
.pill.next { color: var(--wine, #7C4A55); border-color: rgb(var(--rosegold-rgb) / .45); }

/* ── how a day is kept ── */
.rules { list-style: none; margin-top: 10px; padding: 0; }
.rules li { position: relative; padding: 8px 0 8px 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink); border-top: 1px solid rgba(183,110,121,.18); }
.rules li:first-child { border-top: 0; }
.rules li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: var(--rose-deep); }
.grace-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.grace-row .wax.s { flex: none; }
.grace-row .wax.s + .wax.s { margin-left: -2px; }
.grace-lbl { font-family: var(--sans); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.grace-btn { width: 100%; min-height: 44px; text-align: left; padding: 8px 0 2px; border-radius: 12px; cursor: pointer; }
.grace-btn .grace-go { margin-left: auto; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--wine, #7C4A55); white-space: nowrap; }
.wax.s { transition: background .4s, box-shadow .4s; }
/* small captions on the ivory sheets (fall · grace) — never below 10px */
.fall-cap { font-family: var(--sans); font-size: 10px; line-height: 1; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; }

/* ── the founder demo bar (dev only) ── */
.demo-bar { border: 1px dashed rgb(var(--rosegold-rgb) / .35); border-radius: 16px; padding: 12px 14px; }
.demo-bar .select-chip { font-size: 11px; padding: 7px 12px; }

/* ── the checkpoint ceremony · the écrin opens (velvet) ── */
.overlay .sheet.cp { padding-top: 34px; }
.cp-eb { font-family: var(--trajan); font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; }
.cp-emb { margin: 18px auto 0; opacity: 0; transform: translateY(-18px); animation: cpdesc .7s cubic-bezier(.2,.8,.2,1) .25s forwards; }
.cp-emb::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 46px 10px rgb(var(--blush-rgb) / .55); opacity: 0; animation: cpbloom .9s ease-out .6s forwards; }
@keyframes cpdesc { to { opacity: 1; transform: none; } }
@keyframes cpbloom { to { opacity: 1; } }
.cp-num { margin-top: 10px; font-size: 12px; opacity: 0; animation: fadeup .55s ease .65s both; }
.cp-title { font-size: 24px; letter-spacing: .16em; font-weight: 600; margin-top: 12px; opacity: 0; animation: fadeup .55s ease .7s both; }
/* the title is .metal.shimmer too: one rule that wins carries both motions (style.css's .metal.shimmer would otherwise replace the fade) */
.sheet.velvet .cp-title.metal.shimmer { animation: fadeup .55s ease .7s both, shimmer 7s ease-in-out infinite; }
.sheet.velvet.replay .cp-title.metal.shimmer { animation: shimmer 7s ease-in-out infinite; opacity: 1; }
.cp-sub { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--on-plum-soft, #d9b8b3); margin-top: 4px; opacity: 0; animation: fadeup .55s ease .85s both; }
.cp-line { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--on-plum, #f6e8e4); margin-top: 14px; opacity: 0; animation: fadeup .55s ease 1s both; }
.cp-actions { margin-top: 22px; opacity: 0; animation: fadeup .55s ease 1.2s both; }
.cp-actions .btn.ivory { display: flex; }
.sheet.replay .cp-emb, .sheet.replay .cp-emb::after, .sheet.replay [class*="cp-"] { animation: none; opacity: 1; transform: none; }
.sheet.cp .levelup-glow { background: radial-gradient(closest-side, rgba(246,175,166,.28), transparent); }
.velvet .eyebrow.metal, .sheet.velvet .eyebrow.metal { color: transparent; }

/* ── the falling week · ivory, no glow, no petals, no plum ── */
.sheet.fall { padding-top: 26px; }
.fall-tree { position: relative; display: flex; justify-content: center; margin-top: 10px; overflow: visible; }
.fall-tree .pet-img { position: static; transform: none; margin: 0 auto; animation: none; }
.fall-n { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 8px; }
.fall-line { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-top: 10px; }
.leaf { position: absolute; top: 20%; width: 12px; height: 9px; border-radius: 65% 35% 60% 40% / 55% 60% 40% 45%; background: linear-gradient(140deg, #e7c6bf, #c98e92); opacity: .9; pointer-events: none; animation: leaffall 1.8s ease-in forwards; }
@keyframes leaffall { 60% { opacity: .85; } to { transform: translate(var(--dx, 0px), 160px) rotate(140deg); opacity: 0; } }
.sheet.fall .grace-lbl { display: block; }

/* ── a letter of grace · paper, sealed with THEONE's wax ── */
.grace-title { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-top: 8px; }
.sheet textarea#grace-body { min-height: 120px; }
.wax.press { animation: waxpress .32s ease-in-out 1; }
@keyframes waxpress { 50% { transform: scale(1.12); } }

/* ── day 365 · the envelope (velvet) with the paper inside (ivory) ── */
.overlay .sheet.envelope { padding: 0 0 22px; text-align: center; }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(180deg, #6a3d49, var(--plum-1, #34202a)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .52s cubic-bezier(.2,.8,.2,1); z-index: 3; }
.env-flap::after { content: ""; position: absolute; inset: 0; background: var(--plum-hairline, linear-gradient(135deg, rgba(246,217,206,.6), rgba(183,110,121,.2))); opacity: .12; }
/* the fold: a rose hairline one pixel inside the flap's two edges */
.env-flap::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%, 50% calc(100% - 1.5px), calc(100% - 3px) 1px, 3px 1px, 50% calc(100% - 1.5px)); background: rgba(246,217,206,.32); pointer-events: none; }
.env-flap.open { transform: perspective(800px) rotateX(-180deg); }
.wax.env-seal { position: absolute; left: 50%; top: 92px; margin: 0 0 0 -31px; z-index: 4; transition: transform .26s, opacity .26s; cursor: pointer; }
.wax.env-seal.breathe { animation: sealbreathe 2.4s ease-in-out infinite; }
@keyframes sealbreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.wax.env-seal.cracked { transform: scale(.9) rotate(6deg); opacity: 0; pointer-events: none; animation: none; }
.env-eb { margin-top: 172px; font-family: var(--trajan); font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--on-plum-eb, #eccfc8); transition: margin-top .6s cubic-bezier(.2,.8,.2,1); }
.sheet.envelope.opened .env-eb { margin-top: 44px; }   /* the flap has folded away: the eyebrow and the paper rise into the room it left */
.env-hint { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--on-plum-soft, #d9b8b3); margin-top: 10px; }
.env-close { margin: 6px auto 0; display: block; }
.sheet.envelope.opened .env-hint, .sheet.envelope.opened .env-close { display: none; }
.letter-paper { margin: 12px 16px 0; background: linear-gradient(180deg, #FEFCFB, #FAF1ED); border: 1px solid rgba(203,143,152,.35); border-radius: 16px; padding: 22px 20px; text-align: left; color: var(--ink); transform: translateY(24px); opacity: 0; max-height: 1400px; overflow: hidden; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s, max-height .9s cubic-bezier(.2,.8,.2,1), padding .6s, margin .6s; }   /* larger than the paper can be: the sheet scrolls, the letter is never cut */
.letter-paper:not(.up) { max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; border-width: 0; }   /* the envelope is only as tall as the envelope until the seal breaks */
.letter-paper.up { transform: none; opacity: 1; }
.letter-text { font-family: var(--serif); font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.letter-sign { font-family: var(--trajan); font-size: 11px; letter-spacing: .32em; margin-top: 16px; }
.env-actions { padding: 18px 24px 0; opacity: 0; transition: opacity .3s; pointer-events: none; }
.env-actions:not(.in) { height: 0; padding: 0; overflow: hidden; }
.env-actions.in { opacity: 1; pointer-events: auto; }
.env-actions .btn.ivory { display: flex; }
.env-actions .cp-eb { margin-bottom: 10px; color: var(--on-plum-soft, #d9b8b3); }

/* ── the private design page (velvet · presented, never priced) ── */
.overlay .sheet.design { padding: 28px 22px 22px; }
.design-hero { display: flex; justify-content: center; margin-top: 16px; }
.design-title { font-size: 22px; letter-spacing: .16em; font-weight: 600; margin-top: 14px; }
.design-row { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 10px 0; border-top: 1px solid var(--plum-line, rgba(246,217,206,.16)); }
.design-row .eyebrow { font-size: 10px; letter-spacing: .3em; color: var(--on-plum-eb, #eccfc8); }
.design-row .serif-it { font-size: 16px; color: var(--on-plum, #f6e8e4); }
.select-chip.plum { background: rgba(255,255,255,.04); border: 1px solid var(--plum-line, rgba(246,217,206,.16)); color: var(--on-plum-soft, #d9b8b3); box-shadow: none; min-height: 40px; padding-top: 10px; padding-bottom: 10px; }
.select-chip.plum.on { border-color: rgba(246,217,206,.7); color: var(--on-plum, #f6e8e4); background: rgba(255,255,255,.08); box-shadow: none; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 14px; }   /* 2×2 at every width: CONSULTATION never breaks */
.steps span { display: flex; align-items: flex-start; justify-content: center; min-height: 2.6em; font-family: var(--sans); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-plum-soft, #d9b8b3); text-align: center; padding-top: 8px; border-top: 1px solid rgba(246,217,206,.35); line-height: 1.3; overflow-wrap: normal; hyphens: none; }
.steps span.on { color: var(--on-plum, #f6e8e4); border-top-color: #f3cfc9; }
.steps span i { font-style: normal; font-family: var(--trajan); font-size: 10px; opacity: .75; margin-right: 6px; }   /* 1–4: the order reads across, not down */
.design-note { font-size: 12px; line-height: 1.6; color: var(--on-plum-soft, #d9b8b3); margin-top: 12px; text-align: left; }
.sheet.design .hallmark { margin-left: auto; margin-right: auto; white-space: normal; height: auto; min-height: 22px; padding: 4px 9px; line-height: 1.5; max-width: 100%; }
.sheet.design .btn:disabled { opacity: .55; }
.sheet.design .btn.ivory { display: flex; }

/* one bright sheen on the large plaque when Home hands over to Us */
.plaque.large.sheen-once .track-fill::after { animation: sheen 1.2s ease-in-out 1; }
/* ═ end tiers ═ */

/* ═ tonight ═ */
/* Tonight — the nightly ritual. Writing is paper (ivory); only the reveal is velvet.
   Uses .wax / .wax.empty / .wax.half / .velvet / .metal from style.css and never redefines them. */

/* the Home strip · whole card tappable · a wax seal on the right */
.tonight-strip { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; min-height: 72px; cursor: pointer; transition: border-color .4s, box-shadow .4s; }
.tonight-strip:active { transform: none; filter: brightness(.995); }
.tonight-strip:focus-visible { outline: none; border-color: rgb(var(--rosegold-rgb) / .55); box-shadow: var(--shadow-soft), 0 0 0 3px rgb(var(--blush-rgb) / .45); }
.tonight-l { min-width: 0; }
.tonight-strip .serif-it { font-size: 16px; line-height: 1.35; margin-top: 6px; color: var(--ink); overflow-wrap: anywhere; }
.tonight-strip.late { border-color: rgb(var(--rosegold-rgb) / .55); }
.tonight-strip.kept .serif-it, .tonight-strip.waiting .serif-it { color: var(--ink-soft); }
.tonight-strip.invite .serif-it { color: var(--ink-soft); }
.tonight-seal { display: grid; justify-items: center; gap: 6px; min-width: 56px; max-width: 96px; }
.tonight-seal .wax { width: 40px; height: 40px; margin: 0; font-size: 11px; letter-spacing: .04em; }
.tonight-seal .wax b, .tonight-reveal-seal b { font-family: var(--trajan); font-size: 11px; font-weight: 600; letter-spacing: .04em; line-height: 1; background: none; -webkit-text-fill-color: #f3d5cf; color: #f3d5cf; filter: none; text-shadow: none; }
.tonight-seal small { font-family: var(--sans); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); white-space: normal; text-align: center; line-height: 1.3; }
.tonight-strip.kept .tonight-seal small, .tonight-strip.theirs-in .tonight-seal small { color: var(--wine, #7C4A55); }
/* cloud mode before the path RPCs exist: quiet, not tappable, no wax */
.tonight-strip.soon { cursor: default; }
.tonight-strip.soon .serif-it { color: var(--ink-soft); }
.tonight-strip.soon .wax { opacity: .45; }
.tonight-strip.late .tonight-seal small { color: var(--wine, #7C4A55); }

/* the seal's three motions · stamp once, breathe while waiting */
.wax.stamp { animation: waxstamp .38s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes waxstamp { from { transform: scale(1.6) rotate(-8deg); opacity: 0; } }
.wax.breathe { animation: sealpulse 2.4s ease-in-out infinite; }
.tonight-strip.rest .wax.breathe { animation-play-state: paused; }
/* the half seal: the same shaded wax, masked to its left half, with the rim drawn underneath (style.css's flat split is overridden here) */
.wax.half { position: relative; background: transparent; box-shadow: none; color: transparent; }
.wax.half::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(183,110,121,.5); }
.wax.half::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--wax); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.45); -webkit-mask: linear-gradient(90deg, #000 50%, transparent 50%); mask: linear-gradient(90deg, #000 50%, transparent 50%); }
@keyframes sealpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.wax.pre { opacity: 0; }

/* the sheet · write */
.tonight-sheet { text-align: center; }
.tonight-q { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.4; margin-top: 12px; color: var(--ink); text-wrap: balance; }
.tonight-sheet textarea#tonight-line { font-size: 18px; text-align: left; }
.tonight-count { font-family: var(--sans); font-size: 10px; letter-spacing: .14em; color: var(--ink-soft); text-align: right; margin-top: 4px; font-variant-numeric: tabular-nums; }
.tonight-photo-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.photo-cap { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; }
/* attached: quiet paper around the thumb, never a second rose pill above 'Seal my line' */
.photo-cap.on { position: relative; padding: 4px 44px 4px 4px; background: var(--ivory-0); color: var(--ink-soft); border: 1px solid var(--line-strong); box-shadow: none; }
.photo-cap.on > span { font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.photo-cap img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--blush-1); }
.photo-cap.on img { box-shadow: 0 0 0 1px var(--line-strong); }
.tonight-photo-x { position: absolute; right: 8px; top: 50%; margin-top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink-soft); font-family: var(--sans); font-size: 16px; line-height: 1; display: grid; place-items: center; background: var(--ivory-0); padding: 0; cursor: pointer; }
.tonight-photo-x::after { content: ""; position: absolute; inset: -8px; }
.tonight-foot { font-family: var(--sans); font-size: 11px; line-height: 1.6; letter-spacing: .02em; color: var(--ink-soft); margin-top: 10px; }

/* the sheet · waiting (ivory) */
.tonight-wait-seal { width: 44px; height: 44px; margin: 16px auto 0; }
.tonight-wait { font-size: 17px; line-height: 1.5; margin-top: 14px; color: var(--ink); }

/* the sheet · reveal (velvet — the only plum Tonight state) */
.tonight-reveal .eyebrow.metal { font-family: var(--trajan); font-size: 9.5px; letter-spacing: .34em; }
.answer-card { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; }
.answer-card .answer-body { flex: 1; min-width: 0; }
.answer-card .eyebrow { font-size: 10px; letter-spacing: .24em; }
.answer-card p { font-family: var(--serif); font-style: italic; font-size: 16.5px; line-height: 1.5; margin-top: 4px; color: var(--ink); overflow-wrap: anywhere; }
.answer-card img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; background: var(--ivory-1, #f6ece7); }
.answer-card img[data-photo]:not([src]) { opacity: .5; }
.tonight-reveal-seal { width: 40px; height: 40px; margin: 18px auto 0; }
.tonight-reveal-seal b { font-family: var(--trajan); font-size: 11px; font-weight: 600; letter-spacing: .04em; line-height: 1; }
.tonight-grew { font-size: 17px; margin-top: 12px; color: var(--on-plum, #f6e8e4); }
.tonight-reveal .btn.quiet { color: var(--on-plum-soft, #d9b8b3); }
.tonight-reveal .btn.ivory { display: flex; }
/* ═ end tonight ═ */