/* Comic English — design system (DESIGN.md tokens) */

:root {
    /* Color */
    --ce-canvas: #FFFFFF;
    --ce-surface: #F5F7FB;
    --ce-paper: #FFF9EE;
    --ce-elevated: #FFFFFF;
    --ce-ink: #151923;
    --ce-muted: #5F6878;
    --ce-subtle: #7B8493;
    --ce-border: #E4E8EF;
    --ce-blue: #2563EB;
    --ce-blue-hover: #1D4ED8;
    --ce-blue-wash: #EAF1FF;
    --ce-error-wash: #FFF3F1;
    --ce-shadow-raised: 0 12px 28px rgb(21 25 35 / 7%);
    --ce-success: #167A52;
    --ce-error: #B42318;

    /* Type */
    --ce-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Spacing */
    --ce-space-1: 4px;
    --ce-space-2: 8px;
    --ce-space-3: 12px;
    --ce-space-4: 16px;
    --ce-space-5: 20px;
    --ce-space-6: 24px;
    --ce-space-8: 32px;
    --ce-space-10: 40px;
    --ce-space-12: 48px;
    --ce-space-16: 64px;
    --ce-space-20: 80px;

    /* Radius */
    --ce-radius-sm: 10px;
    --ce-radius-md: 16px;
    --ce-radius-lg: 24px;
    --ce-radius-full: 9999px;

    --ce-shadow: 0 1px 2px rgb(21 25 35 / 0.04), 0 8px 24px rgb(21 25 35 / 0.06);
    --ce-violet: #7155F5;
    --ce-turquoise: #24C8B8;
    --ce-yellow: #FFCB47;
    --ce-lilac: #F2EEFF;
    --ce-navy: #19213D;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--ce-canvas);
    color: var(--ce-ink);
    font-family: var(--ce-font);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--ce-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--ce-blue-hover);
}

:focus-visible {
    outline: 3px solid var(--ce-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.ce-main {
    min-height: 50vh;
}

/* Skip link */
.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    z-index: 100;
    padding: var(--ce-space-3) var(--ce-space-5);
    background: var(--ce-elevated);
    color: var(--ce-blue);
    border-radius: var(--ce-radius-sm);
}

.skip-link:focus {
    inset-inline-start: var(--ce-space-4);
    top: var(--ce-space-4);
}

.screen-reader-text {
    position: absolute !important;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    word-wrap: normal !important;
}

/* ---------- Typography ---------- */

.ce-overline {
    margin: 0 0 var(--ce-space-2);
    color: var(--ce-muted);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--ce-space-4);
    color: var(--ce-ink);
    line-height: 1.2;
    font-weight: 700;
}

/* ---------- Layout containers ---------- */

.ce-header__inner,
.ce-hero__inner,
.ce-section__inner,
.ce-archive__inner,
.ce-page__inner,
.ce-reader__inner,
.ce-lesson__inner,
.ce-dictsearch__inner,
.ce-footer__inner {
    max-width: 76rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 40em) {
    .ce-header__inner,
    .ce-hero__inner,
    .ce-section__inner,
    .ce-archive__inner,
    .ce-page__inner,
    .ce-reader__inner,
    .ce-lesson__inner,
    .ce-dictsearch__inner,
    .ce-footer__inner {
        padding-inline: 2rem;
    }
}

/* ---------- Header ---------- */

.ce-header {
    border-bottom: 1px solid var(--ce-border);
    background: var(--ce-canvas);
}

.ce-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ce-space-4) var(--ce-space-6);
    padding-block: var(--ce-space-4);
}

.ce-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-3);
    color: var(--ce-ink);
    font-weight: 750;
    text-decoration: none;
}

.ce-brand__mark {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: var(--ce-blue);
    border-radius: var(--ce-radius-sm);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ce-brand__name {
    font-size: 1.125rem;
}

.ce-nav {
    margin-inline-start: auto;
}

.ce-nav__list,
.ce-footer__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ce-space-2) var(--ce-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ce-nav__list a {
    color: var(--ce-ink);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    padding-block: var(--ce-space-2);
}

.ce-nav__list a:hover,
.ce-nav__list a[aria-current="page"] {
    color: var(--ce-blue);
}

.ce-nav__list a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

/* ---------- Buttons ---------- */

.ce-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ce-space-2);
    min-height: 44px;
    padding: var(--ce-space-3) var(--ce-space-6);
    border: 1px solid transparent;
    border-radius: var(--ce-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 150ms ease-out, opacity 150ms ease-out, background-color 150ms ease-out;
}

