/* The landing page and /terms. Same palette, fonts and chunky ink outlines as the town (styles.css), kept in
   its own file so the two pages can change without stepping on each other. Dark plum bands alternate with
   cloud-pink and pavement-mauve ones; the scalloped edges between them are the clouds that ring the town art. */
:root {
  --ink: #2a1b2e; --bg: #1d1322; --bg2: #271a2d; --card: #32223a; --card2: #3d2a46; --line: #4d3858;
  --text: #fbeef2; --muted: #b9a2bd; --mauve: #ae8296; --rose: #f26b7a; --coral: #f4846a; --pink: #ffc9d6;
  --teal: #6cc5bd; --olive: #b5a868; --gold: #ffd166; --good: #8fe0a8; --cloud: #fdeef0; --paper: #fff8fa;
  --ink-soft: #5d4560; --rose-deep: #9c2946; /* muted text and links on the light bands: both clear AA on --cloud */
  --font: 'Nunito', system-ui, sans-serif; --display: 'Fredoka', 'Nunito', sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --bw: 3px; --shadow: 0 5px 0 var(--ink); --r: 18px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; } /* .btn and friends set display, which would otherwise beat the attribute */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0; line-height: 1.12; letter-spacing: .005em; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--teal); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--pink); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.light :focus-visible, .mauve :focus-visible, .demo-bar :focus-visible { outline-color: var(--ink); }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; position: relative; z-index: 1; }
.wrap.narrow { width: min(820px, 100% - 40px); }
.fine { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.mono { font-family: var(--mono); font-size: 13.5px; overflow-wrap: anywhere; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--ink); font: 600 15px var(--display); padding: 8px 14px; border: var(--bw) solid var(--ink); border-radius: 12px; }
.skip:focus { top: 8px; }

