/* 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)
 */
.page--home .wrap {
  width: min(100%, 82rem);
  display: grid;
  grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr);
  column-gap: var(--space-xl);
  align-items: start;
}
.page--home .site-head,
.page--home .subject-nav,
.page--home .home-footer { grid-column: 1 / -1; }
.page--home .site-head { grid-row: 1; }
.page--home .subject-nav { grid-row: 2; }
.page--home .home-main,
.page--home .home-bento { display: contents; }
.page--home .home-hero {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, .65fr);
  align-items: stretch;
  gap: var(--space-lg);
  margin: 0 0 var(--space-lg);
  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(--color-accent);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.page--home .home-hero-copy { min-width: 0; align-content: center; }
.page--home .home-hero .eyebrow { margin: 0; color: var(--color-accent); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0; }
.page--home .home-hero h1 {
  min-width: 0;
  max-width: 14ch;
  margin-block-start: var(--space-sm);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.page--home .home-hero-lede { max-width: 60ch; margin-block-start: var(--space-md); color: var(--color-ink-2); font-size: var(--text-base); }
.page--home .home-hero-note { min-width: 0; align-self: center; padding: var(--space-lg); background: var(--color-note-soft); }
.page--home .home-hero-note > span { display: block; margin-block-end: var(--space-sm); color: var(--color-pencil); font-size: var(--text-xs); font-weight: 700; }
.page--home .home-hero-note strong { display: block; font-family: var(--font-display); font-size: var(--text-md); }
.page--home .home-hero-note p { margin-block-start: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.page--home .home-rail {
  grid-column: 1;
  grid-row: 3 / span 2;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-lg);
}
.page--home .grade-picker,
.page--home .home-usage {
  min-width: 0;
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.page--home .grade-picker { border-block-start: var(--space-2xs) solid var(--color-accent); }
.page--home .tile-heading { margin-block-end: var(--space-sm); }
.page--home .tile-heading h2,
.page--home .home-usage h2,
.page--home .subject-intro h2 { font-size: var(--text-base); }
.page--home .grade-row { padding-block: var(--space-sm); border-block-start: var(--rule-hair) solid var(--color-rule); }
.page--home .grade-row > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-block-start: var(--space-xs); }
.page--home .grade-row strong { display: flex; align-items: baseline; gap: var(--space-2xs); }
.page--home .grade-row strong span { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-md); }
.page--home .grade-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  background: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.page--home .home-usage { background: var(--color-note-soft); }
.page--home .usage-mark { width: fit-content; margin-block-end: var(--space-sm); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-md); color: var(--color-ink); background: var(--color-note); font-size: var(--text-xs); font-weight: 700; }
.page--home .home-usage p { margin-block-start: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.page--home .home-usage a { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--color-accent); font-weight: 700; white-space: nowrap; }
.page--home .home-primary { grid-column: 2; grid-row: 4; min-width: 0; }
.page--home .subject-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-block-start: var(--space-2xs) solid var(--color-accent);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-joy-soft);
}
.page--home .subject-intro span { color: var(--color-muted); font-size: var(--text-sm); }
.page--home .subject-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); margin-block-start: var(--space-sm); }
.page--home .subject-card {
  --card-accent: var(--color-math);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(10rem, .65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.page--home .subject-card--japanese { --card-accent: var(--color-japanese); }
.page--home .subject-card--life { --card-accent: var(--color-life); }
.page--home .subject-card--science { --card-accent: var(--color-science); }
.page--home .subject-card--social { --card-accent: var(--color-social); }
.page--home .subject-card-head { min-width: 0; }
.page--home .subject-card-kicker { color: var(--card-accent); font-size: var(--text-xs); font-weight: 700; }
.page--home .subject-card h2 { margin-block-start: var(--space-2xs); font-size: var(--text-lg); }
.page--home .subject-card > p { color: var(--color-muted); font-size: var(--text-sm); }
.page--home .subject-card-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.page--home .subject-card-actions > 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);
  background: var(--color-paper);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.page--home .subject-card-actions > .primary { color: var(--color-accent-ink); background: var(--card-accent); }
.page--home .learning-flow { margin-block-start: var(--space-lg); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-note-soft); box-shadow: var(--shadow-soft); }
.page--home .learning-flow ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: var(--space-md) 0 0; list-style: none; }
.page--home .learning-flow li { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-sm); padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); }
.page--home .learning-flow li > span { width: 2rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-ink); background: var(--color-note); font-weight: 700; }
.page--home .learning-flow li p { margin-block-start: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.page--home .home-footer {
  grid-row: 5;
  display: grid;
  grid-template-columns: minmax(12rem, .8fr) minmax(18rem, 1.4fr) minmax(12rem, 1fr);
  align-items: start;
  gap: var(--space-lg);
  margin-block: var(--space-2xl) var(--space-lg);
  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);
  color: var(--color-muted);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.page--home .footer-brand { display: grid; gap: var(--space-xs); }
.page--home .footer-brand b { color: var(--color-ink); }
.page--home .home-footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.page--home .home-footer a { min-height: 2.75rem; display: flex; align-items: center; padding-inline: var(--space-sm); border-radius: var(--radius-md); color: var(--color-ink); background: var(--color-paper); text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .page--home .grade-link:hover,
  .page--home .subject-card-actions > a:hover,
  .page--home .home-footer a:hover { color: var(--color-accent); background: var(--color-accent-soft); }
}
.page--home a:active { background: var(--color-paper-3); }
@media (max-width: 60rem) {
  .page--home .wrap { display: block; }
  .page--home .home-main { display: block; }
  .page--home .home-hero { grid-template-columns: minmax(0, 1fr); }
  .page--home .home-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .page--home .home-primary { grid-column: auto; grid-row: auto; order: 1; }
  .page--home .home-rail { grid-column: auto; grid-row: auto; order: 2; }
  .page--home .home-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--home .home-footer > p { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .page--home .home-hero { padding: var(--space-md) var(--space-md) var(--space-lg); }
  .page--home .home-hero h1 { font-size: clamp(1.75rem, 9vw, 2.4rem); }
  .page--home .home-hero-note { padding: var(--space-md); }
  .page--home .subject-card { grid-template-columns: minmax(0, 1fr); }
  .page--home .subject-card-actions { grid-column: auto; }
  .page--home .learning-flow ol { grid-template-columns: minmax(0, 1fr); }
  .page--home .home-footer { grid-template-columns: minmax(0, 1fr); }
  .page--home .home-footer > p { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .page--home *,
  .page--home *::before,
  .page--home *::after { transition-duration: 0ms !important; }
}