/* Shared reading guide; layout supported by Chromium 67. */
@font-face { font-family: 'Reading UI'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); }
body.page-lohkat {
  --bg: #FFFFFF; --surface: #F3F0FA; --raised: #E9E2F4;
  --text: #302446; --text-2: #62596F; --muted: #62596F;
  --hair: #DBD3E8; --hair-2: #A99ABF;
  --accent: #66508B; --accent-ink: #FFFFFF; --accent-soft: #E9E2F4;
  --live: #145B4D; --bar: #FFFFFF;
  --body: 'Reading UI', 'Segoe UI', Arial, sans-serif;
  --head: 'Reading UI', 'Segoe UI', Arial, sans-serif;
  background: #FFFFFF; color: #302446;
}
.page-lohkat .topbar { position: relative; }
.page-lohkat .wrap { max-width: 1160px; }
.page-lohkat .menu-btn { min-height: 44px; }
.page-lohkat a { text-underline-offset: 3px; }
.page-lohkat .btn { line-height: 1.3; border-radius: 10px; }
.reading-opening { padding: 38px 0 44px; }
.reading-opening .crumb { margin-bottom: 28px; font-size: 14px; }
.reading-opening h1 { max-width: 900px; font-size: 38px; line-height: 1.12; letter-spacing: -.035em; }
.reading-intro { max-width: 750px; margin-top: 24px; color: #62596F; font-size: 18px; line-height: 1.65; }
.reading-jumps { margin-top: 20px; }
.reading-jumps a { display: inline-block; padding: 12px 0; margin-right: 28px; font-size: 15px; font-weight: 600; }
.reading-guide { background: #F3F0FA; padding: 42px 0; border-top: 1px solid #DBD3E8; border-bottom: 1px solid #DBD3E8; }
.reading-question h2 { font-size: 30px; line-height: 1.25; letter-spacing: -.025em; }
.reading-question p { margin-top: 20px; color: #62596F; line-height: 1.7; font-size: 15px; }
.reading-prompts { margin: 30px 0 0; padding: 0; list-style: none; counter-reset: prompt; }
.reading-prompts li { counter-increment: prompt; position: relative; padding: 0 0 24px 42px; margin-bottom: 24px; border-bottom: 1px solid #DBD3E8; }
.reading-prompts li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.reading-prompts li:before { content: counter(prompt); position: absolute; left: 0; top: -1px; color: #66508B; font-size: 24px; font-weight: 600; }
.reading-prompts h3 { font-size: 20px; line-height: 1.35; letter-spacing: -.015em; }
.reading-prompts p { margin-top: 10px; color: #62596F; line-height: 1.7; }
.reading-prompts a, .reading-boundaries a, .reading-pair a { color: #584077; }
.reading-app { padding: 48px 0; }
.reading-app-intro { max-width: 820px; }
.reading-app-intro h2 { font-size: 30px; line-height: 1.25; }
.reading-app-intro p { margin-top: 20px; color: #62596F; line-height: 1.75; }
.reading-gallery { margin-top: 32px; }
.reading-gallery figure { margin: 0 auto 32px; max-width: 310px; }
.reading-gallery figcaption { font-size: 14px; line-height: 1.6; margin-bottom: 18px; color: #62596F; }
.reading-gallery figcaption strong { display: block; color: #302446; font-size: 17px; line-height: 1.4; margin-bottom: 7px; }
.reading-gallery img { width: 100%; height: auto; border: 1px solid #DBD3E8; border-radius: 6px; }
.control-name { color: #302446; font-weight: 600; }
.reading-picture-note { margin-top: 8px; color: #62596F; font-size: 14px; line-height: 1.65; }
.reading-boundaries { margin-top: 32px; padding-top: 28px; border-top: 2px solid #DBD3E8; }
.reading-boundaries h3 { font-size: 20px; line-height: 1.4; }
.reading-boundaries p { margin-top: 12px; color: #62596F; font-size: 15px; line-height: 1.75; }
.reading-boundaries > div + div { margin-top: 28px; }
.reading-play { margin-top: 28px; }
.reading-related { padding: 0 0 32px; }
.reading-pair { max-width: 760px; font-size: 18px; line-height: 1.65; }
.reading-related .more { margin-top: 24px; font-size: 14px; line-height: 1.95; }
.reading-close { padding-bottom: 40px; }
.reading-close-box { padding: 28px; background: #F3F0FA; border-radius: 14px; }
.reading-close-box h2 { max-width: 700px; font-size: 27px; line-height: 1.3; }
.reading-close-box p { margin: 16px 0 20px; color: #62596F; }
.reading-close-box .btn { margin: 0 12px 12px 0; }
.page-lohkat .footer { border-top: 1px solid #DBD3E8; }
@media (min-width: 780px) {
  .reading-opening { padding: 48px 0 44px; }
  .reading-opening h1 { font-size: 58px; }
  .reading-spread { display: flex; align-items: flex-start; }
  .reading-question { width: 37%; padding-right: 52px; }
  .reading-question h2 { font-size: 32px; }
  .reading-prompts { width: 63%; margin-top: 0; }
  .reading-gallery { display: flex; justify-content: space-between; align-items: flex-start; }
  .reading-gallery figure { display: flex; flex-direction: column; width: 30%; max-width: 310px; margin: 0; }
  .reading-gallery figcaption { min-height: 120px; }
  .reading-boundaries { display: flex; align-items: flex-start; }
  .reading-boundaries > div { width: 53%; padding-right: 40px; }
  .reading-boundaries > div + div { width: 47%; padding-right: 0; margin-top: 0; padding-left: 30px; border-left: 1px solid #DBD3E8; }
}
@media (max-width: 779px) {
  .reading-close-box { padding: 24px; }
  .reading-close-box .btn { display: block; margin-right: 0; text-align: center; }
}