/* Studio Montague — shared site styles (nav, footer, base layout)
   Page-specific styles (hero, about, blog listing, single post) live in
   each page's own <style> block. Keep this file to things every page uses. */

:root{
  --cream:#efe6d4;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:hidden;}
body{
  background:linear-gradient(
    to bottom,
    #1b1916 0%,
    #2a2620 16%,
    #34301f 34%,
    #313a26 52%,
    #223622 68%,
    #17301d 84%,
    #0e2415 100%
  );
  color:var(--cream);
  font-family:'EB Garamond', Georgia, serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* top nav */
.topnav{
  width:100%;
  background-color:#1f1911;
  box-sizing:border-box;
  padding:0;
  line-height:0;
}
.topnav-link{
  display:block;
  width:100%;
}
.topnav-img{
  display:block;
  width:100%;
  /* matches sm-banner.jpg's own 4485/640 (~7:1) aspect ratio, so the box's proportions
     track the artwork's instead of capping at a fixed height — on ultrawide windows a
     fixed cap made the box far wider than the source image, cropping the logo/text out
     the top and bottom. min-height keeps the banner from getting too short on mobile. */
  aspect-ratio:4485 / 640;
  min-height:160px;
  object-fit:cover;
  object-position:center center;
  animation:topnavFadeIn 2.8s ease both;
}
@keyframes topnavFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
.topnav-links-bar{
  width:100%;
  background-color:#120d08;
  /* tan on top, gold on the bottom edge — same two tones used for the footer text
     (#d0b07f) and the gold accents elsewhere (#e0bd6a, e.g. .tone-gold) */
  border-top:2px solid rgba(208,176,127,0.45);
  border-bottom:2px solid rgba(224,189,106,0.45);
  box-sizing:border-box;
}
@media (prefers-reduced-motion: reduce){
  .topnav-img,
  .icon-row.icon-row-top > a,
  .icon-row.icon-row-top > .mobile-menu-toggle,
  .nav-links > a{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}
.topnav-links-inner{
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:9px 24px;
  box-sizing:border-box;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.nav-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:26px;
}
.nav-links > a{
  animation:navLinksSlideInRight 0.65s cubic-bezier(.16,.84,.44,1) both;
}
.nav-links > a:nth-child(1){ animation-delay:0.42s; }
.nav-links > a:nth-child(2){ animation-delay:0.18s; }
@keyframes navLinksSlideInRight{
  0%{ opacity:0; transform:translateX(160px); }
  55%{ opacity:0.85; }
  100%{ opacity:0.85; transform:translateX(0); }
}
.nav-links a{
  display:inline-flex;
  align-items:center;
  color:#d0b07f;
  font-family:'Limelight', serif;
  font-weight:400;
  font-size:18px;
  line-height:1;
  letter-spacing:0.03em;
  text-transform:uppercase;
  text-decoration:none;
  opacity:0.85;
  transition:opacity .2s ease, color .2s ease;
}
.nav-links a .drop-cap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  width:22px;
  height:22px;
  margin-right:0.03em;
  border:1px solid rgba(201,162,75,0.45);
  border-bottom:none;
  border-radius:3px 3px 0 0;
  background:rgba(0,0,0,0.2);
  color:#d0b07f;
  font-family:'Cinzel', serif;
  font-weight:700;
  font-size:34px;
  line-height:1;
  text-decoration:none;
  vertical-align:middle;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.nav-links a:hover .drop-cap{
  color:var(--cream);
  border-color:#c9a24b;
  background:rgba(201,162,75,0.1);
}
.nav-links a.active{
  opacity:1;
}
.nav-links a:hover{
  opacity:1;
  color:var(--cream);
}
.nav-links a:hover .link-text,
.nav-links a.active .link-text{
  text-decoration:underline;
  text-underline-offset:5px;
}
.mobile-menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px;
  height:34px;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  /* matches the icon anchors' own resting opacity — without this, the entrance
     animation's fill-mode:both held it at 0.85 during/just after animating, then it
     jumped to a default 1.0 the instant JS released the animation, reading as a
     visible colour/brightness switch right after it settled into position */
  opacity:0.85;
  transition:opacity .2s ease;
}
.mobile-menu-toggle:hover{ opacity:1; }
.mobile-menu-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:#d0b07f;
  border-radius:1px;
  transition:background .2s ease;
}
.mobile-menu-toggle:hover span{ background:var(--cream); }
.mobile-menu{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:100%;
  padding-top:14px;
  margin-top:2px;
  border-top:1px solid rgba(201,162,75,0.14);
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  color:#d0b07f;
  font-family:'Limelight', serif;
  font-size:16px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  text-decoration:none;
  opacity:0.85;
}
.mobile-menu a:hover, .mobile-menu a.active{ opacity:1; color:var(--cream); }
.mobile-menu a:hover .link-text, .mobile-menu a.active .link-text{ text-decoration:underline; text-underline-offset:4px; }
.footer-links{
  display:flex;
  justify-content:flex-end;
  gap:16px;
  margin:12px 0 0;
}
.footer-links a{
  display:inline-flex;
  align-items:center;
  color:#d0b07f;
  font-family:'Limelight', serif;
  font-weight:400;
  font-size:11px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  text-decoration:none;
  opacity:0.85;
}
.footer-links a .drop-cap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  width:14px;
  height:14px;
  margin-right:0.03em;
  border:1px solid rgba(201,162,75,0.45);
  border-bottom:none;
  border-radius:3px 3px 0 0;
  background:rgba(0,0,0,0.2);
  color:#d0b07f;
  font-family:'Cinzel', serif;
  font-weight:700;
  font-size:18px;
  line-height:1;
  text-decoration:none;
  vertical-align:middle;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.footer-links a:hover{
  opacity:1;
  color:var(--cream);
}
.footer-links a:hover .drop-cap{
  color:var(--cream);
  border-color:#c9a24b;
  background:rgba(201,162,75,0.1);
}
.footer-links a.active{
  opacity:1;
}
.footer-links a:hover .link-text,
.footer-links a.active .link-text{
  text-decoration:underline;
  text-underline-offset:3px;
}
.icon-row{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:18px; }
.icon-row a{
  color:#c9a24b;
  font-size:16px;
  width:34px; height:34px;
  border:1px solid rgba(201,162,75,0.35);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.icon-row a:hover{
  border-color:#c9a24b;
  background:rgba(201,162,75,0.08);
}
.icon-row.icon-row-top{ gap:24px; }
.icon-row.icon-row-top > a{
  animation:iconsSlideInLeft 0.65s cubic-bezier(.16,.84,.44,1) both;
}
/* five stops now (home icon leads the row) at the same 0.12s cadence as before */
.icon-row.icon-row-top > a:nth-child(1){ animation-delay:0.06s; }
.icon-row.icon-row-top > a:nth-child(2){ animation-delay:0.18s; }
.icon-row.icon-row-top > a:nth-child(3){ animation-delay:0.3s; }
.icon-row.icon-row-top > a:nth-child(4){ animation-delay:0.42s; }
.icon-row.icon-row-top > a:nth-child(5){ animation-delay:0.54s; }
/* .mobile-menu-toggle doesn't get this animation applied generally — it's display:none
   until the mobile breakpoint, and a CSS animation replays from scratch the moment a
   display:none element becomes visible, which caused it to visibly "stick" off-screen
   while the window was being narrowed past 640px and only resolve once resizing stopped.
   site.js adds .entrance-animate to it, once, only if the page loads already at mobile
   width — so it still slides in alongside the icons on a fresh mobile load, without
   risking that resize-triggered replay glitch. */
.mobile-menu-toggle.entrance-animate{
  animation:iconsSlideInLeft 0.65s cubic-bezier(.16,.84,.44,1) 0.66s both;
}
@keyframes iconsSlideInLeft{
  0%{ opacity:0; transform:translateX(-160px); }
  55%{ opacity:0.85; }
  100%{ opacity:0.85; transform:translateX(0); }
}
.icon-row.icon-row-top a{
  width:auto;
  height:auto;
  border:none;
  border-radius:0;
  color:#d0b07f;
  opacity:0.85;
  font-size:27px;
  line-height:1;
  transition:opacity .2s ease, color .2s ease;
}
.icon-row.icon-row-top a:hover{
  border:none;
  background:none;
  opacity:1;
  color:var(--cream);
}
/* homepage-link icon (studio mascot mark) — sits before Discord in the top icon row.
   It's an <img>, not a font glyph, so it can't pick up color:currentColor like its FA
   siblings; opacity/entrance-animation still come from the shared .icon-row-top a
   rules above since it's a plain <a> child. The hover treatment below is the same
   cream drop-shadow "glow" used on the footer mark (.footer-badge-icon) — kept
   identical between the two so both studio-mark icons match each other, not just
   their own row's neighbours. */
.icon-row.icon-row-top a.nav-home-icon img{
  display:block;
  width:27px;
  height:27px;
  transition:filter .2s ease;
}
.icon-row.icon-row-top a.nav-home-icon:hover img{
  filter:drop-shadow(0 0 5px rgba(239,230,212,0.85)) brightness(1.15);
}
.icon-row.icon-row-footer a{
  color:#d0b07f;
  border-color:rgba(239,230,212,0.4);
}
.icon-row.icon-row-footer a:hover{
  border-color:#f5ecd8;
  color:#f5ecd8;
  background:rgba(201,162,75,0.08);
}

.wrap{
  max-width:960px;
  width:100%;
  /* top value matches the gap the "In active pre-production" badge uses on the
     homepage — tight and consistent whether or not the mobile hamburger dropdown
     is open, since .wrap's own padding doesn't depend on the topnav bar's height.
     This is now the sitewide default; don't override it per-page. */
  padding:clamp(22px, 4vw, 38px) 24px clamp(40px, 6vw, 64px);
  text-align:center;
  flex:1;
  display:flex;
  flex-direction:column;
}
.tagline{
  color:#d0b07f;
  font-size:16px;
  margin:0 0 40px;
  letter-spacing:0.02em;
}

footer{
  width:100%;
  padding:28px 24px;
  font-size:13px;
  color:#6b8a63;
  border-top:1px solid rgba(126,184,108,0.16);
  background:#1f1911;
}
footer p{ font-size:13px; margin:0; color:#d0b07f; }
footer a{color:#d0b07f; text-decoration:none;}

/* studio mark, sits above the motto — same footprint as the footer icon-row buttons
   (34px), keeps the footer's existing top padding as the gap up to the border, and
   pushes the motto (and everything below it) down by its own height + margin.
   Wrapped in a link (homepage), matching the same mark in the top nav — including
   the exact same cream drop-shadow "glow" hover treatment, so both studio-mark
   icons (this one and the nav one) are uniform with each other. */
.footer-badge-link{
  display:block;
  width:34px;
  margin:0 auto 14px;
}
.footer-badge-icon{
  display:block;
  width:34px;
  height:34px;
  opacity:0.92;
  transition:opacity .2s ease, filter .2s ease;
}
.footer-badge-link:hover .footer-badge-icon{
  opacity:1;
  filter:drop-shadow(0 0 5px rgba(239,230,212,0.85)) brightness(1.15);
}

/* company motto — sits on every page, same as the banner does */
.footer-motto{
  font-family:'Courier New', Courier, monospace;
  font-size:14px;
  letter-spacing:normal;
  color:#d0b07f;
  text-align:center;
  opacity:0.9;
  max-width:960px;
  margin:0 auto 18px;
}
.footer-motto .type-cursor{
  background:#e0bd6a;
}
.type-cursor{
  display:inline-block;
  position:relative;
  top:4px;
  width:2px;
  height:1em;
  background:#7fae6f;
  /* was 2px — that small gap read as a stray space after punctuation like the comma
     in "world,", especially noticeable during a held pause. Sits flush now. */
  margin-left:0;
  vertical-align:baseline;
  opacity:0;
}
.type-cursor.blinking{
  animation:cursorBlink 1.125s step-end infinite;
}
@keyframes cursorBlink{
  0%, 49%{ opacity:1; }
  50%, 100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .type-cursor.blinking{
    animation:none !important;
    opacity:1 !important;
  }
}
.footer-grid{
  max-width:960px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:16px 24px;
}
.footer-col-left{ flex:1 1 auto; text-align:left; }
.footer-col-left .tagline{ margin:0 0 4px; }
.footer-copyright{ margin:0; font-size:13px; }
.footer-col-right{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}
.icon-row.icon-row-footer{ margin:0; }

/* shared entrance animation — used on about.html and the blog pages */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* mobile: shared nav/footer behaviour */
@media (max-width:640px){
  .topnav-links-inner{ justify-content:center; padding:7px 16px; gap:10px 18px; }
  .icon-row.icon-row-top{ gap:16px; }
  .icon-row.icon-row-top a{ font-size:22px; }
  .icon-row.icon-row-top a.nav-home-icon img{ width:22px; height:22px; }
  .nav-links{ display:none; }
  .mobile-menu-toggle{ display:flex; }
  .wrap{ padding-left:16px; padding-right:16px; }
  .footer-grid{ flex-direction:column; align-items:center; text-align:center; gap:16px; }
  .footer-col-left{ text-align:center; }
  .footer-col-left .tagline{ text-align:center; }
  .footer-col-right{ align-items:center; }
}