/* Generated by scripts/fetch-fonts.js from Google Fonts css2; do not edit by hand.
   build.js replaces each __FONT_<file>__ with the content-hashed /fonts/ path. */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/fonts/monasans-latin-ext.5658cdee.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/fonts/monasans-latin.5ea37406.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/manrope-latin-ext.3911b66d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/manrope-latin.a30ddcd3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/dmmono-400-latin-ext.a52e19eb.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/dmmono-400-latin.e1896b13.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/dmmono-500-latin-ext.8711f938.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/dmmono-500-latin.9964608a.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Carlito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/carlito-400-italic-latin-ext.8ebd4b55.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Carlito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/carlito-400-italic-latin.6bbdd83c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/carlito-400-latin-ext.c62f0fc5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/carlito-400-latin.a29c4a4e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/carlito-700-latin-ext.ac72169e.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/carlito-700-latin.af249cfe.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/caveat-600-latin-ext.ec90c36c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/caveat-600-latin.d51e2283.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   dataisugly.com, the full site. The stylesheet is the approved mocks', moved into a file
   because the CSP allows no inline style:
     - round three's (DataIsUgly/mocks-v3/index.html, its one <style>): the bar, the hero,
       the cards, the controls, the foot row, wealth's hand-written "Try it!" and the six
       round-three tiles' own rules, verbatim;
     - round four's additions (DataIsUgly/mocks-v4/index.html): the big number's "$" and
       label emphasis, and the nine round-four tiles' own rules, verbatim;
     - the teaser's production rules: the Artifact host's skeleton written out, the closing
       line (.next) and the 404 page (.nf);
     - dropped: the review-only Comment button and round four's compact masthead (the site
       opens on round three's coin-flip hero, which teaches See it ugly by doing it).
   build.js puts the vendored @font-face rules (fonts/faces.css) in front.

   The look: Night's poster voice (the giant wide-caps wordmark, heavy condensed caps
   titles, giant numbers) set on Sibling's light page (lavender paper, white hairline cards,
   Manrope for everything read, DM Mono for kickers, stamps and ticks). Dark is only where
   the subject is dark (Voyager's space and the whale's sea, drawn by the engines inside
   their charts), the footer and small UI accents. Orange means ugly. Every tile wears its
   own subject's hue (--k). The page owns everything outside .t-chart and .t-controls and
   never draws over them.
   ========================================================================== */
/* The document skeleton round three was published inside (the Artifact host's, as
   scripts/wrap_index.py reproduces it for local QA). The safe-area padding on the root is
   part of round three's notch handling: the bar sticks below the inset, its ::before
   frosts the strip above, and the footer's negative margin runs the navy under a home bar. */
:root { color-scheme: light; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
img { max-width: 100%; }

:root {
  color-scheme: light;
  --paper: #EEF0F8;          /* the page */
  --card: #FFFFFF;           /* every card */
  --tint: #F4F5FB;           /* hover fills, slider tracks */
  --tint-2: #E9EBF5;         /* the segmented track, chips */
  --ctx: #C7CADB;            /* generic context marks */
  --ink: #15122F;            /* titles, body: 18.1:1 on white, 15.9:1 on the page */
  --ink-2: #45435F;          /* labels, body: 9.5:1 / 8.3:1 */
  --ink-3: #595873;          /* sources, quiet text: 6.8:1 / 6.0:1 */
  --navy: #15122F;           /* the footer and the dark UI accents */
  --on-ink: #F6F4FF;         /* text on navy: 16.7:1 */
  --on-ink-2: #BDB9D9;       /* quiet text on navy: 9.6:1 */
  --hair: rgba(21, 18, 47, .10);
  --hair-2: rgba(21, 18, 47, .18);
  --hair-3: rgba(21, 18, 47, .32);
  --indigo: #4B54D9;         /* focus ring, the Try it! arrow: 5.9:1 on white */
  --indigo-deep: #393FB3;    /* the Try it! note, pressed toggle text: 8.3:1 */
  --indigo-wash: #E6EDFF;    /* pressed toggle fill */
  --teal: #008B8C;
  --teal-ink: #00777A;       /* white on it: 5.4:1 */
  --hot: #EC5410;            /* UGLY in the giant wordmark */
  --hot-ink: #C2380B;        /* UGLY in the bar's wordmark */
  --hot-lit: #FF6A2B;        /* UGLY on navy; the pressed See it ugly icon's first bar */
  --space: #0B1027;          /* Voyager's glyph disc */

  --f-display: "Mona Sans", "Segoe UI", system-ui, sans-serif;  /* wordmark, titles, numbers */
  --f-text: "Manrope", "Segoe UI", system-ui, sans-serif;       /* everything you read */
  --f-mono: "DM Mono", ui-monospace, Consolas, monospace;       /* kickers, stamps, ticks */
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;   /* the one Try it! note */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --gut: clamp(16px, 4vw, 56px);
  --wrap: 1240px;
  --pad: clamp(18px, 3.1vw, 44px);
  --radius: clamp(20px, 2vw, 28px);
  --gap: clamp(14px, 2.2vw, 28px);
  --bar-h: 56px;
  --k: var(--ink); --k-ink: var(--ink);
}
/* --k: the tab, the marker under the lit phrase, link underlines.
   --k-ink: the lit phrase, the big number and its unit, the range fill. */
[data-tile="hero"]    { --k: #E3A21C; --k-ink: #8A5B00; }   /* coin gold */
[data-tile="wealth"]  { --k: #4B54D9; --k-ink: #4B54D9;     /* the richest 1%, indigo */
                        --k2: #008B8C; --k2-ink: #00777A; } /* the poorest half, teal */
[data-tile="voyager"] { --k: #F2B53A; --k-ink: #8A5B00; }   /* the probe's gold */
[data-tile="tomato"]  { --k: #E3392B; --k-ink: #C0261B; }   /* tomato red */
[data-tile="half"]    { --k: #7C4DE6; --k-ink: #6A3CDB; }   /* violet: the circle of people */
[data-tile="kyoto"]   { --k: #E8457F; --k-ink: #C21D5C; }   /* sakura */
[data-tile="breath"]  { --k: #2CC4C1; --k-ink: #08767C;     /* the record dive's aqua */
                        --you: #FFD23F; }                   /* you, at the surface */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* engines hide their controls with the attribute */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper);
  scroll-padding-top: calc(var(--bar-h) + 14px + env(safe-area-inset-top, 0px));
}
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="reduced"]):not(.is-paused) { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink);
  font: 500 16px/1.55 var(--f-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: rgba(75, 84, 217, .18); }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; } /* the ring follows each control's own shape */
a:focus-visible { border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: 16px; top: -120px; z-index: 60; padding: 12px 18px; border-radius: 12px;
  background: var(--card); color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: 0 0 0 2px var(--ink);
}
.skip:focus { top: calc(10px + env(safe-area-inset-top, 0px)); }
main:focus { outline: none; }

/* ---------- the bar: clear over the hero, frosted once the giant wordmark has gone ---------- */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: rgba(238, 240, 248, 0); box-shadow: 0 1px 0 rgba(21, 18, 47, 0);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), -webkit-backdrop-filter .3s var(--ease), backdrop-filter .3s var(--ease);
}
/* on a notched phone the strip above the bar (the safe area) frosts with it */
.bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: env(safe-area-inset-top, 0px); background: inherit; -webkit-backdrop-filter: inherit; backdrop-filter: inherit; pointer-events: none; }
html:not(.h1-in) .bar {
  background: rgba(238, 240, 248, .82); box-shadow: 0 1px 0 var(--hair);
  -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px);
}
.bar-in { max-width: calc(var(--wrap) + 2 * var(--gut)); min-height: var(--bar-h); margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; gap: 12px; }
.brand { flex: none; display: block; width: 26px; height: 26px; }
.mark {
  margin: 0 auto 0 0; white-space: nowrap; color: var(--ink);
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 15px; line-height: 1;
  letter-spacing: .07em; text-transform: uppercase;
  transition: opacity .3s var(--ease), visibility .3s;
}
.mark .hl { color: var(--hot-ink); }
html.h1-in .mark { opacity: 0; visibility: hidden; }
.pause {
  -webkit-appearance: none; appearance: none; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hair-2); background: rgba(255, 255, 255, .72); color: var(--ink-2); font: 600 13.5px/1 var(--f-text);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pause:hover { border-color: var(--hair-3); background: var(--card); color: var(--ink); }
