/* True Time design tokens. See docs/brand.md for usage rules. */

@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
}

:root {
  /* Color */
  --tt-ink: #16143A;        /* text, rules, borders */
  --tt-paper: #FDFDFB;      /* background */
  --tt-sun: #E8590C;        /* the mark, shapes, display type 24px and up (3.5:1 on paper) */
  --tt-sun-deep: #B8440A;   /* accent text, links, focus rings (5.3:1 on paper) */
  --tt-dusk: #5C5A75;       /* struck-through Wrong Time values, secondary text (6.5:1) */

  /* Type */
  --tt-font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --tt-font-text: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --tt-wordmark-tracking: 0.04em;
  --tt-label-tracking: 0.08em;

  /* Lines */
  --tt-rule: 3px solid var(--tt-ink);
  --tt-rule-thin: 2px solid var(--tt-ink);

  /* Spacing scale (px) */
  --tt-space-1: 4px;
  --tt-space-2: 8px;
  --tt-space-3: 12px;
  --tt-space-4: 16px;
  --tt-space-5: 24px;
  --tt-space-6: 40px;
  --tt-space-7: 64px;
}

/* True Time site styles. Tokens and @font-face rules come from assets/brand/tokens.css,
   which the build prepends to this file. Usage rules: docs/brand.md. Mobile first (390px). */

/* Fallback faces sized to the web fonts' metrics, so text does not reflow when they load. */
@font-face {
  font-family: "Anton Fallback";
  src: local("Impact");
  size-adjust: 96.26%;
  ascent-override: 122.19%;
  descent-override: 34.19%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Anton Fallback Sans";
  src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 71.97%;
  ascent-override: 163.43%;
  descent-override: 45.72%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Space Grotesk Fallback";
  font-weight: 400;
  src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 108.21%;
  ascent-override: 90.94%;
  descent-override: 26.99%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Space Grotesk Fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 101.52%;
  ascent-override: 96.93%;
  descent-override: 28.76%;
  line-gap-override: 0%;
}

:root {
  --font-display: Anton, "Anton Fallback", "Anton Fallback Sans", Impact, "Arial Narrow", sans-serif;
  --font-text: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue", Arial, sans-serif;
  --gutter: 20px;
  --focus: var(--tt-sun-deep);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--tt-paper);
  color: var(--tt-ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

h1, h2, h3, p, ul, dl, dd, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
p + p { margin-top: var(--tt-space-4); }

a { color: var(--tt-sun-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--tt-ink); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.wrap { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: var(--tt-space-3) var(--tt-space-4);
  background: var(--tt-ink);
  color: var(--tt-paper);
  font-weight: 700;
}
.skip:focus { top: var(--tt-space-2); color: var(--tt-paper); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.125rem, 9.4vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Masthead */

.masthead { padding-block: var(--tt-space-4) var(--tt-space-3); border-bottom: var(--tt-rule); }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--tt-ink);
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: var(--tt-wordmark-tracking);
  text-transform: uppercase;
  text-decoration: none;
}
.wordmark__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--tt-sun); }

/* Hero: the headline sits on a horizon line with the half sun beside the last word. */

.hero {
  --u: min(1vw, 6.4px);
  display: grid;
  grid-template-columns: calc(52.2 * var(--u) + 14px) minmax(0, 1fr);
  padding-top: var(--tt-space-5);
}
.hero__title {
  grid-area: 1 / 1 / 2 / 3;
  padding-bottom: 10px;
  border-bottom: 4px solid var(--tt-ink);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__line { display: block; line-height: 0.9; }
.hero__line--top { font-size: calc(15.6 * var(--u)); }
.hero__line--num { font-size: calc(50 * var(--u)); margin-block: 0.035em 0.045em; }
.hero__line--end { font-size: calc(16.5 * var(--u)); }
.hero__sun { grid-area: 1 / 2 / 2 / 3; align-self: end; justify-self: end; width: min(100%, calc(34 * var(--u))); margin-bottom: 4px; }
.hero__sun svg { display: block; width: 100%; height: auto; fill: var(--tt-sun); }
.hero__body { grid-area: 2 / 1 / 3 / 3; padding-top: var(--tt-space-4); }
.hero__sub { font-size: 1.25rem; line-height: 1.25; font-weight: 700; text-wrap: balance; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tt-space-3) var(--tt-space-5);
  margin-top: var(--tt-space-4);
}
.hero__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tt-ink);
  font-weight: 700;
}
.hero__link:hover { color: var(--tt-sun-deep); }

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 8px 24px;
  border: 3px solid var(--tt-ink);
  border-radius: 0;
  background: var(--tt-paper);
  color: var(--tt-ink);
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.1;
  letter-spacing: var(--tt-wordmark-tracking);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn--primary { background: var(--tt-sun); }
