/* markslater.studio's one stylesheet: landing pages (home, kids, learn, work), the content
   pages beneath them (body.page-content) and the kids game (body.page-game).
   Built into site/learn/site.css by learnhub.build. */
:root {
  --paper: #f6f7f5;
  --ink: #1d2330;
  --muted: #5a6272;
  --rule: #c9d4de;
  --pencil: #c21f3a;
  --soft: #8b95a5;
  --marker: #f5c518;
  --kids-ink: #0e2a47;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.site { background: var(--paper); color: var(--ink); font-family: 'Literata', 'Zen Kaku Gothic New', serif; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
html[lang="ja"] body.site { font-family: 'Zen Kaku Gothic New', sans-serif; }
/* the practice phrase is English in both languages, so it is exempt from the switch.
   On content pages the Japanese beside the English is part of the teaching, so the
   switch reaches only the header and footer there. */
html[lang="en"] .site:not(.page-content) [lang="ja"], html[lang="ja"] .site:not(.page-content) [lang="en"]:not(.phrase),
html[lang="en"] .page-content :is(.site-head, .site-foot) [lang="ja"], html[lang="ja"] .page-content :is(.site-head, .site-foot) [lang="en"] { display: none; }
.site h1, .site h2, .site h3, .site p, .site figure { margin: 0; }
.site a { color: inherit; }
.site a:focus-visible, .site button:focus-visible { outline: 3px solid var(--pencil); outline-offset: 4px; }
.site .wrap { max-width: 1160px; margin: 0 auto; padding: 0 40px; }

/* shared header: the same lockup on every landing page, so a visitor who arrives from LINE or search still knows whose site it is */
.site-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-top: 30px; }
.site-head .name { text-decoration: none; line-height: 1; }
.site-head .name b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.site-head .name span { display: block; font-size: 15px; font-style: italic; color: var(--muted); margin-top: 8px; }
html[lang="ja"] .site-head .name span { font-style: normal; }
.site-nav { display: flex; align-items: baseline; gap: 22px; font-size: 15px; }
.site-nav a { text-decoration: none; color: var(--muted); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pencil); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.langs { display: flex; gap: 2px; margin-left: 8px; }
.langs button { font: inherit; font-size: 14px; background: none; border: 0; color: var(--muted); padding: 6px 8px; cursor: pointer; }
.langs button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pencil); text-underline-offset: 6px; text-decoration-thickness: 2px; }

.offer { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: end; padding: 72px 0 56px; }
.site h1 { font-size: clamp(40px, 5.4vw, 70px); line-height: 1.04; font-weight: 500; letter-spacing: -.025em; }
html[lang="ja"] .site h1 { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.45; letter-spacing: 0; font-weight: 700; word-break: auto-phrase; }
.lede { font-size: 19px; line-height: 1.6; max-width: 31em; }
.actions { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin-top: 26px; }
.site .primary { display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none; padding: 13px 20px; font-size: 16px; font-weight: 500; }
.site .textlink { font-size: 16px; text-underline-offset: 5px; }
.quiet { font-size: 14px; color: var(--muted); margin-top: 18px; max-width: 32em; }

