/* Digital Crayon Wisdom
   Modern editorial layout, hand-drawn accents, crayon imperfection.
   Design tokens arrive as CSS custom properties via site_tokens_css(). */

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding-top: var(--header-height, 76px);
    background: var(--color-bg, #fffdf9);
    color: var(--color-text, #1b2430);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 1.05rem;
    line-height: 1.7;
    /* Warm paper with a faint notebook grid and crayon haze. */
    background-image:
        radial-gradient(circle at 14% 8%, rgba(239,63,47,0.09), transparent 23rem),
        radial-gradient(circle at 88% 12%, rgba(55,104,232,0.09), transparent 26rem),
        linear-gradient(rgba(23,33,58,0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,33,58,0.026) 1px, transparent 1px);
    background-size: auto, auto, 28px 28px, 28px 28px;
    background-attachment: fixed;
}

body.is-nav-open { overflow: hidden; }

a { color: var(--color-accent, #d1441f); text-decoration: underline; text-underline-offset: 0.16em; }
a:hover { color: var(--color-accent-strong, #a83617); }

img { max-width: 100%; height: auto; display: block; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--color-text); color: #fff;
    padding: 0.6rem 1rem; z-index: 500; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--color-accent-cyan, #0e7490); outline-offset: 2px; }

/* ── Headings ──────────────────────────────────────────────────────────────
   Display weights are deliberately light, so every level sets its own size
   explicitly. A light weight with an inherited size reads as a mistake. */

h1, h2, h3, h4 {
    font-family: var(--font-display, system-ui, sans-serif);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.6rem;
    color: var(--color-text);
}

h1 { font-size: 2.6rem; font-weight: 250; }
h2 { font-size: 2rem;   font-weight: 250; }
h3 { font-size: 1.35rem; font-weight: 400; }
h4 { font-size: 1.1rem; font-weight: 500; }

/* ── Header ───────────────────────────────────────────────────────────────── */

.site-header {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--header-height, 76px);
    background: rgba(255, 250, 240, 0.96);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 0;
    z-index: 100;
}

.site-header::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg,
        var(--color-crayon-red) 0 18%,
        var(--color-crayon-yellow) 18% 36%,
        var(--color-crayon-green) 36% 54%,
        var(--color-crayon-blue) 54% 76%,
        var(--color-crayon-purple) 76% 100%);
    opacity: 0.9;
}

.site-header__inner {
    max-width: var(--content-width, 1180px);
    margin: 0 auto; padding: 0 1.5rem;
    height: 100%; display: flex; align-items: center; gap: 2rem;
}

.site-brand { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }

.site-logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--color-text); }

.site-logo__mark {
    width: 1.55rem; height: 1.55rem;
    background: linear-gradient(90deg,
        var(--color-crayon-red) 0 27%,
        transparent 27% 36%,
        var(--color-crayon-yellow) 36% 63%,
        transparent 63% 72%,
        var(--color-crayon-blue) 72% 100%);
    clip-path: polygon(0 17%, 13% 0, 27% 17%, 36% 17%, 49% 0, 63% 17%, 72% 17%, 86% 0, 100% 17%, 100% 100%, 0 100%);
    transform: rotate(-4deg);
    flex: none;
}

/* inline-flex blockifies its span children, which trims their trailing space.
   The gap is the spacing between prefix and accent. Do not rely on a space. */
.site-logo__wordmark {
    display: inline-flex;
    gap: 0.28em;
    font-family: var(--font-display, system-ui, sans-serif);
    font-size: 1.32rem; font-weight: 350; letter-spacing: -0.025em;
}

.site-logo__accent { color: var(--color-accent, #d1441f); font-weight: 500; }

.site-logo__tagline {
    font-style: italic; font-size: 0.74rem; font-weight: 550;
    color: var(--color-text-muted, #5c6773);
    margin-left: 2.05rem;
}

/* ── Navigation ───────────────────────────────────────────────────────────── */

.site-nav { margin-left: auto; }

.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; align-items: center; }

.site-nav__list a {
    color: var(--color-text); text-decoration: none;
    font-size: 0.92rem; font-weight: 500; transition: color 0.15s;
}

.site-nav__list a:hover,
.site-nav__list a.is-active {
    color: var(--color-accent, #d1441f);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--color-crayon-yellow);
    text-underline-offset: 0.34rem;
}

.site-nav__item--has-dropdown { position: relative; }

.nav-chevron::after { content: ' \25BE'; font-size: 0.72em; }

.nav-dropdown {
    position: absolute; top: calc(100% + 0.6rem); left: 0;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e8ddc9);
    border-radius: var(--radius-small, 6px);
    padding: 0.45rem 0; min-width: 220px; list-style: none; margin: 0;
    box-shadow: var(--shadow-card); z-index: 200;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(4px);
    transition: opacity .15s, visibility .15s, transform .15s;
}

.site-nav__item--has-dropdown.is-open > .nav-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}

.nav-dropdown li a { display: block; padding: 0.45rem 1rem; white-space: nowrap; font-size: 0.88rem; }

.nav-hamburger {
    display: none; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; background: none; border: none; cursor: pointer;
    padding: 0.25rem; margin-left: auto; color: var(--color-text);
    flex: 0 0 44px; width: 44px;
}
.nav-hamburger__label { font-size: .6rem; font-weight: 600; letter-spacing: .14em; }
.nav-hamburger span:not(.nav-hamburger__label) { width: 24px; height: 2px; background: currentColor; border-radius: 2px; }

/* ── Layout ───────────────────────────────────────────────────────────────── */

.page-wrapper { max-width: var(--content-width, 1180px); margin: 0 auto; padding: 2rem 1.5rem 0; }

.content-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; }
.content-layout--single { grid-template-columns: 1fr; }
.content-main { min-width: 0; }
.content-sidebar { position: sticky; top: calc(var(--header-height, 76px) + 1.5rem); }

