:root{
 --black:#070807; --ink:#f5f1e8; --muted:#c2beb4; --line:rgba(245,241,232,.13); --line2:rgba(245,241,232,.24);
 --lime:#c7ff3d; --coral:#ff6b48; --blue:#74a9ff;
 --garnet:#ff3b3b; --emerald:#00e676; --sapphire:#5b7cff; --topaz:#ffca28;
 --radius:26px;
 --display:'Syne',system-ui,sans-serif; --body:'DM Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(80% 60% at 90% 6%,rgba(116,169,255,.12),transparent 70%),radial-gradient(70% 55% at 4% 80%,rgba(255,107,72,.09),transparent 68%),var(--black);color:var(--ink);font-family:var(--body);overflow-x:hidden}
.mono{font-family:var(--mono)}
.wrap{width:min(1240px,100% - 44px);margin-inline:auto}
.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.075;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;transform-origin:0;background:linear-gradient(90deg,var(--coral),var(--lime),var(--blue));box-shadow:0 0 16px rgba(199,255,61,.45)}
/* HERO */
.hero{min-height:92svh;display:grid;align-content:end;padding:120px 0 30px}
.avail{width:max-content;color:var(--lime);letter-spacing:.16em;text-transform:uppercase;display:flex;gap:10px;align-items:center;font:500 10px var(--mono);margin-bottom:20px}
.avail i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 20px rgba(199,255,61,.5)}
.hero-top{display:grid;grid-template-columns:1fr minmax(300px,420px);gap:60px;align-items:end;margin-bottom:44px}
@media(max-width:900px){.hero-top{grid-template-columns:1fr;gap:28px}}
.hero-label{max-width:620px;color:var(--muted);font-size:clamp(16px,2vw,21px);line-height:1.45}
.hero-label strong{color:var(--ink);font-weight:500}
.intro-card{border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(20px);background:linear-gradient(145deg,rgba(245,241,232,.08),rgba(245,241,232,.03));padding:24px;position:relative;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.08)}
.intro-card small{color:var(--muted);letter-spacing:.18em;text-transform:uppercase;font:500 9px var(--mono)}
.intro-card p{margin:22px 0;font:500 17px/1.45 var(--display)}
.searchbox{display:flex;gap:8px;align-items:center;border:1px solid var(--line2);background:rgba(0,0,0,.3);border-radius:999px;padding:9px 14px}
.searchbox input{flex:1;background:transparent;border:0;color:var(--ink);font:500 13px var(--body);outline:none}
h1.name{white-space:nowrap;letter-spacing:-.07em;text-transform:uppercase;margin:0;font:700 clamp(60px,13vw,170px)/.78 var(--display)}
h1.name span{display:block}
h1.name span:last-child{color:transparent;-webkit-text-stroke:1.6px rgba(245,241,232,.65)}
/* GYRO */
.hero-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:0;border:1px solid var(--line);border-radius:34px;overflow:hidden;background:linear-gradient(145deg,rgba(18,20,17,.82),rgba(7,8,7,.7));box-shadow:0 40px 120px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.06);position:relative}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}
.gyro-stage{perspective:1200px;position:relative;min-height:600px;display:grid;place-items:center;overflow:hidden;cursor:grab;touch-action:none;user-select:none}
@media(max-width:960px){.gyro-stage{min-height:540px}}
.gyro-stage:active{cursor:grabbing}
.ring{position:absolute;border:1px solid rgba(245,241,232,.09);border-radius:50%;left:50%;top:46%;transform:translate(-50%,-50%) rotateX(70deg);pointer-events:none}
.ring1{width:620px;height:620px;animation:spin 26s linear infinite}
.ring2{width:450px;height:450px;border-style:dashed;border-color:rgba(116,169,255,.2);animation:spin 18s linear infinite reverse}
.outer{width:390px;height:450px;position:relative;transform-style:preserve-3d}
.outer.snap{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.face{position:absolute;inset:0;border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:8px;cursor:pointer;backface-visibility:hidden;border:1px solid var(--face);background:linear-gradient(150deg,color-mix(in srgb,var(--face) 12%,#141614),rgba(8,9,8,.94));box-shadow:0 28px 80px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.1);transform-style:preserve-3d}
.face>*{position:relative;transform:translateZ(22px)}
.face-code{font:500 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--face)}
.face h3{margin:4px 0 0;font:700 30px/.9 var(--display);letter-spacing:-.03em;text-transform:uppercase}
.face p{margin:0;color:var(--muted);font:400 11px/1.5 var(--body)}
.face .count{margin-top:auto;font:500 10px var(--mono);color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.face.active{box-shadow:0 28px 80px rgba(0,0,0,.5),0 0 44px color-mix(in srgb,var(--face) 22%,transparent),inset 0 1px rgba(255,255,255,.1)}
.inner{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;left:50%;top:46%;width:74px;height:74px;border-radius:50%;border:1px solid rgba(245,241,232,.25);background:#101210;overflow:hidden;cursor:pointer;pointer-events:auto;padding:0;box-shadow:0 16px 40px rgba(0,0,0,.5);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .2s}
.inner.live .orb{transition:none}
.orb img{width:100%;height:100%;object-fit:cover;display:block}
.orb .init{font:600 15px var(--display);display:grid;place-items:center;height:100%}
.orb.active{box-shadow:0 0 0 3px var(--house),0 0 26px color-mix(in srgb,var(--house) 45%,transparent)}
.caption{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(7,8,7,.82);border:1px solid rgba(245,241,232,.18);backdrop-filter:blur(8px);color:var(--ink);border-radius:999px;padding:8px 16px;font:500 10px var(--mono);letter-spacing:.08em;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.hint{position:absolute;top:14px;left:50%;transform:translateX(-50%);font:500 9px var(--mono);letter-spacing:.14em;color:var(--muted);white-space:nowrap}
.side{border-left:1px solid var(--line);padding:26px 24px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(90deg,transparent,rgba(7,8,7,.85) 30%)}
.side .k{font:500 9px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.side h2{margin:0;font:600 clamp(30px,3.6vw,44px)/.95 var(--display);letter-spacing:-.04em}
.side p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat-row div{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:16px;padding:12px;text-align:center}
.stat-row b{font:700 clamp(28px,3vw,38px)/1 var(--display);display:block}
.stat-row span{font:500 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.names{display:flex;gap:7px;flex-wrap:wrap}
.names span{font:inherit;color:inherit}
/* TICKER */
.ticker{border-block:1px solid var(--line);color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-top:26px;padding:12px 0;font:500 10px var(--mono);overflow:hidden}
.ticker>div{gap:42px;width:max-content;animation:tick 26s linear infinite;display:flex}
.ticker span:before{content:"✦";color:var(--lime);margin-right:42px}
/* CHAPTERS */
.sec{padding:100px 0;position:relative}
.sec-head{display:grid;grid-template-columns:70px 1fr auto;gap:18px;align-items:baseline;margin-bottom:40px}
.sec-head .no{font:500 10px var(--mono);letter-spacing:.14em;color:var(--muted)}
.sec-head h2{letter-spacing:-.045em;margin:0;font:600 clamp(40px,6.4vw,80px)/.95 var(--display);text-transform:uppercase}
.sec-head .note{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pills{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.pill{border:1px solid var(--line2);background:rgba(255,255,255,.04);backdrop-filter:blur(12px);color:var(--muted);border-radius:999px;padding:10px 20px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.2s}
.pill:hover{color:var(--ink);border-color:var(--ink)}
.pill.active{background:var(--ink);color:var(--black);border-color:var(--ink);box-shadow:0 0 24px rgba(245,241,232,.18)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:rgba(12,13,12,.78);backdrop-filter:blur(14px);transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-6px);border-color:var(--house);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 30px color-mix(in srgb,var(--house) 20%,transparent)}
.card .ph{aspect-ratio:1/1;background:#181a18;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.card .ph .init{position:absolute;inset:0;display:grid;place-items:center;font:600 46px var(--display);color:rgba(245,241,232,.5)}
.card .ph img + .init{display:none}
.card .tx{padding:14px;border-top:3px solid var(--house)}
.badge{font:500 8.5px var(--mono);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.name{font:600 16px/1.05 var(--display);letter-spacing:-.02em;margin-top:6px;text-transform:uppercase}
.klass{font:500 10px var(--mono);color:var(--muted);margin-top:6px;letter-spacing:.08em}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(12,13,12,.78)}
@media(max-width:860px){.feature{grid-template-columns:1fr}}
.feature .fp{min-height:420px;background-size:cover;background-position:center}
.feature .ft{padding:34px}
.drop::first-letter{font:600 56px/.8 var(--display);float:left;margin:8px 10px 0 0;color:var(--lime)}
.pull{font:600 clamp(24px,3.2vw,36px)/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;border-left:3px solid var(--lime);padding-left:16px;margin:16px 0}
.idx{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:860px){.idx{grid-template-columns:1fr}}
.class-chips{display:flex;flex-wrap:wrap;gap:8px}
.class-chip{border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--muted);border-radius:999px;padding:8px 14px;font:500 11px var(--mono);cursor:pointer}
.class-chip.active{background:var(--lime);color:var(--black);border-color:var(--lime)}
.blist{columns:2;gap:20px}
@media(max-width:560px){.blist{columns:1}}
.blist button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:9px 2px;font:500 13px var(--body);color:var(--ink);cursor:pointer;break-inside:avoid}
.blist button b{font:500 10px var(--mono);color:var(--lime);margin-right:8px}
.blist button.on{background:rgba(199,255,61,.1)}
.colophon{display:flex;justify-content:space-between;gap:12px;padding:26px 0 44px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap;border-top:1px solid var(--line);margin-top:20px}
.btn{border:1px solid var(--line2);background:rgba(255,255,255,.05);color:var(--ink);border-radius:999px;padding:10px 20px;font:500 10px var(--mono);letter-spacing:.1em;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--black)}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
button,input{font:inherit}button{color:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
.site-nav{position:sticky;top:0;z-index:45;background:rgba(7,8,7,.93);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px}.wordmark{text-decoration:none;font:700 13px var(--display);letter-spacing:.08em}.nav-links{display:flex;gap:24px;overflow:auto;padding:16px 2px}.nav-links a{white-space:nowrap;text-decoration:none;font:500 10px var(--mono);color:var(--muted)}.nav-links a:hover{color:var(--ink)}
section,[id="gyro"]{scroll-margin-top:85px}.hero{padding-top:70px;min-height:75svh}.searchbox input{min-width:0;width:100%}
.gyro-stage{touch-action:pan-y pinch-zoom}.face{text-align:left;color:var(--ink)}.face h3{font-size:24px}.face .count{margin-top:0}.inner{position:absolute;inset:0;z-index:3;pointer-events:none}.orb{width:54px;height:54px}.outer{width:340px;height:410px}.hint{z-index:6;max-width:95%;text-align:center;white-space:normal;line-height:1.5}
.gyro-portrait{position:absolute;z-index:4;left:50%;top:46%;transform:translate(-50%,-50%);width:190px;height:240px;margin:0;border:1px solid var(--line2);border-radius:100px 100px 20px 20px;overflow:hidden;background:#151915;pointer-events:none;box-shadow:0 20px 55px #0008}.gyro-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 25%}.gyro-portrait .init{height:100%;display:grid;place-items:center;font:600 48px var(--display)}
.caption{z-index:6;bottom:57px;white-space:normal;text-align:center;width:max-content;line-height:1.5}.gyro-controls{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:6}.gyro-controls button{padding:7px 12px;font:500 10px var(--mono)}.gyro-houses{display:flex;flex-wrap:wrap;gap:6px}.gyro-houses button{padding:8px 10px;font-size:9px}.side{min-width:0}.side .stat-row{display:none}.names{gap:6px}.names button{border:1px solid var(--line2);background:transparent;border-radius:20px;padding:8px 11px;text-align:left;font:500 10px/1.35 var(--mono);cursor:pointer;max-width:100%}.names button:hover,.names button[aria-pressed="true"]{background:var(--ink);color:var(--black);border-color:var(--ink)}
.feature .fp{min-height:480px;background-position:center 25%}#featBody{color:var(--muted)!important}#featQuote{border-left:0;padding-left:0;font-size:22px;color:var(--ink)}
.auto4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.number-cell{border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center}.number-cell strong{display:block;font:600 44px var(--display)}.number-cell span{font:500 10px var(--mono);color:var(--muted)}
.chapter-kicker{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--lime);margin:0 0 20px}.chapter-title{font:600 clamp(40px,6.5vw,86px)/.98 var(--display);letter-spacing:-.05em;text-transform:uppercase;margin:0 0 24px}.chapter-title em{font-style:normal;color:var(--muted)}.chapter-copy{font:400 16px/1.7 var(--body);color:var(--muted);max-width:480px}.preview-tag{display:inline-block;padding:7px 10px;border:1px solid var(--line2);border-radius:20px;font:500 9px var(--mono);letter-spacing:.06em;color:var(--muted)}
.investiture-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}.ceremony-frame{aspect-ratio:1.2;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;border:1px solid var(--line2);border-radius:180px 180px 20px 20px;background:radial-gradient(ellipse at 50% 20%,#c7ff3d12,transparent 70%),#10120f;overflow:hidden}.ceremony-frame:before{content:'';position:absolute;inset:22px;border:1px solid var(--line);border-radius:inherit;pointer-events:none}.ceremony-mark{font:700 clamp(68px,10vw,130px)/1 var(--display);letter-spacing:-.09em;color:var(--ink)}.house-bars{display:flex;gap:8px}.house-bars i{height:50px;width:9px;transform:skew(-15deg);background:var(--garnet)}.house-bars i:nth-child(2){background:var(--emerald)}.house-bars i:nth-child(3){background:var(--sapphire)}.house-bars i:nth-child(4){background:var(--topaz)}.ceremony-frame p{margin:0;text-align:center;color:var(--muted);font:500 10px/1.7 var(--mono);max-width:75%}.editor-note{font:400 12px/1.7 var(--body);color:var(--muted);margin-top:20px}
.action-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:32px}.action-head .chapter-title{margin:0}.story-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px}.story-card{min-width:0;border-top:1px solid var(--line2);padding-top:16px}.story-art{aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;padding:22px;background:var(--story-bg);color:var(--story-ink);border-radius:4px 50px 4px 4px;margin-bottom:20px}.story-art b{font:600 clamp(38px,4vw,62px)/.95 var(--display);letter-spacing:-.05em}.story-art span{font:500 9px var(--mono);text-transform:uppercase;letter-spacing:.1em}.story-card h3{font:600 22px var(--display);margin:12px 0}.story-card p{font:400 13px/1.7 var(--body);color:var(--muted);margin:0}.story-card:first-child .story-art{aspect-ratio:1.4}
.council-section{border-top:1px solid var(--line);text-align:center}.council-section .chapter-copy{margin:0 auto 28px}.portrait-wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;max-height:410px;overflow:hidden;mask-image:linear-gradient(#000 75%,transparent);margin:40px 0 0}.portrait-tile{aspect-ratio:4/5;overflow:hidden;background:#171a17;border-radius:5px}.portrait-tile img{width:100%;height:100%;object-fit:cover}.portrait-tile .init{display:grid;height:100%;place-items:center;font:500 16px var(--display);color:var(--muted)}.closing-line{font:600 clamp(32px,5vw,68px)/1 var(--display);letter-spacing:-.04em;margin:15px 0 32px}.closing-line span{color:var(--lime)}
@media(max-width:960px){.investiture-layout{gap:30px}.gyro-stage{min-height:580px}.side{border-left:0;border-top:1px solid var(--line)}.story-grid{grid-template-columns:1fr 1fr}.story-card:first-child{grid-column:1/-1}.story-card:first-child .story-art{aspect-ratio:2.5}.portrait-wall{grid-template-columns:repeat(9,minmax(0,1fr))}.sec-head{grid-template-columns:40px 1fr}.sec-head .note{grid-column:2}.action-head{align-items:start;flex-direction:column}}
@media(max-width:640px){.wrap{width:calc(100% - 32px)}.nav-row{display:block;padding-top:12px}.nav-links{gap:22px;padding:13px 0}.hero{padding:45px 0 16px;min-height:0}.hero-top{gap:20px;margin-bottom:32px}h1.name{white-space:normal;font-size:clamp(48px,15.7vw,94px);letter-spacing:-.055em}.hero-label{font-size:16px}.intro-card{padding:20px}.sec{padding:58px 0}.sec-head{grid-template-columns:1fr;gap:10px;margin-bottom:25px}.sec-head .note{grid-column:1}.sec-head h2{font-size:clamp(35px,10vw,54px)}.gyro-stage{min-height:480px}.outer{width:230px;height:320px}.face{padding:15px}.face h3{font-size:20px}.gyro-portrait{width:144px;height:185px;top:48%}.orb{width:40px;height:40px}.side{padding:22px 16px}.ring1{width:390px;height:390px}.ring2{width:280px;height:280px}.caption{font-size:9px;letter-spacing:.02em;bottom:58px}.hint{font-size:8px}.auto4{grid-template-columns:repeat(2,minmax(0,1fr))}.feature .fp{min-height:360px}.feature .ft{padding:24px}.investiture-layout{grid-template-columns:1fr}.ceremony-frame{aspect-ratio:1.1}.story-grid{gap:24px 14px}.story-art{padding:16px;aspect-ratio:.85}.story-art b{font-size:32px}.story-card h3{font-size:20px}.portrait-wall{grid-template-columns:repeat(6,minmax(0,1fr));max-height:390px}.number-cell{padding:18px 10px}.number-cell strong{font-size:36px}.chapter-title{font-size:clamp(36px,11vw,60px)}.pills{gap:6px}.pill{padding:10px 13px}.blist{columns:1}}
.hero-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px;overflow:visible;border:0;background:none;box-shadow:none;border-radius:0;align-items:start}
.gyro-stage{display:flex;flex-direction:column;gap:18px;min-height:0;padding:26px;border:1px solid var(--line2);border-radius:30px;background:radial-gradient(ellipse at 50% 15%,color-mix(in srgb,var(--studio-color,var(--garnet)) 13%,transparent),transparent 70%),#10130f;perspective:none;overflow:hidden}
.studio-head{display:flex;width:100%;justify-content:space-between;gap:12px;font:500 9px var(--mono);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}.studio-head span:last-child{color:var(--ink)}
.gyro-portrait{position:relative;left:auto;top:auto;transform:none;flex:none;width:min(100%,290px);height:auto;aspect-ratio:4/5;border-radius:24px;box-shadow:0 18px 45px #0006;margin:0}
.gyro-portrait img{object-position:center 20%}.caption{position:static;transform:none;width:100%;max-width:100%;padding:0 12px;min-height:68px;border:0;border-radius:0;background:none;backdrop-filter:none;display:flex;flex-direction:column;justify-content:center;gap:7px;overflow:visible;letter-spacing:0;font:500 11px/1.4 var(--mono)}.caption strong{font:600 clamp(22px,2.8vw,34px)/1.05 var(--display);letter-spacing:-.03em;overflow-wrap:anywhere}.caption span{color:var(--muted)}
.inner{position:relative;inset:auto;width:100%;height:86px;flex:none;pointer-events:none;overflow:hidden}.orb{left:50%;top:50%;width:54px;height:66px;border-radius:12px;transition:transform .35s,opacity .35s;box-shadow:none}.orb[hidden]{display:none}.gyro-controls{position:static;display:flex;width:100%;flex-wrap:wrap}.gyro-controls button{min-height:44px}.side{border:1px solid var(--line);border-radius:30px;background:#11140f;padding:24px;gap:18px}.side h2{font-size:36px}.side p{font-size:12px}.names{display:flex;flex-direction:column;flex-wrap:nowrap;max-height:430px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--muted) transparent;padding:5px}.names button{border-radius:12px;padding:12px;min-height:44px;flex:none;font-size:11px;display:flex;gap:12px;align-items:center}.names button .student-no{font-size:9px;opacity:.6;min-width:20px}.names button .student-name{overflow-wrap:anywhere}.gyro-houses button{min-height:44px}
.passport-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,44%);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 24px;scrollbar-color:var(--muted) transparent}.passport{scroll-snap-align:start;padding:28px;border-radius:22px;background:var(--paper);color:#11140f;position:relative;overflow:hidden;min-width:0;display:flex;flex-direction:column;gap:24px}.passport-top{display:flex;justify-content:space-between;border-bottom:1px solid #1114;padding-bottom:14px;font:500 9px var(--mono);letter-spacing:.1em}.passport h3{font:700 clamp(40px,5vw,66px)/.95 var(--display);letter-spacing:-.055em;margin:0}.passport-number{font:600 110px/.85 var(--display);letter-spacing:-.08em;opacity:.17;position:absolute;right:20px;top:95px;pointer-events:none}.passport-people{display:flex;gap:8px;margin-top:12px}.passport-people img,.passport-people .init{width:64px;height:80px;object-fit:cover;border-radius:10px;background:#1112;display:grid;place-items:center}.passport p{font:500 12px/1.7 var(--body);position:relative;margin:0;max-width:75%}.passport button{align-self:start;background:#11140f;color:#f5f1e8;border:0;padding:14px 18px;border-radius:30px;font:500 10px var(--mono);cursor:pointer;min-height:44px}.passport-foot{font:500 9px var(--mono);letter-spacing:.1em;border-top:1px dashed #1116;padding-top:16px;margin-top:auto}
.portrait-wall{grid-template-columns:repeat(8,minmax(0,1fr));max-height:none;mask-image:none;overflow:visible;gap:10px}.portrait-tile{border:1px solid var(--line);padding:0;position:relative;cursor:pointer;transition:transform .2s;border-radius:10px}.portrait-tile:hover,.portrait-tile:focus-visible{transform:translateY(-5px);border-color:var(--lime)}.portrait-tile .tile-label{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,#000e);color:#fff;padding:30px 6px 8px;font:500 8px/1.4 var(--mono);opacity:0;transition:opacity .2s}.portrait-tile:hover .tile-label,.portrait-tile:focus-visible .tile-label{opacity:1}.contact-note{font:500 10px var(--mono);color:var(--muted)}
.tour-trigger{position:fixed;right:0;top:42%;z-index:55;writing-mode:vertical-rl;border:1px solid #fff3;border-right:0;border-radius:18px 0 0 18px;background:var(--lime);color:#11140f;padding:22px 14px;cursor:pointer;box-shadow:0 10px 40px #0005;font:600 11px var(--mono);letter-spacing:.04em;min-width:48px}.tour-trigger span{font-size:16px;margin-bottom:10px}
dialog{color:var(--ink);border:1px solid var(--line2);background:#12160ff5;backdrop-filter:blur(28px);box-shadow:0 30px 100px #0009;border-radius:28px;padding:30px;max-width:calc(100% - 24px);max-height:calc(100dvh - 32px);overflow:auto}dialog::backdrop{background:#030604bb;backdrop-filter:blur(6px)}body:has(dialog[open]){overflow:hidden}.tour-dialog{width:430px;margin:auto 20px auto auto}.dialog-close{display:block;margin:0 0 28px auto;min-width:44px;min-height:44px;border:1px solid var(--line2);border-radius:50%;background:none;color:var(--ink);cursor:pointer;font-size:22px}.tour-dialog h2{font:600 clamp(32px,5vw,48px)/1.02 var(--display);letter-spacing:-.04em;margin:24px 0}.tour-dialog h2 em{font-style:normal;color:var(--lime)}.tour-dialog p{color:var(--muted);font:400 14px/1.7 var(--body)}.tour-links{display:flex;flex-direction:column;gap:12px;margin:28px 0}.tour-links a{min-height:50px;display:flex;align-items:center;justify-content:space-between;border-radius:14px;padding:16px;text-decoration:none;border:1px solid var(--line2);font:600 13px var(--body)}.tour-links a:first-child{background:var(--lime);color:#11140f;border-color:var(--lime)}.tour-dialog .tour-note{font-size:11px;border-top:1px solid var(--line);padding-top:18px}.student-dialog{width:460px;text-align:center}.student-dialog .dialog-close{margin-bottom:12px}.student-dialog .dialog-photo{width:min(100%,250px);aspect-ratio:4/5;margin:0 auto 20px;overflow:hidden;border-radius:18px;background:#252920}.dialog-photo img{width:100%;height:100%;object-fit:cover}.dialog-photo .init{height:100%;display:grid;place-items:center;font:600 56px var(--display)}.student-dialog h2{font:600 30px/1.05 var(--display);overflow-wrap:anywhere}.student-dialog p{font:500 12px/1.6 var(--mono);color:var(--muted)}
@media(min-width:961px){body{padding-right:56px}}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}.gyro-stage{min-height:0}.names{max-height:230px}.tour-trigger{top:auto;bottom:max(12px,env(safe-area-inset-bottom));left:16px;right:16px;writing-mode:horizontal-tb;border:1px solid #fff3;border-radius:30px;padding:15px 20px;min-height:50px}.tour-trigger span{margin:0 10px 0 0}body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}.portrait-wall{grid-template-columns:repeat(6,minmax(0,1fr))}.tour-dialog{margin:auto}.portrait-tile .tile-label{opacity:1;font-size:7px}}
@media(max-width:640px){.gyro-stage{padding:20px 14px;gap:16px}.gyro-portrait{width:min(100%,236px)}.caption{min-height:80px;padding:0 4px}.caption strong{font-size:24px}.orb{width:40px;height:52px}.inner{height:70px}.side{padding:20px 14px}.side h2{font-size:30px}.passport-track{grid-auto-columns:88%;gap:14px}.passport{padding:22px}.passport h3{font-size:42px}.passport-number{font-size:90px;top:100px}.passport-people img,.passport-people .init{width:52px;height:66px}.passport p{max-width:90%}.portrait-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.portrait-tile .tile-label{font-size:8px}.tour-dialog,.student-dialog{padding:22px}.tour-dialog h2{font-size:36px}#featBtns{flex-wrap:wrap}}
/* Readable utility type without changing the editorial display scale. */
html{scroll-padding-bottom:100px}
body{padding-right:0;padding-bottom:calc(100px + env(safe-area-inset-bottom));font-size:16px;line-height:1.5}
.avail{width:auto;max-width:100%;letter-spacing:.06em}
.avail i{flex-shrink:0}
.avail,.intro-card small,.side .k,.stat-row span,.ticker,.sec-head .no,.sec-head .note,.badge,.klass,.colophon,.chapter-kicker,.preview-tag,.studio-head,.number-cell span,.passport-top,.passport-foot,.contact-note,.ceremony-frame p,.editor-note,.tour-dialog .tour-note,.student-dialog p{font-size:14px;line-height:1.5;letter-spacing:.04em}
.searchbox input,.side p,.chapter-copy,.story-card p,.passport p,.tour-dialog p,.tour-links a,.blist button{font-size:16px;line-height:1.6}
.searchbox input::placeholder{color:var(--muted);opacity:1}
.pill,.btn,.class-chip,.gyro-houses button,.gyro-controls button,.passport button{font-size:14px;line-height:1.4;min-height:44px;letter-spacing:.03em}
.blist button b,.story-art span,.caption span{font-size:14px;line-height:1.5}
.names button{font:500 16px/1.5 var(--body)}
.names button .student-no{font:500 14px var(--mono);opacity:1;flex-shrink:0}
.names button .student-name{min-width:0;font-size:16px}
.card .name{font-size:20px;line-height:1.2;overflow-wrap:anywhere}
.card .tx{padding:18px}
.nav-row{gap:20px;flex-wrap:wrap;padding-block:10px}
.wordmark{font-size:16px;flex-shrink:0}
.nav-links{gap:4px 20px;flex-wrap:wrap;overflow:visible;padding:0;min-width:0}
.nav-links a{font:600 16px/1.4 var(--body);color:var(--ink);min-height:44px;display:flex;align-items:center}
.nav-links a:hover{color:var(--lime)}
section,[id="gyro"]{scroll-margin-top:150px}
.sec-head{grid-template-columns:50px minmax(0,1fr);row-gap:12px}
.sec-head .note{grid-column:2}
.studio-head,.passport-top{flex-wrap:wrap}
.portrait-tile{aspect-ratio:auto;display:flex;flex-direction:column}
.portrait-tile img,.portrait-tile .init{aspect-ratio:4/5;height:auto;width:100%;flex:none}
.portrait-tile .tile-label{position:static;background:#11140f;opacity:1;padding:10px 8px;font:500 14px/1.4 var(--body);overflow-wrap:anywhere;text-align:left}
.tour-trigger{top:auto;bottom:max(16px,env(safe-area-inset-bottom));left:auto;right:24px;writing-mode:horizontal-tb;display:flex;justify-content:center;align-items:center;gap:10px;border:1px solid #11140f;border-radius:999px;padding:16px 22px;min-height:56px;max-width:calc(100% - 32px);font:600 16px/1.4 var(--body);letter-spacing:0;background:var(--lime);color:#11140f;box-shadow:0 0 0 4px #070807,0 12px 40px #0009}
.tour-trigger span{font-size:22px;margin:0;flex-shrink:0}
@media(max-width:960px){.nav-row{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.tour-trigger{left:16px;right:16px;padding:14px 16px}.portrait-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:640px){.nav-links{column-gap:18px}.sec-head{grid-template-columns:minmax(0,1fr)}.sec-head .note{grid-column:1}.portrait-wall{grid-template-columns:repeat(2,minmax(0,1fr))}.story-grid{grid-template-columns:1fr}.story-card:first-child .story-art{aspect-ratio:1.4}.studio-head{letter-spacing:0}.passport p{max-width:100%}}
@media(max-width:640px){.ceremony-frame{aspect-ratio:auto;min-height:360px;padding:72px 24px 40px}.ceremony-frame p{max-width:100%}}
@media(max-width:640px){
 .sec{padding-block:44px}
 .hero{padding-top:32px}.hero-top{margin-bottom:24px}
 #grid .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
 .card{min-width:0;border-radius:14px}.card .tx{padding:12px 10px}
 .card .name{font:600 16px/1.35 var(--body);letter-spacing:0}
 .card .badge{font-family:var(--body);letter-spacing:0;overflow-wrap:anywhere}
 .card .klass{letter-spacing:0}
 #pills,.gyro-houses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #pills button,.gyro-houses button{width:100%;padding:10px 8px}
 .gyro-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px}
 .gyro-controls button{padding-inline:10px}
 .feature .fp{min-height:0;aspect-ratio:4/5}
 .story-art{width:100%;aspect-ratio:auto;min-height:240px;gap:20px}
 .story-art b{font-size:30px;overflow-wrap:anywhere}
 .story-card h3{font-size:20px;line-height:1.25}
 .story-card p{font-size:16px}
 .passport-track{scroll-padding-inline:4px}
}
@media(min-width:360px) and (max-width:640px){
 .story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .story-card:first-child{grid-column:1/-1}
 .story-card:not(:first-child) .story-art{min-height:310px}
}
@media(max-height:500px){.site-nav{position:relative}section,[id="gyro"]{scroll-margin-top:20px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.card,.pill,.intro-card{backdrop-filter:none}
.grain{position:absolute;height:100svh}
.ticker>div{animation-play-state:paused}
.ticker.is-visible>div{animation-play-state:running}
body.page-hidden .ticker>div{animation-play-state:paused}
@keyframes enter-section{from{opacity:.35;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes enter-portrait{from{opacity:.4;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){.sec.entered .sec-head,.sec.entered .action-head,.sec.entered>.chapter-title{animation:enter-section .55s ease-out both}.gyro-portrait img{animation:enter-portrait .25s ease-out}}
/* HOME LINKS */
.nav-links a.nav-home{color:var(--lime);gap:7px}
.nav-links a.nav-home:hover{color:var(--ink)}
.colophon a.foot-home{color:var(--lime);text-decoration:none}
.colophon a.foot-home:hover{color:var(--ink)}
/* HOUSE CRESTS & MOTTOS */
.gyro-stage>*:not(.stage-crest){position:relative;z-index:1}
.stage-crest{position:absolute;z-index:0;right:-8%;top:50%;transform:translateY(-50%);width:min(62%,300px);opacity:.09;pointer-events:none}
.house-identity{display:flex;align-items:center;gap:16px}
.house-identity-crest{width:66px;height:66px;object-fit:contain;flex:none}
.side .house-motto{margin:8px 0 0;color:var(--lime);font:500 14px/1.5 var(--mono);letter-spacing:.03em}
.passport-crest{position:absolute;right:10px;top:96px;width:180px;height:180px;object-fit:contain;opacity:.2;pointer-events:none}
.passport .passport-motto{margin:-14px 0 0;max-width:70%;font:600 18px/1.35 var(--display)}
.house-crests{display:flex;gap:20px;align-items:center;justify-content:center;flex-wrap:wrap}
.house-crests img{width:52px;height:52px;object-fit:contain}
@media(max-width:640px){.house-crests{gap:12px}.house-crests img{width:40px;height:40px}.house-identity-crest{width:54px;height:54px}.passport-crest{width:140px;height:140px;top:104px}.passport .passport-motto{font-size:16px;max-width:78%}}