/* /story — the playground. Era styling shifts as you scroll. */

body.story{background:#0E0C0A}

/* progress + chapter rail */
#railbar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--pink);z-index:1000;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .12s linear}
#rail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:850;
  mix-blend-mode:difference;color:#fff;pointer-events:none}
#railnum{font-family:var(--slab);font-size:52px;line-height:.8;letter-spacing:-.03em;opacity:.9}
#raillab{font-family:var(--mono);font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;
  writing-mode:vertical-rl;margin-top:12px;opacity:.75}
@media(max-width:1180px){#rail{display:none}}

/* chapter shell */
.ch{
  --bg:#111;--fg:#F4EFE6;--acc:#F2B807;--muted:rgba(244,239,230,.68);
  background:var(--bg);color:var(--fg);position:relative;overflow:hidden;
  padding:110px 0 118px;
}
.ch .inner{max-width:760px;margin:0 auto;padding:0 26px;position:relative;z-index:2}
.ch .ghost{
  position:absolute;right:-2vw;top:2vw;font-family:var(--slab);font-size:clamp(180px,30vw,420px);
  line-height:.72;color:var(--acc);opacity:.11;pointer-events:none;user-select:none;z-index:1;
}
.ch .chip{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;
  border:1.5px solid var(--acc);color:var(--acc);border-radius:999px;padding:6px 13px 5px;margin-bottom:22px;
}
.ch h2{font-family:var(--serif);font-size:clamp(34px,6.2vw,62px);line-height:.98;letter-spacing:-.035em;margin-bottom:34px}
.ch h2 em{font-style:italic;color:var(--acc)}
/* a gloss for a foreign-language headline — sits under the h2, quiet, not a subtitle */
.ch .trans{margin:-24px 0 32px;font-family:var(--mono);font-size:14px;line-height:1.5;color:var(--muted);
  max-width:620px}
.ch .trans span{display:inline-block;font-size:10px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--acc);border:1px solid var(--acc);border-radius:999px;padding:2px 8px 1px;margin-right:9px;
  vertical-align:2px;opacity:.85}
/* the chapter body — prose, not a form. no labels, no slots. */
.prose{max-width:620px}
.prose p{font-size:18.5px;line-height:1.68;color:var(--muted);margin-bottom:19px}
.prose p:last-child{margin-bottom:0}
.prose p em{font-style:italic}
/* the opening line of a chapter carries a little more weight */
.prose p.lede{font-size:21px;line-height:1.56;color:var(--fg)}
.prose p.lede::first-letter{font-family:var(--serif);font-size:1.28em;font-weight:600;color:var(--acc)}
/* a line that gets to stand by itself and hit */
.prose p.punch{font-family:var(--serif);font-size:27px;line-height:1.18;letter-spacing:-.02em;
  color:var(--fg);font-weight:600;margin:26px 0 24px}