/* the marked phrase: a one-line percussion staff, dots ride the beat line and words sit on the baseline */
.band { border-top: 2px solid var(--ink); padding: 48px 0 40px; }
.phrase { font-family: 'Literata', serif; display: flex; flex-wrap: wrap; align-items: flex-end; row-gap: 34px; padding-bottom: .42em; font-size: clamp(34px, 4.6vw, 58px); line-height: 1; letter-spacing: -.01em; }
.phrase .word, .phrase .gap, .phrase .link { border-bottom: 1px solid var(--rule); background: linear-gradient(var(--rule), var(--rule)) 0 .03em / 100% 1px no-repeat; }
.phrase .word { display: inline-flex; align-items: flex-end; position: relative; }
.phrase .gap, .phrase .link { align-self: stretch; }
.phrase .gap { width: .32em; }
.syl { position: relative; display: inline-block; padding: .62em 0 .08em; color: var(--soft); transition: color .12s; }
.syl.s { color: var(--ink); font-weight: 700; }
.syl::before { content: ""; position: absolute; left: 50%; top: 0; width: .13em; height: .13em; border-radius: 50%; background: var(--soft); transform: translateX(-50%); }
.syl.s::before { width: .28em; height: .28em; top: -.07em; background: var(--pencil); }
.syl.on { color: var(--pencil); }
.syl.on::before { transform: translateX(-50%) scale(1.35); }
.phrase .link { position: relative; width: .18em; }
.phrase .link::after { content: ""; position: absolute; left: -.22em; right: -.22em; bottom: -.24em; height: .22em; border: 2px solid var(--pencil); border-top: 0; border-radius: 0 0 .3em .3em; }
.reduce { position: absolute; left: -1em; right: -1em; top: 100%; margin-top: .5em; font-size: max(.3em, 13px); font-style: italic; font-weight: 400; text-align: center; color: var(--pencil); letter-spacing: 0; }
.under { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 44px; }
.note { font-size: 17px; color: var(--muted); max-width: 36em; }
.note b { color: var(--ink); font-weight: 500; }
.play { font: inherit; font-size: 16px; background: none; border: 2px solid var(--pencil); color: var(--ink); padding: 10px 18px; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; }
.play i { width: 0; height: 0; border-left: 10px solid var(--pencil); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

.site section.block { padding: 64px 0; border-top: 1px solid var(--rule); }
.site h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.2; font-weight: 500; letter-spacing: -.015em; }
html[lang="ja"] .site h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.5; font-weight: 700; letter-spacing: 0; }
.section-lede { color: var(--muted); margin-top: 12px; max-width: 34em; }

.site-foot { border-top: 2px solid var(--ink); padding: 28px 0 48px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 15px; color: var(--muted); }
.site-foot a { text-underline-offset: 4px; }

/* ---- Home ---- */
/* each entrance carries the rhythm of its own phrase, so the routes read as one system without becoming matching cards */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 34px; }
.door { display: flex; flex-direction: column; gap: 12px; padding: 6px 32px 8px; border-left: 1px solid var(--rule); text-decoration: none; }
.door:first-child { padding-left: 0; border-left: 0; }
.beats { display: flex; align-items: center; gap: 7px; height: 16px; }
.beats i { width: 6px; height: 6px; border-radius: 50%; background: var(--soft); }
.beats i.s { width: 13px; height: 13px; background: var(--pencil); }
.door .heard { font-size: 14px; font-style: italic; color: var(--muted); }
.door h3 { font-size: 28px; line-height: 1.15; font-weight: 500; letter-spacing: -.01em; margin-top: 6px; }
html[lang="ja"] .door h3 { font-size: 23px; font-weight: 700; letter-spacing: 0; }
.door p { font-size: 16px; color: var(--muted); max-width: 22em; }
.door .go { margin-top: auto; padding-top: 10px; font-size: 15px; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 5px; }
.door:hover h3 { text-decoration: underline; text-decoration-color: var(--pencil); text-underline-offset: 7px; text-decoration-thickness: 2px; }

