/* Variation C, "The cost of forgetting" (22 Oct 2026). The section after the hero is a calculator that plays like a toy.
   Static (no script, reduced motion): a night section showing the default numbers. With html.cj (set before first paint)
   journey.js fades its contents up as the night sheet rises, flies the hook's runes into the odometer and forms the hand-over line. */

/* the hero's scroll cue */
.cue { display: none; }
html.cj .cue { position: absolute; left: 50%; bottom: 18px; z-index: 3; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 44px; color: var(--slate); text-decoration: none; font: 400 13px/1.2 var(--mono); letter-spacing: .02em; white-space: nowrap; }
html.cj .cue:hover { color: var(--violet); }
.cue .cap { position: relative; width: 26px; height: 42px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; }
.cue .cap i { position: absolute; left: 50%; top: 8px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--violet); animation: cuedrop 1.8s cubic-bezier(.5,0,.5,1) infinite; }
.cue .cap::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 18px; margin-left: -.75px; background: linear-gradient(currentColor, transparent); opacity: .5; }
@keyframes cuedrop { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(20px); opacity: 1; } 100% { transform: translateY(24px); opacity: 0; } }
@media (max-width: 959px) { html.cj .hero { padding-bottom: 96px; } }
@media (min-width: 960px) {
  html.cj .hero { min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); display: flex; flex-direction: column; justify-content: center; padding: 8px 0 120px; }
  html.cj .hero .wrap { width: min(100% - 2 * var(--pad), var(--max)); }
}

