/* The main page as the town's own game UI, scrolled: a sunny, daytime town-sim skin. Big flat fields of sky blue and
   grass green, tin red, sunflower yellow, bolt grey and roof brown; pixel windows with stepped corners and hard
   borders; wooden signboards for headers; shop windows under striped awnings for the price lists; a day clock on
   every step; the bolt as the coin everywhere. Tiles and icons come from js/skin.js as CSS variables. */
:root {
  --sky: #7fd0f0; --sky-l: #a5e0f7; --sky-d: #4aa6cf; --grass: #6cc04a; --grass-d: #3f8a2a; --red: #e2402f; --red-d: #a82a1c; --sun: #ffd23f; --sun-d: #d99a12;
  --bolt-c: #6f7a86; --bolt-d: #49525c; --roof: #7a4a2a; --roof-d: #4f2e18; --ink: #2a1d14; --pane: #f1fbff; --pane-d: #c9e6f3; --white: #ffffff;
  --px: 'DotGothic16', 'Tiny5', monospace; --num: 'Micro 5', 'Tiny5', monospace;
  /* a 4px stepped corner for every window */
  --step: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sky); color: var(--ink); font: 400 18px/1.6 var(--px); overflow-x: hidden; }
a { color: #14508c; text-decoration-thickness: 2px; text-underline-offset: 3px; }
h2, h3, p { margin: 0; font-weight: 400; }
b { font-weight: 400; }
main { overflow-x: clip; }
/* numbers: the little counter face, on a yellow tag */
.n { font: 400 1.5em/.8 var(--num); background: var(--sun); color: var(--ink); padding: 0 5px 1px; box-shadow: 0 0 0 2px var(--ink); margin: 0 3px; white-space: nowrap; display: inline-block; vertical-align: 1px; }
.n span { font: inherit; }

/* ---- the pixel window ---- */
.win { background: var(--pane); border: 4px solid var(--ink); box-shadow: inset 0 -4px 0 var(--pane-d), inset 0 4px 0 var(--white); clip-path: var(--step); }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; padding: 6px 14px 5px; border-bottom: 4px solid var(--ink); font: 400 18px/1.3 var(--px); letter-spacing: 1px; }
.bar.red { background: var(--red); color: var(--white); box-shadow: inset 0 4px 0 #f0705f; }
.bar.sun { background: var(--sun); color: var(--ink); box-shadow: inset 0 4px 0 #ffe88a; }
.bar.sky { background: var(--sky-d); color: var(--white); box-shadow: inset 0 4px 0 var(--sky); }
.bar.grey { background: var(--bolt-c); color: var(--white); box-shadow: inset 0 4px 0 #94a0ac; }
.bar b, .bar b span { font: 400 1.45em/.7 var(--num); }
.wbtn { width: 16px; height: 16px; background: var(--white); box-shadow: 0 0 0 3px var(--ink), inset -4px -4px 0 #c9d2da; flex: none; }
.bolt { display: inline-block; width: 24px; height: 24px; background: var(--bolt) center / contain no-repeat; image-rendering: pixelated; flex: none; }

/* ---- wooden signboards for the headers ---- */
.sign { position: relative; display: inline-block; margin-bottom: 26px; }
.sign span { position: relative; z-index: 1; display: block; padding: 12px 26px 13px; background: var(--roof) var(--t-plank) 0 0 / 128px 48px; image-rendering: pixelated; border: 4px solid var(--roof-d); box-shadow: inset 0 -4px 0 rgba(42, 29, 20, .35); clip-path: var(--step);
  font: 400 clamp(25px, 3.4vw, 42px)/1.15 var(--px); color: #fff6c9; text-shadow: 3px 3px 0 var(--roof-d); letter-spacing: 1px; }
.sign::before, .sign::after { content: ''; position: absolute; bottom: -26px; width: 14px; height: 34px; background: var(--roof); box-shadow: inset 4px 0 0 #9a6238, inset -4px 0 0 var(--roof-d), 0 0 0 0 var(--ink); }
.sign::before { left: 30px; } .sign::after { right: 30px; }
.sign.big span { font-size: clamp(30px, 4.6vw, 58px); padding: 14px 34px 16px; }
.lede { font-size: 18px; line-height: 1.6; max-width: 62ch; padding: 14px 18px 16px; }

/* ---- chunky pixel buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 400 21px/1 var(--px); letter-spacing: 1px; text-decoration: none; cursor: pointer; color: var(--ink);
  padding: 12px 18px 12px; border: 4px solid var(--ink); border-bottom-width: 10px; background: var(--sun); box-shadow: inset 4px 4px 0 #ffe88a, inset -4px -4px 0 var(--sun-d); }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(6px); border-bottom-width: 4px; box-shadow: inset 4px 4px 0 var(--sun-d); }
.btn.go { background: var(--red); color: var(--white); box-shadow: inset 4px 4px 0 #f0705f, inset -4px -4px 0 var(--red-d); }
.btn.go:active { box-shadow: inset 4px 4px 0 var(--red-d); }
.btn.alt { background: var(--white); box-shadow: inset 4px 4px 0 var(--white), inset -4px -4px 0 #c9d2da; }
.btn.small { font-size: 17px; padding: 8px 12px; border-bottom-width: 8px; }
.btn.big { font-size: 28px; padding: 16px 26px; }
.btn.big .bolt { width: 36px; height: 36px; }

/* ================= title screen ================= */
.hero { position: relative; height: 100svh; min-height: 660px; overflow: hidden; background: #1c2619; border-bottom: 4px solid var(--ink); }
.hero-world { position: absolute; inset: 0; }
.hero-world canvas { display: block; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
.lid { position: absolute; left: clamp(16px, 4.4vw, 72px); bottom: clamp(60px, 10vh, 104px); width: min(560px, calc(100% - 32px)); }
.lid > :not(.bar) { margin-left: 22px; margin-right: 22px; }
/* on the dark game picture the two hero windows get a white outer edge so the frame reads */
.hero .win { border-color: var(--white); box-shadow: inset 0 0 0 4px var(--ink); padding: 4px; }
.hero .win .bar { border-top: 0; }
.lid .bar { font-size: 17px; }
.lid .bar span:first-child { margin-right: auto; }
.title { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.logo-mark { width: 172px; height: 172px; flex: none; opacity: 0; }
.logo-mark.ready { opacity: 1; }
.logotype { margin: 0; font: 400 clamp(96px, 9.6vw, 132px)/.86 var(--px); color: var(--red); text-shadow: 6px 6px 0 var(--ink); letter-spacing: 2px; overflow-wrap: anywhere; }
.token { margin-top: 22px; font: 400 20px/1.2 var(--px); letter-spacing: 2px; background: var(--sun); display: inline-block; padding: 3px 9px 4px; box-shadow: 0 0 0 3px var(--ink); white-space: nowrap; }
.says { margin-top: 14px; font-size: 18px; line-height: 1.55; }
.lid-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.lid-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; margin-bottom: 22px; align-items: stretch; }
.xbtn, .ca { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 3px solid var(--ink); background: var(--ink); color: var(--white); font: 400 16px var(--px); text-decoration: none; cursor: pointer; }
.xbtn svg { width: 15px; height: 15px; }
.xbtn:hover { background: var(--bolt-d); }
.ca { background: var(--white); color: var(--ink); padding: 0 10px 0 0; }
.ca .k { align-self: stretch; display: flex; align-items: center; padding: 0 9px; background: var(--bolt-c); color: var(--white); border-right: 3px solid var(--ink); }
.ca .c { color: var(--red-d); min-width: 52px; text-align: left; }
.ca.done .c { color: var(--grass-d); }
.ca:hover { background: #fff6c9; }
.slip { position: absolute; top: clamp(14px, 3vh, 30px); right: clamp(14px, 3vw, 44px); width: min(410px, calc(100% - 28px)); }
.slip .bar { font-size: 16px; justify-content: flex-start; }
.slip .bar span { margin-left: auto; font: 400 24px/.7 var(--num); }
.lamp { width: 10px; height: 10px; background: var(--red); box-shadow: 0 0 0 2px var(--ink); animation: lamp 1.2s steps(2, jump-none) infinite; }
@keyframes lamp { 50% { background: var(--white); } }
.slip-nums { padding: 8px 14px 0; font-size: 16px; line-height: 1.5; }
.slip-nums b, .slip-nums b span { font: 400 26px/.6 var(--num); }
.slip-nums .sep { color: var(--bolt-c); margin: 0 2px; }
.slip-last { margin: 6px 14px 0; padding: 6px 0 10px; border-top: 3px dotted var(--bolt-c); font-size: 15.5px; line-height: 1.4; min-height: 34px; }
.slip-last b { color: var(--red-d); }
.unfold { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 5px; background: var(--sun); border: 3px solid var(--ink); color: var(--ink); font: 400 16px var(--px); text-decoration: none; white-space: nowrap; }
.unfold b { animation: nudge 1s steps(2, jump-none) infinite; display: inline-block; }
@keyframes nudge { 50% { transform: translateY(3px); } }

/* ================= a day in town: the sky field ================= */
.day, .wages, .rules, .send, .paper { position: relative; }
.day { background: var(--sky) var(--t-cloud) 0 30px / 448px 192px; image-rendering: pixelated; padding: 64px clamp(16px, 4vw, 56px) 96px; }
.day > * { max-width: 1180px; margin-left: auto; margin-right: auto; image-rendering: auto; }
.day::after, .wages::after, .rules::after, .send::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: 0 0 / 16px 32px repeat-x; image-rendering: pixelated; pointer-events: none; }
.day::after { background-image: var(--t-di-grass); }
.leaf-head { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 10px 40px; align-items: start; padding-bottom: 26px; }
.fig { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 34px; align-items: center; padding: 30px 0; }
.fig.flip .plate { order: 2; }
/* the scenes sit in cut-scene frames */
.plate { position: relative; margin: 0; padding: 6px; background: var(--bolt-c); border: 4px solid var(--ink); box-shadow: inset 4px 4px 0 #94a0ac, inset -4px -4px 0 var(--bolt-d); clip-path: var(--step); }
.plate canvas { display: block; width: 100%; aspect-ratio: 288 / 176; image-rendering: pixelated; box-shadow: 0 0 0 3px var(--ink); }
.calls { position: absolute; left: 6px; top: 6px; width: calc(100% - 12px); aspect-ratio: 288 / 176; pointer-events: none; shape-rendering: crispEdges; }
.calls line { stroke: var(--white); stroke-width: 1; }
.calls rect { fill: var(--red); stroke: var(--white); stroke-width: 1.2; }
.calls text { fill: var(--white); font: 400 9px var(--px); text-anchor: middle; }
.plate figcaption { padding: 9px 8px 3px; font-size: 16px; line-height: 1.4; color: var(--white); }
.how { position: relative; padding: 0 0 12px; min-width: 0; }
.clock { display: flex; align-items: center; gap: 12px; padding: 6px 14px 4px; background: var(--sun); border-bottom: 4px solid var(--ink); box-shadow: inset 0 4px 0 #ffe88a; }
.clock::before { content: ''; width: 33px; height: 33px; background: var(--i-sun) center / contain no-repeat; image-rendering: pixelated; flex: none; }
.clock.night { background: #27364a; color: var(--white); box-shadow: inset 0 4px 0 #3b4f6a; } .clock.night::before { background-image: var(--i-moon); }
.clock b { font: 400 44px/.7 var(--num); letter-spacing: 1px; padding-bottom: 4px; }
.pips { margin-left: auto; display: flex; gap: 5px; }
.pips i { width: 14px; height: 14px; background: var(--white); box-shadow: 0 0 0 3px var(--ink); margin: 3px; }
.pips i.done { background: var(--bolt-c); } .pips i.now { background: var(--red); }
.how h3 { display: flex; align-items: center; gap: 14px; margin: 16px 18px 0; font: 400 27px/1.2 var(--px); }
.how .no { flex: none; width: 46px; height: 46px; display: grid; place-items: center; background: var(--red); color: var(--white); font: 400 46px/.7 var(--num); padding-bottom: 5px; box-shadow: 0 0 0 4px var(--ink), inset -4px -4px 0 var(--red-d); }
.how dl { margin: 14px 18px 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.how dt { justify-self: start; margin: 10px 0 4px; padding: 0 8px 1px; font-size: 15px; letter-spacing: 1px; box-shadow: 0 0 0 2px var(--ink); background: var(--sun); }
.how dt[data-k="your droid"] { background: var(--red); color: var(--white); } .how dt[data-k="on the street"] { background: var(--sky-d); color: var(--white); } .how dt[data-k="limits"] { background: var(--bolt-c); color: var(--white); }
.how dd { margin: 0; font-size: 17.5px; line-height: 1.55; }
.how dd i { font-style: normal; color: var(--red-d); background: #ffe9a8; padding: 0 4px; }
.pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; padding: 30px 0; align-items: start; }
.pair .fig { display: block; padding: 0; }
.pair .how { margin-top: 16px; }
.f4 { margin-top: 48px; }
.f1 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.f5 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.swatches { margin: 14px 18px 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 0; align-items: center; }
.swatches p { font-size: 15px; }
.swatches div { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches i { width: 22px; height: 22px; box-shadow: 0 0 0 3px var(--ink), inset 4px 4px 0 rgba(255, 255, 255, .3); }
.swatches .hats span { font-size: 15px; box-shadow: 0 0 0 2px var(--ink); padding: 0 6px 1px; background: var(--white); }

/* ================= the pay office: the grass field ================= */
.wages { background: var(--grass) var(--t-grass) 0 0 / 144px 144px; image-rendering: pixelated; }
.wages::after { background-image: var(--t-di-sun); }
.wages-in { max-width: 1180px; margin: 0 auto; padding: 56px clamp(16px, 4vw, 56px) 92px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 40px; align-items: start; image-rendering: auto; }
.terms { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.terms > div { background: var(--sun); border: 4px solid var(--ink); box-shadow: inset 4px 4px 0 #ffe88a, inset -4px -4px 0 var(--sun-d); padding: 10px 14px 12px; clip-path: var(--step); }
.terms span { display: block; font-size: 15px; letter-spacing: 1px; color: var(--roof-d); }
.terms b { display: block; font: 400 50px/.72 var(--num); margin: 6px 0 8px; }
.terms b.w { font: 400 27px/1.15 var(--px); margin: 4px 0 6px; }
.terms small { display: block; font-size: 15.5px; line-height: 1.4; }
.today { margin-top: 14px; font-size: 16.5px; padding: 10px 16px 12px; } .today b { font: 400 1.5em/.7 var(--num); }
.shopfront { display: grid; gap: 26px; }
.card { background: var(--pane); color: var(--ink); border: 4px solid var(--ink); box-shadow: inset 0 -4px 0 var(--pane-d); padding: 0 18px 18px; clip-path: var(--step); min-width: 0; }
.awning { height: 40px; margin: 0 -18px 12px; background: 0 0 / 64px 40px repeat-x; image-rendering: pixelated; }
.awning.red { background-image: var(--t-awn-red); } .awning.sun { background-image: var(--t-awn-sun); }
.card h3 { font: 400 24px/1.2 var(--px); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.card h3 span { font-size: 15.5px; color: var(--bolt-d); }
.paytbl { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 16.5px; }
.paytbl th { text-align: left; font-size: 14.5px; color: var(--bolt-d); padding: 4px 6px 4px 0; border-bottom: 4px solid var(--ink); }
.paytbl td { padding: 5px 6px 5px 0; border-bottom: 3px dotted var(--pane-d); }
.paytbl .r { text-align: right; padding-right: 0; white-space: nowrap; }
.paytbl td.r b { font: 400 34px/.6 var(--num); color: var(--red-d); padding-left: 30px; background: var(--bolt) 0 60% / 22px 22px no-repeat; image-rendering: pixelated; }
.prices { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.prices > div { border: 4px solid var(--ink); background: var(--white); padding: 8px 10px 10px; position: relative; box-shadow: inset -4px -4px 0 #d8e3ea; }
.prices span { display: block; font-size: 14.5px; color: #14508c; }
.prices b { display: block; font-size: 19px; }
.prices em { display: inline-block; font: 400 44px/.7 var(--num); font-style: normal; color: var(--red-d); padding: 0 0 6px 34px; margin: 6px 0 2px; background: var(--bolt) 0 40% / 26px 26px no-repeat; image-rendering: pixelated; }
.prices small { display: block; font-size: 14.5px; line-height: 1.35; color: var(--bolt-d); }

/* ================= rules: the sunflower field ================= */
.rules { background: var(--sun); }
.rules::after { background-image: var(--t-di-red); }
.rules-in { max-width: 1180px; margin: 0 auto; padding: 56px clamp(16px, 4vw, 56px) 92px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.glance ol { margin: 0; padding: 8px 18px 10px; list-style: none; }
.glance li { position: relative; padding: 9px 0 10px 38px; border-top: 3px dotted var(--pane-d); font-size: 17.5px; line-height: 1.5; }
.glance li:first-child { border-top: 0; }
.glance li::before { content: ''; position: absolute; left: 0; top: 12px; width: 24px; height: 24px; background: var(--bolt) center / contain no-repeat; image-rendering: pixelated; }
.glance .more { margin-top: 14px; font-size: 17px; }
.docket { padding: 0 0 16px; min-width: 0; }
.docket > :not(.bar) { margin-left: 18px; margin-right: 18px; }
.docket .bar { font-size: 16px; }
.docket h3 { font: 400 26px/1.2 var(--px); margin-top: 14px; }
.docket .st { margin-top: 8px; font-size: 17px; line-height: 1.5; }
.docket pre { margin-top: 12px; margin-bottom: 0; padding: 10px 12px; background: #1f2a33; color: #d8f1ff; border: 4px solid var(--ink); font: 400 15px/1.5 var(--px); white-space: pre-wrap; word-break: break-word; max-height: 230px; overflow: auto; }
.docket .fmt { margin-top: 9px; font-size: 16px; line-height: 1.45; }
.docket .fmt b { font-size: 15.5px; background: var(--sky-d); color: var(--white); padding: 0 6px 1px; margin-right: 6px; box-shadow: 0 0 0 2px var(--ink); }
.docket code { font: 400 15.5px var(--px); word-break: break-all; }
.docket-foot { margin-top: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 15px; color: var(--bolt-d); }

/* ================= send your droid: the tin red field ================= */
.send { background: var(--red); }
.send::after { background-image: var(--t-di-roof); }
.send-in { max-width: 1180px; margin: 0 auto; padding: 56px clamp(16px, 4vw, 56px) 92px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px 36px; align-items: start; }
.send-head { grid-column: 1 / -1; }
.send-head .lede { background: var(--pane); border: 4px solid var(--ink); box-shadow: inset 0 -4px 0 var(--pane-d); clip-path: var(--step); }
.telegram { min-width: 0; background: #1f2a33; box-shadow: none; }
.telegram pre { margin: 0; padding: 14px 18px 4px; color: #d8f1ff; font: 400 17px/1.6 var(--px); white-space: pre-wrap; word-break: break-word; }
.tg-foot { margin: 0; padding: 10px 18px 16px; display: flex; gap: 16px; align-items: center; font-size: 16px; } .tg-foot a { color: var(--sun); }
.calls-list { grid-column: 1; }
.endpoints { list-style: none; margin: 0; padding: 4px 18px 10px; }
.endpoints li { display: grid; grid-template-columns: 52px minmax(0, 190px) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 0; border-top: 3px dotted var(--pane-d); font-size: 16px; } .endpoints li:first-child { border-top: 0; }
.endpoints i { font-style: normal; font-size: 14px; background: var(--grass); color: var(--ink); padding: 0 5px 1px; box-shadow: 0 0 0 2px var(--ink); justify-self: start; }
.endpoints code { font: 400 16px var(--px); color: var(--red-d); }
.coupon { grid-column: 2; grid-row: 2 / span 2; min-width: 0; padding-bottom: 18px; }
.coupon form { padding: 0 18px; }
.field label { display: block; font-size: 15.5px; margin: 14px 0 5px; }
.field input { width: 100%; height: 46px; border: 4px solid var(--ink); background: var(--white); color: var(--ink); padding: 0 10px; font: 400 17px var(--px); border-radius: 0; box-shadow: inset 4px 4px 0 #d8e3ea; }
.field input:focus { outline: 4px solid var(--sun); outline-offset: 0; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.err { color: var(--red-d); font-size: 16px; }
.joined .line { font-size: 16.5px; margin-top: 4px; } .joined .line b { color: var(--red-d); }
.joined .pre { margin: 10px 0 0; padding: 10px; background: #1f2a33; color: #d8f1ff; border: 4px solid var(--ink); font: 400 15px/1.5 var(--px); white-space: pre-wrap; word-break: break-word; }
.fine { font-size: 15px; color: var(--bolt-d); }

/* ================= the town notice board: planks ================= */
.paper { background: var(--roof) var(--t-board) 0 0 / 192px 64px; image-rendering: pixelated; }
.paper-in { max-width: 1180px; margin: 0 auto; padding: 56px clamp(16px, 4vw, 56px) 64px; image-rendering: auto; }
.masthead { text-align: center; }
.ears, .strap { display: flex; justify-content: center; gap: 10px 14px; flex-wrap: wrap; font-size: 16px; }
.ears span, .strap > span { background: var(--pane); padding: 3px 10px 4px; box-shadow: 0 0 0 3px var(--ink); }
.ears span span, .strap span span { background: none; padding: 0; box-shadow: none; }
.strap { margin-top: 14px; } .strap > span { background: var(--sun); }
.ears b, .strap b, .ears b span, .strap b span { font: 400 1.55em/.6 var(--num); }
.columns { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 26px; align-items: start; }
.col { min-width: 0; padding-bottom: 10px; }
.col .bar.second { border-top: 4px solid var(--ink); margin-top: 10px; }
.col > div, .col > ul { margin: 0; padding: 8px 14px 6px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.tbl th { text-align: left; font-size: 14.5px; color: var(--bolt-d); padding: 3px 0; }
.tbl td { padding: 5px 0; border-top: 3px dotted var(--pane-d); }
.tbl .n { all: unset; display: table-cell; text-align: right; font: 400 26px/.7 var(--num); padding: 5px 0; border-top: 3px dotted var(--pane-d); } .tbl th.n { font: 400 14.5px var(--px); border-top: 0; color: var(--bolt-d); }
.lv-empty { font-size: 16.5px; line-height: 1.5; color: var(--bolt-d); padding: 2px 0; } .lv-empty b { display: block; color: var(--ink); font-size: 18px; }
.lv-lb { list-style: none; margin: 0; padding: 0; }
.lv-lb li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 3px dotted var(--pane-d); } .lv-lb li:first-child { border-top: 0; }
.lv-lb i { font: 400 34px/.7 var(--num); font-style: normal; width: 26px; color: var(--red-d); }
.lv-n { min-width: 0; flex: 1; } .lv-n b { display: block; font-size: 18px; line-height: 1.3; } .lv-n small { display: block; font-size: 14.5px; line-height: 1.4; color: var(--bolt-d); }
.lv-lb b.num { font: 400 28px/.7 var(--num); white-space: nowrap; } .lv-lb b.num small { font: 400 13px var(--px); color: var(--bolt-d); }
.tag { display: inline-block; font-size: 13px; line-height: 1.35; box-shadow: 0 0 0 2px var(--ink); padding: 0 5px 1px; margin: 0 2px; white-space: nowrap; background: var(--white); }
.tag.full { background: var(--ink); color: var(--white); } .tag.house { background: var(--bolt-c); color: var(--white); }
.jobs { list-style: none; }
.jobs li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 3px dotted var(--pane-d); } .jobs li:first-child { border-top: 0; }
.jobs li.full { opacity: .6; }
.jobs .pay { font: 400 36px/.7 var(--num); color: var(--red-d); white-space: nowrap; min-width: 62px; text-align: right; padding-left: 24px; background: var(--bolt) 0 8px / 20px 20px no-repeat; image-rendering: pixelated; } .jobs .pay small { display: block; font: 400 12.5px var(--px); color: var(--bolt-d); margin-top: 4px; }
.feed { list-style: none; }
.feed li { display: flex; gap: 10px; padding: 7px 0; border-top: 3px dotted var(--pane-d); } .feed li:first-child { border-top: 0; }
.feed .lv-pt { flex: none; width: 34px; height: 36px; background: #1f2a33; box-shadow: 0 0 0 3px var(--ink); display: grid; place-items: center; overflow: hidden; margin: 3px; } .feed .lv-pt canvas { image-rendering: pixelated; }
.feed li > div:last-child { min-width: 0; flex: 1; }
.feed p { font-size: 14px; line-height: 1.4; display: flex; flex-wrap: wrap; gap: 4px 4px; align-items: center; }
.feed .lv-who { font-size: 17px; margin-right: 4px; } .feed time { margin-left: auto; font: 400 20px/.7 var(--num); color: var(--bolt-c); }
.feed q { display: block; quotes: none; font-size: 16px; line-height: 1.45; margin-top: 2px; } .feed q b { color: var(--red-d); }
.feed li.in { animation: set .4s steps(4) both; }
@keyframes set { from { opacity: 0; transform: translateY(-8px); } }
.paper-cta { margin-top: 36px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; align-items: center; }

.foot { background: var(--ink); color: #e9d9b8; padding: 20px clamp(16px, 4vw, 56px) 30px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font-size: 16px; border-top: 4px solid var(--roof-d); }
.foot .name { font-size: 19px; color: var(--white); } .foot .dot { color: var(--red); }
.foot .tick { color: var(--sun); }
.foot a { color: #e9d9b8; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .foot a:hover { color: var(--white); }
.foot svg { width: 13px; height: 13px; }
.foot .treas { margin-left: auto; font-size: 13.5px; color: #b9a583; word-break: break-all; }

/* ================= narrower ================= */
@media (max-width: 980px) {
  .leaf-head, .wages-in, .rules-in, .send-in { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .fig, .f1, .f5 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fig.flip .plate { order: 0; }
  .pair { grid-template-columns: minmax(0, 1fr); gap: 44px; } .f4 { margin-top: 0; }
  .coupon, .calls-list { grid-column: 1; grid-row: auto; }
  .columns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .hero { min-height: 640px; }
  .slip { top: 10px; left: 12px; right: 12px; width: auto; }
  .slip .bar { font-size: 14px; padding: 3px 10px; } .slip-nums { font-size: 14px; padding: 5px 10px 8px; } .slip-nums b, .slip-nums b span { font-size: 22px; } .slip-last { display: none; }
  .lid { left: 12px; right: 12px; bottom: 44px; width: auto; }
  .lid > :not(.bar) { margin-left: 14px; margin-right: 14px; }
  .lid .bar { font-size: 14px; padding: 4px 10px; }
  .title { gap: 10px; margin-top: 10px; } .logo-mark { width: 104px; height: 104px; }
  .logotype { font-size: 78px; text-shadow: 4px 4px 0 var(--ink); } .token { font-size: 14.5px; letter-spacing: 1px; margin-top: 8px; padding: 2px 6px 3px; }
  .says { font-size: 16px; margin-top: 10px; line-height: 1.45; }
  .lid-cta { gap: 8px; margin-top: 12px; } .lid-cta .btn { font-size: 16px; padding: 9px 10px; gap: 6px; border-bottom-width: 8px; } .lid-cta .btn .bolt { width: 18px; height: 18px; }
  .lid-links { margin-top: 12px; margin-bottom: 14px; gap: 8px; } .xbtn, .ca { height: 34px; font-size: 14px; padding-left: 8px; } .ca { padding-left: 0; }
  .unfold { bottom: 6px; font-size: 13.5px; padding: 2px 9px 3px; }
  .day { padding: 44px 12px 72px; } .fig, .pair { padding: 20px 0; }
  .sign span { padding: 9px 16px 10px; }
  .lede { font-size: 16.5px; padding: 12px 14px 14px; }
  .plate figcaption { font-size: 14.5px; }
  .clock b { font-size: 38px; } .pips i { width: 10px; height: 10px; margin: 2px 3px; } .pips { gap: 2px; }
  .how h3 { font-size: 22px; margin: 14px 14px 0; gap: 12px; } .how dl, .swatches { margin-left: 14px; margin-right: 14px; } .how dd { font-size: 16.5px; }
  .wages-in, .rules-in, .send-in { padding: 44px 12px 76px; }
  .terms { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .terms > div { padding: 8px 10px 10px; } .terms b { font-size: 38px; } .terms small { font-size: 14.5px; }
  .card { padding: 0 12px 14px; } .awning { margin: 0 -12px 10px; }
  .paytbl { font-size: 15px; } .paytbl th:nth-child(4), .paytbl td:nth-child(4) { display: none; } .paytbl td.r b { font-size: 30px; padding-left: 24px; background-size: 18px 18px; }
  .glance li { font-size: 16.5px; } .docket .st { font-size: 16.5px; } .docket pre { font-size: 14px; }
  .telegram pre { font-size: 16px; padding: 12px 14px 4px; }
  .endpoints li { grid-template-columns: 50px minmax(0, 1fr); } .endpoints li span { grid-column: 2; }
  .paper-in { padding: 44px 12px 52px; }
  .ears, .strap { font-size: 14.5px; gap: 10px 10px; }
  .btn.big { font-size: 21px; padding: 13px 16px; } .btn.big .bolt { width: 26px; height: 26px; }
  .foot .treas { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lamp, .unfold b, .feed li.in { animation: none; }
}