/* ---- the honest banner, and the header ---- */
.demo-bar { margin: 0; text-align: center; background: var(--olive); color: var(--ink); font: 600 14px/1.3 var(--display); padding: 6px 12px; border-bottom: var(--bw) solid var(--ink); }
.top { position: sticky; top: 0; z-index: 40; background: var(--bg2); border-bottom: var(--bw) solid var(--ink); }
.top-in { display: flex; align-items: center; gap: 18px; padding-block: 10px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 700 23px var(--display); color: var(--pink); text-decoration: none; white-space: nowrap; }
.brand-cat { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 2px 0 var(--ink)); }
.top-nav { display: flex; gap: 4px; margin-left: auto; }
.top-nav a { font: 500 15px var(--display); color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 10px; }
.top-nav a:hover { color: var(--text); background: var(--card); }
.top .btn { flex: none; }
/* below the width where it fits beside the brand, the section nav becomes a second row you can swipe, so a phone still has a way to FAQ */
@media (max-width: 1020px) {
  html { scroll-padding-top: 120px; } .top-in { flex-wrap: wrap; row-gap: 4px; padding-block: 8px 6px; } .top .btn { margin-left: auto; }
  .top-nav { order: 3; flex: 1 0 100%; margin: 0 -8px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .top-nav::-webkit-scrollbar { display: none; }
  .top-nav a { font-size: 14px; padding: 4px 8px; }
}

/* ---- buttons: a slab with an ink outline that sinks when pressed ---- */
.btn { display: inline-block; font: 600 17px var(--display); color: var(--ink); background: var(--rose); text-decoration: none; padding: 10px 20px; border: var(--bw) solid var(--ink);
  border-radius: 14px; box-shadow: 0 4px 0 var(--ink); transition: transform .12s, box-shadow .12s, background .12s; white-space: nowrap; }
.btn:hover { color: var(--ink); background: #ff8492; transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.teal { background: var(--teal); } .btn.teal:hover { background: #86d8d0; }
.btn.gold { background: var(--gold); } .btn.gold:hover { background: #ffdf8e; }
.btn.small { font-size: 15px; padding: 6px 14px; border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
.btn.big { font-size: 20px; padding: 13px 26px; border-radius: 16px; box-shadow: var(--shadow); }

/* ---- hero ---- */
.hero { position: relative; overflow: clip; padding: 28px 0 72px; background: radial-gradient(70% 46% at 50% 72%, rgba(242, 107, 122, .2), transparent 70%), linear-gradient(var(--bg2), var(--bg)); }
.hero-copy { text-align: center; max-width: 860px; margin: 0 auto; }
.eyebrow { font: 600 15px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin: 0 0 14px; }
.light .eyebrow, .mauve .eyebrow { color: var(--rose-deep); } .mauve .eyebrow { color: var(--ink); }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.75rem); font-weight: 700; color: var(--pink); text-shadow: 0 4px 0 #6d2f4a; text-wrap: balance; }
h1 em { font-style: normal; color: var(--gold); text-shadow: 0 4px 0 #7a5a1a; white-space: nowrap; }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--text); max-width: 720px; margin: 18px auto 0; text-wrap: pretty; }
.cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.cta-note { color: var(--muted); font-size: 15px; margin-top: 14px; }
.cloud { position: absolute; z-index: 0; pointer-events: none; user-select: none; filter: drop-shadow(0 4px 0 rgba(42, 27, 46, .5)); animation: drift 46s ease-in-out infinite alternate; will-change: transform; }
@keyframes drift { to { transform: translateX(var(--dx, 34px)); } }
.c1 { left: -48px; top: 64px; width: 200px; } .c2 { right: -66px; top: 178px; width: 228px; --dx: -40px; }
/* pale text on a pale cloud vanishes, so clouds only ever sit where the copy cannot reach at that width */
.c3 { left: 11%; top: 392px; width: 118px; --dx: 22px; animation-duration: 38s; } .c4 { right: 9%; top: 22px; width: 150px; --dx: -26px; animation-duration: 60s; }
.c5 { right: -50px; top: 70px; width: 180px; --dx: -30px; } .c6 { left: -60px; top: 120px; width: 190px; }
@media (max-width: 1300px) { .c3, .c4 { display: none; } }
@media (max-width: 720px) { .c1 { display: none; } } /* with the hero's top padding cut, the corner cloud would sit on the wrapped eyebrow */
@media (max-width: 1100px) { .c2 { display: none; } .c1 { width: 120px; left: auto; right: -34px; top: -30px; } .c5, .c6 { width: 104px; top: -14px; } .c5 { right: -44px; } .c6 { left: -48px; } }

/* the framed window onto the live town: the same outline the stage has in town, only bigger */
/* ink reads as a gap on plum, so the frame gets a mauve mat and a second ink line outside it */
.window { position: relative; margin: 52px auto 0; max-width: 1080px; border: var(--bw) solid var(--ink); border-radius: 24px; background: var(--bg2); box-shadow: 0 0 0 7px var(--mauve), 0 0 0 10px var(--ink), 0 19px 0 var(--ink), 0 40px 80px rgba(0, 0, 0, .45); }
.screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px 20px 0 0; background: var(--mauve); isolation: isolate; }
/* the still is a 16:9 sheet centred in the screen, so its layers keep their places when the screen is 4:3 on a phone */
.poster { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 16 / 9; transform: translateX(-50%); transition: opacity .9s ease; }
.poster img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; user-select: none; pointer-events: none; }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transition: opacity .9s ease; background: var(--mauve); }
.js .screen iframe { opacity: 0; } .js .screen.on iframe { opacity: 1; } .screen.on .poster { opacity: 0; }
.screen-link { position: absolute; inset: 0; z-index: 3; display: grid; place-items: end center; padding-bottom: 18px; text-decoration: none; border-radius: 20px 20px 0 0; }
.screen-link span { font: 600 16px var(--display); color: var(--ink); background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 99px; padding: 5px 16px; box-shadow: 0 3px 0 var(--ink); opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s; }
.screen-link:hover span, .screen-link:focus-visible span { opacity: 1; transform: none; }
@media (hover: none) { .screen-link span { opacity: 1; transform: none; } } /* no hover on a touch screen, so the pill is the only sign the frame is a link */
.screen-link:focus-visible { outline-offset: -6px; }
.play { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); } .play:hover { transform: translate(-50%, calc(-50% - 1px)); } .play:active { transform: translate(-50%, calc(-50% + 3px)); }
.sticker { position: absolute; z-index: 5; left: 18px; top: -17px; transform: rotate(-4deg); font: 600 15px var(--display); color: var(--ink); background: var(--rose); border: var(--bw) solid var(--ink); border-radius: 10px; padding: 2px 12px 2px 26px; box-shadow: 0 3px 0 var(--ink); }
.sticker::before { content: ''; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); animation: blink 1.6s infinite; }
.sticker.still { background: var(--olive); } .sticker.still::before { animation: none; background: var(--ink); }
@keyframes blink { 50% { opacity: .25; } }
/* three residents loitering on top of the frame */
.window-cast { position: absolute; right: 30px; bottom: calc(100% + 5px); display: flex; align-items: flex-end; gap: 0; z-index: 2; pointer-events: none; }
.window-cast span { display: block; width: 58px; filter: drop-shadow(0 3px 0 rgba(42, 27, 46, .45)); transform-origin: 50% 100%; animation: idle 3.2s ease-in-out infinite; }
.window-cast span:nth-child(2) { width: 50px; animation-delay: -1.1s; } .window-cast span:nth-child(3) { width: 54px; animation-delay: -2s; }
.window-cast svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes idle { 50% { transform: scaleY(.965) scaleX(1.02); } }

