/* Canada, "True North": Centennial year modernism. Snow paper, deep lake ink, one clear red,
   a wide engineered grotesque, triangles for marks and flat horizon bands between the sections. */
:root {
  --bg: #F3EFE6; --ink: #16303A; --ink2: #4C5F66; --line: rgba(22, 48, 58, .17); --panel: #FBF8F1; --panel2: #E8E2D4;
  --accent: #C1272D; --accent-ink: #fff; --pulse: #FF8068;
  --hero-bg: #1A5061; --hero-ink: #FBF8F1; --hero-ink2: rgba(251, 248, 241, .8);
  --display: 'Archivo', Inter, system-ui, sans-serif; --body: Inter, system-ui, sans-serif;
  --r: 6px; --r-sm: 3px; --shadow: 0 8px 22px rgba(22, 48, 58, .14);
  --card: #FBF8F1; --card-ink: #16303A; --card-ink2: #4C5F66;
  --sky: #CBE4EA; --sky2: #F6D5C4; --sky3: #DCE4F2; --sky4: #F8E6B0;
  --snow: #FBF8F1; --lake: #1F6E9C; --glacier: #9CCFD8; --spruce: #1F6B57; --gold: #E8A82C;
}
body { background-color: var(--bg); }

/* Display type: Archivo, heavy and slightly condensed for the headlines, regular width for the small titles. */
.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, #pulse h1, .p-num, .d-year, .l-id h2, .mname, .ns b, .pn b { font-stretch: 86%; }
.big { letter-spacing: -.022em; line-height: .98; }
.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: 600; }
.big em { color: var(--accent); }
.l-id h2 { letter-spacing: -.02em; }
.stat b, .l-size .cnt, .d-v { font-stretch: 80%; }
.quote blockquote { font-weight: 400; line-height: 1.3; }