.pause-ico { position: relative; flex: none; width: 10px; height: 12px; }
.pause-ico::before, .pause-ico::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 1px; background: currentColor; }
.pause-ico::before { left: 0; }
.pause-ico::after { right: 0; }
/* paused: a navy pill with the play icon, one of the few dark accents */
.pause[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-ink); }
.pause[aria-pressed="true"] .pause-ico::before {
  left: 1px; width: 0; height: 0; border-radius: 0; background: none;
  border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor;
}
.pause[aria-pressed="true"] .pause-ico::after { display: none; }
@media (max-width: 639px) {
  .mark { font-size: 14px; letter-spacing: .06em; }
  .pause { padding: 0; }
  .pause-txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- the hero: the poster's wordmark on light paper, then the coin-flip card ---------- */
.hero { padding-top: clamp(20px, 4.4vw, 56px); }
.hero-in { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.h-head { container-type: inline-size; }
.h-site {
  padding-left: .035em; text-align: center; white-space: nowrap; color: var(--ink);
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: min(10.5rem, 12.3cqi); line-height: .82;
  letter-spacing: .035em; text-transform: uppercase;
}
.h-site .hl { color: var(--hot); }
.h-rule { height: 4px; margin: clamp(14px, 2vw, 24px) 0 0; border-radius: 2px; background: var(--navy); }
.h-tag {
  margin: clamp(12px, 1.6vw, 20px) auto 0; max-width: 46ch; text-align: center; color: var(--ink-2); text-wrap: balance;
  font-family: var(--f-display); font-weight: 700; font-stretch: 112%; font-size: clamp(15.5px, .55rem + 1.15vw, 23px); line-height: 1.3; letter-spacing: .035em;
}
.hero-card {
  position: relative; margin-top: clamp(20px, 3.4vw, 44px); background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: var(--pad); display: grid; grid-template-columns: minmax(0, 1fr);
  box-shadow: 0 30px 60px -44px rgba(21, 18, 47, .45);
}
.hero .t-title { font-size: clamp(24px, .5rem + 2.6vw, 44px); max-width: 24ch; }
.hero .t-big { --b-ch: 3.1; }
.hero .t-controls { justify-content: center; } /* the engine centres its chart; the toggle sits under it */
/* a short phone (under 700 px tall): the big number steps aside so the toggle stays on the
   first screen; the title's lit 50.8% and the bar values still carry it */
@media (max-height: 699px) { .hero .t-big { display: none; } }
@media (min-width: 1000px) {
  /* the poster's chart: the claim and its source on the left, the snap on the right */
  .hero-card {
    grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "copy chart" "end chart" ". chart" ". controls"; column-gap: clamp(36px, 4.4vw, 72px);
  }
  .hero-copy { grid-area: copy; padding-top: 4px; }
  .hero .t-chart { grid-area: chart; margin-top: 0; }
  .hero .t-controls { grid-area: controls; }
  .hero .t-end { grid-area: end; margin-top: 26px; }
  .hero .t-big { --b-max: 156px; }
}

/* ---------- the cards: white, hairline, each with its subject's tab ---------- */
.tiles { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.tile { position: relative; margin-top: var(--gap); background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); }
.tile::before, .hero-card::before { /* the tab: a short bar of the tile's hue on the card's top edge */
  content: ""; position: absolute; z-index: 1; top: -1px; left: var(--pad); width: clamp(40px, 4vw, 56px); height: 5px;
  border-radius: 0 0 4px 4px; background: var(--k); pointer-events: none;
}
/* the card's rounded inner edge clips a drawn object that reaches into the padding;
   .t-in clips, not .tile, so the tab keeps its place over the border */
.t-in { padding: var(--pad); display: flex; flex-direction: column; min-width: 0; overflow: clip; border-radius: calc(var(--radius) - 1px); }

/* the kicker row: the subject's glyph, then its name */
.t-top { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.t-glyph { flex: none; display: block; height: 24px; width: calc(24px * var(--ga, 1)); overflow: visible; }
.t-kicker { min-width: 0; color: var(--ink); font: 500 12.5px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 1000px) { .t-glyph { height: 28px; width: calc(28px * var(--ga, 1)); } }

/* the title: Night's heavy condensed caps in ink; one phrase lit in the tile's hue */
.t-title {
  margin-top: 14px; color: var(--ink); text-wrap: balance;
  font-family: var(--f-display); font-weight: 900; font-stretch: 80%; font-size: clamp(26px, .45rem + 3.2vw, 54px); line-height: .98;
  letter-spacing: .008em; text-transform: uppercase;
}
.t-title .hl {
  --mk: color-mix(in srgb, var(--k) 26%, transparent);
  color: var(--k-ink); -webkit-box-decoration-break: clone; box-decoration-break: clone;
  /* a marker stroke under the lit words, from 62% to 92% of the line box */
  background: linear-gradient(transparent 62%, var(--mk) 62%, var(--mk) 92%, transparent 92%);
}
.t-title .hl.k2 { --mk: color-mix(in srgb, var(--k2) 26%, transparent); color: var(--k2-ink); }
@media (max-width: 379px) { .t-title { font-size: 24px; } } /* a 360 px phone: three lines at most */

/* the giant number, sized to its column, in the tile's colour */
.t-big { margin-top: 16px; container-type: inline-size; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; --b-max: 66px; --b-ch: 2.4; }
.t-big-value {
  flex: none; white-space: nowrap; color: var(--k-ink);
  font-family: var(--f-display); font-weight: 900; font-stretch: 110%; font-size: calc(var(--b-max) * .8); line-height: .84;
  letter-spacing: -.025em; font-variant-numeric: lining-nums;
}
@supports (width: 1cqi) { .t-big-value { font-size: min(var(--b-max), calc(100cqi / var(--b-ch))); } }
.t-big-unit { font-size: .42em; font-stretch: 100%; letter-spacing: 0; margin-left: .1em; color: var(--k-ink); }
.t-big-label { flex: 1 1 12ch; min-width: 12ch; max-width: 30ch; padding-bottom: .1em; color: var(--ink-2); font: 600 clamp(15px, .8rem + .3vw, 19px)/1.3 var(--f-text); letter-spacing: -.005em; text-wrap: pretty; }
[data-tile="voyager"] .t-big { --b-ch: 2.8; }
[data-tile="tomato"] .t-big { --b-ch: 1.7; }
[data-tile="half"] .t-big { --b-ch: 4.9; }
[data-tile="kyoto"] .t-big { --b-ch: 4.9; }
[data-tile="breath"] .t-big { --b-ch: 3.2; }
@media (max-width: 639px) { [data-tile="kyoto"] .t-big { --b-max: 52px; } } /* a long value: small enough for its label to sit beside it */
@media (min-width: 640px) { .t-big { --b-max: 104px; } }

/* ---------- the chart box: the engine draws inside it and nothing else does ----------
   Heights (CONTRACT-v3 2.3): each keeps a tile and its main control inside 85svh on a
   390 x 660 phone. Every svh line has a vh line before it, for browsers without svh. */
.t-chart { position: relative; width: 100%; min-width: 0; height: var(--ch, 260px); margin-top: clamp(20px, 2.4vw, 32px); }
.t-chart > svg { overflow: visible; }
[data-tile="hero"]    { --ch: clamp(240px, calc(100vh - 510px), 380px); }
[data-tile="wealth"]  { --ch: clamp(244px, 37vh, 300px); }
[data-tile="voyager"] { --ch: clamp(240px, calc(85vh - 310px), 440px); }
[data-tile="tomato"]  { --ch: clamp(220px, 34vh, 290px); }
[data-tile="half"]    { --ch: clamp(264px, calc(100vh - 396px), 460px); }
[data-tile="kyoto"]   { --ch: clamp(232px, 35vh, 300px); }
[data-tile="breath"]  { --ch: clamp(236px, 35vh, 300px); }
@supports (height: 1svh) {
  [data-tile="hero"]    { --ch: clamp(240px, calc(100svh - 510px), 380px); }
  [data-tile="wealth"]  { --ch: clamp(244px, 37svh, 300px); }
  [data-tile="voyager"] { --ch: clamp(240px, calc(85svh - 310px), 440px); }
  [data-tile="tomato"]  { --ch: clamp(220px, 34svh, 290px); }
  [data-tile="half"]    { --ch: clamp(264px, calc(100svh - 396px), 460px); }
  [data-tile="kyoto"]   { --ch: clamp(232px, 35svh, 300px); }
  [data-tile="breath"]  { --ch: clamp(236px, 35svh, 300px); }
}
@media (min-width: 640px) {
  [data-tile="hero"]    { --ch: clamp(320px, 44vh, 420px); }
  @supports (height: 1svh) { [data-tile="hero"] { --ch: clamp(320px, 44svh, 420px); } }
  [data-tile="wealth"]  { --ch: clamp(300px, 28vw, 372px); }
  [data-tile="voyager"] { --ch: clamp(360px, 40vw, 460px); }
  [data-tile="tomato"]  { --ch: clamp(340px, 44vh, 420px); }
  [data-tile="half"]    { --ch: clamp(380px, 54vw, 520px); }
  [data-tile="kyoto"]   { --ch: clamp(300px, 27vw, 380px); }
  [data-tile="breath"]  { --ch: clamp(260px, 23vw, 330px); }
}
@media (min-width: 1000px) {
  [data-tile="hero"]    { --ch: clamp(360px, 46vh, 460px); }
  [data-tile="voyager"] { --ch: clamp(420px, 52vh, 520px); }
  [data-tile="half"]    { --ch: clamp(480px, 42vw, 580px); }
}
/* the two stages (space, the sea): on a phone the chart box bleeds to 8 px from the
   card's edge; the engine paints the dark panel itself, so the ugly view has none */
@media (max-width: 639px) { [data-stage] .t-chart { width: auto; margin-inline: calc(8px - var(--pad)); } }

/* ---------- engine controls: the classes every look styles ---------- */
.t-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; min-width: 0; }
.t-controls:empty { display: none; }
.t-controls > div:not(.t-seg) { flex: 1 1 100%; min-width: 0; }
.t-controls > div:not(.t-seg) > .t-note { margin-top: 6px; }
.t-btn {
  -webkit-appearance: none; appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer; white-space: nowrap; user-select: none;
  border: 1.5px solid var(--hair-2); background: var(--card); color: var(--ink);
  font: 700 15px/1 var(--f-text); letter-spacing: -.005em; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s ease, box-shadow .2s var(--ease), transform .15s var(--ease);
}
.t-btn:hover { border-color: var(--hair-3); background: var(--tint); }
.t-btn:active { transform: translateY(1px) scale(.985); }
.t-btn svg { flex: none; }
/* a toggle that is on (Sound) */
.t-btn[aria-pressed="true"] { border-color: var(--indigo); background: var(--indigo-wash); color: var(--indigo-deep); }
/* the main action: a navy pill, one of the page's few dark accents, never the data's hue */
.t-btn.is-primary { border-color: var(--navy); background: var(--navy); color: var(--on-ink); box-shadow: 0 14px 26px -18px rgba(21, 18, 47, .9); }
.t-btn.is-primary:hover { border-color: #2A2652; background: #2A2652; }
/* held down: teal, or the tile's own "you" (the whale's Hold your breath turns yellow) */
.t-btn.is-primary[aria-pressed="true"] { border-color: var(--teal-ink); background: var(--teal-ink); color: #FFFFFF; box-shadow: none; }
[data-tile="breath"] .t-btn.is-primary[aria-pressed="true"] { border-color: var(--you); background: var(--you); color: var(--ink); }
.t-btn:disabled, .t-btn[aria-disabled="true"] { opacity: .5; cursor: default; transform: none; }
@media (max-width: 639px) { .t-controls { column-gap: 10px; } .t-btn { padding: 0 16px; } }
/* a phone: tomato's Play and Sound share one row (the engine holds Play at its idle width) */
@media (max-width: 479px) {
  [data-tile="tomato"] .t-controls { column-gap: 8px; }
  [data-tile="tomato"] .t-controls .t-btn { padding: 0 12px; gap: 8px; }
  [data-tile="tomato"] .t-controls .t-note { flex-basis: 100%; }
}
@media (max-width: 374px) {
  [data-tile="tomato"] .t-controls [data-tomato-sound] { width: 44px; padding: 0; }
  [data-tile="tomato"] .t-controls [data-tomato-sound] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
.t-seg { position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 999px; background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--hair); isolation: isolate; }
.t-seg > button {
  -webkit-appearance: none; appearance: none; position: relative; z-index: 1; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-2); white-space: nowrap;
  font-family: var(--f-display); font-weight: 800; font-stretch: 86%; font-size: 15px; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  transition: color .25s var(--ease);
}
.t-seg > button:hover { color: var(--ink); }
.t-seg > button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(21, 18, 47, .08), 0 8px 16px -10px rgba(21, 18, 47, .4); }
.t-seg.has-thumb > button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.t-seg.has-thumb::before {
  content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: var(--seg-w, 0px); transform: translateX(var(--seg-x, 0px));
  border-radius: 999px; background: var(--card); box-shadow: 0 1px 2px rgba(21, 18, 47, .08), 0 8px 16px -10px rgba(21, 18, 47, .4);
}
.t-seg.is-gliding::before { transition: transform .5s var(--ease), width .5s var(--ease); }
@media (max-width: 379px) { .t-seg > button { padding: 0 14px; } }
/* the range drives the tile's own answer mark (Kyoto's date), so it wears the tile's colour */
.t-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; --fill: var(--k-ink); }
.t-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--fill) 0 var(--p, 0%), rgba(21, 18, 47, .13) var(--p, 0%) 100%); }
.t-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--fill); box-shadow: 0 2px 8px rgba(21, 18, 47, .22);
}
.t-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(21, 18, 47, .13); }
.t-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--fill); }
.t-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 3px solid var(--fill); box-shadow: 0 2px 8px rgba(21, 18, 47, .22); }
.t-range:focus { outline: none; }
.t-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--card), 0 0 0 7px var(--indigo); }
.t-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--card), 0 0 0 7px var(--indigo); }
.t-chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; white-space: nowrap;
  background: var(--tint-2); color: var(--ink-2); font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
}
.t-note { margin: 0; flex: 1 1 17rem; min-width: 0; color: var(--ink-2); font: 600 15px/1.45 var(--f-text); letter-spacing: -.005em; font-variant-numeric: lining-nums; text-wrap: pretty; }
.t-note:empty { display: none; }
.is-ugly .t-controls { display: none; }

