/* Tekiji — the homepage, `/`. Loaded after tokens.css + base.css, which own
   every colour, the masthead, the chips, the section chrome, the ledger
   register and the footer. This sheet is only what the homepage has and no
   other page does: the data strip, the opening's filing log, the two verified
   filing cards, the coverage rail, the 2×2 feature grid, the latest-issue band
   and the subscribe form.

   Carried over from the CEO-approved density mockup
   (docs/design/2026-08-18-density-redesign/homepage-v2.html): the mockup's
   inline <style> block, minus everything that moved into tokens.css and
   base.css. */

/* ---- data strip (variant C register: paper ground, the nav's mono voice) ---- */
.datastrip { position: relative; border-bottom: 1px solid var(--hairline); background: var(--paper); }
.datastrip-row {
  display: flex; gap: var(--space-lg); align-items: baseline; white-space: nowrap;
  overflow-x: auto; scrollbar-width: none;
  padding-top: var(--space-xs); padding-bottom: var(--space-xs);
}
.datastrip-row::-webkit-scrollbar { display: none; }
.datastrip-item {
  font-family: var(--font-data); font-size: var(--text-xs);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint);
}
.datastrip-item strong { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- opening: the words on the left, the filing log on the right ---- */
.opening { padding: var(--space-lg) 0 var(--space-xl); }
.opening-grid {
  display: grid; grid-template-columns: 1.35fr 1fr;
  column-gap: var(--space-2xl); align-items: start;
}
h1 {
  font-family: var(--font-display); font-size: var(--text-headline);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.01em;
  max-width: 26ch; min-width: 0; overflow-wrap: anywhere;
}
.dateline { font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--space-sm); }
.lede { max-width: 58ch; margin-top: var(--space-sm); font-size: var(--text-base); color: var(--muted); }
.hero-cta { margin-top: var(--space-md); display: flex; gap: var(--space-lg); align-items: baseline; }
.hero-alt { font-size: var(--text-sm); }

/* ---- filing log rail ---- */
.feed { border-left: 1px solid var(--hairline); padding-left: var(--space-lg); min-width: 0; }
.feed-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-sm); margin-bottom: var(--space-2xs);
}
.feed-title {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.feed-note { font-size: var(--text-xs); color: var(--faint); }
.feed-list { list-style: none; }
.feed-item {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-sm);
  padding: var(--space-xs) 0; border-top: 1px solid var(--hairline);
}
.feed-date {
  font-family: var(--font-data); font-size: var(--text-xs); color: var(--faint);
  font-variant-numeric: tabular-nums; padding-top: var(--space-3xs);
}
.feed-body { font-size: var(--text-sm); line-height: 1.45; color: var(--ink); }
.feed-body .chip { margin-right: var(--space-xs); }
.feed-body a { color: inherit; text-decoration: none; }
.feed-body a:hover { color: var(--accent); text-decoration: underline; }
.feed-verify { font-family: var(--font-data); font-size: var(--text-xs); color: var(--ok); white-space: nowrap; }
.feed-empty { font-size: var(--text-sm); color: var(--muted); padding-top: var(--space-xs); }
.feed-more { margin-top: var(--space-xs); font-size: var(--text-sm); }

/* ---- this week, verified: two dense cards ----
   The card itself is base.css's `.filing-card` (the issue digest prints the
   same one); what the front page adds is the two-up grid and the mini row of
   figures inside it. */
.week-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.minirow {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
  column-gap: var(--space-lg); row-gap: var(--space-xs);
  border-top: 1px solid var(--hairline); padding-top: var(--space-xs);
}
.mini { min-width: 0; }
.mini-label {
  font-family: var(--font-body); font-size: var(--text-chip); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint);
}
.mini-value {
  font-family: var(--font-data); font-size: var(--text-base); font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
.mini-delta {
  font-family: var(--font-data); font-size: var(--text-xs); color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---- coverage: the dense ledger plus a counts rail ---- */
.coverage-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 15rem;
  column-gap: var(--space-2xl); align-items: start;
}
.coverage-side { border-left: 1px solid var(--hairline); padding-left: var(--space-lg); }
.coverage-side .stat + .stat {
  border-top: 1px solid var(--hairline);
  margin-top: var(--space-md); padding-top: var(--space-md);
}

/* ---- what tekiji does: 2×2, one line each ---- */
.feature-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-2xl);
  border-top: 1px solid var(--hairline);
}
.feature {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-md);
  padding: var(--space-sm) 0; border-bottom: 1px solid var(--hairline);
}
.feature dt { font-weight: 600; font-size: var(--text-sm); }
.feature dd { color: var(--muted); font-size: var(--text-sm); }