.ce-button--primary {
    background: var(--ce-blue);
    color: #fff;
}

.ce-button--primary:hover {
    background: var(--ce-blue-hover);
    color: #fff;
    transform: translateY(-1px);
}

.ce-button--outline {
    border-color: var(--ce-border);
    background: var(--ce-elevated);
    color: var(--ce-ink);
}

.ce-button--outline:hover {
    border-color: var(--ce-blue);
    color: var(--ce-blue);
}

/* ---------- Hero ---------- */

.ce-hero {
    background: var(--ce-canvas);
    padding-block: var(--ce-space-12) var(--ce-space-10);
}

.ce-hero__inner {
    display: grid;
    gap: var(--ce-space-8);
    align-items: center;
}

@media (min-width: 64em) {
    .ce-hero__inner {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
}

.ce-hero__title {
    margin: 0 0 var(--ce-space-4);
    font-size: clamp(2.5rem, 4.4vw, 4rem);
    font-weight: 750;
    letter-spacing: -0.015em;
    line-height: 1.04;
}

.ce-hero__lead {
    max-width: 34rem;
    margin: 0 0 var(--ce-space-6);
    color: var(--ce-muted);
    font-size: 1.125rem;
    line-height: 1.55;
}

.ce-hero__cta {
    margin-bottom: var(--ce-space-6);
}

.ce-hero__cues {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ce-space-2) var(--ce-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ce-hero__cues li {
    position: relative;
    padding-left: var(--ce-space-5);
    color: var(--ce-muted);
    font-size: 0.875rem;
    font-weight: 450;
}

.ce-hero__cues li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: var(--ce-radius-full);
    background: var(--ce-blue);
}

.ce-hero__media img {
    width: 100%;
    border-radius: var(--ce-radius-lg);
    box-shadow: var(--ce-shadow);
}

/* ---------- Sections ---------- */

.ce-section {
    padding-block: var(--ce-space-16);
}

.ce-section--alt {
    background: var(--ce-surface);
}

.ce-section__head {
    max-width: 44rem;
    margin-bottom: var(--ce-space-8);
}

.ce-section__title {
    margin: 0 0 var(--ce-space-3);
    font-size: 1.875rem;
    font-weight: 700;
}

.ce-section__desc {
    margin: 0;
    color: var(--ce-muted);
}

.ce-section__sub {
    margin-top: var(--ce-space-10);
}

.ce-empty {
    margin: 0;
    padding: var(--ce-space-6);
    background: var(--ce-surface);
    border: 1px dashed var(--ce-border);
    border-radius: var(--ce-radius-md);
    color: var(--ce-muted);
}

/* ---------- Feature (media object) ---------- */

.ce-feature {
    display: grid;
    gap: var(--ce-space-6);
    background: var(--ce-elevated);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
    box-shadow: var(--ce-shadow);
    overflow: hidden;
}

@media (min-width: 48em) {
    .ce-feature {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: center;
    }
}

.ce-feature__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ce-feature__body {
    padding: var(--ce-space-6);
}

@media (min-width: 48em) {
    .ce-feature__body {
        padding: var(--ce-space-8);
    }
}

.ce-feature__title {
    margin: 0 0 var(--ce-space-3);
    font-size: 1.5rem;
}

.ce-feature__title a {
    color: inherit;
    text-decoration: none;
}

.ce-feature__title a:hover {
    color: var(--ce-blue);
}

.ce-feature__excerpt {
    margin: 0 0 var(--ce-space-5);
    color: var(--ce-muted);
}

/* ---------- Card grid ---------- */

.ce-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: var(--ce-space-6);
}

.ce-card {
    display: flex;
    flex-direction: column;
    background: var(--ce-elevated);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
    box-shadow: var(--ce-shadow);
    overflow: hidden;
}

.ce-card__cover {
    display: block;
    background: var(--ce-surface);
    aspect-ratio: 16 / 9;
}

.ce-card__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ce-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-2);
    flex: 1;
    padding: var(--ce-space-5);
}

.ce-card__meta {
    margin: 0;
    color: var(--ce-muted);
}

.ce-card__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.3;
}

.ce-card__title a {
    color: inherit;
    text-decoration: none;
}

.ce-card__title a:hover {
    color: var(--ce-blue);
}

