/* Hallmark · shape: Index-First · genre: editorial · theme: custom, pinned by request (design.md: the class register) · job: find a tutor · idea: "the home is the ruled register with the red margin; an entry is an index card" · vibe: "the office register, blue-black ink, typed figures"
 * paper: oklch(98.6% 0.004 90) · accent: oklch(56% 0.195 27) · display: Bricolage Grotesque · body: Atkinson Hyperlegible · hero: Index, a short head beside the register table · nav: edge-aligned bar, wordmark, the city as a list, four sections · footer: mast · imagery: our own capture of a tutor's site on the entry only
 * axes: light/display-grotesque/chromatic-red · posture: restrained (red is the margin line, the serial numbers and the one action) · surface: ruled · contrast: pass · fold: pass · motion: design.md grammar (margin draws once, serials write in once, marker sweeps once, cards rise once) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: E, a register of counts is only as good as the entries behind it; every count is an entry on record and the note under the table says what a dash means */
/* Hallmark · dismissed 58 · the first window is the register: ten rows of three typed figures each read as one object, the nav nine words, the head block under thirty */
/* Hallmark · waive 79 · the hero's content is the register table beside a short head · the measure stops at the head block because the table is the hero itself, as design.md asks */
/* Hallmark · waive 77 · the Teach band holds one line, two actions and the typed address, once on the page · the band is the register's last ruled line, not a section */
/* Hallmark · dismissed 58 · the last screen holds three index cards whose words are names, subjects, places and fees on record, the Teach band's two lines and the footer mast; the cards are the entries, read as objects
/* Hallmark · waive 49b · a subject's name in a ruled list may run to two lines; the entries are names, not controls, and the row keeps its rule · the register's own column never wraps because the names were cut to one line each
/* Hallmark · answered F19 · the serial numbers and counts are Courier Prime because the register's figures are typed; every label is the body face */
@import url("tokens.css");
@import url("base.css");

/* ---------- the sheet ---------- */
body { background-color: var(--color-paper); }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
@media (max-width: 720px) { :root { --gutter: 16px; --section-gap-s: 72px; --section-gap: 88px; } }
.skip { position: absolute; left: var(--space-md); top: -100px; padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-card); z-index: var(--z-toast); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.top-row { display: flex; align-items: center; gap: var(--space-lg); min-height: 64px; }
.brand { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: var(--tracking-display); text-decoration: none; color: var(--color-ink); font-variation-settings: "opsz" 24; }
.brand .tld, .foot-mark .tld { color: var(--color-accent); }
.pick { position: relative; }
.pick summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 10px 6px 12px; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper-2); font-size: var(--text-sm); color: var(--color-ink); }
.pick summary::-webkit-details-marker { display: none; }
.pick summary:hover { border-color: var(--color-ink-2); }
.pick-in { color: var(--color-muted); }
.pick-name { font-weight: 700; }
.pick-list { position: absolute; left: 0; top: calc(100% + 6px); margin: 0; padding: var(--space-xs) 0; list-style: none; min-width: 220px; max-height: 70vh; overflow: auto; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); box-shadow: var(--shadow-card); z-index: var(--z-dropdown); }
.pick-list a { display: block; padding: 8px 14px; text-decoration: none; font-size: var(--text-sm); }
.pick-list a:hover, .pick-list a[aria-current="true"] { background: var(--color-paper-3); }
.pick-list a[aria-current="true"] { font-weight: 700; }
.pick-more a { color: var(--color-muted); border-top: var(--rule-hair) solid var(--color-rule); margin-top: 4px; padding-top: 10px; }
.nav { margin-left: auto; display: flex; gap: var(--space-lg); }
.nav a { text-decoration: none; font-size: var(--text-sm); font-weight: 700; color: var(--color-ink-2); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--color-ink); border-color: var(--color-rule-2); }
.nav a[aria-current="page"] { color: var(--color-ink); border-color: var(--color-accent); }
.menu-link, .menu-close { display: none; }
@media (max-width: 860px) {
  .top-row { gap: var(--space-sm); }
  .pick summary { padding: 6px 8px 6px 10px; }
  .pick-name { max-width: 10ch; overflow: hidden; text-overflow: ellipsis; }
  .pick-list { position: fixed; left: var(--gutter); right: var(--gutter); top: 64px; min-width: 0; max-height: calc(100vh - 80px); }
  .menu-link { display: inline-flex; margin-left: auto; padding: 7px 12px; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); text-decoration: none; font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
  .nav { position: fixed; inset: 0; display: none; flex-direction: column; gap: 0; padding: var(--space-2xl) var(--space-lg) var(--space-lg); background: var(--color-paper); z-index: var(--z-modal); }
  .nav:target { display: flex; }
  .nav a { font-size: var(--text-xl); font-family: var(--font-display); font-weight: 700; padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .menu-close { display: inline-flex; position: absolute; top: var(--space-md); right: var(--space-md); padding: 7px 12px; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); font-size: var(--text-sm); font-weight: 700; font-family: var(--font-body); }
}

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 var(--space-lg); border-radius: var(--radius-card); border: var(--rule-hair) solid transparent; font: inherit; font-weight: 700; font-size: var(--text-md); text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink)); }
.btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); }
.btn--quiet:hover { border-color: var(--color-ink); }
.hl { text-decoration: none; color: var(--color-ink); font-weight: 700; background: linear-gradient(transparent 58%, var(--color-marker) 58%, var(--color-marker) 92%, transparent 92%); padding: 0 2px; }
.hl:hover { background-image: linear-gradient(transparent 20%, var(--color-marker) 20%, var(--color-marker) 94%, transparent 94%); }
.mark { flex: none; width: 20px; height: 20px; color: var(--color-ink-2); }
.mark--s { width: 16px; height: 16px; }