.page-type-page .content-layout--single,
.page-type-article .content-layout--single,
.page-type-glossary_term .content-layout--single,
.page-type-faq_item .content-layout--single,
.page-type-dir_listing .content-layout--single { max-width: 860px; margin: 0 auto; }

.page-template-home .content-layout--single { max-width: none; }

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */

.breadcrumbs { margin-bottom: 1.5rem; }
.breadcrumbs__list {
    list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem;
    flex-wrap: wrap; font-size: 0.82rem; color: var(--color-text-muted);
}
.breadcrumbs__item + .breadcrumbs__item::before { content: '/'; margin-right: 0.5rem; opacity: 0.55; }
.breadcrumbs__item.is-current { color: var(--color-text); }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-accent); text-decoration: underline; }

/* ── Eyebrow ──────────────────────────────────────────────────────────────── */

.section-eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--font-body);
    font-size: 0.78rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--color-accent-cyan, #0e7490);
    margin: 0 0 0.85rem;
}
.section-eyebrow::before {
    content: ""; width: 2.15rem; height: 6px; background: currentColor; flex: none;
    border-radius: 60% 35% 50% 42%; transform: rotate(-2deg); opacity: 0.85;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero { padding: 1rem 0 2.5rem; }
.hero--home {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3.25rem);
    margin: 0.75rem 0 2rem;
    padding: clamp(2rem, 3.6vw, 3.6rem);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 92% 15%, rgba(120,70,217,0.3), transparent 30%),
        radial-gradient(circle at 64% 82%, rgba(8,127,158,0.28), transparent 35%),
        var(--color-surface-strong, #17213a);
    border: 3px solid var(--color-text, #17213a);
    border-radius: 32px 42px 35px 48px / 38px 30px 46px 34px;
    box-shadow: 0 11px 0 var(--color-crayon-yellow), 0 24px 44px rgba(23,33,58,0.18);
}

.hero--home::before,
.hero--home::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 4px solid rgba(255,255,255,0.13);
    border-radius: 50%;
    transform: rotate(-14deg);
}

.hero--home::before { width: 15rem; height: 5rem; left: -5rem; bottom: 2rem; }
.hero--home::after { width: 9rem; height: 9rem; right: 27%; top: -5rem; }

