/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * genre: editorial · macrostructure: Catalogue · designed-as-app
 * theme: School Notebook Commons · nav: N6 · footer: Ft3 · design-system: design.md
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */
@import url("tokens.css");
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  --subject-accent: var(--color-math);
  --subject-soft: var(--color-math-soft);
  color: var(--color-ink);
  background: var(--color-paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  padding-bottom: env(safe-area-inset-bottom);
}
.page--japanese { --subject-accent: var(--color-japanese); --subject-soft: var(--color-japanese-soft); }
.page--life { --subject-accent: var(--color-life); --subject-soft: var(--color-life-soft); }
.page--science { --subject-accent: var(--color-science); --subject-soft: var(--color-science-soft); }
.page--social { --subject-accent: var(--color-social); --subject-soft: var(--color-social-soft); }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; line-height: 1.35; overflow-wrap: anywhere; min-width: 0; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, var(--text-2xl)); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
p, figure { margin: 0; }
a { color: var(--subject-accent); text-underline-offset: .22em; }
button, input, select { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
button:disabled, [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
[hidden] { display: none !important; }
.skip { position: fixed; left: var(--space-md); top: -5rem; z-index: 50; min-height:44px; padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-on-dark); }
.skip:focus { top: var(--space-md); }
.wrap { width: min(100%, 88rem); margin-inline: auto; padding-inline: clamp(var(--space-md), 4vw, var(--space-xl)); }
.mast, .site-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.brand, .wordmark { display: inline-flex; align-items: baseline; min-height: 44px; color: var(--color-ink); text-decoration: none; font-family: var(--font-display); font-size: var(--text-md); white-space: nowrap; }
.brand small, .wordmark small { margin-inline-start: var(--space-sm); color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; }
.head-note { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.subject-nav { display: grid; grid-template-columns: 5rem repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--color-rule); }
.subject-nav > * { min-height: 48px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--color-rule); }
.subject-nav > :last-child { border-right: 0; }
.subject-nav > span { color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .12em; }
.subject-nav a { color: var(--color-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.subject-nav a[aria-current="page"] { color: var(--color-on-dark); background: var(--subject-accent); }
.heading { margin-top: var(--space-lg); padding: clamp(var(--space-lg), 4vw, var(--space-xl)); color: var(--color-on-dark); background: var(--subject-accent); }
.heading h1 { max-width: 18ch; }
.heading p { max-width: 64ch; margin-top: var(--space-sm); }
.eyebrow { margin-bottom: var(--space-xs); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.tabs a { min-height: 44px; display: inline-flex; align-items: center; padding-inline: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); color: var(--color-ink); background: var(--color-surface); text-decoration: none; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--color-on-dark); background: var(--color-ink); border-color: var(--color-ink); }
.workspace { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: clamp(var(--space-lg), 4vw, var(--space-xl)); padding-block: var(--space-lg) var(--space-2xl); align-items: start; }
.filters { position: sticky; top: var(--space-md); display: grid; gap: var(--space-md); padding: var(--space-md); border-top: 3px solid var(--subject-accent); background: var(--color-surface); }
.filters form { display: grid; gap: var(--space-sm); }
.filters label { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 700; }
.filters input, .filters select { width: 100%; min-height: 44px; padding-inline: var(--space-sm); border: 1px solid var(--color-rule-dark); border-radius: var(--radius-sm); color: var(--color-ink); background: var(--color-surface); }
.filters .help { display: grid; gap: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.section-top { min-height: 48px; display: flex; align-items: end; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-ink); }
.section-top p { color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
.unit { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); scroll-margin-top: var(--space-lg); }
.unit figure { align-self: start; overflow: hidden; border: 1px solid var(--color-rule); background: var(--color-surface); }
.unit .preview { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; object-fit: cover; }
.unit > div { min-width: 0; }
.unit .meta { color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.unit h3 { margin-top: var(--space-2xs); }
.unit .goal { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.editions { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); }
.edition, .actions, .video-callout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.edition strong { min-width: 9rem; font-size: var(--text-sm); }
.variants { border-top: 1px solid var(--color-rule); }
.variants summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--subject-accent); font-weight: 700; }
.variant-list { display: grid; gap: var(--space-xs); padding: 0 0 var(--space-sm) var(--space-sm); }
.btn, .subject-card-actions > a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding: .55rem .8rem; border: 1px solid var(--color-ink); border-radius: var(--radius-sm); color: var(--color-ink); background: var(--color-surface); font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover, .subject-card-actions > a:hover { background: var(--subject-soft); }
.btn.primary { color: var(--color-on-dark); background: var(--color-ink); }
.btn.video-link { color: var(--subject-accent); border-color: var(--subject-accent); }
.download, .empty { margin-top: var(--space-xl); padding: var(--space-lg); border-top: 3px solid var(--subject-accent); background: var(--subject-soft); }
.download p, .empty p { margin-block: var(--space-xs) var(--space-sm); }
.footer { min-height: 84px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.footer > div { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.footer b { color: var(--color-ink); }
.footer a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.toolbar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-sm) max(var(--space-md), calc((100vw - 88rem) / 2)); border-bottom: 1px solid var(--color-rule); background: var(--color-paper); }
.article, .video-page, .viewer-note { width: min(100%, 68rem); margin-inline: auto; }
.article { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
.article h1 { padding-bottom: var(--space-md); border-bottom: 3px solid var(--subject-accent); }
.article h2 { margin-top: var(--space-xl); }
.article p, .article ul { margin-top: var(--space-sm); }
.article li + li { margin-top: var(--space-xs); }
.video-page { margin-block: var(--space-xl); padding: clamp(var(--space-md), 4vw, var(--space-xl)); border-top: 5px solid var(--subject-accent); background: var(--color-surface); }
.video-page > .meta:first-child { color: var(--subject-accent); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; }
.video-page > h1 { margin-top: var(--space-xs); }
.video-page > h1 + p { max-width: 68ch; margin-top: var(--space-sm); color: var(--color-muted); }
.video-page video, .lesson-video { width: 100%; display: block; margin-top: var(--space-lg); background: var(--color-ink); }
.video-page video + .meta { margin-top: var(--space-xs); color: var(--color-muted); }
.chapters { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
.chapters .btn span { color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.transcript { margin-block: var(--space-lg); border-block: 1px solid var(--color-rule); }
.transcript summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.transcript section { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.transcript section p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.viewer { display: block; width: min(100%, 88rem); height: calc(100vh - 8rem); margin-inline: auto; border: 0; background: var(--color-surface); }
.viewer-note { padding: var(--space-sm) var(--space-md); color: var(--color-muted); }
.home-main { padding-bottom: var(--space-2xl); }
.home-hero { color: var(--color-on-dark); background: var(--color-ink); }
.home-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: var(--space-lg); background: var(--color-rule-dark); }
.home-guide span { padding: var(--space-sm); color: var(--color-ink); background: var(--color-surface); font-weight: 700; }
.subject-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.subject-card { --card-accent: var(--color-math); min-width: 0; padding: var(--space-lg); border-top: 5px solid var(--card-accent); background: var(--color-surface); }
.subject-card--japanese { --card-accent: var(--color-japanese); }
.subject-card--science { --card-accent: var(--color-science); }
.subject-card--social { --card-accent: var(--color-social); }
.subject-card-kicker { color: var(--card-accent); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; }
.subject-card h2 { margin-top: var(--space-xs); font-size: var(--text-xl); }
.subject-card > p:not(.subject-card-kicker) { min-height: 3.3em; margin-top: var(--space-xs); color: var(--color-muted); }
.subject-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.subject-card-actions > a { color: var(--color-ink); border-color: var(--color-rule-dark); }
.subject-card-actions > .primary { color: var(--color-on-dark); background: var(--card-accent); border-color: var(--card-accent); }
.home-usage { margin-top: var(--space-xl); padding: var(--space-lg); border-left: 5px solid var(--color-ink); background: var(--color-paper-2); }
.home-usage p { margin-top: var(--space-xs); }
@media (max-width: 60rem) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .workspace > .filters { position: static; }
}
@media (max-width: 40rem) {
  .wrap { padding-inline: var(--space-sm); }
  .head-note, .subject-nav > span { display: none; }
  .subject-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .subject-nav a { min-width: 0; font-size: var(--text-sm); }
  .heading { margin-top: var(--space-sm); }
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs a { justify-content: center; }
  .unit { grid-template-columns: 4.75rem minmax(0, 1fr); gap: var(--space-sm); }
  .unit .goal { font-size: var(--text-sm); }
  .edition strong { width: 100%; min-width: 0; }
  .home-guide, .subject-grid { grid-template-columns: minmax(0, 1fr); }
  .subject-card > p:not(.subject-card-kicker) { min-height: 0; }
  .toolbar { position: static; padding-inline: var(--space-sm); }
  .toolbar .btn { flex: 1 1 auto; }
  .video-page { margin-block: var(--space-sm); padding: var(--space-md); }
}
@media print {
  .toolbar, .mast, .subject-nav, .heading, .tabs, .filters, .footer { display: none !important; }
  html, body { overflow: visible; background: var(--color-surface); }
}

/* School Notebook Commons · catalogue pages */
body { background: var(--color-paper-2); }
.wrap { width: min(100%, 82rem); }
.mast,
.site-head {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  margin-block-start: var(--space-md);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-dark);
  border-block-start: var(--space-xs) solid var(--color-pencil);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.mast-line {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
}
.brand,
.wordmark { grid-column: 2; justify-self: center; font-size: var(--text-lg); letter-spacing: .02em; }
.head-note { grid-column: 3; justify-self: end; color: var(--subject-accent); }
.subject-nav {
  margin-block-end: var(--space-lg);
  overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule-dark);
  border-block-start: 0;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.subject-nav > * { border-block-start: var(--space-2xs) solid var(--color-rule); }
.subject-nav > :nth-child(2) { border-block-start-color: var(--color-math); }
.subject-nav > :nth-child(3) { border-block-start-color: var(--color-japanese); }
.subject-nav > :nth-child(4) { border-block-start-color: var(--color-science); }
.subject-nav > :nth-child(5) { border-block-start-color: var(--color-social); }
.subject-nav a[aria-current="page"] { color: var(--color-ink); background: var(--subject-soft); }
.subject-nav > span { background: var(--color-joy-soft); }

.heading {
  margin-block-start: 0;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  border: var(--rule-hair) solid var(--color-rule);
  border-block-start: var(--space-xs) solid var(--subject-accent);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.heading p { color: var(--color-ink-2); }
.tabs {
  gap: var(--space-xs);
  margin-block: var(--space-md);
  padding: var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.tabs a { border-color: var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); }
.tabs a[aria-current="page"] { color: var(--color-accent-ink); border-color: var(--subject-accent); background: var(--subject-accent); }

.workspace { gap: var(--space-xl); }
.filters {
  overflow: hidden;
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-block-start: var(--space-xs) solid var(--subject-accent);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.filters input,
.filters select { border-color: var(--color-rule-dark); border-radius: var(--radius-input); background: var(--color-paper); }
.filters .help { padding: var(--space-md); border: 0; border-radius: var(--radius-md); background: var(--color-note-soft); }
.section-top {
  align-items: center;
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-block-start: var(--space-2xs) solid var(--subject-accent);
  border-radius: var(--radius-card);
  background: var(--subject-soft);
}
.unit {
  margin-block-start: var(--space-sm);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.unit figure { border-radius: var(--radius-md); background: var(--color-paper); }
.unit .preview { border-radius: var(--radius-md); }
.variants { border-color: var(--color-rule); }
.btn,
.subject-card-actions > a { border-color: var(--color-rule-dark); border-radius: var(--radius-pill); background: var(--color-paper); }
.btn.primary { color: var(--color-accent-ink); border-color: var(--subject-accent); background: var(--subject-accent); }
.btn.video-link { color: var(--color-pencil); border-color: var(--color-pencil); background: var(--color-pencil-soft); }
.download,
.empty { border: var(--rule-hair) solid var(--color-rule); border-block-start: var(--space-xs) solid var(--subject-accent); border-radius: var(--radius-card); background: var(--subject-soft); }
.footer {
  margin-block: var(--space-xl) var(--space-md);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-block-start: var(--space-xs) solid var(--color-pencil);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

@media (hover: hover) and (pointer: fine) {
  .unit:hover { border-color: var(--subject-accent); }
  .btn:hover,
  .tabs a:hover,
  .subject-nav a:hover { color: var(--color-accent); background: var(--color-accent-soft); }
}
@media (max-width: 40rem) {
  .mast,
  .site-head { grid-template-columns: minmax(0, 1fr) auto; }
  .mast-line { grid-column: 1 / -1; text-align: start; }
  .brand,
  .wordmark { grid-column: 1; justify-self: start; font-size: var(--text-md); }
  .head-note { grid-column: 2; display: inline; font-size: var(--text-xs); }
  .heading { padding: var(--space-md) var(--space-md) var(--space-lg); }
  .unit { padding: var(--space-md); }
}
@media print {
  .toolbar, .mast, .subject-nav, .heading, .tabs, .filters, .footer { display: none !important; }
  .unit { box-shadow: none; }
}

/* Hallmark · genre: editorial · macrostructure: Split Studio + Catalogue
 * theme: School Notebook Commons · parity target: middle-school catalogue
 * nav: N6 school masthead · footer: Ft3 subject index · designed-as-app · design-system: design.md
 * pre-emit critique: P5 H5 E5 S5 R5 V3 · contrast: pass (40–41) · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * icons: pass (30) · mobile: pass (34, 49, 50–57)
 */
.mast,
.site-head {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-dark);
  border-block-start: var(--space-xs) solid var(--color-pencil);
}
.brand,
.wordmark { grid-column: 2; justify-self: center; font-size: var(--text-lg); }
.head-note,
.head-link {
  grid-column: 3;
  justify-self: end;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  background: var(--color-accent-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.subject-nav { grid-template-columns: 8rem repeat(5, minmax(0, 1fr)); margin-block-end: var(--space-lg); }
.subject-nav > :nth-child(2) { border-block-start-color: var(--color-math); }
.subject-nav > :nth-child(3) { border-block-start-color: var(--color-japanese); }
.subject-nav > :nth-child(4) { border-block-start-color: var(--color-life); }
.subject-nav > :nth-child(5) { border-block-start-color: var(--color-science); }
.subject-nav > :nth-child(6) { border-block-start-color: var(--color-social); }
.subject-nav-label { background: var(--color-joy-soft); }
.breadcrumb {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-lg);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.breadcrumb a { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--color-muted); }
.breadcrumb strong { color: var(--color-ink); }
.school-strip {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.school-strip .mast-line {
  grid-column: auto;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--color-muted);
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
}
.school-switch { display: flex; align-items: center; gap: var(--space-2xs); }
.school-switch a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.school-switch a[aria-current="page"] { color: var(--color-ink); background: var(--color-joy-soft); }
.page--index .wrap {
  display: grid;
  grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr);
  column-gap: var(--space-xl);
  align-items: start;
}
.page--index .site-head,
.page--index .subject-nav,
.page--index .footer { grid-column: 1 / -1; }
.page--index .site-head { grid-row: 1; }
.page--index .subject-nav { grid-row: 2; }
.page--index .breadcrumb { grid-row: 3; }
.page--index .heading { grid-column: 2; grid-row: 4; }
.page--index .tabs { grid-column: 2; grid-row: 5; }
.page--index .workspace { display: contents; }
.page--index .filters { grid-column: 1; grid-row: 4 / span 3; position: sticky; top: var(--space-md); }
.page--index .workspace > main { grid-column: 2; grid-row: 6; min-width: 0; }
.page--index .footer { grid-row: 7; }
.page--index .heading {
  min-width: 0;
  margin: 0 0 var(--space-lg);
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  border-block-start-color: var(--subject-accent);
}
.page--index .heading h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.15; letter-spacing: -.02em; }
.page--index .heading p { margin-block-start: var(--space-md); }
.page--index .tabs { margin: 0 0 var(--space-lg); }
.page--index .filters { padding: var(--space-md); }
.page--index .filters::before {
  display: block;
  margin-block-end: var(--space-sm);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  content: "必要な単元を、すぐに。";
}
.page--index .section-top { border-block-start-color: var(--subject-accent); background: var(--subject-soft); }
.page--index .unit { grid-template-columns: 7.5rem minmax(0, 1fr); }
.page--index .unit:first-of-type { border-block-start: var(--rule-hair) solid var(--color-rule); }
.page--index .footer {
  display: grid;
  grid-template-columns: minmax(12rem, .8fr) minmax(18rem, 1.4fr) minmax(12rem, 1fr);
  align-items: start;
  gap: var(--space-lg);
}
@media (hover: hover) and (pointer: fine) {
  .head-link:hover,
  .school-switch a:hover { color: var(--color-accent); background: var(--color-paper); }
}
.head-link:active,
.school-switch a:active { background: var(--color-paper-3); }
@media (max-width: 60rem) {
  .page--index .wrap { display: block; }
  .page--index .workspace { display: grid; grid-template-columns: minmax(0, 1fr); }
  .page--index .filters { grid-column: auto; grid-row: 2; position: static; }
  .page--index .workspace > main { grid-column: auto; grid-row: 1; }
  .page--index .footer { grid-column: auto; grid-row: auto; }
  .page--index .footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .mast,
  .site-head { grid-template-columns: minmax(0, 1fr) auto; }
  .brand,
  .wordmark { grid-column: 1; justify-self: start; font-size: var(--text-md); }
  .head-note,
  .head-link { grid-column: 2; }
  .subject-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .subject-nav-label { display: none; }
  .subject-nav > * { min-width: 0; padding-inline: var(--space-2xs); font-size: var(--text-xs); }
  .school-strip { gap: var(--space-xs); }
  .school-switch a { padding-inline: var(--space-xs); }
  .breadcrumb { margin-block-end: var(--space-md); }
  .page--index .heading { padding: var(--space-md) var(--space-md) var(--space-lg); }
  .page--index .heading h1 { font-size: clamp(1.75rem, 9vw, 2.4rem); }
  .page--index .tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; }
  .page--index .unit { grid-template-columns: 4.75rem minmax(0, 1fr); }
  .page--index .footer { grid-template-columns: minmax(0, 1fr); }
}