/* The section marker is a small red triangle, the edition's one repeated mark. */
.wrap > .kicker::before { content: ''; display: inline-block; width: 11px; height: 10px; margin-right: 10px; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.go, .chip.cta { border-radius: 4px; }

/* Plates, not pills: every tag and tab is a small signage plate with a 4px corner. */
.ed-btn, .nav a, .chip, .nav2 button, .ptile, .signals > span, .chans > span, .who button, .dchip, .d-gens button { border-radius: 4px; }
.ptile i { border-radius: 3px; }

/* The night map: a lake at dusk in flat horizon bands, lightest at the water line. */
#pulse { background: linear-gradient(180deg, #0B2935 0 15%, #0D303D 15% 31%, #103846 31% 48%, #134150 48% 65%, #164959 65% 82%, #1A5061 82% 100%); }
#pulse h1 { font-size: clamp(44px, 5.5vw, 82px); letter-spacing: -.02em; }
#pulse h1 .n { color: var(--pulse); }
.hero-layers button { border-color: rgba(251, 248, 241, .34); background: rgba(8, 32, 42, .5); border-radius: 4px; }
.nation { border-color: rgba(251, 248, 241, .16); }

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

/* The dial sits on glacier water, the year on a dawn sky */
#dial { --bg: #DCEBEA; background: var(--bg); }
#year { --bg: #F8E6D8; --panel: #FBF8F1; --panel2: #F1D9C8; --line: rgba(22, 48, 58, .24); background: var(--bg); }

/* The doors stand in tamarack gold: three flat bands of late afternoon. */
#lives { --bg: #E8A82C; --ink: #16303A; --ink2: rgba(22, 48, 58, .86); --line: rgba(22, 48, 58, .32); --panel: rgba(251, 248, 241, .45); --panel2: rgba(251, 248, 241, .62); color: var(--ink);
  background: linear-gradient(180deg, #EFBA52 0 20%, #E8A82C 20% 62%, #E09C20 62% 100%); }
#lives .big em { color: #96181F; }
#lives .wrap > .kicker::before { background: #96181F; }
.rail-ctl button { color: var(--ink); }
.card { opacity: 1; }
.dc { border: 2px solid var(--card-ink); border-bottom: 9px solid var(--lc, var(--card-ink)); border-radius: 5px; box-shadow: 0 10px 20px rgba(92, 56, 0, .24); }
.card:not(.active) .dc { filter: saturate(.86); }
.card.active .dc { box-shadow: 0 16px 30px rgba(92, 56, 0, .34); }
.dc-sky { border-radius: 2px; }
.dc-sky::before { background: #FBF8F1; }
.dc-no { border-radius: 50%; background: #16303A; color: #FBF8F1; box-shadow: 0 0 0 2px #FBF8F1; }
.dc-size { background: #FBF8F1; color: #16303A; border-radius: 3px; max-width: calc(100% - 60px); line-height: 1.3; text-align: right; }
.dc-seal { width: 88px; height: 88px; border-radius: 50%; background: transparent; border: 0; box-shadow: none; }
.dc-seal .med { width: 100%; filter: drop-shadow(0 3px 5px rgba(22, 48, 58, .28)); }
@media (max-width: 819px) { .card { width: min(78vw, 300px); } }

/* Window glass: glacier by day, lamp gold where someone is home. */
.house .glass { fill: #A9D3DC; }
.house .glass.lit { fill: #FFDE8A; }
.l-house { background: #CBE4EA; border: 2px solid var(--ink); border-radius: 4px; }

/* The compass rose */
.med .petal { transform-origin: 0 0; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .4s; }
.med.bloom .petal { animation: pointOut .9s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes pointOut { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.med .petal.hi path.edge { stroke-width: 3.6; }
.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%, #16303A); }
.life-top { border-bottom: 3px solid var(--ink); }
.lt-id span { font: 800 20px/1 var(--display); }
.stat, .pair li, .ptile, .voice, .signals > span, .chans > span, .sd { border-color: rgba(22, 48, 58, .26); }
.move { border: 1px solid rgba(22, 48, 58, .26); border-top: 6px solid var(--lc); }
.l-sec > .kicker::before { content: ''; display: inline-block; width: 10px; height: 9px; margin-right: 9px; background: var(--lc-ink, var(--accent)); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@media (min-width: 820px) { .life-in { border-radius: 10px; border: 2px solid var(--ink); } }

/* The room of 100: a hairline keeps the pale figures off the paper. */
#crowd .fig .shape { stroke: rgba(22, 48, 58, .5); stroke-width: .9; paint-order: stroke; }

/* The moves board: survey cards, crisp corners, a solid colour disc per move. */
.mt { border: 1.5px solid rgba(22, 48, 58, .3); box-shadow: 0 2px 0 rgba(22, 48, 58, .1); }
.mt:hover { border-color: var(--ink); box-shadow: 0 8px 18px rgba(22, 48, 58, .16); }
.mt-ico { background: var(--mc); color: #fff; }
.board.is-field .mt { border-radius: 5px; }
.mc-in { border-radius: 8px; border: 2px solid var(--ink); border-top: 8px solid var(--mc); }
.seg { border-radius: 6px; }
.seg button { border-radius: 4px; }
.mom { border-left-width: 6px; }

/* The close: three takeaways on dawn pink, tamarack and glacier. */
.take article { border: 2px solid var(--ink); }
.take article:nth-child(1) { background: #F6D5C4; }
.take article:nth-child(2) { background: #F8E6B0; }
.take article:nth-child(3) { background: #D3E8E8; }
.take article p, .take .tn { color: #3B4F57; }
.take article > .ico { color: var(--accent); }
.tip { background: #16303A; color: #FBF8F1; border-radius: 5px; }
.d-card, .pn { border-color: rgba(22, 48, 58, .26); }

/* Field view: let a long move name wrap onto two lines inside its plate. */
.board.is-field .mt-name { flex: 1 1 0; min-width: 0; }
/* Comparison line in the nation strip: the rank is a bold run inside the mono line, not a second headline. */
.ns .cmp-txt b { display: inline; font: 700 11px/1.4 var(--mono); font-stretch: normal; }