/* And Done — shared styles for anddone.club.
   The app's own palette: near-black ground, warm off-white type, the
   brand yellow used sparingly. System type throughout: SF Pro on Apple
   devices, the platform's sans elsewhere. */

:root {
  --ground: #09090B;
  --surface: #151519;
  --raised: #1E1E23;
  --ink: #F5F5F7;
  --ink-2: rgba(245, 245, 247, 0.68);
  --ink-3: rgba(245, 245, 247, 0.42);
  --hairline: rgba(245, 245, 247, 0.10);
  --accent: #FFD60A;
  --on-accent: #141416;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 680px;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground: #F7F6F2;
    --surface: #FFFFFF;
    --raised: #EFEDE8;
    --ink: #141416;
    --ink-2: rgba(20, 20, 22, 0.68);
    --ink-3: rgba(20, 20, 22, 0.45);
    --hairline: rgba(20, 20, 22, 0.10);
    --accent: #F5C518;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* Header: the script mark, home link. */
.site-header {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 28px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mark { display: inline-flex; color: var(--ink); text-decoration: none; }
/* The script mark, painted in the text colour through a mask, so one SVG
   serves light and dark. */
.logo {
  display: block;
  width: 118px;
  aspect-ratio: 69.2203 / 13.19;
  background: currentColor;
  -webkit-mask: url("/assets/logo.svg") no-repeat center / contain;
  mask: url("/assets/logo.svg") no-repeat center / contain;
}
.logo.large { width: min(320px, 80vw); }
.site-nav { display: flex; gap: 18px; font-size: 14px; }
.site-nav a { text-decoration: none; color: var(--ink-2); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

/* Reading pages */
main.doc {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 56px 20px 40px;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
h1 {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 650;
  font-size: clamp(32px, 6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
h2 {
  font-family: var(--display);
  font-weight: 650;
  font-size: 21px;
  line-height: 1.3;
  margin: 44px 0 10px;
}
h3 { font-size: 17px; margin: 26px 0 6px; }
p, li { color: var(--ink-2); }
strong { color: var(--ink); font-weight: 600; }
ul { padding-left: 20px; }
li { margin: 6px 0; }
.lede { font-size: 19px; color: var(--ink); }
.meta { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }

.summary {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 22px 24px;
  margin: 28px 0 8px;
}
.summary ul { margin: 0; padding-left: 18px; }
.summary li { color: var(--ink); }

.faq details {
  border-top: 1px solid var(--hairline);
  padding: 16px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 24px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 650;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.button:hover { color: var(--on-accent); filter: brightness(1.05); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

footer.site-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 28px 20px 40px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  color: var(--ink-3);
}
footer.site-footer a { color: var(--ink-2); text-decoration: none; }
footer.site-footer a:hover { color: var(--ink); }
footer.site-footer .spacer { flex: 1 1 auto; }

/* Landing: one photograph, black and white, with the words on the dark
   road and the only colour on the page in the QR. Headline and fine print
   are SF Pro Expanded (system SF at 125% width); Archivo at the same width
   stands in where SF isn't installed. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
body.landing {
  --expanded: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --yellow: #FFD60A;
  --gutter: clamp(20px, 3.4vw, 52px);
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: #000;
  color: #fff;
  color-scheme: dark;
  overflow-x: hidden;
}
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 100%;
  filter: grayscale(1);
}
/* A floor of black under the words; the photo's road is already dark. */
body.landing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent 52%, rgba(0, 0, 0, 0.55) 80%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
}

.landing-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(var(--gutter), env(safe-area-inset-top)) var(--gutter) 0;
  color: #fff;
  mix-blend-mode: difference;
  z-index: 2;
}
/* The wordmark and links invert against whatever is under them: black on
   the white sky, white where a runner's arm crosses. The blend has to sit
   on the bar itself, which is what meets the photo. */
.wordmark { display: block; color: inherit; line-height: 0; }
.wordmark:hover { color: inherit; }
.logo-svg { display: block; width: clamp(128px, 11vw, 176px); height: auto; }
.landing-bar nav { display: flex; gap: 22px; }
.landing-bar nav a {
  color: inherit;
  text-decoration: none;
  font-family: var(--expanded);
  font-stretch: 125%;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.landing-bar nav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: currentColor; }

.hero {
  position: fixed;
  left: var(--gutter);
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  max-width: min(760px, calc(100vw - 2 * var(--gutter) - 200px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  animation: settle 1s 0.1s cubic-bezier(.2, .7, .2, 1) both;
}
.hero .route {
  display: block;
  width: clamp(200px, 21vw, 320px);
  aspect-ratio: 1.6;
  margin: 0 0 clamp(10px, 1.6vw, 24px) -14px;
}
.hero h1 {
  margin: 0;
  font-family: var(--expanded);
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
.hero .sub {
  margin: 18px 0 0;
  max-width: 30em;
  font-family: var(--sans);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
.hero .fine {
  margin: 22px 0 0;
  font-family: var(--expanded);
  font-stretch: 125%;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.hero .get { display: none; }
/* Phones only: the links live here instead of in the top bar. */
.landing-foot { display: none; }

.qr {
  position: fixed;
  right: var(--gutter);
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  animation: settle 1s 0.35s cubic-bezier(.2, .7, .2, 1) both;
}
.qr { perspective: 700px; }
/* A plate of brand yellow with a quiet metal finish: a soft sheen that
   follows the cursor (--mx/--my), a thin edge for thickness, and fine
   grain over the lot. The dots are raised out of it by the SVG's
   own emboss filter and stay dark, so the code still scans. */
.qr-tile {
  --lift: 0;
  position: relative;
  display: block;
  width: 140px;
  padding: 13px;
  border-radius: 18px;
  color: #141008;
  background:
    radial-gradient(80% 65% at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 60%),
    linear-gradient(150deg, #FFE24D 0%, #FFD60A 45%, #F2C800 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 2px rgba(120, 90, 0, 0.25),
    0 1px 0 #D9AE00, 0 2px 0 #BF9900,
    0 calc(12px + 8px * var(--lift)) calc(28px + 14px * var(--lift)) rgba(0, 0, 0, calc(0.45 + 0.1 * var(--lift)));
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(calc(1 + 0.015 * var(--lift)));
  transform-style: preserve-3d;
  will-change: transform;
}
.qr-tile:hover, .qr-tile:focus-visible { color: #141008; }
.qr-tile:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.qr-grain {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1.4 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.qr-code { position: relative; display: block; width: 100%; height: auto; }
/* The fixed hit area the plate follows the cursor within. */
.qr-anchor {
  position: absolute;
  top: -18px;
  right: -18px;
  width: calc(140px + 36px);
  height: calc(140px + 36px);
  z-index: 1;
  cursor: pointer;
}
.qr p {
  margin: 0;
  text-align: right;
  font-family: var(--expanded);
  font-stretch: 125%;
  font-weight: 500;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
@keyframes settle { from { opacity: 0; transform: translateY(12px); } }

/* Phones and tablets: the QR is on the screen you'd scan it with, so a
   yellow button takes its place. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .qr { display: none; }
  /* The first screen is the photo and the words alone; Support and
     Privacy sit in a footer just below it, a short scroll away. */
  .landing-bar nav { display: none; }
  .landing-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px var(--gutter) max(26px, env(safe-area-inset-bottom));
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--expanded);
    font-stretch: 125%;
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
  }
  .landing-foot nav { display: flex; gap: 22px; }
  .landing-foot a { color: #fff; text-decoration: none; }
  .landing-foot a:hover { color: #fff; }
  /* Portrait crops to the second runner: her side of the frame keeps
     clear sky behind the wordmark and open road under the words. */
  .backdrop { object-position: 74% 100%; }
  .hero {
    position: relative;
    left: auto;
    bottom: auto;
    right: auto;
    max-width: none;
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    justify-content: flex-end;
    padding: 0 var(--gutter) var(--gutter);
  }
  .hero .get {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-top: 24px;
    padding: 0 26px;
    border-radius: 24px;
    background: var(--yellow);
    color: #000;
    text-decoration: none;
    font-family: var(--expanded);
    font-stretch: 125%;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .qr { animation: none; }
}