/* ---------- hero ---------- */
.hero { padding: var(--space-xl) 0 var(--space-2xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--space-2xl); align-items: center; }
.hero-text h1 { font-size: var(--text-display-s); font-weight: 800; line-height: 0.98; letter-spacing: var(--tracking-display); font-variation-settings: "opsz" 96; max-width: 11ch; }
.lead { font-size: var(--text-lead); color: var(--color-ink-2); margin-top: var(--space-lg); max-width: 36ch; }
.hero-actions, .band-actions, .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.hero-hint { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.hero-hint a { color: var(--color-ink); }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-text h1 { max-width: 14ch; } }

/* ---------- the register ---------- */
.register-wrap { position: relative; overflow-x: auto; border-top: 2px solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); }
.register { width: 100%; border-collapse: collapse; table-layout: auto; font-variant-numeric: tabular-nums; }
.register th, .register td { padding: 11px 14px; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: baseline; }
.register thead th { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); border-bottom: var(--rule-hair) solid var(--color-rule-2); padding-top: 8px; padding-bottom: 8px; }
.register .reg-no { width: 56px; padding-right: 10px; border-right: 2px solid var(--color-accent); color: var(--color-accent); font-family: var(--font-outlier); font-size: var(--text-sm); text-align: right; }
.register thead .reg-no { color: var(--color-muted); font-family: var(--font-body); }
.register .reg-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); font-variation-settings: "opsz" 24; letter-spacing: -0.005em; }
.register .reg-name a { text-decoration: none; }
.register .reg-name a:hover .reg-word { background: linear-gradient(transparent 60%, var(--color-marker) 60%, var(--color-marker) 94%, transparent 94%); }
.reg-note { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); }
.register .reg-num { font-family: var(--font-outlier); font-size: var(--text-md); text-align: right; white-space: nowrap; width: 1%; min-width: 88px; }
.register .dash { color: var(--color-muted); }
.register tr.is-marked .reg-word { background: linear-gradient(transparent 60%, var(--color-marker) 60%, var(--color-marker) 94%, transparent 94%); }
.register--hero .reg-name { font-size: var(--text-xl); }
.register-note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); max-width: none; }
@media (max-width: 420px) { .register--hero .reg-num:nth-child(5), .register--hero thead th:nth-child(5) { display: none; } }
@media (max-width: 720px) { .register th, .register td { padding: 10px 10px; } .register .reg-no { width: 44px; } .register--hero .reg-name, .register .reg-name { font-size: var(--text-lg); } .register .reg-num { min-width: 64px; font-size: var(--text-sm); } }

