/* School-grade pathway. Layered on the existing lesson stylesheet.
   Does not replace kml_style.css. */

/* Lesson heroes use the chosen study image at its own proportions. */
.sg-lesson .lesson-art {
  display: flex;
  justify-content: center;
}
.sg-lesson .lesson-art img {
  width: 100%;
  max-width: min(100%, 32rem);
  height: auto;
  object-fit: contain;
}

.school-title {
  margin: 0.15rem 1rem 0.3rem;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.45rem, 4.4vw, 1.9rem);
  font-weight: 500;
  line-height: 1.45;
}

.school-kicker,
.school-range {
  text-align: center;
  color: var(--nav-ink);
  letter-spacing: 0.04em;
}

.school-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.school-range {
  margin: 0.35rem auto 1.2rem;
  font-family: "Noto Serif JP", serif;
  font-size: 1.35rem;
}

.kanken-en {
  display: none;
}

html[data-kanken-lang="en"] .kanken-en {
  display: block;
  max-width: 36rem;
  margin: 0.4rem auto 0.8rem;
  padding: 0 1rem;
  text-align: center;
  color: #3d3424;
  line-height: 1.6;
}

html[data-kanken-lang="en"] .kanken-en-links a {
  color: #6b5420;
}

.school-review {
  max-width: var(--content-max);
  margin: 0 auto 2.5rem;
  text-align: center;
}

.school-review h2 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--page-ink);
}

.school-review p {
  margin: 0 auto 1rem;
  max-width: 36rem;
  color: var(--nav-ink);
  line-height: 1.55;
}

