:root {
  color-scheme: light;
  --paper: #fffdf8;
  --ink: #082c51;
  --muted: #355370;
  --coral: #ff4654;
  --button: #dc3044;
  --coral-dark: #d8273e;
  --line: #eae5db;
  --surface-tint: #f8efe4;
  --rounded: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  font-family: "Trebuchet MS", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; min-inline-size: 320px; }
::selection { background: #ffe1df; color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #1675aa; outline-offset: 6px; border-radius: 3px; }
img { display: block; inline-size: 100%; block-size: auto; }
picture { display: block; min-inline-size: 0; }
svg { display: inline-block; inline-size: 1.5rem; block-size: 1.5rem; flex-shrink: 0; }
.svg-definitions { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, .hero-promise, .wordmark { font-family: var(--rounded); font-weight: 800; letter-spacing: -.045em; }
h2 { font-size: clamp(1.65rem, 2.6vw, 2.5rem); line-height: 1.2; text-wrap: balance; }
h3 { font-size: 1rem; line-height: 1.45; font-weight: 600; }
html:lang(th) { --rounded: "Thonburi", "Leelawadee UI", Tahoma, system-ui, sans-serif; font-family: var(--rounded); }
:lang(th) :is(h1, h2, h3, .hero-promise, .stories-access-title, .language-switch select, .community-art-labels span) { letter-spacing: normal; }
:lang(th) :is(.hero h1, .hero-promise, h2) { line-height: 1.4; }
:lang(th) .community-art-labels span { line-height: 1.35; }
.container { inline-size: min(1280px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: absolute; inset: 10px auto auto 10px; z-index: 10; padding: .75rem 1.25rem; background: var(--ink); color: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7.25rem) auto; align-items: start; gap: .5rem; padding-block: 1.25rem; }
.site-header .wordmark { grid-column: 1; grid-row: 1; justify-self: start; align-items: center; inline-size: 11.75rem; max-inline-size: 100%; min-block-size: 52px; }
.header-book-link { grid-column: 1 / -1; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; padding: .45rem 1.15rem; border-radius: 100px; background: var(--button); color: white; font-family: var(--rounded); font-weight: 700; }
.header-book-link:hover { background: var(--coral-dark); }
.stories-entry { grid-column: 2; grid-row: 1; justify-self: stretch; display: grid; justify-items: center; gap: .3rem; min-inline-size: 0; }
.stories-access { display: flex; align-items: center; justify-content: center; gap: .3rem; inline-size: 100%; min-block-size: 52px; max-inline-size: 100%; padding: .35rem .45rem; border: 1px solid transparent; border-radius: 100px; background: var(--surface-tint); color: var(--muted); font: inherit; opacity: 1; cursor: not-allowed; -webkit-text-fill-color: currentColor; }
.stories-lock { flex: 0 0 24px; inline-size: 24px; opacity: .8; }
.stories-access-title, .language-switch select { min-inline-size: 0; font-family: var(--rounded); font-size: .875rem; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.stories-opening { color: var(--muted); font-family: var(--rounded); font-size: .75rem; line-height: 1.4; }
.language-switch { position: relative; display: grid; grid-column: 3; grid-row: 1; justify-self: end; align-self: start; min-inline-size: 0; color: var(--muted); }
.language-switch[hidden] { display: none; }
.language-switch select { appearance: none; -webkit-appearance: none; display: block; inline-size: 4rem; min-block-size: 52px; max-inline-size: 100%; padding: .35rem 1.6rem .35rem .5rem; border: 1px solid transparent; border-radius: 100px; background: var(--surface-tint); color: transparent; font-size: 1rem; cursor: pointer; }
.language-switch option { color: var(--ink); background: var(--paper); }
.language-code { position: absolute; inset: 0 1.4rem 0 .4rem; display: grid; place-items: center; color: var(--muted); font-family: var(--rounded); font-size: 1rem; font-weight: 700; pointer-events: none; }
.language-chevron { position: absolute; inset: 50% .5rem auto auto; inline-size: 12px; block-size: 12px; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.language-switch select:hover { background: #f1e6d9; }
.language-switch select:focus-visible { outline: none; background: var(--ink); }
.language-switch select:focus-visible ~ .language-code,
.language-switch select:focus-visible ~ .language-chevron { color: var(--paper); }
.wordmark { display: inline-flex; align-items: baseline; font-size: 2.5rem; line-height: 1; letter-spacing: -.075em; min-block-size: 44px; }
.wordmark span { color: var(--coral); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .8rem; min-block-size: 56px; max-inline-size: 100%; padding: .8rem 1.7rem; background: var(--button); border-radius: 100px; color: white; font-size: 1.125rem; line-height: 1.3; font-weight: 600; text-align: center; transition: background-color .18s, transform .18s; }
.button svg { inline-size: 27px; block-size: 27px; }
.button:hover { background: var(--coral-dark); transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button:focus-visible { outline: none; }
.button:focus-visible span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.button-note { margin-block-start: .75rem; font-size: .875rem; color: var(--muted); }
.button-note [aria-hidden="true"] { margin-inline: .35rem; }

.hero { display: grid; gap: 1.5rem; padding-block: 2.5rem 0; }
.hero-copy { min-inline-size: 0; align-self: center; }
.hero h1 { font-size: clamp(2.05rem, 5vw, 3.75rem); line-height: 1.09; }
.hero h1, h2, .button span { overflow-wrap: anywhere; }
.hero-promise { display: block; margin-block-start: .35rem; font-size: inherit; line-height: 1.13; color: var(--coral); }
.hero-description { max-inline-size: 32rem; margin-block-start: 1.25rem; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--muted); }
.hero-action { display: inline-block; margin-block-start: 1.8rem; text-align: center; }
.hero-art { align-self: center; }

.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.tutorial {
  --wave-height: 32px;
  position: relative;
  isolation: isolate;
  margin-block-start: 1rem;
  padding-block: calc(var(--wave-height) + 1.5rem) calc(var(--wave-height) + 2rem);
  text-align: center;
}
.tutorial::before, .community-section::before { content: ""; position: absolute; z-index: -1; inset: calc(var(--wave-height) - 1px) 0 0; background: var(--surface-tint); }
.tutorial-wave, .section-wave { position: absolute; inset: 0 0 auto; display: block; inline-size: 100%; block-size: var(--wave-height); pointer-events: none; }
.tutorial-wave-fill { fill: var(--surface-tint); }
.section-wave { fill: var(--surface-tint); }
.section-wave-bottom { inset: auto 0 0; fill: var(--paper); }
.tutorial-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; inline-size: min(36rem, calc(100% - 40px)); margin: 0 auto; padding: 0; list-style: none; }
.tutorial-step { position: relative; min-inline-size: 0; }
.tutorial-visual { position: relative; display: grid; place-items: center; block-size: 104px; margin-block-end: .75rem; }
.tutorial-step-number { position: absolute; inset: 0 auto auto calc(50% - 64px); display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--paper); color: #c12c3e; font-size: .75rem; font-weight: 600; }
.tutorial-art { inline-size: 104px; block-size: 104px; }
.tutorial-caption h3 { min-block-size: 2.9em; font-size: 1rem; text-wrap: balance; }
.tutorial-caption p { margin-block-start: .25rem; color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.tutorial-arrow { display: none; position: absolute; inset: auto auto -2.25rem calc(50% - 10px); inline-size: 20px; block-size: 20px; transform: rotate(90deg); fill: none; stroke: #b6a791; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

.book-section { padding-block: clamp(2.5rem, 4vw, 4rem); }
.book-layout { display: grid; gap: 1.5rem; align-items: center; }
.book-copy { text-align: center; }
.book-copy p { max-inline-size: 24rem; margin: 1rem auto 0; color: var(--muted); font-size: 1.075rem; }
.book-details-link { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 44px; margin-block-start: 1rem; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.book-family { inline-size: 100%; }

.community-section { --wave-height: 32px; position: relative; isolation: isolate; padding-block: calc(var(--wave-height) + 2rem); }
.community-layout { display: grid; gap: 1.5rem; align-items: center; max-inline-size: 72rem; }
.community-copy { min-inline-size: 0; max-inline-size: 28rem; margin-inline: auto; text-align: center; }
.community-label { margin-block-end: .7rem; color: #c12c3e; font-family: var(--rounded); font-size: .875rem; font-weight: 700; }
.community-description { margin-block-start: 1rem; color: var(--muted); font-size: 1.075rem; }
.community-description time { color: var(--ink); font-weight: 700; white-space: nowrap; }
:lang(ce) .community-description time { white-space: normal; }
.community-action { margin-block-start: 1.25rem; }
.community-invitation { max-inline-size: 23rem; margin: .75rem auto 0; color: #666e75; font-size: .75rem; line-height: 1.5; font-weight: 400; }
.community-action .button { padding-inline: 1.25rem; font-size: 1rem; }
.community-countdown { margin-block-start: .75rem; color: var(--muted); font-family: var(--rounded); font-size: .875rem; line-height: 1.5; font-weight: 700; font-variant-numeric: tabular-nums; }
.community-art { position: relative; container-type: inline-size; inline-size: 100%; max-inline-size: 40rem; margin-inline: auto; }
.community-art-labels { pointer-events: none; }
.community-art-labels span { position: absolute; color: #112b49; font-family: var(--rounded); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; transform: rotate(-1.6deg); }
.community-art-heading { inset: 26.5% auto auto 33%; inline-size: 36%; font-size: 4.2cqw; white-space: nowrap; text-align: center; }
.community-art-book { inline-size: 14.5%; font-size: 2.9cqw; }
.community-art-book-first { inset: 40% auto auto 35.5%; }
.community-art-book-second { inset: 38.5% auto auto 70%; font-size: 2.6cqw; }

.faq { --line: #ecd5c8; --coral-dark: #c12c3e; padding-block: clamp(2rem, 4vw, 3rem); }
.faq h2 { text-align: center; }
.faq-list { max-inline-size: 720px; margin: 1.8rem auto 0; }
.faq details { border-block-end: 1px solid var(--line); }
.faq details:first-child { border-block-start: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-block-size: 68px; padding: 1rem .5rem; cursor: pointer; font-weight: 600; line-height: 1.5; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--coral-dark); }
.faq-toggle { position: relative; inline-size: 18px; block-size: 18px; flex-shrink: 0; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; background: var(--coral-dark); border-radius: 1px; }
.faq-toggle::before { inset: 8px 0 auto; block-size: 2px; }
.faq-toggle::after { inset: 0 auto 0 8px; inline-size: 2px; transition: transform .15s; }
.faq details[open] .faq-toggle::after { transform: rotate(90deg); }
.faq details p { padding: 0 2.5rem 1.25rem .5rem; color: var(--muted); line-height: 1.75; }
.faq details p a { text-decoration: underline; text-underline-offset: 3px; }

.site-footer { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 1rem 1.5rem; padding-block: 1.5rem 2rem; }
.footer-brand { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-inline-size: 0; padding-block-end: 1.25rem; border-block-end: 1px solid var(--line); }
.footer-brand .wordmark { align-items: center; }
.site-footer nav { display: grid; gap: .25rem; min-inline-size: 0; font-size: .875rem; line-height: 1.5; }
.site-footer nav a { display: flex; align-items: center; min-inline-size: 0; min-block-size: 52px; padding-block: .25rem; overflow-wrap: anywhere; }
.site-footer nav a:hover { color: var(--coral-dark); }
.footer-legal { min-inline-size: 0; color: var(--muted); }
.site-footer .footer-legal nav { font-size: .8125rem; }

@media (min-width: 560px) {
  .container { inline-size: min(1280px, calc(100% - 64px)); }
  .site-header { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 1rem; }
  .site-header .wordmark { min-block-size: 48px; }
  .header-book-link { grid-column: 2; grid-row: 1; min-block-size: 48px; }
  .stories-entry { grid-column: 3; }
  .language-switch { grid-column: 4; }
  .stories-entry { justify-self: end; }
  .stories-access { inline-size: auto; min-block-size: 48px; gap: .55rem; padding: .4375rem 1.25rem; }
  .stories-lock { flex-basis: 32px; inline-size: 32px; }
  .stories-access-title, .language-switch select { font-size: 1rem; }
  .language-switch select { inline-size: auto; min-block-size: 48px; padding: .4375rem 2.5rem .4375rem 1.25rem; color: inherit; }
  .language-switch select:focus-visible { color: var(--paper); }
  .language-code { display: none; }
  .language-chevron { inset-inline-end: 1rem; inline-size: 14px; block-size: 14px; }
  .stories-opening { font-size: .8125rem; }
}
@media (min-width: 800px) {
  .site-header { min-block-size: 100px; padding-block: 1.25rem; }
  .wordmark { font-size: 3rem; }
  .site-header .wordmark { inline-size: 13rem; }
  .hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-block-size: 530px; gap: 2rem; padding-block: 2.5rem 2rem; }
  .hero h1 { font-size: clamp(2.4rem, 4.15vw, 3.75rem); }
  .hero-description { max-inline-size: 32rem; }
  .tutorial { --wave-height: 56px; margin-block-start: .5rem; }
  .tutorial-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; inline-size: min(60rem, calc(100% - 64px)); }
  .tutorial-visual { block-size: 128px; margin-block-end: 1rem; }
  .tutorial-art { inline-size: 128px; block-size: 128px; }
  .tutorial-step-number { display: none; }
  .tutorial-caption h3 { text-wrap: balance; }
  .tutorial-arrow { display: block; inset: 54px -22px auto auto; transform: none; }
  .book-layout { grid-template-columns: 40% 60%; gap: 0; }
  .book-copy { max-inline-size: 28rem; padding-inline-end: 1rem; text-align: start; }
  .book-copy p { margin-inline: 0; }
  .community-section { --wave-height: 56px; }
  .community-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2rem; }
  .community-copy { grid-column: 2; grid-row: 1; text-align: start; }
  .community-invitation { margin-inline: 0; }
  .community-art { grid-column: 1; grid-row: 1; }
  .site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem 1.5rem; padding-block: 2.5rem; }
  .footer-brand { justify-content: start; gap: 1.5rem; padding-block-end: 0; border-block-end: 0; }
  .site-footer nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  .site-footer nav a { min-block-size: 44px; }
  .footer-legal { flex: 1 0 100%; padding-block-start: .75rem; border-block-start: 1px solid var(--line); }
  .site-footer .footer-legal nav { gap: 0 1.5rem; }
}
@media (min-width: 1100px) {
  .container { inline-size: min(1280px, calc(100% - 120px)); }
  .hero { min-block-size: 575px; }
  .tutorial-caption h3 { min-block-size: auto; }
  .hero h1 { font-size: clamp(3rem, 4.15vw, 3.75rem); }
  .hero-action { margin-block-start: 2rem; }
  .button { padding-inline: 2.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .button:hover, .button:active { transform: none; }
}

/* Conditions accessibles sans script, une seule structure pour tous les écrans. */
.launch-notice { margin-block-start: 1.25rem; color: var(--muted); font-size: .875rem; }


/* Ready-made books: existing catalog covers and native purchase steps. */
.site-header { grid-template-columns: minmax(0, 1fr) auto; }
.site-header .language-switch { grid-column: 2; }
.home-books { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; inline-size: min(100%, 18rem); margin: 0 auto; padding: 1.5rem .5rem 2rem; list-style: none; }
.home-books li { min-inline-size: 0; }
.home-books .book-card { min-block-size: 16rem; }
.tutorial-icon { inline-size: 88px; block-size: 88px; padding: .5rem; border-radius: 1.25rem; background: var(--paper); fill: none; stroke: #b82c40; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.book-facts { display: grid; gap: 1rem; min-inline-size: 0; margin: 0; padding: 1.5rem; border-radius: 1.5rem; background: var(--surface-tint); }
.book-facts div { padding-block: .75rem; border-block-end: 1px solid var(--line); }
.book-facts div:last-child { border: 0; }
.book-facts dt { color: var(--muted); font-size: .875rem; }
.book-facts dd { margin: .25rem 0 0; font-family: var(--rounded); font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
@media (min-width: 560px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto auto; }
  .site-header .language-switch { grid-column: 3; }
  .home-books { padding-inline: 1rem; }
}
@media (min-width: 800px) {
  .book-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
  .book-facts { padding: 2rem; }
  .tutorial-icon { inline-size: 104px; block-size: 104px; }
}