:root {
  --paper: #ffffff;
  --ink: #161616;
  --soft: #5d5d5d;
  --rule: #dddddd;
  --window: #e2e2e2;
  --band-1: #f4f4f4;
  --band-2: #ebebeb;
  --band-3: #dedede;
  --air: #8a8a8a;
  --scene-night-ink: #f2f2f2;
  --scene-night-paper: #161616;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
/* After Dark is the label's night scene, so its page is dark whatever the phone's setting.
   .day and .night also mark the cards for the other bag, which keep their own look. */
.day {
  --paper: #ffffff;
  --ink: #161616;
  --soft: #5d5d5d;
  --rule: #dddddd;
  --window: #e2e2e2;
  color-scheme: light;
}
.night {
  --paper: #141414;
  --ink: #efefef;
  --soft: #a6a6a6;
  --rule: #303030;
  --band-1: #1b1b1b;
  --band-2: #222222;
  --band-3: #2c2c2c;
  --air: #7d7d7d;
  --scene-night-ink: #efefef;
  --scene-night-paper: #141414;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
main { max-width: 40rem; margin: 0 auto; padding: 32px 20px 56px; }
a { color: inherit; text-underline-offset: 3px; }

.masthead { text-align: center; font-family: var(--serif); }
.brand { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.brand a { text-decoration: none; }
.rule { width: 9rem; margin: 6px auto 10px; border: 0; border-top: 1px solid var(--ink); }
.title { margin: 0; font-size: clamp(40px, 11vw, 56px); line-height: 1; letter-spacing: 0.02em; }
.edition { margin: 6px 0 22px; font-size: 18px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: normal; }
.scene { display: block; margin: 0 auto; max-width: 62vw; height: auto; }
.tagline { margin: 16px 0 0; font-style: italic; color: var(--soft); }

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 16px;
  margin: 36px 0 8px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.facts div { min-width: 0; }
.facts dt { font-size: 13px; color: var(--soft); }
.facts dd { margin: 2px 0 0; font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.facts dd small { display: block; font-family: var(--sans); font-size: 13px; color: var(--soft); }

h2 { margin: 44px 0 10px; font-family: var(--serif); font-size: 26px; font-weight: normal; }
p { margin: 0 0 14px; }
.lede { font-size: 19px; }

.scale { display: block; width: 100%; height: auto; margin: 6px 0 4px; }
.scale__name { font: 12.5px var(--sans); fill: var(--soft); }
.scale__name--here { font-weight: 700; fill: var(--ink); }
.scale__pair { font: italic 11px var(--sans); fill: var(--soft); }

.chart { display: block; width: 100%; height: auto; margin: 4px 0 6px; }
.band--1 { fill: var(--band-1); }
.band--2 { fill: var(--band-2); }
.band--3 { fill: var(--band-3); }
.band__name { font: 12px var(--sans); fill: var(--soft); }
.grid { stroke: var(--rule); stroke-width: 1; }
.axis { font: 11px var(--sans); fill: var(--soft); }
.line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.line--bean { stroke: var(--ink); stroke-width: 3; }
.line--air { stroke: var(--air); stroke-width: 1.6; stroke-dasharray: 5 4; }
.moment { fill: var(--paper); stroke: var(--ink); stroke-width: 2.2; }
.moment__name { font: 12px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.legend text { font: 12px var(--sans); fill: var(--soft); }

.phases { display: flex; margin: 0 0 22px; font-size: 14px; }
.phases div { padding: 8px 10px; min-width: 0; }
.phases div:nth-child(1) { background: var(--band-1); }
.phases div:nth-child(2) { background: var(--band-2); }
.phases div:nth-child(3) { background: var(--band-3); }
.phases strong { display: block; font-family: var(--serif); font-size: 18px; font-weight: normal; }
.phases span { color: var(--soft); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.timeline time { font-family: var(--serif); font-size: 20px; font-variant-numeric: tabular-nums; }
.timeline b { display: block; }
.timeline span { color: var(--soft); }

.notes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.notes li { padding: 5px 14px; border: 1px solid var(--ink); border-radius: 999px; font-family: var(--serif); font-size: 17px; }

.photo { margin: 28px 0 0; }
.photo img { display: block; width: 100%; height: auto; border-radius: 6px; }
.photo figcaption { margin-top: 8px; font-size: 14px; color: var(--soft); }

.pair { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; margin: 44px 0 0;
        padding: 16px; border: 1px solid var(--rule); border-radius: 10px; text-decoration: none;
        background: var(--paper); color: var(--ink); }
.bags .pair { margin: 0; }
.pair .scene { width: 96px; height: 96px; max-width: none; }
.pair b { display: block; font-family: var(--serif); font-size: 21px; font-weight: normal; line-height: 1.2;
          margin-bottom: 4px; }
.pair span { color: var(--soft); font-size: 15px; }
.pair:hover b, .pair:focus-visible b { text-decoration: underline; }

.colophon { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--soft); }

.masthead .duo { display: flex; justify-content: center; margin-top: 26px; }
.masthead .duo .scene { width: 150px; height: 150px; max-width: none; margin: 0; }
.masthead .duo .scene + .scene { margin-left: -14px; }
.small-print { font-size: 14px; color: var(--soft); }
.setup { list-style: none; margin: 0; padding: 0; }
.setup li { padding: 12px 0; border-top: 1px solid var(--rule); }
.setup b { display: block; font-family: var(--serif); font-size: 20px; font-weight: normal; }
.setup span { color: var(--soft); }

@media (max-width: 460px) {
  body { font-size: 16px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phases { flex-direction: column; }
  .timeline time { font-size: 18px; }
}

/* The steam drifts once when the page opens; that's the only motion. */
@media (prefers-reduced-motion: no-preference) {
  .masthead .steam { animation: rise 2.4s ease-out both; }
  .masthead .steam--late { animation-delay: 0.5s; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}