/* Fonts are served from this site, so no visitor's browser calls anyone else. All three are SIL Open Font License. */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/anton-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-600.woff2") format("woff2"); }
@font-face { font-family: "UnifrakturCook"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/unifrakturcook-700.woff2") format("woff2"); }

/* Grey newsprint, black ink, and the press's own process colours: magenta for what is hot or new,
   cyan for cold. The night edition swaps paper and ink. */
:root {
  --paper: #dddbd4; --ink: #101114; --spot: #e6007e; --cool: #0093d0; --yellow: #f5c400;
  --rule: rgba(16, 17, 20, .9); --soft: rgba(16, 17, 20, .56);
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #0e0f12; --ink: #e7e5df; --spot: #ff2e97; --cool: #2cb5f5; --yellow: #ffd83a; --rule: rgba(231, 229, 223, .85); --soft: rgba(231, 229, 223, .56); color-scheme: dark; }
}
:root[data-theme="dark"] { --paper: #0e0f12; --ink: #e7e5df; --spot: #ff2e97; --cool: #2cb5f5; --yellow: #ffd83a; --rule: rgba(231, 229, 223, .85); --soft: rgba(231, 229, 223, .56); color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--mono);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .35  0 0 0 .11 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
.sheet { max-width: 1180px; margin: 0 auto; padding-block: 18px 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Masthead: the only place words live. */
.mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 6px 0 10px; border-bottom: 3px double var(--rule); }
.mast h1 { margin: 0; text-wrap: balance; font: 700 clamp(38px, 9.4vw, 88px)/.95 "UnifrakturCook", "Old English Text MT", serif; letter-spacing: .01em; text-align: center; }
.ear { margin: 0; font-size: 10.5px; line-height: 1.45; letter-spacing: .09em; text-transform: uppercase; color: var(--soft); border: 1px solid var(--soft); padding: 7px 9px; justify-self: start; }
.ear.right { justify-self: end; text-align: right; }
.ear b { color: var(--spot); font-weight: 600; }
.dateline { display: flex; justify-content: space-between; gap: 12px; padding: 7px 2px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--rule); }
.dateline span:last-child { color: var(--soft); text-align: right; }
.dateline .live { color: var(--ink); }
.dateline a { color: var(--spot); text-decoration: none; margin-left: 10px; }
.dateline a:hover, .dateline a:focus-visible { text-decoration: underline; }
.dateline .live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--spot); margin-right: 7px; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .dateline .live::before { animation: none; } }

/* The front page: a broadsheet grid with column rules, every cell a living picture. */
.page { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 236px; border-left: 1px solid var(--rule); margin-top: 14px; border-top: 1px solid var(--rule); }
.tile { position: relative; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); cursor: pointer; overflow: hidden; min-width: 0; }
.tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile .src { position: absolute; right: 6px; bottom: 6px; z-index: 2; }
.tile:focus-visible { outline: 2px solid var(--spot); outline-offset: -2px; }
.src, .bar button, .x {
  appearance: none; border: 1px solid var(--soft); background: var(--paper); color: var(--ink); font: 500 15px/1 var(--mono);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0;
}
.src:hover, .bar button:hover, .x:hover { border-color: var(--spot); color: var(--spot); }
.t-debt { grid-column: 1 / span 8; grid-row: 1 / span 2; }
.t-alerts { grid-column: 9 / span 4; grid-row: 1 / span 2; }
.t-rocks { grid-column: 1 / span 5; grid-row: 3 / span 2; }
.t-looked { grid-column: 6 / span 7; grid-row: 3 / span 2; }
.t-quakes { grid-column: 1 / span 6; grid-row: 5 / span 2; }
.t-ten { grid-column: 7 / span 3; grid-row: 5; }
.t-gas { grid-column: 10 / span 3; grid-row: 5; }
.t-co2 { grid-column: 7 / span 3; grid-row: 6; }
.t-stripes { grid-column: 10 / span 3; grid-row: 6; }
.t-house { grid-column: 1 / span 6; grid-row: 7 / span 2; }
.t-senate { grid-column: 7 / span 6; grid-row: 7 / span 2; }
.page.ideas .tile { grid-column: 3 / span 8; grid-row: 1 / span 3; }