.btn:hover, .btn--primary:hover { background: var(--tt-ink); color: var(--tt-paper); }
.btn--block { width: 100%; }
.btn--sun { border-color: var(--tt-sun); background: var(--tt-sun); color: var(--tt-ink); }
.btn--ghost { border-color: var(--tt-paper); background: transparent; color: var(--tt-paper); }
.btn--sun:hover, .btn--ghost:hover { border-color: var(--tt-paper); background: var(--tt-paper); color: var(--tt-ink); }

/* Sections */

.section { padding-block: 44px; }
.section + .section { border-top: var(--tt-rule); }
.section > .display { margin-bottom: var(--tt-space-5); }
.join { padding-top: 36px; }

.box { border: var(--tt-rule); padding: var(--tt-space-5) var(--tt-space-4); }
.box > .display { margin-bottom: var(--tt-space-5); }

/* Forms */

.field { display: grid; gap: 6px; margin-bottom: var(--tt-space-4); }
.field label { font-weight: 700; }
.field input {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 2px solid var(--tt-ink);
  border-radius: 0;
  background: var(--tt-paper);
  color: var(--tt-ink);
  font: inherit;
  appearance: none;
}
.field input[aria-invalid="true"], .check input[aria-invalid="true"] { border: 3px solid var(--tt-sun-deep); }
.field__optional { font-weight: 400; color: var(--tt-dusk); }
.field__help { font-size: 0.875rem; color: var(--tt-dusk); }
.field__error, .form__error { font-size: 0.9375rem; font-weight: 700; color: var(--tt-sun-deep); }
.form__error { margin-bottom: var(--tt-space-4); }

.check { display: flex; align-items: flex-start; gap: var(--tt-space-3); min-height: 44px; margin-block: 2px var(--tt-space-4); }
.check input {
  flex: none;
  display: grid;
  place-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 2px solid var(--tt-ink);
  border-radius: 0;
  background: var(--tt-paper);
  appearance: none;
  cursor: pointer;
  position: relative;
}
.check input::after { content: ""; position: absolute; inset: -10px; }
.check input::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--tt-ink);
  clip-path: polygon(14% 52%, 0 67%, 39% 100%, 100% 22%, 85% 9%, 37% 68%);
  transform: scale(0);
}
.check input:checked::before { transform: scale(1); }
.check label { padding-top: 2px; cursor: pointer; }
.check__error { margin-top: calc(-1 * var(--tt-space-2)); margin-bottom: var(--tt-space-4); }

@media (forced-colors: active) {
  .check input { appearance: auto; }
  .check input::before { display: none; }
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__consent { margin-top: var(--tt-space-4); font-size: 0.875rem; line-height: 1.45; color: var(--tt-dusk); }
.form__consent a { padding-block: 13px; }

/* Success state and call script */

.success > * + * { margin-top: var(--tt-space-4); }
.success--org, .success__thanks { font-family: var(--font-text); font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.tel { color: var(--tt-ink); font-weight: 700; white-space: nowrap; }
.script { border: var(--tt-rule-thin); padding: var(--tt-space-4); font-size: 1.125rem; line-height: 1.4; font-weight: 700; }

/* The difference */

.diff__facts { display: grid; gap: var(--tt-space-5); }
.fact { border-top: var(--tt-rule-thin); padding-top: var(--tt-space-3); }
.fact__name { font-size: 1.0625rem; line-height: 1.3; font-weight: 700; }
.fact__pair { display: grid; gap: var(--tt-space-2); margin-top: var(--tt-space-3); }
.fact__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tt-space-3); }
.fact__row dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: var(--tt-label-tracking); text-transform: uppercase; white-space: nowrap; }
.fact__row dd { font-family: var(--font-display); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.fact__row--wrong { color: var(--tt-dusk); }
.fact__row--wrong dd { font-size: 2.75rem; }
.fact__row--wrong s { text-decoration: line-through; text-decoration-thickness: 4px; }
.fact__row--true dd { font-size: min(17.5vw, 5.5rem); }
.caption { margin-top: var(--tt-space-5); font-size: 0.9375rem; color: var(--tt-dusk); }

/* Where it stands */

.figure { display: grid; align-content: start; gap: var(--tt-space-1); border-top: var(--tt-rule-thin); padding-block: var(--tt-space-3) var(--tt-space-4); }
.figure__num { font-family: var(--font-display); font-weight: 400; font-size: 3.5rem; line-height: 1; }
.figure__label { text-wrap: balance; }
.dateline { margin-top: var(--tt-space-2); font-size: 0.9375rem; color: var(--tt-dusk); }

/* Call block: Ink band, Paper text, Sun accents */

.call { --focus: var(--tt-sun); background: var(--tt-ink); color: var(--tt-paper); padding-block: 52px; }
.call a:not(.btn) { color: var(--tt-paper); }
.call__grid { display: grid; gap: var(--tt-space-5); }
.call__title { color: var(--tt-sun); font-size: clamp(1.75rem, 7.6vw, 2.75rem); }
.call__number { margin-top: var(--tt-space-3); font-family: var(--font-display); font-size: min(15.2vw, 6.5rem); line-height: 1; white-space: nowrap; }
.call__number a { text-decoration: none; }
.call__number a:hover { color: var(--tt-sun); }
.call__line { margin-top: var(--tt-space-3); }
.call__direct { margin-top: var(--tt-space-3); }
.call__direct li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--tt-space-3); min-height: 44px; border-top: 2px solid var(--tt-dusk); }
.call__direct a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; white-space: nowrap; }
.call .script { border-color: var(--tt-paper); }
.call__actions { display: flex; flex-wrap: wrap; gap: var(--tt-space-3); margin-top: var(--tt-space-4); }
.call__actions .btn { flex: 1 1 auto; }

