/* 7Runa — scriptorio-tomo-abismo-b20r. Unique eldritch-library lobby skeleton. */
@font-face{font-family:TomoMark;src:url(/fonts/grenze-gotisch.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:TomoSerif;src:url(/fonts/literata-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:TomoSerif;src:url(/fonts/literata-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --void:#08050e;--green:#9aff3d;--glow:#3dff9a;--violet:#5a1a8a;--bone:#f0e6d4;
  --burgundy:#6a1224;--brass:#c4a86a;--mute:#b8a8c8;--line:rgba(154,255,61,.42);
  --deep:#05030a;--cta:#9aff3d;--cta-ink:#081004;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--void);color:var(--bone);
  font-family:TomoSerif,Georgia,serif;font-size:16px;line-height:1.55;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:#d8ff8a}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.rn-skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.rn-skip:focus{left:8px;top:8px;width:auto;height:auto;padding:8px 12px;background:var(--green);color:var(--cta-ink);z-index:90}
.rn-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* leather-spine header */
.rn-spine{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;
  padding:5px 14px;height:62px;min-height:62px;
  background:
    linear-gradient(180deg,rgba(154,255,61,.16),transparent 48%),
    linear-gradient(90deg,#14081c 0%,#08050e 42%,#1a0828 100%);
  border-bottom:2px solid #7a2cb0;
  box-shadow:0 8px 28px #000c, inset 0 -1px 0 #9aff3d55, 0 0 24px #5a1a8a88}
.rn-brand{display:flex;align-items:center;gap:8px;color:var(--green);white-space:nowrap;flex:none}
.rn-brand img{width:56px;height:56px;flex:none;border-radius:12px;object-fit:cover;
  box-shadow:0 0 16px #9aff3d88,0 0 0 1px #c4a86a88}
.rn-word{font-family:TomoMark,TomoSerif,serif;font-weight:800;font-size:72px;line-height:1;
  letter-spacing:.02em;display:flex;align-items:center;height:56px;
  background:linear-gradient(180deg,#f6ffc0 0%,#9aff3d 45%,#3dff9a 78%,#d27cff 100%);
  -webkit-background-clip:text;background-clip:text;color:#9aff3d;-webkit-text-fill-color:transparent;
  filter:drop-shadow(2px 0 0 #08050e) drop-shadow(-2px 0 0 #08050e) drop-shadow(0 2px 0 #08050e) drop-shadow(0 0 12px rgba(154,255,61,.9))}
.rn-chips{display:flex;flex-wrap:nowrap;gap:5px;margin-left:auto;align-items:center}
.rn-chip{display:inline-flex;align-items:center;gap:5px;height:40px;min-height:40px;padding:0 10px;border-radius:20px;
  border:1px solid rgba(154,255,61,.5);background:linear-gradient(180deg,#1c1028,#0c0814);
  color:var(--bone);font-weight:700;font-size:13px;font-family:TomoSerif,serif;
  box-shadow:inset 0 1px 0 #9aff3d33,0 2px 0 #0008}
.rn-chip svg{width:18px;height:18px;flex:none}
.rn-chip[aria-current="page"],.rn-chip:hover{border-color:var(--green);color:var(--green);
  box-shadow:0 0 0 1px var(--green),0 0 14px #5a1a8a88}
.rn-burger{display:none;background:none;border:1px solid var(--green);color:var(--green);
  border-radius:10px;padding:8px 10px;font:inherit;min-height:40px}

.rn-go,.rn-go-rec{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;min-height:40px;padding:0 14px;border-radius:12px;font-weight:700;font-size:13px;letter-spacing:.04em;
  border:0;cursor:pointer;white-space:nowrap;font-family:TomoSerif,serif}
.rn-go{background:linear-gradient(180deg,#d8ff8a,#9aff3d 42%,#4ad020);color:var(--cta-ink);
  box-shadow:0 0 0 1px #f4ffe0,0 0 18px #9aff3d99,0 4px 0 #1a5a10}
.rn-go:hover{color:var(--cta-ink);filter:brightness(1.08)}
.rn-go-rec{background:linear-gradient(180deg,#c9a0ff,#7a2cff 40%,#4a148c);color:#f6f0ff;
  box-shadow:0 0 0 1px #e6d8ff,0 0 16px #7a2cff88,0 3px 0 #2a1060}
.rn-go-rec:hover{color:#fff;filter:brightness(1.06)}
.rn-go .rn-arr,.rn-go-rec .rn-arr{width:16px;height:16px}
.rn-spine .rn-go{flex:none}

/* inkblot ticker — slogans only, no body copy in the fold */
.rn-ink{height:22px;overflow:hidden;background:#05030a;border-bottom:1px solid #9aff3d66;
  display:flex;align-items:center}
.rn-ink-track{display:flex;gap:64px;white-space:nowrap;animation:rn-marq 28s linear infinite;padding-left:20px;
  font-size:13px;font-weight:700;color:var(--green);letter-spacing:.08em;text-transform:uppercase}
.rn-ink-track b{color:#d27cff;margin:0 6px}
@keyframes rn-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* compact forbidden-library hero — 310px, full-width illustrated */
.rn-hero{position:relative;height:310px;overflow:hidden;margin:0;
  border-bottom:1px solid var(--line);
  box-shadow:0 0 48px #5a1a8a66, inset 0 0 60px #9aff3d18}
.rn-hero-art{width:100%;height:310px;object-fit:cover;object-position:62% 50%;display:block;
  filter:brightness(1.12) saturate(1.14) contrast(1.06)}
.rn-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 70% 55% at 18% 100%,rgba(154,255,61,.22),transparent 62%),
    radial-gradient(ellipse 46% 50% at 70% 40%,rgba(90,26,138,.28),transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 70%,rgba(61,255,154,.14),transparent 60%);
  mix-blend-mode:screen}
.rn-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(8,5,14,.72) 0 22%,rgba(8,5,14,.18) 58%,rgba(8,5,14,.28) 100%),
             linear-gradient(180deg,rgba(8,5,14,.10) 0,transparent 36%,rgba(8,5,14,.22) 100%)}
.rn-hero-box{position:absolute;inset:0;z-index:2;display:grid;
  grid-template-columns:1fr auto;align-items:center;gap:16px;
  max-width:1280px;margin:0 auto;padding:12px 22px;width:100%}
.rn-hero-copy h1{margin:0 0 8px}
.rn-h1{font-family:TomoSerif,Georgia,serif;font-weight:700;font-size:96px;line-height:.92;
  letter-spacing:.01em;text-transform:uppercase;display:block;
  background:linear-gradient(180deg,#f6ff9a 0%,#c8ff3a 28%,#9aff3d 55%,#6dff8a 78%,#d27cff 100%);
  -webkit-background-clip:text;background-clip:text;color:#9aff3d;-webkit-text-fill-color:transparent;
  filter:
    drop-shadow(3px 0 0 #08050e) drop-shadow(-3px 0 0 #08050e)
    drop-shadow(0 3px 0 #08050e) drop-shadow(0 -3px 0 #08050e)
    drop-shadow(2px 2px 0 #08050e) drop-shadow(-2px 2px 0 #08050e)
    drop-shadow(0 0 18px rgba(154,255,61,.95)) drop-shadow(0 0 28px rgba(90,26,138,.7))}
.rn-kicker{margin:0 0 10px;font-family:TomoSerif,serif;font-weight:700;font-size:18px;color:#e8ffc0;
  text-shadow:0 2px 0 #08050e,0 0 12px #08050e;letter-spacing:.02em}
.rn-hero-copy .rn-go, .rn-go-hero{height:52px;min-height:52px;padding:0 26px;font-size:18px;font-weight:700;
  letter-spacing:.06em;border-radius:14px}

/* tome-spine RTP badge */
.rn-rtp{width:150px;min-height:140px;align-self:start;justify-self:end;margin-top:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:
    radial-gradient(circle at 50% 20%,#9aff3d55 0 16%,transparent 46%),
    linear-gradient(180deg,#2a1040,#12081c 50%,#08050e);
  border-radius:8px 8px 18px 18px;
  border:2px solid var(--brass);
  box-shadow:0 0 0 2px #5a1a8a88,0 0 24px #9aff3d66,inset 0 0 18px #0008;color:var(--green);
  padding:10px 8px 12px}
.rn-rtp strong{font-family:TomoMark,TomoSerif,serif;font-size:1.9rem;font-weight:800;line-height:1;
  color:#e8ffc0;text-shadow:0 0 12px #9aff3d,0 0 18px #5a1a8a;margin-top:2px}
.rn-rtp span{font-size:.68rem;font-weight:700;letter-spacing:.14em;color:#e8ffc0;text-transform:uppercase}
.rn-rtp small{display:block;font-size:.62rem;font-weight:700;color:#c4b8d4;line-height:1.25;max-width:16ch;margin-top:4px}

/* slim bone-plaque promo rail — art already holds the title; no extra sentences or buttons */
.rn-banners{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  max-width:1280px;margin:0 auto;padding:6px 16px 4px}
.rn-banner{position:relative;display:block;height:132px;border-radius:10px;overflow:hidden;
  border:2px solid rgba(196,168,106,.55);
  box-shadow:0 4px 0 #05030a,0 0 16px #5a1a8a44}
.rn-banner img{width:100%;height:132px;object-fit:cover;filter:brightness(1.08) saturate(1.1)}
.rn-banner:hover{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 18px #9aff3d55}

/* lectern-shelf row of 8 bone-violet tiles, fully visible on 1280x800, bottom ~780px */
.rn-shelf{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;
  max-width:1280px;margin:0 auto;padding:6px 16px 0}
.rn-tile{position:relative;display:block;height:240px;border-radius:10px;overflow:hidden;
  border:2px solid rgba(196,168,106,.6);
  box-shadow:0 3px 0 #05030a,0 0 12px #9aff3d22, inset 0 0 0 1px #5a1a8a55}
.rn-tile img{width:100%;height:240px;object-fit:cover;object-position:center 30%;filter:brightness(1.1) saturate(1.12)}
.rn-tag{position:absolute;top:6px;left:6px;z-index:2;padding:2px 7px;border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.08em;color:#081004;font-family:TomoSerif,serif}
.rn-tag-hot{background:linear-gradient(180deg,#ffb09a,#e83040);box-shadow:0 0 8px #e8304088;color:#fff8f0}
.rn-tag-novo{background:linear-gradient(180deg,#d8ff8a,#9aff3d);box-shadow:0 0 8px #9aff3d88}
.rn-name{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:7px 4px 8px;
  min-height:52px;display:flex;align-items:center;justify-content:center;
  font-family:TomoSerif,Georgia,serif;font-weight:700;font-size:17px;line-height:1.15;letter-spacing:.03em;
  text-transform:uppercase;color:#f0e6d4;text-align:center;
  text-shadow:0 1px 0 #000,0 0 8px #08200a;
  background:#0a0712;
  border-top:1px solid rgba(154,255,61,.45);
  box-shadow:inset 0 1px 0 rgba(240,230,212,.1)}
.rn-tile:hover{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 16px #5a1a8a88}

/* below-fold marginalia ranking + sections */
.rn-wrap{max-width:1280px;margin:0 auto;padding:18px 16px 40px}
.rn-ledger{margin:32px auto 0;max-width:1248px;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#14081c,#08050e)}
.rn-ledger h2{margin:0;padding:10px 16px;font-family:TomoMark,serif;font-size:28px;font-weight:800;
  color:var(--green);letter-spacing:.04em;border-bottom:1px solid var(--line);
  text-shadow:0 0 12px #9aff3d66}
.rn-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.rn-fact{padding:12px 14px;border-right:1px solid rgba(154,255,61,.18)}
.rn-fact:last-child{border-right:0}
.rn-fact b{display:block;font-family:TomoMark,serif;font-size:22px;color:#fff;line-height:1.1;
  text-shadow:0 0 10px #9aff3d66}
.rn-fact span{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.rn-fact small{display:block;font-size:11px;color:#9a8aac;margin-top:4px}

.rn-panel{margin:22px 0;background:linear-gradient(180deg,#12081a,#08050e);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rn-panel h2{margin:0;padding:12px 16px;font-family:TomoMark,serif;font-size:28px;color:var(--green);border-bottom:1px solid var(--line)}
.rn-panel .rn-body{padding:16px}
.rn-panel p{margin:0 0 12px;color:#d8cce0}
.rn-cover{width:100%;height:auto;border-radius:0;aspect-ratio:1200/630;object-fit:cover}
.rn-crumb{font-size:13px;font-weight:600;color:var(--mute);padding:10px 16px 0}
.rn-crumb a{color:var(--glow)}
.rn-note{font-size:13px;color:var(--mute)}
.rn-disc{font-size:12px;color:#9a8aac;margin-top:6px}
.rn-footer{border-top:1px solid var(--line);padding:22px 16px 32px;text-align:center;color:var(--mute);font-size:13px;
  background:#05030a}
.rn-footer a{color:var(--green)}
.rn-18{display:inline-block;margin:0 6px;padding:1px 7px;border:1px solid #e83040;color:#ff8a96;
  border-radius:4px;font-weight:700;letter-spacing:.06em}

.rn-article{max-width:860px}
.rn-article h1{font-family:TomoMark,serif;font-size:42px;line-height:1.1;color:var(--green);font-weight:800;margin:8px 0 16px;
  text-shadow:0 0 16px #9aff3d44}
.rn-article h2{font-family:TomoMark,serif;font-size:28px;color:var(--green);font-weight:800;margin:22px 0 8px}
.rn-article h3{font-size:18px;color:#e8ffc0;margin:18px 0 6px}
.rn-article ul,.rn-article ol{color:#d8cce0}
.rn-src{font-size:13px;color:#9a8aac}
.rn-src a{color:var(--glow)}

/* reviews hub — marginalia slips, 5 scriptoria */
.rn-tools{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;align-items:center;
  border-bottom:1px solid var(--line)}
.rn-tools input[type="search"]{flex:1;min-width:200px;height:40px;border-radius:10px;border:1px solid var(--line);
  background:#12081a;color:var(--bone);padding:0 12px;font:inherit}
.rn-scriptoria{display:flex;flex-wrap:wrap;gap:6px}
.rn-scriptoria button{height:36px;padding:0 12px;border-radius:18px;border:1px solid var(--line);
  background:#12081a;color:var(--bone);font:inherit;font-weight:700;cursor:pointer}
.rn-scriptoria button[aria-pressed="true"],.rn-scriptoria button:hover{border-color:var(--green);color:var(--green);
  box-shadow:0 0 10px #9aff3d44}
.rn-slips{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;padding:12px 16px 8px}
.rn-slip{background:linear-gradient(180deg,#1a0c24,#12081a);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.rn-slip h3{margin:0 0 6px;font-size:16px;color:#f6f0e0}
.rn-slip p{margin:0 0 8px;font-size:13px;color:var(--mute)}
.rn-slip .rn-stamp{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--violet);color:#d8b8ff;border-radius:4px;padding:2px 6px;margin-bottom:8px}
.rn-more{display:block;margin:8px auto 16px;height:40px;padding:0 20px;border-radius:10px;
  border:1px solid var(--green);background:#12081a;color:var(--green);font:inherit;font-weight:700;cursor:pointer}
.rn-fulls{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;padding:8px 16px 16px}
.rn-full{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#12081a}
.rn-full img{width:100%;height:140px;object-fit:cover}
.rn-full strong{display:block;padding:10px 12px 12px;color:#f6f0e0}

@media (max-width:1100px){
  .rn-h1{font-size:72px}
  .rn-word{font-size:52px;height:44px}
  .rn-shelf{grid-template-columns:repeat(4,1fr)}
  .rn-tile,.rn-tile img{height:180px}
}
@media (max-width:900px){
  .rn-word{font-size:42px;height:40px}
  .rn-brand img{width:44px;height:44px}
  .rn-spine{height:56px;min-height:56px}
  .rn-chips{display:none}
  .rn-spine.is-open .rn-chips{display:flex;flex-direction:column;position:absolute;top:56px;left:0;right:0;
    background:#08050e;padding:8px;border-bottom:1px solid var(--line);z-index:60}
  .rn-burger{display:inline-flex;margin-left:auto}
  .rn-hero,.rn-hero-art{height:240px}
  .rn-h1{font-size:56px}
  .rn-rtp{display:none}
  .rn-banners{grid-template-columns:1fr;padding:8px}
  .rn-banner{height:110px}
  .rn-banner img{height:110px}
  .rn-shelf{grid-template-columns:repeat(2,1fr)}
  .rn-tile,.rn-tile img{height:180px}
  .rn-facts{grid-template-columns:1fr 1fr}
  .rn-go-hero{height:48px}
  .rn-spine .rn-go{display:none}
}
@media (max-width:480px){
  .rn-h1{font-size:40px}
  .rn-word{font-size:34px}
}