:root {
  --ink: #f7f3ff;
  --muted: #b9b1ca;
  --dark: #0b0814;
  --panel: #141024;
  --purple: #9c70ff;
  --pink: #ff79c9;
  --gold: #d9bd83;
  --line: rgba(255,255,255,.14);
  --max: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--dark); }
body { margin: 0; color: var(--ink); background: var(--dark); font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif; line-height: 1.7; overflow-x: hidden; }
body.is-locked { overflow: hidden; }
button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button:focus-visible,a:focus-visible,input:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 999; left: 1rem; top: 1rem; padding: .7rem 1rem; background: #fff; color: #111; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.kicker { margin: 0 0 1rem; color: var(--gold); font: 700 .7rem/1.4 Arial, sans-serif; letter-spacing: .24em; }
.section { position: relative; padding: 9rem max(5vw, 2rem); }
.section-index { position: absolute; right: 4vw; top: 5rem; color: rgba(255,255,255,.035); font: 800 clamp(7rem, 17vw, 17rem)/.8 Arial, sans-serif; pointer-events: none; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Entry */
.entry { position: fixed; inset: 0; z-index: 500; background: #090712; display: grid; place-items: center; transition: opacity 1s ease, visibility 1s ease; }
.entry.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.entry__art { position: absolute; inset: 0; background: url("assets/images/entry-splash.png") center/cover no-repeat; transform: scale(1.015); animation: entryBreath 12s ease-in-out infinite alternate; }
.entry__shade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 49%, rgba(12,8,27,.08) 0 13%, rgba(8,6,17,.34) 37%, rgba(4,3,10,.77) 100%), linear-gradient(180deg, rgba(4,2,9,.28), transparent 30%, transparent 70%, rgba(4,2,9,.7)); }
.entry__content { position: relative; width: min(620px, 84vw); display: flex; flex-direction: column; align-items: center; text-align: center; }
.entry__logo { width: min(500px, 78vw); filter: drop-shadow(0 18px 34px rgba(4,0,14,.78)); }
.entry__eyebrow { margin: -2.1rem 0 1.5rem; color: #d8cce8; font: 600 .68rem/1 Arial, sans-serif; letter-spacing: .29em; }
.entry__button { width: min(380px, 76vw); border: 1px solid rgba(255,255,255,.55); background: rgba(9,5,21,.72); color: #fff; padding: .4rem .45rem .4rem 1.8rem; min-height: 68px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; backdrop-filter: blur(12px); transition: background .3s, border-color .3s, transform .3s; font-size: 1rem; }
.entry__button i { width: 56px; height: 56px; display: grid; place-items: center; background: linear-gradient(135deg, var(--purple), var(--pink)); font-style: normal; font-size: 1.4rem; }
.entry__button:hover { background: rgba(117,76,205,.35); border-color: #fff; transform: translateY(-2px); }
.entry__sound { border: 0; background: none; color: rgba(255,255,255,.65); margin-top: 1.2rem; font: 600 .63rem/1 Arial, sans-serif; letter-spacing: .16em; display: flex; gap: .65rem; align-items: center; cursor: pointer; }
.sound-bars { display: inline-flex; height: 13px; gap: 2px; align-items: flex-end; }
.sound-bars i { width: 2px; height: 35%; background: currentColor; animation: bar .8s ease-in-out infinite alternate; }
.sound-bars i:nth-child(2) { height: 100%; animation-delay: -.5s; }.sound-bars i:nth-child(3) { height: 65%; animation-delay: -.25s; }
[aria-pressed="false"] .sound-bars i { animation-play-state: paused; height: 2px; }
.entry__hint { position: absolute; bottom: 2.2rem; margin: 0; color: rgba(255,255,255,.5); font-size: .68rem; letter-spacing: .16em; }
@keyframes entryBreath { to { transform: scale(1.055); } }
@keyframes bar { to { height: 18%; } }

/* Header */
.site-header { position: fixed; z-index: 100; left: 0; right: 0; top: 0; height: 78px; padding: 0 3vw; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(8,6,16,.9), rgba(8,6,16,0)); transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(8,6,16,.86); backdrop-filter: blur(14px); border-color: var(--line); }
.brand img { width: 112px; height: 68px; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 2rem; font-size: .75rem; letter-spacing: .08em; }
.site-nav a:not(.nav-cta) { color: #ddd6e8; transition: color .2s; }.site-nav a:not(.nav-cta):hover { color: #fff; }
.nav-cta { display: inline-flex; gap: 1.4rem; align-items: center; padding: .65rem .8rem .65rem 1.1rem; border: 1px solid rgba(255,255,255,.35); }
.nav-cta span { color: var(--pink); }
.nav-toggle { display: none; border: 1px solid var(--line); color: #fff; background: rgba(0,0,0,.25); padding: .55rem .7rem; font: 600 .65rem Arial, sans-serif; letter-spacing: .13em; }

/* Hero */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: 10rem max(6vw, 2rem) 10vh; overflow: hidden; }
.hero__backdrop { position: absolute; inset: 0; background: url("assets/images/academy-gate-v2.png") 50% 50%/cover no-repeat; transform: scale(1.02); }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,6,18,.92) 0, rgba(8,6,18,.64) 42%, rgba(8,6,18,.08) 75%), linear-gradient(0deg, #0b0814 0, transparent 25%, rgba(6,4,13,.15)); }
.hero__copy { position: relative; z-index: 2; width: min(740px, 86vw); }
.hero h1 { margin: 0; font-size: clamp(2.7rem, 6vw, 6.2rem); line-height: 1.12; letter-spacing: -.055em; font-weight: 500; word-break: keep-all; }
.hero h1 em { color: #dbc2ff; font-style: normal; font-family: Georgia, "Times New Roman", serif; font-weight: 500; text-shadow: 0 0 40px rgba(156,112,255,.28); }
.hero__lead { width: min(610px, 100%); color: #c8c0d3; font-size: clamp(.95rem, 1.4vw, 1.1rem); margin: 2rem 0 2.3rem; word-break: keep-all; }
.text-link { display: inline-flex; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: .45rem; font-size: .78rem; letter-spacing: .08em; }
.hero__stamp { position: absolute; right: 8vw; bottom: 11vh; z-index: 2; width: 130px; aspect-ratio: 1; border: 1px solid rgba(217,189,131,.55); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gold); transform: rotate(-8deg); }
.hero__stamp::before { content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(217,189,131,.35); border-radius: 50%; }
.hero__stamp strong { font: 500 2rem Georgia, serif; }.hero__stamp span,.hero__stamp small { font: 600 .53rem Arial,sans-serif; letter-spacing: .2em; }
.scroll-mark { position: absolute; right: 2.5vw; bottom: 7vh; z-index: 2; writing-mode: vertical-rl; font: 600 .55rem Arial,sans-serif; letter-spacing: .2em; color: rgba(255,255,255,.45); display: flex; align-items: center; gap: .7rem; }
.scroll-mark span { height: 54px; width: 1px; background: rgba(255,255,255,.35); }

/* Orientation */
.orientation { min-height: 100vh; background: linear-gradient(90deg,rgba(8,6,15,.94),rgba(8,6,15,.82)), url("assets/images/headmaster-office-original.png") center/cover fixed; display: grid; grid-template-columns: minmax(380px, 1.05fr) .95fr; gap: clamp(3rem, 6vw, 7rem); align-items: center; }
.orientation__portrait { width: 100%; max-width: 680px; justify-self: end; }
.portrait-frame { position: relative; overflow: hidden; background: linear-gradient(145deg, #23183b, #0e0a1b); border: 1px solid var(--line); }
.portrait-frame::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.12); pointer-events: none; }
.balam-trigger { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.portrait-frame img { width: 100%; height: auto; object-fit: contain; filter: saturate(.9) contrast(1.03); }
.portrait-label { position: absolute; left: 1.8rem; top: 1.5rem; background: rgba(8,5,16,.78); backdrop-filter: blur(8px); border-left: 2px solid var(--purple); padding: .5rem .8rem; font: 600 .62rem Arial,sans-serif; letter-spacing: .15em; }
.orientation__copy { max-width: 680px; }
.orientation h2, .section-heading h2, .finale h2 { margin: 0; font-size: clamp(2.3rem, 4.7vw, 5rem); font-weight: 500; line-height: 1.14; letter-spacing: -.045em; word-break: keep-all; }
.signature { color: var(--gold); font-family: Georgia, serif; font-style: italic; margin: 1.2rem 0 2.3rem; }
.orientation__copy > p:not(.kicker):not(.signature) { color: #c0b9ca; max-width: 620px; word-break: keep-all; }
.aside { color: #e8d8ff; }
.world-notes { grid-column: 1/-1; max-width: var(--max); width: 100%; margin: 2rem auto 0; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.world-notes article { padding: 2rem clamp(1.2rem,3vw,3rem); border-right: 1px solid var(--line); }.world-notes article:last-child { border: 0; }
.world-notes span { color: var(--purple); font: 600 .65rem Arial,sans-serif; }.world-notes h3 { margin: .8rem 0 .45rem; font-size: 1rem; }.world-notes p { color: var(--muted); margin: 0; font-size: .85rem; }

/* Shared heading */
.section-heading { max-width: var(--max); margin: 0 auto 4rem; display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: end; }
.section-heading > p { max-width: 510px; color: var(--muted); margin: 0 0 .7rem; word-break: keep-all; }

/* Reader */
.record { background: linear-gradient(90deg,rgba(12,8,25,.96),rgba(12,8,25,.67)), url("assets/images/auditorium.png") center/cover fixed; }
.record-card { max-width: 1040px; min-height: 260px; margin: 0 auto; padding: clamp(2rem,5vw,4.5rem); display: flex; align-items: center; justify-content: space-between; gap: 3rem; background: rgba(8,5,17,.78); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 32px 80px rgba(0,0,0,.38); backdrop-filter: blur(14px); }
.record-card__copy span { color: var(--gold); font: 600 .62rem Arial,sans-serif; letter-spacing: .2em; }.record-card__copy h3 { margin: .8rem 0 .6rem; font-size: clamp(1.8rem,3vw,3rem); font-weight: 500; }.record-card__copy p { color: var(--muted); max-width: 520px; margin: 0; word-break: keep-all; }
.record-card__button { flex: 0 0 220px; min-height: 64px; display: flex; justify-content: space-between; align-items: center; padding-left: 1.3rem; border: 1px solid rgba(255,255,255,.45); background: rgba(63,37,111,.55); color: #fff; cursor: pointer; transition: transform .25s,background .25s; }.record-card__button:hover { transform: translateY(-3px); background: rgba(110,70,184,.7); }.record-card__button i { align-self: stretch; width: 60px; display: grid; place-items: center; border-left: 1px solid rgba(255,255,255,.25); font-style: normal; color: var(--pink); }

.webtoon-modal { position: fixed; inset: 0; z-index: 600; background: #050309; }
.webtoon-modal[hidden] { display: none; }
.webtoon-modal__header { position: fixed; z-index: 2; inset: 0 0 auto; min-height: 72px; padding: .8rem max(2vw,1rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(7,4,13,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.webtoon-modal__header span { display: block; color: var(--gold); font: 600 .54rem Arial,sans-serif; letter-spacing: .18em; }.webtoon-modal__header strong { font-size: .9rem; font-weight: 600; }.webtoon-modal__header button { border: 1px solid var(--line); background: transparent; color: #fff; min-width: 92px; min-height: 42px; cursor: pointer; }.webtoon-modal__header button i { color: var(--pink); margin-left: .6rem; font-size: 1.2rem; font-style: normal; }
.webtoon-modal__scroll { position: absolute; inset: 0; overflow-y: auto; padding: 72px 0 5rem; scrollbar-color: var(--purple) #110a1b; scrollbar-width: thin; }
.webtoon-strip { width: min(800px,100%); margin: 0 auto; background: #fff; box-shadow: 0 0 90px rgba(116,66,199,.22); }.webtoon-strip img { width: 100%; height: auto; margin: 0; }
.webtoon-modal__end { display: block; min-width: 220px; min-height: 54px; margin: 2.5rem auto 0; border: 1px solid rgba(255,255,255,.35); background: #171020; color: #fff; cursor: pointer; }

/* Students */
.students { background: radial-gradient(circle at 50% 10%,rgba(139,93,221,.09),transparent 27%), #0b0814; }
.attendance { position: sticky; top: 78px; z-index: 20; max-width: var(--max); min-height: 72px; margin: 0 auto 2rem; padding: .7rem 1rem; display: flex; align-items: center; gap: 2rem; background: rgba(10,7,18,.9); border: 1px solid var(--line); backdrop-filter: blur(16px); }
.attendance > div { min-width: 170px; line-height: 1.25; }.attendance > div span { display: block; color: var(--gold); font: 600 .5rem Arial,sans-serif; letter-spacing: .15em; }.attendance > div strong { font-size: .78rem; font-weight: 500; }.attendance > div b { color: var(--pink); }
.attendance nav { display: flex; flex: 1; gap: .45rem; }.attendance nav a { flex: 1; padding: .48rem .6rem; display: flex; align-items: center; justify-content: center; gap: .45rem; color: #777080; border: 1px solid rgba(255,255,255,.07); font-size: .68rem; transition: color .25s,border-color .25s,background .25s; }.attendance nav i { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }.attendance nav a.is-seen { color: #fff; border-color: rgba(156,112,255,.5); background: rgba(156,112,255,.12); }.attendance nav a.is-seen i { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 9px var(--pink); }
.attendance__message { display: none; max-width: 330px; margin: 0; color: #bcb4c8; font-size: .68rem; line-height: 1.45; }.attendance__message.is-unlocked { display: block; animation: unlock .5s ease both; }.attendance__message em { color: #e7daf9; font-style: normal; }
@keyframes unlock { from { opacity:0; transform:translateX(12px); } }
.student-list { max-width: 1440px; margin: 0 auto; }
.student { --accent: var(--purple); position: relative; min-height: 720px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(360px,.8fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: 5rem 0; border-top: 1px solid var(--line); scroll-margin-top: 160px; }
.student:nth-child(even) { grid-template-columns: minmax(360px,.8fr) minmax(0,1.2fr); }
.student::after { content: "CHECKED"; position: absolute; z-index: 5; right: 1rem; top: 6.5rem; padding: .45rem .75rem; border: 2px solid var(--accent); border-radius: 4px; color: var(--accent); font: 800 .7rem Arial,sans-serif; letter-spacing: .16em; opacity: 0; transform: rotate(-9deg) scale(1.5); pointer-events: none; }
.student.is-reviewed::after { animation: stamp .45s cubic-bezier(.2,1.5,.5,1) .1s both; }
@keyframes stamp { to { opacity: .72; transform: rotate(-9deg) scale(1); } }
.student:nth-child(even) .student__visual { order: 2; }.student:nth-child(even) .student__info { order: 1; }
.student--choux { --accent:#ff74b9; }.student--raspberry { --accent:#b98bff; }.student--kiwi { --accent:#b7df4d; }.student--marong { --accent:#86c5ff; }
.student__visual { position: relative; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .75rem; overflow: visible; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%); }
.student__visual::before { content: ""; position: absolute; inset: 9% 7%; border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); clip-path: polygon(10% 0,100% 0,90% 100%,0 100%); }
.student__visual img { position: relative; z-index: 1; width: min(100%, 780px); height: auto; object-fit: contain; filter: drop-shadow(0 25px 30px rgba(0,0,0,.45)); }
.character-image-button { position: relative; z-index: 1; width: min(100%,780px); padding: 0; border: 0; background: transparent; cursor: pointer; transition:transform .35s ease; }.character-image-button:hover{transform:translateY(-4px) rotate(-.25deg)}
.character-image-button img { width: 100%; }
.character-popline { position: relative; z-index: 8; width: min(100%,780px); min-height: 78px; padding: .8rem 1rem; display: flex; flex-direction: column; justify-content: center; background: rgba(250,247,255,.96); color: #1b1326; border: 2px solid var(--accent,var(--purple)); border-radius: 13px; box-shadow: 0 10px 25px rgba(0,0,0,.2); pointer-events: none; animation: bubbleIn .25s cubic-bezier(.2,1.4,.5,1) both; }.character-popline::after{content:"";position:absolute;left:18%;bottom:-10px;width:17px;height:17px;background:inherit;border-right:2px solid var(--accent,var(--purple));border-bottom:2px solid var(--accent,var(--purple));transform:rotate(45deg)}.character-popline strong { display: block; color: color-mix(in srgb,var(--accent,var(--purple)) 80%,#291a3a); font-size: .7rem; }.character-popline p { margin: .18rem 0 0; color: #251c2f; font-size: .84rem; font-weight: 700; line-height: 1.5; word-break: keep-all; }
.character-popline--balam { --accent:#9d78d8; width:calc(100% - 2rem); margin:1rem 1rem .2rem; }
.balam-info-button{width:calc(100% - 2rem);min-height:52px;margin:.7rem 1rem 1rem;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(157,120,216,.55);background:rgba(80,50,130,.35);color:#fff;cursor:pointer}.balam-info-button[hidden]{display:none}.balam-info-button span{color:var(--pink)}
.character-image-button.is-boinging img,.balam-trigger.is-boinging img { animation: boing .58s cubic-bezier(.25,.8,.25,1); }
@keyframes boing { 0%{transform:scale(1) rotate(0)} 28%{transform:scale(.96,1.04) rotate(-1.3deg)} 56%{transform:scale(1.035,.965) rotate(1.1deg)} 78%{transform:scale(.992,1.008) rotate(-.35deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes bubbleIn { from { opacity:0; transform:translateY(8px) scale(.94); } }
.student__number { position: absolute; left: 2%; top: 1%; color: color-mix(in srgb, var(--accent) 30%, transparent); font: 800 9rem/.8 Arial,sans-serif; }
.student__info { position: relative; z-index: 2; max-width: 540px; }
.student__meta { color: var(--accent); font: 600 .65rem Arial,sans-serif; letter-spacing: .2em; }
.student h3 { margin: .7rem 0 0; font-size: clamp(2.7rem,5vw,5rem); line-height: 1; letter-spacing: -.05em; }.student h3 small { display: block; margin-top: .7rem; color: #7e7789; font: 600 .58rem Arial,sans-serif; letter-spacing: .24em; }
.student__quote { margin: 2rem 0 1.35rem; padding: .15rem 0 .15rem 1rem; border-left: 2px solid var(--accent); color: #f4edfb; font-family: Pretendard, "Segoe UI", "Malgun Gothic", sans-serif; font-size: 1.08rem; font-weight: 700; line-height: 1.65; letter-spacing: -.025em; word-break: keep-all; }.student__info > p:not(.student__meta):not(.student__quote) { color: var(--muted); word-break: keep-all; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.8rem 0; padding: 0; }.tags li { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: #d7d0df; padding: .35rem .75rem; font-size: .69rem; }
.student blockquote { margin: 2.2rem 0 0; padding: 1.2rem 1.3rem; border-left: 2px solid var(--accent); background: rgba(255,255,255,.035); color: #aaa2b6; font-size: .82rem; }.student blockquote span { display: block; color: var(--accent); font: 600 .62rem Arial,sans-serif; letter-spacing: .12em; margin-bottom: .35rem; }

.dossier-tabs { margin-top: .3rem; }
.dossier-tabs__nav { display: flex; gap: .4rem; overflow-x: auto; padding: .2rem .1rem .65rem; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.dossier-tabs__nav button { flex: 0 0 auto; min-height: 38px; padding: .4rem .8rem; border: 1px solid rgba(255,255,255,.13); background: transparent; color: #8f8799; cursor: pointer; font-size: .7rem; transition: color .25s,border-color .25s,background .25s,transform .25s; }
.dossier-tabs__nav button[aria-selected="true"] { color: #fff; border-color: color-mix(in srgb,var(--accent) 55%,transparent); background: color-mix(in srgb,var(--accent) 12%,transparent); }
.dossier-tabs__panels { min-height: 185px; padding-top: .7rem; }
.dossier-panel[hidden] { display: none; }
.dossier-panel { animation: panelIn .35s ease both; }
.dossier-panel p { margin: 0; color: var(--muted); word-break: keep-all; }
.dossier-panel .tags { margin: 1.35rem 0 0; }
.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list li { display: grid; grid-template-columns: 54px 1fr; gap: .75rem; padding: .62rem 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .8rem; }.detail-list li:last-child { border-bottom: 0; }.detail-list b { color: var(--accent); font-weight: 600; }.detail-list span { color: var(--muted); }
@keyframes panelIn { from { opacity:0; transform:translateY(7px); } }

/* Inline emotion slider */
.emotion-slider { width:min(100%,780px); display: grid; grid-template-columns: 34px minmax(0,1fr) 34px; gap: .4rem; align-items: center; }
.emotion-slider--balam { width:100%; }
.emotion-slider__window { min-width: 0; overflow: hidden; }
.emotion-slider__track { display: flex; gap: .45rem; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: .2rem; }.emotion-slider__track::-webkit-scrollbar { display:none; }
.emotion-slider__arrow { width: 32px; height: 56px; padding: 0; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: #fff; cursor: pointer; }
.emotion-thumb { position: relative; flex: 0 0 76px; aspect-ratio: 4/3; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: #100b19; cursor: pointer; }.emotion-thumb img { width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .25s,transform .3s; }.emotion-thumb span { position:absolute;inset:auto 3px 3px; padding:.12rem .2rem;background:rgba(5,3,10,.78);color:#ddd5e6;font-size:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.emotion-thumb.is-active { border-color:var(--accent);box-shadow:0 0 0 1px var(--accent); }.emotion-thumb.is-active img { opacity:1; }

/* Balam easter egg */
.balam-modal { position:fixed;inset:0;z-index:670;display:grid;place-items:center;padding:clamp(1rem,4vw,4rem);background:rgba(4,2,9,.92);backdrop-filter:blur(14px); }.balam-modal[hidden]{display:none}.balam-modal__close{position:absolute;right:1.4rem;top:1.3rem;width:48px;height:48px;border:1px solid var(--line);background:#110b1c;color:#fff;font-size:1.5rem;cursor:pointer}.balam-modal__card{width:min(1180px,100%);max-height:92svh;overflow:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(1rem,3vw,2.5rem);border:1px solid var(--line);background:linear-gradient(135deg,#171022,#0b0812);box-shadow:0 30px 90px rgba(0,0,0,.6)}.balam-modal__visual{min-width:0;display:flex;flex-direction:column;gap:.7rem}.balam-modal__visual .character-image-button{width:100%}.balam-modal__visual .character-image-button img{width:100%;border:1px solid rgba(255,255,255,.15)}.balam-modal__visual .character-popline{width:100%}.balam-modal__card h2{margin:.2rem 0 1.2rem;font-size:clamp(3rem,6vw,5rem);line-height:1}.balam-modal__card>div>p:not(.kicker){color:var(--muted)}.balam-modal__card blockquote{margin:1.5rem 0 0;padding:1rem;border-left:2px solid var(--purple);background:rgba(255,255,255,.035);color:#ddd4e8}

@media (hover:hover) {
  .entry__button:hover,.record-card__button:hover,.primary-cta:hover { transform: translateY(-3px); }
  .dossier-tabs__nav button:hover,.attendance nav a:hover,.nav-cta:hover,.audio-dock__toggle:hover,.floating-cta:hover,.emotion-slider__arrow:hover,.balam-modal__close:hover,.webtoon-modal__header button:hover { transform: translateY(-2px); color: #fff; }
  .emotion-thumb:hover img { opacity: 1; transform: scale(1.045); }
  .site-nav a:not(.nav-cta):hover { transform: translateY(-1px); }
}

/* Finale */
.finale { min-height: 84vh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.finale__bg { position: absolute; inset: 0; background: linear-gradient(180deg,#0b0814 0,rgba(8,5,18,.22) 45%,#090611 100%), url("assets/images/rooftop-observatory.png") center/cover no-repeat; filter: saturate(.8); transform: scale(1.03); }
.finale__content { position: relative; z-index: 1; max-width: 760px; }.finale__content > p:not(.kicker) { color: #c0b8cb; max-width: 560px; margin: 1.8rem auto 2.3rem; word-break: keep-all; }.finale__content small { display: block; margin-top: 1rem; color: #7e7789; font-size: .68rem; }
.primary-cta { display: flex; width: min(360px,85vw); min-height: 64px; margin: 0 auto; padding-left: 1.4rem; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.55); background: rgba(10,6,20,.75); backdrop-filter: blur(10px); transition: transform .25s, background .25s; }.primary-cta i { align-self: stretch; width: 62px; display: grid; place-items: center; font-style: normal; font-size: 1.3rem; background: linear-gradient(135deg,var(--purple),var(--pink)); }.primary-cta:hover { transform: translateY(-3px); background: rgba(75,47,126,.75); }

/* Footer and controls */
.site-footer { min-height: 170px; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 2rem 4vw 6rem; border-top: 1px solid var(--line); color: #6f6978; font: 600 .55rem Arial,sans-serif; letter-spacing: .14em; }.site-footer img { width: 120px; }.site-footer a { color: #aaa2b5; }
.audio-dock { position: fixed; z-index: 90; left: 1.5rem; bottom: 1.4rem; height: 52px; display: flex; align-items: center; gap: .8rem; padding: .45rem .8rem .45rem .45rem; background: rgba(10,7,18,.86); border: 1px solid var(--line); backdrop-filter: blur(12px); transition: transform .3s; }.audio-dock__toggle { width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: #6f4eb1; color: #fff; cursor: pointer; }.audio-dock__info { line-height: 1.15; min-width: 145px; }.audio-dock__info span { display: block; color: #847b8f; font: 600 .5rem Arial,sans-serif; letter-spacing: .13em; }.audio-dock__info strong { font-size: .68rem; font-weight: 500; color: #ddd5e8; }.audio-dock input { width: 66px; accent-color: var(--purple); }
.floating-cta { position: fixed; z-index: 89; right: 1.5rem; bottom: 1.4rem; height: 52px; min-width: 112px; display: flex; align-items: center; justify-content: space-between; padding-left: 1rem; border: 1px solid var(--line); background: rgba(10,7,18,.86); backdrop-filter: blur(12px); font: 600 .66rem Arial,sans-serif; letter-spacing: .14em; }.floating-cta i { width: 46px; align-self: stretch; display: grid; place-items: center; color: var(--pink); font-style: normal; }

@media (max-width: 800px) {
  .section { padding: 7rem 1.25rem; }.section-index { top: 3.5rem; }
  .site-header { height: 66px; padding: 0 1rem; }.brand img { width: 92px; height: 58px; }.nav-toggle { display: block; }
  .site-nav { position: absolute; top: 66px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; background: rgba(9,6,17,.97); border-bottom: 1px solid var(--line); padding: 1rem; }.site-nav.is-open { display: flex; }.site-nav a { padding: .9rem; }.nav-cta { margin-top: .5rem; }
  .hero { padding: 8rem 1.35rem 12vh; }.hero__veil { background: linear-gradient(0deg,rgba(8,6,18,.98) 0,rgba(8,6,18,.55) 58%,rgba(8,6,18,.15)); }.hero__backdrop { background-position: 58% 45%; }.hero__stamp { display: none; }.scroll-mark { right: 1rem; }
  .orientation { grid-template-columns: 1fr; gap: 3rem; background-attachment: scroll; }.orientation__portrait { justify-self: center; max-width: 600px; }.orientation__copy { max-width: 100%; }.world-notes { grid-template-columns: 1fr; }.world-notes article { border-right: 0; border-bottom: 1px solid var(--line); }.world-notes article:last-child { border-bottom: 0; }
  .section-heading { grid-template-columns: 1fr; gap: 1.8rem; margin-bottom: 3rem; }
  .record { background-attachment: scroll; }.record-card { flex-direction: column; align-items: stretch; padding: 2rem; }.record-card__button { flex: none; width: 100%; }.attendance { top: 66px; flex-wrap: wrap; gap: .7rem; }.attendance > div { min-width: 120px; }.attendance nav { order: 3; flex-basis: 100%; }.attendance nav a { font-size: 0; }.attendance nav a i { width: 9px; height: 9px; }.attendance__message { max-width: none; flex: 1; }
  .student,.student:nth-child(even) { min-height: auto; grid-template-columns: 1fr; gap: 1rem; padding: 4rem 0; }.student:nth-child(even) .student__visual,.student:nth-child(even) .student__info { order: initial; }.student__visual { min-height: 0; }.student__visual img,.character-image-button { width: 100%; height: auto; }.student__number { font-size: 7rem; }.student__info { padding: 0 .35rem; }.character-popline { width:100%;min-height:74px;padding:.7rem .8rem; }.character-popline p{font-size:.76rem}.character-popline--balam{width:calc(100% - 1.4rem);margin:0 .7rem .7rem}
  .dossier-tabs__panels { min-height: 210px; }.student__quote { font-size: 1rem; }
  .emotion-slider { grid-template-columns:30px minmax(0,1fr) 30px; }.emotion-slider__arrow{width:28px}.emotion-thumb{flex-basis:72px}.balam-modal{padding:.75rem}.balam-modal__card{grid-template-columns:1fr;gap:1.5rem;max-height:92svh}.balam-modal__visual .character-image-button img{max-height:42svh;object-fit:contain}.balam-modal__close{right:.8rem;top:.7rem;z-index:2}
  .site-footer { flex-direction: column; text-align: center; padding-bottom: 7rem; }
  .audio-dock__info,.audio-dock input { display: none; }.audio-dock { left: .8rem; bottom: .8rem; height: 46px; padding: .3rem; }.floating-cta { right: .8rem; bottom: .8rem; height: 46px; }
}
@media (max-width: 480px) {
  .entry__art { background-position: 50% center; }.entry__logo { width: 330px; }.entry__eyebrow { margin-top: -1.5rem; font-size: .52rem; }.entry__button { min-height: 62px; }.entry__button i { width: 50px; height: 50px; }
  .hero h1 { font-size: 2.45rem; }.hero__lead { font-size: .9rem; }
  .orientation h2,.section-heading h2,.finale h2 { font-size: 2.25rem; }
  .student h3 { font-size: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; }
}