.ce-card__excerpt {
    margin: 0;
    color: var(--ce-muted);
    font-size: 0.9375rem;
}

.ce-card__note {
    margin: auto 0 0;
    padding-top: var(--ce-space-2);
    color: var(--ce-subtle);
    font-size: 0.875rem;
    font-weight: 450;
}

.ce-card__note::before {
    content: "○ ";
    color: var(--ce-subtle);
}

/* ---------- Archive & chips ---------- */

.ce-archive {
    padding-block: var(--ce-space-12) var(--ce-space-16);
}

.ce-archive__head {
    margin-bottom: var(--ce-space-8);
}

.ce-archive__title {
    margin: 0 0 var(--ce-space-3);
    font-size: 2.5rem;
    font-weight: 750;
    line-height: 1.1;
}

.ce-archive__desc {
    color: var(--ce-muted);
}

.ce-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ce-space-2);
    margin-top: var(--ce-space-5);
}

.ce-chips__label {
    color: var(--ce-muted);
    font-size: 0.875rem;
}

.ce-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: var(--ce-space-1) var(--ce-space-4);
    background: var(--ce-elevated);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-full);
    color: var(--ce-ink);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.ce-chip:hover {
    border-color: var(--ce-blue);
    color: var(--ce-blue);
}

.ce-chip--active {
    background: var(--ce-blue);
    border-color: var(--ce-blue);
    color: #fff;
}

/* ---------- Reader (comic story) ---------- */

.ce-reader {
    padding-block: var(--ce-space-10) var(--ce-space-16);
}

.ce-reader__inner {
    max-width: 46rem;
}

.ce-reader__head {
    margin-bottom: var(--ce-space-8);
}

.ce-reader__title {
    margin: 0 0 var(--ce-space-3);
    font-size: 2.5rem;
    font-weight: 750;
    line-height: 1.1;
}

.ce-reader__excerpt {
    margin: 0;
    color: var(--ce-muted);
    font-size: 1.125rem;
    line-height: 1.55;
}

.ce-reader__topics {
    margin: var(--ce-space-3) 0 0;
    color: var(--ce-muted);
    font-size: 0.875rem;
}

.ce-reader__cover {
    margin: 0 0 var(--ce-space-8);
}

.ce-reader__cover img {
    width: 100%;
    border-radius: var(--ce-radius-md);
    box-shadow: var(--ce-shadow);
}

.ce-reader__content > p:first-child {
    color: var(--ce-muted);
    font-size: 1.125rem;
}

.ce-reader__content .ce-scene {
    margin: var(--ce-space-10) 0;
    padding: var(--ce-space-6);
    background: var(--ce-surface);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
}

.ce-reader__content .ce-scene > h2 {
    margin: 0 0 var(--ce-space-4);
    font-size: 1.25rem;
    font-weight: 650;
}

.ce-reader__content .ce-scene p {
    margin: var(--ce-space-3) 0;
    font-size: 1.0625rem;
}

.ce-reader__content .ce-scene strong {
    font-weight: 650;
}

.ce-reader__content details {
    margin: var(--ce-space-2) 0 var(--ce-space-4);
    background: var(--ce-paper);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-sm);
}

.ce-reader__content details summary {
    cursor: pointer;
    padding: var(--ce-space-2) var(--ce-space-3);
    color: var(--ce-muted);
    font-size: 0.875rem;
    font-weight: 450;
    list-style-position: inside;
}

.ce-reader__content details[open] summary {
    border-bottom: 1px solid var(--ce-border);
}

.ce-reader__content details p {
    margin: 0;
    padding: var(--ce-space-3);
    color: var(--ce-muted);
    font-style: italic;
}

.ce-reader__content .ce-vocabulary {
    margin: var(--ce-space-10) 0 0;
    padding: var(--ce-space-6);
    background: var(--ce-paper);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
}

.ce-reader__content .ce-vocabulary h2 {
    margin: 0 0 var(--ce-space-3);
    font-size: 1.25rem;
}

.ce-reader__content .ce-vocabulary ul {
    margin: 0;
    padding-left: var(--ce-space-5);
}

.ce-reader__content .ce-vocabulary li {
    margin: var(--ce-space-2) 0;
}

.ce-reader__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ce-space-4);
    margin-top: var(--ce-space-12);
    padding-top: var(--ce-space-6);
    border-top: 1px solid var(--ce-border);
}

.ce-pager__link {
    display: flex;
    flex-direction: column;
    gap: var(--ce-space-1);
    color: var(--ce-ink);
    text-decoration: none;
}

