/* Monolith.
   Pure black, one serif, nothing that dates. The restraint is the argument:
   a page selling a three-thousand-year-old practice should not look like it
   was designed this quarter.

   Descended from Cibi's own hand-written page — black ground, white text,
   everything centred, four short lines and no ornament. What is added here is
   air, an optical scale for the wordmark, and somewhere to put your name. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink:        #f2efe9;   /* warm off-white; pure #fff on pure black glares */
  --ink-muted:  #8e8a84;
  --ink-faint:  #5a5752;   /* decorative only — 2.9:1, below AA */
  --ink-label:  #8e8a84;   /* 6.1:1 — anything that has to be read */
  --ground:     #000;
  --rule:       #1e1c1a;
  --r:          999px;   /* the only radius on the page: the descend affordance */
  --measure:    34rem;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  font-optical-sizing: auto;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Each section is its own held breath. min-height rather than height so a long
   form on a short phone scrolls instead of clipping. */
.screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2rem, 8vw, 6rem) 1.5rem;
  position: relative;
}

/* ── The name ─────────────────────────────────────────────────────────────
   Letterspaced small enough to read as engraving rather than as a logo. The
   clamp keeps it monumental on a desktop and still one line on a phone. */
.wordmark {
  margin: 0;
  font-weight: 200;
  font-size: clamp(3.25rem, 15vw, 9rem);
  letter-spacing: .12em;
  text-indent: .12em;          /* optical: cancels the trailing letterspace */
  line-height: 1;
}

.verbs {
  margin: clamp(2rem, 6vw, 3.5rem) 0 0;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6em;
  justify-content: center;
}

.line {
  margin: clamp(1.75rem, 5vw, 2.75rem) 0 0;
  max-width: 28rem;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  font-style: italic;
  color: var(--ink-muted);
}

/* ── The way down ─────────────────────────────────────────────────────────
   The only affordance on the first screen. A link, not a button: it goes
   somewhere, and it should still work with styles off. */
.descend {
  position: absolute;
  bottom: clamp(1.5rem, 5vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  text-decoration: none;
  font-size: 1.1rem;
  border-radius: var(--r);
  transition: color .4s ease;
}
.descend:hover,
.descend:focus-visible { color: var(--ink); }

/* The second and third screens place their own arrow in flow, not pinned. */
.plate { width: 100%; max-width: var(--measure); }
.plate .descend { position: static; transform: none; margin: 3rem auto 0; }

.heading {
  margin: 0 0 1rem;
  font-weight: 300;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  letter-spacing: .01em;
  line-height: 1.15;
}

.body {
  margin: 0 0 1.4rem;
  font-size: clamp(1.02rem, 2.2vw, 1.14rem);
  color: var(--ink-muted);
}
.body.sub { margin-bottom: 2.75rem; }

/* ── The four facts ───────────────────────────────────────────────────────
   A definition list, because that is what it is. Hairline rules instead of a
   card: a border implies a container, and there is nothing to contain. */
.facts {
  margin: 2.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.facts > div {
  background: var(--ground);
  padding: 1.5rem .75rem;
}
.facts dt {
  font-size: .72rem;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
  color: var(--ink-label);
}
.facts dd {
  margin: .55rem 0 0;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  color: var(--ink);
}

/* ── The form ─────────────────────────────────────────────────────────────
   Left-aligned inside a centred plate: labels and inputs are read, not
   admired, and centred form text is harder to scan down. */
.form { text-align: left; display: grid; gap: 1.35rem; }

.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; }
@media (max-width: 34rem) { .row { grid-template-columns: 1fr; } }

.f { display: grid; gap: .5rem; }
.f > span {
  font-size: .72rem;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--ink-label);
}
.f > span em {
  font-style: normal;
  text-transform: none;
  letter-spacing: .04em;
  opacity: .75;
}

/* Underline rather than a box. One line per answer is the quietest form that
   still reads as a form. */
.f input,
.f textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  padding: .55rem 0;
  border-radius: 0;           /* iOS rounds inputs by default */
  transition: border-color .3s ease;
}
.f input::placeholder,
.f textarea::placeholder { color: var(--ink-faint); line-height: 1.6; }
.f input:hover,
.f textarea:hover { border-bottom-color: #302d2a; }
.f input:focus,
.f textarea:focus { outline: none; border-bottom-color: var(--ink); }
.f input[aria-invalid="true"] { border-bottom-color: #a8574f; }

/* The one question worth writing in gets a box rather than a rule: a single
   underline invites a phrase, and this asks for a paragraph. */
.f textarea {
  border: 1px solid var(--rule);
  padding: .85rem 1rem;
  resize: vertical;
  min-height: 7rem;
  line-height: 1.6;
}
.f textarea:focus { border-color: var(--ink); }
.f-wide { grid-column: 1 / -1; }

.form button {
  justify-self: start;
  margin-top: .6rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-faint);
  border-radius: 0;
  font: inherit;
  font-size: .95rem;
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
  padding: .95rem 2.1rem;
  cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.form button:hover:not(:disabled),
.form button:focus-visible:not(:disabled) {
  background: var(--ink);
  color: var(--ground);
  border-color: var(--ink);
}
.form button:disabled { opacity: .35; cursor: default; }

.status { margin: 0; min-height: 1.5em; font-size: .95rem; color: var(--ink-muted); }
.status[data-state="error"]   { color: #c8776e; }
.status[data-state="success"] { color: var(--ink); }

.fineprint {
  margin: 2.5rem 0 0;
  text-align: left;
  font-size: .85rem;
  line-height: 1.7;
  color: var(--ink-label);
}
.fineprint a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: .2em; }
.fineprint a:hover { color: var(--ink); }

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding: 2rem clamp(1.5rem, 6vw, 4rem);
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--ink-faint);
}
footer nav { display: flex; gap: 1.6rem; }
footer a { color: var(--ink-faint); text-decoration: none; }
footer a:hover { color: var(--ink); }

:where(a, button, input):focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}