/* Drop your own fonts into book/site/fonts/ (display.woff2/.ttf = the script
   keyword, caps.woff2/.ttf = the lead-in). They auto-override the web fonts. */
@font-face{font-family:'BookDisplay';src:url('fonts/display.woff2') format('woff2'),url('fonts/display.ttf') format('truetype');font-display:swap}
@font-face{font-family:'BookCaps';src:url('fonts/caps.woff2') format('woff2'),url('fonts/caps.ttf') format('truetype');font-display:swap}
:root{--bg:#0f1216;--panel:#161b22;--fg:#e6e6e6;--muted:#9aa4b2;--accent:#7aa2ff;--line:#252b34;--quote:#c8d3e6;
  --font-display:'BookDisplay','Caveat',cursive;--font-caps:'BookCaps','Cormorant Garamond',Georgia,serif}
*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--fg);font:18px/1.7 Georgia,'Times New Roman',serif}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:6px 10px;z-index:9;border-radius:6px}
.top{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line);font-family:system-ui,sans-serif;position:sticky;top:0;z-index:5}
.brand{color:#fff;font-weight:700;text-decoration:none;font-size:15px}.tag{color:var(--muted);font-size:12px}
main{max-width:760px;margin:0 auto;padding:18px 22px 80px}
.crumb{font-family:system-ui,sans-serif;font-size:12px;color:var(--muted);margin:4px 0 14px}
.crumb a{color:var(--accent);text-decoration:none}.crumb span{color:var(--fg)}
article h1{font-size:1.9em;line-height:1.2;margin:.3em 0 .6em}article h2{font-size:1.4em;margin:1.6em 0 .4em}article h3{font-size:1.15em;margin:1.3em 0 .3em}
p{margin:0 0 1.05em}hr{border:none;border-top:1px solid var(--line);margin:2em auto;width:38%}
.chlabel{font-family:system-ui,sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
blockquote.quote{margin:1.1em 0 .4em;padding:.5em 0 .5em 1.1em;border-left:3px solid var(--accent);color:var(--quote);font-style:italic}
.receipts{margin:2em 0 0;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-family:system-ui,sans-serif;font-size:14px;font-style:normal;color:var(--muted)}
details.clip{margin:0 0 1.3em;font-family:system-ui,sans-serif}
details.clip summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--accent);padding:5px 11px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
details.clip summary::-webkit-details-marker{display:none}.details.clip .play{font-size:11px}.clip .src{color:var(--muted);font-size:11px}
details.clip[open] summary{margin-bottom:10px}
.embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nav{display:flex;justify-content:space-between;gap:10px;font-family:system-ui,sans-serif;margin:6px 0 22px}
.navbtn{color:var(--fg);text-decoration:none;font-size:13px;padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42%}
.navbtn:hover{border-color:var(--accent)}
.capture{margin:2.4em 0;padding:20px;background:linear-gradient(160deg,#18223a,#141821);border:1px solid var(--line);border-radius:14px;font-family:system-ui,sans-serif}
.capture h2{margin:0 0 4px;color:#fff;font-size:18px;text-transform:none;letter-spacing:0}.capture p{margin:0 0 12px;color:var(--muted);font-size:14px}
.capform{display:flex;gap:8px;flex-wrap:wrap}
.capform input{flex:1;min-width:200px;padding:11px 13px;border-radius:9px;border:1px solid var(--line);background:#0d1016;color:#fff;font-size:14px}
.capform button{padding:11px 18px;border:none;border-radius:9px;background:var(--accent);color:#0b0f17;font-weight:700;cursor:pointer;font-size:14px}
.cap-note{margin-top:8px;font-size:11px;color:#5d6675}
.hero{padding:18px 0 6px}.hero h1{font-size:2.3em;line-height:1.1;margin:.1em 0 .3em}.hero .sub{color:var(--muted);font-family:system-ui,sans-serif;font-size:15px;line-height:1.6}
.cover{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line);margin:0 0 20px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
main h2{font-family:system-ui,sans-serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:1.8em 0 .7em}
.ixgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.ix{display:flex;gap:10px;align-items:baseline;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--fg);font-family:system-ui,sans-serif}
.ix:hover{border-color:var(--accent)}.ix b{color:var(--accent);min-width:20px}.ix span{font-size:14px}.ix.front{grid-column:1/-1;background:linear-gradient(160deg,#18223a,#141821)}
footer{max-width:760px;margin:0 auto;padding:20px 22px 50px;color:#5d6675;font-family:system-ui,sans-serif;font-size:12px;border-top:1px solid var(--line)}
footer a{color:#7aa2ff;text-decoration:none}
footer a:hover{text-decoration:underline}
.hero{position:relative;margin:0 0 1.3em;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.hero .hero-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0;border:0}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,10,14,.74) 0%,rgba(8,10,14,.42) 40%,rgba(8,10,14,0) 66%)}
.ov{position:absolute;inset:0;z-index:2;width:62%;padding:0 4% 0 7%;pointer-events:none;color:#fff;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.12em;text-align:left}
.ov-pre,.ov-post{font-family:var(--font-caps);text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(.62rem,1.9vw,1.02rem);line-height:1.45;opacity:.92;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.ov-post{font-style:italic;text-transform:none;letter-spacing:.01em;font-size:clamp(.72rem,2.1vw,1.08rem);opacity:.96}
.ov-key{font-family:var(--font-display);font-weight:700;color:#fff;line-height:.92;margin:.04em 0;
  font-size:clamp(2.5rem,9vw,5.4rem);transform:rotate(-2deg);text-shadow:0 3px 20px rgba(0,0,0,.6)}
.ov-pre{animation:ovUp .6s ease both .15s}
.ov-key{animation:ovPop .85s cubic-bezier(.2,.85,.25,1.25) both .35s}
.ov-post{animation:ovUp .6s ease both .62s}
@keyframes ovUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes ovPop{0%{opacity:0;transform:scale(.68) rotate(-5deg)}60%{opacity:1;transform:scale(1.05) rotate(-1deg)}100%{opacity:1;transform:scale(1) rotate(-2deg)}}
@media(max-width:560px){.ov{width:78%;padding-left:6%}}
@media(prefers-reduced-motion:reduce){.ov-pre,.ov-key,.ov-post{animation:none}}
.cta{display:inline-block;margin-top:14px;padding:11px 20px;background:var(--accent);color:#0b0f17;font-weight:700;text-decoration:none;border-radius:9px;font-family:system-ui,sans-serif}
body.gated #main article > *:nth-child(n+9){filter:blur(6px);opacity:.35;pointer-events:none;user-select:none}
#gate{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(ellipse at center,rgba(15,18,22,.7),rgba(15,18,22,.96));backdrop-filter:blur(3px)}
body.gated #gate{display:flex}
.gatecard{max-width:440px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:26px;text-align:center;font-family:system-ui,sans-serif;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.gatecard .gk{display:inline-block;font-size:12px;color:var(--accent);border:1px solid var(--line);border-radius:20px;padding:4px 12px;margin-bottom:12px}
.gatecard h2{margin:0 0 6px;color:#fff;font-size:22px}.gatecard p{margin:0 0 16px;color:var(--muted);font-size:14px}
#gateform{display:flex;gap:8px;flex-wrap:wrap}
#gateform input{flex:1;min-width:180px;padding:12px 13px;border-radius:9px;border:1px solid var(--line);background:#0d1016;color:#fff;font-size:14px}
#gateform button{padding:12px 18px;border:none;border-radius:9px;background:var(--accent);color:#0b0f17;font-weight:700;cursor:pointer;font-size:14px}
#gatehave{margin-top:12px;background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;text-decoration:underline}
.cap-note{margin-top:12px;font-size:11px;color:#5d6675}
.cap-note a{color:#7aa2ff;text-decoration:none}.cap-note a:hover{text-decoration:underline}
article a{color:#7aa2ff}
@media(max-width:520px){.tag{display:none}}