/* Hallmark · macrostructure: Catalogue · theme: Learning Library
 * White paper, leaf green, orange accents · original ImageGen school illustration
 * Shared elementary / middle / portal · P5 H5 E4 S5 R5 V4
 */
:root {
  --library-green: oklch(43% .105 150);
  --library-green-soft: oklch(95% .038 142);
  --color-paper: oklch(99.8% .002 145);
  --color-paper-2: oklch(98% .008 145);
  --color-paper-3: oklch(94% .018 145);
  --color-surface: oklch(99.8% .002 145);
  --color-ink: oklch(30% .035 152);
  --color-ink-2: oklch(39% .023 152);
  --color-muted: oklch(49% .018 152);
  --color-rule: oklch(86% .02 145);
  --color-rule-dark: oklch(68% .03 145);
  --color-accent: oklch(43% .105 150);
  --color-accent-deep: oklch(36% .09 150);
  --color-accent-soft: oklch(95% .038 142);
  --color-accent-ink: oklch(99.8% .002 145);
  --color-on-dark: var(--color-accent-ink);
  --color-on-dark-muted: oklch(93% .02 145);
  --color-focus: oklch(43% .105 150);
  --color-pencil: oklch(49% .135 45);
  --color-pencil-soft: oklch(96% .026 65);
  --color-joy-soft: var(--color-accent-soft);
  --color-note-soft: oklch(97% .018 65);
  --color-note: oklch(89% .08 75);
  --color-math: oklch(46% .1 245);
  --color-math-soft: oklch(96% .02 240);
  --color-english: oklch(48% .14 38);
  --color-english-soft: oklch(97% .02 45);
  --color-japanese: oklch(44% .10 150);
  --color-japanese-soft: oklch(96% .03 145);
  --color-science: oklch(44% .07 195);
  --color-science-soft: oklch(96% .02 190);
  --color-social: oklch(46% .09 65);
  --color-social-soft: oklch(97% .025 70);
  --color-life: oklch(47% .09 90);
  --color-life-soft: oklch(97% .03 90);
  --font-display: 'BIZ UDPGothic', 'Yu Gothic', Meiryo, sans-serif;
  --radius-card: .375rem;
  --radius-md: .25rem;
  --radius-pill: .375rem;
  --shadow-soft: none;
  --library-art: url('learning-together-v3.png');
}
html, body { overflow-x: clip; }
body { color: var(--color-ink); background: var(--color-paper-2); }
body.page {
  --color-accent: var(--library-green);
  --color-accent-soft: var(--library-green-soft);
  --color-focus: var(--library-green);
  --subject-accent: var(--library-green);
  --subject-soft: var(--library-green-soft);
}
.wrap, .page--home .wrap, .portal-shell { width: min(100%, 76rem); padding-inline: var(--space-lg); }
.site-head, .mast.site-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  margin-block-start: 0; padding: var(--space-sm) 0 var(--space-lg);
  gap: var(--space-sm) var(--space-md); border: 0;
  border-radius: 0; background: transparent; box-shadow: none;
}
.school-strip { grid-column: 1 / -1; border-bottom: 1px solid var(--color-rule); padding-bottom: var(--space-xs); }
.school-strip .mast-line { color: var(--color-muted); letter-spacing: 0; }
.school-switch a { font-size: var(--text-sm); border-radius: var(--radius-md); }
.school-switch a[aria-current] { color: var(--color-accent-ink); background: var(--color-accent); }
.site-head .wordmark { grid-column: 1; justify-self: start; gap: var(--space-sm); font-size: clamp(1.125rem, 2.4vw, 1.625rem); font-weight: 700; letter-spacing: 0; }
.site-head .wordmark::before { content: '若'; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-md); }
.site-head .head-link { grid-column: 2; border: 1px solid var(--color-rule-dark); background: var(--color-surface); color: var(--color-accent); box-shadow: none; }
.subject-nav {
  grid-template-columns: 8rem repeat(5, minmax(0, 1fr)); margin: 0 0 var(--space-md);
  border: 1px solid var(--color-rule); border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md); box-shadow: none; background: var(--color-surface);
}
.subject-nav > * { min-height: 3.25rem; border-top: 0; border-right: 1px solid var(--color-rule); color: var(--color-ink); }
.subject-nav > span:first-child { min-width: 0; font-size: var(--text-sm); letter-spacing: 0; background: var(--color-accent-soft); }
.subject-nav > span:first-child::before { content: none; }
.subject-nav a[aria-current], .subject-nav .subject-current { color: var(--color-accent); background: var(--color-accent-soft); box-shadow: inset 0 -3px var(--color-accent); }
.breadcrumb { padding-block: 0; margin: 0 0 var(--space-md); font-size: var(--text-xs); }
.content-grid { margin-top: 0; gap: var(--space-lg); }
.page--index .wrap, .page--home .wrap { column-gap: var(--space-lg); }
.catalogue-head, .filters, .side-menu, .howto, .page--home .grade-picker, .page--home .home-usage { border: 1px solid var(--color-rule); border-radius: var(--radius-md); box-shadow: none; background: var(--color-surface); }
.page--index .filters { padding: var(--space-md); border-top: 3px solid var(--color-accent); }
.page--index .filters::before { font-size: var(--text-base); }
.filters .help { padding: var(--space-sm); background: var(--color-accent-soft); }
.side-menu h2, .page--home .tile-heading { color: var(--color-accent); background: var(--color-accent-soft); }
.page--home .tile-heading { padding: var(--space-sm); margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-sm); }
.side-menu a, .side-menu span { color: var(--color-ink-2); }
.side-menu .side-current { background: var(--color-accent-soft); color: var(--color-accent); }
.content-rail .howto summary { padding-inline: var(--space-sm); font-size: var(--text-xs); white-space: nowrap; }
.hero.hero--text, .page--index .hero.hero--text, .page--home .home-hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(12rem, .85fr);
  align-items: center; gap: var(--space-md); padding: var(--space-lg) var(--space-lg) var(--space-xl);
  margin: 0 0 var(--space-lg); min-height: 0; border: 1px solid var(--color-rule);
  border-radius: var(--radius-card); color: var(--color-ink); background: var(--color-surface); box-shadow: none;
}
.hero-copy, .home-hero-copy { min-width: 0; display: block; }
.hero.hero--text h1, .page--index .hero h1, .page--home .home-hero h1, .page--index .heading h1 {
  max-width: none; margin: var(--space-sm) 0; font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  line-height: 1.4; letter-spacing: 0; color: var(--color-accent);
}
.hero-label, .page--home .home-hero .eyebrow { padding: 0; margin: 0; font-size: var(--text-xs); color: var(--color-pencil); letter-spacing: 0; }
.hero-lede, .page--home .home-hero-lede { padding: 0; margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.8; }
.hero-meta { display: flex; gap: var(--space-md); align-items: baseline; padding: var(--space-sm) 0 0; margin: 0; border: 0; background: transparent; }
.hero-meta div { padding: 0; background: transparent !important; border: 0; }
.hero-meta b { font-size: var(--text-md); color: var(--color-accent); }
.hero-meta span { font-size: var(--text-xs); }
.library-illustration { min-width: 0; width: 100%; aspect-ratio: 3 / 2; background: var(--library-art) center / contain no-repeat; }
.page--index .heading { margin: 0 0 var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-rule); background: var(--color-surface); box-shadow: none; }
.page--index .heading p { margin-top: var(--space-sm); font-size: var(--text-sm); }
.grades, .page--index .tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); padding: var(--space-xs); margin: 0 0 var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: none; }
.grades a, .tabs a { border: 0; border-radius: var(--radius-md); min-height: 44px; padding-inline: var(--space-sm); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); }
.grades a[aria-current], .tabs a[aria-current] { color: var(--color-accent-ink); background: var(--color-accent); }
.grade-index, .learning-path { border: 1px solid var(--color-rule); box-shadow: none; background: var(--color-surface); }
.grade-index-head, .learning-path-head, .section-top, .page--index .section-top, .page--home .subject-intro {
  padding: var(--space-sm) var(--space-md); border: 0; border-bottom: 2px solid var(--color-accent);
  border-radius: 0; background: var(--color-accent-soft); color: var(--color-accent);
}
.grade-index h2, .learning-path h2, .section-top h2, .page--home .subject-intro h2 { font-size: var(--text-md); }
.grade-index .cards { padding: var(--space-md); gap: var(--space-sm); }
.grade-index .card, .grade-index .card:nth-child(n) { background: var(--color-surface); border: 1px solid var(--color-rule); box-shadow: none; }
.grade-index .card-mark { background: var(--color-accent-soft); color: var(--color-accent); }
.learning-path { margin-block: var(--space-lg); padding: var(--space-md); }
.learning-path ol { padding: var(--space-sm) 0; }
.learning-step { background: var(--color-accent-soft); color: var(--color-accent); }
.card-plan { background: var(--color-paper-2); border-color: var(--color-rule); }
.chapter { background: var(--color-accent-soft); color: var(--color-accent); border-top: 0; border-bottom: 2px solid var(--color-accent); font-size: var(--text-md); }
.row, .page--index .unit { padding: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-md); box-shadow: none; background: var(--color-surface); }
.row .name, .unit h3 { font-size: var(--text-base); color: var(--color-ink); }
.unit .goal { font-size: var(--text-sm); }
.btn, .bundle, .ver, .ver a { border-radius: var(--radius-md); box-shadow: none; }
.btn.primary, .ver a.p, .learning-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn.video-link, .ver a.v { background: var(--color-pencil-soft); color: var(--color-pencil); border-color: var(--color-rule); }
.bundle { border-color: var(--color-rule-dark); color: var(--color-accent); background: var(--color-paper); }
.field input, .filters input, .filters select { border: 1px solid var(--color-rule-dark); background: var(--color-surface); }
.page--home .home-rail { gap: var(--space-md); }
.page--home .grade-picker { padding: var(--space-md); }
.page--home .grade-row { padding-block: var(--space-xs); }
.page--home .grade-row strong { font-size: var(--text-sm); }
.page--home .grade-row strong span { font-size: var(--text-base); color: var(--color-accent); }
.page--home .grade-link { border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-surface); }
.page--home .subject-grid { margin-top: var(--space-sm); gap: var(--space-sm); }
.page--home .subject-card { grid-template-columns: minmax(7rem, .5fr) minmax(0, 1.5fr); padding: var(--space-md); gap: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-md); box-shadow: none; background: var(--color-surface); }
.page--home .subject-card h2 { font-size: var(--text-md); margin: 0; }
.page--home .subject-card > p { margin: 0; min-height: 0; }
.page--home .subject-card-actions { grid-column: 1 / -1; margin-top: var(--space-xs); }
.page--home .subject-card-actions > a { font-size: var(--text-sm); border: 1px solid var(--color-rule); background: var(--color-paper); }
.page--home .subject-card-actions > .primary { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-rule); }
.page--home .learning-flow { padding: var(--space-md); margin-block: var(--space-lg); background: var(--color-surface); box-shadow: none; }
.page--home .learning-flow .tile-heading { margin: 0; }
.page--home .learning-flow li { border: 0; }
.page--home .learning-flow li > span { background: var(--color-accent-soft); }
.site-footer, .page--index .footer, .page--home .home-footer { margin-top: var(--space-xl); border: 0; border-top: 2px solid var(--color-accent); border-radius: 0; background: var(--color-paper); box-shadow: none; }
.footer-subjects a, .page--home .home-footer a { background: var(--color-accent-soft); }
.portal-nav { border: 0; border-bottom: 2px solid var(--color-accent); background: var(--color-surface); box-shadow: none; border-radius: 0; }
.portal-brand__seal { background: var(--color-accent); color: var(--color-accent-ink); border: 0; }
.portal-hero { grid-template-columns: minmax(0, 1.3fr) minmax(12rem, .7fr); padding: var(--space-lg); margin-block: var(--space-lg); border: 1px solid var(--color-rule); background: var(--color-surface); }
.portal-hero h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--color-accent); line-height: 1.4; }
.portal-hero__copy { gap: var(--space-sm); }
.portal-hero__copy > p { font-size: var(--text-sm); }
.school-path { border: 1px solid var(--color-rule); background: var(--color-surface); }
.school-path .path-body { padding: var(--space-lg); }
.school-path .path-label { background: var(--color-accent-soft); color: var(--color-accent); }
.school-path .path-label strong, .school-path .path-label small { color: var(--color-accent); }
.path-label > span { display: none; }
.path-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.map-heading { display: block; }
.map-heading > p { display: none; }
.map-heading h2 { font-size: var(--text-lg); color: var(--color-accent); }
@media (min-width: 60rem) {
  .content-grid, .page--index .wrap, .page--home .wrap { grid-template-columns: 15rem minmax(0, 1fr); }
}
@media (max-width: 60rem) {
  .page--home .home-primary { grid-column: auto; grid-row: auto; }
  .hero.hero--text, .page--index .hero.hero--text, .page--home .home-hero { grid-template-columns: minmax(0, 1fr) minmax(10rem, .65fr); }
}
@media (max-width: 40rem) {
  .school-path .path-body { padding: var(--space-md); }
  .wrap, .page--home .wrap, .portal-shell { padding-inline: var(--space-sm); }
  .site-head .wordmark::before { display: none; }
  .site-head .head-link { padding-inline: var(--space-xs); font-size: var(--text-xs); }
  .site-head .wordmark { font-size: var(--text-base); }
  .school-strip .mast-line, .school-switch a { font-size: var(--text-xs); }
  .subject-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .subject-nav > span:first-child { display: none; }
  .hero.hero--text, .page--index .hero.hero--text, .page--home .home-hero, .portal-hero { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); gap: var(--space-xs); }
  .library-illustration { width: min(100%, 17rem); height: 8rem; justify-self: center; }
  .hero.hero--text h1, .page--index .hero h1, .page--home .home-hero h1, .page--index .heading h1 { font-size: 1.5rem; }
  .page--index .tabs { flex-wrap: wrap; overflow: visible; }
  .page--home .subject-card { grid-template-columns: minmax(0, 1fr); }
  .page--home .subject-card-actions { grid-column: auto; }
  .page--index .unit { padding: var(--space-sm); }
}
@media (hover: hover) {
  .school-switch a:hover, .grades a:hover, .tabs a:hover, .page--home .grade-link:hover, .page--home .subject-card-actions > a:hover { background: var(--color-accent-soft); color: var(--color-accent); }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
@media print { .library-illustration { display: none; } }