/* Organizations */

.org { display: grid; gap: var(--tt-space-5); }
.org__intro .display { margin-bottom: var(--tt-space-4); }

/* Questions */

.faq__list { border-bottom: var(--tt-rule-thin); }
.faq__list details { border-top: var(--tt-rule-thin); }
.faq__list summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: var(--tt-space-3) 44px var(--tt-space-3) 0;
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::before, .faq__list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 18px;
  height: 4px;
  margin-top: -2px;
  background: var(--tt-ink);
}
.faq__list summary::after { transform: rotate(90deg); }
.faq__list details[open] summary::after { display: none; }
.faq__list summary:hover { color: var(--tt-sun-deep); }
.faq__list details p { max-width: 64ch; padding-bottom: var(--tt-space-5); }

/* Footer, privacy and notice pages */

.footer { border-top: var(--tt-rule); padding-block: var(--tt-space-5) var(--tt-space-6); font-size: 0.9375rem; }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--tt-space-5); margin-top: var(--tt-space-2); }
.footer a { display: inline-block; padding-block: 11px; }

.prose { max-width: 64ch; padding-block: 44px; }
.prose__title { margin-bottom: var(--tt-space-5); font-size: clamp(3rem, 14vw, 5rem); }

.notice { min-height: 50vh; }
.notice > p { margin-top: var(--tt-space-4); }

/* Tablet */

@media (min-width: 700px) {
  :root { --gutter: 40px; }
  .section { padding-block: 64px; }
  .box { padding: var(--tt-space-6); }
  .hero__sub { font-size: 1.5rem; }
  .diff__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tt-space-6); }
  .fact__row--true dd { font-size: 4.25rem; }
  .figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tt-space-5); }
  .call { padding-block: 72px; }
  .call__now { display: none; }
  .call__actions .btn { flex: 0 1 auto; }
  .notice .box { max-width: 720px; }
}

/* Desktop: headline left, sun on its own horizon line right, as on the flyer. */

@media (min-width: 960px) {
  .hero {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 56px;
    align-items: end;
    padding-block: 48px 8px;
  }
  .hero__title { grid-area: 1 / 1 / 3 / 2; padding-bottom: 0; border-bottom: 0; }
  .hero__line--top { font-size: 5.5rem; }
  .hero__line--num { font-size: 17.5rem; }
  .hero__line--end { font-size: 7.95rem; }
  .hero__sun { grid-area: 1 / 2 / 2 / 3; justify-self: stretch; width: auto; margin-bottom: 0; padding-inline: 8%; border-bottom: 4px solid var(--tt-ink); }
  .hero__body { grid-area: 2 / 2 / 3 / 3; padding-top: var(--tt-space-5); }

  .fact__row--wrong dd { font-size: 3.5rem; }
  .fact__row--true dd { font-size: 6.5rem; }

  .join__box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; align-items: start; padding: 48px; }
  .join__box > .display { margin-bottom: 0; font-size: 4.5rem; }
  .join__box > .success { grid-column: 1 / -1; max-width: 720px; }

  .call__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 56px; align-items: end; }
  .org { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; align-items: start; }
  .faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  .skip, .hp, form, .call__actions { display: none !important; }
  .call { background: none; color: var(--tt-ink); border-block: var(--tt-rule); }
  .call a:not(.btn), .call__title { color: var(--tt-ink); }
  details > p { display: block; }
}