.ce-pager__link:hover span:last-child {
    color: var(--ce-blue);
    text-decoration: underline;
}

.ce-pager__link .ce-overline {
    margin: 0;
}

/* ---------- Lesson ---------- */

.ce-lesson {
    padding-block: var(--ce-space-10) var(--ce-space-16);
}

.ce-lesson__inner {
    max-width: 52rem;
}

.ce-lesson__title {
    margin: 0 0 var(--ce-space-3);
    font-size: 2.5rem;
    font-weight: 750;
    line-height: 1.1;
}

.ce-lesson__goal {
    margin: 0 0 var(--ce-space-6);
    color: var(--ce-muted);
    font-size: 1.125rem;
}

.ce-lesson__player {
    margin-bottom: var(--ce-space-8);
}

.ce-lesson__embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--ce-ink);
    border-radius: var(--ce-radius-md);
    overflow: hidden;
}

.ce-lesson__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ce-lesson__player video {
    display: block;
    width: 100%;
    border-radius: var(--ce-radius-md);
    background: var(--ce-ink);
}

.ce-lesson__empty {
    display: grid;
    place-items: center;
    gap: var(--ce-space-2);
    aspect-ratio: 16 / 9;
    padding: var(--ce-space-6);
    background: var(--ce-surface);
    border: 1px dashed var(--ce-border);
    border-radius: var(--ce-radius-md);
    text-align: center;
}

.ce-lesson__empty-title {
    margin: 0;
    color: var(--ce-ink);
    font-size: 1.125rem;
    font-weight: 650;
}

.ce-lesson__empty p:last-child {
    margin: 0;
    max-width: 30rem;
    color: var(--ce-muted);
}

.ce-lesson__content h2 {
    margin-top: var(--ce-space-8);
    font-size: 1.375rem;
}

.ce-lesson__content ul {
    padding-left: var(--ce-space-5);
}

.ce-lesson__foot {
    margin-top: var(--ce-space-10);
    padding-top: var(--ce-space-6);
    border-top: 1px solid var(--ce-border);
}

/* ---------- Page ---------- */

.ce-page {
    padding-block: var(--ce-space-12) var(--ce-space-16);
}

.ce-page__inner {
    max-width: 46rem;
}

.ce-page--studio {
    padding-block: 0;
    background: #FAF9F6;
}
.ce-page--studio > .ce-page__inner {
    max-width: none;
    padding-inline: 0;
}
.ce-nav__studio a {
    white-space: nowrap;
}

.ce-page__title {
    margin: 0 0 var(--ce-space-6);
    font-size: 2.5rem;
    font-weight: 750;
    line-height: 1.1;
}

/* ---------- Pagination ---------- */

.ce-pagination,
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ce-space-2);
    margin-top: var(--ce-space-10);
}

.ce-pagination .page-numbers,
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--ce-space-3);
    background: var(--ce-elevated);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-sm);
    color: var(--ce-ink);
    text-decoration: none;
}

.ce-pagination .page-numbers.current,
.pagination .page-numbers.current {
    background: var(--ce-blue);
    border-color: var(--ce-blue);
    color: #fff;
}

/* ---------- Footer ---------- */

.ce-footer {
    margin-top: var(--ce-space-10);
    border-top: 1px solid var(--ce-border);
    background: var(--ce-surface);
    padding-block: var(--ce-space-10);
}

.ce-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ce-space-4) var(--ce-space-8);
}

.ce-footer__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ce-space-3);
    margin: 0;
}

.ce-footer__brand a {
    color: var(--ce-ink);
    font-weight: 700;
    text-decoration: none;
}

.ce-footer__tagline {
    color: var(--ce-muted);
    font-size: 0.875rem;
}

.ce-footer__nav {
    margin-inline-start: auto;
}

.ce-footer__list a {
    color: var(--ce-muted);
    font-size: 0.875rem;
    text-decoration: none;
}

.ce-footer__list a:hover {
    color: var(--ce-blue);
}

.ce-footer__copy {
    width: 100%;
    margin: var(--ce-space-2) 0 0;
    color: var(--ce-subtle);
    font-size: 0.875rem;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    .ce-reader__content details[open] {
        opacity: 1;
    }
}

