@import url("../fonts/fonts.css");

/* =========================================================================
   S. H. Jucha — core stylesheet
   Roboto: navigation and headings. Inter: body.
   Light page, dark hero and dark bands. Hairlines instead of card shadows.
   ========================================================================= */

:root{
  --ink:#0b0d10;
  --ink-2:#1a1f26;
  --body:#3d444d;
  --muted:#6d757f;
  --line:#e3e6ea;
  --line-dark:rgba(255,255,255,.13);
  --paper:#ffffff;
  --paper-2:#f6f7f9;

  --beam:#5f7fff;
  --beam-soft:#96afff;
  --violet:#8a77e5;

  --sans:'Roboto',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --text:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,5vw,48px);
  --nav-h:68px;

  /* Read off the live cloudninelabs.com hero, not the local source.
     --hero-shadow is used on the eyebrow and the h1. The support paragraph
     uses a softer, wider one. Both are exact. */
  --hero-shadow:2px 3.5px 4px rgba(0,0,0,.85);
  --hero-shadow-soft:2px 3px 5px rgba(0,0,0,.75);
  --hero-ink:#ffffff;
  --hero-ink-2:#f4f6f8;
  --hero-ink-3:#f4f4f4;

  --btn-face:#d1d1d1;
  --btn-text:#12203f;
  --btn-hot:#7fb2ff;
  --btn-deep:#1035b0;
  --btn-mid:#7fb2ff;
  --btn-soft:170,200,255;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--text);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

h1,h2,h3,h4,h5{
  font-family:var(--sans);color:var(--ink);
  margin:0;line-height:1.06;letter-spacing:-.022em;font-weight:700;
}
h2{font-size:clamp(28px,3.6vw,44px)}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.012em;line-height:1.2}
p{margin:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:400;background:#fff;color:#000;padding:10px 16px}
.skip:focus{left:8px;top:8px}

/* eyebrow label used above every section heading */
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.dark .eyebrow{color:rgba(255,255,255,.44)}
.dark .eyebrow::after{background:var(--line-dark)}

/* =========================================================================
   HEADER + MEGA MENU
   ========================================================================= */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:120;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .28s ease,border-color .28s ease,backdrop-filter .28s ease;
  border-bottom:1px solid transparent;
}
.hdr .wrap{display:flex;align-items:center;gap:28px;width:100%}
/* Frosted glass rather than a solid fill. 70% white is opaque enough that the
   dark nav text still clears AA when the header passes over the black saga
   band and the footer, and light enough to read as glass over white. */
.hdr.solid,.hdr.open{
  background:rgba(255,255,255,.70);
  border-bottom-color:rgba(190,196,204,.5);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 30px -22px rgba(11,13,16,.5);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr.solid,.hdr.open{background:rgba(255,255,255,.96)}
}

.logo{
  font-family:var(--sans);font-weight:900;font-size:16px;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;
  white-space:nowrap;transition:color .28s ease;
}
.logo .dot{color:var(--beam-soft)}
.hdr.solid .logo,.hdr.open .logo{color:var(--ink)}
.hdr.solid .logo .dot,.hdr.open .logo .dot{color:var(--beam)}

.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav > li{list-style:none;position:relative}
.nav a,.nav button.top{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.76);padding:10px 15px;border-radius:2px;
  transition:color .2s ease,background .2s ease;
}
.hdr.solid .nav a,.hdr.solid .nav button.top,
.hdr.open .nav a,.hdr.open .nav button.top{color:var(--body)}
.nav a:hover,.nav button.top:hover,.nav [aria-expanded="true"]{color:#fff}
.hdr.solid .nav a:hover,.hdr.open .nav a:hover,
.hdr.solid .nav button.top:hover,.hdr.open .nav button.top:hover,
.hdr.solid .nav [aria-expanded="true"],.hdr.open .nav [aria-expanded="true"]{color:var(--ink)}
.caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .22s ease}
[aria-expanded="true"] .caret{transform:rotate(225deg) translateY(-2px)}

/* mega panel */
.mega{
  position:fixed;left:0;right:0;top:var(--nav-h);z-index:118;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 24px 48px -32px rgba(11,13,16,.35);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.mega.show{opacity:1;visibility:visible;transform:none}
.mega .wrap{display:grid;grid-template-columns:290px 1fr;gap:clamp(28px,4vw,56px);
  padding-block:38px 42px;align-items:start}
.mega-lead h3{font-size:22px;margin-bottom:10px}
.mega-lead p{font-size:14.5px;line-height:1.62;color:var(--muted);margin-bottom:20px}
.mega-lead .stack{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
/* Silver Ships (20) and Gate Ghosts (14) run two sub-columns, so they get more room */
.mega-grid{display:grid;grid-template-columns:1.55fr .85fr 1.4fr .95fr;gap:clamp(18px,2.2vw,30px)}
.mega-col > a.ser{
  display:block;font-family:var(--sans);font-weight:700;font-size:14px;color:var(--ink);
  letter-spacing:-.005em;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--line);
}
.mega-col > a.ser span{display:block;font-weight:400;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:4px}
.mega-col ul{list-style:none;margin:0;padding:0;columns:1}
.mega-col.wide ul{columns:2;column-gap:22px}
.mega-col li{break-inside:avoid}
.mega-col li a{
  display:flex;gap:8px;font-size:13.5px;line-height:1.32;color:var(--body);
  padding:5px 0;transition:color .16s ease,transform .16s ease;
}
.mega-col li a:hover{color:var(--beam);transform:translateX(2px)}
.mega-col li a i{font-style:normal;color:var(--muted);font-size:11.5px;line-height:1.5;
  font-variant-numeric:tabular-nums;flex:0 0 16px}
.mega-col li a b{font-weight:400;hyphens:none;text-wrap:balance}

.burger{display:none;margin-left:auto;width:40px;height:40px;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:1.5px;background:currentColor;position:relative;color:#fff}
.hdr.solid .burger span,.hdr.open .burger span{color:var(--ink)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* =========================================================================
   BUTTONS  (hero glow button, adapted to the beam palette)
   ========================================================================= */
.btnwrap{position:relative;display:inline-flex;align-items:center;vertical-align:middle}
.glow{position:absolute;left:50%;top:50%;height:calc(100% + 9px);width:calc(100% + 9px);
  transform:translate(-50%,-50%);border-radius:999px;border:3px solid transparent;
  will-change:transform;transition:opacity .3s ease;pointer-events:none}
.glow.mirror{transform:translate(-50%,-50%) scaleX(-1);opacity:0}
.btnwrap:hover .glow{opacity:0}
.btnwrap:hover .glow.mirror{opacity:1}
.glow::before,.glow::after{content:"";position:absolute;box-sizing:content-box;height:100%;width:100%;
  border-radius:999px;border-color:transparent}
.glow::after{left:-3px;top:-3px;z-index:20;border-width:3px;filter:blur(15px);
  background:linear-gradient(transparent,transparent) padding-box,
    linear-gradient(91.88deg,rgba(var(--btn-soft),.2) 46.45%,var(--btn-deep) 98.59%) border-box}
.glow::before{left:-2px;top:-2px;z-index:10;border-width:2px;filter:blur(2px);
  background:linear-gradient(transparent,transparent) padding-box,
    linear-gradient(97.68deg,rgba(var(--btn-soft),0) 38.1%,rgba(var(--btn-soft),.2) 82.47%,var(--btn-hot) 93.3%) border-box}
.ring{position:relative;height:100%;width:100%;border-radius:999px;border:1px solid transparent;
  background:linear-gradient(transparent,transparent) padding-box,
    linear-gradient(103.7deg,rgba(143,155,188,.1) 38.66%,rgba(99,132,233,.1) 68.55%,var(--btn-mid) 85.01%,#fff 92.12%) border-box}
.ring::before{content:"";position:absolute;left:-2px;top:-2px;z-index:30;box-sizing:content-box;
  height:100%;width:100%;border-radius:999px;border:2px solid transparent;filter:blur(7px);
  background:linear-gradient(transparent,transparent) padding-box,
    linear-gradient(91.96deg,rgba(var(--btn-soft),0) 6.11%,rgba(var(--btn-soft),.2) 53.57%,var(--btn-hot) 93.6%) border-box}
/* Metrics read off the live huly.io button, not eyeballed:
   h-10 (40px), sm:pl-[59px] sm:pr-[52px] (the padding is asymmetric),
   text-12 / font-bold (700) / -tracking-[0.015em] / line-height 18px,
   space-x-1 (4px margin-left between children, not a flex gap),
   arrow h-[9px] w-[17px], face #d1d1d1.
   The 204px glow is ABSOLUTE. Never let a descendant rule flip it to
   relative: it becomes an in-flow flex item and shoves the label right. */
.btn{
  position:relative;z-index:10;display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 52px 0 59px;border-radius:999px;border:1px solid rgba(255,255,255,.6);
  background:var(--btn-face);color:var(--btn-text);overflow:hidden;
  font-family:var(--sans);font-size:12px;line-height:18px;font-weight:700;
  text-transform:uppercase;letter-spacing:-.015em;white-space:nowrap;
}
/* :not(.spark) so this can never match the glow element */
.btn > span:not(.spark),.btn > svg{position:relative;z-index:2;color:var(--btn-text);flex:0 0 auto}
.btn > span:not(.spark){margin-left:4px}
.btn > svg{width:17px;height:9px;margin-left:4px;display:block}
.spark{position:absolute;z-index:-1;display:flex;width:204px;align-items:center;justify-content:center;
  transform:translateX(0) translateZ(0);transition:transform .18s ease-out;animation:idlesweep 5.5s ease-in-out infinite}
.btnwrap:hover .spark{animation:none;transition:transform .09s linear}
.spark i{position:absolute;top:50%;display:block}
.spark .s1{height:121px;width:121px;transform:translateY(-50%);
  background:radial-gradient(50% 50% at 50% 50%,#F5FAFF 3.5%,#81B4FF 26.5%,#9FD4FF 37.5%,rgba(129,180,255,.5) 49%,rgba(58,110,210,0) 92.5%)}
.spark .s2{height:103px;width:204px;transform:translateY(-50%);filter:blur(5px);
  background:radial-gradient(43.3% 44.23% at 50% 49.51%,#F7FBFF 29%,#CDF0FF 48.5%,#BFD6F4 60.71%,rgba(210,211,214,0) 100%)}
@keyframes idlesweep{0%,100%{transform:translateX(-46px) translateZ(0)}50%{transform:translateX(46px) translateZ(0)}}

/* ghost button, used beside the glow button and on light sections */
.btn-ghost{
  display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 26px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.9);
  font-family:var(--sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  transition:border-color .22s ease,color .22s ease,background .22s ease;
}
.btn-ghost:hover{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.05)}
.on-light .btn-ghost,.btn-ghost.light{border-color:var(--line);color:var(--ink)}
.on-light .btn-ghost:hover,.btn-ghost.light:hover{border-color:#b9bfc7;background:var(--paper-2)}

/* quiet inline link with a moving underline */
.lnk{
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);display:inline-flex;align-items:center;gap:8px;padding-bottom:3px;
  border-bottom:1px solid var(--line);transition:border-color .22s ease,gap .22s ease;
}
.lnk:hover{border-color:var(--beam);gap:13px}
.lnk svg{width:15px;height:9px;flex:0 0 auto}
.dark .lnk{color:#fff;border-bottom-color:rgba(255,255,255,.28)}
.dark .lnk:hover{border-bottom-color:var(--beam-soft)}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative;min-height:clamp(620px,92vh,940px);display:flex;align-items:center;
  background:var(--ink);overflow:hidden;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hero .grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .floor{position:absolute;left:0;bottom:0;width:100%;height:30%;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,13,16,0),var(--ink) 74%)}
.hero .content{position:relative;z-index:6;width:100%;padding-top:var(--nav-h)}
/* Solid white fill, exactly like the Cloud Nine Labs h1. Do NOT reintroduce a
   background-clip:text gradient here: with a transparent fill the drop shadow
   paints as a full offset silhouette that shows through the glyphs, which
   reads as a cheap emboss rather than depth. */
.hero h1{
  font-size:clamp(38px,6.4vw,80px);line-height:.95;letter-spacing:-.035em;font-weight:900;
  max-width:15ch;color:var(--hero-ink);
  text-shadow:var(--hero-shadow);
}
/* plain text eyebrow, no pill */
.hero .kicker{
  display:block;font-family:var(--sans);font-size:12px;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--hero-ink-3);margin-bottom:22px;
  text-shadow:var(--hero-shadow);
}
.hero .sub{margin-top:24px;max-width:50ch;font-size:17.5px;line-height:1.6;
  color:var(--hero-ink-2);text-shadow:var(--hero-shadow-soft)}
.hero .cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .meta{margin-top:44px;display:flex;flex-wrap:wrap;gap:0 34px;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hero-ink-3);text-shadow:var(--hero-shadow)}
.hero .meta b{color:var(--hero-ink);font-weight:500}
.hero .btn-ghost{text-shadow:0 1px 3px rgba(0,0,0,.45);
  box-shadow:2px 3.5px 6px rgba(0,0,0,.38);background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.glfail{position:absolute;inset:0;z-index:1;display:none;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%,#1b2545 0%,#0b0d10 62%)}

/* =========================================================================
   COVER MARQUEE
   ========================================================================= */
.strand{background:var(--paper);padding:46px 0 50px;border-bottom:1px solid var(--line)}
.strand-label{
  text-align:center;font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:32px;
}
.strand-label b{color:var(--ink);font-weight:700}
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;align-items:flex-end;gap:26px;width:max-content;
  animation:marquee 78s linear infinite;will-change:transform}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-track a{flex:0 0 auto;display:block;position:relative;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.marquee-track img{height:132px;width:auto;border:1px solid var(--line);
  box-shadow:0 2px 10px -4px rgba(11,13,16,.28);transition:box-shadow .3s ease}
.marquee-track a:hover{transform:translateY(-6px)}
.marquee-track a:hover img{box-shadow:0 14px 26px -14px rgba(11,13,16,.5)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================================
   TESTIMONIALS (horizontal slider)
   ========================================================================= */
.voices{background:var(--paper-2);padding:clamp(64px,8vw,104px) 0;border-bottom:1px solid var(--line)}
.voices-head{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;
  margin-bottom:38px}
.voices-head h2{max-width:22ch;font-size:clamp(26px,3vw,38px)}
/* Three-column vertical wall, ported from the Cloud Nine Labs testimonial
   marquee: columns scroll up at different speeds behind a top and bottom mask. */
.tst-marquee{
  width:min(var(--wrap),92vw);margin:14px auto 0;height:clamp(400px,52vh,520px);
  overflow:hidden;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
}
.tst-col{overflow:hidden}
.tst-track{display:flex;flex-direction:column;gap:22px;will-change:transform;
  animation:tstUp var(--dur,46s) linear infinite}
.tst-col:nth-child(1) .tst-track{--dur:52s}
.tst-col:nth-child(2) .tst-track{--dur:42s}
.tst-col:nth-child(3) .tst-track{--dur:60s}
.tst-marquee:hover .tst-track,.tst-marquee:focus-within .tst-track{animation-play-state:paused}
.tst-wcard{background:var(--paper);border:1px solid var(--line);padding:26px 26px 24px;
  box-shadow:0 1px 2px rgba(11,13,16,.05)}
.tst-wcard .stars{display:flex;gap:3px;margin-bottom:14px}
.tst-wcard .stars svg{width:14px;height:14px;fill:var(--beam)}
.tst-wcard blockquote{margin:0 0 16px;font-size:15px;line-height:1.72;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.tst-wcard figcaption{font-family:var(--sans);font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tst-wcard figcaption b{display:block;color:var(--ink);font-weight:700;letter-spacing:.1em;margin-bottom:3px}
@keyframes tstUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.vnote{margin-top:26px;font-size:13px;color:var(--muted)}

/* =========================================================================
   SAGA + SERIES  (dark band)
   ========================================================================= */
.saga{background:var(--ink);color:rgba(255,255,255,.7);padding:clamp(72px,9vw,120px) 0;position:relative;overflow:hidden}
.saga::before{content:"";position:absolute;left:50%;top:0;width:1px;height:190px;translate:-50% 0;
  background:linear-gradient(to bottom,rgba(95,127,255,.9),rgba(95,127,255,0));pointer-events:none}
.saga h2,.saga h3{color:#fff}
.saga-head{max-width:74ch;margin-inline:0;margin-bottom:clamp(44px,5vw,66px)}
.saga-head h2{margin-bottom:18px}
.saga-head p{font-size:17px;line-height:1.68;color:rgba(255,255,255,.62)}
.saga-head .stack{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.series{border-top:1px solid var(--line-dark);padding:clamp(34px,4vw,48px) 0}
.series:last-of-type{border-bottom:1px solid var(--line-dark)}
.series-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(26px,4vw,56px);align-items:start}
.series-meta .n{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--beam-soft);margin-bottom:12px;display:block}
.series-meta h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px;letter-spacing:-.02em}
.series-meta p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.55);margin-bottom:20px}
.rail{display:flex;gap:16px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
.rail::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.bk{flex:0 0 auto;width:118px;scroll-snap-align:start;display:block}
.bk img{width:118px;height:auto;border:1px solid rgba(255,255,255,.14);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease}
.bk:hover img{transform:translateY(-5px);border-color:rgba(150,175,255,.55)}
.bk .t{display:block;margin-top:11px;font-family:var(--sans);font-size:12.5px;font-weight:500;
  line-height:1.3;color:rgba(255,255,255,.82);transition:color .2s ease;text-wrap:balance}
.bk .i{display:block;font-size:11px;color:rgba(255,255,255,.38);
  font-variant-numeric:tabular-nums;margin-top:3px}
.bk:hover .t{color:#fff}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{position:relative;background:#0c1014;border-top:1px solid var(--line-dark);color:#9aa3ad}
.foot-inner{max-width:var(--wrap);margin:0 auto;padding:66px var(--gut) 34px}
.f-top{display:flex;flex-wrap:wrap;gap:48px;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:40px}
.f-brand{max-width:360px}
.f-name{font-family:var(--sans);font-weight:900;font-size:14px;color:#fff;letter-spacing:.2em;text-transform:uppercase}
.f-name .dot{color:var(--beam-soft)}
.f-brand p{font-size:14px;line-height:1.75;margin-top:16px;color:#9aa3ad}
.f-cols{display:flex;gap:clamp(34px,5vw,64px);flex-wrap:wrap}
.f-col h4{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#7a828d;margin-bottom:15px}
.f-col a{font-family:var(--sans);display:block;color:#c3cad2;font-size:13.5px;padding:6px 0;
  letter-spacing:.05em;transition:color .2s}
.f-col a:hover{color:var(--beam-soft)}
.f-bot{font-family:var(--sans);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:22px;color:#7a828d;font-size:12.5px;letter-spacing:.04em}
.f-bot a{transition:color .2s}
.f-bot a:hover{color:var(--beam-soft)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .mega .wrap{grid-template-columns:1fr}
  .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .series-grid{grid-template-columns:1fr}
  .tst-marquee{grid-template-columns:repeat(2,1fr)}
  .tst-col:nth-child(3){display:none}
}
@media (max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  .hdr .wrap{gap:12px}
  .mega{top:var(--nav-h);max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  .mega.show{transform:none}
  .nav.mob{
    display:flex;position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--line);padding:14px var(--gut) 24px;gap:0;
    max-height:calc(100vh - var(--nav-h));overflow-y:auto;z-index:119;
  }
  .nav.mob > li{border-bottom:1px solid var(--line)}
  .nav.mob a,.nav.mob button.top{color:var(--ink);width:100%;padding:15px 0;font-size:14px;justify-content:space-between}
  .mega-grid{grid-template-columns:1fr}
  .mega-col.wide ul{columns:2}
  .tst-marquee{grid-template-columns:1fr;height:400px}
  .tst-col:nth-child(2){display:none}
}
@media (max-width:640px){
  .marquee-track img{height:104px}
  .hero .meta{gap:0 20px;font-size:10.5px}
  .voices-head{align-items:flex-start}
  .mega-col.wide ul{columns:1}
  /* keep the beam from washing out the copy on a narrow screen */
  .hero::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
    background:linear-gradient(100deg,rgba(11,13,16,.82) 0%,rgba(11,13,16,.55) 46%,rgba(11,13,16,0) 78%)}
  .hero .cta{flex-direction:column;align-items:stretch}
  .hero .cta .btnwrap{width:100%}
  .hero .cta .btn{width:100%;padding:0 18px 0 22px}
  .hero .cta .btn-ghost{justify-content:center}
}
@media (max-width:640px){
  .tst-marquee{height:360px}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track,.tst-track,.spark{animation:none !important}
  .marquee-track{transform:none}
  .tst-marquee{height:auto;max-height:560px;overflow-y:auto;
    -webkit-mask-image:none;mask-image:none}
  .bk:hover img,.marquee-track a:hover{transform:none}
}

/* =========================================================================
   INNER PAGES
   Book, series and books-index templates. Same rules as the home page:
   hairlines instead of shadowed cards, near-square corners, left-aligned
   editorial grid, restrained accent.
   ========================================================================= */

.nav a.on,.nav .top.on{color:#fff}
.hdr.solid .nav a.on,.hdr.open .nav a.on,
.hdr.solid .nav .top.on,.hdr.open .nav .top.on{color:var(--ink)}

/* ---- book hero ---------------------------------------------------------- */
.hero--book,.hero--series,.hero--index{min-height:auto}
.hero--book .content,.hero--series .content,.hero--index .content{
  padding-top:calc(var(--nav-h) + clamp(56px,8vh,104px));
  padding-bottom:clamp(56px,9vh,110px)}
.hero--book h1,.hero--series h1,.hero--index h1{font-size:clamp(34px,5.2vw,62px);max-width:18ch}
.hero--series .sub,.hero--index .sub{max-width:56ch}

.bhero{display:grid;grid-template-columns:clamp(200px,22vw,290px) 1fr;
  gap:clamp(28px,4.5vw,64px);align-items:start}
.bhero__art{display:block;position:relative;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.bhero__art img{width:100%;height:auto;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.bhero__art:hover{transform:translateY(-4px)}
.bhero__body .kicker{margin-bottom:16px}
.bhero__body .kicker a{color:var(--beam-soft);border-bottom:1px solid transparent;transition:border-color .2s}
.bhero__body .kicker a:hover{border-bottom-color:var(--beam-soft)}
.bhero__body .sub{margin-top:18px;max-width:54ch}
.bhero__fmts{margin-top:30px;gap:0 10px}
.bhero__fmts span{border:1px solid rgba(255,255,255,.2);padding:5px 11px;
  font-size:10.5px;letter-spacing:.16em;text-shadow:none}

/* ---- rating ------------------------------------------------------------- */
.rating{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:16px;
  font-family:var(--sans);font-size:13px;letter-spacing:.02em;
  color:var(--hero-ink-2);text-shadow:var(--hero-shadow-soft)}
.rating .stars{display:flex;gap:2px}
.rating .stars svg{width:15px;height:15px}
.rating .stars .on svg{fill:#ffb43f}
.rating .stars .off svg{fill:rgba(255,255,255,.26)}
.rating__score{font-weight:700;color:#fff}
.rating__count{color:rgba(255,255,255,.66)}
.rating__src{color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.25)}
.rating__src:hover{color:#fff}
.rating--empty a{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--beam-soft);border-bottom:1px solid rgba(150,175,255,.35);padding-bottom:3px;
  transition:gap .2s ease,border-color .2s ease}
.rating--empty a:hover{gap:13px;border-bottom-color:var(--beam-soft)}
.rating--empty svg{width:15px;height:9px}

/* ---- overview / two column body ---------------------------------------- */
.overview,.serieshead{background:var(--paper);padding:clamp(60px,8vw,100px) 0;
  border-bottom:1px solid var(--line)}
.ov-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(32px,5vw,72px);
  align-items:start}
.ov-main h2{margin-bottom:22px;max-width:20ch}
.prose p{margin:0 0 18px;font-size:16.5px;line-height:1.72;color:var(--body);max-width:66ch}
.prose p:last-child{margin-bottom:0}
.ov-side{position:sticky;top:calc(var(--nav-h) + 24px)}
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0;
  border-top:1px solid var(--line)}
.facts dt{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);padding:13px 18px 13px 0;
  border-bottom:1px solid var(--line);white-space:nowrap}
.facts dd{margin:0;font-size:14px;color:var(--ink);padding:13px 0;
  border-bottom:1px solid var(--line);text-align:right}
.facts dd a{border-bottom:1px solid var(--line);transition:border-color .2s}
.facts dd a:hover{border-bottom-color:var(--beam)}

/* ---- prev / next -------------------------------------------------------- */
.seqnav{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;padding-top:28px;
  border-top:1px solid var(--line)}
.seq{flex:1 1 240px;display:block;border:1px solid var(--line);padding:16px 18px;
  transition:border-color .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.seq:hover{border-color:#b9bfc7;transform:translateY(-2px)}
.seq span{display:block;font-family:var(--sans);font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.seq b{font-family:var(--sans);font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.seq--next{text-align:right}

/* ---- resources ---------------------------------------------------------- */
.res{background:var(--ink);color:rgba(255,255,255,.7);padding:clamp(60px,8vw,100px) 0}
.res h2{color:#fff;max-width:22ch;margin-bottom:16px}
.res-lead{max-width:64ch;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.6);
  margin-bottom:clamp(30px,4vw,44px)}
.res-lead .lnk{margin-left:6px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}
.rcard{display:flex;flex-direction:column;gap:5px;padding:22px 22px 20px;
  border:1px solid var(--line-dark);background:rgba(255,255,255,.02);
  transition:border-color .25s ease,background .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.rcard:hover{border-color:rgba(150,175,255,.5);background:rgba(150,175,255,.06);transform:translateY(-2px)}
.rcard__ico{display:block;color:var(--beam-soft);margin-bottom:8px}
.rcard__t{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:15px;
  font-weight:700;color:#fff;letter-spacing:-.01em}
.rcard__t svg{flex:0 0 auto;opacity:.5;transition:transform .25s ease,opacity .25s ease}
.rcard:hover .rcard__t svg{transform:translateX(3px);opacity:1}
.rcard__d{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.55)}
.rcard__m{margin-top:6px;font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.38)}
.res-more{margin-top:clamp(26px,3.5vw,38px)}

/* ---- FAQ ---------------------------------------------------------------- */
.faq{background:var(--paper-2);padding:clamp(60px,8vw,100px) 0;border-top:1px solid var(--line)}
.faq h2{max-width:24ch;margin-bottom:clamp(30px,4vw,44px)}
.faq-list{display:grid;gap:0;border-top:1px solid var(--line);max-width:900px}
.faq-item{padding:26px 0;border-bottom:1px solid var(--line)}
.faq-q{font-size:17.5px;font-weight:700;letter-spacing:-.012em;color:var(--ink);margin-bottom:10px}
.faq-a p{margin:0;font-size:15.5px;line-height:1.7;color:var(--body);max-width:70ch}
.faq-a a{color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .2s}
.faq-a a:hover{border-bottom-color:var(--beam)}

/* ---- book grids --------------------------------------------------------- */
.booklist{padding:clamp(58px,7.5vw,96px) 0}
.booklist.dark{background:var(--ink);color:rgba(255,255,255,.7)}
.booklist.dark h2,.booklist.dark .eyebrow{color:#fff}
.booklist.dark .eyebrow{color:rgba(255,255,255,.44)}
.booklist.on-light{background:var(--paper);border-block:1px solid var(--line)}
.booklist h2{margin-bottom:14px;max-width:24ch}
.booklist .res-lead{color:var(--muted)}
.booklist.dark .res-lead{color:rgba(255,255,255,.6)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:clamp(18px,2.4vw,30px);margin-top:clamp(26px,3.5vw,38px)}
.bcard{display:block}
.bcard img{width:100%;height:auto;border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s ease}
.booklist.dark .bcard img{border-color:rgba(255,255,255,.14)}
.bcard:hover img{transform:translateY(-5px)}
.booklist.dark .bcard:hover img{border-color:rgba(150,175,255,.55)}
.bcard__n{display:block;margin-top:12px;font-family:var(--sans);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-variant-numeric:tabular-nums}
.booklist.dark .bcard__n{color:rgba(255,255,255,.38)}
.bcard__t{display:block;margin-top:4px;font-family:var(--sans);font-size:14.5px;font-weight:700;
  line-height:1.28;color:var(--ink);letter-spacing:-.012em;text-wrap:balance}
.booklist.dark .bcard__t{color:#fff}
.bcard__d{display:block;margin-top:7px;font-size:13px;line-height:1.55;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.booklist.dark .bcard__d{color:rgba(255,255,255,.5)}

@media (max-width:900px){
  .ov-grid{grid-template-columns:1fr}
  .ov-side{position:static}
  .facts dd{text-align:left}
}
@media (max-width:680px){
  .bhero{grid-template-columns:1fr;gap:26px}
  .bhero__art{max-width:210px}
  .seq--next{text-align:left}
  .bgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .hero--book .cta,.hero--series .cta,.hero--index .cta{flex-direction:column;align-items:stretch}
  .hero--book .cta .btnwrap,.hero--series .cta .btnwrap,.hero--index .cta .btnwrap{width:100%}
  .hero--book .cta .btn,.hero--series .cta .btn,.hero--index .cta .btn{width:100%;padding:0 18px 0 22px}
  .hero--book .cta .btn-ghost,.hero--series .cta .btn-ghost,.hero--index .cta .btn-ghost{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .bcard:hover img,.bhero__art:hover,.seq:hover,.rcard:hover{transform:none}
}

/* Inner heroes are shorter than the home hero, so the beam's impact line lands
   right behind the copy and the ghost button. A left-weighted scrim restores
   contrast without hiding the beam. */
.hero--book::after,.hero--series::after,.hero--index::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(100deg,rgba(11,13,16,.78) 0%,rgba(11,13,16,.46) 52%,rgba(11,13,16,0) 84%)}
.hero--book .btn-ghost,.hero--series .btn-ghost,.hero--index .btn-ghost{
  background:rgba(11,13,16,.55);border-color:rgba(255,255,255,.42);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero--book .btn-ghost:hover,.hero--series .btn-ghost:hover,.hero--index .btn-ghost:hover{
  background:rgba(11,13,16,.75);border-color:rgba(255,255,255,.7)}

/* =========================================================================
   RESOURCES, AUTHOR, READING ORDER, LEGAL
   ========================================================================= */

.prose-h{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:-.012em;
  color:var(--ink);margin:34px 0 14px}
.prose.legal{max-width:74ch}
.prose.legal p{font-size:16px}
.legal-list{margin:14px 0 0;padding-left:20px}
.legal-list li{margin-bottom:8px}
.legal-list a{border-bottom:1px solid var(--line)}
.legal-list a:hover{border-bottom-color:var(--beam)}
.prose a{color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .2s}
.prose a:hover{border-bottom-color:var(--beam)}

/* ---- trailers ----------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;
  margin-top:clamp(24px,3vw,34px)}
.tcard{display:flex;flex-direction:column;gap:6px;padding:26px;border:1px solid var(--line);
  background:var(--paper);transition:border-color .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.tcard:hover{border-color:#b9bfc7;transform:translateY(-2px)}
.tcard__play{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--beam);color:#fff;font-size:12px;margin-bottom:8px;padding-left:2px}
.tcard__t{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.012em}
.tcard__d{font-size:13.5px;color:var(--muted)}

/* ---- cover art ---------------------------------------------------------- */
.artgroup{margin-top:clamp(34px,4.5vw,52px)}
.artgroup h3{color:#fff;font-size:20px;padding-bottom:12px;margin-bottom:20px;
  border-bottom:1px solid var(--line-dark)}
.res.on-light .artgroup h3{color:var(--ink);border-bottom-color:var(--line)}
.artgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(16px,2.2vw,26px)}
.art__img{display:block;border:1px solid var(--line-dark);overflow:hidden;
  transition:border-color .25s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.art__img img{width:100%;height:auto;display:block}
.art__img:hover{border-color:rgba(150,175,255,.55);transform:translateY(-3px)}
.art__t{margin-top:11px;font-family:var(--sans);font-size:14px;font-weight:700;
  letter-spacing:-.012em;color:#fff}
.res.on-light .art__t{color:var(--ink)}
.art__t a{border-bottom:1px solid transparent;transition:border-color .2s}
.art__t a:hover{border-bottom-color:var(--beam-soft)}
.art__links{margin-top:6px;display:flex;flex-wrap:wrap;gap:0 14px;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.art__links a{color:var(--beam-soft);border-bottom:1px solid rgba(150,175,255,.3);
  padding-bottom:2px;transition:border-color .2s}
.art__links a:hover{border-bottom-color:var(--beam-soft)}
.art__off{color:rgba(255,255,255,.3);cursor:help;border-bottom:1px dotted rgba(255,255,255,.2);
  padding-bottom:2px}
.res.on-light .art__off{color:var(--muted);border-bottom-color:var(--line)}

/* ---- download rows ------------------------------------------------------ */
.dlgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;
  margin-top:clamp(24px,3vw,34px)}
.dlrow{display:grid;grid-template-columns:22px 1fr auto;grid-template-areas:"i t m" "i s m";
  align-items:center;column-gap:13px;padding:14px 16px;border:1px solid var(--line-dark);
  transition:border-color .22s ease,background .22s ease}
.dlrow:hover{border-color:rgba(150,175,255,.5);background:rgba(150,175,255,.06)}
.res.on-light .dlrow{border-color:var(--line)}
.res.on-light .dlrow:hover{border-color:#b9bfc7;background:var(--paper-2)}
.dlrow__ico{grid-area:i;color:var(--beam-soft);display:flex}
.res.on-light .dlrow__ico{color:var(--beam)}
.dlrow__t{grid-area:t;font-family:var(--sans);font-size:14.5px;font-weight:700;color:#fff;
  letter-spacing:-.012em}
.res.on-light .dlrow__t{color:var(--ink)}
.dlrow__s{grid-area:s;font-size:12px;color:rgba(255,255,255,.45)}
.res.on-light .dlrow__s{color:var(--muted)}
.dlrow__m{grid-area:m;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.4);white-space:nowrap}
.res.on-light .dlrow__m{color:var(--muted)}

/* ---- reading order ------------------------------------------------------ */
.rogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(22px,3vw,40px);margin-top:clamp(26px,3.5vw,38px)}
.rogroup h3{color:#fff;font-size:18px;display:flex;align-items:baseline;gap:10px;
  padding-bottom:11px;margin-bottom:8px;border-bottom:1px solid var(--line-dark)}
.rogroup h3 span{font-family:var(--sans);font-size:10.5px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}
.rolist{list-style:none;margin:0;padding:0;counter-reset:none}
.rolist a{display:grid;grid-template-columns:26px 1fr;column-gap:10px;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);transition:color .18s ease,transform .18s ease}
.rolist a:hover{transform:translateX(2px)}
.ro__n{font-family:var(--sans);font-size:11px;color:rgba(255,255,255,.35);
  font-variant-numeric:tabular-nums;padding-top:3px}
.ro__t{font-family:var(--sans);font-size:14px;font-weight:500;color:rgba(255,255,255,.86)}
.rolist a:hover .ro__t{color:#fff}
.ro__m{grid-column:2;font-size:11px;color:rgba(255,255,255,.34)}
.ro__go{margin-top:14px}

@media (max-width:640px){
  .artgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .dlgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .tcard:hover,.art__img:hover,.dlrow:hover,.rolist a:hover{transform:none}
}