/* Germany, "Kassensturz": Bauhaus and Ulm school rationalism. Casing white paper, warm black, one signal yellow,
   a geometric sans for the headlines, and bands of instrument detail (scale, grille, keys) between the sections.
   The yellow is a fill or a mark. It is never the colour of text on paper. */
:root {
  --bg: #F1EEE6; --ink: #1B1B1B; --ink2: #56524B; --line: rgba(27, 27, 27, .17); --panel: #FBFAF5; --panel2: #E4E0D5;
  --accent: #F2B200; --accent-ink: #1B1B1B; --pulse: #F2B200;
  --hero-bg: #1C1B19; --hero-ink: #F4F1E8; --hero-ink2: rgba(244, 241, 232, .72);
  --display: 'Jost', 'Century Gothic', Inter, system-ui, sans-serif; --body: Inter, system-ui, sans-serif;
  --r: 6px; --r-sm: 3px; --shadow: 0 8px 22px rgba(27, 27, 27, .13);
  --yellow: #F2B200; --orange: #D9482B; --blue: #2A5CAA; --green: #2E8B62; --white: #FBFAF5;
  --sky: #CFE3EE; --sky2: #F7E3A4; --sky3: #F3D3C2; --sky4: #D5E6CF;
  --card: #FBFAF5; --card-ink: #1B1B1B; --card-ink2: #56524B;
  --coin: #F2B200; --coin-edge: #1B1B1B;
}
body { background-color: var(--bg); }
:focus-visible { outline-color: var(--ink); }
#pulse :focus-visible { outline-color: var(--accent); }

/* The display face is a geometric sans, set medium and upright where the engine default is a light serif. */
.big, #pulse h1, .ns b, .p-num, .l-id h2, .l-size .cnt, .stat b, .mname, .pn b, .d-year, .d-v, .d-gen h3, #crowd .lab .gn, .oe a b { font-weight: 600; }
.step h3, .insight, .move h3, .nextlife b, .mom h3, .mt-name, .mc-in h3, .take h3, .dis h3, .sbs-v b, .local { font-weight: 500; }
.big { letter-spacing: -.022em; line-height: 1; }
.big em, .ed-btn span, .ed-menu a span, .hero-txt .kicker span, .local, .quote blockquote, .oe a b { font-style: normal; }
.ed-btn span, .ed-menu a span, .hero-txt .kicker span { font-weight: 500; }
#pulse h1 { font-size: clamp(44px, 6.4vw, 96px); letter-spacing: -.024em; }
.hero-txt { max-width: 660px; }
#pulse h1 .n { color: var(--pulse); }
.l-id h2 { letter-spacing: -.02em; }
.quote blockquote { font-weight: 400; line-height: 1.32; }
.dc-cap > b { font-weight: 600; letter-spacing: -.01em; }
.d-year { letter-spacing: -.01em; }

/* Emphasis is a stroke of yellow marker under black type. */
.big em { color: inherit; background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 90%, transparent 90%); padding: 0 .06em; margin: 0 -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.step h3 b { color: inherit; font-weight: 600; background: linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.p-num, .d-v, .ax-q.q1, .take article > .ico { color: var(--ink); }
.p-num { letter-spacing: -.03em; }
.wrap > .kicker::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background: var(--accent); box-shadow: 0 0 0 1.5px var(--ink); vertical-align: -1px; }
.go, .chip.cta { box-shadow: 0 0 0 1.5px var(--ink); }
.go { border-radius: 4px; }
.cmp-track i.me, .step .cmp-track i.me, .sbs-track i.me { background: var(--accent); box-shadow: 0 0 0 1.5px var(--ink); }
.tl-now { background: var(--ink); }
.d-spark .you { stroke: var(--ink); stroke-width: 1.5; }