/* ---- the latest issue: a slim band, the verified count as its anchor ---- */
.issue-band-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-lg); align-items: center; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg); text-decoration: none; color: var(--ink);
  transition: border-color var(--dur-short) var(--ease-out);
}
.issue-band-card:hover { border-color: var(--border-input); color: var(--ink); }
.issue-band-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.issue-nb { text-align: right; border-right: 1px solid var(--hairline); padding-right: var(--space-lg); }
.issue-nb-value {
  font-family: var(--font-data); font-size: var(--text-title); font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.issue-nb-label {
  font-size: var(--text-chip); font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--faint);
}
.latest-meta {
  display: block; font-family: var(--font-data); font-size: var(--text-xs);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint);
}
.latest-title {
  display: block; margin-top: var(--space-3xs); font-family: var(--font-display);
  font-size: var(--text-lede); font-weight: 600;
}
.latest-verify { display: block; margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--muted); }
.latest-read {
  font-size: var(--text-sm); font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 0.15em; white-space: nowrap;
}
.issue-band-card:hover .latest-read { color: var(--accent-hover); }

/* ---- subscribe ---- */
.subscribe { padding: var(--space-xl) 0 var(--space-2xl); }
.subscribe-grid {
  display: grid; grid-template-columns: 1fr 0.9fr; gap: var(--space-2xl);
  align-items: start;
}
.offer-list { list-style: none; }
.offer-list li {
  position: relative; padding: var(--space-2xs) 0 var(--space-2xs) var(--space-lg);
  color: var(--muted); font-size: var(--text-sm);
}
.offer-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.subscribe-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: var(--space-lg);
}
.subscribe-card label {
  display: block; font-size: var(--text-sm); font-weight: 600;
  color: var(--ink); margin-bottom: var(--space-xs);
}
.subscribe-card input[type="email"],
.subscribe-card input[type="text"] {
  width: 100%; min-height: 2.75rem; font-family: var(--font-body);
  font-size: var(--text-base); line-height: 1.5; color: var(--ink);
  background: var(--paper); border: 1px solid var(--border-input);
  border-radius: var(--radius-control); padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-md); outline: 2px solid transparent; outline-offset: 2px;
}
.subscribe-card input[type="email"]:hover:not(:focus-visible),
.subscribe-card input[type="text"]:hover:not(:focus-visible) { border-color: var(--muted); }
.subscribe-card input[type="email"]::placeholder,
.subscribe-card input[type="text"]::placeholder { color: var(--faint); }
.subscribe-card input[type="email"].is-invalid,
.subscribe-card input[type="text"].is-invalid { border-color: var(--error); }
.subscribe-card input[type="email"]:focus-visible,
.subscribe-card input[type="text"]:focus-visible,
.subscribe-card button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* The request form's consent checkbox: a normal-weight inline row, not the
   bold block label an email/text field gets — the two would otherwise read
   as equally weighted fields. `.subscribe-card label` is more specific than
   a bare class, so this is written to out-specify it rather than reach for
   `!important`, which nothing else on this site uses. */
.subscribe-card label.pro-checkbox-field {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: var(--text-sm); font-weight: 400;
  color: var(--muted); margin-bottom: var(--space-md);
}
.pro-checkbox-field input[type="checkbox"] { width: 1rem; height: 1rem; flex: none; }
.subscribe-card button {
  width: 100%; min-height: 2.75rem; font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: 600; line-height: 1.5;
  color: var(--accent-ink); background: var(--accent); border: none;
  border-radius: var(--radius-control); padding: var(--space-xs) var(--space-lg);
  white-space: nowrap; cursor: pointer;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: background-color var(--dur-short) var(--ease-out),
              transform 80ms var(--ease-out);
}
.subscribe-card button:hover:not(:disabled) { background: var(--accent-hover); }
.subscribe-card button:active:not(:disabled) { transform: translateY(1px); }
.subscribe-card button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Honeypot: hidden from humans, present for bots. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { min-height: 1.65em; min-height: 1lh; margin-top: var(--space-sm); font-size: var(--text-sm); }
.form-status.is-error { color: var(--error); }
.form-status.is-success { color: var(--ok); }
.form-status.is-pending { color: var(--muted); }
.form-note { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--faint); }

/* ---- responsive ---- */
@media (max-width: 820px) {
  .opening-grid, .week-grid, .coverage-grid, .feature-grid, .subscribe-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .opening-grid { row-gap: var(--space-lg); }
  .feed {
    border-left: none; border-top: 1px solid var(--hairline);
    padding-left: 0; padding-top: var(--space-sm);
  }
  .coverage-side { border-left: none; padding-left: 0; margin-top: var(--space-md); }
  .statrow { grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
  .minirow { grid-template-columns: repeat(2, auto); }
  .issue-band-card { grid-template-columns: minmax(0, 1fr); }
  .issue-nb { text-align: left; border-right: none; padding-right: 0; }
}

@media (max-width: 480px) {
  /* the data strip scrolls; a fade tells the reader there is more of it */
  .datastrip::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2.5rem;
    background: linear-gradient(to right, transparent, var(--paper));
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subscribe-card button, .issue-band-card { transition: none; }
  .subscribe-card button:active:not(:disabled) { transform: none; }
}