.strip { display: grid; grid-template-columns: 1fr 1fr 1fr 2.2fr; margin: 0; border-top: var(--bw) solid var(--ink); border-radius: 0 0 20px 20px; overflow: hidden; }
.strip > div { padding: 12px 16px 13px; border-left: 2px solid var(--line); min-width: 0; } .strip > div:first-child { border-left: 0; }
.strip dt { font: 600 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.strip dd { margin: 2px 0 0; line-height: 1.3; } .strip dd b { font: 600 22px var(--display); color: var(--gold); margin-right: 4px; } .strip dd small { font-size: 13.5px; color: var(--muted); }
.strip .wide dd b { color: var(--pink); text-transform: capitalize; }
.window-note { text-align: center; color: var(--muted); font-size: 14.5px; margin: 22px auto 0; max-width: 640px; }
/* wide screens: copy and window side by side, so the town is on the first screen of a laptop and not under a column of text */
@media (min-width: 1100px) {
  .hero .wrap { width: min(1360px, 100% - 48px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 44px; align-items: center; }
  .top:has(.top-nav) .wrap { width: min(1360px, 100% - 48px); } /* the header lines up with the wider hero; /terms has no nav and keeps its own width */
  .c3 { display: none; } /* the left-hand copy now sits where this one drifts */
  .hero-copy { text-align: left; margin: 0; } .lede { margin-left: 0; } .cta { justify-content: flex-start; } .window { margin-top: 30px; width: 100%; } .window-note { grid-column: 1 / -1; }
}
@media (min-width: 1100px) and (max-width: 1700px) { .c1 { display: none; } } /* same reason: until the gutter is wide enough to hold it, it would lie over the eyebrow and the headline */
@media (max-width: 860px) { .strip { grid-template-columns: 1fr 1fr 1fr; } .strip .wide { grid-column: 1 / -1; border-left: 0; border-top: 2px solid var(--line); } }
@media (max-width: 600px) {
  .hero { padding: 22px 0 64px; } .window { margin-top: 44px; border-radius: 20px; } .lede { font-size: 1rem; margin-top: 14px; } .cta { margin-top: 18px; } .cta-note { margin-top: 10px; } .screen { aspect-ratio: 4 / 3; border-radius: 16px 16px 0 0; }
  .strip > div { padding: 9px 10px 10px; } .strip dt { font-size: 10.5px; letter-spacing: .04em; } .strip dd b { font-size: 18px; display: block; } .strip .wide dd b { display: inline; } .strip dd small { font-size: 12.5px; }
  .window-cast { right: 16px; } .window-cast span { width: 44px !important; } .btn.big { font-size: 18px; padding: 11px 20px; }
}

/* ---- bands ---- */
.band { position: relative; padding: 96px 0 104px; overflow-x: clip; }
.band.light { background: var(--cloud); color: var(--ink); --edge: var(--cloud); z-index: 1; }
.band.mauve { background: var(--mauve); color: var(--ink); --edge: var(--mauve); z-index: 1; }
/* scalloped, outlined edges: the band is a cloud bank sitting on the plum */
.band.light::before, .band.mauve::before, .band.light::after, .band.mauve::after { content: ''; position: absolute; left: 0; right: 0; height: 26px; background-size: 44px 26px; background-repeat: repeat-x; background-position: center top; pointer-events: none; }
.band.light::before, .band.mauve::before { top: -25px; background-image: radial-gradient(circle at 22px 26px, var(--edge) 20.5px, var(--ink) 21.5px, var(--ink) 24px, transparent 25px); }
.band.light::after, .band.mauve::after { bottom: -25px; background-image: radial-gradient(circle at 22px 0, var(--edge) 20.5px, var(--ink) 21.5px, var(--ink) 24px, transparent 25px); }
.light a { color: var(--rose-deep); } .mauve a { color: var(--ink); } .light a:hover { color: var(--ink); } .light a.btn, .mauve a.btn { color: var(--ink); }
.light .fine { color: var(--ink-soft); }
.sec-head { text-align: center; max-width: 780px; margin: 0 auto 48px; } .sec-head.left { text-align: left; margin: 0 0 22px; }
h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); color: var(--pink); } .light h2, .mauve h2 { color: var(--ink); }
.sec-sub { margin-top: 16px; font-size: 1.08rem; color: var(--muted); text-wrap: pretty; } .light .sec-sub { color: var(--ink-soft); } .mauve .sec-sub { color: var(--ink); }
.badge { display: inline-block; font: 600 13px var(--display); color: var(--ink); background: var(--good); border: 2px solid var(--ink); border-radius: 99px; padding: 1px 10px; white-space: nowrap; vertical-align: 2px; }
.badge.example { background: var(--gold); } .badge.wait { background: var(--paper); }
.band-note { text-align: center; margin-top: 28px; font-weight: 700; }
@media (max-width: 600px) { .band { padding: 72px 0 80px; } .sec-head { margin-bottom: 36px; } }