/* The read-out strip under the night map is the one full field of yellow. */
.nation { background: var(--accent); color: var(--ink); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.ns { border-right-color: rgba(27, 27, 27, .28); }
.ns b small, .ns em { color: rgba(27, 27, 27, .78); }
.ns .cmp-txt { color: var(--ink); opacity: 1; }
.ns .cmp-txt b { display: inline; font: 700 11px/1.4 var(--mono); }
.ns .cmp-track i { background: var(--ink); opacity: .5; }
.ns .cmp-track::before { opacity: .5; }
.ns .cmp-track i.me { background: var(--ink); opacity: 1; box-shadow: 0 0 0 2px var(--white); }
.nation :focus-visible { outline-color: var(--ink); }
@media (max-width: 899px) { .ns { border-bottom-color: rgba(27, 27, 27, .28); } }

/* Hero controls: square shouldered keys */
.hero-layers button { border-radius: 4px; background: rgba(244, 241, 232, .07); border-color: rgba(244, 241, 232, .3); }
.hero-layers button.on { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.ecg { stroke-width: 2.2; }

/* Bands between the sections */
.trim { height: 38px; }
.trimband { display: block; }

/* Pale tints of the three primaries: yellow under the dial, blue along the street, red under the year */
#dial { --bg: #F7E9B8; background: var(--bg); }
#lives { --bg: #D3E3EC; --panel2: #BFD3DF; background: var(--bg); }
#year { --bg: #F4DACD; --panel2: #E6C4B4; background: var(--bg); }

/* The doors: white cards with a hairline, no poster shadow */
.card { opacity: 1; }
.dc { border: 1.5px solid var(--ink); box-shadow: 0 10px 22px rgba(27, 27, 27, .14); }
.card:not(.active) .dc { filter: saturate(.86); }
.card.active .dc { box-shadow: 0 16px 30px rgba(27, 27, 27, .2); }
.dc-no { border-radius: 50%; min-width: 30px; background: var(--ink); color: var(--white); box-shadow: 0 0 0 2px var(--white); }
.dc-size { border-radius: 2px; background: var(--white); color: var(--ink); }
.dc-seal { width: 88px; height: 88px; background: none; border: 0; box-shadow: none; border-radius: 50%; }
.dc-seal .med { width: 100%; }
@media (max-width: 819px) { .card { width: min(78vw, 300px); } }

/* The instrument dial */
.med .petal { transform-origin: 0 0; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1), opacity .4s; }
.med.bloom .petal { animation: segIn .8s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes segIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.med .petal.hi path:first-child { stroke-width: 3.6; }
.med .plabel { cursor: pointer; }
.med .plabel.hi circle { stroke-width: 3.6; }
.l-med .petal { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .med.bloom .petal { animation: none; } }

/* Inside a door */
.life-in { --lc-ink: color-mix(in srgb, var(--lc) 58%, #1B1B1B); }
.life-top { border-bottom: 2px solid var(--ink); }
.lt-id span { font: 600 19px/1 var(--display); }
.stat, .pair li, .ptile, .voice, .move, .signals > span, .chans > span, .sd { border-color: rgba(27, 27, 27, .24); }
.move { border-top-width: 5px; }
.l-house { background: var(--sky); border: 1.5px solid var(--ink); }

/* The room: a fine printed outline on every figure, so the yellow and the pale ones hold on paper */
#crowd .fig .shape { stroke: rgba(27, 27, 27, .62); stroke-width: .8; paint-order: stroke; stroke-linejoin: round; }

/* The birth dial: a white instrument face, a black hub, a yellow knob */
.d-plate { fill: var(--white); stroke-width: 2.5; }
.d-hub { fill: #1C1B19; }
.d-born, .d-year { fill: #F4F1E8; }
.d-gen-arc { opacity: .42; }
.d-lab { stroke: var(--white); font-weight: 600; }
.d-knob { stroke-width: 2.5; }
.d-knob-in { fill: var(--ink); }
.d-gens button, .d-ctl button { border-color: rgba(27, 27, 27, .3); }

/* Moves as instrument modules */
.mt { border: 1.5px solid var(--ink); border-radius: 6px; border-top: 6px solid var(--mc); }
.mt:hover { box-shadow: 0 8px 20px rgba(27, 27, 27, .16); }
.mt-rank { font: 600 20px/1 var(--display); color: var(--ink); letter-spacing: 0; }
.mt-ico { background: var(--mc); color: #fff; border-radius: 4px; }
.board.is-field .mt { border-width: 1.2px; border-top-width: 5px; }
.mc-in { border: 1.5px solid var(--ink); border-top: 8px solid var(--mc); border-radius: 8px; }
.seg { border-radius: 5px; border-color: rgba(27, 27, 27, .3); }
.seg button { border-radius: 3px; }
.seg button.on { background: var(--ink); color: var(--white); box-shadow: none; }

/* Close */
.take article { border: 1.5px solid var(--ink); border-top-width: 8px; }
.take article:nth-child(1) { background: #F7E9B8; } .take article:nth-child(2) { background: #D3E3EC; } .take article:nth-child(3) { background: #F4DACD; }
.take p { color: #3D3A35; }
.tip { background: #1C1B19; color: #F4F1E8; border-radius: 4px; }
.d-card, .pn { border-color: rgba(27, 27, 27, .26); }
.chip i { border-radius: 2px; box-shadow: 0 0 0 1px rgba(27, 27, 27, .45); }

/* One radius system. A pressed control is a round key or a rectangle with a 4px corner. Nothing is a pill. */
.ed-btn, .nav a, .chip, .nav2 button, .ptile, .signals > span, .chans > span, .who button, .dchip, .d-gens button, .board.is-field .mt, .dock a, .m-legend button { border-radius: 4px; }
.ptile i, .m-legend button i, .mom .mi { border-radius: 3px; }
.ed-menu { border-radius: 6px; }
.ed-menu a { border-radius: 3px; }
.dock { border-radius: 8px; border-color: var(--ink); }
@media (min-width: 820px) { .life-in { border-radius: 10px; } }
.nav a.on { background: var(--ink); color: var(--white); }
.board.is-field .mt-name { flex: 1 1 0; min-width: 0; }

/* Pass three: life colour back on the move cards, small print at full strength, hero kicker and keys each on one line */
.move { border-top-color: var(--lc); }
.legal, .sd.none { opacity: 1; }
@media (min-width: 1100px) { .hero-txt .kicker { white-space: nowrap; } }
/* The generation keypad and the layer key width now live in base.css. */
.l-id .local { font: 500 15px/1.3 var(--body); color: var(--ink2); letter-spacing: 0; }