/* Australia, "Fair Go": a mid-century travel poster. Sun-bleached cream, terracotta, eucalypt and deep sky,
   a heavy grotesque for the headlines, and bands of Federation tile between the sections. */
:root {
  --bg: #F7EBD0; --ink: #17283B; --ink2: #55606B; --line: rgba(23, 40, 59, .16); --panel: #FDF6E3; --panel2: #EEDDB6;
  --accent: #D9512C; --accent-ink: #fff; --pulse: #F2C230;
  --hero-bg: #10202F; --hero-ink: #FBF3DF; --hero-ink2: rgba(251, 243, 223, .7);
  --display: 'Bricolage Grotesque', Inter, system-ui, sans-serif; --body: Inter, system-ui, sans-serif;
  --r: 10px; --r-sm: 6px; --shadow: 0 10px 26px rgba(23, 40, 59, .16);
  --terra: #C8502D; --teal: #1F7A8C; --gum: #5C8A6B; --wattle: #F2C230; --cream: #FBF3DF;
  --sky2: #F6D9B8; --sky3: #CDE6D0; --sky4: #F9E3A6;
}
body { background-color: var(--bg); }

/* The display face is a grotesque: heavy 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: 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: -.025em; 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; }
#pulse h1 { letter-spacing: -.012em; }
#pulse h1 .n { color: var(--pulse); }
.l-id h2 { letter-spacing: -.02em; }
.quote blockquote { font-weight: 400; line-height: 1.3; }
.wrap > .kicker::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; background: var(--accent); transform: rotate(45deg); }
.go, .chip.cta { background: #C2421E; }

/* Tile bands between the sections */
.trim { height: 34px; }
.tileband { display: block; }

/* The dial sits on cream, the year under a pale sky */
#dial { --bg: #FCF4DF; background: var(--bg); }
#year { --bg: #D9EEF2; background: var(--bg); }

/* The doors stand on a deep teal street */
#lives { --bg: #17606F; --ink: #FBF3DF; --ink2: rgba(251, 243, 223, .8); --line: rgba(251, 243, 223, .26); --panel: rgba(251, 243, 223, .1); --panel2: rgba(251, 243, 223, .16); background: var(--bg); color: var(--ink);
  background-image: radial-gradient(rgba(251, 243, 223, .07) 1.5px, transparent 2px); background-size: 22px 22px; }
#lives .big em { color: var(--pulse); }
#lives .wrap > .kicker::before { background: var(--pulse); }
.rail-ctl button { color: var(--ink); }
.card { opacity: 1; }
.dc { border: 2px solid #17283B; box-shadow: 5px 6px 0 rgba(10, 26, 38, .5); }
.card:not(.active) .dc { filter: saturate(.82); }
.card.active .dc { box-shadow: 7px 9px 0 rgba(10, 26, 38, .55); }
@media (max-width: 819px) { .card { width: min(78vw, 300px); } }

/* The sunburst gable */
.med .petal { transform-origin: 0 0; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .4s; }
.med.bloom .petal { animation: rayIn .9s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes rayIn { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.med .petal.hi path { stroke-width: 3.2; }
.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%, #17283B); }
.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(23, 40, 59, .26); }
.move { border-top-width: 6px; }
.l-house { background: #BFE3EA; border: 2px solid var(--ink); }

/* The room: a printed outline on every figure */
#crowd .fig .shape { stroke: rgba(23, 40, 59, .5); stroke-width: .9; paint-order: stroke; }

/* Moves as poster tiles */
.mt { border: 2px solid var(--ink); border-radius: 8px; box-shadow: 3px 3px 0 var(--ink); }
.mt:hover { box-shadow: 5px 5px 0 var(--ink); }
.mt-rank { font: 800 20px/1 var(--display); color: var(--ink); letter-spacing: 0; }
.mt-ico { background: var(--mc); color: #fff; }
.board.is-field .mt { border-width: 1.5px; box-shadow: 2px 2px 0 var(--ink); }
.mc-in { border: 2px solid var(--ink); border-top: 8px solid var(--mc); border-radius: 10px; }

/* Close */
.take article { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.take article:nth-child(1) { background: #FBE0E0; } .take article:nth-child(2) { background: #FCEFC2; } .take article:nth-child(3) { background: #D9EEF2; }
.take article > .ico { color: var(--ink); }
.tip { background: #17283B; color: #FBF3DF; }
.d-card, .pn { border-color: rgba(23, 40, 59, .26); }

/* The nation strip: six sun-bleached poster tiles under the night map */
.nation { border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.ns { border-color: rgba(23, 40, 59, .55); }
.ns:nth-child(6n+1) { background: #FBE0E0; } .ns:nth-child(6n+2) { background: #FCEFC2; } .ns:nth-child(6n+3) { background: #D9EEF2; }
.ns:nth-child(6n+4) { background: #DCEBD9; } .ns:nth-child(6n+5) { background: #F6D9B8; } .ns:nth-child(6n+6) { background: #E7E0F1; }
.ns em, .ns > b small { color: #46525E; }
.ns .cmp-txt { opacity: 1; color: #46525E; }
.ns .cmp-txt b { font-weight: 600; color: var(--ink); }
.ns .cmp-track i.me { box-shadow: 0 0 0 1.5px var(--ink); }

/* Five layer chips sit on one row beside the map */
@media (min-width: 820px) { .hero-layers { max-width: 640px; } }