/* A paper courtyard with three hanging lantern entrances. */
.home {
    --ink: #3e4b3e;
    --red: #ad4e38;
    --jade: #466655;
    color: var(--ink);
    background: #f9f2e2;
    background-image: radial-gradient(#aa8f6228 .6px, transparent .6px), radial-gradient(ellipse at 15% 0, #fffdf4, transparent 65%);
    background-size: 5px 5px, 100% 100%;
    font-family: "LXGW WenKai Lite", "KaiTi-CJK", system-ui, sans-serif;
    height: 100svh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.site-header { width: 100%; max-width: 1440px; margin: 0 auto; padding: clamp(12px, 2.3svh, 25px) 45px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 13px; color: var(--ink); text-decoration: none; }
.brand-seal { width: 43px; height: 43px; display: grid; place-items: center; background: var(--red); color: #fff5df; font-size: 27px; border-radius: 11px 9px 12px 8px; outline: 1px solid #f3ccab; outline-offset: -5px; transform: rotate(-6deg); box-shadow: 2px 3px 0 #d7c3a9; }
.brand strong { display: block; font-family: var(--font-zh); font-size: 24px; letter-spacing: 4px; }
.brand small { display: block; margin-top: 3px; font-size: 11px; color: #786e5b; }
.header-note { font-size: 13px; letter-spacing: 1px; color: #7e7c65; }.header-note span { color: #bb775b; font-size: 29px; margin-left: 18px; vertical-align: middle; }
main { width: 100%; height: 100%; max-width: 1440px; min-height: 0; margin: 0 auto; padding: 0 32px 12px; }
.storybook { height: 100%; position: relative; isolation: isolate; display: flex; align-items: center; background: #fff8e9; border: 1px solid #dfd0b3; border-radius: 15px 55px 22px 15px; box-shadow: 0 5px 0 #eadcc4, 0 8px 0 #fff7e7, 0 10px 0 #d6c6aa, 0 22px 35px #75604016; }
.storybook::before { content: ''; position: absolute; inset: 10px; border: 1px solid #dfd0b38c; border-radius: 8px 43px 15px 8px; pointer-events: none; z-index: 3; }
.storybook::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #fff8e9 0%, #fff8e9fa 33%, #fff8e9ae 43%, transparent 58%); z-index: 1; pointer-events: none; }
.book-corner { position: absolute; top: 17px; width: 22px; height: 22px; border-top: 2px solid #caa66c; z-index: 4; }.corner-left { left: 17px; border-left: 2px solid #caa66c; border-radius: 3px 0 0; }.corner-right { right: 24px; top: 22px; border-right: 2px solid #caa66c; border-radius: 0 12px 0 0; }
.book-bottom { position: absolute; bottom: -11px; left: 38px; height: 11px; width: 16px; background: #b76144; z-index: -1; border-radius: 0 0 3px 3px; }
.lantern-panel { position: relative; z-index: 2; width: 46%; max-width: 600px; padding: 25px 20px 30px 42px; }
.eyebrow { font-size: 12px; letter-spacing: 2px; color: var(--jade); margin-bottom: 12px; }.eyebrow span { color: #b68b48; margin-right: 7px; }
h1 { font-family: var(--font-zh); font-size: clamp(25px, 2.7vw, 36px); line-height: 1.4; letter-spacing: 1px; white-space: nowrap; }
h1 span { color: var(--red); }
.welcome-en { font-size: 13px; color: #85806a; margin-top: 8px; }
.lantern-rack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(13px, 1.9vw, 25px); position: relative; margin-top: 47px; padding: 0 9px; }
.lantern-rack::before { content: ''; position: absolute; top: -27px; left: 0; right: 0; height: 9px; border-radius: 8px; background: linear-gradient(#dac19a, #b89569); box-shadow: inset 0 1px 0 #fff6dd, 0 3px 0 #e7d6b8, 0 5px 7px #6d51351a; }
.lantern-link { --accent: #a14b38; --tint: #f6dec9; --edge: #d6a586; --cord: #b96d4c; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; height: clamp(242px, 40svh, 410px); position: relative; background-color: var(--tint); background-image: repeating-linear-gradient(0deg, transparent 0 2px, #86603a08 3px), linear-gradient(90deg, #ffffff25, transparent 50%, #7550310b); border: 1px solid var(--edge); border-radius: 10px 10px 32px 32px; padding: 24px 7px 15px; text-decoration: none; color: var(--accent); box-shadow: inset 0 0 0 5px #fff5df70, inset 0 0 0 6px var(--edge), 3px 5px 0 #deceb0, 7px 12px 16px #6f513923; transform-origin: 50% -24px; transition: transform .85s cubic-bezier(.22, .61, .36, 1), box-shadow .65s ease; }
.lantern-link::before { content: ''; position: absolute; top: -24px; left: calc(50% - 1px); height: 24px; width: 2px; background: var(--cord); box-shadow: 2px 0 0 #fff6df; }
.teacher { --accent: #466758; --tint: #dce6cf; --edge: #a6baa0; --cord: #65836b; }
.resources { --accent: #876333; --tint: #f5e7bf; --edge: #c9b176; --cord: #b79651; }
.lantern-link:focus-visible { box-shadow: inset 0 0 0 5px #fff5df70, inset 0 0 0 6px var(--edge), 3px 5px 0 #deceb0, 9px 14px 19px #6f51392b; }
.lantern-link:active { box-shadow: inset 0 0 0 5px #fff5df70, inset 0 0 0 6px var(--edge), 2px 3px 0 #deceb0, 4px 8px 12px #6f513920; }
.lantern-cap { position: absolute; top: -5px; left: -4px; right: -4px; height: 12px; border: 1px solid var(--edge); border-radius: 5px; background: linear-gradient(#fffae8, var(--edge)); box-shadow: 0 3px 3px #7154391c; }
.lantern-hole { position: absolute; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: #bba281; border: 2px solid #fff6e4; box-shadow: 0 1px 2px #74543350; }
.lantern-icon { width: clamp(35px, 6svh, 54px); height: clamp(35px, 6svh, 54px); flex-shrink: 0; filter: drop-shadow(1px 2px 1px #97734a20); }
.lantern-title { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--font-zh); font-size: clamp(24px, 3.8svh, 35px); line-height: 1.1; letter-spacing: 6px; font-weight: 700; margin: auto 0; white-space: nowrap; flex-shrink: 0; text-shadow: 1px 1px 0 #fff9e8; }
.lantern-audience { font-size: clamp(10px, 1vw, 12px); white-space: nowrap; opacity: .9; }
.lantern-action { font-size: 14px; border-top: 1px solid var(--edge); width: 88%; padding-top: 7px; display: flex; align-items: center; justify-content: center; gap: 6px; }.lantern-action > span { font-size: 19px; }
.lantern-tassel { position: absolute; bottom: -37px; width: 3px; height: 37px; background: var(--cord); }
.lantern-tassel::before { content: ''; position: absolute; bottom: 17px; left: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--cord); box-shadow: inset 1px 1px 0 #fff5db70; }
.lantern-tassel::after { content: ''; position: absolute; bottom: -8px; left: -7px; width: 17px; height: 25px; border-radius: 5px 5px 2px 2px; background: repeating-linear-gradient(90deg, var(--cord) 0 2px, transparent 2px 3px); transform: perspective(30px) rotateX(18deg); }
.pick-hint { text-align: center; margin-top: 65px; font-size: 13px; color: #867a60; }.pick-hint span { color: #ba8061; margin-right: 7px; }
.courtyard-art { position: absolute; width: auto; height: 101%; max-width: 89%; object-fit: contain; object-position: right bottom; right: -8px; bottom: -6px; z-index: 0; pointer-events: none; }

.site-footer { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 25px 22px; }
.footer-brand { font-family: var(--font-zh); font-size: 13px; letter-spacing: 2px; text-decoration: none; color: var(--jade); }.site-footer p { font-size: 11px; color: #8b816b; }.site-footer small { font-size: 10px; color: #8b816b; }.footer-hills { position: absolute; bottom: 0; left: 0; width: 100%; height: 14px; filter: drop-shadow(0 -3px 2px #68634a18); }
.home a:focus-visible { outline: 3px solid #2c6589; outline-offset: 6px; }
@media (min-width: 761px) and (max-height: 740px) {
    .site-header { padding-top: 10px; padding-bottom: 10px; }
    .lantern-panel { padding-top: 15px; padding-bottom: 15px; }
    .eyebrow { margin-bottom: 7px; }
    h1 { font-size: 28px; }
    .welcome-en { font-size: 11px; margin-top: 5px; }
    .lantern-rack { margin-top: 38px; }
    .lantern-link { padding-top: 23px; padding-bottom: 12px; gap: 5px; }
    .lantern-title { font-size: 24px; letter-spacing: 4px; }
    .lantern-action { font-size: 13px; padding-top: 5px; }
    .pick-hint { margin-top: 56px; font-size: 12px; }
    .site-footer { padding-top: 8px; padding-bottom: 19px; }
}
@media (min-width: 761px) and (max-width: 1050px) {
    main { padding-left: 22px; padding-right: 22px; }
    .lantern-panel { width: 48%; padding-left: 26px; padding-right: 10px; }
    h1 { font-size: 26px; }
    .lantern-rack { gap: 14px; padding-left: 4px; padding-right: 4px; }
    .lantern-audience { font-size: 10px; }
    .courtyard-art { max-width: 87%; }
}
@media (max-width: 760px) {
    .home { height: auto; min-height: 100svh; display: block; }
    .site-header { padding: 20px 22px; }.brand strong { font-size: 22px; }.header-note { display: none; }
    main { height: auto; padding: 0 16px 14px; }
    .storybook { height: auto; display: block; border-radius: 12px 35px 15px 12px; overflow: hidden; }
    .storybook::before { border-radius: 6px 25px 10px 6px; }.storybook::after { display: none; }
    .lantern-panel { width: 100%; max-width: 460px; padding: 34px 19px 0; margin: auto; text-align: center; }
    .eyebrow { font-size: 11px; letter-spacing: 1px; }
    h1 { font-size: clamp(23px, 6.2vw, 31px); letter-spacing: 0; }
    .welcome-en { font-size: 11px; }
    .lantern-rack { margin-top: 42px; gap: 15px; padding: 0 5px; }
    .lantern-link { height: 269px; padding: 23px 5px 12px; gap: 5px; }
    .lantern-title { font-size: 24px; letter-spacing: 4px; }
    .lantern-icon { width: 34px; height: 34px; }
    .lantern-audience { font-size: 10px; }.lantern-action { font-size: 13px; gap: 4px; }
    .pick-hint { margin-top: 58px; font-size: 12px; }
    .courtyard-art { position: relative; display: block; height: auto; width: 112%; max-width: none; right: auto; bottom: auto; margin: -5px -6% -3%; }
    .site-footer { flex-wrap: wrap; gap: 8px 14px; padding: 14px 22px 40px; }.site-footer small { width: 100%; text-align: center; }.footer-hills { height: 25px; }
}
@media (min-width: 761px) and (max-height: 520px) { .home { height: auto; min-height: 100svh; }.storybook { min-height: 455px; } }
@media (prefers-reduced-motion: reduce) { .home *, .home *::before, .home *::after { transition: none !important; } }

/* Bilingual paper lanterns: readable faces with a continuous gentle breeze. */
.header-note { text-align: right; color: #69765e; }
.header-note small { display: block; font-size: 11px; letter-spacing: 0; margin-top: 5px; color: #89826c; }
.eyebrow small { font-size: 10px; letter-spacing: 0; margin-left: 7px; color: #89826c; }
.lantern-rack { perspective: 900px; margin-top: 38px; gap: clamp(13px, 1.8vw, 22px); }
.lantern-link {
    --duration: 7.6s;
    --phase: -1.8s;
    --accent: #954634;
    --tint: #f2c8ac;
    height: clamp(270px, 42svh, 410px);
    border-radius: 43% 43% 43% 43% / 17% 17% 17% 17%;
    background-image: repeating-linear-gradient(0deg, transparent 0 2px, #86603a08 3px), linear-gradient(90deg, #876a3921, #fff4d96b 30%, #fff8e78c 50%, #fff4d948 70%, #876a3926);
    box-shadow: inset 7px 0 10px #946b3e12, inset -7px 0 10px #946b3e12, 4px 7px 0 #dcc8a954, 9px 14px 19px #6f513920;
    padding: 23px 6px 19px;
    gap: 5px;
    transform-origin: 50% -24px;
    animation: lantern-breeze var(--duration) ease-in-out var(--phase) infinite;
    transition: box-shadow .65s ease;
}
.teacher { --accent: #3f6353; --tint: #d0dfc0; --duration: 9.2s; --phase: -5.3s; }
.resources { --accent: #83602e; --tint: #f3df9e; --duration: 8.4s; --phase: -3.5s; }
.lantern-link:hover, .lantern-link:focus-visible { box-shadow: inset 7px 0 10px #946b3e12, inset -7px 0 10px #946b3e12, 4px 7px 0 #dcc8a954, 11px 17px 22px #6f51392c; }
.lantern-cap, .lantern-base { position: absolute; left: 24%; right: 24%; height: 12px; background: linear-gradient(#efd4a0, #bd9256); border: 1px solid #b59161; border-radius: 5px; box-shadow: 0 2px 3px #7154391c; z-index: 2; }
.lantern-cap { top: -5px; }.lantern-base { bottom: -4px; }
.lantern-ribs { position: absolute; inset: 5px 16%; border-left: 1px solid #a58b5f40; border-right: 1px solid #a58b5f40; border-radius: 50%; pointer-events: none; }
.lantern-ribs::before, .lantern-ribs::after { content: ''; position: absolute; inset: 0 20%; border-left: 1px solid #a58b5f35; border-right: 1px solid #a58b5f35; border-radius: 50%; }
.lantern-ribs::after { inset: 0 43%; border-color: #a58b5f20; }
.lantern-icon, .lantern-title, .lantern-english, .lantern-audience, .lantern-action { position: relative; z-index: 1; }
.lantern-icon { width: clamp(28px, 4.6svh, 44px); height: clamp(28px, 4.6svh, 44px); }
.lantern-title { font-size: clamp(22px, 3.3svh, 32px); letter-spacing: 4px; line-height: 1; margin: auto 0; }
.lantern-english { text-align: center; font-family: var(--font-display); font-size: clamp(12px, 1.15vw, 16px); line-height: 1.25; font-weight: 600; }
.lantern-audience { font-size: 10px; text-align: center; }
.lantern-audience small { display: block; font-size: 9px; margin-top: 2px; line-height: 1.3; }
.lantern-action { width: 83%; font-size: 12px; padding-top: 4px; gap: 4px; border-color: #a58b5f45; white-space: nowrap; }
.lantern-action small { font-size: 10px; }
.lantern-action > span { font-size: 16px; }
.lantern-tassel { transform-origin: top center; animation: tassel-breeze calc(var(--duration) * .72) ease-in-out var(--phase) infinite; }
.pick-hint { margin-top: 56px; }
.pick-hint small { display: block; font-size: 11px; margin-top: 5px; color: #91866f; }
@keyframes lantern-breeze {
    0%, 100% { transform: rotateZ(-1.6deg) rotateY(-7deg); }
    50% { transform: rotateZ(1.6deg) rotateY(7deg); }
}
@keyframes tassel-breeze {
    0%, 100% { transform: rotate(3deg); }
    50% { transform: rotate(-3deg); }
}
@media (min-width: 761px) and (max-height: 740px) {
    .lantern-panel { padding-top: 10px; padding-bottom: 10px; }
    .eyebrow { display: none; }
    .lantern-rack { margin-top: 37px; }
    .lantern-link { padding-top: 18px; padding-bottom: 15px; gap: 4px; }
    .lantern-title { font-size: 22px; letter-spacing: 3px; }
    .lantern-english { font-size: 12px; }
    .pick-hint { margin-top: 52px; font-size: 11px; }
    .pick-hint small { font-size: 10px; margin-top: 3px; }
}
@media (max-width: 760px) {
    .lantern-rack { gap: 12px; margin-top: 39px; }
    .lantern-link { height: 302px; padding: 22px 4px 19px; }
    .lantern-title { font-size: 23px; letter-spacing: 4px; }
    .lantern-icon { width: 29px; height: 29px; }
    .lantern-english { font-size: 12px; }
    .lantern-audience { font-size: 9px; }
    .lantern-audience small { font-size: 8px; }
    .lantern-action { font-size: 11px; gap: 3px; }
    .lantern-action small { font-size: 9px; }
    .pick-hint { margin-top: 57px; }
    .pick-hint small { font-size: 10px; }
    .eyebrow small { display: block; margin: 4px 0 0; font-size: 10px; }
}

/* Layered brass trim, curved bamboo ribs and a softly lit paper surface. */
.lantern-link {
    --trim: #ae7941;
    --tint: #edbaa2;
    --accent: #8e3e2e;
    border-color: #c29b72;
    background-image:
        radial-gradient(ellipse at 50% 35%, #fff7d87a 0%, transparent 67%),
        repeating-linear-gradient(0deg, transparent 0 1px, #86603a0b 2px, transparent 3px 5px),
        linear-gradient(90deg, #8753242e, #fff4d94a 23%, #fff8e769 48%, #fff4d938 72%, #87532430);
    box-shadow: inset 3px 0 6px #946b3e1c, inset -3px 0 6px #946b3e1c, inset 0 0 0 3px #fff6db55, 4px 7px 0 #dcc8a93d, 9px 14px 19px #6f513924;
}
.teacher { --accent: #345b49; --tint: #c9dcb9; --trim: #81916a; }
.resources { --accent: #7a5427; --tint: #ebcc8b; --trim: #b28745; }
.lantern-filigree { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--trim); pointer-events: none; }
.lantern-cap, .lantern-base {
    height: 14px;
    left: 23%; right: 23%;
    background: repeating-linear-gradient(90deg, #8e67382b 0 1px, transparent 1px 7px), linear-gradient(#f8e5b8 0%, #d8b678 32%, #b88c4e 74%, #ead0a0 100%);
    border-color: #ad844e;
    box-shadow: inset 0 2px 0 #fff3d5, inset 0 -2px 0 #9a713f66, 0 3px 4px #71543935;
}
.lantern-cap::before, .lantern-base::before { content: ''; position: absolute; inset: 3px 6px; border: 1px solid #97714155; border-radius: 2px; }
.lantern-cap::after { content: ''; position: absolute; width: 8px; height: 8px; border: 2px solid #b3874e; border-radius: 50%; left: calc(50% - 4px); top: -9px; background: #fff5db; }
.lantern-base::after { content: ''; position: absolute; width: 8px; height: 8px; background: #b28b55; border: 1px solid #ead2a0; border-radius: 50%; left: calc(50% - 4px); bottom: -7px; box-shadow: 0 2px 2px #6f513924; }
.lantern-cap { top: -6px; }.lantern-base { bottom: -5px; }
.lantern-icon { filter: drop-shadow(0 1px 0 #fff5db) drop-shadow(1px 2px 2px #73563225); }
.lantern-title { text-shadow: 0 1px 0 #fff5d8b0, 1px 2px 1px #785f3212; }
.lantern-tassel { width: 2px; background: linear-gradient(90deg, #fff0c58c, var(--cord)); }
.lantern-tassel::before { width: 10px; height: 11px; left: -4px; background: radial-gradient(circle at 35% 30%, #f6d596, #bd9150 55%, #8d653a); border: 1px solid #d0aa73; }
.lantern-tassel::after { height: 28px; width: 19px; left: -8px; border-radius: 5px 5px 3px 3px; background: repeating-linear-gradient(90deg, var(--cord) 0 1px, #fff0ca82 1px 1.5px, transparent 1.5px 2.7px); filter: drop-shadow(1px 2px 1px #7f5e3420); }

/* Licensed plum-blossom lantern artwork, framed from the unchanged PNG. */
.lantern-link {
    --duration: 8.8s; --phase: -1.8s; --accent: #783628;
    height: clamp(320px, 48svh, 400px);
    display: block; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none;
    animation: lantern-breeze var(--duration) ease-in-out var(--phase) infinite;
    transform-origin: 50% -24px;
}
.teacher { --duration: 10.2s; --phase: -5.3s; --accent: #663829; }
.resources { --duration: 9.5s; --phase: -3.5s; --accent: #702f40; }
.lantern-art { position: absolute; top: 0; left: 0; width: 100%; height: 86%; overflow: visible; filter: drop-shadow(3px 6px 3px #855b3920); transition: filter .4s ease; }
.lantern-link:hover, .lantern-link:active, .lantern-link:focus-visible { background: none; box-shadow: none; }
.lantern-link:hover .lantern-art { filter: drop-shadow(3px 8px 5px #855b3938); }
.lantern-link::before { background: #bc8054; }
.lantern-title { position: absolute; top: 44%; left: 50%; transform: translateX(-50%); margin: 0; font-size: clamp(22px, 3.2svh, 28px); letter-spacing: 3px; line-height: 1.05; color: var(--accent); text-shadow: 0 1px 0 #fff6e940; }
.lantern-english { position: absolute; top: 72%; left: 0; width: 100%; font-size: 12px; line-height: 1.15; color: var(--accent); }
.lantern-audience { position: absolute; top: 88%; left: -8px; right: -8px; font-size: 10px; color: #75674e; }
.lantern-audience small { font-size: 9px; }
.lantern-action { position: absolute; top: 100%; left: 0; width: 100%; padding: 5px 0 0; border-top: 1px solid #cdb68d80; font-size: 12px; color: var(--accent); }
.pick-hint { margin-top: 48px; }
@keyframes lantern-breeze {
    0%, 100% { transform: rotateZ(-1.8deg) rotateY(-4deg); }
    50% { transform: rotateZ(1.8deg) rotateY(4deg); }
}
@media (min-width: 761px) and (max-height: 740px) {
    .lantern-link { height: clamp(285px, 47svh, 348px); padding: 0; }
    .lantern-title { font-size: 22px; letter-spacing: 2px; }
    .pick-hint { margin-top: 43px; }
}
@media (max-width: 760px) {
    .lantern-link { height: 350px; padding: 0; }
    .lantern-title { font-size: 24px; }
    .lantern-english { font-size: 11px; }
    .lantern-audience { font-size: 9px; }
    .lantern-audience small { font-size: 8px; }
    .lantern-action { font-size: 11px; }
    .pick-hint { margin-top: 46px; }
}
/* A small paper pendant keeps the bilingual labels clear below the blossoms. */
.lantern-label { position: absolute; top: 43%; height: 42%; left: 17%; width: 66%; background: linear-gradient(90deg, #f2c7a8, #ffdfbe 48%, #efbb9c); clip-path: polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%); }
.teacher .lantern-label { background: linear-gradient(90deg, #bad7be, #e1edc9 48%, #b6d0b0); }
.resources .lantern-label { background: linear-gradient(90deg, #e9b5b9, #f9d5d0 48%, #e3a6b4); }
.lantern-label::before { content: ''; position: absolute; inset: 5px 5px 14px; border: 1px solid #ac754e45; }
.lantern-label .lantern-title { top: 6%; font-size: 22px; letter-spacing: 1px; }
.lantern-label .lantern-english { top: auto; bottom: 12%; font-size: 12px; }
@media (min-width: 761px) and (max-height: 740px) {
    .lantern-label { height: 44%; }
    .lantern-label .lantern-title { font-size: 18px; letter-spacing: 1px; }
    .lantern-label .lantern-english { font-size: 11px; bottom: 10%; }
}
@media (max-width: 760px) {
    .lantern-label { left: 12%; width: 76%; height: 44%; }
    .lantern-label .lantern-title { font-size: 21px; letter-spacing: 1px; }
    .lantern-label .lantern-english { font-size: 10px; bottom: 11%; }
}