:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Text remains readable on first paint; .is-shown
   on the parent flips them to their resting state. The second
   line's transition-delay holds it back by --stagger-stagger
   so the eye lands on the headline first. */
.t-stagger-line {
  display: block;
  opacity: 1;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Exit decouples from the stagger: same fade for every line,
   no Y return, no blur — so the disappearance reads as a
   single quiet fade instead of a reverse reveal. */
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}

/* Reveal enhancement is attached only when JavaScript is running. */
.motion-ready { --stagger-blur:0px; }
.motion-ready .t-stagger.is-shown .t-stagger-line{will-change:auto}
.social-links{display:flex;flex-wrap:wrap;gap:20px;padding:24px var(--gutter);font-size:13px}.social-links button{text-decoration:underline}
.measurement-panel{position:fixed;bottom:20px;right:20px;z-index:80;background:#f0efe5;color:#283226;max-width:min(440px,calc(100% - 40px));padding:24px;box-shadow:0 10px 40px #0003}.measurement-panel p{font-size:14px;line-height:1.6}.measurement-panel button{min-height:44px;margin:12px 15px 0 0;text-decoration:underline}
.process-story{padding:90px var(--gutter);background:#dbe0cf;color:#293226}.process-story>header{max-width:760px;margin-bottom:70px}.process-story h2{font:clamp(40px,6vw,88px)/1.02 Georgia,serif;letter-spacing:-.04em;margin:24px 0}.process-story>header p{font-size:17px;line-height:1.7}.process-layout{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:start}.process-visual{position:sticky;top:120px;aspect-ratio:1;background:#aeb9a0;overflow:hidden;display:grid;place-items:center}.process-visual .process-ring{width:65%;aspect-ratio:1;border:40px solid #dbe0cf;border-radius:50%;transition:transform .7s,border-radius .7s}.process-visual .process-square{position:absolute;width:27%;aspect-ratio:1;background:#35492c;transition:transform .7s}.process-visual[data-stage="1"] .process-ring{border-radius:5%;transform:rotate(-12deg)}.process-visual[data-stage="1"] .process-square{transform:translate(50%,30%) rotate(12deg)}.process-visual[data-stage="2"] .process-ring{transform:scale(.85)}.process-visual[data-stage="2"] .process-square{transform:translateY(-50%) rotate(45deg)}.process-visual p{position:absolute;bottom:25px;left:25px;font-size:14px}.process-step{min-height:340px;padding:30px 0;display:flex;flex-direction:column;justify-content:center}.process-step>span{font-size:13px}.process-step h3{font:clamp(30px,4vw,50px)/1.1 Georgia,serif;margin:20px 0}.process-step p{font-size:17px;line-height:1.7;max-width:430px}.scroll-progress{position:fixed;inset:0 auto auto 0;height:3px;background:var(--accent);width:100%;transform-origin:left;z-index:100;pointer-events:none;display:none}
@supports(animation-timeline:scroll()){ @media(prefers-reduced-motion:no-preference){.scroll-progress{display:block;animation:reading-progress linear;animation-timeline:scroll()}@keyframes reading-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}}}
@media(max-width:650px){.process-story{padding:55px var(--gutter)}.process-story>header{margin-bottom:35px}.process-layout{grid-template-columns:1fr;gap:20px}.process-visual{position:relative;top:auto;aspect-ratio:4/3}.process-visual .process-ring{width:50%;border-width:25px}.process-step{min-height:0;padding:28px 0}.process-step p{font-size:16px}.process-visual p{bottom:15px;left:15px}.process-story h2{font-size:42px}}
@media(prefers-reduced-motion:reduce){.t-stagger-line{opacity:1;transform:none;filter:none}.process-visual *{transition:none!important}.scroll-progress{display:none}}

@media(max-width:650px){.process-step::before{content:'';display:block;width:65px;height:65px;border:13px solid #75866a;margin-bottom:20px}.process-step[data-stage="0"]::before{border-radius:50%}.process-step[data-stage="1"]::before{transform:rotate(-12deg)}.process-step[data-stage="2"]::before{transform:rotate(45deg);border-width:20px}.process-visual{position:relative;top:auto}.process-step{min-height:0}}

/* Frontend refinement 2026-11-03: chapter specimens show three different outcomes (original, labelled samples). */
.process-visual .process-ring,.process-visual .process-square{opacity:.45}
.process-visual .specimen{position:absolute;inset:auto;width:min(74%,340px);padding:18px 20px 20px;background:#f7f8fb;color:#1b202b;box-shadow:0 22px 44px rgba(41,50,38,.2);font-size:14px;line-height:1.4;opacity:0;transform:translateY(18px);transition:opacity .45s,transform .45s;pointer-events:none}
.process-visual[data-stage="0"] .specimen[data-for="0"],.process-visual[data-stage="1"] .specimen[data-for="1"],.process-visual[data-stage="2"] .specimen[data-for="2"]{opacity:1;transform:none}
.specimen b{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;margin-bottom:14px}
.specimen b i{font-style:normal;font-weight:400;font-size:13px;color:#4b5568}
.specimen .hint{display:block;font-size:13px;color:#4b5568;margin:0 0 10px}
.specimen ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.specimen li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #c6ccd8}
.specimen li::before{content:'';width:14px;height:14px;border:2px solid #75866a;border-radius:50%;flex:none}
.specimen li.done::before{background:#35492c;border-color:#35492c}
.specimen .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.specimen .chips span{padding:8px 14px;border:1px solid #c6ccd8;font-size:13px}
.specimen .chips span.on{background:#1b202b;color:#f7f8fb;border-color:#1b202b}
.specimen .swatch{height:62px;background:#aeb9a0}
.specimen .slot{padding:10px 12px;border:1px solid #c6ccd8;margin-bottom:14px}
.specimen .send{display:inline-block;background:#2859df;color:#fff;padding:12px 18px;font-weight:500}
@media(max-width:650px){.process-visual .specimen{width:78%;padding:14px 16px 16px}.specimen li{padding:8px 10px}}

/* Phones: each chapter carries its own specimen, so the sticky visual and the old step shapes step aside. */
.process-step .specimen.inline{display:none}
@media(max-width:900px){
.process-layout{grid-template-columns:1fr;gap:20px}
.process-visual{display:none}
.process-step{min-height:0;padding:28px 0;max-width:560px}
.process-step::before{display:none}
.process-step .specimen.inline{display:block;position:static;width:100%;max-width:340px;opacity:1;transform:none;margin:0 0 20px;box-shadow:0 16px 32px rgba(41,50,38,.16)}
}
.specimen{background:#f7f8fb;color:#1b202b;padding:18px 20px 20px;font-size:14px;line-height:1.4}

.measurement-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;padding:16px}.measurement-panel p{grid-column:1/-1;margin:0}.measurement-panel a{grid-column:1/-1;font-size:14px}.measurement-panel button{min-height:44px;border-radius:999px;border:1px solid #283226;background:transparent;color:#283226;font-size:15px;text-decoration:none;cursor:pointer;margin:0}.measurement-panel button:first-of-type{background:#283226;color:#f0efe5}.measurement-panel button:disabled{opacity:.5}
main:focus{outline:none}.footer-nav a,.social-links a,.social-links button{display:inline-block;padding:12px 8px;min-height:44px}.account-note{margin:0 0 12px}