/* =====================================================
   Training Intake, design tokens
   ===================================================== */
:root {
  --bg: #f3f0e6;
  --paper: #f3f0e6;
  --surface: #faf8f0;
  --surface-alt: #ece7d8;
  --border: #e0d9c6;
  --ink: #1a1712;
  --ink-dim: #756f5e;
  --ink-faint: #a49c86;

  --pale-red-bg: #fdebec;   --pale-red-text: #9f2f2d;
  --pale-blue-bg: #e1f3fe;  --pale-blue-text: #1f6c9f;
  --pale-green-bg: #edf3ec; --pale-green-text: #346538;
  --pale-yellow-bg: #fbf3db;--pale-yellow-text: #956400;
  --pale-stone-bg: #f0eeea; --pale-stone-text: #57534e;

  --font-serif: 'Newsreader', 'Source Serif 4', serif;
  --font-sans: 'Familjen Grotesk', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --max-w: 640px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

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

/* A quiet "living paper" backdrop: a soft warm wash plus a faint animated
   graphite-grain texture (SVG feTurbulence, tiled and stepped so it flickers
   like a hand-drawn surface rather than smoothly drifting). */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(159, 47, 45, 0.035), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0 0.07  0 0 0 0.05 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: auto, 180px 180px;
  animation: grain-flicker 12s steps(6) infinite;
}

@keyframes grain-flicker {
  0%   { background-position: 0 0, 0 0; }
  20%  { background-position: 0 0, -60px 20px; }
  40%  { background-position: 0 0, 30px -40px; }
  60%  { background-position: 0 0, -90px -20px; }
  80%  { background-position: 0 0, 50px 60px; }
  100% { background-position: 0 0, 0 0; }
}

.page {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* =====================================================
   Reveal-on-scroll
   ===================================================== */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   LANDING
   ===================================================== */
.landing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
}

.landing-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.landing-fallback,
.landing-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.landing-fallback {
  background: url('/assets/athlete-pencil-hero.png') center / cover no-repeat;
}

.landing-canvas {
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1);
}

.landing-canvas.ready { opacity: 1; }

.landing-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--paper) 0%,
    rgba(243, 240, 230, 0.86) 32%,
    rgba(243, 240, 230, 0.2) 58%,
    transparent 72%
  );
}

.landing-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  width: 46vw;
  max-width: 30rem;
  padding: 7vw 1.5rem 7vw 2rem;
}

.wordmark {
  display: block;
  align-self: flex-start;
  height: 34px;
  width: auto;
  margin: 0 0 3rem;
}

.landing-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(3rem, 6.4vw, 5.6rem);
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin: 0 0 1.6rem;
}

.landing-headline em { font-style: italic; font-weight: 400; }

.landing-subhead {
  font-size: 1.02rem;
  color: var(--ink-dim);
  max-width: 26rem;
  margin: 0 0 2.5rem;
}

.cta-subtle {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 0.2em;
  transition: border-color 200ms ease, color 200ms ease;
}

.cta-subtle:hover {
  border-color: var(--ink);
}

.cta-subtle .cta-arrow {
  transition: transform 200ms ease;
}

.cta-subtle:hover .cta-arrow {
  transform: translateY(3px);
}

/* =====================================================
   HERO
   ===================================================== */
.hero {
  padding: 3rem 0 4.5rem;
  text-align: left;
  border-top: 1px solid var(--border);
}

.headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 1.25rem;
}

.subhead {
  font-size: 1.05rem;
  color: var(--ink-dim);
  max-width: 34rem;
  margin: 0 0 2.25rem;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #111111;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.85em 1.5em;
  border-radius: 6px;
  transition: background 200ms ease, transform 150ms ease;
}

.cta:hover { background: #333333; }
.cta:active { transform: scale(0.98); }

.cta-arrow {
  transition: transform 200ms ease;
}

.cta:hover .cta-arrow { transform: translateX(3px); }

/* =====================================================
   INTAKE FORM
   ===================================================== */
.intake {
  padding: 1rem 0 5rem;
  border-top: 1px solid var(--border);
}

.field {
  border: none;
  padding: 0;
  margin: 0 0 2.2rem;
}

/* Pairs short fields (name/age, email/phone, height/weight) side by side so
   the form reads as a series of concise rows instead of one long column. */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
  margin: 0 0 2.2rem;
}

.field-row .field {
  margin-bottom: 0;
}

.field label,
.field legend {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.75rem;
  padding: 0;
}

.optional-label {
  font-weight: 400;
  color: var(--ink-faint);
}

.hint {
  font-size: 0.85rem;
  color: var(--ink-dim);
  margin: -0.4rem 0 0.9rem;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85em 1em;
  transition: border-color 150ms ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus {
  outline: none;
  border-color: #111111;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder {
  color: var(--ink-faint);
}

textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85em 1em;
  resize: vertical;
  transition: border-color 150ms ease;
}

