/* TKDAILY — tkdailynutrition.com
   One stylesheet, screen + print. Tokens from the brand handoff (docs/design_handoff_tkdaily_landing/README.md §6). */

:root {
  --tk-off-white:     #F5F0E8;
  --tk-ink:           #1F1E1C;
  --tk-gold:          #8C6B25;
  --tk-gold-reversed: #B08A3E;
  --tk-gold-text:     #856522;   /* brand gold measures 4.36:1 on off-white; this is the nearest shade that clears the 4.5:1 text floor (4.77:1). Used for mono labels only. */

  --tk-miso:   #A08C52;
  --tk-herb:   #6B7A5A;
  --tk-tomato: #98584D;

  --tk-font-sans: "Albert Sans", system-ui, sans-serif;
  --tk-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --tk-rule: 1px;                 /* every rule in the system, everywhere */
  --tk-radius: 0;                 /* nothing in this brand is rounded */
  --tk-track-wordmark:   0.08em;
  --tk-track-descriptor: 0.14em;
  --tk-track-heading:   -0.02em;

  /* Spacing scale — defined here; the handoff leaves it to the codebase. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;

  --measure: 42rem;
  --gutter: clamp(1rem, 5vw, 2.5rem);
}

/* — fonts — Albert Sans 400/600 and JetBrains Mono 500, the Google Fonts files served from this origin (see README) — */
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/albert-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/albert-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); }

/* — base — */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--tk-off-white);
  color: var(--tk-ink);
  font-family: var(--tk-font-sans);
  font-size: 100%;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: 0 var(--gutter);
  font-size: 1rem;
  font-weight: 400;
}
.page { max-width: var(--measure); margin: 0 auto; }
p { margin: 0 0 var(--space-3); }
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--tk-rule);
  text-underline-offset: 0.18em;
}
img, svg { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tk-gold); outline-offset: 3px; }

.skip {
  position: absolute; left: -999px; top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--tk-ink); color: var(--tk-off-white);
}
.skip:focus-visible { left: var(--gutter); }

/* — type roles — */
h1, h2 {
  font-weight: 600;
  letter-spacing: var(--tk-track-heading);
  line-height: 1.1;
  margin: 0;
}
h1 { font-size: clamp(1.875rem, 1rem + 2.75vw, 2.75rem); }
h2 { font-size: 1.375rem; }

.mono {
  font-family: var(--tk-font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: var(--tk-track-descriptor);
  text-transform: uppercase;
  color: var(--tk-gold-text);
  font-variant-numeric: tabular-nums;
}

/* — lockup — */
.lockup { display: block; }
.lockup svg { width: 100%; height: auto; }
.lockup--primary { width: min(100%, 20rem); aspect-ratio: 520 / 124; }
.lockup--oneline { width: 10rem; aspect-ratio: 218 / 50; }
a.lockup:focus-visible { outline-offset: 6px; }

/* — header — */
.site-header { padding: var(--space-6) 0 var(--space-6); }

/* — hero — */
.hero { padding-bottom: var(--space-7); }
.hero .mono { margin-bottom: var(--space-3); }
.hero h1 { margin-bottom: var(--space-4); }
.hero__sub { font-size: 1.125rem; max-width: 36rem; margin-bottom: var(--space-6); }
.hero__figure { margin: 0; }
.hero__figure img { width: 100%; height: auto; }

/* — sections — */
.section {
  padding: var(--space-6) 0;
  border-top: var(--tk-rule) solid var(--tk-ink);
}
.section h2 { margin-bottom: var(--space-4); }

/* — what it is: dosage-panel rows — */
.spec { margin: 0; border-top: var(--tk-rule) solid var(--tk-ink); }
.spec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--tk-rule) solid var(--tk-ink);
}
.spec dt { padding-top: 0.2em; }
.spec dd { margin: 0; }
/* The next section opens with its own rule; without this the two stack. */
.spec__row:last-child { border-bottom: 0; }
@media (min-width: 36em) {
  .spec__row { grid-template-columns: 8rem 1fr; }
}
/* Flavor tones appear as a swatch, never as an underline — an underline on a
   non-link reads as a broken link. The tone never sets the type itself. */
