/* Secret Legion Studios
   Colors come from the logo: legion blue on noir. */
:root {
  --night: #000000;      /* true black, like a darkened theater */
  --night-2: #0d0d0f;    /* raised panels */
  --legion: #1c2a9c;     /* logo blue */
  --beam: #8f9bff;       /* light blue for links and accents */
  --paper: #f3f3f1;      /* main text */
  --muted: #a8a8a8;      /* secondary text */
  --line: #232323;
  --glow: #5b6cff;       /* each project overrides this with a color from its poster */
  --display: "Michroma", "Eurostile", "Arial Black", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--beam); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--beam); outline-offset: 3px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); color: var(--night); padding: .5rem 1rem; z-index: 10; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.2; letter-spacing: .01em; margin: 0 0 .6em; }

/* ---------- Header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
  background: rgba(0, 0, 0, .86);
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: .75rem; color: var(--paper); text-decoration: none; }
.brand span { font-family: var(--display); font-size: .85rem; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.site-header nav a { color: var(--paper); text-decoration: none; font-size: 1rem; padding: .25rem 0; border-bottom: 2px solid transparent; }
.site-header nav a:hover { border-bottom-color: var(--beam); }

/* ---------- Buttons ---------- */
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.btn {
  display: inline-block; padding: .8rem 1.4rem;
  background: var(--paper); color: #000; text-decoration: none;
  border: 1px solid var(--paper); border-radius: 2px; font-size: 1rem;
}
.btn:hover { background: #fff; box-shadow: 0 0 28px color-mix(in srgb, var(--glow) 55%, transparent); }
.btn-ghost { background: transparent; border-color: var(--muted); color: var(--paper); }
.btn-ghost:hover { background: var(--night-2); }

/* ---------- Hero: the light rays from the logo ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.beams {
  position: absolute; inset: 0;
  background:
    conic-gradient(from 238deg at 78% 55%,
      transparent 0deg 6deg,
      rgba(40, 60, 210, .60) 6deg 17deg,
      transparent 17deg 22deg,
      rgba(255, 255, 255, .10) 22deg 28deg,
      transparent 28deg 33deg,
      rgba(40, 60, 210, .40) 33deg 44deg,
      transparent 44deg 52deg,
      rgba(255, 255, 255, .06) 52deg 58deg,
      transparent 58deg 360deg);
  -webkit-mask-image: radial-gradient(ellipse 85% 95% at 78% 55%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 85% 95% at 78% 55%, #000 30%, transparent 78%);
}
.hero-inner {
  position: relative;
  max-width: 1280px; margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7.5rem) clamp(1rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center;
}
.hero h1 { font-size: clamp(2.2rem, 5.6vw, 4.6rem); margin-bottom: .45em; }
.hero-copy p { font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--muted); max-width: 34ch; margin: 0; }
.hero-emblem { width: 100%; max-width: 560px; justify-self: end; }

/* ---------- Slate ---------- */
.slate, .vision-inner, .split, .page-head, .prose-block, .services, .bios, .partners-photo, .project-inner, .characters, .pager {
  max-width: 1280px; margin-left: auto; margin-right: auto;
  padding-left: clamp(1rem, 4vw, 3rem); padding-right: clamp(1rem, 4vw, 3rem);
}
.slate { padding-top: 4.5rem; padding-bottom: 3rem; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 2rem; margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0; }
.section-head p { color: var(--muted); margin: 0; }
.group { font-size: .95rem; color: var(--beam); margin: 2.5rem 0 1.25rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }

.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2.25rem 1.5rem; }
.card a { display: block; color: var(--paper); text-decoration: none; }
.card img { width: 100%; box-shadow: 0 10px 30px rgba(255,255,255,.04); aspect-ratio: 800 / 1006; object-fit: cover; border-radius: 2px; transition: transform .35s ease, box-shadow .35s ease; }
.card a:hover img, .card a:focus-visible img { transform: translateY(-6px); box-shadow: 0 22px 60px color-mix(in srgb, var(--glow) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--glow) 70%, transparent); }
@media (prefers-reduced-motion: reduce) { .card img { transition: none; } .card a:hover img { transform: none; } }
.card-title { display: block; font-family: var(--display); font-size: .92rem; margin-top: .9rem; line-height: 1.35; }
.card-genre { display: block; color: var(--muted); font-style: italic; font-size: 1rem; margin-top: .2rem; }

