/* ============================================================================
   NEST — promises.css · Our promises (2026-11-05). Depends on nest.css.
   ========================================================================= */

/* ---------- the ledger: five names, one open ---------- */
.ledger{margin-top:clamp(2rem,4.5vw,3rem);display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:56rem){.ledger{grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr)}}
.ledger__names{display:flex;flex-direction:column;background:var(--simply);padding:.6rem 0}
@media (max-width:55.99rem){.ledger__names{flex-direction:row;flex-wrap:wrap;gap:.3rem;padding:.6rem}}
.ledger__name{position:relative;display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  font:inherit;font-family:var(--serif);font-size:clamp(1.12rem,1.8vw,1.45rem);line-height:1.25;color:var(--ink-soft);padding:.85rem 1.4rem;
  transition:color .2s var(--ease),background .2s var(--ease)}
@media (max-width:55.99rem){.ledger__name{width:auto;padding:.55rem .9rem;font-size:1rem;border:1px solid var(--rule);border-radius:999px}}
.ledger__name:hover{color:var(--hunter)}
.ledger__name.is-on{color:var(--hunter);background:var(--paper)}
@media (max-width:55.99rem){.ledger__name.is-on{background:var(--hunter);color:var(--simply);border-color:var(--hunter)}}
.ledger__name:focus-visible{outline:2px solid var(--louisburg);outline-offset:-2px}
.ledger__n{font-family:var(--sans);font-size:.7rem;letter-spacing:.08em;color:var(--louisburg-ink);min-width:1.1rem}
.ledger__name.is-on .ledger__n{color:var(--hunter)}
@media (max-width:55.99rem){.ledger__n{display:none}}
/* the clock: a hairline under the open name that fills while the ledger turns on its own */
.ledger__clock{position:absolute;left:1.4rem;right:1.4rem;bottom:.35rem;height:1px;background:var(--rule);overflow:hidden}
.ledger__clock::after{content:"";position:absolute;inset:0;background:var(--hunter);transform-origin:left;animation:ledger-clock 6.5s linear forwards}
@keyframes ledger-clock{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:55.99rem){.ledger__clock{display:none}}
.ledger__panel{background:var(--paper);padding:clamp(1.6rem,3.2vw,2.6rem);display:flex;flex-direction:column;min-height:19rem;position:relative}
.ledger__in{animation:ledger-in .5s var(--ease) both;flex:1}
@keyframes ledger-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ledger__in{animation:none}.ledger__clock{display:none}}
.ledger__leaf{width:2.1rem;height:2.1rem;fill:none;stroke:var(--louisburg);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin:0 0 .9rem}
.ledger__say{margin:0 0 1rem;font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.35;color:var(--hunter);max-width:32rem}
.ledger__p{margin:0 0 .8rem;font-size:.96em;line-height:1.65;color:var(--ink-soft);max-width:36rem}
.ledger__cite{margin-top:.4rem}
.ledger__arrows{display:flex;align-items:center;gap:1rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--rule)}
.ledger__arrow{font:inherit;font-family:var(--sans);font-size:1rem;border:1px solid var(--rule);background:none;color:var(--hunter);width:2.2rem;height:2.2rem;border-radius:50%;cursor:pointer}
.ledger__arrow:hover{background:var(--hunter);color:var(--simply);border-color:var(--hunter)}
.ledger__count{font-family:var(--sans);font-size:.76rem;letter-spacing:.08em;color:var(--louisburg-ink)}

/* ---------- the eight: a grid, one open at a time ---------- */
.eightgrid{list-style:none;margin:clamp(2rem,4.5vw,3rem) 0 0;padding:0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:40rem){.eightgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.eightgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.eg{background:var(--simply);display:flex;flex-direction:column;transition:background .25s var(--ease)}
.eg.is-open{background:var(--paper)}
@media (min-width:64rem){.eg.is-open{grid-column:span 2}}
@media (min-width:40rem) and (max-width:63.99rem){.eg.is-open{grid-column:span 2}}
.eg__btn{display:grid;gap:.35rem;text-align:left;width:100%;border:0;background:none;cursor:pointer;font:inherit;padding:1.35rem 1.3rem 1.1rem;color:inherit}
.eg__btn:focus-visible{outline:2px solid var(--louisburg);outline-offset:-2px}
.eg__num{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;color:var(--louisburg-ink)}
.eg__h{font-family:var(--serif);font-size:1.08rem;line-height:1.3;color:var(--hunter)}
.eg__p{font-size:.9em;line-height:1.55;color:var(--ink-soft)}
.eg__more{margin-top:.5rem;font-family:var(--sans);font-size:.74rem;letter-spacing:.06em;color:var(--hunter);display:inline-flex;align-items:center;gap:.4rem}
.eg__more::after{content:"";width:.4rem;height:.4rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s}
.eg.is-open .eg__more::after{transform:rotate(-135deg) translate(-2px,-2px)}
.eg:hover .eg__h{color:var(--hunter-soft)}
.eg__body{padding:0 1.3rem 1.3rem;animation:ledger-in .4s var(--ease) both}
.eg__body p{margin:0;font-size:.93em;line-height:1.65;color:var(--ink);max-width:none}
.eg__body cite{margin-top:.6rem}

/* ---------- the stepper: four stages on one line ---------- */
.stepper{margin-top:clamp(2rem,4.5vw,3rem)}
.stepper__track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.stepper__track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:.55rem;height:1px;background:var(--rule-rev)}
.stepper__step button{position:relative;display:flex;flex-direction:column;align-items:center;gap:.6rem;width:100%;border:0;background:none;cursor:pointer;font:inherit;color:var(--manchester);padding:0 .25rem}
.stepper__step button:focus-visible{outline:2px solid var(--manchester);outline-offset:4px;border-radius:4px}
.stepper__dot{width:1.1rem;height:1.1rem;border-radius:50%;border:1px solid var(--manchester);background:var(--hunter);transition:background .25s var(--ease),transform .25s var(--ease)}
.stepper__step.is-past .stepper__dot{background:var(--louisburg)}
.stepper__step.is-on .stepper__dot{background:var(--manchester);transform:scale(1.25)}
.stepper__name{font-family:var(--serif);font-size:clamp(1rem,1.8vw,1.3rem);color:var(--manchester);transition:color .2s}
.stepper__step.is-on .stepper__name{color:var(--simply)}
.stepper__step button:hover .stepper__name{color:var(--simply)}
.stepper__panel{margin-top:clamp(1.6rem,3.5vw,2.5rem);padding:clamp(1.5rem,3vw,2.2rem);background:rgba(247,245,238,.06);border:1px solid var(--rule-rev);border-radius:4px;max-width:46rem}
.stepper__line{margin:0 0 .8rem;font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.3;color:var(--simply);animation:ledger-in .45s var(--ease) both}
.stepper__body{margin:0;font-size:.98em;line-height:1.7;color:rgba(247,245,238,.86);max-width:none;animation:ledger-in .55s var(--ease) both}
.stepper__nav{display:flex;justify-content:space-between;gap:1rem;margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--rule-rev)}
.stepper__go{font:inherit;font-family:var(--sans);font-size:.82rem;letter-spacing:.04em;border:0;background:none;color:var(--manchester);cursor:pointer;padding:0;text-decoration:none}
.stepper__go:hover{color:var(--simply);text-decoration:underline;text-underline-offset:.2em}
@media (prefers-reduced-motion:reduce){.stepper__line,.stepper__body,.eg__body{animation:none}}