/* ---------- Try it! (wealth, once per page): the parent site's hand-written invitation ----------
   From 480 px it sits to the button's right, the arrow pointing at it. A phone puts it on
   its own line under the button, right-aligned, the arrow turned to point up at it (a line
   over the button would push the button past 85svh at 390 x 660). Gone at the first touch. */
.t-act { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 16px; min-width: 0; }
.t-act > .t-controls { margin-top: 0; flex: 0 1 auto; }
.t-hint { flex: none; display: none; align-items: center; gap: 2px; margin: 0; color: var(--indigo-deep); pointer-events: none; }
.js .t-hint { display: inline-flex; }
.t-hint svg { display: block; width: 58px; height: 34px; overflow: visible; color: var(--indigo); }
.t-hint-note { font-family: var(--f-hand); font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: .01em; transform: rotate(-5deg) translateY(var(--note-y, -6px)); transform-origin: left center; }
.t-hint.is-gone { opacity: 0; transition: opacity .32s ease; }
@media (min-width: 1000px) { .t-hint-note { font-size: 34px; } }
@media (max-width: 479px) {
  .t-hint { flex: 1 1 100%; justify-content: flex-end; --note-y: 4px; --nod-y: -2px; }
  .t-hint .hint-arrow { transform: translateY(34px) scaleY(-1); }
}
@media (max-width: 359px) { .js .t-hint { display: none; } }
.is-ugly .t-hint { display: none !important; }
.is-ugly .t-act { display: none; } /* its controls are hidden too: no empty row under the chart */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduced"]):not(.is-paused) .t-hint:not(.is-invited) .hint-stroke,
  html:not([data-motion="reduced"]):not(.is-paused) .t-hint:not(.is-invited) .hint-head { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html:not([data-motion="reduced"]):not(.is-paused) .t-hint:not(.is-invited) .t-hint-note { opacity: 0; }
  .t-hint.is-invited .hint-stroke { stroke-dasharray: 1; animation: hint-draw .7s cubic-bezier(.4, 0, .2, 1) both; }
  .t-hint.is-invited .hint-head { stroke-dasharray: 1; animation: hint-draw .25s ease-out .62s both; }
  .t-hint.is-invited .t-hint-note { animation: hint-note .5s var(--ease) .15s both; }
  .t-hint.is-invited svg { animation: hint-nod 2.4s ease-in-out 1.3s 2; }
}
@keyframes hint-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hint-note { from { opacity: 0; transform: rotate(-5deg) translate(8px, calc(var(--note-y, -6px) + 4px)); } to { opacity: 1; transform: rotate(-5deg) translateY(var(--note-y, -6px)); } }
@keyframes hint-nod { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, var(--nod-y, 2px)); } }
html[data-motion="reduced"] .t-hint svg, html[data-motion="reduced"] .t-hint *, html.is-paused .t-hint svg, html.is-paused .t-hint * { animation: none !important; }

