/* United Kingdom, "Mustn't Grumble": a lino cut and a railway poster. Cream paper, slate ink, one pillar box red,
   a Brunswick green front door, a Clarendon for the headlines, and bands of cut pattern between the sections. */
:root {
  --bg: #F3EEE2; --ink: #1E2B32; --ink2: #4F5B60; --line: rgba(30, 43, 50, .2); --panel: #FBF7EC; --panel2: #E7DFCB;
  --accent: #B3262E; --accent-ink: #fff; --pulse: #B3262E;
  --hero-bg: #D6E5DE; --hero-ink: #1E2B32; --hero-ink2: rgba(30, 43, 50, .76);
  --display: "Libre Baskerville", Georgia, "Times New Roman", serif; --body: Inter, system-ui, sans-serif;
  --r: 6px; --r-sm: 4px; --shadow: 0 8px 22px rgba(30, 43, 50, .14);
  --chalk: #FBF7EC; --green: #1F5F4A; --mustard: #D8A12A; --duck: #A9C9C4;
  --sky: #CFE2DC; --sky2: #F1DDA6; --sky3: #E9C9C2; --sky4: #D5DDB9;
  --card: #FBF7EC; --card-ink: #1E2B32; --coin: #D8A12A; --coin-edge: #1E2B32;
}
body { background-color: var(--bg); }

