@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/outfit.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/plus-jakarta-sans.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jetbrains-mono.woff2) format('woff2')}

/* One type scale for the whole page */
:root{
  --t1:12px; --t2:15px; --t3:17px; --t4:22px;
  --t5:clamp(30px,3.4vw,42px); --t6:clamp(44px,6.4vw,84px); --t7:clamp(56px,11vw,148px);
  --display:'Outfit',system-ui,sans-serif; --text:'Plus Jakarta Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(16px,5vw,64px);
}
:root[data-theme="dark"]{
  --ground:#0a0a12; --ink:#faf9f7; --body:rgba(250,249,247,.8); --muted:#8a9698;
  --gold:#d4a23e; --gold-deep:#8B6914; --rule:rgba(250,249,247,.12); --panel:rgba(250,249,247,.04);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--body);font:400 var(--t3)/1.65 var(--text);transition:background .4s,color .4s}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.015em;color:var(--ink);margin:0;line-height:1.05}
.label{font:400 var(--t1)/1.4 var(--mono);text-transform:uppercase;letter-spacing:.17em;color:var(--muted);margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--ground);padding:8px 12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Top bar */
.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:24px;padding:14px var(--pad);color:#faf9f7;transition:background .35s,color .35s,border-color .35s;border-bottom:1px solid transparent}
.bar.solid{background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);border-bottom-color:var(--rule)}
.mark{white-space:nowrap;font:800 var(--t2)/1 var(--display);letter-spacing:.03em;text-transform:uppercase;text-decoration:none}
.bar nav{display:flex;gap:14px;align-items:center;margin-left:auto}
.bar .sep{opacity:.45;font:400 var(--t1)/1 var(--mono)}
.bar nav a{font:400 var(--t1)/1 var(--mono);text-transform:uppercase;letter-spacing:.17em;text-decoration:none;opacity:.85}
.bar nav a:hover{opacity:1;color:var(--gold)}

/* Entering */
.enter{position:relative;height:300vh}
.enter-frame{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0a0a12}
.enter-img{position:absolute;inset:0;background:url(hero.webp) 50% 62%/cover no-repeat;will-change:transform;transform-origin:50% 69%}
.enter-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,18,.55) 0%,rgba(10,10,18,0) 34%,rgba(10,10,18,0) 70%,rgba(10,10,18,.55) 100%)}
.enter-veil::after{content:"";position:absolute;inset:0;background:var(--ground);opacity:var(--fade,0)}
.enter-title{position:absolute;left:0;right:0;top:15vh;text-align:center;padding:0 var(--pad);color:#faf9f7;will-change:opacity,transform}
.enter-title .label{color:rgba(250,249,247,.85);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.enter-title h1{font-size:var(--t7);color:#faf9f7;margin:.12em 0 .14em;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.byline{text-shadow:0 1px 12px rgba(0,0,0,.6);font:600 var(--t2)/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0}
.enter-mind{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:18vh !important;text-align:center;padding:0 var(--pad);opacity:0;pointer-events:none}
.enter-mind h2{font-size:var(--t6);max-width:14ch;text-shadow:0 2px 24px rgba(10,10,18,.35)}
.enter-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);font:400 var(--t1)/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:#faf9f7;text-decoration:none;padding-bottom:26px}
.enter-cue::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:18px;background:var(--gold);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(-6px);opacity:.2}50%{transform:translateY(0);opacity:1}}
.enter-cap{position:absolute;right:var(--pad);bottom:34px;color:rgba(250,249,247,.7)}

/* Section heads */
.sec-head{padding-top:clamp(72px,11vw,140px);padding-bottom:36px}
.sec-head h2{font-size:var(--t6);margin-top:10px}
.lead{font-size:var(--t4);line-height:1.5;max-width:34em;margin:18px 0 0}

/* Philosophy */
.philosophy-text{font-size:var(--t4);line-height:1.6;color:var(--ink);max-width:34em}
.philosophy-text p{margin:0 0 1em}

/* Volumes */
.vol-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.vol{text-decoration:none;display:block}
.vol img{border-radius:3px;box-shadow:0 18px 40px rgba(0,0,0,.28);transition:transform .35s}
.vol:hover img{transform:translateY(-4px)}
.vol .label{display:block;margin-top:16px;color:var(--gold)}
.vol strong{display:block;font:800 var(--t4)/1.15 var(--display);letter-spacing:-.015em;color:var(--ink);margin-top:6px}
.vol em{display:block;font-style:normal;font-size:var(--t2);color:var(--muted);margin-top:4px}

/* More */
.more{padding-top:clamp(72px,10vw,120px)}
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.more-card{text-decoration:none;display:block}
.more-card img{aspect-ratio:16/9;object-fit:cover;width:100%;border-radius:4px}
.more-card .label{display:block;margin-top:14px}
.more-card strong{display:block;font:800 var(--t4)/1.15 var(--display);color:var(--ink);margin-top:6px}
.more-card:hover strong{color:var(--gold)}

.foot{padding-top:clamp(72px,10vw,120px);padding-bottom:48px;border-top:0}
.foot p{margin:0 0 8px;color:var(--ink);font-size:var(--t2)}
.foot strong{font-family:var(--display);font-weight:800}

@media (max-width:860px){
  .bar{gap:12px}
  .bar nav{gap:8px}
  .vol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .more-grid{grid-template-columns:1fr}
  .enter-cap{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .enter{height:auto}.enter-frame{position:relative}
  .enter-cue::after{animation:none}
}

/* Background music toggle */
.snd{margin-left:14px;background:none;border:1px solid currentColor;border-radius:999px;color:inherit;font:400 var(--t1)/1 var(--mono);text-transform:uppercase;letter-spacing:.17em;padding:6px 11px;opacity:.7;cursor:pointer}
.snd:hover,.snd[aria-pressed="true"]{opacity:1;color:var(--gold)}
@media (max-width:640px){.snd{margin-left:6px;padding:5px 8px}}