/* tzu.css — T0 landing page.
   One stylesheet, no framework, no build step. The page is four sections of
   text and a form; a toolchain to produce that is a liability, not an asset. */

:root {
  --ink:        #e8e6e1;
  --ink-dim:    #9a968e;
  --ink-faint:  #6b6862;
  --bg:         #0d0f12;
  --bg-raised:  #14171c;
  --bg-sunk:    #090a0c;
  --line:       #24282f;
  /* Violet on near-black. Two tones because the accent has to do two jobs that
     pull opposite ways: it is text on --bg (wants to be light) and a button
     fill (wants to be dark enough for legible text on top). --accent is picked
     for the text job at 7.0:1 against --bg, and the button puts --bg on top of
     it rather than white, which is the same 7.0:1 the other way around. White
     on this violet is 2.7:1 and would fail. */
  --accent:     #a78bfa;   /* violet */
  --accent-dim: #7c3aed;   /* deep violet — strokes, borders, pressed state */
  --accent-lit: #b9a2fc;   /* hover */
  /* Error/invalid stays red. Under the old orange theme the accent doubled as
     the warning colour; against violet, a purple-bordered field reads as
     focused rather than wrong. */
  --bad:        #e88b8b;
  --good:       #4c9f70;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --measure: 34rem;
}

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

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

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

/* Layout: one centred column, and every section sits inside it. Widths live
   here rather than being repeated per section, so the fold rule below can be
   positioned against the container instead of the viewport — aligned to the
   viewport it cuts through content at a different place on every screen. */
main {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  /* content-box so the 62rem is the *content* column, matching the header and
     footer exactly. It also puts the padding box's 50% on the content centre,
     which is where the fold rule needs to land. */
  box-sizing: content-box;
}

/* A faint vertical rule down the page, like a scroll's fold. It falls in the
   gutter between the two columns, which is why it reads as structure rather
   than as a stray border. */
main::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
  opacity: .5;
  pointer-events: none;
}
@media (max-width: 52rem) { main::before { display: none; } }

header, footer { position: relative; }

a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: #fff; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--bg); padding: .6rem 1rem; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- header ---------- */

.topbar {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  max-width: 62rem; margin: 0 auto; padding: 1.75rem 1.5rem 0;
  box-sizing: content-box;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; font-size: 1.15rem; letter-spacing: .02em;
  text-decoration: none;
}
.wordmark .glyph {
  display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  background: var(--accent); color: var(--bg);
  border-radius: 3px; font-size: .95rem; line-height: 1;
  font-family: var(--mono);
}
.tag {
  color: var(--ink-faint); font-size: .82rem; font-family: var(--mono);
  letter-spacing: .01em;
}

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

/* Two columns from 52rem up: the pitch on the left, the box on the right so it
   is beside the headline rather than below the fold. */
.hero {
  padding: 4.5rem 0 3.5rem;
  display: grid;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 52rem) {
  .hero { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}
h1 {
  margin: 0 0 1.4rem;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 640;
  text-wrap: balance;
}
h1 em {
  font-style: normal;
  color: var(--accent);
  /* underline that reads as a brush stroke rather than a link */
  background: linear-gradient(var(--accent-dim), var(--accent-dim)) bottom left / 100% 2px no-repeat;
  padding-bottom: 2px;
}
.lede {
  max-width: var(--measure);
  margin: 0;
  font-size: 1.12rem;
  color: var(--ink-dim);
}
.reassure {
  max-width: var(--measure);
  margin: 1.25rem 0 0;
  font-size: .87rem;
  color: var(--ink-faint);
  font-family: var(--mono);
  line-height: 1.6;
}

/* ---------- the box ---------- */

.box {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.6rem;
}
.signup { display: grid; gap: 1.1rem; margin: 0; }
.field { display: grid; gap: .45rem; }
.field .label {
  font-size: .82rem; color: var(--ink-dim);
  font-family: var(--mono); letter-spacing: .01em;
}
.signup input {
  width: 100%;
  padding: .8rem .9rem;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-family: var(--mono);
  font-size: .95rem;
}
.signup input::placeholder { color: var(--ink-faint); }
.signup input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .20);
}
.signup input[aria-invalid="true"] { border-color: var(--bad); }

.signup button {
  padding: .85rem 1rem;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
  font: inherit; font-weight: 600; font-size: .98rem;
  cursor: pointer;
  transition: background .12s ease;
}
.signup button:hover { background: var(--accent-lit); }
.signup button:active { background: var(--accent-dim); }
.signup button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* htmx sets this while a request is in flight */
.signup.htmx-request button { opacity: .6; pointer-events: none; }

.err {
  margin: 0;
  color: var(--bad);
  font-size: .88rem;
  font-family: var(--mono);
}

.done { text-align: left; }
.done .tick {
  margin: 0 0 .4rem;
  font-size: 1.6rem; line-height: 1; color: var(--good);
}
.done h3 { margin: 0 0 .6rem; font-size: 1.3rem; letter-spacing: -.01em; }
.done p { margin: 0 0 .7rem; color: var(--ink-dim); font-size: .97rem; }
.done strong { color: var(--ink); font-family: var(--mono); font-size: .93rem; }
.done .pos, .done .again { font-size: .87rem; color: var(--ink-faint); }
.done .again { margin-bottom: 0; }

/* ---------- sections ---------- */

.split {
  padding: 2.5rem 0;
  display: grid; gap: 3.5rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  border-top: 1px solid var(--line);
}
.split article h2 {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .8rem; font-size: 1.25rem; letter-spacing: -.01em;
}
.kanji {
  display: inline-grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--accent-dim); border-radius: 3px;
  color: var(--accent); font-size: .95rem; font-family: var(--mono);
}
.split p { margin: 0 0 .8rem; color: var(--ink-dim); font-size: .98rem; }
.mode-note {
  font-family: var(--mono); font-size: .8rem;
  color: var(--ink-faint) !important;
}

/* Prose sections run to the container edge but their text keeps a readable
   measure, set on the paragraphs rather than the section, so the section
   borders still span the full column. */
.line, .iceberg, .status {
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
}
.line h2, .iceberg h2, .status h2 {
  margin: 0 0 1rem; font-size: 1.25rem; letter-spacing: -.01em;
}
.line p, .iceberg p, .status p {
  max-width: 42rem; margin: 0 0 .9rem;
  color: var(--ink-dim); font-size: .98rem;
}
.line strong, .iceberg strong { color: var(--ink); }
.status .count {
  font-family: var(--mono); font-size: .85rem; color: var(--ink-faint);
}

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

.foot {
  max-width: 62rem; margin: 0 auto;
  padding: 0 1.5rem 4rem;
  box-sizing: content-box;
}
/* The rule goes on a block inside the content box so it spans exactly the same
   62rem as the section borders in <main>. On .foot itself it would span the
   padding box and overhang them by 3rem. */
.foot::before {
  content: "";
  display: block;
  border-top: 1px solid var(--line);
  margin-bottom: 2.5rem;
}
.motto {
  max-width: 40rem; margin: 0 0 1.2rem;
  color: var(--ink-dim); font-size: .98rem; font-style: italic;
}
.fine {
  max-width: 40rem; margin: 0;
  color: var(--ink-faint); font-size: .82rem; font-family: var(--mono);
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}