:root { --paper: #F0EAE2; --paper-panel: #F8F4F0; --ink: #621244; --muted: #7A5445; --hair: #DCD3CB; --deep: #4A0E34; --silver: #B7A8A1; --cherry: #862861; }
@view-transition { navigation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 16px; font-weight: 500; line-height: 1.8; }
*, *::before, *::after { box-sizing: border-box; }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
svg { width: 22px; height: 22px; flex-shrink: 0; }
h1, h2, h3, p, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.45; }
h2 { font-size: clamp(25px, 2.5vw, 33px); line-height: 1.5; }
.container { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.skip-link:not(:focus) { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip-link:focus { position: fixed; top: 16px; right: 16px; z-index: 30; padding: 8px 16px; background: var(--ink); color: var(--paper); }
/* Same seven species, placement, scale and opacity as the academy's shared background.
   This prototype freezes its continuous drift; deliberate interaction motion lives below. */
.kyom-bg-flora { position: fixed; inset: -40px 0 -320px; z-index: -1; pointer-events: none; overflow: hidden; opacity: .24; }
.kyom-bg-flora i { position: absolute; display: block; background: center / contain no-repeat; }
.kyom-bg-flora .sp-mag { background-image: url('assets/kyom-flora-magnolia.svg'); aspect-ratio: 241.9 / 228.3; }
.kyom-bg-flora .sp-lil { background-image: url('assets/kyom-flora-lily.svg'); aspect-ratio: 218.9 / 201.2; }
.kyom-bg-flora .sp-peo { background-image: url('assets/kyom-flora-peony.svg'); aspect-ratio: 210.7 / 223.9; }
.kyom-bg-flora .sp-bee { background-image: url('assets/kyom-flora-bee.svg'); aspect-ratio: 200.3 / 190.2; }
.kyom-bg-flora .f1 { top: 2%; inset-inline-end: 4%; width: clamp(180px, 20vw, 330px); }
.kyom-bg-flora .f2 { top: 18%; inset-inline-start: 3%; width: clamp(130px, 15vw, 250px); }
.kyom-bg-flora .f3 { top: 9%; inset-inline-start: 33%; width: clamp(58px, 6vw, 96px); }
.kyom-bg-flora .f4 { top: 44%; inset-inline-end: 12%; width: clamp(120px, 13vw, 220px); scale: -1 1; }
.kyom-bg-flora .f5 { top: 62%; inset-inline-start: 6%; width: clamp(150px, 17vw, 280px); }
.kyom-bg-flora .f6 { top: 82%; inset-inline-end: 28%; width: clamp(110px, 12vw, 200px); scale: -1 1; }
.kyom-bg-flora .f7 { top: 73%; inset-inline-start: 38%; width: clamp(50px, 5vw, 84px); }
.academy-header { background: var(--paper-panel); border-bottom: 1px solid var(--hair); position: relative; z-index: 10; }
.header-inner { width: min(1200px, calc(100% - 96px)); margin: auto; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: block; flex-shrink: 0; }
.brand img { width: 120px; height: 54px; object-fit: contain; }
.desktop-nav { display: flex; align-items: center; background: var(--ink); padding: 4px; }
.desktop-nav a { text-decoration: none; padding: 6px 16px; min-height: 44px; display: flex; align-items: center; color: var(--paper); font-size: 13.5px; transition: background-color 150ms ease-out; }
.desktop-nav a:hover { background: var(--deep); }
.desktop-nav a:focus-visible { outline-color: var(--paper); outline-offset: -3px; }
.header-tools { display: flex; align-items: center; gap: 8px; }
.icon-link, .language-link, .menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hair); background: transparent; text-decoration: none; border-radius: 2px; }
.language-link { font-size: 13px; }
.menu-toggle { display: none; }
.mobile-nav { display: none; }
.kyom-books-js .mobile-nav { display: none; }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 52px; padding: 12px 24px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 2px; font-size: 15px; text-decoration: none; transition: background-color 150ms ease-out; }
.primary:hover { background: var(--deep); }
.primary svg, .book-link svg, .library-link svg { transition: transform 150ms ease-out; }
.primary:hover svg, a:hover .book-link svg, .library-link:hover svg { transform: translateX(-4px); }
.primary:focus-visible { outline-offset: 4px; }
.home-hero { display: grid; grid-template-columns: 1.22fr 1fr; width: min(1124px, calc(100% - 80px)); gap: 96px; align-items: center; min-height: 600px; padding-block: 80px; }
.home-hero h1 { font-size: 52px; line-height: 1.35; }
.home-hero .primary { margin-top: 40px; }
.home-photo { width: 100%; max-width: 461px; aspect-ratio: 1.25; object-fit: cover; }
.home-benefits { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; padding: 12px 16px; border: 1px solid var(--hair); font-size: 13px; color: var(--muted); }
.home-benefits span { border-inline: 1px solid var(--hair); padding-inline: 16px; }
.home-tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-block: 64px; border-top: 1px solid var(--hair); }
.home-tracks > a { position: relative; display: block; text-decoration: none; background: var(--ink); }
.home-tracks img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* Existing category overlay from the homepage, retained as context rather than redesigned. */
.home-tracks > a::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgb(98 18 68 / .88) 0%, rgb(98 18 68 / .72) 22%, rgb(98 18 68 / .28) 48%, rgb(98 18 68 / .06) 72%, transparent 100%); }
.home-tracks a > div { position: absolute; inset-inline: 20px; bottom: 18px; color: var(--paper); }
.home-tracks h2 { font-size: clamp(19px, 2vw, 22px); line-height: 1.35; margin-bottom: 8px; }
.home-tracks span { font-size: 13.5px; }
/* Existing cherry accent and light-to-dark direction of the academy pathway cards. */
.home-books { padding-block: 64px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px 64px; align-items: center; }
.home-books-intro { grid-column: 2; grid-row: 1; }
.home-books-intro p { margin-top: 16px; max-width: 30ch; }
.book-display { display: block; background: linear-gradient(to top, var(--ink) 0%, var(--cherry) 50%, var(--silver) 82%, var(--paper) 100%); color: var(--paper); text-decoration: none; border-radius: 2px; }
.book-display:focus-visible { outline-offset: 6px; }
.book-art { aspect-ratio: 2 / 3; object-fit: contain; transform: perspective(800px) rotateY(-7deg); transition: transform 400ms ease-out; }
.book-display:hover .book-art, .book-display:focus-visible .book-art { transform: perspective(800px) rotateY(-3deg) translateY(-8px); }
.home-book-feature { background: linear-gradient(to left, var(--silver) 0%, var(--cherry) 38%, var(--ink) 100%); grid-column: 1; grid-row: 1 / span 2; display: grid; grid-template-columns: 144px minmax(0, 1fr); align-items: center; gap: 32px; padding: 32px; }
.feature-cover, .library-cover { position: relative; isolation: isolate; }
.feature-cover::before, .library-cover::before { content: ''; position: absolute; width: 64px; height: 64px; inset-inline-end: -16px; top: -8px; background: url('assets/kyom-flora-bee.svg') center / contain no-repeat; opacity: .2; z-index: -1; }
.home-book-feature .book-art { width: 144px; }
.home-book-feature h3 { font-size: 30px; line-height: 1.4; }
.feature-subtitle { font-size: 15px; margin-top: 4px; }
.feature-author { font-size: 13px; margin-top: 12px; }
.book-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; padding-top: 16px; margin-top: 24px; border-top: 1px solid rgb(240 234 226 / .3); }
.library-link { grid-column: 2; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 12px 24px; min-height: 52px; font-size: 16px; text-decoration: none; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 2px; transition: background-color 150ms ease-out; }
.library-link:hover { background: var(--deep); }
.library-link svg { width: 22px; height: 22px; }
.book-display.is-entering .book-art { animation: cover-arrives 400ms ease-out; }
@keyframes cover-arrives { from { opacity: .65; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-block: 32px 24px; font-size: 13px; color: var(--muted); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.page-heading { margin-block: 16px 40px; }
.page-heading > p { margin-top: 8px; }
.library-page { min-height: calc(100vh - 228px); padding-bottom: 64px; }
.library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.library-book { min-width: 0; }
.library-book > a { height: 100%; }
.library-cover { display: grid; place-items: center; padding: 32px 24px 24px; }
.library-cover::before { inset-inline-end: 16px; top: 16px; }
.library-cover img { width: 144px; }
.library-book-copy { padding: 0 24px 24px; }
.library-book-copy h2 { font-size: 25px; line-height: 1.4; }
.subtitle { font-size: 21px; line-height: 1.6; }
.author { color: var(--muted); font-size: 14px; }
.library-book .subtitle { font-size: 14px; margin-top: 4px; }
.library-book .author { color: var(--paper); font-size: 13px; margin-top: 12px; }
.library-book .book-link { margin-top: 20px; }
.book-heading { margin-block: 8px 32px; }
.book-heading .subtitle { margin-top: 8px; }
.book-heading .author { margin-top: 8px; }
.book-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 32px 64px; align-items: start; padding-bottom: 64px; }
.book-about { grid-column: 2; padding: 24px 32px; background: var(--paper-panel); border-radius: 2px; }
.book-about h2 { font-size: 25px; margin-bottom: 16px; }
.book-about > p { max-width: 52ch; line-height: 1.95; }
.book-about .book-question { margin-top: 16px; color: var(--muted); font-size: 14px; }
.purchase-area { grid-column: 1; grid-row: 1 / span 2; background: var(--paper-panel); padding: 24px; border-radius: 2px; }
.detail-cover { width: 216px; aspect-ratio: 2 / 3; object-fit: contain; margin-inline: auto; }
.purchase-content { margin-top: 24px; padding-block: 24px; border-top: 1px solid var(--hair); }
.book-format { font-size: 13px; color: var(--muted); margin-bottom: 16px; text-align: center; }
.purchase { display: flex; width: 100%; }
.purchase-note { font-size: 13px; color: var(--muted); margin-top: 12px; text-align: center; }
.concept { grid-column: 2; padding: 24px 32px; background: var(--paper-panel); border-radius: 2px; }
.concept h2 { font-size: 25px; }
.concept-invitation { font-size: 14px; margin-top: 8px; color: var(--muted); }
.concept-controls { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; margin-block: 24px; }
.concept[data-ready] .concept-controls { display: grid; }
.concept-controls button { min-height: 48px; padding: 8px 4px; border: 0; border-bottom: 2px solid var(--hair); border-radius: 2px; background: transparent; transition: background-color 150ms ease-out, color 150ms ease-out; font-size: 16px; white-space: nowrap; }
.concept-controls button[aria-pressed="true"] { background: var(--paper); border-color: var(--ink); color: var(--ink); }
/* Overlaid grid items reserve the longest example at the current width and text size. */
.concept[data-ready] .concept-panels { display: grid; }
.concept[data-ready] .concept-panel { grid-area: 1 / 1; }
.concept[data-ready] .concept-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.concept-panel { padding-block: 16px; }
.concept-panel[hidden] { display: none; }
.concept-panel h3 { font-size: 16px; }
.concept-panel blockquote { font-size: 25px; line-height: 1.8; margin-block: 8px; }
.concept-panel > p { font-size: 14px; color: var(--muted); }
.concept-panel.is-changing { animation: idea-arrives 400ms ease-out; }
.concept-source { font-size: 13px; color: var(--muted); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.concept-close { font-size: 14px; margin-top: 16px; }
.academy-footer { border-top: 1px solid var(--hair); background: var(--paper-panel); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 32px; font-size: 14px; }
.footer-inner span { color: var(--muted); font-size: 13px; }
.footer-inner a { display: inline-flex; align-items: center; min-height: 44px; }
@keyframes idea-arrives { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1050px) {
    .container, .header-inner { width: calc(100% - 64px); }
    .desktop-nav a { padding-inline: 10px; font-size: 12px; }
    .header-inner { gap: 16px; }
    .brand img { width: 104px; }
    .home-hero { gap: 48px; }
    .home-books { column-gap: 32px; grid-template-columns: 1.5fr 1fr; }
    .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .home-book-feature { padding: 24px; gap: 24px; grid-template-columns: 112px minmax(0, 1fr); }
    .home-book-feature .book-art { width: 112px; }
    .home-book-feature h3 { font-size: 25px; }
    .book-layout { grid-template-columns: 280px minmax(0, 1fr); column-gap: 32px; }
    .book-about, .concept { padding: 24px; }
}
@media (max-width: 767px) {
    .container, .header-inner { width: calc(100% - 40px); }
    .header-inner { min-height: 64px; }
    .brand img { width: 96px; height: 44px; }
    .desktop-nav { display: none; }
    .mobile-nav { display: grid; padding: 8px 20px 20px; gap: 0; background: var(--paper-panel); }
    .mobile-nav a { padding-block: 12px; border-top: 1px solid var(--hair); text-decoration: none; }
    .kyom-bg-flora { opacity: .18; inset: -30px 0 -220px; }
    .kyom-bg-flora .f6, .kyom-bg-flora .f7 { display: none; }
    .kyom-bg-flora .f1 { top: 1%; inset-inline-end: -10%; width: clamp(144px, 38vw, 200px); }
    .kyom-bg-flora .f2 { top: 31%; inset-inline-start: -14%; width: clamp(120px, 32vw, 170px); }
    .kyom-bg-flora .f3 { top: 19%; width: 44px; inset-inline-start: 14%; }
    .kyom-bg-flora .f4 { top: 55%; inset-inline-end: -8%; width: clamp(110px, 30vw, 160px); }
    .kyom-bg-flora .f5 { top: 80%; inset-inline-start: -12%; width: clamp(128px, 35vw, 180px); }
    .home-hero { display: flex; flex-direction: column-reverse; width: calc(100% - 80px); gap: 64px; min-height: 0; padding-block: 40px; }
    .home-hero-copy { width: 100%; }
    .home-hero h1 { font-size: 30px; }
    .home-photo { aspect-ratio: 4 / 3; }
    .home-hero .primary { margin-top: 24px; }
    .home-benefits { font-size: 11px; gap: 8px; margin-top: 24px; padding: 8px; }
    .home-benefits span { padding-inline: 8px; }
    .home-tracks { padding-block: 32px; grid-template-columns: 1fr 1fr; gap: 24px; }
    .home-tracks > a:last-child { grid-column: 1 / -1; }
    .home-tracks > a:last-child img { aspect-ratio: 16 / 9; }
    .home-tracks a > div { inset-inline: 12px; bottom: 12px; }
    .home-tracks h2 { font-size: clamp(14px, 4vw, 17px); }
    .home-books { padding-block: 40px; grid-template-columns: 1fr; gap: 24px; }
    .home-books-intro { grid-column: 1; grid-row: 1; }
    .home-books-intro p { margin-top: 8px; font-size: 15px; max-width: none; }
    .home-book-feature { grid-column: 1; grid-row: 2; grid-template-columns: 104px minmax(0, 1fr); padding: 24px; gap: 24px; }
    .home-book-feature .book-art { width: 104px; }
    .home-book-feature h3 { font-size: 25px; }
    .feature-subtitle { font-size: 13px; }
    .feature-author { margin-top: 8px; }
    .home-book-feature .book-link { margin-top: 16px; padding-top: 12px; }
    .library-link { grid-column: 1; grid-row: 3; justify-self: stretch; }
    .breadcrumbs { padding-block: 20px 16px; gap: 12px; font-size: 12px; }
    .page-heading { margin-block: 8px 24px; }
    .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .library-cover { padding: 24px 16px 20px; }
    .library-cover img { width: 112px; }
    .library-cover::before { width: 40px; height: 40px; inset-inline-end: 8px; top: 8px; }
    .library-book-copy { padding: 0 16px 16px; }
    .library-book-copy h2 { font-size: 21px; }
    .library-book .subtitle { font-size: 13px; }
    .library-book .book-link { margin-top: 16px; padding-top: 12px; font-size: 13px; gap: 8px; }
    .book-heading { margin-block: 4px 24px; }
    .book-heading .subtitle { font-size: 18px; margin-top: 4px; }
    .book-layout { display: grid; grid-template-columns: 1fr; gap: 24px; padding-bottom: 40px; }
    .book-about { grid-column: 1; grid-row: 2; padding: 24px; }
    .book-about h2 { font-size: 21px; margin-bottom: 12px; }
    .book-about > p { font-size: 15px; }
    .book-about .book-question { display: none; }
    .purchase-area { grid-column: 1; grid-row: 1; padding: 24px; display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 20px; }
    .detail-cover { width: 104px; margin: 0; }
    .purchase-content { padding: 0; margin: 0; border: 0; }
    .book-format { font-size: 12px; margin-bottom: 12px; text-align: start; }
    .purchase { font-size: 13px; padding: 12px; gap: 8px; }
    .purchase-note { font-size: 12px; text-align: start; margin-top: 12px; }
    .concept { grid-column: 1; grid-row: 3; padding: 24px; }
    .concept h2 { font-size: 21px; }
    .concept-controls { gap: 4px; }
    .concept-controls button { font-size: 14px; }
    .concept-panel blockquote { font-size: 23px; }
    .footer-inner { align-items: start; padding-block: 24px; font-size: 13px; }
}
@media (min-width: 1051px) and (max-width: 1099px) {
    .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 767px) {
    .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
    .home-book-feature { grid-template-columns: 88px minmax(0, 1fr); padding: 20px 16px; gap: 16px; }
    .home-book-feature .book-art { width: 88px; }
    .home-book-feature h3 { font-size: 23px; }
    .purchase-area { padding: 16px; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; }
    .purchase-area .detail-cover { width: 88px; }
    .library-grid { grid-template-columns: minmax(0, 280px); justify-content: center; }
    .library-cover img { width: 128px; }
    .library-book .subtitle { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (min-width:768px) and (max-width:1024px){.desktop-nav{display:none}.mobile-nav{display:grid;padding:16px 24px;gap:12px}}

@media(max-width:1024px){.kyom-books-js .menu-toggle{display:inline-flex}}