/* Singapore, "Can or Not?": glazed tile and painted shophouse. Porcelain paper, navy ink, one red,
   jade for the doors, and a row of pastel grounds (mint, rose, butter) like a terrace of five foot ways.
   A soft old style serif for the headlines, bands of tile between the sections. */
:root {
  --bg: #F4F1E8; --ink: #14213D; --ink2: #47536D; --line: rgba(20, 33, 61, .17); --panel: #FFFDF7; --panel2: #E9E4D3;
  --accent: #D12339; --accent-ink: #fff; --pulse: #FFD56E;
  --hero-bg: #0B3A3C; --hero-ink: #FBF8EF; --hero-ink2: rgba(251, 248, 239, .78);
  --display: 'Fraunces', Georgia, 'Times New Roman', serif; --body: Inter, system-ui, sans-serif;
  --r: 9px; --r-sm: 5px; --shadow: 0 10px 26px rgba(20, 33, 61, .14);
  --jade: #1E9A8A; --jade-d: #136F68; --rose: #E8869C; --pink: #F7CBD3; --mint: #C6E8D9; --butter: #F8DE8E; --porcelain: #FFFDF7;
  --sky: #CDE6F2; --sky2: #FBE4AE; --sky3: #D2ECDD; --sky4: #F9D3D9;
  --card: #FFFDF7; --card-ink: #14213D; --card-ink2: #47536D;
  --coin: #F2B632; --coin-edge: #8A5A12;
}
body { background-color: var(--bg); font-variation-settings: 'SOFT' 100; }

/* The display face is a soft serif: set at a firm weight and upright, with the italic kept for the one word of emphasis. */
.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: 600; }
.big { letter-spacing: -.02em; line-height: 1.02; }
.big em { font-style: italic; font-weight: 500; }
.ed-btn span, .ed-menu a span, .hero-txt .kicker span, .local, .oe a b { font-style: normal; }
.ed-btn span, .ed-menu a span, .hero-txt .kicker span { font-weight: 600; }
#pulse h1 { letter-spacing: -.02em; line-height: 1; }
#pulse h1 .n { color: var(--pulse); }
.l-id h2 { letter-spacing: -.015em; }
.quote blockquote { font-weight: 400; line-height: 1.32; }
.dc-cap > b { font-weight: 600; letter-spacing: -.012em; }
.p-num { letter-spacing: -.02em; }
/* The kicker mark is a small glazed tile: a red square in a navy line. */
.wrap > .kicker::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--ink); vertical-align: 0; }
.go, .chip.cta { background: #C81F35; }
.go { border-radius: 8px; box-shadow: 0 3px 0 #7E0F1F; }

/* The read-out strip under the night map: a rose signboard with a navy rule. */
.nation { background: var(--pink); color: var(--ink); border-top: 3px solid var(--ink); }
.ns { border-right-color: rgba(20, 33, 61, .26); }
.ns b small, .ns em { color: rgba(20, 33, 61, .8); }
.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.me { background: var(--accent); box-shadow: 0 0 0 2px var(--porcelain); }
.nation :focus-visible { outline-color: var(--ink); }
@media (max-width: 899px) { .ns { border-bottom-color: rgba(20, 33, 61, .26); } }

/* Hero controls */
.hero-layers button { border-radius: 8px; background: rgba(251, 248, 239, .08); border-color: rgba(190, 236, 224, .36); }
.hero-layers button.on { background: var(--butter); color: var(--ink); border-color: var(--butter); }

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

/* A terrace of pastel grounds: mint under the dial, rose along the street of doors, butter under the year. */
#dial { --bg: #D8EFE3; --panel2: #BFE0D0; --accent: #BE1A30; background: var(--bg); }
#lives { --bg: #F8DADD; --panel2: #F0C2C9; --accent: #BE1A30; --line: rgba(20, 33, 61, .2); background: var(--bg);
  background-image: radial-gradient(rgba(255, 253, 247, .5) 1.6px, transparent 2.2px), radial-gradient(rgba(255, 253, 247, .5) 1.6px, transparent 2.2px); background-size: 28px 28px; background-position: 0 0, 14px 14px; }
#year { --bg: #FBEBB7; --panel2: #F1DB96; --accent: #BE1A30; background: var(--bg); }

/* The doors: porcelain cards on a rose kerb. */
.card { opacity: 1; }
.dc { border: 2px solid var(--ink); box-shadow: 0 6px 0 #E493A5; }
.card:not(.active) .dc { filter: saturate(.88); }
.card.active .dc { box-shadow: 0 9px 0 #DC7F94; }
.dc-no { border-radius: 6px; background: var(--jade-d); color: #fff; box-shadow: 0 0 0 2px var(--porcelain), 0 0 0 3.5px var(--ink); }
.dc-size { border-radius: 4px; background: var(--porcelain); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); max-width: calc(100% - 64px); line-height: 1.3; text-align: right; }
.dc-seal { width: 88px; height: 88px; right: 8px; background: none; border: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 4px 0 rgba(20, 33, 61, .2)); }
.dc-seal .med { width: 100%; }
@media (max-width: 819px) { .card { width: min(78vw, 300px); } }

/* The tile: petals open one by one. */
.med .petal { transform-origin: 0 0; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), opacity .4s; }
.med.bloom .petal { animation: petalIn .85s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 65ms); }
@keyframes petalIn { from { transform: scale(.3) rotate(-24deg); opacity: 0; } to { transform: none; opacity: 1; } }
.med .petal.hi path:first-child { stroke-width: 3.6; }
.med .plabel { cursor: pointer; }
.med .plabel.hi rect { stroke: var(--accent); stroke-width: 3.5; }
.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) 60%, #14213D); }
.life-top { border-bottom: 3px solid var(--ink); }
.lt-id span { font: 600 20px/1 var(--display); }
.stat, .pair li, .ptile, .voice, .move, .signals > span, .chans > span, .sd { border-color: rgba(20, 33, 61, .26); }
.move { border-top-width: 6px; }
.l-house { background: var(--sky); border: 2px solid var(--ink); }

/* The room: a fine navy outline on every figure, so the pale ones hold on porcelain. */
#crowd .fig .shape { stroke: rgba(20, 33, 61, .55); stroke-width: .8; paint-order: stroke; stroke-linejoin: round; }

/* The birth dial: a porcelain plate, a navy boss, a red knob. */
.d-plate { fill: var(--porcelain); stroke-width: 3; }
.d-gen-arc { opacity: .5; }
.d-lab { stroke: var(--porcelain); }
.d-born, .d-year { fill: var(--porcelain); }
.d-gens button, .d-ctl button { border-color: rgba(20, 33, 61, .3); }

/* Moves as tiles on a wall. */
.mt { border: 2px solid var(--ink); border-radius: 9px; box-shadow: 0 4px 0 var(--ink); }
.mt:hover { box-shadow: 0 6px 0 var(--ink); }
.mt-rank { font: 600 21px/1 var(--display); color: var(--ink); letter-spacing: 0; }
.mt-ico { background: var(--mc); color: #fff; border-radius: 7px; }
.board.is-field .mt { border-width: 1.5px; box-shadow: 0 3px 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: 0 5px 0 var(--ink); }
.take article:nth-child(1) { background: #F9D5DB; } .take article:nth-child(2) { background: #CFEBDD; } .take article:nth-child(3) { background: #FBE7AC; }
.take article > .ico { color: var(--ink); }
.tip { background: #14213D; color: #FFFDF7; }
.d-card, .pn { border-color: rgba(20, 33, 61, .26); }