/* ============================================================================
   /log (sub page system v1.1, 9 Oct 2026): the Log's index, a plain page, no instrument.
   The header, then one chapter: every entry as a row of the system's link list (the month as
   the record, the title, the dek), and the research updates form as a callout under it, drawn
   exactly as on /research so the one form looks the same wherever it is. site.js finds the form
   by .js-sub-form inside .sub-band and shows .sub-ok / .sub-error (its hooks are unchanged).
   Tokens only (no hex outside tos-site.css), every rule under .sp.lg, logical properties only.
   ============================================================================ */

/* the title is two keys: on a desktop each keeps its own line, as the old page drew it */
.sp.lg h1 .lg-l { display: inline; }
@media (min-width: 760px) { .sp.lg h1 .lg-l { display: block; } }
/* each line whole on a desktop: the header column is widened for this title only */
@media (min-width: 1180px) { .sp.lg .sp-head.is-plain > .hd-a { max-width: 1040px; } }

/* the entries: the month in the record column, the title, the dek under it */
.sp.lg .lg-list .lk-t { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; }
.sp.lg .lg-list .lk-x { margin-top: 4px; font-size: 16px; max-width: 40em; }
.sp.lg .lg-list a { padding-block: 18px 20px; }
@media (min-width: 760px) {
  .sp.lg .lg-list a { grid-template-columns: 170px minmax(0, 1fr); column-gap: 24px; }
}
@media (min-width: 1180px) {
  .sp.lg .lg-list .lk-t { font-size: 22px; }
  .sp.lg .lg-list .lk-x { font-size: 17px; }
  .sp.lg .lg-list a { padding-block: 22px 24px; grid-template-columns: 220px minmax(0, 1fr); }
}

/* research updates: the one form on the page (the /research form, the same rules) */
.sp.lg .lg-sub { position: relative; margin-top: 48px; max-width: 760px; }
.sp.lg .lg-sub form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.sp.lg .lg-sub input[type="email"] { min-height: 52px; width: 100%; padding: 0 14px; border: 1px solid var(--lp-rule-2); border-radius: 2px; background: var(--lp-paper); font: 500 16px/1 var(--tos-font-body); color: var(--lp-ink); }
.sp.lg .lg-sub input[type="email"]::placeholder { color: var(--lp-muted); }
.sp.lg .lg-sub input[type="email"]:focus { outline: 2px solid var(--lp-ink); outline-offset: 0; border-color: var(--lp-ink); }
.sp.lg .lg-sub .hp { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sp.lg .lg-sub .btn { width: 100%; }
.sp.lg .lg-sub .sub-ok { display: none; margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--lp-ink); }
.sp.lg .lg-sub .sub-ok.is-on { display: flex; align-items: center; gap: 8px; }
.sp.lg .lg-sub .sub-ok::before { content: ""; width: 7px; height: 7px; background: var(--lp-accent); flex: none; }
.sp.lg .lg-sub .sub-error { display: none; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--lp-accent-text); }
.sp.lg .lg-sub .sub-error.is-on { display: block; }
@media (min-width: 480px) { .sp.lg .lg-sub form { grid-template-columns: minmax(0, 1fr) auto; } .sp.lg .lg-sub .btn { width: auto; } }
@media (min-width: 1180px) { .sp.lg .lg-sub { margin-top: 64px; padding: 28px 32px; } }