/* LiveDeficit — layout, written by hand.

   Colour and type live in tokens.css, which `make web` generates from
   Palette.swift and Typography.swift. Nothing here should introduce a colour or
   a face; if a value is missing from the tokens, add it there.

   Light only, and deliberately: see the note at the top of tokens.css. */

@import url("tokens.css");

/* ---- Faces --------------------------------------------------------------
   Served from this origin. The site makes no request to any other host, which
   is partly a privacy position and partly the same argument as the rest of the
   app: a page about where figures come from should not be quietly reporting its
   readers to a third party. */

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Variable.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* ---- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--body-weight);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
p, ul, ol, figure, table { margin: 0; }

/* ---- Type ---------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  font-size: clamp(2.7rem, 7vw, 4.4rem);
  line-height: 1.04;
}

h2 {
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  line-height: 1.1;
}

h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: 1.05rem;
  line-height: 1.35;
}

/* The mono micro-label that names a section or a unit. Straight out of the
   app, where it does the same job above every figure. */
.label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--mono-label-tracking);
  color: var(--ink-tertiary);
  display: block;
}

.lede {
  font-size: clamp(1.08rem, 1.9vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink-secondary);
  max-width: 34em;
}

.note { font-size: 0.92rem; color: var(--ink-secondary); }
.fine { font-size: 0.85rem; color: var(--ink-tertiary); line-height: 1.55; }

strong { font-weight: 600; }
em { font-style: italic; }

/* Links carry the deep cut, not the vivid one: `accent` is ~2.3:1 on white and
   is for graphics. Small text needs `accent-deep`, which clears 4.5:1. */
a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.num { font-variant-numeric: tabular-nums; }

/* ---- Shell --------------------------------------------------------------- */

.wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }
.narrow { width: min(680px, 100% - 2.5rem); margin-inline: auto; }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.6rem 0;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: var(--mark-weight);
  letter-spacing: var(--mark-tracking);
  font-size: 1.06rem;
  color: var(--ink);
  text-decoration: none;
}
.mark svg { display: block; flex: none; }

.masthead nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: 0.94rem;
}
.masthead nav a { color: var(--ink-secondary); text-decoration: none; }
.masthead nav a:hover { color: var(--ink); text-decoration: underline; }

/* Says what the app is, where somebody looking for a download will look. It is
   not a badge or a boast — the app is not released, and the page has no
   business implying otherwise. */
.chip {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: var(--mono-label-tracking);
  color: var(--ink-secondary);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
  background: var(--paper);
}

section { padding-block: clamp(3.4rem, 7vw, 6rem); }
section + section { border-top: 1px solid var(--rule); }

.head { max-width: 40em; margin-bottom: clamp(2rem, 4vw, 3rem); }
.head .label { margin-bottom: 0.9rem; }
.head h2 + .lede { margin-top: 1.1rem; }

/* ---- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(2rem, 5vw, 4rem) clamp(3.4rem, 7vw, 6rem); }
.hero-grid {
  display: grid;
  gap: clamp(2.4rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem; }
.hero-copy h1 { margin-top: 0.3rem; }

/* The subtraction, set as the equation it is. */
.equation {
  font-family: var(--font-mono);
  /* Small enough that the whole subtraction stays on one line at 375px. It
     reads as an equation; wrapping it in the middle undoes that. */
  font-size: clamp(0.74rem, 2.6vw, 0.95rem);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  display: inline-block;
}

/* ---- Screenshots --------------------------------------------------------
   Real captures. The proportions of the frame follow the App Store page: a
   58pt radius on a 1128pt-wide shot, which is the ratio below. */
.shot {
  border-radius: 5.14%;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(10, 12, 18, 0.04), 0 24px 48px -20px rgba(10, 12, 18, 0.18);
  background: var(--paper);
}
.shot-wrap { max-width: 340px; margin-inline: auto; }
figure { margin: 0; }
figcaption { margin-top: 0.9rem; }

/* ---- Cards --------------------------------------------------------------- */

.grid { display: grid; gap: 1rem; }
@media (min-width: 660px) { .grid.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid.three { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.card .label { margin-bottom: 0.2rem; }
.card p { color: var(--ink-secondary); font-size: 0.96rem; }

/* Split: copy one side, a capture the other. */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 0.8fr; }
  .split.flip > :first-child { order: 2; }
}

