/* United States, "Kitchen Table": a WPA park poster and a roadside sign. Paper, navy ink and one barn red,
   a Clarendon slab for the headlines, and bands of gingham and quilt border between the sections. */
:root {
  --bg: #F4EFE4; --ink: #1D2A44; --ink2: #535D76; --line: rgba(29, 42, 68, .17); --panel: #FBF7EC; --panel2: #E9E1CD;
  --accent: #C8352B; --accent-ink: #fff; --pulse: #F2B63C;
  --hero-bg: #172147; --hero-ink: #F4EFE4; --hero-ink2: rgba(244, 239, 228, .74);
  --display: 'Besley', Georgia, 'Times New Roman', serif; --body: Inter, system-ui, sans-serif;
  --r: 8px; --r-sm: 5px; --shadow: 0 10px 24px rgba(29, 42, 68, .16);
  --sky: #BFDDE6; --sky2: #F6D8BF; --sky3: #D3E6CB; --sky4: #F6E5AE;
  --coin: #E2A21E; --coin-edge: #8A5A12;
}
body { background-color: var(--bg); }

/* The display face is a Clarendon slab: upright, bracketed and sturdy, set tight like wood type. */
.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; }
.insight, .move h3, .nextlife b, .mom h3, .mt-name, .mc-in h3, .take h3, .dis h3, .sbs-v b, .local, .stat b.long { font-weight: 700; }
.big { letter-spacing: -.02em; line-height: 1.0; }
.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: 700; }
#pulse h1 { letter-spacing: -.015em; }
#pulse h1 .n { color: var(--pulse); font-size: .8em; line-height: 1.12; }
.l-id h2 { letter-spacing: -.015em; }
.quote blockquote { font-weight: 400; line-height: 1.32; }
/* Besley draws its tabular zero at one weight only, so the display figures stay proportional. */
#pulse h1 .n, .ns b, .p-num, .sbs-v b, .d-year, .d-v { font-variant-numeric: normal; }
/* The six country line under each national figure reads as a note, not a second headline. */
.ns .cmp-txt b { display: inline; font: 700 11px/1.4 var(--mono); }
/* A half square triangle, the first unit of any quilt block, marks each section kicker. */
.wrap > .kicker::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background: linear-gradient(135deg, var(--accent) 50%, var(--ink) 50%); }
.go, .chip.cta { background: #B62D24; }

/* The night map: a dusk sky with two ridge lines low on the horizon. */
#pulse { background-color: var(--hero-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='200' viewBox='0 0 1440 200'%3E%3Cpath d='M0 130 L90 100 L150 114 L262 46 L332 88 L402 70 L522 124 L642 80 L702 96 L822 30 L902 82 L982 64 L1092 120 L1202 74 L1272 92 L1362 44 L1440 130 V200 H0Z' fill='%231B2751'/%3E%3Cpath d='M0 166 L112 138 L202 154 L342 112 L432 142 L562 126 L702 164 L862 128 L962 148 L1102 116 L1212 146 L1332 128 L1440 166 V200 H0Z' fill='%23202D5C'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #131C3D 0%, #172147 55%, #1A264F 100%);
  background-repeat: repeat-x, no-repeat; background-position: bottom center, center; background-size: auto 200px, cover; }

/* Printed bands between the sections */
.trim { height: 30px; }
.band { display: block; }

/* The dial sits on maize, the year on sage */
#dial { --bg: #F3E6C0; background: var(--bg); }
#year { --bg: #DDE8D6; background: var(--bg); }

