/* Co-host brand surface — landing, auth, teacher.
   Matches highagency.dev. NOT loaded by index.html (the student console keeps
   style.css and its own dark machine palette). Do not import style.css here. */

:root {
  --ink: #0a0a0a;
  --cream: #fef7e0;
  --pink: #ff2e8e;
  --blue: #1e3aff;
  --sage: #a7c4a0;
  --yellow: #f9ef89;
  --paper: #f1f2ea;
  --muted: #5a6663;
  --border: #d8dbd2;

  --sans: "DM Sans", -apple-system, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;

  /* Hairlines inside ink sections: --border is tuned for paper and vanishes on ink. */
  --border-dark: #2a2a2a;
  --muted-dark: #9aa4a1;
}

* { box-sizing: border-box }

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

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

/* ---- type ---------------------------------------------------------------- */

/* The signature headline: uppercase DM Sans 900, tight and huge, with the final
   clause dropping to lowercase serif italic. */
.display {
  font-family: var(--sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-size: clamp(2.5rem, 8.5vw, 6.5rem);
  margin: 0;
}
.display--sm { font-size: clamp(2rem, 5.5vw, 3.4rem) }

/* The clause that lands the sentence. Lowercase, serif, italic, pink.
   Only ever used at display size — pink on paper is 3.1:1, large-text only. */
.turn {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--pink);
}
/* The one highlighted word. Blue reads 6:1 on paper but only 2.9:1 on ink,
   so ink sections take yellow instead. */
.hi { color: var(--blue) }
.on-ink .hi { color: var(--yellow) }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin: 0 0 1.4rem;
}
.on-ink .eyebrow { color: var(--sage) }

.lede { font-size: clamp(1.05rem, 1.9vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 46ch }
.on-ink .lede { color: var(--muted-dark) }

h2.section-title {
  font-family: var(--sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  margin: 0 0 1.2rem;
}

/* ---- surfaces ------------------------------------------------------------ */

.on-ink { background: var(--ink); color: var(--cream) }
.on-cream { background: var(--cream); color: var(--ink) }
.on-sage { background: var(--sage); color: var(--ink) }

/* .wrap owns the horizontal gutter, .section owns the vertical rhythm. Both are
   often on the same element — so .section must use padding-block, or its
   shorthand would reset the gutter and pin content to the screen edge. */
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: clamp(1.25rem, 4vw, 3rem) }
.section { padding-block: clamp(3.5rem, 9vw, 7.5rem) }

/* ---- controls ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  padding: 1rem 1.6rem;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--cream);
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.btn:hover { background: var(--pink); border-color: var(--pink); color: var(--ink); transform: translateY(-2px) }
.btn--ghost { background: transparent; color: var(--ink) }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--cream) }
.on-ink .btn { background: var(--cream); border-color: var(--cream); color: var(--ink) }
.on-ink .btn:hover { background: var(--pink); border-color: var(--pink); color: var(--ink) }
.on-ink .btn--ghost { background: transparent; color: var(--cream) }
.on-ink .btn--ghost:hover { background: var(--cream); color: var(--ink) }
.btn--block { width: 100%; justify-content: center }

/* The trailing arrow leans forward on hover. */
.btn .arrow { transition: transform .15s }
.btn:hover .arrow { transform: translateX(3px) }

.btn:disabled { opacity: .5; cursor: not-allowed; transform: none }

/* Visible focus everywhere. Blue on light, yellow on dark. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.on-ink :where(a, button, input, [tabindex]):focus-visible { outline-color: var(--yellow) }

/* ---- forms --------------------------------------------------------------- */

.field { margin: 0 0 1.1rem }
.field label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.field input {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px; /* < 16px makes iOS zoom on focus */
  padding: 0.85rem 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 0;
}
.field input:focus { outline: 3px solid var(--blue); outline-offset: 1px; background: #fff }
.hint { font-size: 0.78rem; color: var(--muted); margin: 0.4rem 0 0 }

.err {
  min-height: 1.2rem;
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
}
.err:not(:empty) {
  padding: 0.6rem;
  background: var(--yellow);
  border-left: 4px solid var(--pink);
  text-align: left;
}

/* ---- links --------------------------------------------------------------- */

.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; text-decoration-thickness: 2px }
.link:hover { color: var(--pink) }
.on-ink .link { color: var(--cream); text-decoration-color: var(--pink) }
.on-ink .link:hover { color: var(--pink) }

/* ---- misc ---------------------------------------------------------------- */

.rule { height: 1px; background: var(--border); border: 0; margin: 0 }
.on-ink .rule { background: var(--border-dark) }

/* Marker-pen highlight, the yellow's whole job. */
.mark { background: var(--yellow); box-shadow: 0 0 0 0.15em var(--yellow); color: var(--ink) }

.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em }