@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Courier+Prime:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --global-paper:#f3eee9;
  --global-ink:#11110f;
  --global-red:#d23c2e;
  --global-header-h:72px;
}
.global-header{
  position:fixed;
  z-index:100;
  top:0; left:0; right:0;
  height:var(--global-header-h);
  display:grid;
  grid-template-columns:220px 1fr 80px;
  align-items:center;
  padding:0 4vw;
  transition:.3s ease;
}
.inner-header{
  background:rgba(243,238,233,.91);
  color:var(--global-ink);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(17,17,15,.10);
}
.global-header.scrolled{
  background:rgba(17,17,16,.93);
  color:#fff;
  border-bottom-color:rgba(255,255,255,.08);
}
.global-brand{
  display:flex;
  flex-direction:column;
  width:max-content;
}
.global-brand img{
  display:block;
  width:138px;
  height:auto;
  filter:invert(1);
  transition:filter .3s ease;
}
.global-header.scrolled .global-brand img{filter:none}
.global-brand span{
  font:600 7px Inter,sans-serif;
  letter-spacing:.14em;
  margin-top:2px;
}
.global-nav{
  display:flex;
  justify-content:center;
  gap:30px;
  font:600 9px Inter,sans-serif;
  text-transform:uppercase;
}
.global-nav a{
  position:relative;
  padding:8px 0;
}
.global-nav a::after{
  content:"";
  position:absolute;
  left:0; right:100%; bottom:2px;
  height:1px;
  background:var(--global-red);
  transition:right .25s ease;
}
.global-nav a:hover::after,
.global-nav a.active::after{right:0}
.global-nav a.active{color:var(--global-red)}
.global-lang{
  justify-self:end;
  font:600 9px Inter,sans-serif;
}
.global-lang b{color:var(--global-red);padding:0 5px}
.global-menu-toggle,.global-mobile-nav{display:none}

/* remove old left-column geometry */
.inner-page main,
.inner-page .legal-main,
.inner-page .horizontal-shell{
  margin-left:0 !important;
}
.inner-page main:not(.horizontal-shell),
.legal-page .legal-main{
  padding-top:var(--global-header-h);
}

/* keep top of vertical hero comfortably below menu */
.production-page .hero,
.about-page .hero,
.project-page .hero{
  min-height:calc(100vh - var(--global-header-h));
}
.production-page .hero-copy,
.about-page .hero-copy,
.project-page .hero-copy{
  padding-top:calc(72px + 4vh);
}

/* About uses our final generated visuals */
.about-page .hero-art{
  background-image:
    linear-gradient(145deg,rgba(17,17,15,.06),transparent 38%),
    url("assets/about-studio.jpg") !important;
}
.about-page .team-art{
  background-image:
    linear-gradient(180deg,transparent 0%,rgba(17,17,15,.12) 100%),
    url("assets/about-team.jpg") !important;
}

/* JDG hero no longer constrained by sidebar */
.project-page .hero{grid-template-columns:1.12fr .88fr}

/* Contact: allow breathing under global menu */
.contact-page .contact-wrap{
  padding-top:72px !important;
}

/* Legal pages become simple full-width editorial pages */
.legal-page .legal-hero{
  min-height:300px;
  padding-top:80px;
}
.legal-page .legal-content{
  max-width:1120px;
  margin:0 auto;
}
.legal-page .legal-footer{
  margin-left:0;
}

/* ORIGINAL SERIES: top menu + compact chapters */
.series-page{
  overflow:hidden;
}
.series-page .horizontal-shell{
  width:100vw !important;
  height:calc(100vh - var(--global-header-h) - 42px) !important;
  margin-top:calc(var(--global-header-h) + 42px);
}
.series-page .panels{height:100%}
.series-page .panel{
  flex-basis:100vw !important;
  width:100vw !important;
  height:calc(100vh - var(--global-header-h) - 42px) !important;
}
.series-chapters{
  position:fixed;
  z-index:90;
  top:var(--global-header-h);
  left:0; right:0;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  padding:0 3vw;
  background:rgba(17,17,16,.95);
  color:#aaa;
  border-bottom:1px solid rgba(255,255,255,.08);
  font:600 8px Inter,sans-serif;
  text-transform:uppercase;
}
.series-chapters a{
  white-space:nowrap;
}
.series-chapters a.active,
.series-chapters a:hover{
  color:var(--global-red);
}
.series-chapters span{margin-left:5px}

/* Shonage development now uses image as a full-edge column */
.series-page .development-art{
  padding:0 !important;
  display:block !important;
  overflow:hidden;
}
.series-page .development-visual{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  box-shadow:none !important;
  border:0 !important;
}
.series-page .development-visual::before{display:none !important}
.series-page .development-visual img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.series-page .development-art .note{
  z-index:2;
  background:rgba(0,0,0,.4);
  padding:7px 5px;
  color:#ddd;
}

/* News */
.news-main{
  min-height:100vh;
  padding-top:var(--global-header-h);
  background:var(--global-paper);
  color:var(--global-ink);
}
.news-hero{
  padding:110px 8vw 80px;
  border-bottom:1px solid rgba(17,17,15,.13);
}
.global-eyebrow{
  color:var(--global-red);
  font:700 10px Inter,sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:18px;
}
.news-hero h1{
  margin:0;
  font:400 clamp(55px,6vw,90px)/.91 "Permanent Marker",cursive;
}
.news-hero h1 em{color:var(--global-red);font-style:normal}
.news-hero p{font:400 15px/1.6 "Courier Prime",monospace;margin-top:24px}
.news-empty{
  max-width:850px;
  padding:80px 8vw 110px;
}
.news-empty>span{color:var(--global-red);font:700 10px Inter,sans-serif}
.news-empty h2{font:400 34px "Permanent Marker",cursive;margin:12px 0}
.news-empty p{line-height:1.65}
.news-empty a{display:inline-block;margin-top:18px;border-bottom:1px solid var(--global-red);padding-bottom:5px}

/* mobile */
@media(max-width:800px){
  :root{--global-header-h:64px}
  .global-header{
    height:64px;
    grid-template-columns:1fr auto;
    padding:0 18px;
  }
  .global-brand img{width:122px}
  .global-brand span{font-size:6px}
  .global-nav,.global-lang{display:none}
  .global-menu-toggle{
    display:flex;
    border:0;
    background:none;
    color:inherit;
    align-items:center;
    gap:5px;
    cursor:pointer;
  }
  .global-menu-toggle i{
    width:14px;height:1px;background:currentColor;display:block
  }
  .global-menu-toggle span{
    font:600 8px Inter,sans-serif;
    text-transform:uppercase;
    margin-left:5px;
  }
  .global-mobile-nav{
    position:absolute;
    top:100%;left:0;right:0;
    display:none;
    background:rgba(17,17,16,.97);
    color:#fff;
    padding:22px;
    gap:15px;
    font:600 10px Inter,sans-serif;
    text-transform:uppercase;
  }
  .global-mobile-nav.open{display:grid}
  .global-mobile-nav a.active{color:var(--global-red)}

  .series-page{overflow:auto}
  .series-chapters{
    position:relative;
    top:auto;
    height:auto;
    overflow-x:auto;
    justify-content:flex-start;
    padding:12px 18px;
    gap:20px;
  }
  .series-page .horizontal-shell{
    margin-top:0 !important;
    height:auto !important;
    padding-top:0 !important;
  }
  .series-page .panel{
    width:100% !important;
    height:auto !important;
  }
  .series-chapters span{display:none}
}