/* Kalam's front door and navigation; existing lesson/content styles remain. */
.skip-link { position: fixed; top: -80px; left: 12px; z-index: 100; padding: 12px 18px; color: white; background: #0d4e4d; border-radius: 8px; }
.skip-link:focus { top: 10px; }
.kalam-header { display: grid; grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr); gap: 18px; padding: 13px clamp(18px, 3vw, 44px); }
.app-header .kalam-brand { display: flex; justify-content: flex-start; gap: 10px; padding: 0; border: 0; background: none; }
.kalam-brand img { flex: 0 0 42px; }
.app-header .kalam-brand span { text-transform: none; }
.app-header .kalam-brand strong { color: #0d4e4d; font-family: Georgia, serif; font-size: 30px; font-weight: 500; margin: 0; }
.kalam-brand small { display: block; color: #67746d; font-size: 10px; font-weight: 500; margin-top: 3px; letter-spacing: .035em; }
.app-header .hub-nav { gap: 3px; flex-wrap: nowrap; }
.app-header .hub-nav a { border: 0; background: transparent; border-radius: 6px; padding: 0 14px; font-size: 14px; font-weight: 650; color: #53645e; }
.app-header .hub-nav a:hover { background: #edf0e8; color: #0d4e4d; }
.app-header .hub-nav a[aria-current] { color: #0d4e4d; background: #e3ece2; box-shadow: inset 0 -2px #0d4e4d; }
.header-tools { display: flex; gap: 7px; justify-content: flex-end; align-items: center; }
.app-header .header-tools > * { font-size: 12px; padding: 0 11px; }
.app-header .preferences-button { width: 44px; padding: 0; background: transparent; border-color: transparent; }
.kalam-header .grownups-button { border-color: #d4c5a4 !important; background: #faf4e6 !important; font-weight: 600; }
.section-trail { display: flex; gap: 9px; align-items: center; max-width: 1180px; margin: 0 auto 22px; min-height: 28px; font-size: 12px; color: #6d7871; flex-wrap: wrap; }
.section-trail a { color: #235954; text-underline-offset: 4px; padding: 7px 0; }
.eyebrow { display: block; margin: 0 0 13px; color: #8c6935; font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.home-intro { text-align: center; max-width: 730px; margin: 16px auto 35px; }
.home-intro h1 { color: #183f37; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 4.6vw, 62px); font-weight: 400; letter-spacing: -.045em; line-height: 1.09; margin: 0 0 18px; }
.home-intro h1 em { color: #6a805f; font-weight: 400; }
.home-intro > p:last-child { color: #627168; font-size: 15px; line-height: 1.7; }
.home-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.home-door { position: relative; isolation: isolate; display: flex; min-height: 300px; padding: 32px; border: 1px solid #d9ddc9; border-radius: 16px; overflow: hidden; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.home-door:hover { transform: translateY(-3px); box-shadow: 0 12px 24px #17372b12; }
.learn-door { color: #243e32; background: #f7f4e6; }
.door-copy { position: relative; z-index: 2; max-width: 78%; }
.home-door h2 { color: inherit; font-family: Georgia, serif; font-size: clamp(29px, 3vw, 38px); font-weight: 400; line-height: 1.13; letter-spacing: -.025em; margin: 0 0 15px; }
.home-door p { max-width: 300px; color: #4e6354; font-size: 14px; line-height: 1.65; }
.door-action { display: inline-flex; gap: 25px; align-items: center; min-height: 44px; font-size: 13px; font-weight: 700; margin-top: 14px; border-bottom: 1px solid #8caa89; }
.door-action b { font-size: 20px; }
.door-image { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: .44; mask-image: linear-gradient(90deg, transparent 20%, #000 100%); }
.explore-door { background: #123f38; color: #fcf4df; border-color: #123f38; }
.explore-door .eyebrow { color: #d5bc81; }
.explore-door p { color: #d0dfd1; }
.explore-door .door-action { border-color: #6a8a6d; }
.door-pattern { position: absolute; width: 280px; right: -110px; top: 25px; color: #bda779; opacity: .32; z-index: -1; }
.home-return { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 26px; margin-top: 20px; background: #e9eee2; border: 1px solid #cedac5; border-radius: 12px; }
.home-return strong, .home-return span { display: block; }
.home-return strong { color: #234b3a; margin-bottom: 5px; }
.home-return span:not(.eyebrow) { color: #637061; font-size: 13px; }
.home-return .eyebrow { margin-bottom: 7px; }
.home-personalize { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 26px 0; margin-bottom: 18px; border-bottom: 1px solid #d8dece; }
.home-personalize h2 { color: #264c3c; font-size: 16px; font-weight: 650; margin: 0 0 6px; }
.home-personalize p { font-size: 13px; color: #637061; margin: 0; line-height: 1.6; }
.shell-primary, .shell-secondary { display: inline-flex; justify-content: center; align-items: center; gap: 14px; min-height: 44px; border-radius: 7px; padding: 11px 18px; font: inherit; font-size: 13px; font-weight: 650; line-height: 1.4; text-decoration: none; cursor: pointer; white-space: nowrap; }
.shell-primary { color: #fff9e8; background: #0d4e4d; border: 1px solid #0d4e4d; }
.shell-secondary { color: #315145; background: #fffdf4; border: 1px solid #cad3bf; }
.shell-primary:hover { background: #17615b; }
.shell-secondary:hover { background: #f1f4e9; }
.home-section-heading { margin: 22px 0 20px; }
.home-section-heading h2, .explore-starts h2 { font-family: Georgia, serif; font-weight: 400; font-size: 25px; color: #264c3c; margin: 0 0 7px; }
.home-section-heading p { margin: 0; font-size: 13px; color: #667666; }
.hub-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hub-tile { position: relative; display: flex; flex-direction: column; padding: 22px 18px 42px; border: 1px solid #d7ddce; border-radius: 11px; color: #344e3e; background: #fbfbf1; text-decoration: none; transition: background .2s; }
.hub-tile:hover { background: #e8eee0; }
.hub-tile > strong { font-family: Georgia, serif; font-size: 25px; font-weight: 400; margin: 14px 0 9px; }
.hub-tile > span:last-of-type { font-size: 12px; line-height: 1.7; color: #627061; }
.hub-number { font-size: 10px; letter-spacing: .1em; color: #8b7d5d; }
.hub-tile > b { position: absolute; right: 18px; bottom: 15px; color: #74826b; }
.shell-landing { padding: 18px 0 30px; }
.shell-landing h1 { font-family: Georgia, serif; color: #204a3c; font-size: clamp(37px, 4vw, 54px); font-weight: 400; letter-spacing: -.035em; margin: 0 0 16px; line-height: 1.12; }
.shell-intro { font-size: 16px; color: #687669; max-width: 630px; line-height: 1.7; margin: 0 0 32px; }
.section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.section-card { display: block; position: relative; padding: 26px 26px 50px; background: #fffdf4; border: 1px solid #d8dfce; border-radius: 12px; text-decoration: none; color: #244939; transition: border-color .2s, background .2s; }
.section-card:hover { border-color: #829778; background: #f4f6eb; }
.section-number { color: #8c866c; font-size: 11px; }
.section-card h2 { font-family: Georgia, serif; font-size: 26px; font-weight: 400; margin: 16px 0 12px; line-height: 1.15; }
.section-card p { color: #677465; font-size: 14px; line-height: 1.7; margin: 0; }
.section-arrow { position: absolute; bottom: 20px; right: 24px; }
.hub-personal { padding: 20px 24px; background: #e8eddf; border-left: 3px solid #658361; border-radius: 3px 10px 10px 3px; margin-bottom: 26px; }
.hub-personal p { font-size: 14px; color: #586951; line-height: 1.6; }
.hub-personal a { color: #245c48; text-underline-offset: 4px; }
.hub-personal > a { display: inline-block; padding: 7px 16px 7px 0; font-weight: 650; }
.explore-starts { margin-top: 35px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
.explore-starts h2 { grid-column: 1/-1; margin-bottom: 14px; }
.explore-starts a { padding: 16px 0; border-bottom: 1px solid #d9dece; color: #365540; font-size: 14px; text-decoration: none; display: flex; justify-content: space-between; gap: 12px; }
.preferences-dialog { width: min(620px, calc(100% - 28px)); max-height: calc(100dvh - 38px); padding: 28px; border: 1px solid #c8d3bd; border-radius: 15px; background: #fcfbf1; color: #2d4638; box-shadow: 0 25px 100px #102f3860; overflow: auto; }
.preferences-dialog::backdrop { background: #17393080; }
.preferences-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.preferences-heading .eyebrow { margin: 0; }
.preferences-heading button { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: #345641; font-size: 28px; cursor: pointer; }
.preferences-dialog h2 { color: #264c3c; font: 400 34px/1.2 Georgia, serif; margin: 10px 0 12px; }
.preferences-dialog > form > p { font-size: 14px; line-height: 1.65; color: #61705d; }
.preferences-dialog fieldset { border: 0; padding: 0; margin: 26px 0; min-width: 0; }
.preferences-dialog legend { font-size: 14px; font-weight: 650; margin-bottom: 13px; }
.audience-options { display: flex; gap: 8px; }
.audience-options label { display: flex; gap: 8px; flex: 1; align-items: center; padding: 12px 8px; min-height: 44px; border: 1px solid #d1dbc5; border-radius: 7px; background: #fffdf7; font-size: 13px; cursor: pointer; }
.audience-options label:has(:checked) { border-color: #347458; background: #e7eedd; }
.preferences-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.preferences-fields label { font-size: 13px; font-weight: 600; min-width: 0; }
.preferences-fields select { display: block; width: 100%; min-height: 46px; margin-top: 10px; border: 1px solid #bfcdb3; border-radius: 7px; padding: 10px; color: #294737; background: #fffef8; font: inherit; font-size: 16px; }
.preferences-fields small { display: block; margin-top: 9px; font-size: 12px; font-weight: 400; line-height: 1.6; color: #6c7764; }
.optional { font-weight: 400; color: #74816d; font-size: 12px; }
.preference-note { font-size: 12px; line-height: 1.65; color: #6c7864; margin: 10px 0; }
.preferences-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; border-top: 1px solid #dce1d2; padding-top: 20px; }
.text-button { min-height: 44px; border: 0; background: transparent; color: #48633d; text-decoration: underline; text-underline-offset: 3px; font: inherit; font-size: 12px; cursor: pointer; }
.interactive-shell :focus-visible { outline: 3px solid #b78832; outline-offset: 4px; }
.shell-landing h1:focus, .home-intro h1:focus, #mainContent:focus { outline: none; }
@media (max-width: 1050px) {
  .kalam-header { grid-template-columns: 1fr auto; gap: 12px; }
  .app-header .hub-nav { grid-column: 1/-1; grid-row: 2; justify-content: space-between; }
  .app-header .hub-nav a { flex: 1; }
  .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kalam-header { position: sticky; padding: 10px 16px 8px; gap: 9px; }
  .app-header .kalam-brand strong { font-size: 27px; }
  .kalam-brand small { font-size: 9px; }
  .app-header .hub-nav { gap: 2px; }
  .app-header .hub-nav a { padding: 0 6px; min-height: 40px; font-size: 13px; }
  .app-header .header-tools > * { padding: 0 9px; font-size: 11px; }
  .app-header .header-tools .instructor-only { position: fixed; right: 16px; bottom: 18px; z-index: 30; background: #fff6dc; box-shadow: 0 3px 16px #183f3733; }
  .app-main { padding: 20px 16px; }
  .home-intro { margin: 10px auto 24px; }
  .home-intro h1 { font-size: clamp(29px, 8.4vw, 36px); }
  .home-intro > p:last-child { font-size: 14px; }
  .home-doors { grid-template-columns: 1fr; gap: 14px; }
  .home-door { min-height: 230px; padding: 24px; }
  .home-door h2 { color: inherit; font-size: 30px; margin-bottom: 10px; }
  .home-door .door-action { margin-top: 6px; }
  .door-copy { max-width: 92%; }
  .home-door p { max-width: 260px; font-size: 13px; margin: 8px 0; line-height: 1.55; }
  .home-return { flex-direction: column; align-items: stretch; padding: 22px; }
  .home-personalize { gap: 15px; align-items: flex-start; flex-direction: column; }
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hub-grid .hub-tile:last-child { grid-column: 1/-1; }
  .hub-tile { padding: 20px 17px 39px; }
  .section-grid { grid-template-columns: 1fr; gap: 12px; }
  .section-card { padding: 22px 23px 44px; }
  .section-card h2 { font-size: 27px; }
  .section-trail { margin-bottom: 16px; }
  .explore-starts { grid-template-columns: 1fr; }
  .preferences-dialog { padding: 18px; }
  .preferences-dialog h2 { font-size: 30px; }
  .preferences-fields { grid-template-columns: 1fr; }
  .audience-options label { padding: 10px 6px; font-size: 12px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .home-door, .section-card, .hub-tile { transition: none; } .home-door:hover { transform: none; } }
@media print { .kalam-header, .section-trail, .skip-link, .preferences-dialog { display: none !important; } }
/* Persian study tools keep long readings legible on the Reading Room's ink. */
.reader-about { margin: 1rem 0 1.5rem; color: #d2d5d0; }
.reader-about summary { cursor: pointer; padding: .8rem 0; color: #dfc28d; }
.reader-about p { line-height: 1.75; }
.reader-jump-label { display: grid; gap: .55rem; color: #dfc28d; font-size: .88rem; }
.reader-jump { width: 100%; min-width: 0; min-height: 48px; border: 1px solid #647772; border-radius: 8px; padding: .7rem; color: #f5f0e8; background: #203c39; font: inherit; }
.reader-jump option, .reader-jump optgroup { color: #f5f0e8; background: #203c39; }
.reader-load-status { margin: .75rem 0; color: #d2d5d0; }
.reader-passage-title { color: #dfc28d; font-size: 1.55rem; line-height: 1.35; margin-top: 1.75rem; scroll-margin-top: 140px; }
.reader-illustration { margin: 1.5rem 0 1.25rem; overflow: hidden; border-radius: 12px; background: #132521; }
.reader-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.reader-page .reader-title { color: #f5e9ce; }
.reader-page .reader-note, .reader-page .story-counter, .reader-page .reader-progress { color: #c5cfc8; }
.reader-page .reader-note { line-height: 1.7; font-size: .88rem; }
.reader-source { color: #c5cec9; font-size: .8rem; line-height: 1.65; }
.reader-source a { color: #f0d7a3; text-underline-offset: 3px; }
.reader-line .poem-line-text { min-width: 0; }
.reader-line .reader-original { line-height: 1.9; }
.reader-line .word-toggle { color: #f0d7a3; border-color: #647772; background: #223b36; min-height: 44px; padding: .5rem .85rem; font-size: .82rem; }
.reader-line.prose-line .reader-original { text-align: right; }
.reader-line.prose-line .reader-translit, .reader-line.prose-line .reader-translation { text-align: left; line-height: 1.7; }
.reader-line .word-popout { padding: 1rem .4rem; gap: .6rem; }
.reader-line .word-chip { color: #153d37; background: #fcf7e9; border-color: #d5c9ad; }
.reader-line .word-chip b { color: #153d37; }
.reader-line .word-chip i, .reader-line .word-chip small, .reader-line .word-chip u { color: #38564f; }
.persian-listening { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.2rem 0; padding: .8rem 0; border-top: 1px solid #9b946955; border-bottom: 1px solid #9b946955; }
.persian-listening button, .persian-listening select, .reader-retry { min-height: 44px; padding: .6rem .85rem; border: 1px solid #a09474; border-radius: 8px; font: inherit; color: #173e36; background: #fcf7e9; cursor: pointer; }
.persian-listening button:disabled { opacity: .5; cursor: default; }
.persian-listening label { display: flex; align-items: center; gap: .45rem; font-size: .85rem; }
.persian-audio-status { flex-basis: 100%; font-size: .8rem; line-height: 1.5; }
.reader-page .persian-listening { color: #e9e1cf; }
.reader-passage .persian-listening { position: sticky; top: 88px; z-index: 4; background: #14241f; padding: .8rem; border-radius: 8px; }
.is-speaking { outline: 2px solid #b49451; outline-offset: 5px; border-radius: 6px; }
.reader-page .reader-line { scroll-margin-top: 130px; }
@media (max-width: 600px) {
  .reader-page { padding-left: 1rem; padding-right: 1rem; }
  .reader-page .lesson-view-top { flex-wrap: wrap; }
  .reader-page .reader-line { grid-template-columns: 38px minmax(0, 1fr); gap: .65rem; }
  .reader-page .reader-original { font-size: 1.5rem; }
  .reader-page .reader-passage-title { font-size: 1.4rem; }
  .reader-passage .persian-listening { top: 116px; }
  .persian-listening { gap: .5rem; }
}

/* Illustrated destinations inside each of the five hubs. */
.hub-landing .section-card-illustrated { padding: 0; overflow: hidden; }
.section-card-art { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; background: #ede9db; border-bottom: 1px solid #d8dfce; }
.section-card-copy { position: relative; padding: 22px 24px 50px; }
.section-card-copy h2 { margin-top: 12px; }
.section-card-illustrated:focus-visible { outline: 3px solid #27604b; outline-offset: 4px; }
@media (max-width: 600px) {
  .section-card-copy { padding: 20px 22px 46px; }
}