.flavor { white-space: nowrap; }
.flavor::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.45em;
  background: var(--flavor);
}
.flavor--miso   { --flavor: var(--tk-miso); }
.flavor--herb   { --flavor: var(--tk-herb); }
.flavor--tomato { --flavor: var(--tk-tomato); }

/* — why it exists — */
.founder blockquote { margin: 0 0 var(--space-4); font-size: 1.125rem; max-width: 38rem; }
.founder blockquote p { margin: 0; }
.founder__attr { margin: 0; font-size: 0.9375rem; max-width: 36rem; }

/* — where we are — */
.status { list-style: none; margin: 0; padding: 0; border-top: var(--tk-rule) solid var(--tk-ink); }
.status li { padding: var(--space-3) 0; border-bottom: var(--tk-rule) solid var(--tk-ink); }
.status li:last-child { border-bottom: 0; }
.status .mono { margin-right: 0.15em; }

/* — contact — */
.contact__intro { max-width: 36rem; margin-bottom: var(--space-5); }
.form { display: grid; gap: var(--space-4); max-width: 36rem; }
.field { display: grid; gap: var(--space-1); }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field input,
.field select,
.field textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: var(--tk-rule) solid var(--tk-ink);
  border-radius: var(--tk-radius);
  padding: 0.625rem 0.75rem;
  width: 100%;
  margin: 0;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field select { min-height: calc(1.55em + 1.25rem + 2 * var(--tk-rule)); }
.button {
  font: inherit;
  font-weight: 600;
  background: var(--tk-ink);
  color: var(--tk-off-white);
  border: var(--tk-rule) solid var(--tk-ink);
  border-radius: var(--tk-radius);
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  justify-self: start;
}
.button:hover { background: transparent; color: var(--tk-ink); }

/* — waitlist — */
.waitlist__intro { max-width: 36rem; margin-bottom: var(--space-4); }
.form--inline { gap: var(--space-3); }
@media (min-width: 40em) {
  .form--inline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
}

/* — footer — */
.site-footer {
  border-top: var(--tk-rule) solid var(--tk-ink);
  padding: var(--space-6) 0 var(--space-8);
  font-size: 0.9375rem;
}
.site-footer .lockup { margin-bottom: var(--space-4); }
.site-footer p { margin-bottom: var(--space-2); max-width: 36rem; }
.site-footer .copyright { margin-top: var(--space-4); }

/* — thanks page — */
.thanks { padding: var(--space-6) 0 var(--space-8); }
.thanks p { font-size: 1.125rem; }

/* — print — */
@media print {
  @page { margin: 14mm 16mm; }
  html, body { background: #fff; color: #000; }
  body { padding: 0; font-size: 10pt; line-height: 1.4; }
  .page { max-width: none; }
  .skip { display: none; }
  .site-header { padding: 0 0 var(--space-3); }
  .lockup--primary { width: 13rem; }
  .hero { padding-bottom: var(--space-3); }
  .hero h1 { font-size: 20pt; margin-bottom: var(--space-2); }
  .hero__sub { font-size: 11pt; margin-bottom: var(--space-3); }
  .hero__figure img { max-height: 28vh; width: auto; max-width: 100%; }
  .section { padding: var(--space-3) 0; }
  .section h2 { font-size: 13pt; margin-bottom: var(--space-2); }
  .spec__row, .status li { break-inside: avoid; padding: var(--space-2) 0; }
  .founder blockquote { font-size: 10pt; }
  .form { display: none; }
  .contact__intro { margin-bottom: 0; }
  .site-footer { padding: var(--space-3) 0 0; font-size: 9pt; }
  .site-footer .lockup { margin-bottom: var(--space-2); }
  a { text-decoration: none; }
}