.hero__copy { position: relative; z-index: 2; min-width: 0; }
.hero--home .section-eyebrow { color: #74def1; }
.hero--home .section-eyebrow::before { background: var(--color-crayon-yellow); }
.hero__inner { max-width: 44rem; }

.hero__headline { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 200; margin: 0 0 1rem; }
.hero--home .hero__headline {
    max-width: 8.6em;
    color: #fff8e9;
    font-size: clamp(2.8rem, 4vw, 4.15rem);
    font-weight: 250;
    letter-spacing: -0.045em;
    line-height: 1.02;
    text-wrap: wrap;
}
.hero__headline--small { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 250; color: var(--color-text-muted); }

.hero__sub { font-size: 1.15rem; color: var(--color-text-muted); max-width: 42rem; margin: 0 0 1.5rem; }
.hero--home .hero__sub { color: #dce4f2; max-width: 35rem; font-size: 1.12rem; line-height: 1.65; }

.hero__kicker {
    margin: 1.6rem 0 0; font-style: italic;
    color: var(--color-accent, #d1441f); font-size: 1rem;
}

.hero--home .hero__kicker { color: #ffd872; font-weight: 650; }

.hero__art {
    position: relative;
    z-index: 1;
    margin: -1.25rem -3.75rem -1.75rem -2rem;
    min-width: 0;
    transform: rotate(1.3deg);
}

.hero__art img {
    width: 120%;
    max-width: none;
    height: auto;
    filter: saturate(1.12) contrast(1.03) drop-shadow(0 20px 20px rgba(0,0,0,0.3));
}

.hero__art-note {
    position: absolute;
    left: 11%;
    bottom: 8%;
    max-width: 12rem;
    padding: 0.65rem 0.85rem;
    background: #fff4b8;
    color: var(--color-text);
    border: 2px solid var(--color-text);
    border-radius: 7px 10px 8px 6px;
    box-shadow: 5px 6px 0 var(--color-crayon-red);
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1.25;
    transform: rotate(-5deg);
}

.hero__crayon {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.45rem;
    margin: -0.15rem 0 -1.5rem;
    max-width: 36rem;
    position: relative;
    z-index: 3;
}
.crayon-stroke {
    display: block; height: 13px; flex: 1;
    border-radius: 62% 42% 55% 38%; opacity: 0.95;
    box-shadow: inset 0 -3px 0 rgba(23,33,58,0.13);
}
.crayon-stroke--red    { background: var(--color-crayon-red, #e5484d); transform: rotate(-0.6deg); }
.crayon-stroke--yellow { background: var(--color-crayon-yellow, #f0b429); transform: rotate(0.4deg); }
.crayon-stroke--green  { background: var(--color-crayon-green, #2f9e44); transform: rotate(-0.3deg); }
.crayon-stroke--blue   { background: var(--color-crayon-blue, #2f6feb); transform: rotate(0.7deg); }
.crayon-stroke--purple { background: var(--color-crayon-purple, #7048e8); transform: rotate(-0.5deg); }

/* ── Sections ─────────────────────────────────────────────────────────────── */

.section { padding: 3.4rem 0; border-top: 1px solid var(--color-border-soft, #f0e8da); }
.section:first-of-type { border-top: none; }
.section-heading {
    font-size: clamp(1.8rem, 3.5vw, 2.75rem);
    font-weight: 275;
    margin: 0 0 1rem;
    max-width: 42rem;
    text-wrap: balance;
}
.section-body { max-width: 44rem; }

.section--joke { background: var(--color-panel, #f7f1e6); border-radius: var(--radius-large, 18px); padding: 2.25rem; border-top: none; }
.section--cta { border-top: 2px solid var(--color-border, #e8ddc9); }

.home > .section {
    position: relative;
    border-top: 0;
    margin: 1.25rem 0;
    padding: clamp(3rem, 6vw, 5rem) clamp(1.4rem, 5vw, 4.5rem);
}

.home > .section--prose:first-of-type {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.home > .section--prose:first-of-type::after {
    content: "";
    position: absolute;
    top: 16%; right: 5%;
    width: 13rem; height: 8rem;
    border: 8px solid var(--color-crayon-yellow);
    border-left-color: var(--color-crayon-red);
    border-bottom-color: var(--color-crayon-blue);
    border-radius: 55% 42% 50% 48%;
    transform: rotate(8deg);
    opacity: 0.26;
    pointer-events: none;
}

.home > .section--translations {
    background: #e8f8ff;
    border: 3px solid var(--color-crayon-blue);
    border-radius: 42px 31px 46px 34px / 30px 45px 33px 42px;
    box-shadow: 10px 12px 0 rgba(55,104,232,0.13);
}

.home > .section--library { padding-left: 0; padding-right: 0; }

.home > .section--cards {
    background: #fff0b8;
    border: 3px solid var(--color-crayon-yellow);
    border-radius: 30px 46px 34px 40px / 42px 31px 45px 34px;
    box-shadow: -10px 12px 0 rgba(245,184,46,0.18);
}

.home > .section--split {
    background: #ffe1db;
    border: 3px solid var(--color-crayon-red);
    border-radius: 44px 33px 39px 29px / 34px 44px 30px 41px;
}

.home > .section--joke {
    background:
        linear-gradient(rgba(255,255,255,0.28) 1px, transparent 1px),
        var(--color-panel);
    background-size: 100% 2rem;
    border: 3px solid var(--color-text);
    border-radius: 26px 42px 31px 48px / 44px 30px 46px 33px;
    box-shadow: 10px 12px 0 var(--color-crayon-purple);
}

.home > .section--joke blockquote {
    border-left-color: var(--color-crayon-purple);
    color: var(--color-text);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: 650;
    transform: rotate(-1deg);
}

.home > .section--cta {
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 25%, rgba(120,70,217,0.35), transparent 15rem),
        var(--color-surface-strong);
    color: #e8edf8;
    border: 3px solid var(--color-text);
    border-radius: 39px 30px 48px 34px / 31px 44px 32px 46px;
    box-shadow: 0 11px 0 var(--color-crayon-green);
}

.home > .section--cta .section-heading { color: #fff8e9; }
.home > .section--cta .section-eyebrow { color: #7ce2b0; }
.home > .section--cta .section-body { color: #dce4f2; }

/* ── Prose ────────────────────────────────────────────────────────────────── */

.prose { max-width: 42rem; }
.prose p { margin: 0 0 1.1rem; }
.prose h2 { font-size: 1.75rem; font-weight: 300; margin: 2.2rem 0 0.7rem; }
.prose h3 { font-size: 1.25rem; font-weight: 500; margin: 1.8rem 0 0.5rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.4rem; }
.prose blockquote {
    margin: 1.4rem 0; padding: 0.4rem 0 0.4rem 1.2rem;
    border-left: 4px solid var(--color-crayon-yellow, #f0b429);
    font-size: 1.15rem; font-style: italic; color: var(--color-text);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose .lede { font-size: 1.2rem; color: var(--color-text); }

.prose--crayon p { font-size: 1.18rem; }
.prose--story { max-width: 38rem; }
.prose--story p { font-size: 1.12rem; }
.prose--story p:first-child::first-letter {
    float: left; font-family: var(--font-display); font-size: 3.4rem;
    line-height: 0.82; padding: 0.1rem 0.6rem 0 0; font-weight: 300;
    color: var(--color-accent, #d1441f);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.btn {
    display: inline-block; padding: 0.78rem 1.4rem;
    border-radius: 10px 8px 11px 7px;
    font-size: 0.95rem; font-weight: 750; text-decoration: none;
    cursor: pointer; border: 2px solid var(--color-text); font-family: inherit;
    transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn--primary {
    background: var(--color-accent, #d1441f); color: #fff;
    box-shadow: 5px 6px 0 var(--color-crayon-yellow);
    transform: rotate(-0.5deg);
}
.btn--primary:hover {
    background: var(--color-accent-strong, #a83617); color: #fff;
    box-shadow: 3px 4px 0 var(--color-crayon-yellow);
    transform: translate(2px, 2px) rotate(-0.5deg);
}
.btn--outline {
    border-color: var(--color-text);
    color: var(--color-text);
    background: var(--color-surface, #fff);
    box-shadow: 4px 5px 0 rgba(23,33,58,0.17);
    transform: rotate(0.4deg);
}
.btn--outline:hover {
    border-color: var(--color-crayon-blue);
    color: var(--color-crayon-blue);
    box-shadow: 2px 3px 0 rgba(23,33,58,0.15);
    transform: translate(2px, 2px) rotate(0.4deg);
}

.hero--home .btn--outline,
.section--cta .btn--outline { background: #fff8e9; }

/* ── Cards and grids ──────────────────────────────────────────────────────── */

.translation-grid,
.explanation-grid,
.card-grid { display: grid; gap: 1.25rem; margin-top: 1.75rem; }

.translation-grid { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.explanation-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.card-grid        { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.translation-card, .explanation-card, .idea-card {
    background: var(--color-surface, #fff);
    border: 2px solid var(--color-text, #17213a);
    border-radius: 15px 10px 17px 12px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 5px 6px 0 rgba(23,33,58,0.1);
    transition: box-shadow 0.18s, transform 0.18s;
}
.translation-card:hover, .explanation-card:hover, .idea-card:hover {
    box-shadow: 8px 10px 0 rgba(23,33,58,0.14); transform: translateY(-3px) rotate(0deg);
}

.translation-card::before,
.explanation-card::before,
.idea-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 8px;
    background: var(--card-crayon, var(--color-crayon-red));
    opacity: 0.95;
}

.translation-card:nth-child(5n + 1), .explanation-card:nth-child(5n + 1), .idea-card:nth-child(5n + 1) { --card-crayon: var(--color-crayon-red); transform: rotate(-0.45deg); }
.translation-card:nth-child(5n + 2), .explanation-card:nth-child(5n + 2), .idea-card:nth-child(5n + 2) { --card-crayon: var(--color-crayon-yellow); transform: rotate(0.35deg); }
.translation-card:nth-child(5n + 3), .explanation-card:nth-child(5n + 3), .idea-card:nth-child(5n + 3) { --card-crayon: var(--color-crayon-green); transform: rotate(-0.25deg); }
.translation-card:nth-child(5n + 4), .explanation-card:nth-child(5n + 4), .idea-card:nth-child(5n + 4) { --card-crayon: var(--color-crayon-blue); transform: rotate(0.5deg); }
.translation-card:nth-child(5n), .explanation-card:nth-child(5n), .idea-card:nth-child(5n) { --card-crayon: var(--color-crayon-purple); transform: rotate(-0.3deg); }

.translation-card__subject { font-size: 1.15rem; font-weight: 500; margin: 0 0 0.9rem; }
.translation-card__subject a { text-decoration: none; color: var(--color-text); }
.translation-card__subject a:hover { color: var(--color-accent); }

.translation-card__label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--color-text-muted);
    margin: 0 0 0.3rem;
}
.translation-card__label--crayon { color: var(--card-crayon, var(--color-accent)); margin-top: 1rem; }
.translation-card__grown-up { margin: 0; font-size: 0.88rem; color: var(--color-text-muted); }
.translation-card__crayon { margin: 0; font-size: 1.05rem; font-weight: 650; }

.explanation-card__topic,
.explanation-card__meta {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--color-accent-cyan, #0e7490);
    margin: 0 0 0.5rem;
}
.explanation-card__meta { margin: 0.75rem 0 0; color: var(--color-text-muted); letter-spacing: 0.06em; }
.explanation-card__title { font-size: 1.25rem; font-weight: 650; margin: 0 0 0.5rem; }
.explanation-card__title a { text-decoration: none; color: var(--color-text); }
.explanation-card__title a:hover { color: var(--color-accent); }
.explanation-card__crayon { margin: 0; font-size: 0.95rem; color: var(--color-text-muted); }

.idea-card__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.4rem; }
.idea-card__title a { text-decoration: none; color: var(--color-text); }
.idea-card__title a:hover { color: var(--color-accent); }
.idea-card__meta { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent-cyan); margin: 0 0 0.4rem; }
.idea-card__text { margin: 0; font-size: 0.94rem; color: var(--color-text-muted); }

/* ── Step list ────────────────────────────────────────────────────────────── */

.step-list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.1rem; max-width: 46rem; }
.step-list__item { display: flex; gap: 1rem; align-items: flex-start; }
.step-list__number {
    flex: none; width: 2rem; height: 2rem;
    border-radius: var(--radius-small, 6px);
    background: var(--color-panel, #f7f1e6);
    border: 1px solid var(--color-border, #e8ddc9);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; color: var(--color-accent, #d1441f);
}
.step-list__title { font-size: 1.05rem; font-weight: 500; margin: 0.15rem 0 0.2rem; }
.step-list__text { margin: 0; font-size: 0.95rem; color: var(--color-text-muted); }

/* ── Split columns ────────────────────────────────────────────────────────── */

.split-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-top: 1.75rem; }
.split-column {
    background: var(--color-panel-soft, #fdf8f0);
    border: 1px solid var(--color-border, #e8ddc9);
    border-radius: var(--radius-medium, 12px); padding: 1.5rem;
}
.split-column__title { font-size: 1.15rem; font-weight: 500; margin: 0 0 0.2rem; }
.split-column__subtitle { font-size: 0.88rem; color: var(--color-text-muted); margin: 0 0 1rem; font-style: italic; }
.split-column__list { margin: 0; padding-left: 1.1rem; font-size: 0.95rem; }
.split-column__list li { margin-bottom: 0.35rem; }

/* ── Wisdom library ───────────────────────────────────────────────────────── */

.topic-jump, .letter-jump { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0 0 1rem; font-size: 0.9rem; }
.topic-jump a, .letter-jump a { color: var(--color-text-muted); text-decoration: none; font-weight: 500; }
.topic-jump a:hover, .letter-jump a:hover { color: var(--color-accent); text-decoration: underline; }

.topic-block { padding: 2.5rem 0; border-top: 1px solid var(--color-border-soft, #f0e8da); }
.topic-block__head { max-width: 40rem; }
.topic-block__title { font-size: 1.75rem; font-weight: 300; margin: 0 0 0.35rem; }
.topic-block__title a { text-decoration: none; color: var(--color-text); }
.topic-block__title a:hover { color: var(--color-accent); }
.topic-block__excerpt { margin: 0; color: var(--color-text-muted); }

.topic__intro { margin-bottom: 1rem; }

.explanation-list { display: grid; gap: 0; margin-top: 1.25rem; }
.explanation-row { padding: 1.4rem 0; border-top: 1px solid var(--color-border-soft, #f0e8da); }
.explanation-row:first-child { border-top: none; }
.explanation-row__title { font-size: 1.3rem; font-weight: 450; margin: 0 0 0.35rem; }
.explanation-row__title a { text-decoration: none; color: var(--color-text); }
.explanation-row__title a:hover { color: var(--color-accent); }
.explanation-row__crayon { margin: 0 0 0.35rem; font-size: 1.05rem; }
.explanation-row__excerpt { margin: 0; font-size: 0.94rem; color: var(--color-text-muted); max-width: 44rem; }
.explanation-row__meta { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--color-text-muted); }

/* ── Article ──────────────────────────────────────────────────────────────── */

.explanation__head, .story__head, .glossary-term__head, .faq-item__head, .activity__head { margin-bottom: 2rem; }

.explanation__topic {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; margin: 0 0 0.65rem;
}
.explanation__topic a { color: var(--color-accent-cyan, #0e7490); text-decoration: none; }
.explanation__topic a:hover { text-decoration: underline; }

.explanation__title, .story__title, .glossary-term__title, .faq-item__question, .activity__title {
    font-size: clamp(2rem, 4.5vw, 2.9rem); font-weight: 200; margin: 0 0 0.9rem;
}

.explanation__one-liner {
    font-size: 1.3rem; line-height: 1.5; margin: 0;
    padding: 1.1rem 1.3rem;
    background: var(--color-panel, #f7f1e6);
    border-left: 5px solid var(--color-crayon-yellow, #f0b429);
    border-radius: 0 var(--radius-medium, 12px) var(--radius-medium, 12px) 0;
}

.story__excerpt { font-size: 1.12rem; color: var(--color-text-muted); margin: 0 0 0.6rem; max-width: 40rem; }
.story__meta { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); margin: 0; }

.block { padding: 2rem 0; border-top: 1px solid var(--color-border-soft, #f0e8da); }
.block__label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--color-accent-cyan, #0e7490);
    margin: 0 0 0.6rem;
}
.block__heading { font-size: 1.4rem; font-weight: 400; margin: 0 0 0.75rem; }
.block__heading a { text-decoration: none; color: var(--color-text); }
.block__heading a:hover { color: var(--color-accent); }
.block__text { margin: 0 0 1rem; max-width: 42rem; color: var(--color-text-muted); }

.block--crayon .block__label { color: var(--color-accent, #d1441f); }

.block--grown-up,
.block--nuance {
    background: var(--color-panel-soft, #fdf8f0);
    border: 1px solid var(--color-border, #e8ddc9);
    border-radius: var(--radius-medium, 12px);
    padding: 1.6rem; margin-top: 2rem; border-top: 1px solid var(--color-border);
}
.block--nuance { background: #fff7ed; border-color: #f3d9b8; }

.block--activity {
    background: var(--color-surface, #fff);
    border: 2px dashed var(--color-border, #e8ddc9);
    border-radius: var(--radius-medium, 12px);
    padding: 1.6rem; margin-top: 2rem;
}

.question-list { margin: 0; padding: 0; list-style: none; max-width: 42rem; }
.question-list li {
    padding: 0.7rem 0 0.7rem 1.6rem; position: relative;
    border-bottom: 1px solid var(--color-border-soft, #f0e8da);
}
.question-list li:last-child { border-bottom: none; }
.question-list li::before {
    content: "?"; position: absolute; left: 0; top: 0.7rem;
    color: var(--color-crayon-purple, #7048e8); font-weight: 700;
}

.vocab-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.vocab-card {
    display: block; text-decoration: none; padding: 0.85rem 1rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e8ddc9);
    border-radius: var(--radius-small, 6px);
    transition: border-color 0.15s;
}
.vocab-card:hover { border-color: var(--color-accent, #d1441f); }
.vocab-card__term { display: block; font-weight: 600; font-size: 0.95rem; color: var(--color-text); margin-bottom: 0.2rem; }
.vocab-card__def { display: block; font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.5; }

.related-list { margin: 0; padding: 0; list-style: none; }
.related-list li { padding: 0.45rem 0; }

.block--books { color: var(--color-text-muted); font-size: 0.95rem; }

.story__moral {
    margin: 2rem 0 0; padding: 1.4rem 1.6rem;
    background: var(--color-panel, #f7f1e6);
    border-radius: var(--radius-medium, 12px);
}
.story__moral-text { margin: 0; font-size: 1.15rem; font-style: italic; }

/* ── Glossary ─────────────────────────────────────────────────────────────── */

.glossary-index__letter-group { padding: 1.75rem 0; border-top: 1px solid var(--color-border-soft, #f0e8da); }
.glossary-index__letter { margin: 0 0 1rem; }
.letter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; font-size: 1rem; font-weight: 700;
    border-radius: var(--radius-small, 6px);
    background: var(--color-panel, #f7f1e6);
    border: 1px solid var(--color-border, #e8ddc9);
    color: var(--color-accent, #d1441f);
}
.glossary-index__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.glossary-index__term { font-weight: 600; text-decoration: none; color: var(--color-text); font-size: 1.02rem; }
.glossary-index__term:hover { color: var(--color-accent); text-decoration: underline; }
.glossary-index__short-def { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--color-text-muted); }

.glossary-term__aka { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; font-style: italic; }
.glossary-term__short-def {
    font-size: 1.3rem; line-height: 1.5; margin: 0;
    padding: 1.1rem 1.3rem;
    background: var(--color-panel, #f7f1e6);
    border-left: 5px solid var(--color-crayon-yellow, #f0b429);
    border-radius: 0 var(--radius-medium, 12px) var(--radius-medium, 12px) 0;
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq-list { margin-top: 1rem; }
.faq-entry { border-bottom: 1px solid var(--color-border-soft, #f0e8da); padding: 0.4rem 0; }
.faq-entry__question {
    cursor: pointer; padding: 0.9rem 0; font-size: 1.1rem; font-weight: 450;
    font-family: var(--font-display); letter-spacing: -0.01em; list-style: none;
    display: flex; align-items: baseline; gap: 0.7rem;
}
.faq-entry__question::-webkit-details-marker { display: none; }
.faq-entry__question::before { content: "+"; color: var(--color-accent, #d1441f); font-weight: 700; flex: none; }
.faq-entry[open] .faq-entry__question::before { content: "\2212"; }
.faq-entry__answer { padding: 0 0 1rem 1.4rem; }
.faq-entry__permalink { font-size: 0.82rem; }
.faq-item__answer { font-size: 1.05rem; }

/* ── Activity ─────────────────────────────────────────────────────────────── */

.activity__excerpt { font-size: 1.12rem; color: var(--color-text-muted); max-width: 40rem; margin: 0 0 1.4rem; }
.activity__facts {
    display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    margin: 0 0 1.4rem; padding: 1.1rem 1.3rem;
    background: var(--color-panel-soft, #fdf8f0);
    border: 1px solid var(--color-border, #e8ddc9);
    border-radius: var(--radius-medium, 12px);
}
.activity__fact dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.2rem; }
.activity__fact dd { margin: 0; font-size: 0.95rem; }
.activity__steps { margin: 0; padding-left: 1.4rem; max-width: 42rem; }
.activity__steps li { margin-bottom: 0.85rem; font-size: 1.05rem; }
.activity__drawing-space { display: none; }

.print-only { display: none; }

/* ── Sidebar blocks ───────────────────────────────────────────────────────── */

.sidebar-block {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e8ddc9);
    border-radius: var(--radius-medium, 12px);
    padding: 1.25rem; margin-bottom: 1.25rem; font-size: 0.9rem;
}
.sidebar-block__title { font-weight: 700; margin-bottom: 0.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); }
.sidebar-block__links { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.sidebar-block__links a { font-size: 0.88rem; }
.cta-btn {
    display: inline-block; margin-top: 0.75rem; padding: 0.5rem 1rem;
    background: var(--color-accent, #d1441f); color: #fff; text-decoration: none;
    border-radius: var(--radius-small, 6px); font-size: 0.875rem; font-weight: 500;
}

/* The Shoebox */

.shoebox-index { padding-bottom: 1rem; }

.shoebox-hero {
    position: relative;
    overflow: hidden;
    margin: 0.4rem 0 2.2rem;
    padding: clamp(2rem, 5vw, 3.75rem);
    background:
        linear-gradient(rgba(255,255,255,0.62) 1px, transparent 1px),
        linear-gradient(90deg, rgba(55,104,232,0.08) 1px, transparent 1px),
        #fff5c9;
    background-size: 100% 2rem, 2rem 100%, auto;
    border: 3px solid #17213a;
    border-radius: 29px 41px 34px 46px / 38px 30px 44px 33px;
    box-shadow: 9px 11px 0 #7048e8;
}

.shoebox-hero::after {
    content: "";
    position: absolute;
    width: 9rem;
    height: 5rem;
    right: -2rem;
    bottom: -1rem;
    border: 11px solid rgba(229,72,77,0.32);
    border-radius: 54% 42% 58% 39%;
    transform: rotate(-9deg);
}

.shoebox-hero .hero__headline { max-width: 10.5em; font-size: clamp(2.45rem, 6vw, 4rem); }
.shoebox-hero .hero__sub { position: relative; z-index: 1; max-width: 36rem; color: #303b54; }

.shoebox-intro { margin: 0 auto 3rem; }
.shoebox-count {
    display: inline-block;
    margin-top: 0.35rem !important;
    padding: 0.65rem 0.9rem;
    background: #e3f7ee;
    border: 2px solid #23855a;
    border-radius: 8px 11px 7px 10px;
    box-shadow: 4px 5px 0 rgba(35,133,90,0.18);
    transform: rotate(-0.5deg);
}

.shoebox-stack { display: grid; gap: 3.5rem; }

.shoebox-entry {
    position: relative;
    padding: clamp(1.5rem, 4vw, 3rem);
    background:
        linear-gradient(rgba(47,111,235,0.08) 1px, transparent 1px),
        #fffefa;
    background-size: 100% 2rem, auto;
    border: 3px solid #17213a;
    border-radius: 18px 13px 21px 15px;
    box-shadow: 11px 13px 0 rgba(47,111,235,0.18);
}

.shoebox-entry::before {
    content: "";
    position: absolute;
    inset: 0.55rem -0.55rem -0.55rem 0.55rem;
    z-index: -1;
    border: 3px solid #f0b429;
    border-radius: 15px 20px 13px 19px;
    transform: rotate(0.35deg);
}

.shoebox-entry__tape {
    position: absolute;
    top: -1rem;
    left: 50%;
    width: 8.5rem;
    height: 2.1rem;
    background: rgba(255,218,107,0.78);
    border-left: 1px solid rgba(138,103,0,0.16);
    border-right: 1px solid rgba(138,103,0,0.16);
    transform: translateX(-50%) rotate(-1.5deg);
}

.shoebox-entry__header { max-width: 43rem; }
.shoebox-entry__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 0.8rem; font-size: 0.75rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: #646b7c; }
.shoebox-entry__meta span:first-child { color: #7048e8; }
.shoebox-entry__title { margin: 0 0 0.7rem; font-size: clamp(2rem, 5vw, 3.15rem); font-weight: 250; }
.shoebox-entry__title a { color: #17213a; text-decoration: none; }
.shoebox-entry__title a:hover { color: #d1441f; }
.shoebox-entry__one-liner { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.45; font-weight: 650; color: #17213a; }

.shoebox-entry__topics { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; margin: 1.2rem 0 0; padding: 0; }
.shoebox-entry__topics li { padding: 0.35rem 0.6rem; background: #e8f8ff; border: 1px solid #56abc2; border-radius: 5px 8px 6px 4px; font-size: 0.78rem; font-weight: 650; color: #26596a; }
.shoebox-entry__topics li:nth-child(2) { background: #ffe8e2; border-color: #e97c63; color: #7d3828; transform: rotate(0.6deg); }
.shoebox-entry__topics li:nth-child(3) { background: #eee8ff; border-color: #9874e5; color: #513392; transform: rotate(-0.5deg); }

.shoebox-entry__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.5rem; }
.shoebox-entry__columns--bottom { align-items: start; margin-top: 1.5rem; }

.shoebox-note { padding: 1.4rem; border: 2px solid #17213a; border-radius: 12px 16px 10px 15px; box-shadow: 5px 6px 0 rgba(23,33,58,0.11); }
.shoebox-note h3, .shoebox-map h3 { margin: 0 0 0.8rem; font-size: 1.25rem; font-weight: 550; }
.shoebox-note p:last-child, .shoebox-note li:last-child { margin-bottom: 0; }
.shoebox-note ul { margin: 0.8rem 0 0; padding-left: 1.15rem; }
.shoebox-note li { margin-bottom: 0.45rem; }
.shoebox-note__lead { font-weight: 700; }
.shoebox-note--memory { background: #e8f8ff; transform: rotate(-0.35deg); }
.shoebox-note--meaning { background: #fff0b8; transform: rotate(0.3deg); }
.shoebox-note--picture { background: #ffe8e2; transform: rotate(0.3deg); }
.shoebox-note--uses { background: #e3f7ee; transform: rotate(-0.3deg); }

.shoebox-map { margin-top: 2rem; }
.shoebox-map__grid { display: grid; gap: 0; margin: 0; border: 2px solid #17213a; border-radius: 11px 8px 13px 9px; overflow: hidden; background: #fff; }
.shoebox-map__pair { display: grid; grid-template-columns: minmax(10rem, 0.8fr) 1.2fr; }
.shoebox-map__pair + .shoebox-map__pair { border-top: 1px solid #cfd5df; }
.shoebox-map dt, .shoebox-map dd { margin: 0; padding: 0.9rem 1rem; }
.shoebox-map dt { font-weight: 750; background: #f7f1e6; }
.shoebox-map dd { border-left: 1px solid #cfd5df; }

.shoebox-rule { margin: 2rem 0 0; padding: 1.4rem 1.6rem; background: #17213a; color: #fff8e9; border: 0; border-left: 9px solid #f0b429; border-radius: 4px 14px 11px 5px; box-shadow: 6px 7px 0 #7048e8; transform: rotate(-0.25deg); }
.shoebox-rule__label { display: block; margin-bottom: 0.45rem; font-size: 0.7rem; font-style: normal; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: #74def1; }
.shoebox-rule p { margin: 0; font-size: 1.18rem; font-style: normal; font-weight: 600; }

.shoebox-question { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 2px dashed #b7bdc9; font-size: 1.05rem; }
.shoebox-question span { font-weight: 800; color: #7048e8; }
.shoebox-closing { margin: 3.5rem auto 0; padding: 1.4rem 1.6rem; background: #f7f1e6; border-left: 6px solid #e5484d; }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.site-footer {
    position: relative;
    border-top: 0;
    padding: 4rem 0 1.5rem; margin-top: 5rem;
    background: var(--color-surface-strong, #17213a);
    color: #dce4f2;
}
.site-footer::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 9px;
    background: linear-gradient(90deg,
        var(--color-crayon-red) 0 20%,
        var(--color-crayon-yellow) 20% 40%,
        var(--color-crayon-green) 40% 60%,
        var(--color-crayon-blue) 60% 80%,
        var(--color-crayon-purple) 80% 100%);
}
.site-footer__inner { max-width: var(--content-width, 1180px); margin: 0 auto; padding: 0 1.5rem; }
.site-footer__top { display: flex; gap: 3.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.site-footer__brand { max-width: 24rem; }
.site-footer__brand-name { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: -0.02em; margin-bottom: 0.4rem; color: #fff8e9; }
.site-footer__tagline { margin: 0 0 0.6rem; color: #ffd872; font-size: 0.95rem; font-style: italic; }
.site-footer__note { margin: 0; color: #adb8cb; font-size: 0.85rem; }
.site-footer__sibling-role { margin: 0 0 0.6rem; color: #adb8cb; font-size: 0.82rem; font-style: italic; }
.site-footer__col-heading { font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: #74def1; margin-bottom: 0.75rem; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.site-footer__links a { color: #e8edf8; text-decoration: none; font-size: 0.88rem; }
.site-footer__links a:hover { color: #ffd872; }
.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1rem;
    font-size: 0.8rem; color: #adb8cb;
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}
.site-footer__machine a { color: #adb8cb; }

/* ── Utility ──────────────────────────────────────────────────────────────── */

.text-muted { color: var(--color-text-muted); }

/* ── Error page ───────────────────────────────────────────────────────────── */

.error-page { text-align: center; padding: 4rem 1rem; }
.error-page h1 { font-size: 5rem; font-weight: 200; margin: 0 0 0.5rem; color: var(--color-text-muted); }
.error-page p { font-size: 1.1rem; margin-bottom: 2rem; }
.error-suggestions { margin: 0 auto 2rem; max-width: 32rem; text-align: left; }
.error-suggestions__label { font-size: 0.95rem; margin: 0 0 0.5rem; color: var(--color-text-muted); }
.error-suggestions ul { list-style: none; margin: 0; padding: 0; }
.error-suggestions li + li { margin-top: 0.35rem; }

/* Responsive */

@media (max-width: 1040px) {
    .nav-hamburger { display: flex; }

    .site-logo__tagline { display: none; }

    /* .site-header carries a backdrop-filter, and any backdrop-filter, filter
       or transform other than none makes an element the containing block for
       its position:fixed descendants. This panel is nested inside the header,
       so top/bottom resolve against the header's own 76px box rather than the
       viewport, and header-height minus header-height is a zero-height panel
       that opens and renders nothing. An explicit height fixes it without
       touching the header: when top, height and bottom are all set, bottom is
       ignored. dvh last so it wins where supported and mobile browser chrome
       cannot clip the panel; vh is the fallback. */
    .site-nav {
        display: none; position: fixed;
        top: var(--header-height, 76px); left: 0; right: 0; bottom: 0;
        height: calc(100vh - var(--header-height, 76px));
        height: calc(100dvh - var(--header-height, 76px));
        background: var(--color-bg, #fffdf9);
        border-bottom: 1px solid var(--color-border, #e8ddc9);
        padding: 1.5rem; z-index: 99; overflow-y: auto;
    }
    .site-nav.is-open { display: block; }
    .site-nav__list { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
    .site-nav__list > .site-nav__item > a { font-size: 1.2rem; }

    .nav-dropdown {
        position: static; box-shadow: none; border: none; padding: 0.4rem 0 0 1rem;
        opacity: 1; visibility: visible; pointer-events: auto; transform: none;
        min-width: 0; background: transparent;
    }
    .nav-dropdown li a { padding: 0.35rem 0; font-size: 1rem; }
    .nav-chevron { display: none; }

    .hero--home {
        grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
        padding: clamp(2rem, 4vw, 3rem);
    }
    .hero--home .hero__headline { font-size: clamp(2.6rem, 5vw, 3.75rem); }
}

@media (max-width: 780px) {
    .page-wrapper { padding: 1rem 1rem 0; }

    .hero--home {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 0.4rem;
        padding: 2rem 1.35rem 2.6rem;
        border-radius: 24px 31px 27px 35px / 31px 25px 34px 28px;
        box-shadow: 0 8px 0 var(--color-crayon-yellow), 0 18px 32px rgba(23,33,58,0.16);
    }
    .hero--home .hero__headline { font-size: clamp(2.45rem, 12vw, 3.8rem); }
    .hero--home .hero__sub { font-size: 1rem; }
    .hero__art { margin: -1.5rem -3rem -2rem -1rem; }
    .hero__art img { width: 116%; }
    .hero__art-note { left: 10%; bottom: 10%; font-size: 0.72rem; }
    .hero__crayon { margin-top: -0.4rem; margin-bottom: -1.4rem; }
    .crayon-stroke { height: 10px; }

    .home > .section {
        margin: 1rem 0;
        padding: 2.75rem 1.25rem;
    }
    .home > .section--library { padding-left: 0; padding-right: 0; }
    .home > .section--prose:first-of-type::after { display: none; }
    .section-heading { font-size: clamp(1.8rem, 8vw, 2.45rem); }

    .content-layout { grid-template-columns: 1fr; }
    .content-sidebar { position: static; }

    .translation-card,
    .explanation-card,
    .idea-card { transform: none !important; }

    .shoebox-entry__columns { grid-template-columns: 1fr; }
    .shoebox-note { transform: none; }
    .shoebox-map__pair { grid-template-columns: 1fr; }
    .shoebox-map dd { border-left: 0; border-top: 1px solid #cfd5df; }

    .site-footer__top { flex-direction: column; gap: 1.75rem; }
    .site-footer__brand-name { font-size: 1.5rem; }
    .site-footer__tagline { font-size: 1rem; }
    .site-footer__note { font-size: 0.9rem; }
    .site-footer__sibling-role { font-size: 0.88rem; }
    .site-footer__col-heading { font-size: 0.78rem; }
    .site-footer__links a { font-size: 1rem; }
    .site-footer__bottom { font-size: 0.82rem; }
}

@media (max-width: 430px) {
    .site-header__inner { padding: 0 1rem; }
    .site-logo__wordmark { font-size: 1.08rem; }
    .site-logo__mark { width: 1.3rem; height: 1.35rem; }
    .nav-hamburger__label { display: none; }
    .hero--home { padding-left: 1.1rem; padding-right: 1.1rem; }
    .hero__art-note { display: none; }
    .cta-row { align-items: stretch; }
    .hero--home .btn { width: 100%; text-align: center; }
}

/* ── Print: the activity sheets are the printable, no gated PDF ───────────── */

@media print {
    body { padding-top: 0; background: #fff; background-image: none; font-size: 12pt; }
    .site-header, .site-footer, .breadcrumbs, .no-print, .content-sidebar, .skip-link { display: none !important; }
    .page-wrapper { max-width: none; padding: 0; }
    .content-layout, .content-layout--single { display: block; max-width: none; }
    a { text-decoration: none; color: #000; }
    .activity__title { font-size: 20pt; }
    .activity__facts { border: 1px solid #999; }
    .block { border-top: 1px solid #ccc; padding: 0.6rem 0; }
    .print-only { display: block; }
    .activity__drawing-space {
        display: block; height: 11cm; border: 2px dashed #999;
        border-radius: 8px; margin-top: 1rem;
    }
}