/* The display face is a Clarendon: sturdy, bracketed, upright. Numbers get the heavy cut, sub heads the medium. */
.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: 800; }
.step h3, .insight, .move h3, .nextlife b, .mom h3, .mt-name, .mc-in h3, .take h3, .dis h3, .sbs-v b, .local { font-weight: 600; }
.big { letter-spacing: -.02em; line-height: 1.02; }
#pulse h1 { letter-spacing: -.02em; line-height: 1; font-size: clamp(42px, 5.6vw, 84px); }
@media (min-width: 820px) { #pulse h1 { white-space: nowrap; font-size: clamp(42px, 5vw, 74px); } }
#pulse h1 .n { color: var(--accent); }
.big em { font-style: italic; font-weight: 700; }
.ed-btn span, .ed-menu a span, .hero-txt .kicker span { font-style: italic; font-weight: 500; }
.local, .oe a b { font-style: normal; }
.quote blockquote { font-weight: 500; font-style: italic; line-height: 1.32; }
.l-id h2 { letter-spacing: -.015em; }
.wrap > .kicker::before { content: ""; display: inline-block; width: 14px; height: 7px; margin-right: 10px; background: var(--accent); border-radius: 7px 7px 0 0; }
.go, .chip.cta { background: var(--accent); }

/* The hero is a daylight print, not a night map: the engine's dark glass chrome is swapped for paper and ink. */
.hero-layers button { border: 1.5px solid rgba(30, 43, 50, .5); background: rgba(251, 247, 236, .82); color: var(--ink); border-radius: 4px; font-weight: 500; }
.hero-layers button.on { background: var(--ink); color: var(--chalk); border-color: var(--ink); }
.legend-bar i { outline: 1px solid rgba(30, 43, 50, .35); border-radius: 0; }
.ecg { stroke-width: 3; stroke-linejoin: miter; }
.lede { color: var(--hero-ink); opacity: .86; }

/* The nation strip is printed in ink, so the figures land like a headline board. */
.nation { --hero-bg: #1E2B32; --hero-ink: #FBF7EC; --hero-ink2: rgba(251, 247, 236, .74); --pulse: #E9B949; border-top: 0; }
.nation .ns { border-color: rgba(251, 247, 236, .16); }
.ns b { letter-spacing: -.01em; }

/* Bands of cut pattern between the sections */
.trim { height: 46px; }
.cutband { display: block; }

/* The dial sits on a mustard wash, the year on plaster pink */
#dial { --bg: #F1E3B4; --panel: #FBF7EC; --panel2: #E8D79C; --line: rgba(30, 43, 50, .26); background: var(--bg); }
#year { --bg: #EFDCD0; --panel: #FBF7EC; --panel2: #E3CABB; --line: rgba(30, 43, 50, .24); background: var(--bg); }
.d-plate { stroke-width: 4; }
.d-hub { fill: var(--ink); }
.d-year { fill: #FBF7EC; letter-spacing: -.01em; }
.d-born { fill: #FBF7EC; }
.d-sub { fill: #F0C55A; }
.d-lab { font-weight: 700; }
.d-gen { border-left-width: 8px; }
.d-card, .pn { border: 1.5px solid var(--ink); border-radius: 4px; }
.d-gens button, .d-ctl button { border: 1.5px solid var(--ink); }

/* The doors stand on a Brunswick green street, hatched like a cut block */
#lives { --bg: #1F5F4A; --ink: #FBF7EC; --ink2: rgba(251, 247, 236, .84); --line: rgba(251, 247, 236, .3); --panel: rgba(251, 247, 236, .1); --panel2: rgba(251, 247, 236, .18); --pulse: #F0C55A;
  background: var(--bg); color: var(--ink);
  background-image: repeating-linear-gradient(118deg, rgba(251, 247, 236, .055) 0 2px, transparent 2px 13px); }
#lives .big em { color: var(--pulse); }
#lives .wrap > .kicker::before { background: var(--pulse); }
.rail-ctl button { color: var(--ink); border-width: 1.5px; }
.card { opacity: 1; }
.dc { border: 2px solid #1E2B32; border-radius: 4px; box-shadow: 6px 6px 0 rgba(10, 30, 24, .55); }
.dc-sky { border-radius: 2px; outline: 2px solid #1E2B32; outline-offset: -2px; overflow: visible; }
.dc-sky::before { background: #FBF7EC; opacity: .9; top: 11%; right: 14%; width: 13%; }
.card:not(.active) .dc { filter: saturate(.8); }
.card.active .dc { box-shadow: 9px 9px 0 rgba(10, 30, 24, .6); }
.dc-no { background: #1E2B32; color: #FBF7EC; box-shadow: 0 0 0 2px #FBF7EC; border-radius: 2px; }
.dc-size { background: #FBF7EC; color: #1E2B32; border-radius: 2px; box-shadow: 0 0 0 1.5px #1E2B32; }
.dc-seal { background: #FBF7EC; border: 2px solid #1E2B32; border-radius: 4px; box-shadow: 3px 3px 0 rgba(30, 43, 50, .28); }
.dc-cap > b { font-weight: 800; letter-spacing: -.01em; }
@media (max-width: 819px) { .card { width: min(78vw, 300px); } }

/* Window glass is cut dark, like a lino print, and lights mustard when a door opens. */
.house .glass { fill: #3D5A63; }
.card:hover .glass, .card:focus-visible .glass, .l-house .glass, .house .glass.lit { fill: #F6D270; }

/* The fanlight: each pane grows from the hub, like light coming through the glass. */
.med .petal { transform-origin: 0 0; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1), opacity .4s; }
.med.bloom .petal { animation: paneIn .8s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes paneIn { from { transform: scale(.15); opacity: 0; } to { transform: none; opacity: 1; } }
.med .petal.hi path { stroke: #1E2B32; stroke-width: 3; }
.med .plabel { cursor: pointer; }
.med .plabel.hi circle { stroke: var(--accent); stroke-width: 3.5; }
.l-med .petal { cursor: pointer; }

/* Inside a door */
.life-in { --lc-ink: color-mix(in srgb, var(--lc) 62%, #1E2B32); border-radius: 8px; border: 2px solid #1E2B32; }
.life-top { border-bottom: 3px solid var(--ink); }
.lt-id span { font: 800 20px/1 var(--display); }
.stat, .pair li, .ptile, .voice, .move, .signals > span, .chans > span, .sd { border-color: rgba(30, 43, 50, .3); }
.stat, .move, .nextlife { border-radius: 4px; }
.move { border-top-width: 6px; }
.l-house { background: var(--sky); border: 2px solid var(--ink); border-radius: 3px; }
.nextlife { border: 1.5px solid var(--ink); }

/* The room: every figure carries a cut outline */
#crowd .fig .shape { stroke: rgba(30, 43, 50, .55); stroke-width: .9; paint-order: stroke; }
#crowd .lab .gn { letter-spacing: -.01em; }

/* Moves as luggage labels: a keyline, a punched corner, the colour along the top */
.mt { border: 1.5px solid var(--ink); border-radius: 4px; border-top: 7px solid var(--mc); background: var(--panel); }
.mt:hover { box-shadow: 4px 4px 0 rgba(30, 43, 50, .85); }
.mt-rank { font: 800 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.5px; border-top-width: 1.5px; border-radius: 999px; }
.board.is-field .mt-ico { border-radius: 50%; }
.mc-in { border: 2px solid var(--ink); border-top: 9px solid var(--mc); border-radius: 6px; }

/* Close */
.take article { border: 1.5px solid var(--ink); border-radius: 4px; box-shadow: 5px 5px 0 var(--ink); }
.take article:nth-child(1) { background: #F3D9D2; } .take article:nth-child(2) { background: #F1E3B4; } .take article:nth-child(3) { background: #D6E5DE; }
.take article > .ico { color: var(--ink); }
.tip { background: #1E2B32; color: #FBF7EC; border-radius: 4px; }

/* Pass 2. The nation strip: the comparison line keeps its own small type (the big figure rule would catch it). */
.ns .cmp-txt b { display: inline; font: 700 11px/1.4 var(--mono); letter-spacing: 0; }
/* A move in a profile keeps its life colour along the top edge. */
.life-in .move { border-top-color: var(--lc); }
/* Baskerville's display numerals read best at their natural widths, so they stay proportional. */
#pulse h1 .n, .ns b, .p-num, .sbs-v b, .d-year, .d-v { font-variant-numeric: normal; }
/* Impact by effort: the name may shrink and wrap to two lines inside its pill, so it is never cut short. */
.board.is-field .mt-name { flex: 1 1 0; min-width: 0; font-weight: 600; }

/* The rail dots take each life's colour; the dark ones need a pale ring on the green street. */
#lives .rail-dots button::after { box-shadow: 0 0 0 1.5px #FBF7EC; }

/* Pass 3. A long size label wraps beside the door number, never across it. */
.dc-size { max-width: calc(100% - 62px); line-height: 1.3; text-align: right; }
/* A figure that is really a phrase is set a step lighter and smaller, with room for its descenders. */
.stat b.long { font-size: 19px; font-weight: 700; line-height: 1.16; }