/* Seen. — teaser page
   One stylesheet. No framework, no build step, no third-party requests.

   Layout model: one column, one left edge, centred on the page.
   Everything — logo, headline, prose, form, footer — shares it. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F;
}

/* ---------- tokens ---------- */

:root {
  --paper:  #fafafa;
  --ink:    #0a0a0a;
  --slate:  #52525b;
  --hair:   #e2e2e4;
  --sunk:   #f1f1f2;
  --red:    #dc2626;
  --red-hi: #b91c1c;
  --glow:   rgba(220, 38, 38, .30);

  --col:    46rem;                      /* the one column */
  --gutter: clamp(1.5rem, 6vw, 2.5rem);
  --rhythm: clamp(3.5rem, 8vw, 5.5rem);

  --sans: 'Figtree', 'Optima', 'Avenir Next', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a0a0a;
    --ink:   #fafafa;
    --slate: #a1a1aa;
    --hair:  #26262a;
    --sunk:  #131315;
    --glow:  rgba(220, 38, 38, .55);
  }
}

:root[data-theme="dark"] {
  --paper: #0a0a0a;
  --ink:   #fafafa;
  --slate: #a1a1aa;
  --hair:  #26262a;
  --sunk:  #131315;
  --glow:  rgba(220, 38, 38, .55);
}

/* ---------- base ---------- */

*, *::before, *::after { 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: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-weight: 500; margin: 0; }
p { margin: 0; }
a { color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1rem; text-decoration: none;
}
.skip:focus { left: 0; }

/* every band sits in the same column */
.masthead, .hero, .band, footer {
  max-width: calc(var(--col) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
}

.logo { display: block; color: var(--ink); }

.wordmark { display: block; width: auto; height: clamp(1.5rem, 3.2vw, 1.875rem); }

.status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); white-space: nowrap;
}

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }

.flags { display: grid; gap: .1875rem; justify-items: end; text-align: right; }

.expected {
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); opacity: .65; white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .dot { animation: breathe 3.2s ease-in-out infinite; }
  @keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}

/* ---------- hero ---------- */

.hero { padding-top: clamp(2.5rem, 7vw, 4.5rem); padding-bottom: clamp(4rem, 9vw, 6.5rem); }

h1 {
  font-size: clamp(2.625rem, 6.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lede {
  margin-top: 1.75rem;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--slate);
  text-wrap: pretty;
}

/* the ownership promise — the one claim that carries the page */
.claim {
  margin-top: 1.5rem;
  font-size: clamp(1.1875rem, 1.7vw, 1.375rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
  font-weight: 500;
  border-left: 2px solid var(--red);
  padding-left: 1.125rem;
  text-wrap: pretty;
}

/* ---------- the illustration ---------- */

.shot { margin: clamp(1.75rem, 4vw, 2.25rem) 0 0; }

.mock {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);
  border-radius: 12px;
  background: var(--sunk);
}

.ui-frame { fill: none; stroke: currentColor; stroke-opacity: .14; }
.ui-rule  { stroke: currentColor; stroke-opacity: .1; }
.ui-line  { fill: currentColor; fill-opacity: .22; }
.ui-line--fade { fill-opacity: .1; }
.ui-dot   { fill: currentColor; fill-opacity: .14; }
.ui-row   { fill: none; }                                  /* list, not buttons */
.ui-row--on { fill: currentColor; fill-opacity: .07; }     /* only the open patient */
.ui-bar   { fill: currentColor; fill-opacity: .3; }
.ui-head  { fill: currentColor; fill-opacity: .38; }
.ui-panel { fill: currentColor; fill-opacity: .04; stroke: currentColor; stroke-opacity: .1; }
.ui-chip  { fill: none; stroke: currentColor; stroke-opacity: .14; }
.ui-mark  { fill: var(--red); }
.ui-rec   { fill: var(--red); }

/* the only movement in the drawing, matched to the stealth flag above it */
@media (prefers-reduced-motion: no-preference) {
  .ui-rec { animation: breathe 3.2s ease-in-out infinite; }
}

/* ---------- the ask ---------- */

.ask {
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--sunk);
  padding: clamp(1.25rem, 3vw, 1.625rem);
}

