/*
Theme Name: 玛哈奇纳 · MaHaCina
Author: Maha
Description: 中华文明宇宙入口
Version: 3.1.0
*/

:root {
  --night: #050a0f;
  --night-soft: #0c141b;
  --paper: #eadfc9;
  --paper-light: #f4ebda;
  --ink: #2b2118;
  --ink-soft: #786650;
  --gold: #c69b57;
  --gold-light: #e5c68e;
  --line: rgba(132, 91, 43, .32);
  --content: 1240px;
  --cjk-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", SimSun, serif;
  --serif: var(--cjk-serif);
  --sans: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

/* A bookish system-font palette for Latin-language editions: no extra download. */
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) {
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .brand-name { letter-spacing: .08em; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .brand-tagline { letter-spacing: .07em; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .hero-title { letter-spacing: .035em; padding-left: 0; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .hero-subtitle { letter-spacing: .055em; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .section-heading h2 { letter-spacing: .025em; padding-left: 0; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .section-heading p { letter-spacing: .035em; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .section-eyebrow { font-size: clamp(.95rem, 1.15vw, 1.12rem); font-weight: 600; line-height: 1.2; letter-spacing: .26em; padding-left: .26em; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .portal-title { font-size: clamp(1.62rem, 2vw, 2.15rem); letter-spacing: .025em; padding-left: 0; white-space: nowrap; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .portal-desc { letter-spacing: .018em; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .portal-link { letter-spacing: .04em; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .value h3 { letter-spacing: .035em; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .value p { letter-spacing: .012em; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .site-footer { letter-spacing: .045em; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .hero-title.hero-title-cjk { font-family: var(--cjk-serif); letter-spacing: .13em; padding-left: .13em; }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .section-eyebrow,
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .menu-list small { font-family: var(--cjk-serif); }
:is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .portal-card .portal-en { display: none; }

/* Japanese edition uses local Mincho/Gothic faces and the same Chinese ornament system. */
html[lang^="ja"] {
  --serif: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", var(--cjk-serif);
  --sans: "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", sans-serif;
}
html[lang^="ja"] .brand-name { letter-spacing: .08em; }
html[lang^="ja"] .brand-tagline { letter-spacing: .08em; }
html[lang^="ja"] .hero-title.hero-title-cjk { font-family: var(--cjk-serif); letter-spacing: .13em; padding-left: .13em; }
html[lang^="ja"] .hero-subtitle { letter-spacing: .075em; }
html[lang^="ja"] .section-eyebrow { font-family: var(--cjk-serif); font-size: clamp(.95rem, 1.15vw, 1.12rem); font-weight: 600; line-height: 1.2; letter-spacing: .26em; padding-left: .26em; }
html[lang^="ja"] .section-heading h2 { letter-spacing: .08em; padding-left: .08em; }
html[lang^="ja"] .section-heading p { letter-spacing: .07em; }
html[lang^="ja"] .portal-title { font-size: clamp(1.62rem, 2vw, 2.15rem); letter-spacing: .08em; padding-left: .08em; white-space: nowrap; }
html[lang^="ja"] .portal-card .portal-en { display: none; }
html[lang^="ja"] .portal-desc { letter-spacing: .035em; }
html[lang^="ja"] .portal-link { letter-spacing: .06em; }
html[lang^="ja"] .value h3 { letter-spacing: .07em; }
html[lang^="ja"] .value p { letter-spacing: .025em; }
html[lang^="ja"] .menu-list small { font-family: var(--cjk-serif); }
html[lang^="ja"] .site-footer { letter-spacing: .06em; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--night); color: #fff; font-family: var(--sans); }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }

.site-header {
  position: absolute; inset: 0 0 auto; z-index: 30;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 28px clamp(24px, 4vw, 68px); color: var(--gold-light);
}
.brand { display: flex; align-items: center; gap: 12px; width: fit-content; }
.brand-mark { width: 72px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,.34)) drop-shadow(0 0 12px rgba(229,198,142,.11)); }
.brand-copy { display: grid; gap: 7px; }
.brand-name, .brand-tagline { display: block; }
.brand-name { font: 700 clamp(1.35rem, 2vw, 1.9rem)/1 var(--serif); letter-spacing: .18em; }
.brand-tagline { font: 400 .68rem/1.3 var(--serif); letter-spacing: .2em; opacity: .78; }
.header-actions { display: flex; align-items: center; gap: 24px; }
.language-switch { position: relative; font-size: .82rem; letter-spacing: .045em; }
.language-current { display: flex; align-items: center; gap: 8px; padding: 6px 3px; border: 0; color: inherit; background: transparent; cursor: pointer; }
.language-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 148px; padding: 8px; visibility: hidden; opacity: 0; transform: translateY(-5px); border: 1px solid rgba(198,155,87,.32); background: rgba(7,13,18,.96); box-shadow: 0 18px 45px rgba(0,0,0,.28); transition: .25s ease; }
.language-switch:hover .language-menu, .language-switch:focus-within .language-menu, .language-switch.is-open .language-menu { visibility: visible; opacity: 1; transform: none; }
.language-menu a { display: block; padding: 9px 10px; color: #cbb691; }
.language-menu a:hover, .language-menu a.is-current { color: var(--gold-light); background: rgba(198,155,87,.1); }
.language-globe { width: 17px; height: 17px; flex: 0 0 auto; fill: currentColor; opacity: .92; filter: drop-shadow(0 0 5px rgba(229,198,142,.14)); }
.menu-button { width: 31px; height: 24px; padding: 2px; border: 0; background: transparent; cursor: pointer; display: grid; align-content: center; gap: 7px; }
.menu-button span { height: 1px; background: var(--gold-light); transition: transform .3s ease; }

.hero { position: relative; width: 100%; height: auto; min-height: 0; aspect-ratio: 3 / 2; overflow: hidden; display: grid; place-items: end center; isolation: isolate; }
.hero-art { position: absolute; inset: 0; z-index: -3; background: url("assets/images/hero-desktop.webp") center / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 50% 40%, transparent 48%, rgba(1,5,9,.25) 100%), linear-gradient(180deg, rgba(1,5,9,.16), transparent 35%); }
.hero::after { content: none; }
.hero-copy { width: min(94%, 980px); margin-bottom: clamp(152px, 16.5vh, 194px); text-align: center; }
.hero-message { position: relative; isolation: isolate; width: fit-content; max-width: 100%; margin: 0 auto; padding: clamp(20px, 2.2vw, 30px) clamp(32px, 6vw, 78px) clamp(18px, 2vw, 27px); }
.hero-message::before { content: ""; position: absolute; z-index: -1; inset: -34px -86px; background: radial-gradient(ellipse at center, rgba(3,9,14,.82) 0%, rgba(3,9,14,.62) 36%, rgba(3,9,14,.28) 58%, rgba(3,9,14,.08) 70%, transparent 79%); pointer-events: none; }
.hero-message::after { content: ""; position: absolute; left: 13%; right: 13%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(229,198,142,.8) 18%, rgba(229,198,142,.8) 82%, transparent); box-shadow: 0 0 18px rgba(198,155,87,.22); }
.hero-title { margin: 0; color: #f0d49e; font: 700 clamp(2.55rem, 5vw, 4.7rem)/1.18 var(--serif); letter-spacing: .16em; padding-left: .16em; text-shadow: 0 3px 8px rgba(0,0,0,.88), 0 0 28px rgba(4,8,12,.9); }
.hero-subtitle { margin: 15px 0 0; color: #ead9b8; font: 400 clamp(.85rem, 1.35vw, 1.05rem)/1.7 var(--serif); letter-spacing: .18em; text-shadow: 0 2px 7px rgba(0,0,0,.95); }
.scroll-cue { width: fit-content; margin: 18px auto 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #93652f; background: transparent; font-size: .5rem; line-height: 1; letter-spacing: .28em; padding-left: .28em; text-shadow: 0 1px 0 rgba(255,246,225,.7), 0 2px 9px rgba(74,45,18,.2); opacity: .92; transition: color .3s ease, opacity .3s ease, transform .3s ease; }
.scroll-cue:hover { transform: translateY(3px); color: #f0d49e; opacity: 1; }
.scroll-cue-shape { width: 18px; height: 30px; border: 1px solid currentColor; border-radius: 10px; position: relative; box-shadow: 0 0 12px rgba(216,181,119,.16); }
.scroll-cue-shape::after { content: ""; width: 2px; height: 5px; border-radius: 2px; background: currentColor; position: absolute; top: 6px; left: 7px; box-shadow: 0 0 6px currentColor; animation: scroll 1.8s ease-in-out infinite; }
@keyframes scroll { 50% { transform: translateY(8px); opacity: .25; } }

.paper-world { position: relative; z-index: 2; margin-top: -40px; color: var(--ink); background: var(--paper-light); isolation: isolate; }
.paper-world::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: -192px; height: 194px; pointer-events: none; background: linear-gradient(180deg, rgba(244,235,218,0) 0%, rgba(244,235,218,.025) 30%, rgba(244,235,218,.11) 48%, rgba(244,235,218,.38) 68%, rgba(244,235,218,.76) 88%, var(--paper-light) 100%); }
.paper-world::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .44; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(85,57,29,.018) 0 1px, transparent 1px 5px), radial-gradient(circle at 15% 50%, rgba(124,85,43,.08), transparent 30%), radial-gradient(circle at 85% 72%, rgba(124,85,43,.07), transparent 28%); }
.scroll-cue-wrap { position: absolute; z-index: 4; top: -76px; left: 50%; transform: translateX(-50%); }
.scroll-cue-wrap .scroll-cue { margin: 0; }
.portal-section { position: relative; z-index: 3; padding: clamp(122px, 9vw, 146px) 28px clamp(100px, 10vw, 150px); }
.section-heading { text-align: center; margin-bottom: 34px; }
.section-eyebrow { color: #9d7138; font: 500 .66rem/1 var(--serif); letter-spacing: .46em; padding-left: .46em; }
.section-heading h2 { margin: 15px 0 9px; color: #302117; font: 900 clamp(2rem, 2.85vw, 2.82rem)/1.22 var(--serif); letter-spacing: .11em; padding-left: .11em; text-shadow: 0 1px 0 rgba(255,255,255,.58); }
.section-heading p { margin: 0; color: var(--ink-soft); font: 400 .92rem/1.6 var(--serif); letter-spacing: .16em; }

.portal-grid { width: min(100%, var(--content)); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.portal-card { --rx: 0deg; --ry: 0deg; --dx: 0px; --dy: 0px; --cdx: 0px; --cdy: 0px; --mx: 50%; --my: 50%; min-width: 0; aspect-ratio: 3 / 5; position: relative; overflow: hidden; border-radius: 13px; color: #f8ead0; box-shadow: 0 22px 45px rgba(54,34,17,.24); isolation: isolate; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0); transform-style: preserve-3d; will-change: transform; transition: transform .65s cubic-bezier(.16,1,.3,1), box-shadow .65s ease; }
.portal-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--portal-image) center / 100% 100% no-repeat; transform: none; }
.portal-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,7,9,.22), rgba(4,7,9,.14) 28%, rgba(4,7,9,.18) 50%, rgba(3,5,6,.92) 100%); transition: opacity .8s ease; }
.portal-card:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-7px); box-shadow: 0 34px 68px rgba(54,34,17,.35), 0 8px 18px rgba(54,34,17,.18); }
.portal-card:hover::before { transform: none; filter: none; }
.portal-card:hover::after { opacity: .88; }
.portal-card-frame { display: none; }
.portal-card-frame::before, .portal-card-frame::after { content: "◆"; position: absolute; color: var(--gold-light); font-size: .52rem; background: rgba(9,10,9,.75); padding: 2px 5px; top: -7px; }
.portal-card-frame::before { left: -5px; }.portal-card-frame::after { right: -5px; }
.portal-light { position: absolute; z-index: 1; inset: -1px; pointer-events: none; opacity: 0; background: radial-gradient(circle 150px at var(--mx) var(--my), rgba(255,224,165,.16), rgba(229,190,124,.055) 42%, transparent 72%); mix-blend-mode: screen; transition: opacity .55s ease; }
.portal-card:hover .portal-light { opacity: 1; }
.portal-atmosphere { position: absolute; z-index: 1; inset: 5%; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.portal-card:hover .portal-atmosphere { opacity: 1; }
.portal-poetry .portal-atmosphere { inset: 22% -30% 19%; background: linear-gradient(100deg, transparent 12%, rgba(169,205,226,.1) 40%, rgba(207,226,234,.14) 53%, transparent 78%); filter: blur(15px); }
.portal-poetry:hover .portal-atmosphere { animation: poetry-mist 6s ease-in-out infinite alternate; }
.portal-calendar .portal-atmosphere { inset: 10% 7% 30%; border: 1px solid rgba(218,189,128,.1); border-radius: 50%; background: repeating-conic-gradient(from 3deg, transparent 0 14deg, rgba(221,192,133,.08) 14.3deg 14.7deg, transparent 15deg 30deg); mask-image: radial-gradient(circle, transparent 0 47%, #000 49% 51%, transparent 53%); }
.portal-calendar:hover .portal-atmosphere { animation: calendar-turn 20s linear infinite; }
.portal-kungfu .portal-atmosphere { inset: 18% -10% 8%; background: radial-gradient(ellipse at 40% 74%, rgba(205,85,39,.15), transparent 52%), linear-gradient(115deg, transparent 30%, rgba(255,170,90,.1) 49%, transparent 66%); filter: blur(10px); }
.portal-kungfu:hover .portal-atmosphere { animation: kungfu-breathe 3.6s ease-in-out infinite alternate; }
.portal-tea .portal-atmosphere { inset: 43% 5% 7%; background: radial-gradient(ellipse at 58% 80%, transparent 0 22%, rgba(210,224,208,.1) 26%, transparent 38%), radial-gradient(ellipse at 68% 72%, transparent 0 19%, rgba(202,220,208,.08) 23%, transparent 34%); filter: blur(9px); }
.portal-tea:hover .portal-atmosphere { animation: tea-steam 5s ease-in-out infinite; }
@keyframes poetry-mist { from { transform: translate3d(-8%,3%,0); } to { transform: translate3d(8%,-2%,0); } }
@keyframes calendar-turn { to { transform: rotate(360deg); } }
@keyframes kungfu-breathe { from { opacity: .45; transform: scale(.98); } to { opacity: 1; transform: scale(1.04); } }
@keyframes tea-steam { 0% { transform: translate3d(0,8%,0) scale(.96); opacity: .25; } 50% { transform: translate3d(2%,-3%,0) scale(1.02); opacity: .9; } 100% { transform: translate3d(-2%,-12%,0) scale(1.06); opacity: .15; } }
.portal-atmosphere::before, .portal-atmosphere::after { content: ""; position: absolute; pointer-events: none; }

/* Poetry: two clearly readable layers of moonlit mist. */
.portal-poetry .portal-atmosphere { inset: 34% -24% 12%; opacity: 0; background: linear-gradient(100deg, transparent 5%, rgba(167,207,231,.08) 24%, rgba(212,231,240,.3) 48%, rgba(151,193,220,.13) 68%, transparent 92%); filter: blur(10px); }
.portal-poetry .portal-atmosphere::before, .portal-poetry .portal-atmosphere::after { left: 8%; width: 84%; height: 28%; border-radius: 50%; border-top: 12px solid rgba(211,231,241,.26); filter: blur(8px); }
.portal-poetry .portal-atmosphere::before { top: 16%; transform: rotate(-5deg); }
.portal-poetry .portal-atmosphere::after { top: 56%; left: 22%; border-color: rgba(151,197,225,.25); transform: rotate(4deg); }
.portal-poetry:hover .portal-atmosphere { opacity: .92; animation: poetry-mist 4.8s ease-in-out infinite alternate; }

/* Calendar: a visible, slowly turning celestial instrument. */
.portal-calendar .portal-atmosphere { inset: 8% 5% 26%; opacity: 0; border: 1px solid rgba(225,196,133,.3); border-radius: 50%; background: repeating-conic-gradient(from 3deg, transparent 0 13deg, rgba(227,198,137,.19) 13.2deg 13.8deg, transparent 14deg 30deg); box-shadow: inset 0 0 28px rgba(171,126,220,.08), 0 0 24px rgba(195,151,232,.09); mask-image: none; }
.portal-calendar .portal-atmosphere::before { inset: 13%; border: 1px solid rgba(226,196,132,.22); border-radius: 50%; }
.portal-calendar .portal-atmosphere::after { inset: 32%; border: 1px solid rgba(229,201,144,.28); border-radius: 50%; box-shadow: 0 0 14px rgba(194,150,232,.14); }
.portal-calendar:hover .portal-atmosphere { opacity: .8; animation: calendar-turn 16s linear infinite; }

/* Kung fu: warm breath and rising embers, held away from the copy. */
.portal-kungfu .portal-atmosphere { inset: 12% 0 4%; opacity: 0; background: radial-gradient(ellipse at 35% 72%, rgba(217,83,32,.3), transparent 43%), linear-gradient(118deg, transparent 28%, rgba(255,168,83,.18) 49%, transparent 67%); filter: blur(7px); }
.portal-kungfu .portal-atmosphere::before { inset: 8% 5% 12%; background-image: radial-gradient(circle, rgba(255,176,83,.8) 0 1px, transparent 1.8px), radial-gradient(circle, rgba(212,74,34,.72) 0 1.2px, transparent 2px); background-position: 8% 82%, 76% 74%; background-size: 43px 61px, 57px 79px; }
.portal-kungfu:hover .portal-atmosphere { opacity: .9; animation: kungfu-breathe 3.2s ease-in-out infinite alternate; }
.portal-kungfu:hover .portal-atmosphere::before { animation: ember-rise 4.8s linear infinite; }
@keyframes ember-rise { from { transform: translateY(8%); opacity: .25; } 45% { opacity: 1; } to { transform: translateY(-16%); opacity: .08; } }

/* Tea: three soft strands of steam rising from the lower tea table. */
.portal-tea .portal-atmosphere { inset: 45% 9% 3%; opacity: 0; background: none; filter: none; }
.portal-tea .portal-atmosphere::before, .portal-tea .portal-atmosphere::after { bottom: 5%; width: 28%; height: 58%; border-left: 7px solid rgba(218,232,221,.28); border-radius: 48% 52% 42% 58%; filter: blur(6px); }
.portal-tea .portal-atmosphere::before { left: 38%; box-shadow: 28px -18px 0 -2px rgba(206,226,214,.2); transform: rotate(7deg); }
.portal-tea .portal-atmosphere::after { left: 58%; height: 48%; border-color: rgba(227,236,223,.24); transform: rotate(-8deg); }
.portal-tea:hover .portal-atmosphere { opacity: 1; animation: none; }
.portal-tea:hover .portal-atmosphere::before { animation: steam-left 3.8s ease-in-out infinite; }
.portal-tea:hover .portal-atmosphere::after { animation: steam-right 4.4s .35s ease-in-out infinite; }
@keyframes steam-left { 0% { transform: translate3d(0,12%,0) rotate(7deg) scale(.86); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate3d(-13%,-28%,0) rotate(-6deg) scale(1.14); opacity: 0; } }
@keyframes steam-right { 0% { transform: translate3d(0,8%,0) rotate(-8deg) scale(.9); opacity: 0; } 32% { opacity: .82; } 100% { transform: translate3d(14%,-32%,0) rotate(7deg) scale(1.12); opacity: 0; } }
.portal-content { position: relative; z-index: 2; height: 100%; padding: 38px 24px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; transform: translate3d(var(--cdx),var(--cdy),24px); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.portal-symbol, .portal-title, .portal-en, .portal-desc, .portal-link { transition: transform .65s cubic-bezier(.16,1,.3,1), border-color .45s ease, background .45s ease, color .45s ease; }
.portal-card:hover .portal-symbol { transform: translateY(-3px); }
.portal-card:hover .portal-title, .portal-card:hover .portal-en { transform: translateY(-2px); }
.portal-card:hover .portal-desc { transform: translateY(2px); }
.portal-card:hover .portal-link { transform: translateY(-4px); border-color: rgba(242,207,144,.96); background: rgba(3,5,7,.58); }
.portal-symbol { width: 56px; height: 56px; border: 1px solid rgba(224,185,119,.7); border-radius: 50%; display: grid; place-items: center; color: var(--gold-light); font: 400 1.4rem/1 var(--serif); backdrop-filter: blur(4px); background: rgba(4,7,9,.18); }
.portal-title { margin: 15px 0 2px; font: 600 clamp(1.8rem, 2.2vw, 2.4rem)/1.2 var(--serif); letter-spacing: .16em; padding-left: .16em; }
.portal-en { color: var(--gold-light); font-size: .64rem; letter-spacing: .13em; }
.portal-desc { margin: 17px auto 0; font: 400 .82rem/1.85 var(--serif); letter-spacing: .08em; text-shadow: 0 2px 12px #000; }
.portal-link { position: relative; isolation: isolate; overflow: hidden; margin-top: auto; min-width: 122px; padding: 8px 16px; border: 1px solid rgba(224,185,119,.8); border-radius: 999px; color: var(--gold-light); font: 500 .8rem/1 var(--serif); letter-spacing: .12em; background: rgba(3,5,7,.42); backdrop-filter: blur(5px); }
.portal-link::before { content: ""; position: absolute; z-index: -1; top: -80%; bottom: -80%; left: -58%; width: 42%; pointer-events: none; opacity: 0; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,224,164,.34), rgba(255,244,216,.52), transparent); }
.portal-link::after { content: ""; position: absolute; inset: 1px; z-index: -1; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 0 rgba(239,197,126,0), inset 0 0 15px rgba(239,197,126,0); }
.portal-link-label, .portal-arrow { position: relative; z-index: 1; }
.portal-arrow { display: inline-block; margin-left: 8px; letter-spacing: 0; }
.portal-arrow::before { content: ""; position: absolute; top: 50%; right: calc(100% + 2px); width: 0; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, currentColor); opacity: 0; }
.portal-card:hover .portal-link::before { animation: portal-gold-sweep .92s .12s cubic-bezier(.22,.7,.2,1) 1 both; }
.portal-card:hover .portal-link::after { animation: portal-border-awaken .9s ease-out 1 both; }
.portal-card:hover .portal-arrow { animation: portal-arrow-invite .9s .08s cubic-bezier(.22,.7,.2,1) 1 both; }
.portal-card:hover .portal-arrow::before { animation: portal-arrow-trail .9s .08s cubic-bezier(.22,.7,.2,1) 1 both; }
.portal-link:hover { color: #ffe7b3; border-color: rgba(255,220,151,.98); background: rgba(61,42,20,.62); }
.portal-card.is-unavailable { cursor: default; }
.portal-link-disabled { color: rgba(229,198,142,.82); border-color: rgba(224,185,119,.52); background: rgba(3,5,7,.32); }
.portal-card.is-unavailable:hover .portal-link-disabled { border-color: rgba(224,185,119,.62); background: rgba(3,5,7,.4); }
.portal-card.is-unavailable .portal-link::before,
.portal-card.is-unavailable .portal-link::after { display: none; }
@keyframes portal-gold-sweep { 0% { left: -58%; opacity: 0; } 18% { opacity: .95; } 76% { opacity: .7; } 100% { left: 118%; opacity: 0; } }
@keyframes portal-border-awaken { 0% { box-shadow: inset 0 0 0 0 rgba(239,197,126,0), inset 0 0 15px rgba(239,197,126,0); } 45% { box-shadow: inset 0 0 0 1px rgba(255,222,156,.32), inset 0 0 17px rgba(239,197,126,.2); } 100% { box-shadow: inset 0 0 0 0 rgba(239,197,126,0), inset 0 0 15px rgba(239,197,126,.06); } }
@keyframes portal-arrow-invite { 0%, 100% { transform: translateX(0); } 42% { transform: translateX(6px); } 68% { transform: translateX(3px); } }
@keyframes portal-arrow-trail { 0%, 100% { width: 0; opacity: 0; } 34% { width: 9px; opacity: .72; } 62% { width: 4px; opacity: .35; } }
.portal-poetry { --portal-image: url("assets/images/portal-poetry.webp"); }
.portal-calendar { --portal-image: url("assets/images/portal-calendar.webp"); }
.portal-kungfu { --portal-image: url("assets/images/portal-kungfu.webp"); }
.portal-tea { --portal-image: url("assets/images/portal-tea.webp"); }

/* Daylight reveal replaces the earlier card-specific atmosphere effects. */
@property --day-core { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --day-edge { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.portal-card { transform: translateY(0); transform-style: flat; will-change: auto; }
.portal-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(54,34,17,.31); }
.portal-card::before, .portal-card:hover::before { transform: none; filter: none; }
.portal-card:hover::after { opacity: 1; }
.portal-content { transform: none; }
.portal-card:hover .portal-symbol, .portal-card:hover .portal-title, .portal-card:hover .portal-en, .portal-card:hover .portal-desc, .portal-card:hover .portal-link { transform: none; }
.portal-card:hover .portal-link { border-color: rgba(242,207,144,.96); background: rgba(3,5,7,.52); }
.portal-daylight { --day-core: 0%; --day-edge: 0%; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; transform: none; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 var(--day-core), transparent var(--day-edge)); mask-image: radial-gradient(circle at 50% 50%, #000 0 var(--day-core), transparent var(--day-edge)); transition: --day-core 1.22s cubic-bezier(.4,0,.2,1), --day-edge 1.38s cubic-bezier(.4,0,.2,1), opacity .55s ease; }
.portal-card:hover .portal-daylight.is-ready { --day-core: 132%; --day-edge: 165%; opacity: 1; transform: none; }
.portal-kungfu:hover::after, .portal-tea:hover::after { opacity: .67; }
@supports not (mask-image: radial-gradient(circle, #000, transparent)) {
  .portal-daylight { opacity: 0; -webkit-mask-image: none; transition: opacity .7s ease; }
  .portal-card:hover .portal-daylight.is-ready { opacity: 1; }
}

.values { position: relative; padding: 0 28px clamp(88px, 8vw, 118px); }
.values-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.values-inner { width: min(100%, 1180px); margin: 0 auto; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 27px 0 20px; background: rgba(248,240,225,.36); border: 1px solid rgba(142,96,46,.26); box-shadow: 0 18px 48px rgba(79,49,20,.04); }
.values-inner::before, .values-inner::after { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid rgba(142,96,46,.46); background: var(--paper-light); transform: rotate(45deg); }
.values-inner::before { left: -4px; top: -4px; }.values-inner::after { right: -4px; bottom: -4px; }
.value { min-width: 0; min-height: 112px; position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 16px; align-items: center; padding: 12px clamp(18px, 2vw, 28px); }
.value + .value { border-left: 1px solid rgba(142,96,46,.2); }
.value-icon { width: 42px; height: 42px; position: relative; display: grid; place-items: center; color: #91612e; border: 1px solid rgba(145,97,46,.32); border-radius: 50%; background: rgba(255,250,239,.34); transition: color .35s ease, border-color .35s ease, transform .4s cubic-bezier(.16,1,.3,1); }
.value-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.value-copy { min-width: 0; }
.value h3 { margin: 0 0 6px; color: #39291d; font: 700 clamp(.92rem, 1.14vw, 1.04rem)/1.3 var(--serif); letter-spacing: .13em; }
.value p { margin: 0; color: #806c54; font: 400 clamp(.64rem, .75vw, .72rem)/1.55 var(--serif); letter-spacing: .035em; }
.value:hover .value-icon { color: #74471f; border-color: rgba(145,97,46,.58); transform: translateY(-2px); }
.values-quote { grid-column: 1 / -1; position: relative; width: calc(100% - 64px); margin: 14px auto 0; padding: 24px 70px 8px; border-top: 1px solid rgba(142,96,46,.18); text-align: center; color: #5d452f; font: 500 clamp(.82rem, 1.15vw, .98rem)/1.85 var(--serif); letter-spacing: .12em; background: radial-gradient(ellipse at 50% 80%, rgba(157,108,54,.065), transparent 68%); }
html[lang^="en"] .values-quote { font-family: var(--cjk-serif); font-weight: 500; letter-spacing: .14em; }
.values-quote::before { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; border: 1px solid rgba(142,96,46,.42); background: #f4ebda; transform: translateX(-50%) rotate(45deg); }
.quote-text { position: relative; z-index: 1; }
.quote-mark { position: absolute; color: rgba(145,96,45,.27); font: 700 clamp(2.4rem, 4vw, 3.8rem)/1 var(--cjk-serif); pointer-events: none; }
.quote-mark-open { left: 18px; top: 15px; }
.quote-mark-close { right: 18px; bottom: -6px; }
.site-footer { color: #755f47; padding: 30px 24px 42px; text-align: center; border-top: 1px solid rgba(119,86,48,.16); font-size: .7rem; letter-spacing: .12em; }

.menu-panel { position: fixed; inset: 0; z-index: 60; visibility: hidden; opacity: 0; transition: opacity .35s, visibility .35s; background: rgba(2,6,9,.78); backdrop-filter: blur(12px); }
.menu-panel[aria-hidden="false"] { visibility: visible; opacity: 1; }
.menu-sheet { margin-left: auto; width: min(440px, 90vw); height: 100%; padding: 92px 50px; color: #efdfc0; background: rgba(8,14,19,.96); border-left: 1px solid rgba(198,155,87,.35); transform: translateX(100%); transition: transform .55s cubic-bezier(.16,1,.3,1); }
.menu-panel[aria-hidden="false"] .menu-sheet { transform: none; }
.menu-close { position: absolute; top: 28px; right: 32px; border: 0; color: var(--gold-light); background: transparent; font-size: 1.8rem; cursor: pointer; }
.menu-sheet h2 { color: var(--gold); font: 500 .82rem/1 var(--serif); letter-spacing: .4em; }
.menu-list { list-style: none; margin: 25px 0 0; padding: 0; }
.menu-list a, .menu-list .menu-unavailable { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.08); font: 500 1.35rem/1.2 var(--serif); }
.menu-list .menu-unavailable { color: rgba(239,223,192,.58); cursor: default; }
.menu-list small { color: #9d8a70; font: .62rem/1 var(--sans); letter-spacing: .12em; }

.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 1024px) {
  .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
  .values-inner { grid-template-columns: repeat(2, 1fr); }
  .value:nth-child(3) { border-left: 0; }
  .value:nth-child(n+3) { border-top: 1px solid rgba(142,96,46,.2); }
}
@media (max-width: 640px) {
  .site-header { padding: 20px; }
  .brand { gap: 8px; }
  .brand-mark { width: 48px; }
  .brand-name { font-size: 1.2rem; }.brand-tagline { font-size: .58rem; }
  .header-actions { gap: 14px; }.language-switch { font-size: .74rem; }
  .hero { min-height: 660px; height: 88svh; }
  .hero-art { background-position: 58% 42%; }
  .hero-copy { margin-bottom: 88px; }
  .hero-message { width: min(100%, 520px); padding: 17px 18px 16px; }
  .hero-message::before { inset: -22px -24px; }
  .hero-title { font-size: clamp(1.68rem, 7.2vw, 2.25rem); letter-spacing: .06em; padding-left: .06em; white-space: nowrap; }
  :is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .hero-title { max-width: 13em; margin-inline: auto; font-size: clamp(1.62rem, 7vw, 2.15rem); line-height: 1.12; letter-spacing: .02em; padding-left: 0; white-space: normal; text-wrap: balance; }
  :is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .hero-title.hero-title-cjk { max-width: none; font-size: clamp(1.68rem, 7.2vw, 2.25rem); line-height: 1.18; letter-spacing: .07em; padding-left: .07em; white-space: nowrap; }
  :is(html[lang^="en"], html[lang^="es"], html[lang^="fr"]) .hero-subtitle { letter-spacing: .035em; }
  html[lang^="ja"] .hero-title.hero-title-cjk { max-width: none; font-size: clamp(1.68rem, 7.2vw, 2.25rem); line-height: 1.18; letter-spacing: .07em; padding-left: .07em; white-space: nowrap; }
  html[lang^="ja"] .hero-subtitle { letter-spacing: .045em; }
  .hero-subtitle { font-size: .78rem; letter-spacing: .12em; padding: 0 22px; }
  .scroll-cue { display: none; }
  .paper-world { margin-top: -28px; }
  .paper-world::after { top: -138px; height: 140px; }
  .portal-section { padding: 96px 20px clamp(100px, 10vw, 150px); }
  .section-heading { margin-bottom: 25px; }.section-heading h2 { letter-spacing: .16em; padding-left: .16em; }
  .portal-grid { grid-template-columns: 1fr; width: min(100%, 390px); gap: 18px; }
  .portal-card { aspect-ratio: 3 / 5; }
  .portal-content { padding-inline: 30px; }
  .values { padding-inline: 20px; }.values-inner { grid-template-columns: 1fr; padding-block: 12px; }
  .value { min-height: 96px; padding: 18px 22px; }
  .value-icon { width: 40px; height: 40px; }
  .value + .value { border-left: 0; border-top: 1px solid rgba(142,96,46,.2); }
  .values-quote { width: calc(100% - 28px); padding: 24px 34px 9px; }
  .quote-mark-open { left: 5px; }.quote-mark-close { right: 5px; }
  .menu-sheet { padding: 85px 30px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }