/* Librarium — independent static site redesign. Shared layout for every page. */
:root{--paper:#f9f5eb;--canvas:#deded0;--ink:#17352f;--soft:#526660;--accent:#ed7658;--accent-ink:#b84430;--banner:#163933;--banner-ink:#f9f2da;--bright:#f2c46b;--surface:#fffdf7;--line:#cdd3c7;--tile:#eee8d9;--shadow:rgba(11,35,29,.16);font-family:Arial,Helvetica,sans-serif;font-synthesis:none;color:var(--ink)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);min-height:100vh;line-height:1.65}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.3;background-image:repeating-linear-gradient(45deg,transparent 0 44px,rgba(31,50,43,.08) 45px,transparent 46px);z-index:-1}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.page{max-width:1180px;min-height:100vh;margin:0 auto;background:var(--paper);box-shadow:0 15px 70px var(--shadow)}
.site-header{background:var(--banner);color:var(--banner-ink);position:relative;overflow:visible}
.topbar{min-height:66px;display:flex;align-items:center;gap:25px;justify-content:space-between;padding:0 54px;border-bottom:1px solid #ffffff33;position:relative;z-index:9}
.brand-stamp{color:var(--banner-ink);font-weight:900;font-size:13px;text-decoration:none;letter-spacing:.08em;white-space:nowrap}
.brand-stamp b{color:var(--bright);font-weight:900;padding:0 4px}
.topbar-note{margin-left:auto;font-size:9px;letter-spacing:.18em;font-weight:bold;color:#ffffff9e;white-space:nowrap}
.nav-menu{display:flex;align-items:center;gap:20px}
.nav-menu a{font-size:11px;letter-spacing:.035em;font-weight:800;text-decoration:none;white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent;color:var(--banner-ink)}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{color:var(--bright);border-color:var(--bright)}
.menu-button{display:none}
.hero-banner{min-height:325px;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.45fr);align-items:center;position:relative;isolation:isolate;overflow:hidden;padding:40px 67px 58px;background-image:radial-gradient(circle at 88% 52%,rgba(255,255,255,.10),transparent 36%),linear-gradient(155deg,rgba(4,24,23,.06),rgba(4,24,23,.25))}
.hero-banner::before{content:"";position:absolute;inset:0;opacity:.18;z-index:-1;background-image:linear-gradient(90deg,transparent 97%,currentColor 98%),linear-gradient(transparent 97%,currentColor 98%);background-size:40px 40px;mask-image:linear-gradient(95deg,transparent,#000 70%)}
.hero-copy{position:relative;z-index:3}
.issue-label{display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--bright);margin:0 0 18px}
.issue-label::before{content:"✦";font-size:18px;color:var(--accent)}
.main-logo{text-decoration:none;color:inherit;display:block;width:max-content;max-width:100%;line-height:.95;letter-spacing:-.045em}
.main-logo .the{display:block;font-family:Georgia,serif;font-size:clamp(26px,3.5vw,45px);font-style:italic;font-weight:400;letter-spacing:-.03em;margin-left:6px}
.main-logo .librarium{display:block;font-family:Georgia,'Times New Roman',serif;font-size:clamp(58px,7.3vw,100px);font-weight:900;letter-spacing:-.065em}
.main-logo .period{color:var(--bright)}
.main-logo:hover{color:var(--banner-ink)}
.hero-kicker{font-size:12px;font-weight:bold;letter-spacing:.04em;color:#fefefeae;margin:22px 0 0}
.mascot-stage{min-height:230px;display:flex;align-items:center;justify-content:center;position:relative;transform:rotate(-4deg)}
.mascot-stage::before{content:"";position:absolute;width:226px;height:226px;border-radius:50%;background:var(--bright);box-shadow:0 0 0 14px #ffffff11,0 0 0 16px #ffffff3f}
.mascot-stage::after{content:"✦";position:absolute;color:var(--banner-ink);font-size:34px;top:20px;right:20px}
.mascot-stage img{position:relative;z-index:2;width:195px;height:187px;object-fit:contain;filter:drop-shadow(0 12px 3px #10252245)}
.stage-caption{position:absolute;bottom:-4px;z-index:3;background:var(--accent);color:#fff;font-weight:900;font-size:9px;letter-spacing:.12em;padding:7px 11px;transform:rotate(4deg)}
main{padding:0 0 65px}
.intro{max-width:1030px;margin:0 auto;padding:70px 62px 65px;display:grid;grid-template-columns:190px minmax(0,1fr);gap:30px;border-bottom:1px solid var(--line)}
.intro::before{content:"01 / ABOUT THE LIBRARY";font-size:11px;letter-spacing:.14em;font-weight:900;color:var(--accent-ink);align-self:start;padding-top:8px}
.intro>.mascot{display:none}
.intro-text{font-size:16px;line-height:1.8}
.intro-text h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(22px,3vw,30px);font-weight:400;line-height:1.3;margin:0 0 19px}
.intro-text h1 strong{font-weight:900}
.intro-text h1 a{color:var(--accent-ink);text-decoration-color:var(--accent)}
.intro-text p{margin:0 0 12px;color:var(--soft)}
.intro-description{margin-top:23px!important}
.desktop-break{display:none}
h2{margin:0;line-height:1.3}
.free-pack{max-width:1030px;margin:0 auto;padding:57px 62px 60px;border-bottom:1px solid var(--line)}
.free-pack h2{font-family:Georgia,serif;font-size:clamp(26px,3.7vw,43px);margin:0 0 27px;letter-spacing:-.04em;font-weight:900}
.free-pack h2::before{content:"02 / YOUR FIRST ADVENTURE";display:block;font:900 11px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.14em;color:var(--accent-ink);margin-bottom:14px}
.itch-widget{display:flex;position:relative;min-height:180px;border:2px solid var(--ink);box-shadow:9px 9px 0 var(--accent);overflow:hidden;text-decoration:none;background:var(--surface);color:var(--ink)}
.itch-widget:hover{transform:translate(-2px,-2px);box-shadow:11px 11px 0 var(--accent)}
.widget-cover{flex:0 0 215px;padding:14px;background:var(--tile);border-right:2px solid var(--ink);display:flex;align-items:center;justify-content:center}
.widget-cover img{display:block;width:100%;height:150px;object-fit:cover}
.widget-info{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:21px 28px;min-width:0}
.widget-info strong{font:900 clamp(18px,2vw,25px)/1.16 Georgia,serif;letter-spacing:-.03em}
.widget-info small{font-size:11px;color:var(--soft)}
.widget-button{display:inline-block;margin-top:13px;padding:9px 17px;background:var(--accent);color:white;font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.widget-brand{position:absolute;right:12px;bottom:6px;font-size:10px;color:var(--soft);opacity:.6}
.more-content{max-width:1030px;margin:auto;padding:63px 62px 5px;display:grid;grid-template-columns:280px 1fr;gap:35px}
.more-content h2{font:900 clamp(28px,3.6vw,42px)/1.13 Georgia,serif;letter-spacing:-.045em}
.more-content h2::before{content:"03 / FIND YOUR ASSETS";display:block;color:var(--accent-ink);font:900 11px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.14em;margin-bottom:16px}
.explainer p{font-size:14px;color:var(--soft);margin:0 0 16px;line-height:1.8}
.explainer strong{color:var(--ink)}
.explainer strong a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:3px}
.explainer .browse-note{font-weight:bold;color:var(--accent-ink);font-size:12px;margin-top:24px}
.platforms{max-width:1030px;margin:24px auto 0;padding:0 62px 60px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.platform{border:1.5px solid var(--ink);background:var(--surface);display:flex;min-width:0;min-height:240px;padding:28px 20px 19px;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-decoration:none;transition:transform .16s,box-shadow .16s}
.platform:nth-child(1){background:#fff3e7}.platform:nth-child(2){background:#f3f0e8}.platform:nth-child(3){background:#f5effb}
.platform img{max-width:100%;height:134px;width:160px;object-fit:contain}
.platform span{align-self:stretch;border-top:1px solid #a0a0926b;padding-top:11px;font-weight:900;font-size:13px;text-align:left}
.platform span::after{content:"↗";float:right;font-size:18px}
.platform:hover{transform:translateY(-5px);box-shadow:5px 7px 0 var(--shadow)}
.ending{max-width:900px;margin:15px auto 15px;padding:35px 45px;background:var(--banner);color:var(--banner-ink);text-align:center}
.ending h2{font:900 31px Georgia,serif}.ending p{font-size:13px}.ending a{color:var(--bright)}
.footer{background:var(--ink);color:#f6f3e0b0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:27px 56px;font-size:11px;line-height:2}
.footer a{color:#f6f3e0;text-decoration:none}.footer a:hover{color:var(--bright)}
/* Interior pages. Same banner and navigation, different editorial page bodies. */
.subpage-main{padding-bottom:90px}
.subpage-hero{max-width:995px;margin:0 auto;padding:61px 62px 36px;border-bottom:1px solid var(--line);text-align:left}
.subpage-hero img{display:none}
.page-eyebrow{font-size:11px;letter-spacing:.15em;color:var(--accent-ink);font-weight:900;margin:0 0 9px}
.subpage-hero h1{font:900 clamp(40px,5.2vw,65px)/1.1 Georgia,serif;letter-spacing:-.055em;margin:0}
.page-intro{max-width:750px;font-size:17px;color:var(--soft);line-height:1.65;margin:17px 0 0}
.jump-links{max-width:1000px;margin:26px auto 5px;padding:0 62px;display:flex;flex-wrap:wrap;gap:8px}
.jump-links a{background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:7px 12px;font-size:12px;text-decoration:none;font-weight:bold}
.jump-links a:hover{background:var(--bright)}
.document-content{max-width:995px;padding:0 62px;margin:0 auto}
.policy-section{margin:30px 0 26px;padding:36px 38px 28px;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--accent);scroll-margin-top:25px}
.policy-section h2{font:900 clamp(22px,2.8vw,30px)/1.23 Georgia,serif;letter-spacing:-.025em;margin:0 0 17px}
.policy-description{font-size:14px;line-height:1.8;font-weight:bold;color:var(--accent-ink);margin:0 0 24px}
.policy-copy{font-size:14px;line-height:1.8;overflow-wrap:anywhere}
.policy-copy p{margin:0 0 16px}
.policy-lines{list-style:none;padding:0;margin:18px 0}
.policy-lines li{padding:11px 14px 11px 27px;border-bottom:1px solid var(--line);position:relative}
.policy-lines li::before{content:"◆";position:absolute;left:6px;top:15px;color:var(--accent);font-size:9px}
.policy-lines li:nth-child(even){background:var(--paper)}
.policy-signature{font-weight:bold;color:var(--accent-ink);text-align:right;margin-top:24px!important}
.translation-credit{font-size:12px;color:var(--accent-ink);font-weight:bold;letter-spacing:.04em}
.back-home{text-align:center;margin:38px 0 0;font-size:14px;font-weight:900}.back-home a{color:var(--accent-ink)}
.supporter-section{max-width:995px;margin:26px auto;padding:0 62px}
.supporter-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:24px;background:var(--surface);border:1px solid var(--line)}
.supporter-grid li{font-size:12px;padding:11px 11px 11px 22px;min-width:0;overflow-wrap:anywhere;position:relative;border-bottom:1px solid var(--line)}
.supporter-grid li::before{content:"✦";position:absolute;left:5px;color:var(--accent);font-size:10px}
.thanks-signoff{text-align:center;max-width:740px;margin:30px auto;padding:35px;background:var(--bright);color:var(--ink);font-size:17px;font-weight:700}
.thanks-signoff p{margin:6px 0}
.wiki-placeholder{max-width:870px;margin:36px auto;padding:60px 50px;text-align:left;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--accent)}
.wiki-placeholder h2{font:900 32px Georgia,serif;margin:0 0 22px}.wiki-placeholder p{font-size:15px;color:var(--soft)}
.wiki-placeholder a{color:var(--accent-ink)}
@media(max-width:1040px){.topbar{padding:0 35px}.topbar-note{display:none}.hero-banner{padding:37px 42px 53px}.intro,.free-pack,.more-content{padding-left:42px;padding-right:42px}.platforms,.jump-links,.supporter-section,.document-content{padding-left:42px;padding-right:42px}.subpage-hero{padding-left:42px;padding-right:42px}}
@media(max-width:740px){.topbar{padding:0 22px;min-height:60px}.brand-stamp{font-size:11px}.menu-button{display:block;background:transparent;color:var(--banner-ink);border:1px solid #ffffff50;padding:8px 12px;font-weight:900;font-size:11px;cursor:pointer}.nav-menu{display:none;position:absolute;top:60px;right:0;left:0;background:var(--banner);padding:14px 22px 18px;border-top:1px solid #ffffff30;z-index:10;box-shadow:0 12px 18px #0003}.nav-menu.menu-open{display:flex;align-items:stretch;flex-direction:column;gap:0}.nav-menu a{padding:11px 4px;font-size:13px;border-bottom:1px solid #ffffff22}.hero-banner{min-height:270px;padding:38px 30px 42px;grid-template-columns:minmax(0,1fr) 135px;gap:8px}.main-logo .the{font-size:27px}.main-logo .librarium{font-size:clamp(47px,7.8vw,72px)}.mascot-stage{min-height:148px}.mascot-stage::before{height:128px;width:128px}.mascot-stage::after{top:0;right:0}.mascot-stage img{width:127px;height:129px}.stage-caption{font-size:7px;bottom:0}.hero-kicker{font-size:10px;margin-top:15px}.issue-label{font-size:9px}.intro{padding:43px 30px 46px;grid-template-columns:1fr;gap:15px}.free-pack{padding:42px 30px}.more-content{padding:48px 30px 0;grid-template-columns:1fr;gap:20px}.platforms{padding:0 30px 45px;gap:9px}.platform{min-height:180px;padding:18px 10px 13px}.platform img{height:88px;width:118px}.platform span{font-size:11px}.ending{margin:10px 30px}.subpage-hero{padding:46px 30px 30px}.document-content,.jump-links,.supporter-section{padding-left:30px;padding-right:30px}.supporter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer{padding:23px 30px}}
@media(max-width:520px){.hero-banner{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-height:0}.main-logo .librarium{font-size:clamp(44px,12.5vw,67px)}.mascot-stage{align-self:flex-end;margin-top:-15px;margin-right:15px}.mascot-stage::before{width:128px;height:128px}.issue-label{letter-spacing:.07em}.widget-cover{flex:0 0 120px;padding:9px}.widget-cover img{height:125px}.widget-info{padding:14px 14px}.widget-info strong{font-size:17px}.widget-button{padding:8px 10px;font-size:10px}.platforms{grid-template-columns:1fr;gap:12px}.platform{display:grid;grid-template-columns:90px 1fr;min-height:100px;gap:16px;text-align:left}.platform img{height:78px;width:80px}.platform span{align-self:center;font-size:14px}.policy-section{padding:23px 18px}.supporter-grid{grid-template-columns:1fr;padding:15px}.thanks-signoff{margin-left:20px;margin-right:20px;padding:25px}.wiki-placeholder{margin-left:20px;margin-right:20px;padding:30px 20px}.footer{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.platform{transition:none}}


/* Variant B: Celestial Catalog. Alternate design system and compositions. */
:root{--paper:#eeeff8;--canvas:#c8cadf;--ink:#292749;--soft:#61627d;--accent:#dc4f83;--accent-ink:#ad3263;--banner:#23233f;--banner-ink:#f4efff;--bright:#f9b4d4;--surface:#faf8ff;--line:#d4d1e4;--tile:#e1e1f5;--shadow:rgba(25,22,65,.18)}
body::before{background-image:repeating-linear-gradient(90deg,transparent 0 50px,rgba(65,49,138,.09) 51px,transparent 52px)}
.topbar{border-bottom:1px solid #ffffff25}
.hero-banner{background-image:radial-gradient(ellipse at 85% 45%,#4a416d 0%,transparent 50%),radial-gradient(ellipse at 5% -20%,#332957 0%,transparent 50%);min-height:380px}
.hero-banner::before{opacity:.38;background-image:radial-gradient(#efdbff 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(90deg,transparent 40%,#000 90%)}
.main-logo .the{font-style:normal;font-size:clamp(22px,2.6vw,34px);font-family:Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.main-logo .librarium{font-family:Arial,Helvetica,sans-serif;font-weight:950;text-transform:uppercase;font-size:clamp(55px,6.5vw,91px);letter-spacing:-.075em;line-height:.94}
.mascot-stage{transform:none}
.mascot-stage::before{background:#ff93b9;border-radius:18%;transform:rotate(17deg);box-shadow:0 0 0 16px #f3ecff20,0 0 0 18px #cab8ff44}
.mascot-stage::after{content:"✧";color:#fff;right:5px;top:2px}
.stage-caption{background:#fff;color:#4e315b;transform:rotate(-3deg)}
.intro{display:block;position:relative;max-width:1030px;padding-top:72px}
.intro::before{display:block;padding:0 0 19px}
.intro-text{max-width:820px}.intro-text h1{font-family:Arial,sans-serif;font-size:clamp(27px,3.1vw,39px);font-weight:800;letter-spacing:-.05em}
.free-pack h2,.more-content h2,.subpage-hero h1{font-family:Arial,Helvetica,sans-serif;letter-spacing:-.055em}
.itch-widget{box-shadow:9px 9px 0 #a19be7}
.itch-widget:hover{box-shadow:11px 11px 0 #a19be7}
.widget-button{border-radius:18px}.more-content{display:block}.more-content h2{max-width:740px;margin-bottom:22px}
.explainer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.explainer p:not(.browse-note){background:var(--surface);border-top:4px solid var(--accent);padding:23px 19px;font-size:13px}
.explainer .browse-note{grid-column:1/-1}
.platform{border-radius:15px;box-shadow:3px 4px 0 #45427525}.platform:nth-child(1){background:#f7e7f0}.platform:nth-child(2){background:#e9eafa}.platform:nth-child(3){background:#f0e5fa}
.ending{border-radius:20px;background:linear-gradient(110deg,#25213e,#45336f)}
.policy-section{border-radius:14px;border-left:1px solid var(--line);border-top:6px solid var(--accent)}
.policy-lines li::before{content:"✧";font-size:14px;top:11px}
.supporter-grid{border-radius:12px}.thanks-signoff{border-radius:15px}
@media(max-width:740px){.hero-banner{min-height:280px}.main-logo .librarium{font-size:clamp(43px,7.5vw,72px)}.explainer{grid-template-columns:1fr}.explainer p:not(.browse-note){margin:0}}
@media(max-width:520px){.hero-banner{min-height:0}.main-logo .librarium{font-size:clamp(41px,11.7vw,65px)}}