/* ---------- sections ---------- */
.section { padding-top: var(--section-gap-s); }
.section--tight { padding-top: var(--space-xl); }
.section-head { font-size: var(--text-section); font-weight: 700; letter-spacing: var(--tracking-display); font-variation-settings: "opsz" 48; margin-bottom: var(--space-lg); }
.section-head--late { margin-top: var(--space-2xl); }
.section-note, .empty { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.plain { padding: var(--space-xl) 0 var(--space-md); }
.plain h1 { font-size: var(--text-display-s); font-weight: 800; letter-spacing: var(--tracking-display); font-variation-settings: "opsz" 96; line-height: 1; }
.plain .lead { max-width: 60ch; }
.plain .lead a { color: var(--color-ink); }
.narrow { max-width: 68ch; }
.prose h2 { font-size: var(--text-title); margin-top: var(--space-xl); margin-bottom: var(--space-xs); }
.prose p + p { margin-top: var(--space-md); }
.prose code { font-family: var(--font-outlier); font-size: 0.95em; }
.two { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-xl) var(--space-2xl); align-items: start; }
.two--form { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 860px) { .two, .two--form { grid-template-columns: minmax(0, 1fr); } }
.aside-head { font-size: var(--text-title); margin-bottom: var(--space-sm); }
.aside-head + .aside-head, .aside p + .aside-head { margin-top: var(--space-xl); }

/* the roll: ruled rows of name and count */
.roll { list-style: none; margin: 0; padding: 0; }
.roll li { display: flex; align-items: baseline; gap: var(--space-md); padding: 9px 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.roll li a { text-decoration: none; color: var(--color-ink); font-weight: 700; }
.roll li a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.roll .n { margin-left: auto; font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.roll .roll-more a { font-weight: 400; color: var(--color-muted); }
.roll li.is-marked a .hl-target { background: linear-gradient(transparent 60%, var(--color-marker) 60%, var(--color-marker) 94%, transparent 94%); }
.roll--cols { columns: 3; column-gap: var(--space-2xl); }
.roll--cols li { break-inside: avoid; }
.roll--plain li { gap: var(--space-lg); }
.roll--plain li span { color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 960px) { .roll--cols { columns: 2; } }
@media (max-width: 600px) { .roll--cols { columns: 1; } }
.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); }
.group-name { font-size: var(--text-title); font-weight: 700; margin-bottom: var(--space-xs); padding-bottom: var(--space-xs); border-bottom: 2px solid var(--color-ink); }
@media (max-width: 960px) { .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .groups { grid-template-columns: minmax(0, 1fr); } }

/* ---------- index cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-lg); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); border-top: 3px solid var(--color-accent); border-radius: var(--radius-card); box-shadow: var(--shadow-card); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--color-rule) 27px, var(--color-rule) 28px); background-origin: content-box; min-height: 180px; }
.card-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); font-variation-settings: "opsz" 24; line-height: 28px; }
.card-name a { text-decoration: none; }
.card-name a::after { content: ""; position: absolute; inset: 0; }
.card-name a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.card-subjects { font-size: var(--text-sm); line-height: 28px; }
.card-subjects .hl { position: relative; z-index: 1; }
.card-place { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 28px; }
.card-kind { color: var(--color-muted); }
.card-levels { font-size: var(--text-sm); color: var(--color-muted); line-height: 28px; }
.card-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; line-height: 28px; padding-top: 2px; }
.modes { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.mode { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--color-ink-2); }
.fee { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-ink); white-space: nowrap; }
.fee--none { color: var(--color-muted); }

/* ---------- the Teach band ---------- */
.section--band { padding-bottom: var(--section-gap-s); }
.band { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl); align-items: center; padding: var(--space-xl) 0; border-top: 2px solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.band h2 { font-size: var(--text-section); font-weight: 700; letter-spacing: var(--tracking-display); font-variation-settings: "opsz" 48; }
.band p { margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 48ch; }
.band-mail { justify-self: end; font-family: var(--font-outlier); font-size: clamp(1.25rem, 2.6vw, 2.25rem); overflow-wrap: anywhere; }
.band-mail a { text-decoration: none; color: var(--color-ink); border-bottom: 3px solid var(--color-accent); }
.band-mail a:hover { background: linear-gradient(transparent 50%, var(--color-marker) 50%, var(--color-marker) 94%, transparent 94%); }
@media (max-width: 860px) { .band { grid-template-columns: minmax(0, 1fr); } .band-mail { justify-self: start; } }