.notify label {
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
  margin-bottom: .875rem;
}

.field { display: flex; gap: .75rem; align-items: stretch; }

input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--hair); border-radius: 8px;
  padding: .875rem 1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="email"]::placeholder { color: var(--slate); opacity: .7; }
input[type="email"]:hover { border-color: var(--slate); }

/* one indicator, not two: the sharp ring is replaced by a soft red glow */
input[type="email"]:focus,
input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 11px 1px var(--glow);
}

/* red in both themes: the invert (black on light, white on dark) never sat
   right in dark, and red carries the thread from the stealth flag and the
   record dot through to the one action on the page */
button {
  flex: none;
  font: inherit; font-weight: 500;
  color: #fff; background: var(--red);
  border: 1px solid var(--red); border-radius: 8px;
  padding: .875rem 1.625rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
button:hover { background: var(--red-hi); border-color: var(--red-hi); }
button:active { transform: translateY(1px); }

/* same soft red glow as the field — no grey ring sitting outside the red */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 11px 1px var(--glow);
}

.note {
  margin-top: .875rem;
  font-size: .9375rem; line-height: 1.5;
  color: var(--slate); text-wrap: pretty;
}

.error { margin-top: .75rem; font-size: .9375rem; color: var(--red); }

.done {
  font-size: 1.0625rem; line-height: 1.5;
  border-left: 2px solid var(--red); padding-left: 1rem;
  text-wrap: pretty;
}

/* ---------- bands ---------- */

/* the argument sits close to the sign-up it leads into */
.band { padding-bottom: clamp(2.25rem, 5vw, 3rem); }
.band:last-of-type { padding-bottom: var(--rhythm); }

.kicker {
  font-size: .8125rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1.5rem;
}

.prose { display: grid; gap: 1.5rem; }
.prose p { color: var(--slate); text-wrap: pretty; }   /* recedes, like the lede */
.prose .turn { color: var(--ink); }                    /* the statement stays full ink */

.turn {
  font-size: clamp(1.3125rem, 2.4vw, 1.625rem);
  line-height: 1.32;
  letter-spacing: -0.018em;
  font-weight: 500;
  padding: .25rem 0;
}

/* ---------- the unsubscribe confirm (served by server.js) ---------- */

.unsub { margin-top: 2.25rem; }

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--hair);
  padding-top: 2rem; padding-bottom: 3.5rem;
  display: grid; gap: .5rem;
  font-size: .9375rem; color: var(--slate);
}
footer p { text-wrap: pretty; }
.quiet { opacity: .8; }

/* ---------- mobile: its own composition ---------- */

@media (max-width: 599px) {
  h1 { letter-spacing: -0.034em; }

  /* full-width tap targets, stacked */
  .field { flex-direction: column; }
  input[type="email"], button { padding: .9375rem 1rem; width: 100%; }

  /* the card loses its box and becomes a plain divided section */
  .ask {
    border: 0; border-top: 1px solid var(--hair);
    border-radius: 0; background: none;
    padding: 1.75rem 0 0;
  }

  .claim { padding-left: .9375rem; }
}

@media (min-width: 600px) {
  body { font-size: 1.125rem; }
  .masthead { border-bottom: 1px solid var(--hair); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: rise .55s cubic-bezier(.2,.6,.2,1) backwards; }
  h1          { animation-delay: .04s; }
  .lede       { animation-delay: .12s; }
  .claim      { animation-delay: .18s; }
  .shot       { animation-delay: .26s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* honeypot: only something automated will ever find this and fill it in */
.trap {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* the one link in the footer */
.quiet a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.quiet a:hover { color: var(--ink); }

/* Inside prose, a kicker belongs to the paragraph BELOW it. The grid gap plus
   the kicker's own margin was pushing it away from its text and leaving it
   closer to the paragraph above — the heading read as attached to the wrong
   thing. */
.prose .kicker { margin-top: 1.25rem; margin-bottom: 0; }
.prose .kicker:first-child { margin-top: 0; }