/* ---------- Vision ---------- */
.vision { background: radial-gradient(ellipse 70% 120% at 15% 0%, rgba(40, 60, 210, .22), transparent 60%), var(--night-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 3rem; }
.vision-inner { padding-top: 4.5rem; padding-bottom: 4.5rem; max-width: 980px; }
.vision-lead { font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.35; margin: 0 0 1.5rem; }
.vision-inner p:last-child { color: var(--muted); max-width: 62ch; margin: 0; }

/* ---------- Split panels ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding-top: 4rem; padding-bottom: 4.5rem; }
.panel { display: block; padding: 2.25rem; border: 1px solid var(--line); color: var(--paper); text-decoration: none; background: linear-gradient(160deg, #141416, #050505); }
.panel:hover { border-color: var(--beam); }
.panel h2 { font-size: 1.25rem; }
.panel p { color: var(--muted); margin: 0 0 1.25rem; }
.more { color: var(--beam); border-bottom: 1px solid currentColor; }

/* ---------- Inner pages ---------- */
.page-head { padding-top: 4.5rem; padding-bottom: 1rem; max-width: 980px; }
.page-head h1 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); }
.lede { font-size: clamp(1.2rem, 2vw, 1.45rem); color: var(--paper); max-width: 60ch; }
.prose-block { max-width: 980px; }
.prose-block p { color: var(--muted); max-width: 64ch; }
.services { max-width: 980px; padding-top: 2rem; padding-bottom: 5rem; }
.services h2 { font-size: 1.2rem; color: var(--beam); }
.services ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.services li { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line); }

.partners-photo { margin-top: 1.5rem; margin-bottom: 0; max-width: 980px; }
.partners-photo img { width: 100%; border-radius: 2px; }
.bios { max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-top: 3rem; padding-bottom: 5rem; }
.bio h2 { font-size: 1.3rem; margin-bottom: .2em; }
.role { color: var(--beam); font-style: italic; margin-top: 0; }
.bio p { color: var(--muted); }
.bio p.role { color: var(--beam); }

/* ---------- Project page ---------- */
.project {
  background:
    radial-gradient(ellipse 55% 60% at 22% 18%, color-mix(in srgb, var(--glow) 46%, transparent), transparent 72%),
    radial-gradient(ellipse 60% 50% at 85% 0%, color-mix(in srgb, var(--glow) 14%, transparent), transparent 70%);
}
.project .meta dt, .project .crumb a { color: color-mix(in srgb, var(--glow) 55%, white); }
.project-inner { display: grid; grid-template-columns: minmax(260px, 440px) 1fr; gap: clamp(2rem, 5vw, 4.5rem); padding-top: 3.5rem; padding-bottom: 3rem; align-items: start; }
.project-poster img { width: 100%; border-radius: 2px; box-shadow: 0 30px 90px color-mix(in srgb, var(--glow) 40%, transparent), 0 20px 40px rgba(0, 0, 0, .7); }
.crumb { margin: 0 0 1.5rem; font-size: 1rem; }
.project h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
.meta { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 0 0 2rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.meta dt { color: var(--muted); font-size: .9rem; }
.meta dd { margin: 0; }
.logline { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.55; max-width: 52ch; margin: 0; }

.characters { padding-top: 2rem; padding-bottom: 2rem; }
.characters h2 { font-size: 1.1rem; color: color-mix(in srgb, var(--glow) 55%, white); padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.char-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.25rem; }
.char-grid img { width: 100%; border-radius: 2px; }
.char-grid span { display: block; margin-top: .5rem; font-family: var(--display); font-size: .8rem; }

.pager { display: flex; justify-content: space-between; gap: 1rem; padding-top: 2rem; padding-bottom: 4rem; border-top: 1px solid var(--line); margin-top: 2rem; }
.pager a { color: var(--paper); text-decoration: none; font-family: var(--display); font-size: .9rem; }
.pager a span { display: block; font-family: var(--serif); color: var(--muted); font-size: .95rem; margin-bottom: .2rem; }
.pager a:hover { color: var(--beam); }
.pager .next { text-align: right; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: #000; }
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 3.5rem clamp(1rem, 4vw, 3rem) 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.footer-line { color: var(--muted); max-width: 32ch; margin-top: 1rem; }
.footer-contact h2 { font-size: 1rem; color: var(--beam); }
.footer-contact p { margin: .25rem 0; }
.legal { max-width: 1280px; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 3rem) 2rem; color: var(--muted); font-size: .9rem; }

/* ---------- Small screens ---------- */
@media (max-width: 820px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-emblem { justify-self: start; max-width: 380px; order: -1; }
  .split, .bios, .services ul { grid-template-columns: 1fr; }
  .project-inner { grid-template-columns: 1fr; }
  .project-poster { max-width: 420px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .brand span { font-size: .75rem; }
}