/* ---------- the entry ---------- */
.entry-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-xl) var(--space-2xl); align-items: start; }
@media (max-width: 860px) { .entry-grid { grid-template-columns: minmax(0, 1fr); } }
.entry-kind { font-size: var(--text-sm); color: var(--color-muted); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.entry-place { display: inline-flex; align-items: center; gap: 4px; color: var(--color-ink-2); }
.entry h1 { margin-top: var(--space-xs); }
.entry-subjects { margin-top: var(--space-md); font-size: var(--text-lg); line-height: 1.9; }
.entry-levels, .entry-modes, .entry-quals { margin-top: var(--space-sm); color: var(--color-ink-2); }
.entry-h { font-size: var(--text-title); margin-top: var(--space-xl); margin-bottom: var(--space-xs); padding-bottom: 4px; border-bottom: 2px solid var(--color-ink); max-width: 60ch; }
.entry-about { margin: 0; padding-left: var(--space-md); border-left: 2px solid var(--color-accent); color: var(--color-ink-2); }
.entry-note, .entry-source { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.entry-source { margin-top: var(--space-xl); }
.entry-source a, .entry-note a { color: var(--color-ink); }
.fees { border-collapse: collapse; width: 100%; max-width: 60ch; }
.fees th, .fees td { padding: 8px 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; font-weight: 400; vertical-align: baseline; }
.fees td.num { font-family: var(--font-outlier); text-align: right; white-space: nowrap; }
.reach { list-style: none; margin: 0; padding: 0; max-width: 60ch; }
.reach li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.reach a { color: var(--color-ink); }
.capture { margin: 0; }
.capture img { width: 100%; max-width: 300px; height: auto; aspect-ratio: 375 / 667; object-fit: cover; object-position: top; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper-3); }
.capture figcaption { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.entry-address { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 36ch; }

/* ---------- filters and forms ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin-top: var(--space-lg); padding: var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule-2); border-bottom: var(--rule-hair) solid var(--color-rule); }
.filters fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.filters legend { float: left; margin-right: 10px; font-size: var(--text-sm); color: var(--color-muted); }
.filters label { font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 6px; }
.filters input { accent-color: var(--color-accent); width: 16px; height: 16px; }
.filters-count { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); }
.form { display: flex; flex-direction: column; gap: var(--space-md); }
.form--tight { gap: var(--space-sm); }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-size: var(--text-sm); color: var(--color-ink-2); }
.field legend { padding: 0; margin-bottom: 6px; }
.field input[type="text"], .field input:not([type]), .field input[type="email"], .field select, .field textarea { font: inherit; padding: 10px 12px; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); min-height: 44px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.field input[aria-invalid="true"] { border-color: var(--color-error); }
fieldset.field label { display: inline-flex; align-items: center; gap: 8px; margin-right: var(--space-md); color: var(--color-ink); }
fieldset.field input { accent-color: var(--color-accent); width: 18px; height: 18px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
@media (max-width: 600px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-consent { font-size: var(--text-sm); color: var(--color-muted); }
.form-help { font-size: var(--text-sm); color: var(--color-muted); align-self: center; }
.form-help.is-error { color: var(--color-error); }
.form-help.is-ok { color: var(--color-success); }

/* ---------- footer ---------- */
.foot { margin-top: var(--section-gap); padding: var(--space-2xl) 0 var(--space-xl); border-top: 2px solid var(--color-ink); }
.foot-mark { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); letter-spacing: var(--tracking-display); font-variation-settings: "opsz" 96; }
.foot-line { margin-top: var(--space-xs); color: var(--color-ink-2); max-width: 48ch; }
.foot-cols { display: flex; flex-wrap: wrap; gap: var(--space-xl) var(--space-3xl); margin-top: var(--space-xl); }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--text-sm); }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.foot-theme { margin-top: var(--space-xl); }
.foot-note { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); max-width: 72ch; }
.foot-note a { color: var(--color-ink-2); }
main:has(> .section--band:last-child) + .foot { margin-top: 0; }

/* ---------- motion seams ---------- */
.js-motion .card[data-rise] { opacity: 0; transform: translateY(14px); }
.js-motion .card.is-in { opacity: 1; transform: none; transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js-motion .card[data-rise] { opacity: 1; transform: none; } }