.about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.about-text p { font-size: 17px; color: var(--muted); }
.about-text p + p { margin-top: 14px; }
.about-text h2 { margin-bottom: 18px; }
.about video { display: block; width: 100%; background: #000; }
.about figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

.record { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.record ol, .record ul { list-style: none; margin: 18px 0 0; padding: 0; }
.record li { display: grid; grid-template-columns: 9.5em 1fr; gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--rule); }
.record li:last-child { border-bottom: 1px solid var(--rule); }
.record .when { font-size: 14px; color: var(--muted); padding-top: 3px; }
.record .what b { display: block; font-weight: 500; }
.record .what span { display: block; font-size: 15px; color: var(--muted); }

.photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; }
.photos figure { margin: 0; }
.photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.photos figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.photos-note { font-size: 13px; color: var(--muted); margin-top: 16px; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact .routes { display: grid; gap: 22px; }
.contact .route { padding-top: 16px; border-top: 1px solid var(--rule); }
.contact .route p { font-size: 15px; color: var(--muted); margin: 6px 0 12px; }
.contact-email { margin-top: 18px; }
.contact .qr { width: 120px; height: 120px; margin-top: 12px; }

/* ---- Work ---- */
.rooms-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 34px; }
.rooms-intro figure { display: flex; gap: 18px; align-items: center; }
.rooms-intro img { width: 84px; height: 84px; object-fit: cover; }
.rooms-intro figcaption { font-size: 15px; color: var(--muted); }
.rooms { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.room { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 20px 0; border-top: 1px solid var(--rule); }
.need { font-size: 23px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
html[lang="ja"] .need { font-size: 19px; font-weight: 700; letter-spacing: 0; }
.been { font-size: 16px; color: var(--muted); line-height: 1.55; padding-left: 18px; border-left: 2px solid var(--pencil); }
.been b { color: var(--ink); font-weight: 500; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; font-size: 14px; font-style: italic; color: var(--muted); padding-bottom: 10px; }
html[lang="ja"] .cols { font-style: normal; }
.site section.close { border-top: 0; display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; }
.close h2 { max-width: 16em; }

/* ---- Learn ---- */
.site section.start { border-top: 0; }
.start { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--rule); }
.start p { color: var(--muted); margin-top: 10px; max-width: 30em; }
.start .primary { justify-self: start; }
.from-pack { font-size: 15px; text-underline-offset: 5px; }
.items { list-style: none; margin: 20px 0 0; padding: 0; }
.items a { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 16px 0; border-top: 1px solid var(--rule); text-decoration: none; }
.items li:last-child a { border-bottom: 1px solid var(--rule); }
.items b { font-size: 21px; font-weight: 500; line-height: 1.3; }
/* in a list the Japanese title sits beside the English, so the language switch leaves it visible */
html[lang="en"] .site .items [lang="ja"] { display: block; }
.items .ja { grid-column: 1; font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 14px; color: var(--muted); }
.items .lvl { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; }
.items a:hover b { text-decoration: underline; text-decoration-color: var(--pencil); text-underline-offset: 6px; }
.drop-note { color: var(--muted); margin-top: 10px; max-width: 34em; }
/* types, not item lists: each kind of material is one entrance with its count */
.kinds { display: grid; grid-template-columns: 1fr 1fr; margin-top: 26px; }
.kinds .tile { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 14px; padding: 4px 32px 8px; border-left: 1px solid var(--rule); text-decoration: none; }
.kinds .tile strong { grid-column: 1; grid-row: 1; }
.kinds .tile .count { grid-column: 2; grid-row: 1; }
.kinds .tile p { grid-column: 1 / -1; }
.kinds .tile:first-child { padding-left: 0; border-left: 0; }
.kinds .tile .count { font-size: 15px; color: var(--muted); }
.kinds .tile strong { font-size: 30px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
html[lang="ja"] .kinds .tile strong { font-size: 24px; font-weight: 700; letter-spacing: 0; }
.kinds .tile p { font-size: 16px; color: var(--muted); max-width: 24em; }
.kinds .tile:hover strong { text-decoration: underline; text-decoration-color: var(--pencil); text-underline-offset: 7px; text-decoration-thickness: 2px; }
.next-step { display: flex; justify-content: space-between; align-items: end; gap: 40px; flex-wrap: wrap; }
.next-step p { color: var(--muted); margin-top: 10px; max-width: 32em; }
.next-step .links { display: flex; gap: 14px 26px; flex-wrap: wrap; align-items: center; }

/* ---- Kids landing: the shared header with study C's voice, the phrase set the way it is sung ---- */
.kids-hero { display: grid; grid-template-columns: 1.35fr .8fr; gap: 56px; align-items: center; padding: 56px 0 60px; }
.kids-band { border: 0; padding: 0; }
.kids-band .phrase { font-family: 'Archivo', sans-serif; font-size: clamp(36px, 4.3vw, 60px); row-gap: 26px; }
.kids-band .phrase .word, .kids-band .phrase .gap { border: 0; background: none; }
.kids-band .syl { color: var(--kids-ink); font-variation-settings: 'wdth' 66, 'wght' 300; padding-top: .5em; }
.kids-band .syl.s { font-weight: inherit; font-variation-settings: 'wdth' 125, 'wght' 900; }
.kids-band .syl.s::before { background: var(--marker); width: .3em; height: .3em; }
.kids-band .syl.on { color: #c27c00; }
.kids-band .under { margin-top: 26px; justify-content: flex-start; }
.kids-band .play { border-color: var(--marker); background: var(--marker); color: var(--kids-ink); font-weight: 500; }
.kids-band .play i { border-left-color: var(--kids-ink); }
.kids-hero h1.kids-title { margin-top: 40px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
html[lang="ja"] .kids-hero h1.kids-title { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.55; }
.kids-hero .lede { margin-top: 16px; font-size: 18px; }
.kids-hero img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 30%; }
.kids-hero figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.games { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 26px; }
.game-entry .thumbs.letters span { display: grid; place-items: center; aspect-ratio: 1; border: 3px solid #bcc5dc; border-radius: 12px; background: #fff; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 44px); color: var(--kids-ink); }
.more-games { margin-top: 22px; color: var(--muted); max-width: 40em; }
.play-together { max-width: 640px; }
.game-entry { display: block; text-decoration: none; background: #fff; border: 4px solid var(--kids-ink); padding: 26px 28px 28px; }
.game-entry .thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.game-entry .thumbs img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.game-entry b { display: block; font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 26px; font-weight: 700; color: var(--kids-ink); }
.game-entry span { display: block; color: var(--muted); font-size: 16px; margin-top: 6px; }
.game-entry .go { display: inline-block; margin-top: 18px; background: var(--marker); color: var(--kids-ink); font-weight: 700; padding: 12px 22px; }
.game-entry:hover .go { background: #ffd84a; }
.steps { list-style: none; margin: 20px 0 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--rule); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--marker); color: var(--kids-ink); font-family: 'Archivo', sans-serif; font-weight: 800; }
.steps b { display: block; font-weight: 700; }
.steps p { color: var(--muted); font-size: 16px; }
.stars { margin-top: 18px; font-size: 15px; color: var(--muted); }
.classes { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; }
.classes p { color: var(--muted); margin-top: 12px; max-width: 30em; }
.line-button { display: inline-block; background: #06c755; color: #fff; text-decoration: none; font-weight: 700; padding: 13px 20px; }
.privacy { font-size: 14px; color: var(--muted); padding: 26px 0 48px; max-width: 46em; }

/* ---- Content pages (listening packs, expressions, their lists): a reading column ---- */
html[lang="ja"] body.page-content { font-family: 'Literata', 'Zen Kaku Gothic New', serif; }
.page-content [lang="ja"], .page-content .ja { font-family: 'Zen Kaku Gothic New', sans-serif; }
.page-content main.content { max-width: 760px; padding: 8px 0 72px; }
.page-content .block + .block { margin-top: 44px; }
.page-content .block > :first-child { margin-top: 0; }
.page-content .top { padding: 34px 0 0; font-size: 15px; }
.page-content .top a { color: var(--muted); text-underline-offset: 5px; text-decoration-color: var(--rule); }
.page-content .top + h1 { margin-top: 26px; }
.page-content .kicker { margin: 26px 0 10px; color: var(--muted); font-size: 15px; }
.page-content h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.08; font-weight: 500; letter-spacing: -.02em; margin: 0 0 14px; }
.page-content h2 { font-size: 28px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; margin: 48px 0 12px; }
.page-content h3 { font-size: 19px; font-weight: 500; margin: 30px 0 8px; }
.page-content p { margin: 0 0 12px; }
.page-content .ja { display: block; font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: .02em; margin-top: 3px; }
.page-content h3 .ja { display: inline; margin-left: 8px; }
.page-content .meta { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
.page-content .situation { font-size: 19px; margin: 0 0 6px; }
.page-content .situation[lang="ja"] { font-size: 16px; color: var(--muted); }
.page-content ol, .page-content ul { padding-left: 1.4em; margin: 6px 0 12px; }
.page-content ol > li { margin-bottom: 10px; }
.page-content ul { list-style: none; padding-left: .4em; }
.page-content blockquote { margin: 14px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--pencil); }
.page-content blockquote p:last-child { margin-bottom: 0; }
.page-content table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 15px; }
.page-content th, .page-content td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.page-content th { font-weight: 500; font-size: 14px; color: var(--muted); border-bottom: 2px solid var(--ink); }
.page-content .table-scroll { overflow-x: auto; }
.page-content details { margin: 14px 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--rule); }
.page-content details[open] { border-left-color: var(--pencil); }
.page-content summary { cursor: pointer; font-weight: 500; }
.page-content summary:focus-visible { outline: 3px solid var(--pencil); outline-offset: 4px; }
.page-content details[open] summary { margin-bottom: 8px; }
.page-content .players { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 26px 0 14px; }
.page-content .player { margin: 0; padding-top: 12px; border-top: 2px solid var(--ink); }
.page-content .player figcaption { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.page-content .player audio { width: 100%; }
/* the packs' own markings: the tie and the highlighted chunk, in the site's pencil and marker */
.page-content .tie { color: var(--pencil); font-weight: 700; font-size: 1.15em; margin: 0 1px; position: relative; top: .1em; }
.page-content u { text-decoration: none; background: rgba(245, 197, 24, .32); padding: 1px 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.page-content .next { padding-top: 26px; border-top: 2px solid var(--ink); }
.page-content .next p { margin: 0 0 6px; }
.page-content .next .ja-line { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.page-content .cta { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.page-content .btn { font-size: 16px; text-underline-offset: 5px; }
.page-content .btn.primary { background: var(--ink); color: var(--paper); text-decoration: none; padding: 13px 20px; font-weight: 500; }
.page-content .video { position: relative; aspect-ratio: 16 / 9; margin: 14px 0; }
.page-content .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* a pack's "Say it yourself" step: the hard line, marked, with its own recordings */
.page-content .practice-band { margin: 22px 0 6px; padding: 30px 0 26px; }
.page-content .practice-band .phrase { font-size: clamp(30px, 4vw, 46px); }
.page-content .speaker { font-size: 14px; color: var(--muted); margin: 0 0 4px; }
.page-content .practice-play { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 18px; }
.page-content .practice-band .note { font-size: 16px; margin: 0 0 6px; }
.page-content .practice-steps { margin: 20px 0 0; padding-left: 1.4em; }
.page-content .practice-steps li { margin-bottom: 10px; }
.page-content .practice-steps li p { margin: 6px 0 0; }
/* replies under a question example, indented like a turn in a conversation */
.page-content .responses { list-style: none; margin: -4px 0 14px; padding-left: 22px; border-left: 2px solid var(--rule); }
.page-content .responses li { margin: 0 0 6px; }
/* lists of packs and expressions */
.page-content .rows { list-style: none; padding: 0; margin: 0; }
.page-content .row a { display: block; text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.page-content .row:first-child a { border-top: 1px solid var(--rule); }
.page-content .row .t { display: block; font-size: 21px; font-weight: 500; line-height: 1.3; }
.page-content .row a:hover .t { text-decoration: underline; text-decoration-color: var(--pencil); text-underline-offset: 6px; }
.page-content .row .m { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.page-content .new { margin-left: 10px; font-size: 13px; font-weight: 400; font-style: italic; color: var(--pencil); vertical-align: 2px; }
.page-content .chips { position: sticky; top: 0; z-index: 1; display: flex; gap: 22px; overflow-x: auto; padding: 14px 0 12px; margin-bottom: 8px; background: var(--paper); }
.page-content .chip { flex: none; text-decoration: none; font-size: 15px; color: var(--muted); white-space: nowrap; }
.page-content .chip[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pencil); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.page-content .lvl, .page-content .empty { display: none; }
body.page-content:not([data-level]) .lvl, body.page-content[data-level="all"] .lvl { display: inline; }
body.page-content[data-level="L"] .row:not([data-level="L"]):not([data-level="all"]), body.page-content[data-level="M"] .row:not([data-level="M"]):not([data-level="all"]), body.page-content[data-level="H"] .row:not([data-level="H"]):not([data-level="all"]) { display: none; }
body.page-content[data-level="L"] .empty[data-for="L"], body.page-content[data-level="M"] .empty[data-for="M"], body.page-content[data-level="H"] .empty[data-for="H"] { display: block; color: var(--muted); padding: 14px 0; }
/* ---- Kids game (body.page-game): its own large-target treatment in the site's colours.
   No reading and no site header: the player is 5 to 10 and on a phone. ---- */
.page-game .wrap { max-width: 760px; padding: 0 16px; }
.page-game main { padding: 16px 0 40px; }
.page-game h1 { font-family: 'Zen Kaku Gothic New', sans-serif; font-size: 28px; font-weight: 700; line-height: 1.4; letter-spacing: 0; color: var(--kids-ink); margin: 8px 0 18px; }
.kids-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.kids-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--rule); background: #fff; font-size: 26px; text-decoration: none; cursor: pointer; }
.kids-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.kids-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.kids-dots span.done { background: var(--marker); }
.kids-dots span.now { background: var(--kids-ink); }
/* The pictures fill the screen below the bar: in the first trial, 5 to 6 year olds
   tapped the empty space between and below small tiles and got no response.
   minmax(0, 1fr): Safari otherwise sizes a track from the 512px image inside it. */
.kids-pics { display: grid; gap: 8px; height: calc(100vh - 106px); height: calc(100svh - 106px); min-height: 180px; max-height: 700px; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); }
/* during a question the page padding would leave an untappable strip under the pictures */
.page-game main:has(.kids-pics) { padding-bottom: 12px; }
.kids-pics.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (orientation: landscape) {
  .kids-pics { max-height: 560px; }
  .kids-pics.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kids-pics.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kids-pic { display: block; min-height: 0; padding: 10px; border-radius: 22px; border: 4px solid #bcc5dc; background: #fff; cursor: pointer; touch-action: manipulation; }
.kids-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kids-pic.right { border-color: #2e9e5b; }
.kids-pic.wrong { opacity: .45; }
.kids-levels { display: flex; gap: 12px; justify-content: center; margin: 10px 0 26px; }
.kids-level { min-width: 88px; min-height: 64px; border-radius: 18px; border: 3px solid var(--rule); background: #fff; color: #c27c00; font-size: 24px; cursor: pointer; }
.kids-level[aria-pressed="true"] { border-color: var(--kids-ink); }
.kids-start { display: block; margin: 0 auto; min-width: 140px; min-height: 96px; border-radius: 28px; border: 0; background: var(--marker); color: var(--kids-ink); font-size: 40px; cursor: pointer; }
/* Ten stars must fit a 320px phone, and a row of stars has no place to wrap. */
.kids-stars { text-align: center; font-size: clamp(20px, 7.5vw, 34px); color: #c27c00; letter-spacing: 2px; overflow-wrap: anywhere; margin: 24px 0; }
.kids-parent { text-align: center; color: var(--muted); font-size: 15px; line-height: 1.8; margin-top: 28px; }
.kids-pause { position: fixed; inset: 0; background: rgba(246, 247, 245, .94); display: grid; place-items: center; }
.kids-pause .kids-start { font-size: 24px; }
/* First letter: the countdown, the card, and four letters to choose from, all on one phone screen */
.kids-timer { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.kids-timer b { font-family: 'Archivo', sans-serif; font-variation-settings: 'wdth' 110, 'wght' 900; font-size: 34px; line-height: 1; min-width: 1.3em; color: var(--kids-ink); }
.kids-timer span { flex: 1; height: 12px; background: var(--rule); border-radius: 6px; overflow: hidden; }
.kids-timer i { display: block; height: 100%; width: 100%; background: var(--marker); }
.kids-letter-pic { height: calc(100vh - 300px); height: calc(100svh - 300px); min-height: 150px; max-height: 540px; padding: 10px; border-radius: 22px; border: 4px solid #bcc5dc; background: #fff; }
.kids-letter-pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kids-letters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.kids-letter { min-height: 88px; border-radius: 18px; border: 4px solid #bcc5dc; background: #fff; color: var(--kids-ink); font-family: 'Archivo', sans-serif; font-variation-settings: 'wdth' 100, 'wght' 700; font-size: 56px; line-height: 1; cursor: pointer; touch-action: manipulation; }
.kids-letter.right { border-color: #2e9e5b; background: #e4f4ea; }
.kids-letter.wrong { opacity: .45; }
.kids-letter:disabled { cursor: default; }
@media (orientation: landscape) {
  .kids-letter-pic { height: calc(100svh - 260px); }
  .kids-letters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.page-game button:focus-visible, .page-game a:focus-visible { outline: 3px solid var(--kids-ink); outline-offset: 3px; }

@media (max-width: 820px) {
  .page-content .players { grid-template-columns: 1fr; gap: 18px; }
  .page-content .top { padding-top: 22px; }
}

@media (max-width: 820px) {
  .site .wrap { padding: 0 18px; }
  .site-head { flex-wrap: wrap; padding-top: 20px; row-gap: 14px; }
  .site-head .name b { font-size: 25px; }
  .site-nav { order: 3; width: 100%; gap: 18px; padding-top: 12px; border-top: 1px solid var(--rule); }
  .langs { margin-left: 0; }
  .offer { grid-template-columns: 1fr; gap: 22px; padding: 40px 0 36px; }
  .lede { font-size: 17px; }
  .band { padding: 34px 0 30px; }
  .phrase { font-size: clamp(26px, 8vw, 38px); row-gap: 28px; }
  .under { margin-top: 36px; }
  .site section.block { padding: 44px 0; }
  .doors, .kinds { grid-template-columns: 1fr; }
  .door, .door:first-child, .kinds .tile, .kinds .tile:first-child { padding: 22px 0; border-left: 0; border-top: 1px solid var(--rule); }
  .door .go { margin-top: 4px; }
  .about, .record, .contact, .rooms-intro, .start, .play-together, .classes, .games { grid-template-columns: 1fr; gap: 28px; }
  .record li { grid-template-columns: 1fr; }
  .photos { grid-template-columns: repeat(2, 1fr); }
  .cols { display: none; }
  .room { grid-template-columns: 1fr; gap: 10px; padding: 18px 0; }
  .need { font-size: 20px; }
  .items .lvl { grid-row: auto; grid-column: 1; text-align: left; }
  .kids-hero { grid-template-columns: 1fr; gap: 30px; padding: 30px 0 44px; }
  .kids-hero figure { order: -1; }
  .kids-band .phrase { font-size: clamp(28px, 8.6vw, 40px); row-gap: 18px; }
  .game-entry { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .syl { transition: none; } }