/* ---------- the foot row: the stamp beside the source, See it ugly, How we know ---------- */
.t-end {
  position: relative; margin-top: clamp(18px, 2vw, 26px); padding-top: var(--end-pt); border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ugly ." "src src" "how how";
  column-gap: 12px; row-gap: 12px; align-items: start; --how-w: 156px; --end-pt: 14px;
}
/* the stamp reads as a word about the source: MEASURED, ESTIMATE or PREDICTED, then the line */
.t-src { grid-area: src; margin: 0; max-width: 84ch; color: var(--ink-3); font: 500 13px/1.5 var(--f-text); text-wrap: pretty; }
.t-src .t-foot { display: inline; }
.t-stamp {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; margin-right: 8px; border-radius: 999px; vertical-align: middle;
  box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--ink-2); font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.t-stamp::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.t-stamp[data-stamp="estimate"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.t-stamp[data-stamp="predicted"], .t-stamp[data-stamp="model"] { box-shadow: none; border: 1px dashed var(--hair-3); }
.t-ugly, .t-how > summary {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; user-select: none;
  background: transparent; color: var(--ink); font: 700 14px/1 var(--f-text);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.t-ugly { grid-area: ugly; border: 1.5px dashed var(--hair-3); }
.t-ugly:hover { border-color: var(--ink-3); background: var(--tint); }
.t-ugly::before { /* a tiny spreadsheet chart in the 2007 office colours: the joke, one tap away */
  content: ""; flex: none; width: 15px; height: 13px;
  background:
    linear-gradient(180deg, #8DB0DE, #4F81BD) 0 100% / 4px 55% no-repeat,
    linear-gradient(180deg, #E08F8C, #C0504D) 5.5px 100% / 4px 100% no-repeat,
    linear-gradient(180deg, #C2DA92, #9BBB59) 11px 100% / 4px 74% no-repeat;
}
.t-ugly[data-on="true"] { border-style: solid; border-color: var(--navy); background: var(--navy); color: var(--on-ink); }
.t-ugly[data-on="true"]::before {
  background:
    linear-gradient(var(--hot-lit), var(--hot-lit)) 0 100% / 4px 55% no-repeat,
    linear-gradient(var(--on-ink-2), var(--on-ink-2)) 5.5px 100% / 4px 100% no-repeat,
    linear-gradient(#3FD0D0, #3FD0D0) 11px 100% / 4px 74% no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .t-ugly::before { transition: background-size .35s cubic-bezier(.34, 1.56, .64, 1); }
  .t-ugly:not([data-on="true"]):hover::before { background-size: 4px 90%, 4px 40%, 4px 100%; }
}
.t-how { grid-area: how; min-width: 0; }
.t-how > summary { position: absolute; top: var(--end-pt); right: 0; width: var(--how-w); list-style: none; border: 1.5px solid transparent; color: var(--ink-2); }
.t-how > summary::-webkit-details-marker { display: none; }
.t-how > summary::after {
  content: ""; flex: none; width: 11px; height: 11px; transition: transform .35s var(--ease);
  background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 2px 100% no-repeat;
}
.t-how > summary:hover, .t-how > summary:focus-visible { color: var(--ink); border-color: var(--hair-2); background: var(--tint); }
.t-how[open] > summary { color: var(--ink); border-color: var(--hair-2); background: var(--tint); }
.t-how[open] > summary::after { transform: rotate(45deg); }
.t-how-body { padding: 22px 0 6px; display: grid; gap: 16px 56px; }
.t-how-text p { margin: 0 0 12px; max-width: 66ch; color: var(--ink-2); font: 500 15.5px/1.62 var(--f-text); text-wrap: pretty; }
.t-src-h { margin: 0 0 10px; color: var(--ink-3); font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.t-how-src ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.t-how-src a {
  display: inline-block; padding: 11.5px 0; color: var(--ink); font: 600 14.5px/1.45 var(--f-text); overflow-wrap: anywhere; /* a 44 px target per source */
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--k) 55%, transparent); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.t-how-src a:hover { text-decoration-color: var(--k-ink); }
/* a phone: How we know shrinks to its words, so the wider "Make it beautiful" still clears
   it; See it ugly stays on top where the two meet. A very narrow foot row gives How we
   know a row of its own, under the source. */
.t-end { container: end / inline-size; }
.t-ugly { position: relative; z-index: 1; }
@media (max-width: 699px) { .t-how > summary { width: auto; padding: 0 12px; } }
.hero .t-how > summary { width: auto; padding: 0 12px; }
@container end (max-width: 309px) { .t-how > summary { position: static; width: auto; } }
@media (min-width: 700px) {
  .t-end { grid-template-columns: minmax(0, 1fr) auto var(--how-w); grid-template-areas: "src ugly ." "how how how"; --end-pt: 16px; }
  .t-src { padding-right: 24px; align-self: center; }
}
@media (min-width: 900px) { .t-how-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
/* the hero's foot sits in a narrow column on a wide screen: the buttons over the source */
.hero .t-end { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ugly ." "src src" "how how"; }
.hero .t-src { padding-right: 0; }

/* ---------- desktop: the card as a 12-column frame ---------- */
@media (min-width: 1000px) {
  .t-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 40px); align-items: start; }
  .t-in > * { grid-column: 1 / -1; }
  .t-in > .t-top { margin-bottom: 18px; }
  .t-in > .t-title { grid-column: 1 / span 7; margin: 0; }
  .t-in > .t-big { grid-column: 8 / -1; margin: 0; flex-direction: column; align-items: flex-start; gap: 12px; --b-max: 156px; }
  .t-in > .t-big .t-big-label { flex: none; max-width: 26ch; }
  [data-tile="voyager"] .t-in > .t-title { grid-column: 1 / span 9; }
  [data-tile="voyager"] .t-in > .t-big { grid-column: 1 / -1; margin-top: 26px; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px 28px; --b-max: 132px; }
  [data-tile="voyager"] .t-in > .t-big .t-big-label { flex: 0 1 22ch; min-width: 0; max-width: 30ch; padding-bottom: .45em; }
  /* the map is a disc: the copy on the left, the disc on the right */
  [data-tile="half"] .t-in { grid-template-rows: auto auto auto auto 1fr auto; }
  [data-tile="half"] .t-in > .t-top { grid-column: 1 / -1; grid-row: 1; }
  [data-tile="half"] .t-in > .t-title { grid-column: 1 / span 6; grid-row: 2; }
  [data-tile="half"] .t-in > .t-big { grid-column: 1 / span 6; grid-row: 3; margin-top: 34px; --b-max: 150px; }
  [data-tile="half"] .t-in > .t-controls { grid-column: 1 / span 6; grid-row: 4; margin-top: 30px; }
  [data-tile="half"] .t-in > .t-chart { grid-column: 7 / -1; grid-row: 2 / span 4; margin-top: 0; }
  [data-tile="half"] .t-in > .t-end { grid-column: 1 / -1; grid-row: 6; }
}


/* ---------- round four's additions to the big number ---------- */
/* a leading "$" sits small and raised before the figure (spending) */
.t-big-cur { font-size: .5em; font-stretch: 100%; vertical-align: .62em; margin-right: .04em; letter-spacing: 0; }
/* a big label's own emphasis: b.strong in ink; a second figure (BIGLIT) in the tile's second hue */
.t-big-label b { color: var(--ink); font-weight: 800; }
.t-big-label b.k2 { color: var(--k2-ink); font-weight: 700; }

/* ==========================================================================
   The nine tiles' own rules, in page order: each spec's "What the page owns" block
   (design/TILE-<id>.md section 7), verbatim, with CONTRACT-v4 section 1's mammals frame.
   ========================================================================== */

/* healthspan: berry gap, green healthy years */
[data-tile="healthspan"] { --k: #A2357F; --k-ink: #A2357F; --k2: #31A26D; --k2-ink: #1C7A4B; }
[data-tile="healthspan"] .t-big { --b-ch: 3.7; }   /* "13.9 years" fits its column: 66 px on phones, 124 px at 1440 */
[data-tile="healthspan"] { --ch: clamp(220px, calc(85vh - 341px), 400px); }
@supports (height: 1svh) { [data-tile="healthspan"] { --ch: clamp(220px, calc(85svh - 341px), 400px); } }
@media (min-width: 640px) { [data-tile="healthspan"] { --ch: clamp(340px, 40vw, 420px); } }
@media (min-width: 1000px) { [data-tile="healthspan"] { --ch: clamp(400px, 48vh, 460px); } }

/* richpoor: tokens, the big number's width, chart heights, the controls' row */
[data-tile="richpoor"] { --k: #4B54D9; --k-ink: #4B54D9; --k2: #008B8C; --k2-ink: #00777A; }
[data-tile="richpoor"] .t-big { --b-ch: 3.4; }
[data-tile="richpoor"] { --ch: clamp(240px, calc(100vh - 452px), 352px); }
@supports (height: 1svh) { [data-tile="richpoor"] { --ch: clamp(240px, calc(100svh - 452px), 352px); } }
@media (min-width: 640px) { [data-tile="richpoor"] { --ch: clamp(320px, 36vw, 400px); } }
@media (min-width: 1000px) { [data-tile="richpoor"] { --ch: clamp(380px, 48vh, 460px); } }
@media (min-width: 700px) { [data-tile="richpoor"] .t-controls > div:not(.t-seg) { flex: 1 1 420px; } }

/* spending: money green (the US), deep periwinkle (the 11 other rich countries) */
[data-tile="spending"] { --k: #17A06B; --k-ink: #0E7A50; --k2: #7F88C9; --k2-ink: #4F58A0; }
[data-tile="spending"] .t-big { --b-ch: 4.2; }
[data-tile="spending"] { --ch: clamp(212px, calc(100vh - 448px), 420px); }
@supports (height: 1svh) { [data-tile="spending"] { --ch: clamp(212px, calc(100svh - 448px), 420px); } }
@media (min-width: 640px) {
  [data-tile="spending"] { --ch: clamp(340px, 46vh, 440px); }
  @supports (height: 1svh) { [data-tile="spending"] { --ch: clamp(340px, 46svh, 440px); } }
}
@media (min-width: 1000px) { [data-tile="spending"] { --ch: clamp(400px, 50vh, 500px); } }
/* page builder, phase 3: CONTRACT-v4 0.11's longer label ("11 other rich countries") set three lines
   at 30ch and pushed the range to 567 px at 390x660, with the chart already at its 212 px floor.
   On a phone the label sits under the number anyway: the full width keeps it to the spec's two lines. */
@media (max-width: 639px) { [data-tile="spending"] .t-big-label { max-width: none; } }

/* overdose: 2024 and the fall in purple */
[data-tile="overdose"] { --k: #7446CF; --k-ink: #6534C2; }
[data-tile="overdose"] .t-big { --b-ch: 3.9; }
[data-tile="overdose"] { --ch: clamp(220px, calc(100vh - 430px), 340px); }
@supports (height: 1svh) { [data-tile="overdose"] { --ch: clamp(220px, calc(100svh - 430px), 340px); } }
@media (min-width: 640px) { [data-tile="overdose"] { --ch: clamp(320px, 40vw, 420px); } }
@media (min-width: 1000px) { [data-tile="overdose"] { --ch: clamp(380px, 46vh, 480px); } }
[data-tile="overdose"] .t-chart > svg { touch-action: pan-y; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
[data-tile="overdose"] .t-controls > .od-read { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-tile="overdose"] .od-read .t-range { flex: 1 1 auto; min-width: 0; width: auto; }
[data-tile="overdose"] .od-chip { flex: none; gap: .7em; min-width: 132px; text-transform: none; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
[data-tile="overdose"] .od-chip b { color: var(--k-ink); font-weight: 500; }
@media (min-width: 640px) {
  [data-tile="overdose"] .t-controls > .od-read { flex: 1 1 340px; max-width: 560px; }
  [data-tile="overdose"] .t-controls > .t-note { flex-basis: 100%; }
}

/* mammals: wild green is the answer and the measure. From 1000 px the copy sits in columns
   1 to 4 and the tall chart in 5 to 12, with the controls under it (CONTRACT-v4 section 1). */
[data-tile="mammals"] { --k: #15853C; --k-ink: #0F6E33; }
[data-tile="mammals"] { --ch: clamp(240px, calc(85vh - 300px), 420px); }
@supports (height: 1svh) { [data-tile="mammals"] { --ch: clamp(240px, calc(85svh - 300px), 420px); } }
@media (min-width: 640px) { [data-tile="mammals"] { --ch: clamp(380px, 44vw, 460px); } }
@media (min-width: 1000px) { [data-tile="mammals"] { --ch: clamp(460px, 58vh, 580px); } }
/* a phone: the group label "Against all wild mammals" still names the segment, unseen */
@media (max-width: 639px) {
  [data-tile="mammals"] .t-chip { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}
@media (min-width: 1000px) {
  [data-tile="mammals"] .t-in { grid-template-rows: auto auto auto 1fr auto auto; }
  [data-tile="mammals"] .t-in > .t-top { grid-column: 1 / span 4; grid-row: 1; }
  [data-tile="mammals"] .t-in > .t-title { grid-column: 1 / span 4; grid-row: 2; font-size: clamp(26px, .45rem + 2.4vw, 44px); }
  [data-tile="mammals"] .t-in > .t-big { grid-column: 1 / span 4; grid-row: 3; margin-top: 28px; --b-ch: 3.6; }
  [data-tile="mammals"] .t-in > .t-chart { grid-column: 5 / -1; grid-row: 1 / span 4; margin-top: 0; }
  [data-tile="mammals"] .t-in > .t-controls { grid-column: 5 / -1; grid-row: 5; }
  [data-tile="mammals"] .t-in > .t-end { grid-column: 1 / -1; grid-row: 6; }
}

/* energy: soot slate, the deaths */
[data-tile="energy"] { --k: #5D6A96; --k-ink: #3F4B76; }   /* soot slate: the deaths */
/* page builder, phase 3: CONTRACT-v4 0.12's control (the question "Chernobyl's toll" over two
   two-line answers) is taller than the spec's, and the seg ended at 580 px at 390x660; the spec's
   406 / 248 become 428 / 232 (a 320 x 232 chart, inside the spec's tested 300x220 to 320x254) */
[data-tile="energy"] { --ch: clamp(232px, calc(100vh - 428px), 420px); }
@supports (height: 1svh) { [data-tile="energy"] { --ch: clamp(232px, calc(100svh - 428px), 420px); } }
@media (min-width: 640px) { [data-tile="energy"] { --ch: clamp(360px, 44vw, 460px); } }
@media (min-width: 1000px) {
  [data-tile="energy"] { --ch: clamp(400px, 46vh, 480px); }
  @supports (height: 1svh) { [data-tile="energy"] { --ch: clamp(400px, 46svh, 480px); } }
}
.t-seg-label { flex: none; margin: 0; color: var(--ink-2); font: 600 13px/1.25 var(--f-text); }
@media (max-width: 639px) { [data-tile="energy"] .t-seg > button { padding: 0 14px; } }
@media (max-width: 379px) {
  [data-tile="energy"] .t-controls { column-gap: 8px; }
  [data-tile="energy"] .t-seg > button { padding: 0 12px; }
}

/* wildlife (TILE-wildlife 7): the fall crimson, the populations that grew or held steady sea green.
   The phone chart: 85svh keeps the button within 561 px of the tile's top at 390x660 (553 measured);
   the 100vw - 50px term holds a 360 px phone to 310 (button 617 of 629). Re-tune the 400 if the title
   or big label changes length. */
[data-tile="wildlife"] { --k: #C42A47; --k-ink: #A81E3D; --k2: #1FA394; --k2-ink: #0A7A6D; }
[data-tile="wildlife"] .t-big-label b { color: var(--ink); font-weight: 800; }
[data-tile="wildlife"] { --ch: clamp(240px, min(calc(100vh - 400px), calc(100vw - 50px)), 380px); }
@supports (height: 1svh) { [data-tile="wildlife"] { --ch: clamp(240px, min(calc(100svh - 400px), calc(100vw - 50px)), 380px); } }
@media (min-width: 640px) { [data-tile="wildlife"] { --ch: clamp(380px, 56vw, 460px); } }
@media (min-width: 1000px) { [data-tile="wildlife"] { --ch: clamp(400px, 48vh, 460px); } }

/* crime: the measured rate in police blue, what people said in amber */
[data-tile="crime"] { --k: #2563EB; --k-ink: #1D4ED8; --k2: #F2A71B; --k2-ink: #8A5B00; }
[data-tile="crime"] .t-big-label { flex-basis: 10ch; min-width: 10ch; } /* beside 71% on a phone */
[data-tile="crime"] { --ch: clamp(220px, calc(100vh - 410px), 404px); }
@supports (height: 1svh) { [data-tile="crime"] { --ch: clamp(220px, calc(100svh - 410px), 404px); } }
@media (min-width: 640px) { [data-tile="crime"] { --ch: clamp(380px, 46vw, 480px); } }
@media (min-width: 1000px) { [data-tile="crime"] { --ch: clamp(400px, 50vh, 500px); } }
[data-tile="crime"] .t-chart > svg { touch-action: pan-y; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
[data-tile="crime"] .t-controls > .cr-read { display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-tile="crime"] .cr-read .t-range { flex: 1 1 auto; min-width: 0; width: auto; }
[data-tile="crime"] .cr-chip { flex: none; gap: .7em; min-width: 150px; text-transform: none; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
[data-tile="crime"] .cr-chip b { color: var(--ink); font-weight: 500; }
[data-tile="crime"] .cr-chip .cr-r { color: var(--k-ink); }
[data-tile="crime"] .cr-chip .cr-p { color: var(--k2-ink); }
@media (min-width: 640px) {
  [data-tile="crime"] .t-controls > .cr-read { flex: 1 1 340px; max-width: 560px; }
  [data-tile="crime"] .t-controls > .t-note { flex-basis: 100%; }
}

/* lottery */
[data-tile="lottery"] { --k: #C21F5A; --k-ink: #A8174A; --k2: #B47B0C; --k2-ink: #8A5B00; }   /* raspberry: the lottery's take; gold: the slots' */
[data-tile="lottery"] .t-glyph { --ga: 1.643; }
[data-tile="lottery"] .t-big { --b-ch: 2.2; }
[data-tile="lottery"] { --ch: clamp(256px, calc(100vh - 400px), 344px); }
@supports (height: 1svh) { [data-tile="lottery"] { --ch: clamp(256px, calc(100svh - 400px), 344px); } }
@media (min-width: 640px) { [data-tile="lottery"] { --ch: clamp(340px, 46vw, 440px); } }
@media (min-width: 1000px) {
  [data-tile="lottery"] { --ch: clamp(380px, 46vh, 460px); }
  @supports (height: 1svh) { [data-tile="lottery"] { --ch: clamp(380px, 46svh, 460px); } }
}
[data-tile="lottery"] .t-controls > .t-chip { flex: none; }
[data-tile="lottery"] .t-chip b { margin-left: .5em; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
[data-tile="lottery"] .t-controls > .t-range { flex: 1 1 110px; width: auto; min-width: 0; }
[data-tile="lottery"] .t-controls > .t-note { flex: 1 1 100%; }
@media (min-width: 1000px) {
  [data-tile="lottery"] .t-controls > .t-range { flex: 0 1 360px; }
  [data-tile="lottery"] .t-controls > .t-note { flex: 1 1 320px; }
}

/* ---------- the closing line (new for the teaser): more charts are coming ----------
   Set like the hero's tagline, under a short navy rule that echoes the hero's. */
.next { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: clamp(44px, 6vw, 84px) auto 0; padding: 0 var(--gut); display: grid; justify-items: center; gap: clamp(14px, 1.8vw, 20px); text-align: center; }
.next::before { content: ""; width: clamp(40px, 4vw, 56px); height: 4px; border-radius: 2px; background: var(--navy); }
.next-line {
  max-width: 30ch; color: var(--ink-2); text-wrap: balance;
  font-family: var(--f-display); font-weight: 700; font-stretch: 112%; font-size: clamp(17px, .6rem + 1vw, 24px); line-height: 1.3; letter-spacing: .035em;
}

/* ---------- the 404 page (new for the teaser): the hero's head, one line, one way back ---------- */
.nf { display: flex; flex-direction: column; } /* a short page: the footer sits at the bottom */
.nf > main { flex: 1 0 auto; }
.nf .hero { padding-top: clamp(40px, 8vw, 96px); }
.nf .h-tag { margin-top: clamp(18px, 2.4vw, 28px); }
.nf-act { margin-top: clamp(24px, 3vw, 36px); display: flex; justify-content: center; }
.nf-act .t-btn { text-decoration: none; }

/* ---------- the footer: navy, the poster's end credits ---------- */
.end {
  margin-top: clamp(40px, 6vw, 80px); background: var(--navy); color: var(--on-ink);
  /* on a phone with a home bar the navy runs on under it */
  margin-bottom: calc(0px - env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.end :focus-visible { outline-color: var(--on-ink); }
.end-in { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: clamp(36px, 5vw, 64px) var(--gut) clamp(30px, 4vw, 52px); display: grid; gap: 18px; justify-items: center; text-align: center; }
.end-mark { color: var(--on-ink); font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: clamp(28px, 5vw, 60px); line-height: .9; letter-spacing: .05em; text-transform: uppercase; }
.end-mark .hl { color: var(--hot-lit); }
.end-lines { margin: 0; padding: 0; list-style: none; display: grid; justify-items: center; gap: 2px; color: var(--on-ink-2); font: 400 13px/1.5 var(--f-mono); }
.end-lines li { display: flex; align-items: center; justify-content: center; min-height: 26px; }
.end-lines a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ink); text-decoration-color: var(--on-ink-2); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.end-lines a:hover { text-decoration-color: var(--on-ink); }

/* ---------- motion: cards rise into place once; How we know slides open ----------
   .pre is set by script only, never on a card already on screen at load. */
.tile.pre { opacity: 0; transform: translateY(24px); }
.tile.pre::before { transform: scaleX(0); }
.tile.pre .t-in > * { opacity: 0; transform: translateY(14px); }
.tile.in { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.tile.in::before { transform-origin: 0 50%; transition: transform .9s var(--ease) .25s; }
.tile.in .t-in > * { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.tile.in .t-in > .t-title { transition-delay: .07s; }
.tile.in .t-in > .t-big { transition-delay: .14s; }
.tile.in .t-in > .t-chart { transition-delay: .21s; }
.tile.in .t-in > .t-controls, .tile.in .t-in > .t-act { transition-delay: .28s; }
.tile.in .t-in > .t-end { transition-delay: .35s; }
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="reduced"]) { interpolate-size: allow-keywords; }
    html:not([data-motion="reduced"]) .t-how::details-content { height: 0; overflow: clip; transition: height .5s var(--ease), content-visibility .5s allow-discrete; }
    html:not([data-motion="reduced"]) .t-how[open]::details-content { height: auto; }
  }
}
html[data-motion="reduced"] .tile.pre, html[data-motion="reduced"] .tile.pre .t-in > *, html[data-motion="reduced"] .tile.pre::before { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tile.pre, .tile.pre .t-in > *, .tile.pre::before { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; }
}
/* See it ugly: the chart alone crossfades (core.js starts the view transition) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
::view-transition-group(diu-chart) { animation-duration: .5s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(diu-chart) { animation: vt-out .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(diu-chart) { animation: vt-in .5s cubic-bezier(.22, 1, .36, 1) .06s both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(3px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px) scale(1.012); filter: blur(4px); } }

/* the glyphs whose mocks set their aspect in a style attribute (the CSP blocks one) */
[data-tile="breath"] .t-glyph { --ga: 1.86; }
[data-tile="healthspan"] .t-glyph { --ga: 1.6; }
[data-tile="overdose"] .t-glyph { --ga: 1.25; }

/* ---------- the night cards (DIU2.site.dark; tones.js turns their engines) ----------
   A long scroll of white cards reads as one tone, so about every other tile turns its card
   to night. Every token the card's chrome reads is turned here, so the
   title, big number, controls, foot row and How we know follow; the primary button and a
   pressed See it ugly invert (light on night). Text is 7:1 or more on #1B1740. */
.tile.is-dark {
  --ink: #F4F1FF; --ink-2: #CFCAE6; --ink-3: #ADA7CF;
  --hair: rgba(244, 241, 255, .10); --hair-2: rgba(244, 241, 255, .20); --hair-3: rgba(244, 241, 255, .34);
  --card: #2C2760;            /* raised: a pressed toggle, a slider thumb, a plain button */
  --tint: rgba(244, 241, 255, .07); --tint-2: rgba(244, 241, 255, .09);
  --navy: #F4F1FF; --on-ink: #15122F; --on-ink-2: #45435F;
  --indigo: #9BA3FF; --indigo-deep: #C9CDFF; --indigo-wash: rgba(155, 163, 255, .16);
  background: #1B1740; border-color: rgba(244, 241, 255, .08); color: var(--ink);
  box-shadow: 0 30px 60px -40px rgba(21, 18, 47, .7);
}
.tile.is-dark .t-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--fill) 0 var(--p, 0%), rgba(244, 241, 255, .16) var(--p, 0%) 100%); }
.tile.is-dark .t-range::-moz-range-track { background: rgba(244, 241, 255, .16); }
.tile.is-dark .t-range::-webkit-slider-thumb, .tile.is-dark .t-range::-moz-range-thumb { box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
/* each night card's own hues, lifted to read on it */
[data-tile="crime"].is-dark    { --k: #4F86FF; --k-ink: #8FB1FF; --k2: #F2A71B; --k2-ink: #FFC55A; }
[data-tile="energy"].is-dark   { --k: #8E9BD0; --k-ink: #C3CBF0; }
[data-tile="overdose"].is-dark { --k: #9C74F2; --k-ink: #BFA4FF; }
[data-tile="voyager"].is-dark  { --k: #F2B53A; --k-ink: #F6C34A; }
[data-tile="breath"].is-dark   { --k: #2CC4C1; --k-ink: #5CEDD4; }
[data-tile="richpoor"].is-dark { --k: #7F88FF; --k-ink: #A9AFFF; --k2: #1FBFBF; --k2-ink: #5ED6D3; }
[data-tile="wildlife"].is-dark { --k: #E5506A; --k-ink: #FF8FA3; --k2: #25B8A8; --k2-ink: #5FE0CF; }
/* a night card's toggle: the pressed option is a light pill with ink text, as the primary button */
.tile.is-dark .t-seg > button[aria-pressed="true"] { background: #F4F1FF; color: #15122F; }
.tile.is-dark .t-seg.has-thumb > button[aria-pressed="true"] { background: transparent; color: #15122F; }
.tile.is-dark .t-seg.has-thumb::before { background: #F4F1FF; }

/* ---------- the masthead (round four's, mocks-v4/index.html): the page opens on it and the first
   fact; the coin flips sit mid-page as a tile. Overrides round three's giant hero wordmark. ---------- */
.mast {
  max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: clamp(10px, 2.6vw, 36px) var(--gut) 0;
  container-type: inline-size;
}
.h-site {
  padding-left: .035em; text-align: center; white-space: nowrap; color: var(--ink);
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: min(6.5rem, 12.3cqi); line-height: .82;
  letter-spacing: .035em; text-transform: uppercase;
}
.h-site .hl { color: var(--hot); }
.h-rule { height: 4px; margin: clamp(10px, 1.5vw, 18px) 0 0; border-radius: 2px; background: var(--navy); }
.h-tag {
  margin: clamp(10px, 1.4vw, 16px) auto 0; max-width: 46ch; text-align: center; color: var(--ink-2); text-wrap: balance;
  font-family: var(--f-display); font-weight: 700; font-stretch: 112%; font-size: clamp(15.5px, .55rem + 1.15vw, 23px); line-height: 1.3; letter-spacing: .035em;
}
/* the one line that teaches See it ugly (round three's coin-flip hero taught it by doing it) */
.h-note {
  margin: clamp(6px, .8vw, 10px) auto 0; max-width: 62ch; text-align: center; color: var(--ink-3); text-wrap: balance;
  font: 500 13px/1.45 var(--f-text); letter-spacing: -.003em;
}
.h-note b { color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.h-note b::before { /* the button's own tiny spreadsheet chart, so the words point at it */
  content: ""; display: inline-block; width: 12px; height: 10px; margin: 0 5px 0 1px; vertical-align: -.5px;
  background:
    linear-gradient(180deg, #8DB0DE, #4F81BD) 0 100% / 3px 55% no-repeat,
    linear-gradient(180deg, #E08F8C, #C0504D) 4.5px 100% / 3px 100% no-repeat,
    linear-gradient(180deg, #C2DA92, #9BBB59) 9px 100% / 3px 74% no-repeat;
}
@media (min-width: 1000px) { .h-note { font-size: 14px; max-width: none; } } /* one line on a wide screen */

.mast + .tiles > .tile:first-child { margin-top: clamp(16px, 2.6vw, 34px); }