/* The doors stand under a pale poster sky */
#lives { --bg: #CFE3E8; --panel: rgba(255, 253, 246, .6); --panel2: rgba(255, 253, 246, .85); --line: rgba(29, 42, 68, .22); background: var(--bg);
  background-image: linear-gradient(180deg, #C3DCE4 0%, #DCEBEA 70%, #E9F0E4 100%); }
.rail-ctl button { color: var(--ink); }
.card { opacity: 1; }
.dc { --card: #FBF7EC; --card-ink: #1D2A44; --card-ink2: #535D76; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink), 0 14px 22px rgba(29, 42, 68, .18); }
.card:not(.active) .dc { filter: saturate(.86); }
.card.active .dc { box-shadow: 0 4px 0 var(--ink), 0 20px 30px rgba(29, 42, 68, .26); }
.dc-no { background: var(--ink); color: #F4EFE4; box-shadow: 0 0 0 2px #F4EFE4; }
.dc-size { background: #FBF7EC; color: var(--ink); max-width: calc(100% - 62px); line-height: 1.3; text-align: right; }
/* The seal is the quilt board itself, hung on the wall beside the door. */
.dc-seal { background: none; border: 0; border-radius: 0; box-shadow: none; }
.dc-seal .med { width: 100%; filter: drop-shadow(0 3px 0 rgba(29, 42, 68, .3)); }
@media (max-width: 819px) { .card { width: min(78vw, 300px); } }

/* The barn quilt */
.med .petal { transform-origin: 0 0; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), opacity .4s; }
.med.bloom .petal { animation: pieceIn .8s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes pieceIn { from { transform: scale(.15); opacity: 0; } to { transform: none; opacity: 1; } }
.med .petal.hi .pc { stroke: #FFFDF6; 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%, #1D2A44); }
.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(29, 42, 68, .26); }
.move { border-top: 6px solid var(--lc); }
.stat b.long { font-size: 20px; line-height: 1.12; }
.l-house { background: #BFDDE6; border: 2px solid var(--ink); }

/* The room: a step headline can be a whole sentence, so it is set in the body face with one slab number in it. */
.step h3 { font-family: var(--body); font-weight: 500; line-height: 1.4; }
.step h3 b { font-family: var(--display); font-weight: 800; font-size: 1.18em; line-height: 1; }
@media (min-width: 900px) { .step h3 { font-size: 19px; } }

/* The room: a thin printed outline keeps the pale figures on the paper */
#crowd .fig .shape { stroke: rgba(29, 42, 68, .5); stroke-width: .8; paint-order: stroke; }

/* Moves as enamel signs: the number and the timing on one line, the badge riveted in the corner */
.mt { padding: 14px 15px; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 var(--ink); }
.mt:hover { box-shadow: 0 5px 0 var(--ink); }
.mt-top { justify-content: flex-start; align-items: baseline; gap: 10px; min-height: 30px; padding-right: 46px; }
.mt-rank { font: 800 22px/1 var(--display); color: var(--ink); letter-spacing: 0; }
.mt-ico { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; background: var(--mc); color: #fff; }
.mt-name { font-size: 20px; }
.board.is-field .mt { border-width: 1.5px; box-shadow: 0 2px 0 var(--ink); }
.board.is-field .mt-ico { position: static; width: 34px; height: 34px; }
.board.is-field .mt-name { flex: 1 1 0; min-width: 0; font-size: 12px; }
.mc-in { border: 2px solid var(--ink); border-top: 8px solid var(--mc); border-radius: 12px; }
@media (max-width: 639px) { .mt { padding: 12px; } .mt-name { font-size: 15px; line-height: 1.18; } .mt-ico { top: 9px; right: 9px; width: 32px; height: 32px; } .mt-top { padding-right: 36px; min-height: 26px; } .mt-rank { font-size: 19px; } }

/* The kicker holds one line when the column is wide enough. */
@media (min-width: 1100px) { .hero-txt .kicker { white-space: nowrap; } }
@media (min-width: 820px) and (min-aspect-ratio: 1001/1000) { #pulse h1 { font-size: clamp(42px, 5.2vw, 78px); } }

/* Close */
.take article { border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); }
.take article:nth-child(1) { background: #F8DDD3; } .take article:nth-child(2) { background: #F6E5AE; } .take article:nth-child(3) { background: #D3E6CB; }
.take article > .ico { color: var(--ink); }
.tip { background: #1D2A44; color: #F4EFE4; }
.d-card, .pn { border-color: rgba(29, 42, 68, .26); }