/* ---- The dial demonstration --------------------------------------------- */

.dial-demo {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 1.5rem 1.5rem 1.75rem;
  max-width: 460px;
  margin-inline: auto;
}

/* Every state is in the DOM and only one is opaque, so moving the slider does
   not wait on a network request. */
.dial-stage {
  position: relative;
  aspect-ratio: 360 / 310;
}
.dial-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.12s linear;
}
.dial-stage img.is-shown { opacity: 1; }

.dial-scrub { margin-top: 0.5rem; }
.dial-ends {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}

/* Hidden until the script is running: without it the slider would be a control
   that does nothing, and the still dial above it is a complete thought on its
   own. */
.needs-js { display: none; }
.js .needs-js { display: block; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  margin: 0;
  cursor: grab;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; background: var(--rule);
}
input[type="range"]::-moz-range-track {
  height: 5px; border-radius: 999px; background: var(--rule);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%; margin-top: -10.5px;
  background: var(--paper); border: 6px solid var(--accent);
  box-shadow: 0 2px 6px rgba(10, 12, 18, 0.2);
}
input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper); border: 6px solid var(--accent);
  box-shadow: 0 2px 6px rgba(10, 12, 18, 0.2);
}

/* The reading in words. The app never tells you anything by colour alone, and
   neither does this: the sentence below the dial says the same thing the arc
   does, and it is what a screen reader is given. */
.dial-said {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--ink-secondary);
  min-height: 3.2em;
}
.dial-said strong { color: var(--ink); font-weight: 600; }

/* ---- Provenance list ----------------------------------------------------- */

.origins { border-top: 1px solid var(--rule); }
.origin {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.origin dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--mono-label-tracking);
  color: var(--ink);
  flex: none;
  min-width: 11rem;
}
.origin dd { margin: 0; color: var(--ink-secondary); font-size: 0.95rem; flex: 1 1 16rem; }

/* ---- Widgets ------------------------------------------------------------- */

.widget-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}
.widget-row img { border-radius: 14px; border: 1px solid var(--rule); }
.widget-row .on-lock { border-color: transparent; }
.w-small { width: 128px; }
.w-medium { width: 274px; }
.w-circular { width: 72px; }
.w-rectangular { width: 143px; }
.w-live { width: 274px; }

/* Nothing uses this today — the waitlist form it was written for is gone, and
   the App Store link that will replace it does not exist yet. Kept for the
   contrast note, which is the part that would be re-derived wrongly: white on
   `accent` is about 2.3:1 and fails at any size, and `accent-deep` clears 4.5:1
   while still being the app's green. */
.button {
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--accent-deep);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.button:hover { background: var(--ink); }

/* ---- Callout ------------------------------------------------------------- */

.callout {
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.2rem;
  color: var(--ink-secondary);
}

.disclaimer {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  background: var(--paper);
}

/* ---- Prose (articles) ---------------------------------------------------- */

.prose > * + * { margin-top: 1.3rem; }
.prose h2 { margin-top: 2.8rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.prose h3 { margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.5rem; }
.prose figure { margin-block: 2rem; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.prose th, .prose td {
  text-align: left;
  padding: 0.6rem 0.8rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--mono-label-tracking);
  color: var(--ink-tertiary);
  font-weight: 400;
}
.table-scroll { overflow-x: auto; }

.byline {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 1.2rem;
}

.post-list { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.post-list li { border-bottom: 1px solid var(--rule); padding: 1.5rem 0; }
.post-list h3 { font-size: 1.3rem; font-weight: 400; letter-spacing: -0.02em; }
.post-list h3 a { color: var(--ink); text-decoration: none; }
.post-list h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent-ink); }
.post-list p { color: var(--ink-secondary); margin-top: 0.4rem; }
.post-list .label { margin-bottom: 0.5rem; }

/* ---- Footer -------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.6rem, 5vw, 4rem) 3rem;
}
.foot-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.foot-grid ul { list-style: none; padding: 0; }
.foot-grid li + li { margin-top: 0.4rem; }
.foot-grid a { color: var(--ink-secondary); text-decoration: none; font-size: 0.95rem; }
.foot-grid a:hover { color: var(--ink); text-decoration: underline; }

.skip {
  position: absolute;
  left: -9999px;
  background: var(--paper);
  padding: 0.7rem 1rem;
  border-radius: 10px;
  z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}