/* ----- TalesEnglish premium visual direction ----- */
.ce-header--premium {
    border-bottom: 0;
    background: var(--ce-navy);
}
.ce-header--premium .ce-brand,
.ce-header--premium .ce-nav__list a,
.ce-header--premium .ce-langswitch__trigger {
    color: #fff;
}
.ce-header--premium .ce-brand__mark {
    background: var(--ce-yellow);
    color: var(--ce-navy);
    border-radius: 14px 14px 14px 4px;
    transform: rotate(-4deg);
}
.ce-header--premium .ce-nav__list a:hover,
.ce-header--premium .ce-nav__list a[aria-current="page"] {
    color: var(--ce-yellow);
}
.ce-header--premium .ce-nav__list a[aria-current="page"] {
    text-decoration-color: var(--ce-yellow);
}
.ce-header--premium .ce-langswitch__trigger {
    border-color: rgb(255 255 255 / 22%);
    background: rgb(255 255 255 / 8%);
}
.ce-header--premium .ce-header__cta,
.ce-header--premium .ce-button--primary {
    background: var(--ce-yellow);
    color: var(--ce-navy);
}
.ce-header--premium .ce-header__cta:hover,
.ce-header--premium .ce-button--primary:hover {
    background: #ffda70;
    color: var(--ce-navy);
}
.ce-hero--premium {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 8vw, 7rem);
    background: var(--ce-lilac);
}
.ce-hero--premium::before,
.ce-hero--premium::after {
    position: absolute;
    z-index: 0;
    display: block;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}
.ce-hero--premium::before {
    width: 18rem;
    height: 18rem;
    inset: -7rem auto auto -5rem;
    background: var(--ce-turquoise);
    opacity: 0.28;
}
.ce-hero--premium::after {
    width: 13rem;
    height: 13rem;
    inset: auto -5rem -5rem auto;
    background: var(--ce-yellow);
    opacity: 0.38;
}
.ce-hero--premium .ce-hero__inner {
    position: relative;
    z-index: 1;
}
.ce-hero--premium .ce-overline {
    color: var(--ce-violet);
}
.ce-hero--premium .ce-hero__title {
    max-width: 10ch;
    color: var(--ce-navy);
    font-family: "Trebuchet MS", var(--ce-font);
    font-size: clamp(3rem, 6vw, 5.75rem);
    font-weight: 900;
    letter-spacing: -0.06em;
}
.ce-hero--premium .ce-hero__lead {
    color: #3f496b;
}
.ce-hero--premium .ce-hero__cta {
    background: var(--ce-violet);
    border-radius: 14px 14px 14px 4px;
    box-shadow: 5px 5px 0 var(--ce-turquoise);
    color: #fff;
}
.ce-hero--premium .ce-hero__cta:hover {
    background: #5b42df;
    color: #fff;
    transform: translate(-1px, -1px);
}
.ce-hero--premium .ce-hero__cues li::before {
    background: var(--ce-turquoise);
}
.ce-hero--premium .ce-hero__media {
    position: relative;
    padding: var(--ce-space-4);
}
.ce-hero--premium .ce-hero__media::before {
    position: absolute;
    inset: 0;
    border: 2px solid var(--ce-violet);
    border-radius: 30px 30px 30px 8px;
    content: "";
    transform: rotate(3deg);
}
.ce-hero--premium .ce-hero__media img {
    position: relative;
    border: 6px solid #fff;
    border-radius: 30px 30px 30px 8px;
    box-shadow: 10px 12px 0 var(--ce-turquoise);
    transform: rotate(-2deg);
}
.ce-section__title {
    color: var(--ce-navy);
    font-family: "Trebuchet MS", var(--ce-font);
    letter-spacing: -0.03em;
}
.ce-section--paper {
    position: relative;
    background: #fff8e6;
}
.ce-section--alt {
    background: var(--ce-lilac);
}
.ce-level-card {
    border: 2px solid var(--ce-violet);
    border-radius: 20px 20px 20px 6px;
    box-shadow: 5px 5px 0 var(--ce-yellow);
}
.ce-level-card:nth-child(2n) {
    border-color: var(--ce-turquoise);
    box-shadow: 5px 5px 0 var(--ce-violet);
}
.ce-level-card__code {
    color: var(--ce-violet);
}
.ce-step {
    border-block-start-color: var(--ce-violet);
}
.ce-step:nth-child(2) {
    border-block-start-color: var(--ce-turquoise);
}
.ce-step:nth-child(3) {
    border-block-start-color: var(--ce-yellow);
}
.ce-card,
.ce-feature,
.ce-character {
    border-radius: 20px 20px 20px 6px;
}
.ce-card:hover {
    border-color: var(--ce-violet);
    box-shadow: 6px 8px 0 rgb(113 85 245 / 18%);
    transform: translateY(-4px);
}
.ce-cta-panel {
    background: var(--ce-violet);
    border-radius: 28px 28px 28px 8px;
    box-shadow: 10px 10px 0 var(--ce-turquoise);
}
.ce-cta-panel .ce-button--primary {
    background: var(--ce-yellow);
    color: var(--ce-navy);
}