.colophon { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 2px 0; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.colophon b { color: var(--spot); }
.press { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 10px; }
.press i { width: 11px; height: 11px; border-radius: 50%; }
.press i:nth-child(1) { background: var(--cool); } .press i:nth-child(2) { background: var(--spot); } .press i:nth-child(3) { background: var(--yellow); } .press i:nth-child(4) { background: var(--ink); }

/* Phones: one picture per screen. Flick down for the next one. */
@media (max-width: 820px) {
  html { scroll-snap-type: y proximity; }
  .sheet { padding-block: 10px 28px; }
  .mast { grid-template-columns: 1fr; padding: 2px 0 8px; }
  .ear { display: none; }
  .page, .page.ideas { display: flex; flex-direction: column; gap: 12px; border: 0; margin-top: 12px; }
  .tile, .page.ideas .tile { height: calc(100vh - 24px); height: calc(100svh - 24px); border: 1px solid var(--rule); scroll-snap-align: center; flex: none; }
  .tile:first-child { height: calc(100vh - 150px); height: calc(100svh - 150px); min-height: 380px; scroll-snap-align: end; }
}

/* The Zero: the wheel you arrive at, and the pictures you fall into. The newspaper grid is the
   other way to see everything ("All at once"). */
#zero { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 3; touch-action: none; cursor: pointer; }
.zui { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.zui > * { pointer-events: auto; }
body.paper #zero, body.paper .zui { display: none; }
body:not(.paper) .sheet { display: none; }
body:not(.paper) { overflow: hidden; overscroll-behavior: none; }
.zmark { position: absolute; left: 50%; top: max(18px, env(safe-area-inset-top, 0px)); transform: translateX(-50%); white-space: nowrap; color: var(--ink); text-decoration: none; font: 700 clamp(36px, 8.6vw, 72px)/1 "UnifrakturCook", "Old English Text MT", serif; transition: font-size .45s ease, top .45s ease; }
.zui.deep .zmark { left: auto; right: max(16px, env(safe-area-inset-right, 0px)); transform: none; font-size: 21px; top: max(22px, env(safe-area-inset-top, 0px)); }
.zfoot { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.zfoot a { color: var(--spot); text-decoration: none; }
.zfoot .live { color: var(--ink); }
.zfoot .live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--spot); margin-right: 7px; animation: blink 1.6s ease-in-out infinite; }
.zui.deep .zfoot, .zui.home #zsrc { display: none; }
#zsrc { position: absolute; }
#zsrc[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#zback { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); top: 66px; max-height: calc(100% - 180px); overflow: auto; background: var(--paper); border: 1px solid var(--rule); padding: clamp(16px, 4vw, 36px); }

/* Story mode: one picture, full screen, tap through like stories. */
.story[hidden] { display: none; }
.story { position: fixed; inset: 0; z-index: 10; background: var(--paper); display: grid; grid-template-rows: auto 1fr auto; padding: max(12px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.segs { display: flex; gap: 4px; padding-right: 44px; height: 30px; align-items: center; }
.segs i { flex: 1; height: 3px; background: var(--soft); opacity: .35; position: relative; overflow: hidden; }
.segs i.done { opacity: 1; background: var(--ink); }
.segs i.now { opacity: 1; background: color-mix(in srgb, var(--ink) 25%, transparent); }
.segs i.now::after { content: ""; position: absolute; inset: 0; background: var(--spot); transform-origin: left; transform: scaleX(var(--p, 0)); }
.x { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); top: max(12px, env(safe-area-inset-top, 0px)); }
.stage { min-height: 0; display: grid; place-items: center; perspective: 1600px; }
.card { position: relative; width: min(100%, 1040px); height: min(100%, 720px); transition: transform .55s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; }
.card canvas, .card .back { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--rule); }
.card .back { transform: rotateY(180deg); background: var(--paper); padding: clamp(16px, 4vw, 40px); overflow: auto; }
.card.flipped { transform: rotateY(180deg); }
.back h2 { margin: 0 0 4px; font: 400 clamp(24px, 5vw, 40px)/1.05 "Anton", sans-serif; letter-spacing: .01em; text-transform: uppercase; }
.back .meta { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--soft); margin: 0 0 18px; }
.back a { color: var(--spot); }
.back table { border-collapse: collapse; width: 100%; font-size: 13px; }
.back td { border-top: 1px solid var(--soft); padding: 7px 8px 7px 0; vertical-align: top; }
.back td:first-child { white-space: nowrap; font-weight: 600; padding-right: 18px; }
.bar { display: flex; justify-content: center; gap: 18px; padding-top: 12px; }
.bar button { width: 44px; height: 44px; font-size: 18px; }
#flip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }