/*
  tallyist.co, one stylesheet for every page.

  Tokens are the site design's (the owner's Claude Design handoff, 2026-09-24),
  which mirror the app's docs/design-system.md: one blue hue, iOS's grounds and
  inks, the app's radii. Light values sit on :root and dark ones under
  prefers-color-scheme; the site has no theme switch, so there is nothing else
  to key on.

  Every colour pair a page relies on is declared as an @contrast comment and
  measured in both schemes by scripts/contrast.py, which the site workflow runs
  over this file. Run it after any colour change:
  python3 scripts/contrast.py css/site.css (the app's invariant 10: measured,
  never eyeballed).

  No web fonts, no framework, nothing loaded from another origin.
*/

:root {
  color-scheme: light dark;

  /* The Tallyist Blue ramp, the steps the site uses. */
  --ramp-100: #cde2fb;
  --ramp-200: #9ec5f4;
  --ramp-250: #86b6ef;
  --ramp-400: #3987e5;
  --ramp-450: #2a78d6;
  --ramp-500: #256abf;
  --ramp-600: #184f95;
  --ramp-650: #104281;
  --ramp-700: #0d366b;

  --accent: var(--ramp-500);
  --accent-fill: var(--ramp-500);
  --on-fill: #ffffff;

  --surface: #f2f2f7;
  --surface-card: #ffffff;
  --ground: var(--surface);

  --label: rgba(0, 0, 0, 0.88);
  /* The design's secondary text is the label at 76%, written out so the
     contrast check can read it: 0.88 × 0.76. iOS's own secondaryLabel is 3.44:1
     on white, under the 4.5:1 text needs, so it is never used for text here. */
  --label-2: rgba(0, 0, 0, 0.6688);
  --label-secondary: rgba(60, 60, 67, 0.6);
  --separator: rgba(60, 60, 67, 0.29);

  --r-control: 14px;
  --r-pill: 22px;
  --r-card: 26px;
  --r-sheet: 34px;
  --touch: 44px;

  --font: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, "Helvetica Neue", sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  /* Between sections. Was clamp(72px, 10vw, 136px): 272px of empty ground
     between one feature and the next at desktop widths, about a third of
     the home page's height. */
  --section-y: clamp(56px, 7vw, 96px);
  --page-top: clamp(32px, 6vw, 88px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: var(--ramp-400);
    --accent-fill: var(--ramp-500);

    --surface: #000000;
    --surface-card: #1c1c1e;

    --label: rgba(255, 255, 255, 0.92);
    /* 0.92 × 0.76 */
    --label-2: rgba(255, 255, 255, 0.6992);
    --label-secondary: rgba(235, 235, 245, 0.6);
    --separator: rgba(84, 84, 88, 0.6);
  }
}

/* @contrast --label on --surface: text */
/* @contrast --label on --surface-card: text */
/* @contrast --label-2 on --surface: text */
/* @contrast --label-2 on --surface-card: text */
/* @contrast --accent on --surface: ui */
/* @contrast --accent on --surface-card: ui */
/* @contrast --on-fill on --accent-fill: text */
/* @contrast --accent-fill on --surface: ui */
/* @contrast --accent-fill on --surface-card: ui */

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* An in-page link scrolls rather than jumps, so the reader sees where
     it went. Off under reduced motion, below. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--label);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:hover { text-decoration-thickness: 2.5px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

summary { cursor: pointer; }

img { max-width: 100%; }

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Header and footer */

.site-header {
  background: var(--surface);
  padding: 16px var(--gutter);
}
.site-header nav {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* The icon beside the word is an exception to the app's mark rule, approved
   for marketing only (docs/design-system.md, "The mark"). */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--touch);
  text-decoration: none;
}
.brand img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 7.5px;
}
.brand span {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 28px);
  font-size: 15px;
  font-weight: 500;
}
.site-nav a,
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  text-decoration: none;
}
.site-nav a[aria-current="page"],
.footer-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--separator);
  padding: 40px var(--gutter) 48px;
}
.site-footer > div {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  font-size: 15px;
  font-weight: 500;
}
.site-footer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--label-2);
  max-width: 44em;
  text-wrap: pretty;
}

/* Sections */

.section {
  background: var(--surface);
  padding: var(--section-y) var(--gutter);
}
/* A card section's edges are drawn. Its tint alone measures about 1.1:1
   against the ground in light and 1.2:1 in dark, a surface rather than an
   edge, so a few pixels of it at the bottom of a screen say nothing. */
.section--card {
  background: var(--surface-card);
  border-top: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
}
.section--page { padding-top: var(--page-top); }

.eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label-2);
}

.page-title {
  margin: 0 0 24px;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}

.lead {
  margin: 0 0 36px;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--label-2);
  text-wrap: pretty;
}

/* The two published documents. Their bodies are Markdown rendered by Jekyll,
   generated in semmes/DrinkTracker and never edited here (ADR-0024), so they
   are styled by position rather than by class. */

.doc {
  max-width: 720px;
  margin: 0 auto;
}
.doc > h1 {
  margin: 0 0 12px;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}
.doc > h2 {
  margin: 48px 0 16px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.doc > p,
.doc > ul,
.doc > ol {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}
.doc > ul,
.doc > ol {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.doc li > p { margin: 0; }

/* The policy's date line: the paragraph right after its title. */
.doc--policy > h1 + p {
  margin: 0 0 clamp(40px, 6vw, 56px);
  font-size: 16px;
  font-weight: 600;
}

.card {
  padding: 28px 24px;
  border-radius: var(--r-card);
  background: var(--surface-card);
  box-shadow: 0 0 0 1px var(--separator);
}

.site-note {
  max-width: 720px;
  margin: clamp(56px, 8vw, 88px) auto 0;
}
.site-note h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.site-note p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}
.site-note p:last-child { margin-bottom: 0; }

/* Support */

.doc--support { max-width: 760px; }
.doc--support > h1 { margin-bottom: 24px; }
.doc--support > h1 + p {
  margin: 0 0 36px;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--label-2);
}
.doc--support > h2 {
  margin: clamp(56px, 8vw, 88px) 0 8px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label-2);
}

.support-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 0 0 16px;
  padding: 24px;
  border-radius: var(--r-card);
  background: var(--surface-card);
  box-shadow: 0 0 0 1px var(--separator);
}
.support-contact__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  background: var(--accent-fill);
  color: var(--on-fill);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.support-contact__address {
  margin: 0;
  font-size: 17px;
}

.doc--support > h2 + details { border-top: 1px solid var(--separator); }
.doc details { border-bottom: 1px solid var(--separator); }
.doc summary {
  padding: 20px 0;
  min-height: 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}
.doc details > p {
  margin: 0 0 24px;
  max-width: 38em;
  font-size: 17px;
  line-height: 1.55;
  color: var(--label-2);
  text-wrap: pretty;
}

/* 404 */

.section--notfound { padding: clamp(72px, 14vw, 200px) var(--gutter); }
.notfound {
  max-width: 640px;
  margin: 0 auto;
}
.notfound p {
  margin: 0 0 32px;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.5;
  color: var(--label-2);
}
.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 17px;
  font-weight: 600;
}
.link-row a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
}

/* The home, Apple Watch and Press pages */

.container { max-width: 1120px; margin: 0 auto; }
/* The hero ends close to its content, so the next section's edge, and on
   most screens its heading, is inside the first screen. Before, 136px of
   empty ground under the phone met the bottom of a 1512×850 or 1920×950
   window almost exactly, and the page looked finished. */
.section--hero {
  padding-top: var(--page-top);
  padding-bottom: clamp(32px, 4vw, 56px);
}
.section--hero + .section { padding-top: clamp(40px, 5vw, 64px); }
.section--compact { padding: clamp(40px, 5vw, 64px) var(--gutter); }
.section--compact .body { max-width: 640px; }
.section--statement { padding: clamp(64px, 8.5vw, 112px) var(--gutter); }

.display {
  margin: 0 0 24px;
  font-size: clamp(42px, 6.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}
.heading {
  margin: 0 0 20px;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 700;
  text-wrap: balance;
}
.heading--small {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.body {
  margin: 0;
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.5;
  color: var(--label-2);
  text-wrap: pretty;
}
.hero-lead {
  margin: 0 0 40px;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--label-2);
  text-wrap: pretty;
}
.more-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  margin-top: 28px;
  font-size: 17px;
  font-weight: 600;
}
/* The hero's link to the next section, with an arrow drawn like the
   feature icons. It sits on the badge's own margin. */
.more-link--down { margin-top: 0; gap: 6px; }
.more-link--down svg { flex: none; }

/* A feature: text beside its picture. Rows alternate which side the picture
   is on, and stack text first below about 700px. */
.row {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 7vw, 112px);
}
.row--reverse { flex-direction: row-reverse; }
.row__text {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 500px;
}
.row__text--hero {
  flex-basis: 360px;
  max-width: 560px;
}
.row__media {
  flex: 0 1 300px;
  min-width: 0;
  width: 100%;
}
.row__media--hero { flex-basis: 320px; }
.row__media--watch { flex-basis: 260px; }

/* The app inside Apple's own device images, flattened into one picture
   (scripts/make-images.py). Used whole: Apple's marketing guidelines allow no
   cropping, tilting, shadows or anything drawn over them. */
.device { display: block; margin: 0 auto; }
.device img { display: block; width: 100%; height: auto; }
.device--phone { max-width: 300px; }
.device--hero { max-width: 320px; }
.device--watch { max-width: 260px; }
/* The hero phone gives height on a short window, so the hero never fills
   the first screen by itself: full size from about 1000px of height, and
   never under 560px, which keeps it a phone. Its width follows, centred
   in its column. */
.device--hero img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: max(560px, calc(100svh - 350px));
  margin: 0 auto;
}
/* Stacked under the text, the hero phone is narrower, so the first screen
   ends on the link with the phone's top edge in view rather than on a
   list that reads like a footer. Width governs there, not height. */
@media (max-width: 700px) {
  .section--hero .row { gap: 32px; }
  .device--hero { max-width: min(320px, 70vw); }
  .device--hero img { max-height: none; }
}
/* On a short window (a 1366×768 laptop's browser shows about 650px, a
   13-inch MacBook's about 770) the hero's top, the headline's size and the
   margins give, so the badge and the link stay on the first screen and the
   next section's edge follows them. The row aligns to its top there, so
   the text keeps its place while the phone runs past the fold. */
@media (max-height: 800px) {
  .section--hero { padding-top: min(var(--page-top), 40px); }
  .section--hero .row { align-items: flex-start; }
  .display { margin-bottom: 16px; font-size: clamp(42px, 6vw, 72px); }
  .hero-lead { margin-bottom: 24px; }
  .section--hero .badges { margin-bottom: 20px; }
}

.pair {
  flex: 1 1 400px;
  min-width: 0;
  max-width: 560px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.4vw, 28px);
  align-items: start;
}
.pair--watch { max-width: 520px; }
.pair > :nth-child(2) { margin-top: clamp(24px, 6vw, 64px); }

figure { margin: 0; }
/* Under the device, aligned with its left edge, as the design sets it. */
.caption {
  max-width: 300px;
  margin: 16px auto 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--label-2);
  text-wrap: pretty;
}

/* Close-ups: crops of a screenshot, with no device drawn around them. */
.crops {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
}
.crop picture {
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--separator);
}
.crop img { display: block; width: 100%; height: auto; }
.crop figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--label-2);
}

/* Store badges. Apple's badge is its own artwork, used as supplied: at least
   40px tall, with clear space of a quarter of its height, one per page. */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px;
}
.badge {
  display: inline-flex;
  border-radius: 9px;
}
.badge img {
  display: block;
  width: 150px;
  height: 50px;
}

.platforms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: 15px;
  line-height: 1.3;
}
.platforms li {
  display: flex;
  align-items: center;
  gap: 9px;
}
.platforms strong { font-weight: 600; }
.dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--label);
}
.dot--coming {
  background: none;
  border: 1.5px solid var(--label);
}

.features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 40px 48px;
}
.features li {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.features svg {
  stroke: var(--accent);
  color: var(--accent);
}
.features h3 {
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 600;
}
.features p {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--label-2);
}
.heading--grid {
  max-width: 14em;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.facts {
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--separator);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--separator);
}
.facts > div {
  background: var(--surface-card);
  padding: 28px 24px;
}
.facts dt {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}
.facts dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--label-2);
}
.body--intro {
  max-width: 36em;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.centered {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.centered .body {
  max-width: 30em;
  margin: 0 auto;
}
.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.closing .heading { margin: 0; }
.closing img.icon {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 20px;
}
.closing .more-link { margin: 0; }
.closing .platforms { justify-content: center; }

/* Apple Watch */

.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 0 0 clamp(40px, 6vw, 72px);
  padding: 16px 20px;
  border-radius: var(--r-control);
  box-shadow: inset 0 0 0 1.5px var(--label);
}
.banner strong {
  font-size: 17px;
  font-weight: 600;
}
.banner span {
  font-size: 16px;
  color: var(--label-2);
}
.statement {
  max-width: 880px;
  margin: 0 auto;
}
.statement .heading {
  margin-bottom: 28px;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.statement .body {
  max-width: 36em;
  font-size: clamp(17px, 1.7vw, 21px);
}
.install {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.install .heading {
  margin: 0;
  font-size: clamp(28px, 3.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.install p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--label-2);
}
.install .badges { margin: 0; }

/* Press */

.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(40px, 5vw, 64px);
}
.press-grid h2,
.press-title {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 600;
}
.press-title { margin-top: clamp(56px, 8vw, 96px); margin-bottom: 24px; }
.press-grid p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--label-2);
}
.press-grid p.contact {
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--label);
}
.press-lead {
  max-width: 36em;
  margin-bottom: clamp(48px, 7vw, 80px);
}
.press-icon {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 0 20px;
  border-radius: 36px;
}
.press-shots {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
}
.press-shots li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
/* Plain screenshots with square corners: no device, and nothing shaped
   like one. */
.press-shots img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px var(--separator);
}

/* The footer's legal lines. */
.site-footer .legal { font-size: 12px; }