@media (prefers-reduced-motion: reduce) {
    .ce-hero--premium .ce-hero__media img,
    .ce-hero--premium .ce-hero__media::before,
    .ce-hero--premium .ce-hero__cta {
        transform: none;
    }
    .ce-card:hover {
        transform: none;
    }
}

/* ---------- Wide viewport refinements ---------- */

@media (min-width: 80em) {
    .ce-hero {
        padding-block: var(--ce-space-16) var(--ce-space-12);
    }
    .ce-section {
        padding-block: var(--ce-space-20);
    }
}

/* ---------- Vocabulary lookup (dictionary popover) ---------- */

.ce-vocab__word {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    padding: 0 2px;
    border: 0;
    border-bottom: 2px dotted var(--ce-blue);
    border-radius: 2px;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: 650;
    line-height: inherit;
    cursor: pointer;
}

.ce-vocab__word:hover {
    color: var(--ce-blue);
}

.ce-vocab__word[aria-expanded="true"] {
    color: var(--ce-blue);
}

.ce-dict {
    position: absolute;
    z-index: 50;
    width: min(22rem, calc(100vw - 16px));
    padding: var(--ce-space-5);
    background: var(--ce-elevated);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
    box-shadow: 0 4px 8px rgb(21 25 35 / 0.08), 0 16px 40px rgb(21 25 35 / 0.14);
}

.ce-dict__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ce-space-2);
    margin: 0 0 var(--ce-space-3);
}

.ce-dict__word {
    font-size: 1.125rem;
    font-weight: 700;
}

.ce-dict__phonetic {
    color: var(--ce-muted);
    font-size: 0.875rem;
}