/* letters that turn into runes: each sits in a cell sized by the real letter, so the line never reflows */
.fw { white-space: nowrap; }
.fc { position: relative; display: inline-block; }
.fc > i { visibility: hidden; font-style: normal; }
.fc > b { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font: inherit; }
.fc > b.g { color: var(--violet); font-family: "Noto Sans Runic", var(--body); font-weight: 400; }
.cj-hand .fc > b.g, .kp-card .fc > b.g { color: #B9A6FF; text-shadow: 0 0 14px rgba(150,120,255,.65); }

/* the flight layer: runes in transit between the hook, the odometer and the hand-over line */
.cj-fly { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; contain: strict; }
.cj-fly span { position: absolute; left: 0; top: 0; width: 1em; height: 1em; line-height: 1; text-align: center; font-family: "Noto Sans Runic", var(--body); font-weight: 400;
  color: var(--violet); opacity: 0; will-change: transform, opacity; transform-origin: 50% 50%; }
.cj-fly span.lit { color: #C9BAFF; text-shadow: 0 0 12px rgba(150,120,255,.9), 0 0 2px #fff; }
.cj-fly span.spark { font-size: 22px; color: #C9BAFF; text-shadow: 0 0 10px rgba(150,120,255,.9); }

/* the section */
.cost { position: relative; background: var(--night); color: var(--night-ink); padding: 56px 0 0; overflow: hidden; isolation: isolate; }
.cj-dusk { display: none; }
html.cj .cost { background: transparent; }
html.cj .cj-dusk { display: block; position: absolute; inset: 0; z-index: -1; background: var(--night);
  background-image: radial-gradient(90% 60% at 30% 22%, rgba(76,31,209,.32), transparent 70%); border-radius: 36px 36px 0 0; }
html.cj .cost { padding-top: 64px; }
@media (min-width: 960px) { html.cj .cost { padding-top: 130px; } html.cj .cj-dusk { border-radius: 56px 56px 0 0; } }
@media (max-width: 959px) and (max-height: 700px) { html.cj .cost { padding-top: 56px; } }
html.cj .cj-in { opacity: var(--fy, 1); }
.cj-in { display: grid; gap: 22px; }
.cj-kick { margin: 0 0 10px; font-size: 13px; color: #B9A6FF; letter-spacing: .02em; }
.cost h2 { color: var(--night-ink); max-width: 13em; }

/* the odometer */
.cj-meter { display: grid; justify-items: start; gap: 8px; }
.odo { display: flex; gap: 8px; font: 400 78px/1 var(--mono); }
@media (max-width: 959px) { .cost h2 { font-size: 28px; } .ctl { padding: 13px 0; } .cj-in { gap: 18px; } }
.slot { position: relative; display: grid; place-items: center; width: .76em; height: 1.16em; border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025) 49.5%, rgba(255,255,255,.05) 50.5%, rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(185,166,255,.2), 0 18px 40px -22px rgba(76,31,209,.8); }
.slot::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.45); box-shadow: 0 1px 0 rgba(255,255,255,.05); }
.slot b { display: block; font: inherit; color: #fff; will-change: transform; }
.slot b.z { color: rgba(246,246,243,.18); }
.slot b.r { font-family: "Noto Sans Runic", var(--mono); color: #C9BAFF; text-shadow: 0 0 18px rgba(150,120,255,.85); font-size: .8em; }
.odo .slot.hot, .odo.locked .slot.hot { box-shadow: inset 0 0 0 1.5px rgba(201,186,255,.7), 0 0 34px -4px rgba(120,90,255,.9); }
.cj-unit { font-size: 17px; color: var(--night-slate); margin-top: 2px; }
.cj-res { font: 700 22px/1.25 var(--body); letter-spacing: -.01em; color: var(--night-ink); margin-top: 6px; }
.cj-res span { color: #C9BAFF; }
.cj-sum { font-size: 12.5px; line-height: 1.5; color: var(--night-slate); opacity: .85; }
.cj-yn { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(185,166,255,.14); color: #D9CFFF; }

/* the controls: big, round, made for thumbs */
.cj-ctl { display: grid; gap: 0; }
.ctl { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid rgba(246,246,243,.1); }
.ctl-step { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ctl-t { font: 700 16px/1.3 var(--body); color: var(--night-ink); }
.ctl-h { font-size: 14px; line-height: 1.35; color: var(--night-slate); margin-top: 2px; }
.step { display: flex; align-items: center; gap: 4px; }
.rb { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; touch-action: manipulation;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(185,166,255,.35); color: #fff; transition: transform .12s ease, background .18s ease; -webkit-tap-highlight-color: transparent; }
.rb[data-step="1"] { background: var(--violet); box-shadow: 0 10px 24px -10px rgba(76,31,209,.9); }
.rb:hover { background: rgba(255,255,255,.14); }
.rb[data-step="1"]:hover { background: #5B2EE6; }
.rb:active { transform: scale(.88); }
.rb svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.rb.hint { animation: cjhint 1.6s ease-out infinite; }
@keyframes cjhint { 0% { box-shadow: 0 0 0 0 rgba(150,120,255,.75); } 100% { box-shadow: 0 0 0 18px rgba(150,120,255,0); } }
.stv { display: grid; place-items: center; min-width: 64px; font-size: 40px; line-height: 1; color: #fff; }
.stv > b { display: block; font: inherit; will-change: transform; }

.chips { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(185,166,255,.18); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.chip { position: relative; z-index: 1; min-height: 48px; border: 0; border-radius: 999px; background: transparent; color: var(--night-slate); font-size: 18px; cursor: pointer;
  transition: color .2s ease; -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.chip[aria-pressed="true"] { color: #fff; background: var(--violet); }
.chips.js .chip[aria-pressed="true"] { background: transparent; }
.thumb { display: none; }
.chips.js .thumb { display: block; position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: var(--violet);
  box-shadow: 0 8px 22px -8px rgba(76,31,209,1), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .42s cubic-bezier(.3,1.5,.5,1), width .42s cubic-bezier(.3,1.5,.5,1); }

.days { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 5px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.day { aspect-ratio: 1; min-height: 44px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; font: 700 16px/1 var(--body); color: var(--night-slate);
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(185,166,255,.22); transition: background .18s ease, color .18s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.day[aria-pressed="true"] { background: var(--violet); color: #fff; box-shadow: 0 8px 20px -10px rgba(76,31,209,1), inset 0 1px 0 rgba(255,255,255,.22); }
.day:active { transform: scale(.9); }

/* the hand-over line: the number rebuilds into it, then the night carries on into #monday */
/* the turn: Harris's memory card (the look of Variation A's ending), the visitor's hours counting down, the hand-over line */
.cj-kept { display: grid; grid-template-areas: "count" "card" "hand"; gap: 16px; padding: 130px 0 44px; }
.kp-count { grid-area: count; }
.kp-card { grid-area: card; margin: 0; min-width: 0; }
.kp-big { display: flex; align-items: flex-end; gap: 14px; }
.kp-big b { font: 400 64px/.9 var(--mono); color: #fff; min-width: 1.3ch; transition: color .4s ease; }
.kp-big b.zero { color: #5EE6C0; text-shadow: 0 0 26px rgba(94,230,192,.45); }
.kp-big span { font: 700 19px/1.2 var(--body); color: var(--night-ink); max-width: 8.5em; padding-bottom: 4px; }
.kp-from { margin-top: 10px; font-size: 15px; color: var(--night-slate); }
.kp-from b { color: #C9BAFF; font-size: 15px; }
.kp-card { border-radius: 22px; background: #0E0B22; color: #ECEAF6; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(185,166,255,.16), 0 40px 80px -40px rgba(76,31,209,.55); }
.kp-bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 9px; background: rgba(108,72,255,.16); font-size: 14px; }
.kp-av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.06); color: #5EE6C0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font: 700 13px/1 var(--body); }
.kp-wt { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-clock { font-size: 13px; border-radius: 999px; padding: 3px 10px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.kp-body { display: grid; gap: 10px; padding: 12px 12px 14px; }
.kp-ai { justify-self: start; max-width: 96%; padding: 9px 14px; border-radius: 18px 18px 18px 6px; background: rgba(255,255,255,.07); font-size: 14px; line-height: 1.4; }
.kp-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kf { position: relative; display: flex; align-items: center; min-height: 36px; padding: 0 14px 0 32px; border: 1.5px dashed rgba(255,255,255,.18); border-radius: 999px;
  font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; transition: background-color .3s, border-color .3s; }
.kf::before { content: ""; position: absolute; left: 11px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); transition: background-color .3s, box-shadow .3s; }
.kf.kept { border-style: solid; background: rgba(94,230,192,.08); border-color: rgba(94,230,192,.35); }
.kf.kept::before { background: #5EE6C0; box-shadow: none; }
.kf.kept::after { content: "kept"; margin-left: auto; padding-left: 10px; font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #5EE6C0; }
.kf.glow { animation: kpglow .9s ease-out; }
@keyframes kpglow { 0% { box-shadow: 0 0 0 0 rgba(94,230,192,.6); } 100% { box-shadow: 0 0 0 12px rgba(94,230,192,0); } }
.kp-meter { height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.kp-meter i { display: block; height: 100%; border-radius: inherit; background: #5EE6C0; transform-origin: 0 50%; transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.cj-hand { grid-area: hand; margin: 0; padding: 6px 0 0; font: 700 32px/1.08 var(--body); letter-spacing: -.03em; color: var(--night-ink); text-wrap: balance; }
.cj-hand em { font-style: normal; color: #C9BAFF; }
.cost + #monday { padding-top: 8px; }

@media (max-width: 959px) and (max-height: 700px) {
  .cost { padding-top: 40px; }
  .cost h2 { font-size: 26px; }
  .odo { font-size: 60px; }
  .cj-res { margin-top: 0; }
  .cj-meter { gap: 4px; }
  .ctl { padding: 12px 0; }
  .rb { width: 50px; height: 50px; }
  .chip { min-height: 44px; }
  .cj-in { gap: 16px; }
  .cj-res { font-size: 19px; }
  .cj-kept { padding: 150px 0 48px; gap: 16px; }
  .kp-big b { font-size: 60px; }
  .kf { min-height: 32px; font-size: 13px; }
  .kp-ai { font-size: 13px; padding: 7px 12px; }
  .cj-hand { font-size: 30px; }
}
@media (min-width: 720px) and (max-width: 959px) { .cj-ctl { max-width: 520px; } }
@media (min-width: 960px) {
  .cost { padding-top: 120px; }
  .cj-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "head ctl" "meter ctl"; column-gap: 72px; row-gap: 34px; align-items: start; }
  .cj-head { grid-area: head; }
  .cj-meter { grid-area: meter; }
  .cj-ctl { grid-area: ctl; align-self: center; padding: 14px 32px; border-radius: 32px; background: rgba(255,255,255,.04);
    box-shadow: inset 0 0 0 1px rgba(185,166,255,.16), 0 40px 80px -40px rgba(76,31,209,.6); }
  .cj-ctl .ctl:first-child { border-top: 0; }
  .ctl { padding: 22px 0; }
  .odo { font-size: 132px; gap: 12px; }
  .slot { border-radius: 26px; }
  .cj-unit { font-size: 20px; }
  .cj-res { font-size: 28px; }
  .cj-sum { font-size: 14px; }
  .cj-kept { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "count card" "hand card"; column-gap: 72px; row-gap: 28px; padding: 320px 0 200px; align-items: center; }
  .kp-count { align-self: end; }
  .cj-hand { align-self: start; padding: 0; font-size: 54px; }
  .cj-hand .hl { display: block; }
  .kp-big b { font-size: 120px; }
  .kp-big span { font-size: 22px; }
  .kp-from, .kp-from b { font-size: 17px; }
  .kp-bar { height: 48px; padding: 0 16px 0 12px; }
  .kp-body { gap: 12px; padding: 18px; }
  .kp-ai { font-size: 16px; padding: 11px 16px; }
  .kf { min-height: 44px; font-size: 16px; padding-left: 38px; }
  .kf::before { left: 14px; width: 12px; height: 12px; margin-top: -6px; }
  .day { font-size: 17px; }
}
.nw { white-space: nowrap; }

/* the lock (Brief 2): the number holds; tiles closed with a lit edge */
.odo .slot { transition: box-shadow .5s ease; }
.odo.locked .slot { box-shadow: inset 0 0 0 1.5px rgba(201,186,255,.55), 0 0 0 4px rgba(120,90,255,.12), 0 18px 40px -18px rgba(120,90,255,.95); }

/* the rune thread (Brief 2): headings remembered as they arrive, one canvas for the glyphs in flight (assets/runes.js) */
.rt-cv { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 38; pointer-events: none; }
.night .rt .fc > b.g { color: #B9A6FF; }
.rt .fc > b.g { font-weight: 400; }
#offerh.rt-lit { animation: rtlit 1.6s ease-out; }
@keyframes rtlit { 0% { text-shadow: 0 0 0 rgba(120,90,255,0); } 30% { text-shadow: 0 0 30px rgba(120,90,255,.55); } 100% { text-shadow: 0 0 0 rgba(120,90,255,0); } }
.final .pill.rt-settle { animation: rtsettle 2.6s ease-out; }
@keyframes rtsettle { 0% { box-shadow: 0 0 0 0 rgba(120,90,255,.55); } 35% { box-shadow: 0 0 0 12px rgba(120,90,255,0), 0 0 46px rgba(120,90,255,.55); } 100% { box-shadow: 0 0 0 0 rgba(120,90,255,0), 0 0 0 rgba(120,90,255,0); } }
html.cj .isteps li.st-done .ic { animation: rtkept .6s ease-out; }
@keyframes rtkept { 0% { transform: scale(.6); box-shadow: 0 0 0 0 rgba(76,31,209,.5); } 60% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(76,31,209,0); } 100% { transform: scale(1); } }
#price .fc > b.g { color: var(--violet); }

/* 24 Oct: seven 44px days plus gaps (338px) overflowed 320px phones sideways; below 375px the days share the width */
@media (max-width: 374px) { .days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } }