*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --aqua:#5CFAFF;
  --black:#0a0a0a;
  --white:#ffffff;
  --off-white:#e8e8e8;
  --dim:#999;
  --authors-banner-h: 41px;
}

html{scroll-behavior:smooth;}

html, body {
  margin: 0;
  height: 100%;
  overflow-x: hidden;
}

body{
  background:var(--black);
  color:var(--white);
  font-family:'Arial Black', sans-serif;
  padding-bottom:var(--authors-banner-h);
}

/* ── NAV ── */
nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.2rem 2.5rem;
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.logo-img{
  height:48px;
  width:auto;
  display:block;
  filter:invert(1);
  transition:filter 0.25s ease, opacity 0.25s ease;
}
.logo-img:hover{
  filter:invert(1) sepia(1) saturate(4) hue-rotate(150deg);
}
.footer-logo-img{
  height:56px;
}
.nav-logo{display:flex;align-items:center;gap:0.7rem;}
.nav-logo-text{
  font-family:'Arial Black', sans-serif;
  font-size:0.95rem;
  font-weight:900;
  letter-spacing:0.08em;
  color:var(--white);
  white-space:nowrap;
  transition:color 0.25s ease;
}
.nav-logo:hover .nav-logo-text{color:var(--aqua);}
.footer-logo{display:flex;align-items:center;}

.nav-links{
  display:flex;
  gap:2rem;
  list-style:none;
  align-items:center;
}

.nav-links a{
  font-family:'Arial Black', sans-serif;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--off-white);
  text-decoration:none;
  transition:color 0.2s;
  position:relative;
}
.nav-links a::after{
  content:'';
  position:absolute;
  bottom:-4px;left:0;right:0;
  height:1px;
  background:var(--aqua);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.25s ease;
}
.nav-links a:hover{color:var(--aqua);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.active{color:var(--aqua);}
.nav-links a.active::after{transform:scaleX(1);}

/* hamburger */
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  background:none;border:none;padding:4px;
}
.hamburger span{
  display:block;width:24px;height:2px;
  background:var(--white);
  transition:all 0.3s ease;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:var(--black);
  z-index:99;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.5rem;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{
  font-family:'Arial Black', sans-serif;
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--white);
  text-decoration:none;
  transition:color 0.2s;
}
.mobile-menu a:hover{color:var(--aqua);}

/* ── MOBILE NAV ── */
@media (max-width: 768px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
}

/* ── HERO ── */
.authors-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.authors-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  touch-action: none;
}

.authors-title-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.authors-title-text {
  font-size: clamp(3rem, 17vw, 17rem);
  font-family: 'Cinzel', serif;
  font-weight: 900;
  white-space: nowrap;
  color: #fff;
}

.authors-letter {
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.authors-letter::before,
.authors-letter::after {
  content: attr(data-letter);
  position: absolute;
  left: 0;
  opacity: 0.8;
}

.authors-letter::before {
  color: #5CFAFF;
  transform: translateX(0.1em) translateZ(-1px);
  filter: blur(0.02em);
}

.authors-letter::after {
  color: #0a0a0a;
  transform: translateX(-0.1em) translateZ(-1px);
  filter: blur(0.02em);
}

/* ── SCROLL-DOWN INDICATOR ── */
.authors-scroll-cue{
  position:absolute;
  bottom:80px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  padding:8px;
  cursor:pointer;
  font-family:'Arial Black', sans-serif;
  font-size:0.62rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  transition:color 0.3s ease;
}
.authors-scroll-cue:hover{color:var(--aqua);}
.authors-scroll-cue svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  animation:authors-scroll-bounce 2s ease-in-out infinite;
}
@keyframes authors-scroll-bounce{
  0%,100%{transform:translateY(0);opacity:0.4;}
  50%{transform:translateY(6px);opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .authors-scroll-cue svg{animation:none;}
}
@media (max-width:768px){
  .authors-scroll-cue{bottom:50px;}
}

/* ── AUTHORS STRIP ── */
.authors-strip{
  position:relative;
  background:var(--black);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:2.75rem 0;
}

.authors-strip-track{
  display:flex;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  padding:0 4.5rem;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.authors-strip-track::-webkit-scrollbar{display:none;}

.author-card{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.85rem;
  width:110px;
  padding:0 1.25rem;
  border-right:1px solid rgba(255,255,255,0.08);
  text-decoration:none;
  scroll-snap-align:start;
  transition:transform 0.25s ease;
}
.author-card:last-child{border-right:none;}
.author-card:hover{transform:translateY(-4px);}

.author-photo{
  width:80px;
  height:80px;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(92,250,255,0.15), rgba(92,250,255,0.02));
  border:1px solid rgba(92,250,255,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-family:'Arial Black', sans-serif;
  font-size:1.05rem;
  color:var(--aqua);
  transition:border-color 0.25s ease, box-shadow 0.25s ease;
}
.author-card:hover .author-photo{
  border-color:var(--aqua);
  box-shadow:0 0 20px rgba(92,250,255,0.25);
}
.author-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.author-name{
  font-family:'Arial Black', sans-serif;
  font-size:0.62rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--off-white);
  text-align:center;
  transition:color 0.2s;
}
.author-card:hover .author-name{color:var(--aqua);}

.authors-strip-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(10,10,10,0.85);
  border:1px solid rgba(255,255,255,0.15);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  transition:border-color 0.2s, color 0.2s, opacity 0.2s;
}
.authors-strip-arrow:hover{border-color:var(--aqua);color:var(--aqua);}
.authors-strip-arrow-left{left:1rem;}
.authors-strip-arrow-right{right:1rem;}
.authors-strip-arrow[disabled]{opacity:0.25;cursor:default;pointer-events:none;}

.authors-strip::before,
.authors-strip::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:80px;
  z-index:2;
  pointer-events:none;
}
.authors-strip::before{left:0;background:linear-gradient(90deg,var(--black),transparent);}
.authors-strip::after{right:0;background:linear-gradient(270deg,var(--black),transparent);}

@media (max-width:768px){
  .author-card{width:84px;padding:0 0.85rem;}
  .author-photo{width:64px;height:64px;font-size:0.9rem;}
  .authors-strip-track{padding:0 3.25rem;}
  .authors-strip-arrow{width:34px;height:34px;}
  .authors-strip::before,.authors-strip::after{width:50px;}
}

/* ── FOOTER ── */
footer{
  border-top:1px solid rgba(255,255,255,0.06);
  padding:3rem 2.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}

.footer-logo{ display:flex;align-items:center; }
.footer-logo-img{ height:56px; }
.footer-copy{
  font-family:'Arial Black', sans-serif;
  font-size:0.85rem;
  color:var(--dim);
  font-style:italic;
}

.footer-links{
  font-family:'Arial Black', sans-serif;
  font-size:0.85rem;
}
.footer-links a{
  color:var(--dim);
  text-decoration:none;
}
.footer-links a:hover{
  color:var(--aqua);
}

/* ── MAYA BANNER (cyan, bottom only) ──
   Fixed frieze strip pinned to the very bottom of the viewport, below
   everything, never scrolls away. No top banner. */
.authors-banner-bottom{
  position:fixed;
  left:0;bottom:0;
  width:100%;
  height:var(--authors-banner-h);
  z-index:200;
  overflow:hidden;
  background:#000;
}
.authors-banner-image{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:768px){
  :root{ --authors-banner-h: 27px; }
}