/* Crawlable reading guides share the course palette without changing activity layouts. */
.home-guides { margin-top: 52px; }
.guide-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-link-card { display: flex; align-items: flex-start; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); text-decoration: none; color: var(--ink); }
.guide-link-card:first-child { grid-column: 1 / -1; background: #e8eddf; }
.guide-link-card:hover { border-color: var(--forest); }
.guide-link-card > span:nth-child(2) { flex: 1; min-width: 0; }
.guide-link-card small { color: var(--forest); font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.guide-link-card h3 { margin: 7px 0; font-size: 18px; }
.guide-link-card p, .home-reading-note p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.guide-link-glyph { display: grid; place-items: center; flex: 0 0 58px; min-height: 62px; border-radius: 14px; background: var(--ivory); color: var(--forest); font-size: 28px; }
.home-reading-note { max-width: 760px; margin: 28px 0 0; }
.home-reading-note h3 { margin: 0 0 10px; }
.home-reading-note p + p { margin-top: 12px; }
.guide-header .public-header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 24px; padding: 14px 0 10px; }
.guide-language-control { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.guide-language-control select { min-width: 132px; max-width: 100%; min-height: 44px; padding: 8px 28px 8px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--forest); background: var(--paper); font: inherit; }
.guide-language-control select:focus-visible, .guide-listen:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.guide-course-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; color: var(--ink-soft); font-size: 12px; }
.guide-course-links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--forest); text-underline-offset: 3px; }
.reading-guide { width: min(980px, calc(100% - 48px)); margin: auto; padding: 32px 0 60px; }
.reading-guide .breadcrumbs { flex-wrap: wrap; }
.guide-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 48px 0 40px; }
.guide-hero > div { max-width: 680px; }
.guide-hero h1 { margin: 14px 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(40px, 6vw, 68px); font-weight: 500; line-height: 1.05; letter-spacing: -.04em; }
.guide-hero p { max-width: 580px; font-size: 19px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 24px; }
.guide-hero-glyph { display: grid; place-items: center; flex: 0 0 180px; height: 190px; padding: 16px; background: var(--forest); color: var(--ivory); border-radius: 70px 70px 70px 16px; font-size: 65px; transform: rotate(-5deg); }
.guide-toc { display: flex; flex-wrap: wrap; gap: 12px 22px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.guide-toc strong { flex: 0 0 100%; font-size: 10px; letter-spacing: .09em; color: var(--forest); }
.reading-guide a:not(.button), .missing-page a:not(.button) { color: var(--forest); text-underline-offset: 4px; }
.guide-toc a { font-size: 13px; line-height: 1.6; }
.guide-audio-status { min-height: 44px; margin: 14px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.guide-section { margin: 28px 0 42px; scroll-margin-top: 155px; }
.guide-section h2, .guide-related h2, .guide-practice h2 { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(26px, 4vw, 36px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.guide-section > p, .guide-section > ol, .guide-note { max-width: 760px; color: var(--ink-soft); font-size: 16px; line-height: 1.85; }
.guide-section li + li { margin-top: 7px; }
.guide-chart { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: 24px 0; gap: 12px; list-style: none; }
.guide-chart .guide-letter { margin: 0; display: flex; min-width: 0; align-items: center; flex-direction: column; padding: 22px 12px 12px; border: 1px solid var(--line); background: var(--paper); border-radius: 16px; text-align: center; }
.guide-glyph { display: block; color: var(--forest); font-size: 44px; line-height: 1.8; }
.guide-letter > strong { font-size: 16px; }
.guide-hint, .guide-example { font-size: 13px; color: var(--ink-soft); line-height: 1.7; margin: 7px 0 12px; }
.guide-example { padding-top: 10px; border-top: 1px solid var(--line); }
.guide-example [lang] { font-size: 19px; color: var(--ink); }
.guide-listen { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; gap: 5px; min-width: 44px; min-height: 44px; padding: 8px 12px; background: #edf1e6; border: 1px solid transparent; border-radius: 10px; text-decoration: none; font-size: 12px; font-weight: 700; }
.guide-letter .guide-listen { margin-top: auto; }
.guide-audio-pending { display: inline-block; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.guide-letter .guide-audio-pending { margin-top: auto; padding: 10px 0; }
.guide-listen:hover { background: #dee8d6; border-color: var(--forest); }
.guide-family-section { margin: 32px 0; }
.guide-family-section h3 { margin: 0 0 6px; font-size: 19px; }
.guide-family-section > p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.guide-family { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 14px 0; }
.guide-family-tamil { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.guide-family .guide-listen { margin-top: 12px; }
.sound-pattern { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 0; list-style-position: inside; }
.guide-section .sound-pattern { max-width: none; font-size: 13px; }
.guide-section .sound-pattern li { margin: 0; padding: 12px; border-radius: 10px; background: #e8eddf; }
.guide-table-wrap { margin-top: 24px; border: 1px solid var(--line); border-radius: 16px; overflow-x: auto; background: var(--paper); }
.guide-table { width: 100%; border-collapse: collapse; text-align: left; }
.guide-table caption { padding: 18px; text-align: left; color: var(--ink-soft); font-size: 14px; }
.guide-table th, .guide-table td { padding: 12px 20px; border-top: 1px solid var(--line); }
.guide-table thead { background: #e8eddf; font-size: 13px; }
.guide-table [lang] { font-size: 30px; color: var(--forest); font-weight: 400; }
.guide-table td:last-child { width: 35%; }
.guide-table td:last-child strong { display: inline-block; min-width: 42px; }
.guide-reading-table { min-width: 600px; }
.guide-reading-table th, .guide-reading-table td { vertical-align: top; }
.guide-reading-table td:nth-child(3) { width: 40%; font-size: 14px; line-height: 1.8; }
.guide-reading-table td:last-child { width: 145px; }
.guide-reading-table .guide-example { margin-bottom: 0; }
.guide-table-wrap:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.no-sign { font-size: 13px; color: var(--ink-soft); }
.guide-word-list { padding: 0; list-style: none; }
.guide-word-list .guide-word { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 28px; margin: 12px 0; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }
.guide-word .guide-glyph { font-size: 36px; }
.guide-word h3 { margin: 0 0 6px; font-size: 18px; }
.guide-word p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.guide-word-comparison { max-width: 760px; padding-left: 24px; color: var(--ink-soft); line-height: 1.85; }
.guide-word-comparison [lang] { color: var(--forest); font-size: 22px; }
.guide-practice { display: flex; align-items: center; gap: 32px; justify-content: space-between; margin: 44px 0; padding: 32px; background: #e8eddf; border-radius: 20px; }
.guide-practice h2 { margin: 10px 0; }
.guide-practice p { max-width: 500px; line-height: 1.7; color: var(--ink-soft); margin: 0; }
.guide-practice .button { flex-shrink: 0; }
.guide-related { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.guide-related h2 { width: 100%; margin-bottom: 4px; }
.guide-related a { font-size: 14px; }
.guide-source { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 36px; font-size: 12px; color: var(--ink-soft); line-height: 1.8; }
.missing-page { max-width: 660px; margin: 12vh auto; padding: 24px; }
.missing-page h1 { font-family: Georgia, serif; font-size: 44px; }
.missing-page p { line-height: 1.8; }
@media (min-width: 681px) and (max-width: 960px) {
  .guide-header .public-header-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .guide-header .public-nav { grid-column: 1; grid-row: 2; }
  .guide-header .guide-course-links { grid-column: 1 / -1; grid-row: 3; gap: 0 12px; }
  .guide-course-links > span { display: none; }
}
@media (max-width: 680px) {
  .guide-header { position: static; }
  .guide-header .public-header-inner { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .guide-language-control { justify-content: space-between; }
  .guide-language-control select { min-width: 164px; }
  .guide-course-links { justify-content: space-between; gap: 0 8px; }
  .guide-course-links > span { display: none; }
  .guide-link-grid { grid-template-columns: 1fr; }
  .guide-link-card { padding: 18px; gap: 12px; }
  .reading-guide { width: calc(100% - 32px); padding-top: 24px; }
  .guide-hero { padding: 32px 0; }
  .guide-hero-glyph { display: none; }
  .guide-hero p { font-size: 17px; }
  .guide-toc { padding: 16px; }
  .guide-chart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-family { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .guide-family-tamil { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .guide-family-tamil .guide-glyph { font-size: clamp(22px, 5.5vw, 34px); }
  .guide-family .guide-letter { border-radius: 10px; padding: 12px 2px 6px; }
  .guide-family .guide-glyph { font-size: clamp(26px, 7vw, 38px); }
  .guide-family .guide-letter > strong { font-size: 12px; }
  .guide-family .listen-label { display: none; }
  .sound-pattern { gap: 5px; }
  .guide-section .sound-pattern { font-size: 10px; line-height: 1.6; }
  .guide-section .sound-pattern li { padding: 8px 4px; overflow-wrap: anywhere; }
  .guide-table th, .guide-table td { padding: 10px 8px; }
  .guide-table th { font-size: 12px; }
  .guide-table td:last-child { width: 27%; }
  .guide-table td:last-child strong { display: block; margin-bottom: 4px; font-size: 13px; }
  .guide-table .listen-label { display: none; }
  .guide-word-list .guide-word { padding: 16px; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; }
  .guide-word .guide-glyph { font-size: 28px; }
  .guide-word > div:nth-child(2) { grid-column: 1; grid-row: 2; }
  .guide-word > .guide-listen { grid-column: 2; grid-row: 1 / 3; }
  .guide-practice { flex-direction: column; align-items: flex-start; padding: 24px; gap: 20px; }
  .guide-section { scroll-margin-top: 20px; }
}
@media print {
  .public-header, .guide-toc, .guide-audio-status, .guide-listen, .guide-practice, .guide-related, .site-footer { display: none; }
  .reading-guide { width: 100%; padding: 0; }
  .guide-hero { padding-top: 0; }
  .guide-hero-glyph { display: none; }
  .guide-chart .guide-letter, .guide-word, .guide-table tr { break-inside: avoid; }
}