.school-review .cta {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.school-review .cta .btn-compounds {
  flex: 1 1 12rem;
  max-width: 16rem;
}

.school-footer-note {
  max-width: var(--content-max);
  margin: 0 auto 0.4rem;
  text-align: center;
  color: rgba(216, 212, 203, 0.62);
  font-size: 0.85rem;
}

.sg-disclaimer {
  max-width: 34rem;
  margin: 0.8rem auto 2rem;
  padding: 0 1.1rem;
  text-align: center;
  color: rgba(216, 212, 203, 0.48);
  font-size: 0.72rem;
  line-height: 1.7;
}

.kanji-heisig-keyword {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(0, 0, 0, 0.46);
}

.kanji-build-heading,
.school-compounds-heading {
  margin: 1.35rem 0 0.15rem;
  font-family: "Noto Serif JP", serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #5c564c;
}

.school-compounds {
  margin-top: 0.4rem;
  text-align: left;
}

.kanji-entry .compounds-sheet {
  max-width: none;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.kanji-entry .compound-group {
  display: none;
}

.kanji-entry .compound-row:first-child {
  border-top: 1px solid rgba(42, 38, 31, 0.1);
}

.school-doors {
  max-width: 40rem;
  margin: 0 auto 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.school-door {
  display: block;
  padding: 1.15rem 1rem 1.25rem;
  border-radius: 12px;
  background: var(--card-bg);
  color: #2a261f;
  text-decoration: none;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

.school-door img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(201, 164, 88, 0.18),
    0 12px 36px rgba(0, 0, 0, 0.45);
}

.school-door-kicker,
.school-door-title,
.school-door-kanji {
  display: block;
  text-align: center;
}

.school-door-kicker {
  margin-top: 0;
  color: #6b5424;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}

.school-door-title {
  margin-top: 0.2rem;
  font-family: "Noto Serif JP", serif;
  font-size: 1.45rem;
  color: #1f1e1b;
}

.school-door-kanji {
  margin-top: 0.35rem;
  font-family: "Noto Serif JP", serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #3c3830;
}

.school-door:hover img,
.school-door:focus-visible img {
  filter: brightness(1.06);
}

.school-door:focus-visible {
  outline: 2px solid rgba(201, 164, 88, 0.7);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Lesson 1 simplified cards. Lessons 2–4 keep .kanji-entry. */

.sg-card,
.sg-sheet {
  max-width: 40rem;
  margin: 0 auto 1.35rem;
  background: var(--card-bg);
  color: #2a261f;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 1.15rem 1rem 1.3rem;
  scroll-margin-top: 4.6rem;
}

.sg-kanji-link {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.sg-kanji-link:focus-visible,
.sg-panel:focus-visible,
.sg-kml-link:focus-visible,
.sg-back:focus-visible {
  outline: 2px solid rgba(138, 107, 46, 0.85);
  outline-offset: 3px;
}

.sg-kanji {
  display: block;
  font-family: "Yuji Syuku", "Noto Serif JP", serif;
  font-size: clamp(4.6rem, 26vw, 7.4rem);
  font-weight: 400;
  line-height: 1;
  color: #1f1e1b;
}

.sg-meaning {
  margin: 0.4rem 0 0;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.3;
}

.sg-heisig {
  margin: 0.2rem 0 0;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.48);
}

.sg-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin: 1.05rem 0 0.85rem;
}

.sg-panels-single {
  grid-template-columns: minmax(0, 14rem);
  justify-content: center;
}

.sg-to-words {
  margin: 0.15rem 0 1rem;
  text-align: center;
}

.sg-to-words a {
  color: var(--nav-gold, #d7c08a);
  text-decoration: none;
  letter-spacing: 0.06em;
}

.sg-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 6.1rem;
  padding: 0.8rem 0.45rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(42, 38, 31, 0.12);
  text-decoration: none;
  color: inherit;
}

.sg-panel:hover {
  border-color: rgba(138, 107, 46, 0.45);
}

.sg-panel-label {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: #6d675e;
}

.sg-panel-yomi {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.12rem, 4.2vw, 1.55rem);
  line-height: 1.35;
  text-align: center;
}

.sg-facts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem 1.4rem;
  margin: 0.15rem 0 0.9rem;
  font-size: 1.08rem;
  text-align: center;
}

.sg-facts b {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
}

.sg-kml-link,
.sg-back {
  display: block;
  text-align: center;
  color: #6b5424;
  font-size: 1.02rem;
  text-decoration: none;
}

.sg-kml-link:hover,
.sg-back:hover {
  color: #3f3014;
}

.sg-readings .sg-kanji {
  color: var(--page-ink);
  text-align: center;
  margin-top: 0.2rem;
}

.sg-readings h1 {
  margin: 0.15rem 0 0.2rem;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.35rem, 4vw, 1.7rem);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.sg-read-block {
  scroll-margin-top: 1rem;
  margin-top: 0.8rem;
}

.sg-read-block h2 {
  margin: 0;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 1.25rem;
  font-weight: 500;
}

.sg-read-label {
  margin: 0.45rem 0 0.15rem;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.sg-words {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-words li {
  padding: 0.32rem 0.2rem 0.34rem;
  border-top: 1px solid rgba(42, 38, 31, 0.1);
}

.sg-word {
  margin: 0;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  line-height: 1.45;
}

.sg-word rt {
  font-size: 0.42em;
  font-weight: 400;
}

.sg-kana {
  display: none;
  margin: 0.15rem 0 0;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #5c564c;
}

html.furigana-off .sg-readings rt {
  display: none;
}

html.furigana-off .sg-readings:not(.sg-compiled) .sg-kana {
  display: block;
}

.sg-gap {
  margin: 0.4rem 0 0.2rem;
  text-align: center;
  color: #5c564c;
  line-height: 1.55;
}

.sg-readings .furigana-bar {
  margin: 0 auto 0.4rem;
  max-width: 40rem;
  text-align: center;
}

.sg-readings .furigana-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.2rem;
  border: 0;
  background: transparent;
  color: var(--nav-ink);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.sg-readings .furigana-mark {
  width: 0.72rem;
  height: 0.72rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
}

html:not(.furigana-off) .sg-readings .furigana-mark {
  background: currentColor;
}

.sg-entry {
  max-width: 40rem;
  margin: 0 auto 0.85rem;
  background: var(--card-bg);
  color: #2a261f;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 0.55rem 1rem 0.7rem;
  scroll-margin-top: 0.75rem;
}

.sg-lesson .anchor-list,
.sg-compiled .anchor-list {
  position: static;
  z-index: auto;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.sg-compiled .anchor-list {
  margin: 0.3rem auto 0.5rem;
  padding: 0.16rem 0.28rem;
  gap: 0.12rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
}

.sg-compiled .anchor-list a {
  font-size: 0.98rem;
  padding: 0.04rem 0.28rem;
}

.sg-compiled .sg-read-block {
  margin-top: 0;
  scroll-margin-top: 0.75rem;
}

.sg-entry-kanji {
  margin: 0.05rem 0 0.05rem;
  text-align: center;
  font-family: "Yuji Syuku", "Noto Serif JP", serif;
  font-size: clamp(4.8rem, 22vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
  color: #1f1e1b;
}

.sg-entry-back {
  display: block;
  margin: 0.05rem 0 0.35rem;
  text-align: center;
  color: rgba(107, 84, 36, 0.62);
  font-size: 0.82rem;
  text-decoration: none;
}

.sg-entry-back:hover {
  color: #3f3014;
}

.sg-side {
  margin: 0.15rem 0 0.05rem;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #6d675e;
}

.sg-read-bare {
  margin-bottom: 0.45rem;
}

.sg-compiled .sg-read-block + .sg-read-block {
  margin-top: 0.5rem;
  padding-top: 0.1rem;
  border-top: 1px solid rgba(42, 38, 31, 0.1);
}

.school-path {
  margin: 0.2rem auto 1.1rem;
  text-align: center;
  color: var(--nav-ink);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}

@media (max-width: 700px) {
  .sg-compiled .anchor-list,
  .sg-lesson .anchor-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    max-width: none;
  }

  .school-review .cta {
    flex-direction: column;
    align-items: center;
  }

  .school-review .cta .btn-compounds {
    flex: none;
    width: min(100%, 18rem);
  }
}

@media (max-width: 380px) {
  .sg-panels {
    grid-template-columns: 1fr;
  }

  .sg-panels-single {
    grid-template-columns: 1fr;
  }

  .sg-panel {
    min-height: 4.6rem;
  }
}

/* Approved study crops. The local Hero Picker replaces the block below.
   A school-grade hero uses that 16:9 crop only after the image is approved.
   Every other hero keeps its own proportions. */
/* BEGIN APPROVED STUDY CROPS */
/* Written by the local Hero Picker. Approved crops only. */
.sg-lesson .lesson-art img[src$="/ball.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/below.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/book.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/car.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/child.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/dog.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/early.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/eight.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/evening.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/eye.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/field.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/five.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/forest.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/four.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/gold.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/hand.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/hundred.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/king.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/large.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/left.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/letter.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/middle.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/moon.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/mouth.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/name.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/nine.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/one.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/previous.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/right.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/river.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/see.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/seven.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/shellfish.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/six.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/small.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/stone.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/study.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/sun.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/ten.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/thousand.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/three.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/town.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 18%;
}
.sg-lesson .lesson-art img[src$="/tree.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/two.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/up.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/village.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/water.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 100%;
}
.sg-lesson .lesson-art img[src$="/white.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/woman.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
.sg-lesson .lesson-art img[src$="/woods.jpg"] {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}
/* END APPROVED STUDY CROPS */