/* /tour — the Tower's register: night, aurora (rose + amber in deep blue), serif voice,
   one real artifact (two weeks of one promise) sitting in it. */
:root {
  --night: #0a1024; --night-2: #121a3a;
  --rose: #f472b6; --amber: #fbbf24; --teal: #2dd4bf; --violet: #8b5cf6;
  --hold: #34d399; --slip: #60a5fa;
  --ink: #f8fafc; --ink-2: #cbd5e1; --ink-3: #94a3b8;
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino", Georgia, serif;
}
body.tour { display: block; padding: 0; min-height: 0; background: var(--night); color: var(--ink); }

.night { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 70% 0%, var(--night-2), var(--night) 60%); }

/* aurora: four blurred light-curtains drifting slowly */
.aurora { position: absolute; inset: -20% -10% auto -10%; height: 90%; z-index: -2; filter: blur(60px); opacity: .85; }
.aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.a1 { width: 55%; height: 60%; left: 40%; top: 5%;  background: radial-gradient(closest-side, rgba(244,114,182,.55), transparent); animation: drift1 26s ease-in-out infinite alternate; }
.a2 { width: 50%; height: 55%; left: 60%; top: 20%; background: radial-gradient(closest-side, rgba(251,191,36,.40), transparent); animation: drift2 32s ease-in-out infinite alternate; }
.a3 { width: 70%; height: 45%; left: 15%; top: 0%;  background: radial-gradient(closest-side, rgba(139,92,246,.45), transparent); animation: drift3 38s ease-in-out infinite alternate; }
.a4 { width: 45%; height: 40%; left: 70%; top: 45%; background: radial-gradient(closest-side, rgba(45,212,191,.22), transparent); animation: drift1 44s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(-8%, 6%) scale(1.15) rotate(8deg); } }
@keyframes drift2 { to { transform: translate(-14%, -4%) scale(.9) rotate(-10deg); } }
@keyframes drift3 { to { transform: translate(10%, 8%) scale(1.1); } }
.grain { position: absolute; inset: 0; z-index: -1; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }

/* nav */
.bar { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1.25rem; display: flex; align-items: center; gap: 2rem; }
.bar a { color: var(--ink-2); text-decoration: none; font-size: .9375rem; }
.bar a:hover { color: var(--ink); }
.mark { font-family: var(--serif); font-size: 1.375rem !important; color: var(--ink) !important; letter-spacing: -.01em; }
.navlinks { display: flex; gap: 1.5rem; }
.navright { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.pill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: .45rem .9rem; border-radius: 999px; color: var(--ink) !important; }
.pill:hover { background: rgba(255,255,255,.18); }
@media (max-width: 760px) { .navlinks { display: none; } }

/* hero */
.hero { max-width: 72rem; margin: 0 auto; padding: clamp(2.5rem, 8vh, 6rem) 1.25rem 5rem;
  display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 960px) { .hero { grid-template-columns: 1.35fr 1fr; } }