/* ---- how a move happens ---- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: step; }
.step { position: relative; display: flex; flex-direction: column; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: 34px 18px 18px; }
.step .num { position: absolute; left: 16px; top: -22px; width: 44px; height: 44px; display: grid; place-items: center; font: 700 24px var(--display); background: var(--gold); border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); transform: rotate(-5deg); }
.step:nth-child(2) .num { background: var(--teal); transform: rotate(4deg); } .step:nth-child(3) .num { background: var(--pink); transform: rotate(-3deg); } .step:nth-child(4) .num { background: var(--rose); transform: rotate(5deg); }
.step h3 { font-size: 1.32rem; margin-bottom: 8px; } .step > p { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.exhibit { margin-top: auto; background: var(--ink); color: var(--text); border-radius: 13px; padding: 13px 14px 14px; }
.step > p + .exhibit { margin-top: auto; } .step > p { margin-bottom: 16px; }
.ex-cap { font: 600 11.5px var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 5px; } .ex-cap + .mono + .ex-cap { margin-top: 12px; }
.ex-foot { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.exhibit .mono { margin: 0; color: var(--teal); } .exhibit .mono.formula { color: var(--muted); font-size: 12px; margin: 0 0 6px; } .exhibit .mono.big { font-size: 17px; font-weight: 600; color: var(--gold); }
.bars { display: grid; gap: 8px; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; font: 600 14.5px var(--display); }
.bars .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bars .pc { color: var(--gold); }
.bars .tr { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: var(--bg); overflow: hidden; } .bars .tr i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #b8506a, var(--rose)); min-width: 4px; }
.walk { position: relative; padding-top: 30px; }
.walk .segs { display: flex; height: 26px; border-radius: 8px; overflow: hidden; border: 2px solid var(--pink); background: var(--bg); }
.walk .segs i { display: block; min-width: 0; flex-basis: 0; background: #6b4a70; } .walk .segs i:nth-child(even) { background: #8a6188; } .walk .segs i.hit { background: var(--gold); }
.walk .pin { position: absolute; top: 0; bottom: -4px; width: 0; border-left: 3px solid var(--paper); }
.walk .pin b { position: absolute; top: -2px; left: -3px; transform: translateX(-50%); font: 600 12px var(--mono); color: var(--ink); background: var(--paper); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.walk .pin.l b { transform: none; left: -3px; } .walk .pin.r b { transform: translateX(-100%); left: 0; }
.walk-scale { display: flex; justify-content: space-between; font: 400 11.5px var(--mono); color: var(--muted); margin: 6px 0 0; }
.outcome { margin: 10px 0 0; font: 600 16px var(--display); color: var(--gold); }
.after-steps { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 44px; } .after-steps p { color: var(--ink-soft); font-size: 16px; }
@media (max-width: 1100px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 22px; } }
@media (max-width: 640px) { .steps { grid-template-columns: minmax(0, 1fr); } .after-steps { grid-template-columns: minmax(0, 1fr); justify-items: start; } }

/* ---- bring your own agent ---- */
.agent-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start; }
.invite-card { background: var(--card); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px; }
.invite-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .invite-head h3 { font-size: 1.3rem; color: var(--pink); }
.invite { margin: 0 0 14px; font: 400 14.5px/1.7 var(--mono); color: var(--gold); background: var(--bg); border: 2px dashed var(--mauve); border-radius: 12px; padding: 14px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.invite-card .fine + .fine { margin-top: -4px; }
/* the copy button's status line: its height is reserved, so nothing below moves when it speaks */
.invite-card .copy-status { min-height: 1.55em; margin: -6px 0 8px; color: var(--gold); } .invite-card .copy-status + .fine { margin-top: 0; }
.can h3, .score > h3, .flow > h3 { font-size: 1.5rem; color: var(--pink); margin-bottom: 16px; }
.can-list { display: grid; gap: 12px; } .can-list li { position: relative; padding-left: 30px; color: var(--muted); font-size: 16px; } .can-list b { color: var(--text); }
.can-list li::before, .ticks li::before { content: ''; position: absolute; left: 2px; top: .42em; width: 14px; height: 14px; border-radius: 5px; background: var(--teal); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); transform: rotate(8deg); }
.can-list li:nth-child(even)::before { background: var(--pink); transform: rotate(-8deg); }
.score { margin-top: 56px; }
.score-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.score-card { background: var(--card); border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); padding: 16px; } .score-card:last-child { background: var(--card2); }
.score-card .pts { display: inline-block; font: 700 22px var(--display); color: var(--ink); background: var(--gold); border: 2px solid var(--ink); border-radius: 10px; padding: 0 10px; margin-bottom: 10px; } .score-card:last-child .pts { background: var(--teal); }
.score-card h4 { font-size: 1.12rem; margin-bottom: 4px; } .score-card p { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.ticks { display: grid; gap: 10px; margin-top: 24px; } .ticks li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--muted); } .ticks li::before { background: var(--gold); }
.epoch-live { margin-top: 22px; display: inline-block; font: 500 16px var(--display); background: var(--bg2); border: 2px solid var(--line); border-radius: 12px; padding: 8px 14px; } .epoch-live b { color: var(--gold); font-weight: 600; }
@media (max-width: 1000px) { .score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .agent-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .score-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- residents: cast-sheet cards on the pavement ---- */
.cast { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.res { display: flex; flex-direction: column; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; transition: transform .15s; }
.res:hover { transform: translateY(-3px) rotate(-.4deg); } .res.star { background: #fff3cf; }
/* the name is the link and its ::after covers the card, so the lift on hover is telling the truth */
.res { position: relative; } .res-link { color: inherit; text-decoration: none; } .res-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.res:hover .res-link { text-decoration: underline; } .res:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; } .res-link:focus-visible { outline: none; }
.res-art { position: relative; height: 150px; border-bottom: var(--bw) solid var(--ink); background: radial-gradient(90% 80% at 50% 100%, #c79fb0, #9a6f86); overflow: hidden; }
.res-art .portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.res-art .spr { position: absolute; left: 50%; bottom: 6px; width: 92px; transform: translateX(-50%); filter: drop-shadow(0 4px 0 rgba(42, 27, 46, .35)); }
.res-art.has-portrait .spr { left: auto; right: 8px; bottom: 4px; width: 54px; transform: none; background: var(--pink); border: 2.5px solid var(--ink); border-radius: 14px; padding: 3px 4px 0; filter: none; box-shadow: 0 3px 0 var(--ink); }
.res-art .spr svg { display: block; width: 100%; height: auto; overflow: visible; }
.res-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.res h3 { font-size: 1.35rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip { font: 600 12px var(--display); color: var(--ink); background: var(--pink); border: 2px solid var(--ink); border-radius: 99px; padding: 0 8px; white-space: nowrap; } .chip.sash { background: var(--gold); }
.res-persona { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0 14px; }
.res-now { margin: auto 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; border-top: 2px dashed var(--mauve); padding-top: 10px; }
.res-now dt { font: 600 11px var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); } .res-now dd { margin: 0; font: 600 15px var(--display); overflow-wrap: anywhere; } .res-now div:last-child { text-align: right; }
@media (max-width: 1040px) { .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: eight full-width cards were four screens of scrolling, so the cast becomes a row you swipe. The padding keeps the lift, the shadow and the focus ring inside the scroller's clip. */
@media (max-width: 560px) {
  .cast { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 8px 20px 14px; scroll-padding-inline: 20px; }
  .res { scroll-snap-align: center; } .res-art { height: 130px; }
}

/* ---- tokens, elections, deeds ---- */
.quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.quad-card { background: var(--card); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px 18px 20px; }
.quad-card img { display: block; height: 130px; width: 100%; object-fit: contain; margin-bottom: 12px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); background: radial-gradient(closest-side, rgba(174, 130, 150, .42), transparent); }
.quad-card h3 { font-size: 1.32rem; color: var(--pink); margin-bottom: 6px; } .quad-card p { font-size: 15px; line-height: 1.55; color: var(--muted); } #mayorNow { color: var(--gold); font-weight: 700; }
@media (max-width: 1040px) { .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .quad { grid-template-columns: minmax(0, 1fr); } }

.flow { margin-top: 64px; background: var(--bg2); border: var(--bw) solid var(--ink); border-radius: 24px; box-shadow: var(--shadow); padding: 28px; }
.to-agents { --c: var(--teal); } .to-holders { --c: var(--pink); } .to-deed { --c: var(--gold); } .to-treasury { --c: var(--mauve); } .to-burn { --c: var(--ink); --t: var(--pink); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 24px; font: 500 14.5px var(--display); color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 7px; } .legend li::before { content: ''; width: 16px; height: 16px; border-radius: 5px; background: var(--c); border: 2px solid var(--ink); box-shadow: 0 0 0 1px var(--line); }
.legend .to-burn::before { background: repeating-linear-gradient(135deg, #2a1b2e 0 3px, #6b4a70 3px 6px); box-shadow: 0 0 0 1px var(--muted); }
.flow-rows { display: grid; gap: 20px; }
.flow-row { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 6px 24px; align-items: center; }
.flow-src h4 { font-size: 1.12rem; } .flow-src p { font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
.flow-bar { display: flex; border: var(--bw) solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 0 var(--ink), 0 0 0 1px var(--line); background: var(--ink); gap: 3px; }
.flow-bar li { flex: var(--w) 0 0; min-width: 0; background: var(--c); color: var(--t, var(--ink)); text-align: center; padding: 9px 4px; line-height: 1.2; overflow: hidden; }
.flow-bar .to-burn { background: repeating-linear-gradient(135deg, #2a1b2e 0 9px, #3a2440 9px 18px); }
.flow-bar b { display: block; font: 700 17px var(--display); } .flow-bar span { display: block; font: 600 12px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-note { grid-column: 2; font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 4px 0 0; }
.pots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; padding-top: 26px; border-top: 2px dashed var(--line); }
.pot { border: var(--bw) solid var(--ink); border-radius: 16px; padding: 14px 16px; background: var(--card); box-shadow: inset 0 7px 0 var(--c), 0 4px 0 var(--ink); padding-top: 20px; } .pot.to-burn { box-shadow: inset 0 7px 0 var(--rose), 0 4px 0 var(--ink); }
.pot h4 { font-size: 1.1rem; margin-bottom: 4px; } .pot p { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
/* beside a 250px source column the bar is too narrow for "resident's holders" until about 1040px, so it stacks before the labels clip */
@media (max-width: 1040px) { .flow-row { grid-template-columns: minmax(0, 1fr); } .flow-note { grid-column: 1; } }
@media (max-width: 860px) { .flow { padding: 20px 16px; } .pots { grid-template-columns: minmax(0, 1fr); }
  /* the legend carries the names on narrow screens; the labels stay in the tree for screen readers */
  .flow-bar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .flow-bar li { padding: 9px 1px; } .flow-bar b { font-size: 15px; } }

/* ---- the sky follows the market ---- */
.wx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.feeds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .feeds li { font: 600 13px var(--mono); background: var(--paper); border: 2px solid var(--ink); border-radius: 9px; padding: 2px 10px; box-shadow: 0 2px 0 var(--ink); }
.wx-card { background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; }
.sky { position: relative; height: 190px; border-bottom: var(--bw) solid var(--ink); overflow: hidden; background: linear-gradient(#ffd9c9, #ffc9d6); transition: background 1s; }
.sky .sun { position: absolute; right: 16%; top: 28px; width: 84px; height: 84px; border-radius: 50%; background: var(--gold); border: var(--bw) solid var(--ink); box-shadow: 0 0 0 12px rgba(255, 209, 102, .3); transition: transform 1s, opacity 1s; }
.sky img { position: absolute; transition: transform 1s, opacity 1s, filter 1s; filter: drop-shadow(0 4px 0 rgba(42, 27, 46, .35)); } .sky .sk1 { left: 12%; top: 58px; width: 168px; } .sky .sk2 { right: 8%; top: 96px; width: 122px; }
.sky .drops { position: absolute; inset: -60px; opacity: 0; transition: opacity 1s; background-image: repeating-linear-gradient(105deg, rgba(42, 27, 46, 0) 0 20px, rgba(42, 27, 46, .5) 20px 22px, rgba(42, 27, 46, 0) 22px 54px); background-size: 240px 240px; }
.sky[data-weather='sunny'] .sk1 { opacity: 0; transform: translateY(30px); } .sky[data-weather='sunny'] .sk2 { transform: translate(-190px, 10px) scale(.8); }
.sky[data-weather='cloudy'] .sun, .sky[data-weather$='rain'] .sun { opacity: 0; transform: translateY(-40px); }
.sky[data-weather='cloudy'], .sky[data-weather$='rain'] { background: linear-gradient(#cdb3c6, #dcc3d2); } .sky[data-weather='heavy-rain'] { background: linear-gradient(#9d87a6, #bda6bd); }
.sky[data-weather='cloudy'] .sk2, .sky[data-weather$='rain'] .sk2 { transform: translate(-70px, -50px) scale(1.25); } .sky[data-weather$='rain'] img { filter: brightness(.84) saturate(.8) drop-shadow(0 4px 0 rgba(42, 27, 46, .35)); }
.sky[data-weather='light-rain'] .drops { opacity: .45; animation: rain .7s linear infinite; } .sky[data-weather='heavy-rain'] .drops { opacity: .85; animation: rain .4s linear infinite; }
@keyframes rain { to { background-position: -62px 240px; } }
.wx-body { padding: 18px 20px 20px; }
.wx-now { font: 500 14.5px var(--display); color: var(--ink-soft); margin: 0; display: flex; align-items: center; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mauve); border: 2px solid var(--ink); flex: none; } .dot.live { background: #3fbf6f; animation: blink 1.6s infinite; }
.wx-word { font: 700 2rem var(--display); text-transform: capitalize; margin: 2px 0 2px; } .wx-why { font-size: 15px; color: var(--ink-soft); min-height: 1.5em; }
.wx-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 14px; }
.wx-scale li { text-align: center; border: 2px solid var(--ink); border-radius: 10px; padding: 5px 2px; background: #f1dbe3; line-height: 1.2; } .wx-scale b { display: block; font: 600 12.5px var(--display); } .wx-scale span { display: block; font-size: 11.5px; color: var(--ink-soft); }
.wx-scale li.on { background: var(--gold); box-shadow: 0 3px 0 var(--ink); transform: translateY(-3px); } .wx-scale li.on span { color: var(--ink); }
@media (max-width: 860px) { .wx-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 480px) { .wx-scale { grid-template-columns: minmax(0, 1fr); } .wx-scale li { display: flex; justify-content: space-between; padding: 4px 10px; text-align: left; } .wx-scale li.on { transform: none; } .wx-scale b, .wx-scale span { font-size: 13px; } }

/* ---- built to be checked ---- */
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.check-card { background: var(--card); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px; } .check-card h3 { font-size: 1.4rem; color: var(--pink); margin-bottom: 8px; } .check-card p { color: var(--muted); font-size: 16px; }
.demo-card { background: var(--card2); border-style: dashed; } .demo-card .ticks { margin-top: 10px; } .demo-card .ticks li::before { background: var(--olive); }
.rc-list { display: grid; gap: 6px; margin-top: 4px; min-height: 236px; align-content: start; } /* five rows reserved, so the list filling in does not push the page */
.rc-list a { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 2px 12px; align-items: baseline; text-decoration: none; background: var(--bg2); border: 2px solid var(--line); border-radius: 11px; padding: 7px 12px; color: var(--text); font-size: 14.5px; }
.rc-list a:hover { border-color: var(--gold); } .rc-list .id { font: 400 12.5px var(--mono); color: var(--teal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-list .what { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .checks { grid-template-columns: minmax(0, 1fr); } .check-card { padding: 18px; } }
@media (max-width: 520px) { .rc-list a { grid-template-columns: minmax(0, 1fr); } .rc-list .what { text-align: left; } }

/* ---- faq ---- */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); }
.faq summary { cursor: pointer; list-style: none; font: 600 1.15rem var(--display); padding: 14px 52px 14px 18px; position: relative; border-radius: 13px; } .faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 14px; top: 50%; width: 28px; height: 28px; margin-top: -14px; display: grid; place-items: center; font: 700 20px/1 var(--display); background: var(--pink); border: 2px solid var(--ink); border-radius: 9px; transition: transform .15s; }
.faq details[open] summary::after { content: '-'; background: var(--gold); transform: rotate(180deg); }
.faq details p { padding: 0 18px 16px; color: var(--ink-soft); font-size: 16px; }

/* ---- footer ---- */
.foot { position: relative; background: var(--bg2); padding-top: 70px; }
.skyline { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 36px); overflow: hidden; padding: 0 12px; border-bottom: var(--bw) solid var(--ink); }
.skyline img { flex: none; width: auto; height: clamp(72px, 11vw, 128px); margin-bottom: -2px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
@media (max-width: 640px) { .skyline img:nth-child(n + 4) { display: none; } }
.foot-in { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; padding-block: 30px 40px; }
.foot-in > div { max-width: 460px; } .foot-brand { font: 700 22px var(--display); color: var(--pink); margin: 0 0 4px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 16px var(--display); }
.noscript { margin: 0; padding: 14px 20px; text-align: center; background: var(--gold); color: var(--ink); font-weight: 700; }

/* ---- /terms ---- */
.doc { padding: 56px 0 88px; } .doc h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin-bottom: 8px; } .doc .fine { margin-bottom: 36px; }
.doc section { background: var(--card); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: 0 4px 0 var(--ink); padding: 20px 22px; margin-bottom: 18px; }
.doc h2 { font-size: 1.45rem; margin-bottom: 8px; } .doc section p { color: var(--muted); } .doc section p b { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}