.ce-dict__audio {
    display: inline-flex;
    align-items: center;
    gap: var(--ce-space-1);
    min-height: 36px;
    margin: 0 0 var(--ce-space-3);
    padding: var(--ce-space-1) var(--ce-space-4);
    background: var(--ce-blue);
    border: 0;
    border-radius: var(--ce-radius-full);
    color: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.ce-dict__audio:hover {
    background: var(--ce-blue-hover);
}

.ce-dict__defs {
    margin: 0 0 var(--ce-space-3);
    padding-left: var(--ce-space-5);
}

.ce-dict__defs li {
    margin: var(--ce-space-2) 0;
    font-size: 0.9375rem;
}

.ce-dict__part {
    color: var(--ce-muted);
    font-style: italic;
}

.ce-dict__fr {
    margin: 0;
    padding-top: var(--ce-space-3);
    border-top: 1px solid var(--ce-border);
    font-size: 0.9375rem;
}

.ce-dict__forms {
    margin: var(--ce-space-3) 0 0;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.ce-dict__form {
    display: inline-block;
    margin-inline-end: var(--ce-space-4);
    white-space: nowrap;
}
.ce-dict__form-label {
    color: var(--ce-muted);
    font-size: 0.75rem;
    margin-inline-end: 0.25rem;
}

.ce-dict__relations {
    margin: var(--ce-space-3) 0 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.ce-dict__relations-label {
    font-weight: 700;
    color: var(--ce-blue);
}

.ce-dict__fr-label {
    color: var(--ce-muted);
    font-size: 0.75rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ce-dict__loading,
.ce-dict__empty,
.ce-dict__error {
    margin: 0;
    color: var(--ce-muted);
    font-size: 0.9375rem;
}

.ce-dict__error {
    color: var(--ce-error);
}

/* ---------- Dictionary page ---------- */

.ce-dictsearch {
    padding-block: var(--ce-space-12) var(--ce-space-16);
}

.ce-dictsearch__inner {
    max-width: min(46rem, 100%);
}

.ce-dictsearch__title {
    margin: 0 0 var(--ce-space-3);
    font-size: 2.5rem;
    font-weight: 750;
    line-height: 1.1;
}

.ce-dictsearch__lead {
    margin: 0 0 var(--ce-space-8);
    color: var(--ce-muted);
    font-size: 1.125rem;
    line-height: 1.55;
}

.ce-dictsearch__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ce-space-3);
    margin-bottom: var(--ce-space-8);
}

.ce-dictsearch__input {
    flex: 1 1 16rem;
    min-height: 44px;
    padding: var(--ce-space-3) var(--ce-space-4);
    background: var(--ce-elevated);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-sm);
    color: var(--ce-ink);
    font-family: inherit;
    font-size: 1rem;
}

.ce-dictsearch__input:focus-visible {
    outline: 3px solid var(--ce-blue);
    outline-offset: 2px;
    border-color: var(--ce-blue);
}

.ce-dictsearch__result:empty {
    display: none;
}

.ce-dictsearch__panel {
    padding: var(--ce-space-6);
    background: var(--ce-elevated);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
    box-shadow: var(--ce-shadow);
}

.ce-dictsearch__panel--error {
    border-color: var(--ce-error);
}

.ce-dictsearch__panel--error p {
    margin: 0;
    color: var(--ce-error);
}

.ce-dictsearch__panel .ce-dict__defs {
    margin: 0 0 var(--ce-space-3);
}

/* ----- Language dropdown (native, works without JS) ----- */
.ce-langswitch {
    margin-inline-start: auto;
    position: relative;
    z-index: 20;
}
.ce-langswitch__details {
    position: relative;
}
.ce-langswitch__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ce-space-2);
    min-height: 44px;
    min-width: 9rem;
    padding: var(--ce-space-2) var(--ce-space-3);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-sm);
    background: var(--ce-elevated);
    color: var(--ce-ink);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 650;
    list-style: none;
}
.ce-langswitch__trigger::-webkit-details-marker { display: none; }
.ce-langswitch__trigger:hover,
.ce-langswitch__details[open] .ce-langswitch__trigger {
    background: var(--ce-surface);
}
.ce-langswitch__trigger:focus-visible,
.ce-langswitch__choice:focus-visible {
    outline: 2px solid var(--ce-blue);
    outline-offset: 2px;
}
.ce-langswitch__flag {
    display: block;
    width: 20px;
    height: 14px;
    object-fit: cover;
    flex: none;
}
.ce-langswitch__chevron {
    margin-inline-start: auto;
    flex: none;
}
.ce-langswitch__details[open] .ce-langswitch__chevron { transform: rotate(180deg); }
.ce-langswitch__list {
    position: absolute;
    inset-block-start: calc(100% + var(--ce-space-2));
    inset-inline-end: 0;
    min-width: 12rem;
    max-width: calc(100vw - 2 * var(--ce-space-4));
    margin: 0;
    padding: var(--ce-space-2);
    list-style: none;
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-sm);
    background: var(--ce-elevated);
    box-shadow: 0 10px 28px rgb(21 25 35 / 12%);
}
.ce-langswitch__choice {
    display: flex;
    align-items: center;
    gap: var(--ce-space-3);
    min-height: 44px;
    padding: var(--ce-space-2) var(--ce-space-3);
    border-radius: var(--ce-radius-sm);
    color: var(--ce-ink);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}
.ce-langswitch__choice:hover,
.ce-langswitch__choice--current { background: var(--ce-surface); }
.ce-langswitch__choice--current { font-weight: 700; color: var(--ce-blue-hover); }
[dir="rtl"] .ce-langswitch__list {
    inset-inline-start: 0;
    inset-inline-end: auto;
}
[dir="rtl"] .ce-langswitch {
    margin-inline-start: 0;
    margin-inline-end: auto;
}

/* ----- RTL (Arabic) ----- */
[dir="rtl"] .ce-header__inner,
[dir="rtl"] .ce-footer__inner,
[dir="rtl"] .ce-reader__inner,
[dir="rtl"] .ce-lesson__inner,
[dir="rtl"] .ce-dictsearch__inner,
[dir="rtl"] .ce-section__inner,
[dir="rtl"] .ce-cards {
    direction: rtl;
}
[dir="rtl"] .ce-nav__list {
    flex-direction: row-reverse;
}
[dir="rtl"] .ce-scene {
    text-align: right;
}
[dir="rtl"] .ce-dict__defs li,
[dir="rtl"] .ce-vocab li {
    text-align: right;
}


/* Usage example under a definition */
.ce-dict__defs li .ce-dict__example {
    display: block;
    margin-top: var(--ce-space-1);
    color: var(--ce-muted);
    font-style: italic;
    font-size: 0.875rem;
}
[dir="rtl"] .ce-dict__defs li .ce-dict__example {
    text-align: right;
}

/* ----- TalesEnglish homepage and learning path ----- */
.ce-section--paper {
    background: var(--ce-paper);
}
.ce-hero__copy {
    max-width: 38rem;
}
.ce-hero__title {
    max-width: 11ch;
    text-wrap: balance;
}
.ce-hero__media img {
    box-shadow: var(--ce-shadow-raised);
}
.ce-section__desc {
    max-width: 42rem;
}
.ce-level-grid,
.ce-character-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ce-space-4);
}
.ce-level-card {
    display: flex;
    min-height: 10rem;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--ce-space-6);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
    background: var(--ce-elevated);
    color: var(--ce-ink);
    text-decoration: none;
    transition: transform 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.ce-level-card:hover,
.ce-level-card:focus-visible {
    border-color: var(--ce-blue);
    box-shadow: var(--ce-shadow-raised);
    color: var(--ce-ink);
    transform: translateY(-3px);
}
.ce-level-card__code {
    color: var(--ce-blue);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1;
}
.ce-level-card__label {
    color: var(--ce-muted);
    font-size: 0.875rem;
    font-weight: 650;
}
.ce-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ce-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ce-step {
    padding-block-start: var(--ce-space-5);
    border-block-start: 3px solid var(--ce-blue);
}
.ce-step__number {
    display: block;
    margin-block-end: var(--ce-space-8);
    color: var(--ce-blue);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.ce-step h3,
.ce-step p {
    max-width: 22rem;
}
.ce-step p {
    margin-block-end: 0;
    color: var(--ce-muted);
}
.ce-character-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ce-character {
    display: flex;
    align-items: center;
    gap: var(--ce-space-4);
    min-height: 9rem;
    padding: var(--ce-space-4);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
    background: var(--ce-elevated);
    box-shadow: inset 4px 0 0 var(--ce-character-accent), var(--ce-shadow);
}
.ce-character__portrait {
    display: grid;
    flex: 0 0 5.5rem;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    overflow: hidden;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ce-character-accent) 18%, white);
    color: var(--ce-character-accent);
    font-size: 2rem;
    font-weight: 800;
}
.ce-character__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ce-character__name {
    margin-block-end: var(--ce-space-2);
}
.ce-character__personality {
    margin: 0;
    color: var(--ce-muted);
    font-size: 0.9375rem;
}
.ce-section--cta {
    padding-block-start: 0;
}
.ce-cta-panel {
    padding-block: clamp(2.5rem, 7vw, 5rem);
    padding-inline: clamp(1.5rem, 6vw, 5rem);
    border-radius: var(--ce-radius-lg);
    background: var(--ce-ink);
    color: #fff;
}
.ce-cta-panel .ce-section__title,
.ce-cta-panel .ce-section__desc,
.ce-cta-panel .ce-overline {
    color: #fff;
}
.ce-cta-panel .ce-section__desc {
    opacity: 0.78;
}

/* ----- Reader progress and related characters ----- */
.ce-reader__progress {
    display: grid;
    gap: var(--ce-space-2);
    margin-block: var(--ce-space-8);
    padding: var(--ce-space-4);
    border: 1px solid var(--ce-border);
    border-radius: var(--ce-radius-md);
    background: var(--ce-surface);
}
.ce-reader__progress-head {
    display: flex;
    justify-content: space-between;
    gap: var(--ce-space-4);
    color: var(--ce-muted);
    font-size: 0.875rem;
}
.ce-reader__progress-head strong {
    color: var(--ce-blue-hover);
}
.ce-reader__progress progress {
    width: 100%;
    height: 0.5rem;
    accent-color: var(--ce-blue);
}
.ce-reader__characters {
    margin-block: var(--ce-space-16);
    padding-block-start: var(--ce-space-8);
    border-block-start: 1px solid var(--ce-border);
}
.ce-character-grid--reader {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 48em) {
    .ce-level-grid,
    .ce-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ce-character-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 34em) {
    .ce-level-grid,
    .ce-steps,
    .ce-character-grid--reader {
        grid-template-columns: 1fr;
    }
    .ce-character {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ce-level-card {
        transition: none;
    }
    .ce-level-card:hover,
    .ce-level-card:focus-visible {
        transform: none;
    }
}