.kicker { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin: 0 0 1.25rem; }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.75rem, 5.6vw, 4.75rem); line-height: 1.02; letter-spacing: -.02em; margin: 0; color: var(--ink); text-wrap: balance; }
.hero h1 em { font-style: italic; color: #fde68a; }
.sub { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 32rem; margin: 1.5rem 0 0; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 2.25rem 0 0; }
.btn { background: var(--ink); color: var(--night); text-decoration: none; font-weight: 600; padding: .85rem 1.4rem; border-radius: .75rem; }
.btn:hover { background: #fff; box-shadow: 0 0 40px rgba(251,191,36,.35); }
.ghost { color: var(--ink); text-decoration: none; font-weight: 500; }
.ghost:hover { color: #fde68a; }
.fine { font-size: .8125rem; color: var(--ink-3); margin: 1rem 0 0; }

/* the artifact: two weeks of one promise, as glass */
.cards { position: relative; height: 25.5rem; max-width: 30rem; width: 100%; justify-self: center; }
.card { position: absolute; margin: 0; width: 88%; padding: 1.25rem 1.25rem 1.1rem; border-radius: 1.25rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.card.back { top: 0; left: 0; transform: rotate(-3deg); opacity: .78; }
.card.front { bottom: 0; right: 0; transform: rotate(1.5deg); background: rgba(255,255,255,.1); }
.c-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.c-name { font-weight: 600; font-size: 1.0625rem; color: var(--ink); }
.c-score { font-weight: 700; font-size: .9375rem; padding: .2rem .65rem; border-radius: 999px; color: #0a1024; }
.c-score.held { background: rgb(150, 246, 198); box-shadow: 0 0 24px rgba(52,211,153,.45); }
.c-score.broke { background: #93b4f0; }
.c-meta { font-size: .8125rem; color: var(--ink-3); margin-top: .15rem; }
.cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 1rem 0; }
.cells i { aspect-ratio: 1; border-radius: 7px; background: var(--hold); }
.cells i.s { background: var(--slip); }
.card blockquote { margin: 0; border: 0; padding: 0; font-family: var(--serif); font-size: 1.125rem; line-height: 1.4; color: var(--ink); }
.next { min-height: 40vh; background: var(--night); }
/* graduation notes as the artifact */
.cards.grads { height: auto; display: grid; gap: 1rem; }
.cards.grads .card { position: relative; width: 100%; inset: auto; }
.card.g1 { transform: rotate(-1.5deg); }
.card.g2 { transform: translateX(6%) rotate(1deg); }
.card.g3 { transform: rotate(-.5deg); }
.cards.grads .c-meta { color: var(--hold); font-size: .8125rem; letter-spacing: .01em; margin: 0 0 .5rem; }
.cards.grads .c-meta::before { content: "✓ "; }
.cards.grads blockquote { font-size: 1.375rem; }
.whose { font-size: .8125rem; color: var(--ink-3); margin: .5rem 0 0; text-align: right; }
/* what you get — directly under the hero */
.gains { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem 6rem; display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .gains { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.gain { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.5rem; }
.gain h3 { font-family: var(--serif); font-weight: 500; font-size: 1.75rem; line-height: 1.15; margin: 0 0 .75rem; color: var(--ink); }
.gain p { font-size: 1rem; line-height: 1.6; color: var(--ink-2); margin: 0; }
.gain .proof { margin-top: 1rem; font-size: .875rem; color: var(--ink-3); }
.gain .proof b { color: #fde68a; font-weight: 600; font-size: 1rem; }
.night { min-height: 0; }
.hero { padding-bottom: 4rem; }
/* v7: the hero is one glance; the why is the scroll */
.night { min-height: 100svh; display: flex; flex-direction: column; }
.night .hero { flex: 1; }
.cards.solo { position: relative; height: auto; max-width: 28rem; }
.ghostcard { position: absolute; inset: 0; border-radius: 1.25rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.gc1 { transform: translate(14px, 14px) rotate(2deg); }
.gc2 { transform: translate(28px, 28px) rotate(4deg); opacity: .6; }
.card.one { position: relative; width: 100%; inset: auto; transform: rotate(-1.5deg); padding: 1.75rem; }
.card.one .c-meta { color: var(--hold); font-size: .8125rem; margin: 0 0 .75rem; }
.card.one .c-meta::before { content: "✓ "; }
.card.one blockquote { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25; }
.card.one figcaption { margin-top: 1rem; font-size: .8125rem; color: var(--ink-3); }
.cue { align-self: center; margin: 0 0 2rem; color: var(--ink-2); text-decoration: none; font-size: .9375rem;
  display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.cue span { font-size: 1.25rem; animation: bob 2.2s ease-in-out infinite; }
.cue:hover { color: var(--ink); }
@keyframes bob { 50% { transform: translateY(6px); } }
.why { background: var(--night); padding: 7rem 0 8rem; }
.why .gains { padding-bottom: 0; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
.gains .gain:nth-child(2) { transition-delay: .15s; } .gains .gain:nth-child(3) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .cue span { animation: none; } }
.night > .bar, .night > .hero { width: 100%; box-sizing: border-box; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
/* v12: drift */
.drift { width: 100%; max-width: 28rem; justify-self: center; display: grid; gap: 1.75rem; }
.dcard { position: relative; width: 100%; inset: auto; padding: 1.5rem; transform: rotate(-1deg); }
.dcard .c-meta { color: var(--ink-3); margin-bottom: 1rem; }
.weeks { display: grid; gap: 7px; }
.wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.wk i { aspect-ratio: 1; border-radius: 7px; background: var(--hold); }
.wk i.o { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); }
.w1 { opacity: .9 } .w2 { opacity: .75 } .w3 { opacity: .55 } .w4 { opacity: .35 }
.wk { animation: fadein .6s ease both; } .w1 { animation-delay: .2s } .w2 { animation-delay: .5s } .w3 { animation-delay: .8s } .w4 { animation-delay: 1.1s }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }
.dcard figcaption { margin-top: 1.1rem; font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }
.pq { margin: 0; padding: 0 0 0 1rem; border-left: 3px solid #fde68a; font-family: var(--serif); font-size: 1.375rem; line-height: 1.35; color: var(--ink); }
.pq cite { display: block; margin-top: .6rem; font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-size: .8125rem; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .wk { animation: none; } }
/* v13: the drift, then what's causing it */
.drift { position: relative; }
.dcard { padding: 1.25rem; }
.dcard figcaption { font-size: 1.0625rem; }
.notice { position: relative; width: 92%; inset: auto; justify-self: end; margin-top: -2.75rem; transform: rotate(1.5deg);
  background: rgba(20, 27, 58, .82); padding: 1.25rem 1.35rem; }
.n-label { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fde68a; }
.n-title { font-weight: 600; font-size: 1.0625rem; color: var(--ink); margin-top: .35rem; }
.n-title span { color: var(--rose); }
.n-rows { display: grid; gap: .55rem; margin: .9rem 0; }
.n-rows > div { display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: .75rem; font-size: .8125rem; color: var(--ink-2); }
.n-rows .bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; display: block; }
.n-rows .bar i { display: block; height: 100%; background: var(--slip); border-radius: 4px; }
.n-rows em { font-style: normal; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.n-try { margin: 0; font-size: .875rem; color: var(--ink-2); background: rgba(255,255,255,.06); border-radius: .6rem; padding: .6rem .75rem; }
.n-try b { color: var(--ink); }
.notice figcaption { margin-top: .75rem; font-size: .75rem; color: var(--ink-3); }
.n-rows .bar { width: 100%; height: 8px; aspect-ratio: auto; }
.n-rows .bar i { aspect-ratio: auto; height: 8px; border-radius: 4px; }
.n-rows .nbar { display: block; align-self: center; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.n-rows .nbar .fill { display: block; height: 8px; background: var(--slip); border-radius: 4px; }
/* v16: drift vs caught */
.drift { max-width: 34rem; }
.dcard.vs { padding: 1.25rem; transform: rotate(-.75deg); }
.vs .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.vs .c-meta { margin-bottom: .75rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.vs .c-meta.lit { color: #fde68a; }
.vs .weeks { gap: 5px; }
.vs .wk { grid-template-columns: repeat(7, 1fr) 2.1rem; gap: 4px; align-items: center; }
.vs .wk.drifting { grid-template-columns: repeat(7, 1fr) 2.1rem; }
.vs .wk i { border-radius: 4px; }
.vs .wk i.m { background: transparent; box-shadow: inset 0 0 0 2px var(--slip); }
.vs .wk.caught { opacity: 1 !important; }
.wtag { font-size: .6875rem; font-weight: 700; text-align: center; border-radius: 999px; padding: .1rem 0; color: #0a1024; }
.wtag.t100 { background: rgb(150, 246, 198); } .wtag.t86 { background: #86e3cf; } .wtag.t71 { background: #7fdcd8; }
.vs .cap { margin: .9rem 0 0; font-family: var(--serif); font-size: .9375rem; line-height: 1.35; color: var(--ink-2); }
.notice { margin-top: -1.5rem; }
/* v17: the cause, below the fold */
.cause { max-width: 72rem; margin: 0 auto 7rem; padding: 0 1.25rem; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .cause { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.cause h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; margin: 0; color: var(--ink); }
.cause h2 em { color: #fde68a; }
.cause p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); margin: 1.25rem 0 0; max-width: 30rem; }
.cause .notice { margin: 0; width: 100%; justify-self: center; max-width: 30rem; }
/* v18: the card explains itself */
.vs-title { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; color: var(--ink); margin: 0 0 1.25rem; }
.vs-title em { color: #fde68a; }
.vs .cap { font-size: 1rem; color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .75rem; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend .lg { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; background: var(--hold); }
.legend .lg.m { background: transparent; box-shadow: inset 0 0 0 2px var(--slip); }
.legend b { font-size: .6875rem; color: #0a1024; background: #86e3cf; border-radius: 999px; padding: 0 .4rem; }
/* v19: the why — one story in three acts */
.night { background: radial-gradient(120% 90% at 70% 0%, var(--night-2), var(--night) 60%) var(--night); }
.night .grain { bottom: 0; }
.why { padding: 6rem 1.25rem 8rem; }
.why-head { max-width: 44rem; margin: 0 auto 5rem; text-align: center; }
.why-head h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.08; margin: 0; color: var(--ink); text-wrap: balance; }
.why-head h2 em { color: #fde68a; }
.why-head p { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-2); margin: 1.25rem auto 0; max-width: 34rem; }
.acts { list-style: none; margin: 0 auto; padding: 0; max-width: 64rem; position: relative; display: grid; gap: 6rem; }
.acts::before { content: ""; position: absolute; left: 1.05rem; top: 1rem; bottom: 1rem; width: 1px;
  background: linear-gradient(rgba(253,230,138,.5), rgba(255,255,255,.08)); }
@media (min-width: 900px) { .acts::before { left: 50%; } }
.act { display: grid; gap: 2rem; align-items: center; position: relative; padding-left: 3.25rem; }
@media (min-width: 900px) {
  .act { grid-template-columns: 1fr 1fr; gap: 6rem; padding-left: 0; }
  .act.flip .act-copy { order: 2; }
}
.act .step { position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 999px; display: grid; place-items: center;
  background: var(--night); border: 1px solid rgba(253,230,138,.6); color: #fde68a; font-family: var(--serif); font-size: 1.0625rem; }
@media (min-width: 900px) { .act .step { left: calc(50% - 1.05rem); top: 50%; transform: translateY(-50%); } }
.act-copy h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 3vw, 2.375rem); line-height: 1.1; margin: 0 0 .9rem; color: var(--ink); }
.act-copy p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); margin: 0; }
.act-copy .proof { margin-top: 1rem; font-size: .875rem; color: var(--ink-3); }
.act-copy .proof b { color: #fde68a; font-weight: 600; font-size: 1rem; }
.act .card { position: relative; inset: auto; width: 100%; max-width: 26rem; justify-self: center; margin: 0; transform: none; }
/* act 1: the slip panel */
.slipcard { padding: 1.25rem; }
.sc-row { display: flex; justify-content: space-between; align-items: center; }
.sc-name { font-weight: 600; font-size: 1.125rem; color: var(--ink); }
.sc-pill { display: inline-flex; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.sc-pill i { font-style: normal; padding: .35rem .85rem; color: var(--ink-3); }
.sc-pill i.on { background: rgba(96,165,250,.18); color: var(--slip); }
.sc-tag { display: inline-block; margin-top: 1rem; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slip);
  background: rgba(96,165,250,.14); border-radius: .35rem; padding: .2rem .5rem; }
.sc-note { margin-top: .6rem; padding: .8rem .9rem; border-radius: .75rem; border: 1px solid rgba(96,165,250,.5); color: var(--ink); font-size: 1rem; }
.sc-ack { margin-top: .9rem; font-family: var(--serif); font-size: 1.125rem; color: #fde68a; }
/* act 3 */
.gradcard { padding: 1.5rem; }
.gradcard .c-meta { color: var(--hold); font-size: .8125rem; margin: 0 0 .6rem; }
.gradcard blockquote { margin: 0; border: 0; padding: 0; font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; color: var(--ink); }
.gradcard figcaption { margin-top: .9rem; font-size: .8125rem; color: var(--ink-3); }
.close { text-align: center; margin-top: 6rem; }
.close .btn { display: inline-block; }
/* v20: one habit through the page */
.vs .wk i.s { background: var(--slip); box-shadow: none; }
.vs .wk i.g { background: rgba(96,165,250,.18); box-shadow: none; }
.legend .lg.s { background: var(--slip); box-shadow: none; }
.legend .lg.g { background: rgba(96,165,250,.25); box-shadow: none; }
.wtag.t33 { background: #93b4f0; } .wtag.t67 { background: #86e3cf; }
.why-head .who { font-size: .8125rem; color: var(--ink-3); margin-top: .75rem; }
.said { margin-top: 1.25rem !important; padding-left: 1rem; border-left: 3px solid #fde68a; font-family: var(--serif); font-size: 1.25rem !important; line-height: 1.35; color: var(--ink) !important; }
.said span { display: block; margin-top: .4rem; font-family: 'Inter', system-ui, sans-serif; font-size: .8125rem; color: var(--ink-3); }
.weekcard { padding: 1.4rem; }
.weekcard .c-meta { margin-top: .2rem; }
.cells7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 1rem 0; }
.cells7 i { aspect-ratio: 1; border-radius: 6px; background: var(--hold); }
.cells7 i.s { background: var(--slip); }
.weekcard blockquote { margin: 0; border: 0; padding: 0; font-family: var(--serif); font-size: 1.375rem; color: var(--ink); }
/* v21: one habit, eight weeks — a pinned grid that fills as the story scrolls */
.story { max-width: 68rem; margin: 0 auto; display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .story { grid-template-columns: 1fr 1.05fr; gap: 5rem; align-items: start; } }
.story-panel { position: sticky; top: 1rem; z-index: 2; }
@media (min-width: 900px) { .story-panel { top: 18vh; } }
.spanel { position: relative; inset: auto; width: 100%; max-width: 28rem; margin: 0 auto; padding: 1.25rem; transform: none; background: rgba(18, 26, 58, .92); }
.sp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
.sp-name { font-family: var(--serif); font-size: 1.375rem; color: var(--ink); }
.sp-terms { font-size: .8125rem; color: #fde68a; transition: color .4s; }
.sp-days, .srow { display: grid; grid-template-columns: 1.6rem repeat(7, 1fr) 2.4rem; gap: 5px; align-items: center; }
.sp-days b { font-size: .625rem; font-weight: 600; color: var(--ink-3); text-align: center; }
.srow { margin-top: 5px; transition: opacity .5s ease; }
.srow .wl { font-size: .625rem; color: var(--ink-3); }
.srow i { aspect-ratio: 1; border-radius: 4px; background: var(--hold); transition: transform .4s ease; }
.srow i.s { background: var(--slip); }
.srow i.o { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.srow .wtag { transition: opacity .4s; }
.story.live[data-at] .srow { opacity: .12; }
.story.live[data-at] .srow .wtag { opacity: 0; }
.story.live[data-at="1"] :is(.srow,.evolve-mark):is([data-w="1"]), .story.live[data-at="1"] .srow:is([data-w="1"]) .wtag { opacity: 1; }
.story.live[data-at="2"] :is(.srow,.evolve-mark):is([data-w="1"],[data-w="2"]), .story.live[data-at="2"] .srow:is([data-w="1"],[data-w="2"]) .wtag { opacity: 1; }
.story.live[data-at="3"] :is(.srow,.evolve-mark):is([data-w="1"],[data-w="2"],[data-w="3"]), .story.live[data-at="3"] .srow:is([data-w="1"],[data-w="2"],[data-w="3"]) .wtag { opacity: 1; }
.story.live[data-at="4"] :is(.srow,.evolve-mark):is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"]), .story.live[data-at="4"] .srow:is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"]) .wtag { opacity: 1; }
.story.live[data-at="5"] :is(.srow,.evolve-mark):is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"],[data-w="5"]), .story.live[data-at="5"] .srow:is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"],[data-w="5"]) .wtag { opacity: 1; }
.story.live[data-at="6"] :is(.srow,.evolve-mark):is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"],[data-w="5"],[data-w="6"]), .story.live[data-at="6"] .srow:is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"],[data-w="5"],[data-w="6"]) .wtag { opacity: 1; }
.story.live[data-at="7"] :is(.srow,.evolve-mark):is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"],[data-w="5"],[data-w="6"],[data-w="7"]), .story.live[data-at="7"] .srow:is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"],[data-w="5"],[data-w="6"],[data-w="7"]) .wtag { opacity: 1; }
.story.live[data-at="8"] :is(.srow,.evolve-mark):is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"],[data-w="5"],[data-w="6"],[data-w="7"],[data-w="8"]), .story.live[data-at="8"] .srow:is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"],[data-w="5"],[data-w="6"],[data-w="7"],[data-w="8"]) .wtag { opacity: 1; }
.story.live[data-at="9"] :is(.srow,.evolve-mark):is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"],[data-w="5"],[data-w="6"],[data-w="7"],[data-w="8"],[data-w="9"]), .story.live[data-at="9"] .srow:is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"],[data-w="5"],[data-w="6"],[data-w="7"],[data-w="8"],[data-w="9"]) .wtag { opacity: 1; }
.story.live[data-at="10"] :is(.srow,.evolve-mark):is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"],[data-w="5"],[data-w="6"],[data-w="7"],[data-w="8"],[data-w="9"],[data-w="10"]), .story.live[data-at="10"] .srow:is([data-w="1"],[data-w="2"],[data-w="3"],[data-w="4"],[data-w="5"],[data-w="6"],[data-w="7"],[data-w="8"],[data-w="9"],[data-w="10"]) .wtag { opacity: 1; }
.spanel .legend { margin-top: 1rem; }
.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.beat { min-height: 62vh; padding: 2rem 0; display: flex; flex-direction: column; justify-content: center; transition: opacity .5s ease; }
.story.live .beat { opacity: .35; }
.story.live .beat.on { opacity: 1; }
.beat:first-child { padding-top: 0; } .beat:last-child { min-height: 50vh; }
.beat .when { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fde68a; margin: 0 0 .6rem; }
.beat h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 3vw, 2.375rem); line-height: 1.1; margin: 0 0 .9rem; color: var(--ink); }
.beat > p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 30rem; }
.beat .card.mini { position: relative; inset: auto; transform: none; margin: 1.5rem 0 0; max-width: 26rem; width: 100%; justify-self: auto; }
.slipcard.mini .sc-note { margin-top: .9rem; }
@media (max-width: 899px) {
  .story-panel { top: 0; padding-top: .5rem; background: linear-gradient(var(--night) 85%, transparent); }
  .spanel { padding: .9rem; } .sp-name { font-size: 1.125rem; }
  .spanel .legend { display: none; }
  .beat { min-height: 0; padding: 2.5rem 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .beat { opacity: 1; } }
/* phones: no pinning — the eight weeks shown whole, then the story */
@media (max-width: 899px) {
  .story-panel { position: static; background: none; padding: 0; }
  .story[data-at] .srow, .story[data-at] .srow .wtag { opacity: 1; }
  .spanel .legend { display: flex; }
}
/* v24: coffee — every cell carries the day's cups */
.cups .wk i, .cups .srow i { display: grid; place-items: center; font-style: normal; font-weight: 700; color: rgba(10,16,36,.75); font-size: .625rem; }
.spanel.cups .srow i { font-size: .8125rem; }
.cups .wk i.g { background: rgba(255,255,255,.07); color: var(--ink-3); }
.cups .srow i.s, .cups .wk i.s { color: #0a1024; }
.wtag.tg { background: #fde68a; }
.legend b.n { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 3px; background: rgba(255,255,255,.12); color: var(--ink); font-size: .625rem; }
.legend b.tg { background: #fde68a; color: #0a1024; border-radius: 999px; padding: 0 .35rem; font-size: .6875rem; }
.wtag.t43 { background: #93b4f0; }
/* v26: hero card — two lines, two endings */
.dcard.lines { padding: 1.5rem 1.5rem 1.1rem; }
.lines .vs-title { margin-bottom: .75rem; }
.axis-label { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .25rem; }
svg.twolines { width: 100%; height: auto; display: block; overflow: visible; }
.twolines .base { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.twolines path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.twolines .l-drift { stroke: #94a3b8; stroke-dasharray: 2 6; opacity: .8; }
.twolines .l-with { stroke: var(--hold); filter: drop-shadow(0 0 6px rgba(52,211,153,.45)); }
.twolines circle { stroke: var(--night); stroke-width: 2; }
.twolines .d-drift { fill: #94a3b8; } .twolines .d-with { fill: var(--hold); }
.twolines circle:hover { r: 6; }
.twolines .end { font-family: var(--serif); font-size: 16px; }
.twolines .e-drift { fill: var(--ink-2); } .twolines .e-with { fill: #a7f3d0; }
.twolines .end-sub { font-size: 11px; fill: var(--ink-3); }
.twolines .tick { font-size: 11px; fill: var(--ink-3); }
.twolines .l-with { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.8s .3s ease-out forwards; }
.twolines .l-drift { animation: fadein 1s .2s ease both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .twolines .l-with { animation: none; stroke-dashoffset: 0; } }
.twolines .an text { font-size: 11.5px; fill: #fde68a; font-weight: 500; }
.twolines .an line { stroke: rgba(253,230,138,.55); stroke-width: 1; }
.twolines .an .ring { fill: none; stroke: #fde68a; stroke-width: 1.5; }
.twolines .an.grey text { fill: var(--ink-3); }
.twolines .an.grey line { stroke: rgba(148,163,184,.5); }
.twolines .an.grey .ring { stroke: #94a3b8; }
.twolines .an { opacity: 0; animation: fadein .6s ease forwards; }
.twolines .an:nth-of-type(1) { animation-delay: 1.2s; } .twolines .an:nth-of-type(2) { animation-delay: 1.7s; } .twolines .an:nth-of-type(3) { animation-delay: .9s; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .twolines .an { animation: none; opacity: 1; } }
.foot { text-align: center; font-size: .8125rem; color: var(--ink-3); padding: 0 1rem 3rem; background: var(--night); }
.foot a { color: inherit; text-decoration: none; } .foot a:hover { color: var(--ink); }
/* v29: the Tower */
.tower { max-width: 64rem; margin: 8rem auto 0; padding: 4rem 1.25rem 0; border-top: 1px solid rgba(255,255,255,.08); text-align: center; position: relative; }
.tower::before { content: ""; position: absolute; inset: -2rem 10% auto; height: 18rem; z-index: -1; filter: blur(70px); opacity: .5;
  background: radial-gradient(closest-side, rgba(139,92,246,.45), transparent), radial-gradient(closest-side at 70% 50%, rgba(244,114,182,.3), transparent); }
.t-kicker { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fde68a; margin: 0 0 1rem; }
.tower h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 4.2vw, 3.25rem); line-height: 1.08; margin: 0 auto; max-width: 40rem; color: var(--ink); text-wrap: balance; }
.tower h2 em { color: #fde68a; }
.t-lede { font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); max-width: 36rem; margin: 1.25rem auto 0; }
.heights { display: grid; gap: 1rem; margin: 3.5rem 0 0; text-align: left; }
@media (min-width: 820px) { .heights { grid-template-columns: repeat(3, 1fr); align-items: end; } }
.h-col { border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; padding: 1.25rem; background: rgba(255,255,255,.035); }
@media (min-width: 820px) { .h-col:nth-child(2) { margin-bottom: 1.5rem; } .h-col:nth-child(3) { margin-bottom: 3rem; } }
.h-alt { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #0a1024; background: #fde68a; border-radius: 999px; padding: .15rem .6rem; }
.h-col h3 { font-family: var(--serif); font-weight: 500; font-size: 1.375rem; margin: .8rem 0 .4rem; color: var(--ink); }
.h-col p { font-size: .9375rem; line-height: 1.55; color: var(--ink-2); margin: 0; }
.tower .reading { position: relative; inset: auto; transform: none; margin: 3rem auto 0; max-width: 36rem; padding: 1.75rem; text-align: left; }
.r-label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tower .reading blockquote { margin: .8rem 0 0; border: 0; padding: 0; font-family: var(--serif); font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.3; color: var(--ink); }
.tower .reading figcaption { margin-top: 1rem; font-size: .875rem; color: var(--ink-3); }
.t-fine { font-size: .875rem; color: var(--ink-3); margin: 1.5rem 0 0; }
/* v30: the promise is a pill that announces itself when the terms change */
.sp-head { margin-bottom: .5rem; }
.sp-promise { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.sp-label { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sp-terms { display: inline-block; font-size: .9375rem; font-weight: 600; color: #0a1024; background: #fde68a;
  border-radius: 999px; padding: .3rem .8rem; box-shadow: 0 0 0 0 rgba(253,230,138,.6); }
.sp-terms.bump { animation: bump .9s cubic-bezier(.2,.8,.2,1); }
@keyframes bump {
  0% { transform: scale(.85); box-shadow: 0 0 0 0 rgba(253,230,138,.7); }
  40% { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(253,230,138,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(253,230,138,0); }
}
@media (prefers-reduced-motion: reduce) { .sp-terms.bump { animation: none; } }
@media (max-width: 899px) { .sp-promise { display: none; } }
/* v31: green tea reads as green tea */
.srow i.tea { background: #bbf7d0; color: #166534; }
.srow i.tea svg { width: 58%; height: 58%; fill: none; stroke: #166534; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.legend .lg.tea { background: #bbf7d0; }
.evolve-mark { position: relative; height: 1.1rem; margin: 6px 0 2px 1.6rem; display: flex; align-items: center; transition: opacity .5s ease; }
.evolve-mark::before { content: ""; position: absolute; left: 0; right: 2.4rem; top: 50%; border-top: 1px dashed rgba(253,230,138,.6); }
.evolve-mark span { position: relative; margin-left: .5rem; padding: 0 .4rem; background: rgba(18,26,58,1); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; color: #fde68a; }
.story.live[data-at] .evolve-mark { opacity: .12; }

@media (max-width: 899px) { .story[data-at] .evolve-mark { opacity: 1; } }
.sp-terms { white-space: nowrap; }
/* v32: coffee after the evolve is a cup, not a count */
.srow i.cup svg { width: 60%; height: 60%; fill: none; stroke: #0a1024; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.legend .lg.cupk { background: var(--slip); }
.legend .lgcup { width: 1rem; height: 1rem; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* v34: the drift back, then the promise again */
.srow i.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(148,163,184,.45); }
.srow i.ghost svg { width: 56%; height: 56%; fill: none; stroke: #94a3b8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.srow .wl { font-size: .5625rem; }
.legend .lg.ghostk { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(148,163,184,.6); }
.story.live[data-at] .evolve-mark { opacity: .12; }
/* v35: fit the 11-row calendar in one screen */
@media (min-width: 900px) {
  .story-panel { top: 1.5rem; }
  .spanel.cups .srow i { aspect-ratio: 1.45; border-radius: 5px; }
  .spanel.cups .srow { margin-top: 4px; }
  .evolve-mark { height: .9rem; margin: 4px 0 1px 1.6rem; }
  .spanel { padding: 1rem 1.1rem; }
  .sp-promise { margin-bottom: .6rem; }
  .spanel .legend { margin-top: .7rem; padding-top: .6rem; }
}
/* v36: the drift back stays hidden until its beat — a surprise */
.story.live .later { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .8s cubic-bezier(.2,.8,.2,1), opacity .6s ease .15s; }
.story.live:is([data-at="9"],[data-at="10"]) .later { max-height: 14rem; opacity: 1; }
.story.live .later-key { display: none; }
.story.live:is([data-at="9"],[data-at="10"]) .later-key { display: inline-flex; }
/* v37: the Tower continues Sam's story */
.tower { border-top: 0; margin-top: 2rem; padding-top: 2rem; }
.h-col blockquote { margin: .5rem 0 0; border: 0; padding: 0; font-family: var(--serif); font-size: 1.125rem; line-height: 1.4; color: var(--ink); }
.t-note { font-size: .875rem; color: var(--ink-3); max-width: 34rem; margin: 2rem auto 0; }

/* v38: the Tower is a moment in the story */
.beat .reading.mini { padding: 1.25rem 1.35rem; text-align: left; }
.beat .reading .r-label { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fde68a; }
.beat .reading blockquote { margin: .6rem 0 0; border: 0; padding: 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; color: var(--ink); }
.beat .t-fine { font-size: .8125rem; color: var(--ink-3); margin: 1rem 0 0; text-align: left; }
/* v39: the Tower, real */
.witness { max-width: 64rem; margin: 7rem auto 0; padding: 0 1.25rem; text-align: center; }
.witness h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.1; margin: 0 auto; max-width: 42rem; color: var(--ink); text-wrap: balance; }
.witness h2 em { color: #fde68a; }
.w-pair { display: grid; gap: 1rem; margin-top: 3rem; align-items: center; text-align: left; }
@media (min-width: 860px) { .w-pair { grid-template-columns: 1fr auto 1.25fr; gap: 1.5rem; } }
.witness .card { position: relative; inset: auto; transform: none; margin: 0; width: 100%; padding: 1.4rem; }
.witness .r-label { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.w-read .r-label { color: #fde68a; }
.witness blockquote { margin: .6rem 0 0; border: 0; padding: 0; font-family: var(--serif); line-height: 1.4; color: var(--ink); }
.w-log blockquote { font-size: 1.0625rem; color: var(--ink-2); }
.w-read { box-shadow: 0 0 60px -10px rgba(139,92,246,.45); }
.w-read blockquote { font-size: 1.3125rem; }
.w-arrow { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #fde68a; text-align: center; }
.w-arrow::after { content: "→"; display: block; font-size: 1.5rem; }
@media (max-width: 859px) { .w-arrow::after { content: "↓"; } }
.w-note { font-size: .9375rem; line-height: 1.6; color: var(--ink-2); max-width: 36rem; margin: 2rem auto 0; }
/* v40: the Tower — the gain first, one example */
.w-lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-2); max-width: 34rem; margin: 1.25rem auto 0; }
.witness .w-one { max-width: 38rem; margin: 2.5rem auto 0; padding: 0; overflow: hidden; text-align: left; box-shadow: 0 0 60px -12px rgba(139,92,246,.45); }
.w-row { padding: 1.25rem 1.5rem; }
.w-row + .w-row { border-top: 1px solid rgba(255,255,255,.08); }
.w-who { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.w-row p { margin: .45rem 0 0; font-family: var(--serif); font-size: 1.125rem; line-height: 1.4; color: var(--ink-2); }
.w-row.tw { background: rgba(253,230,138,.06); }
.w-row.tw .w-who { color: #fde68a; }
.w-row.tw p { font-size: 1.5rem; color: var(--ink); }
.w-one figcaption { padding: .75rem 1.5rem; font-size: .75rem; color: var(--ink-3); border-top: 1px solid rgba(255,255,255,.06); }
.w-note { font-size: .875rem; color: var(--ink-3); margin: 1.25rem auto 0; }
/* v42: the Tower as a real three-week story */
.witness .who { font-size: .8125rem; color: var(--ink-3); margin-top: .75rem; }
.tl { list-style: none; margin: 3.5rem auto 0; padding: 0; max-width: 46rem; text-align: left; position: relative; display: grid; gap: 3rem; }
.tl::before { content: ""; position: absolute; left: .45rem; top: .5rem; bottom: .5rem; width: 1px; background: linear-gradient(rgba(253,230,138,.6), rgba(253,230,138,.1)); }
.tl-step { position: relative; padding-left: 2.25rem; }
.tl-step::before { content: ""; position: absolute; left: 0; top: .3rem; width: .95rem; height: .95rem; border-radius: 999px; background: var(--night); border: 1.5px solid #fde68a; }
.tl-date { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fde68a; }
.tl-step h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; margin: .3rem 0 1rem; color: var(--ink); }
.witness .tl-card { position: relative; inset: auto; transform: none; margin: 0; width: 100%; padding: 0; overflow: hidden; }
.tl-row { padding: 1rem 1.25rem; }
.tl-row + .tl-row { border-top: 1px solid rgba(255,255,255,.08); }
.tl-who { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tl-row p { margin: .4rem 0 0; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.4; color: var(--ink-2); }
.tl-row.tw { background: rgba(253,230,138,.06); }
.tl-row.tw .tl-who { color: #fde68a; }
.tl-row.tw p { font-size: 1.3125rem; color: var(--ink); }
.tl-step:last-child .tl-row.tw { background: rgba(52,211,153,.08); }
.tl-step:last-child .tl-row.tw .tl-who { color: var(--hold); }
/* v43: the bridge from Sam to the Tower */
.witness { margin-top: 5rem; }
.bridge { font-family: var(--serif); font-size: clamp(1.5rem, 2.8vw, 2.125rem); line-height: 1.3; color: var(--ink); margin: 0 auto 4.5rem; max-width: 40rem; }
.bridge span { color: var(--ink-2); }
.bridge::after { content: ""; display: block; width: 1px; height: 3.5rem; margin: 2.5rem auto 0; background: linear-gradient(rgba(253,230,138,.7), transparent); }
/* v44: three heights — the cornfield, then the real reading at each height */
.heights2 { display: grid; gap: 2.5rem; margin: 3.5rem auto 0; max-width: 64rem; text-align: left; }
@media (min-width: 860px) { .heights2 { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.ht-fig { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 1rem; padding: .9rem; }
.fld { display: block; width: 100%; height: auto; }
.fld .off { fill: #6b5f3a; opacity: .45; }
.fld .on { fill: #fde68a; }
.ht-h { margin: 1rem 0 0; font-family: var(--serif); font-size: 1.375rem; color: var(--ink); }
.ht-h span { font-family: 'Inter', system-ui, sans-serif; font-size: .8125rem; color: var(--ink-3); }
.ht-does { margin: .4rem 0 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.ht blockquote { margin: 1rem 0 0; padding: .9rem 1rem; border: 0; border-left: 3px solid #fde68a; border-radius: 0 .6rem .6rem 0; background: rgba(253,230,138,.06);
  font-family: var(--serif); font-size: 1.0625rem; line-height: 1.4; color: var(--ink); }
.ht cite { display: block; margin-top: .5rem; font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-size: .75rem; color: #fde68a; }
.heights2 .ht:nth-child(2) { transition-delay: .12s; } .heights2 .ht:nth-child(3) { transition-delay: .24s; }
.why-name { font-size: .9375rem; line-height: 1.6; color: var(--ink-3); max-width: 32rem; margin: 1rem auto 0; font-style: italic; }
/* v46: one habit, three readings */
.thread { max-width: 40rem; margin: 3rem auto 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.thread b { color: var(--ink); font-weight: 600; }
.heights2 { margin-top: 2rem; }
.ht-when { margin: 1rem 0 0; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fde68a; }
.ht .ht-h { margin-top: .3rem; font-size: 1.375rem; line-height: 1.2; }
.t-close { margin: 3.5rem auto 0; max-width: 40rem; padding: 0; border: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.3; color: var(--ink); }
.t-close cite { display: block; margin-top: .75rem; font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-size: .8125rem; color: #fde68a; }
.t-close { text-align: center; }
.bridge { font-size: clamp(1.375rem, 2.4vw, 1.75rem); max-width: 36rem; margin-bottom: 3rem; }
.bridge::after { height: 2.5rem; margin-top: 1.75rem; }
/* v50: each reading opens to the notes it was read from */
.ev { margin-top: 1rem; }
.ev summary { list-style: none; cursor: pointer; }
.ev summary::-webkit-details-marker { display: none; }
.ev summary blockquote { margin: 0; }
.ev summary:hover blockquote { background: rgba(253,230,138,.1); }
.ev-hint { display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; font-size: .8125rem; font-weight: 600; color: #fde68a; }
.ev-hint::after { content: "↓"; transition: transform .25s; }
.ev[open] .ev-hint::after { transform: rotate(180deg); }
.ev[open] .ev-hint { font-size: 0; } .ev[open] .ev-hint::before { content: "Hide"; font-size: .8125rem; }
.ev-body { margin-top: .75rem; padding: 1rem; border-radius: .75rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.ev-lead { margin: 0 0 .6rem !important; font-size: .6875rem !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3) !important; }
.ev-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ev-body li { font-size: .9375rem; line-height: 1.45; color: var(--ink); }
.ev-when { display: block; font-size: .75rem; color: var(--ink-3); margin-bottom: .15rem; }
.ev-when em { font-style: normal; margin-left: .35rem; padding: 0 .4rem; border-radius: 999px; background: rgba(96,165,250,.15); color: #93c5fd; }
/* v51: pinned calendar centred in the viewport, level with the active beat */
@media (min-width: 900px) {
  .story-panel { top: 0; height: 100vh; display: flex; align-items: center; }
  .story-panel .spanel { width: 100%; }
  .beat { min-height: 100vh; }
  .beat:first-child { padding-top: 2rem; }
}
/* v52: the hero shows the app — a slip, a note, a kind answer, the Tower */
.appcard { position: relative; inset: auto; width: 100%; max-width: 26rem; justify-self: center; padding: 0; overflow: hidden; transform: rotate(-1deg);
  background: rgba(18,26,58,.82); }
.ac-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.ac-name { font-weight: 600; font-size: 1.125rem; color: var(--ink); }
.ac-terms { font-size: .8125rem; color: var(--ink-3); margin-top: .1rem; }
.ac-pill { display: inline-flex; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.ac-pill i { font-style: normal; padding: .35rem .85rem; color: var(--ink-3); }
.ac-pill i.on { background: rgba(96,165,250,.2); color: var(--slip); }
.ac-slip { padding: 1.1rem 1.25rem 1.25rem; }
.ac-tag { display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slip);
  background: rgba(96,165,250,.14); border-radius: .35rem; padding: .2rem .5rem; }
.ac-q { margin: .8rem 0 .4rem; font-size: .875rem; color: var(--ink-2); }
.ac-note { padding: .75rem .9rem; border-radius: .7rem; border: 1px solid rgba(96,165,250,.55); color: var(--ink); font-size: 1rem; line-height: 1.4; }
.ac-ack { margin: .8rem 0 0; font-family: var(--serif); font-size: 1.125rem; color: #fde68a; }
.ac-tower { padding: 1.1rem 1.25rem 1.3rem; background: rgba(253,230,138,.07); border-top: 1px solid rgba(253,230,138,.18); }
.ac-tlabel { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fde68a; }
.ac-tower p { margin: .4rem 0 0; font-family: var(--serif); font-size: 1.625rem; line-height: 1.2; color: var(--ink); }
.ac-tag, .ac-q, .ac-note, .ac-ack, .ac-tower { opacity: 0; animation: fadein .6s ease forwards; }
.ac-tag { animation-delay: .4s } .ac-q { animation-delay: .7s } .ac-note { animation-delay: 1.1s } .ac-ack { animation-delay: 1.8s } .ac-tower { animation-delay: 2.6s }
@media (prefers-reduced-motion: reduce) { .ac-tag, .ac-q, .ac-note, .ac-ack, .ac-tower { animation: none; opacity: 1; } }
/* v53: the chart, with room to breathe */
@media (min-width: 960px) { .hero { grid-template-columns: 1.05fr 1fr; gap: 4rem; } }
.chart2 { position: relative; inset: auto; width: 100%; max-width: 34rem; justify-self: center; transform: none; padding: 1.75rem 1.75rem 1.5rem;
  background: rgba(18,26,58,.55); }
.c2-title { font-family: var(--serif); font-size: 1.625rem; line-height: 1.2; color: var(--ink); }
.c2-title em { color: #fde68a; }
.c2-axis { margin: 1.5rem 0 .4rem; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
svg.twolines2 { width: 100%; height: auto; display: block; overflow: visible; }
.twolines2 path { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.twolines2 .l-drift { stroke: #94a3b8; stroke-dasharray: 1 8; opacity: .85; }
.twolines2 .l-with { stroke: var(--hold); filter: drop-shadow(0 0 8px rgba(52,211,153,.5)); stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 2s .3s ease-out forwards; }
.twolines2 .mk circle { fill: #0f1630; stroke: #fde68a; stroke-width: 2; }
.twolines2 .mk text { font-size: 11px; font-weight: 700; fill: #fde68a; }
.twolines2 .mk { opacity: 0; animation: fadein .5s ease forwards; }
.twolines2 .mk:nth-of-type(1) { animation-delay: .9s } .twolines2 .mk:nth-of-type(2) { animation-delay: 1.5s } .twolines2 .mk:nth-of-type(3) { animation-delay: 2.1s }
.twolines2 .end { font-family: var(--serif); font-size: 17px; }
.twolines2 .e-drift { fill: var(--ink-2); } .twolines2 .e-with { fill: #a7f3d0; }
.twolines2 .end-sub { font-size: 11.5px; fill: var(--ink-3); }
.twolines2 .tick { font-size: 11px; fill: var(--ink-3); }
.c2-steps { list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: .55rem; }
@media (min-width: 560px) { .c2-steps { grid-template-columns: repeat(3, 1fr); gap: .75rem; } }
.c2-steps li { display: flex; gap: .55rem; align-items: flex-start; font-size: .8125rem; line-height: 1.4; color: var(--ink-2); }
.c2-steps b { flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 999px; border: 1.5px solid #fde68a; color: #fde68a; font-size: .6875rem; }
@media (prefers-reduced-motion: reduce) { .twolines2 .l-with { animation: none; stroke-dashoffset: 0; } .twolines2 .mk { animation: none; opacity: 1; } }
@media (min-width: 960px) { .hero { grid-template-columns: 1.15fr 1fr; gap: 3.5rem; } .hero h1 { font-size: clamp(2.75rem, 4.4vw, 4.25rem); } }
/* v55: stepped, whole cups, no jargon */
svg.twolines3 { width: 100%; height: auto; display: block; overflow: visible; }
.twolines3 .g { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.twolines3 .yl { font-size: 11px; fill: var(--ink-3); }
.twolines3 path { fill: none; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.twolines3 .l-drift { stroke: #94a3b8; opacity: .75; stroke-dasharray: 6 6; }
.twolines3 .l-with { stroke: var(--hold); filter: drop-shadow(0 0 8px rgba(52,211,153,.5)); stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 2.2s .3s ease-out forwards; }
.twolines3 .end { font-family: var(--serif); font-size: 17px; }
.twolines3 .e-drift { fill: var(--ink-2); } .twolines3 .e-with { fill: #a7f3d0; }
.twolines3 .end-sub { font-size: 11.5px; fill: var(--ink-3); }
.twolines3 .tick { font-size: 11px; fill: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .twolines3 .l-with { animation: none; stroke-dashoffset: 0; } }
/* v56: phones pin too — a compact calendar stays on top while each week's beat scrolls under it.
   Block layout, not grid: a single-column grid row is only the panel's own height, so sticky never sticks. */
@media (max-width: 899px) {
  .story { display: block; }
  .story-panel { position: sticky; top: 0; padding: .5rem 0 1.25rem; margin: 0 -1.25rem; padding-inline: 1.25rem;
    background: linear-gradient(var(--night) 88%, transparent); }
  .spanel { padding: .75rem .85rem; }
  .sp-head { margin-bottom: .35rem; }
  .sp-promise { display: flex; margin-bottom: .5rem; }
  .sp-label { display: none; }
  .sp-terms { font-size: .8125rem; padding-block: .1rem; }
  .spanel.cups .srow i { aspect-ratio: 1.9; border-radius: 4px; font-size: .6875rem; }
  .srow { margin-top: 3px; }
  .srow i svg { max-height: 80%; }
  .evolve-mark { margin-block: .15rem; }
  .spanel .legend { display: none; }
  .beats { margin-top: 1rem; }
  .beat { min-height: 55svh; padding: 1.5rem 0; }
  .beat:last-child { min-height: 60svh; }
}