textarea:focus {
  outline: none;
  border-color: #111111;
}

textarea::placeholder {
  color: var(--ink-faint);
}

.sub-field { margin: 0 0 1.5rem; }
.sub-field:last-child { margin-bottom: 0; }

.sub-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin: 0 0 0.6rem;
}

/* segmented pill select (single choice) */
.pill-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6em 1em;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.pill:hover { border-color: #cfcfcc; }

.pill.is-active {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
}

/* multi-select tag toggles */
.tag-select {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tag {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.55em 1.1em;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.tag:hover { border-color: #cfcfcc; }

.tag--green.is-active  { background: var(--pale-green-bg);  border-color: var(--pale-green-bg);  color: var(--pale-green-text); }
.tag--blue.is-active   { background: var(--pale-blue-bg);   border-color: var(--pale-blue-bg);   color: var(--pale-blue-text); }
.tag--yellow.is-active { background: var(--pale-yellow-bg); border-color: var(--pale-yellow-bg); color: var(--pale-yellow-text); }
.tag--red.is-active    { background: var(--pale-red-bg);    border-color: var(--pale-red-bg);    color: var(--pale-red-text); }
.tag--stone.is-active  { background: var(--pale-stone-bg);  border-color: var(--pale-stone-bg);  color: var(--pale-stone-text); }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-note {
  font-size: 0.85rem;
  margin: 1.25rem 0 0;
  padding: 0.85em 1em;
  border-radius: 8px;
}

.form-note.is-warn {
  background: var(--pale-yellow-bg);
  color: var(--pale-yellow-text);
}

#health-skip-toggle { margin: 0 0 1.1rem; }
#health-skip-toggle.is-active {
  background: var(--pale-stone-bg);
  border-color: var(--pale-stone-bg);
  color: var(--pale-stone-text);
}
#health-skip-warning { margin: 0 0 1.4rem; }
#parq-questions.is-hidden { display: none; }

label.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.5;
}

.consent-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.15em;
  accent-color: #111111;
  cursor: pointer;
}

.consent-details {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--ink-dim);
}

.consent-details summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.consent-details p {
  margin: 0.6rem 0 0;
}

/* =====================================================
   SUBMIT
   ===================================================== */
.submit-row {
  margin-top: 3rem;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: #ffffff;
  background: #111111;
  border: none;
  border-radius: 6px;
  padding: 0.95em 1.5em;
  cursor: pointer;
  transition: background 200ms ease, transform 150ms ease, opacity 150ms ease;
}

.submit-btn:hover { background: #333333; }
.submit-btn:active { transform: scale(0.98); }

.submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.form-status {
  font-size: 0.85rem;
  margin: 0.9rem 0 0;
  min-height: 1.2em;
}

.form-status.is-error { color: var(--pale-red-text); }
.form-status.is-success { color: var(--pale-green-text); }

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
  padding: 0 0 4rem;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
}

.footer p {
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 0;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 760px) {
  /* Same overlay technique as desktop (full-bleed illustration behind the copy, not a
     stacked layout) - just re-tuned for a narrow viewport: the illustration is panned so
     her head and torso sit in the right ~45% of the frame, and the copy column is
     constrained to the left zone that's actually clear of her, rather than running full
     width across her body. Position and column width were checked against an offline
     render of the real crop with real text metrics, not guessed against a live URL. */
  .landing { min-height: 100dvh; }
  .landing-visual { inset: 0; }
  .landing-fallback { background-position: 53% 20%; }
  .landing-veil {
    background: linear-gradient(
      180deg,
      rgba(243, 240, 230, 0.45) 0%,
      rgba(243, 240, 230, 0.22) 10%,
      rgba(243, 240, 230, 0.30) 55%,
      rgba(243, 240, 230, 0.55) 80%,
      rgba(243, 240, 230, 0.35) 100%
    );
  }
  .landing-copy {
    width: auto;
    max-width: 13.5rem;
    min-height: 100dvh;
    justify-content: center;
    padding: 3.5rem 0.75rem 4.5rem 2rem;
  }
  .landing-headline { font-size: 1.7rem; line-height: 1.08; margin-bottom: 1.1rem; }
  .landing-subhead { font-size: 0.88rem; margin-bottom: 1.75rem; }
}

@media (max-width: 480px) {
  .hero { padding: 2.5rem 0 3rem; }
  .intake { padding: 1rem 0 3.5rem; }
  .field-row {
    grid-template-columns: 1fr;
    gap: 2.2rem 0;
  }
  .field-row .field:last-child { margin-bottom: 0; }
}