.prose p.punch em{font-style:italic;color:var(--acc)}
.prose strong{color:var(--fg);font-weight:600}
.ch.light{--fg:#16130F;--muted:rgba(22,19,15,.76)}

/* the rule card */
.rule{
  margin-top:44px;background:var(--acc);color:#16130F;padding:26px 28px 28px;max-width:560px;
  transform:rotate(-1.1deg);box-shadow:14px 14px 0 rgba(0,0,0,.28);position:relative;
}
.rule::before{content:"✦";font-size:13px;display:block;margin-bottom:10px;opacity:.5}
.rule p{font-family:var(--serif);font-size:25px;line-height:1.22;letter-spacing:-.02em;font-weight:600}
.rule small{display:block;font-family:var(--sans);font-size:14.5px;line-height:1.5;margin-top:13px;opacity:.72}

/* photo */
.shot{margin-top:40px;max-width:440px;border:6px solid #fff;box-shadow:0 18px 34px rgba(0,0,0,.4);
  transform:rotate(1.4deg)}
.shot img{width:100%}
.shot span{display:block;font-family:'Caveat',cursive;font-size:19px;color:#16130F;background:#fff;padding:7px 10px 9px}

/* the gap callout (chapter 10) */
.gap{margin-top:34px;border:2px dashed var(--acc);padding:20px 22px;max-width:560px}
.gap b{font-family:var(--mono);font-size:10.5px;letter-spacing:2.4px;color:var(--acc);display:block;margin-bottom:9px}
.gap p{font-size:16.5px;color:var(--muted);line-height:1.6}

/* eras */
.e1{--bg:linear-gradient(170deg,#123227 0%,#1E4433 45%,#6B4A18 100%);--acc:#F0C24A}
.e2{--bg:#1B6E3C;--acc:#FFFFFF}
.e2 .rule{color:#16130F}
.e3{--bg:#DCD8CF;--acc:#B4302A}
.e3 .rule{color:#FBF6EE}
.e4{--bg:linear-gradient(160deg,#D9622A 0%,#E89A3C 60%,#F3C77A 100%);--acc:#2A1A10}
.e4 .rule{color:#F6EFE4}
.e5{--bg:#F2F4F7;--acc:#0F62FE}
.e5 .rule{color:#fff}
.e6{--bg:#20242A;--acc:#FFC400}
.e7{--bg:#0B2542;--acc:#5FD0F5;
  background-image:linear-gradient(rgba(95,208,245,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(95,208,245,.07) 1px,transparent 1px);background-size:34px 34px}
.e8{--bg:#15130F;--acc:#F2B807}
.e9{--bg:linear-gradient(160deg,#2B1B47 0%,#4A2A6B 100%);--acc:#7FE0A8}
.e10{--bg:#F4EFE6;--acc:#00A6A6}
.e10 .rule{color:#fff}
.e11{--bg:linear-gradient(175deg,#2B2244 0%,#7A4A6B 55%,#E5896A 100%);--acc:#FFE7C7}

.ch.e3,.ch.e5,.ch.e10{--fg:#16130F;--muted:rgba(22,19,15,.74)}

/* story intro + outro */
.storyhero{background:#0E0C0A;color:var(--paper);padding:120px 0 90px;text-align:center}
.storyhero h1{font-size:clamp(44px,9vw,104px);line-height:.92;letter-spacing:-.045em}
.storyhero p{max-width:600px;margin:26px auto 0;font-size:19px;line-height:1.62;color:#B6AC9B}
.storyhero .eyebrow{color:#B6AC9B;justify-content:center}
.scrollcue{font-family:var(--mono);font-size:11px;letter-spacing:2.4px;color:#7C7466;margin-top:46px}

footer.dark{background:#0E0C0A;color:#B6AC9B;margin-top:0}
footer.dark::before{background:linear-gradient(90deg,transparent,#2E2924 22%,#2E2924 78%,transparent)}
footer.dark .sig{color:var(--paper)}
footer.dark .sig small,footer.dark .note{color:#8C8474}
footer.dark .links a{color:#B6AC9B}
footer.dark a{color:var(--paper)}

/* ---- novelty check (typographic; replaces the unverified event photo) ---- */
.bigcheck{background:linear-gradient(180deg,#fdfcf7,#f4f1e6);border:1px solid rgba(0,0,0,.10);
  border-left:9px solid #7ED957;border-radius:10px;padding:20px 22px 16px;margin:30px 0 8px;
  box-shadow:0 14px 40px -22px rgba(0,0,0,.5);transform:rotate(-.7deg);max-width:620px}
.bc-top{display:flex;justify-content:space-between;font:500 11px/1 'IBM Plex Mono',monospace;
  letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.bc-line{margin:14px 0 12px;font-family:'Caveat',cursive;font-size:clamp(26px,6vw,40px);line-height:1.15;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.bc-line em{font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;opacity:.5}
.bc-line b{font-weight:600}
.bc-line s{text-decoration:none;margin-left:auto;border:1.5px solid rgba(0,0,0,.25);border-radius:6px;
  padding:2px 12px;font-size:.8em}
.bc-foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font:500 11px/1.5 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.55;
  border-top:1px solid rgba(0,0,0,.12);padding-top:10px}
.bc-sig{font-family:'Caveat',cursive;font-size:19px;letter-spacing:0;text-transform:none;opacity:.85}
.ch .cap{font:400 13px/1.5 'IBM Plex Mono',monospace;opacity:.55;margin:0 0 26px;max-width:620px}
@media(max-width:560px){
  .bigcheck{transform:none;padding:16px 15px 13px;border-left-width:7px}
  .bc-line s{margin-left:0}
}


/* ---- take a rule: the interaction on this page ---- */
.rule{position:relative}
.take{display:inline-flex;align-items:center;gap:7px;margin-top:18px;border:0;
  background:rgba(0,0,0,.11);color:inherit;font-family:var(--mono);font-size:11px;
  letter-spacing:1.7px;text-transform:uppercase;padding:9px 14px;border-radius:999px;
  cursor:pointer;opacity:.75;transition:opacity .2s,background .2s}
.take:hover{opacity:1;background:rgba(0,0,0,.19)}
.rule.taken .take{background:rgba(0,0,0,.84);color:#F7F2E7;opacity:1}
#satchel{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:900;
  background:#16130F;color:#F7F2E7;border:1.5px solid #F2B807;border-radius:999px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:1.3px;padding:11px 16px;cursor:pointer;
  opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
#satchel.show{opacity:1;transform:none;pointer-events:auto}
#kept{background:#0E0C0A;color:#F4EFE6;padding:76px 0 88px}
#kept .inner{max-width:760px;margin:0 auto;padding:0 26px}
#kept h3{font-family:var(--serif);font-size:clamp(27px,5.4vw,42px);letter-spacing:-.032em;
  line-height:1.04;margin-bottom:12px}
#kept .sub{color:#B6AC9B;font-size:16.5px;line-height:1.62;max-width:560px}
#kept ol{margin-top:28px;list-style:none;padding:0}
#kept li{font-family:var(--serif);font-size:20px;line-height:1.34;padding:15px 0 15px 44px;
  border-bottom:1px solid #221E1A;position:relative}
#kept li::before{content:"\2726";position:absolute;left:8px;top:17px;color:#F2B807;font-size:13px}
#kept li small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:#7C7466;margin-top:8px}
#kept .empty{color:#7C7466;font-family:var(--mono);font-size:12.5px;line-height:1.7;margin-top:22px}
@media(max-width:560px){#kept{padding:56px 0 66px}#kept li{font-size:18px;padding-left:38px}
  #satchel{font-size:11px;padding:10px 13px}}

/* ---- inline asides: tap a phrase, get the margin note ---- */
.aside{display:inline;border:0;padding:0;background:none;font:inherit;color:inherit;text-align:left;
  cursor:pointer;border-bottom:1.5px dotted var(--acc);-webkit-tap-highlight-color:transparent}
.aside::after{content:"\2726";font-size:.6em;vertical-align:.5em;color:var(--acc);margin-left:2px;
  transition:transform .2s}
.aside:hover{border-bottom-style:solid}
.aside.on{border-bottom:2.5px solid var(--acc);color:var(--fg)}
.aside.on::after{display:inline-block;transform:rotate(90deg)}
.asidenote{display:block;font-family:'Caveat',cursive;font-size:21px;line-height:1.34;color:var(--acc);
  border-left:2px solid var(--acc);padding:2px 0 2px 13px;margin:13px 0 4px 6px;max-width:460px;
  animation:asidein .26s ease both}
@keyframes asidein{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
html[data-motion="none"] .asidenote{animation:none}
.ch.e5 .asidenote,.ch.e10 .asidenote{color:#0B6E6E}
.ch.e5 .asidenote{color:#0F4FBE}

/* ---- chapter ten: the route planner ---- */
.rvmap{margin:38px 0 8px;max-width:620px;background:#fff;border:1px solid rgba(0,0,0,.10);
  border-radius:14px;padding:16px 16px 14px;box-shadow:0 16px 40px -26px rgba(0,0,0,.55)}
.rv-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:1.7px;text-transform:uppercase}
.rv-head b{color:#16130F}
.rv-head span{opacity:.5}
.rv-tabs{display:flex;gap:8px;margin:13px 0 4px}
.rv-tabs button{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  border:1.5px solid rgba(0,0,0,.16);background:none;color:#16130F;border-radius:999px;
  padding:8px 13px;cursor:pointer;opacity:.62;transition:.2s}
.rv-tabs button:hover{opacity:1}
.rv-tabs button.on{background:#16130F;border-color:#16130F;color:#F7F2E7;opacity:1}
.rv-stage{position:relative;height:132px;margin-top:10px;overflow:hidden}
.rv-terrain{position:absolute;inset:0;width:100%;height:100%}
.rv-terrain path{fill:rgba(0,166,166,.16);stroke:#00A6A6;stroke-width:2.4;
  transition:opacity .45s ease}
.rvmap .t-hill{opacity:0}
.rvmap.hill .t-flat{opacity:0}
.rvmap.hill .t-hill{opacity:1}
.rv-van{position:absolute;font-size:30px;line-height:1;left:6%;bottom:22%;
  transition:left .9s cubic-bezier(.4,.1,.3,1),bottom .9s cubic-bezier(.4,.1,.3,1),transform .5s}
.rvmap .rv-van{left:78%;bottom:23%;transform:none}
.rvmap.hill .rv-van{left:34%;bottom:44%;transform:rotate(-27deg);animation:shudder .28s linear infinite}
@keyframes shudder{0%,100%{margin-left:0}50%{margin-left:2.5px}}
html[data-motion="none"] .rvmap.hill .rv-van{animation:none}
.rv-pin{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:1.6px;
  text-transform:uppercase;color:rgba(22,19,15,.42);bottom:38px}
.rv-pin-a{right:8px}
.rv-pin-b{left:8px}
.rvmap.hill .rv-pin-b{opacity:.35}
.rv-say{font-size:15.5px;line-height:1.55;color:rgba(22,19,15,.72);margin-top:6px;min-height:48px}
@media(max-width:560px){
  .rvmap{padding:13px 12px 11px}
  .rv-stage{height:108px}
  .rv-van{font-size:25px}
  .rv-say{font-size:14.5px}
  .asidenote{font-size:19px}
}