/* ============================================================
   MIDIOS MEDIA GROUP — ART DIRECTION LAYER
   ------------------------------------------------------------
   Layers over tokens.css. Inherits the house constants: the
   lockup, the type scale, the two typefaces, the colophon, the
   return path to the house. Adds only what a media enterprise
   needs that a document site does not — cinematic framing,
   media slots, the studio constellation, the project system,
   and the conversion router.

   Rule observed throughout: motion carries structure or story.
   Anything that does neither is not here.
   ============================================================ */

[data-division="media"] {
  --grain-opacity: .055;
  --frame-ratio: 2.39 / 1;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ------------------------------------------------------------
   1. FILM GRAIN + VIGNETTE
   Applied to cinematic surfaces only, never to reading text.
   ------------------------------------------------------------ */

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

.vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 35%, rgba(4, 7, 9, .55) 100%),
    linear-gradient(to bottom, rgba(4, 7, 9, .35) 0%, transparent 22%, transparent 68%, rgba(4, 7, 9, .75) 100%);
}

/* ------------------------------------------------------------
   2. MASTHEAD — condensed, sticky, ecosystem-aware
   ------------------------------------------------------------ */

/* A sticky masthead means every in-page target needs clearance. */
:target,
.band[id],
[id] > .credit > .body > h2,
.ledger > li[id] {
  scroll-margin-top: 7.5rem;
}

.masthead--film {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ground);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-top: 1.1rem;
  padding-bottom: .95rem;
  align-items: center;
}
.masthead--film .nav { gap: 1.35rem; align-items: center; }
.masthead--film .nav a { font-size: .88rem; padding-bottom: .25rem; }
.nav .nav-cta {
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  padding: .48rem 1rem;
  letter-spacing: .02em;
}
.nav .nav-cta:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* ------------------------------------------------------------
   3. THE REEL — cinematic opening
   ------------------------------------------------------------ */

.reel {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: min(92vh, 60rem);
  min-height: min(92svh, 60rem);
  display: grid;
  align-content: end;
  padding: clamp(4rem, 11vh, 7.5rem) var(--gutter) clamp(2.25rem, 5vh, 3.5rem);
  border-bottom: 1px solid var(--line);
}

/* The plate: where a film clip or key art eventually lives.
   Until then it is an honest constructed surface, not a stock photo. */
.reel-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(85% 60% at 18% 12%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 62%),
    radial-gradient(70% 55% at 88% 84%, color-mix(in srgb, #2C4A5E 42%, transparent) 0%, transparent 60%),
    linear-gradient(168deg, #121A20 0%, var(--ground) 52%, #090D11 100%);
}
.reel-plate video,
.reel-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}

/* Sweeping key light — the one piece of ambient motion on the page. */
.reel-sweep {
  position: absolute;
  inset: -20% -40%;
  z-index: 1;
  background: linear-gradient(104deg, transparent 38%, color-mix(in srgb, var(--accent) 12%, transparent) 50%, transparent 62%);
  transform: translate3d(-12%, 0, 0);
}
@media (prefers-reduced-motion: no-preference) {
  .reel-sweep { animation: sweep 18s var(--ease) infinite alternate; }
  @keyframes sweep {
    from { transform: translate3d(-14%, 0, 0); }
    to   { transform: translate3d(14%, 0, 0); }
  }
}

.reel-body { position: relative; z-index: 4; max-width: 74rem; }

.reel-slug {
  font-size: var(--step--1);
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--accent);
  margin: 0 0 1.75rem;
  max-width: none;
}

.reel-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--step-4);
  line-height: .96;
  letter-spacing: -.018em;
  margin: 0;
  max-width: 17ch;
  text-wrap: balance;
}
.reel-title em {
  font-style: italic;
  color: var(--accent);
}

.reel-sub {
  margin: 2rem 0 0;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--type-2);
  max-width: 46ch;
}

.reel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1rem;
  margin-top: 2.75rem;
}

.reel-foot {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.25rem 2rem;
  margin-top: clamp(3rem, 8vh, 5.5rem);
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--type) 14%, transparent);
  font-size: var(--step--1);
  color: var(--type-3);
  letter-spacing: .12em;
  text-indent: .12em;
}
.reel-foot p { margin: 0; max-width: none; }

/* Scroll cue — a hairline that breathes, not a bouncing arrow. */
.cue { display: flex; align-items: center; gap: .65rem; }
.cue span { display: block; }
.cue i {
  display: block;
  width: 3.5rem;
  height: 1px;
  background: var(--accent);
  transform-origin: left center;
  font-style: normal;
}
@media (prefers-reduced-motion: no-preference) {
  .cue i { animation: cue 2.6s var(--ease) infinite; }
  @keyframes cue {
    0%, 100% { transform: scaleX(.35); opacity: .5; }
    50%      { transform: scaleX(1);   opacity: 1; }
  }
}

/* ------------------------------------------------------------
   4. THE OUTPUT LIST — what we create
   ------------------------------------------------------------ */

.outputs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 clamp(1rem, 2.5vw, 2.25rem);
}
.outputs li {
  font-family: var(--display);
  font-size: var(--step-3);
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--type-3);
  transition: color .3s var(--ease);
}
.outputs li::after { content: "."; color: var(--accent-dim); }
.outputs li:hover,
.outputs li.is-lit { color: var(--type); }
.outputs li.is-lit::after { color: var(--accent); }

/* ------------------------------------------------------------
   5. THE CONSTELLATION — signature interaction
   A floor plan of the studio. Nodes left, department right.
   No JS: every panel is visible and the page still reads.
   ------------------------------------------------------------ */

.constellation {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
  max-width: 82rem;
}

.const-map {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 27rem;
  border: 1px solid var(--line);
  background:
    linear-gradient(to right, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px) 0 0 / 3.25rem 3.25rem,
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px) 0 0 / 3.25rem 3.25rem,
    var(--ground-raised);
}
.const-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.const-links line {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: stroke .3s var(--ease);
}
.const-links line.is-live { stroke: var(--accent-dim); }

.const-node {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: .4rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--ui);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-indent: .16em;
  color: var(--type-3);
  text-align: center;
  width: 7.5rem;
  transition: color .25s var(--ease);
}
.const-node .dot {
  width: .7rem;
  height: .7rem;
  border: 1px solid var(--type-3);
  border-radius: 50%;
  background: var(--ground);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.const-node:hover { color: var(--type); }
.const-node:hover .dot { border-color: var(--accent); }
.const-node[aria-selected="true"] { color: var(--type); }
.const-node[aria-selected="true"] .dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent);
}

.const-panel {
  border: 1px solid var(--line);
  background: var(--ground-raised);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.const-panel[hidden] { display: none; }
.const-panel .kicker {
  font-size: var(--step--1);
  letter-spacing: .2em;
  text-indent: .2em;
  color: var(--accent);
  margin: 0;
  max-width: none;
}
.const-panel h3 { font-size: var(--step-2); line-height: 1.12; margin: 0; }
.const-panel p { color: var(--type-2); margin: 0; }
.const-panel .status {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--type-3);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
}

/* No-JS / no-selection fallback: stack every panel as a readable list. */
.no-js .const-map { display: none; }
.no-js .const-panel[hidden] { display: flex; }
.no-js .constellation { grid-template-columns: minmax(0, 1fr); }
.no-js .const-panels { display: grid; gap: 1.25rem; }

@media (max-width: 900px) {
  .constellation { grid-template-columns: minmax(0, 1fr); }
  .const-map { min-height: 22rem; }
}

/* ------------------------------------------------------------
   6. MEDIA SLOTS
   Honest placeholders. Each one states the asset it wants, at
   the ratio it wants, so a real file drops in without reflow.
   ------------------------------------------------------------ */

.frame {
  position: relative;
  isolation: isolate;
  overflow: clip;
  aspect-ratio: var(--frame-ratio);
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--line) 40%, transparent) 14px 15px),
    var(--ground-raised);
  display: grid;
  place-items: center;
}
.frame--wide  { --frame-ratio: 2.39 / 1; }
.frame--film  { --frame-ratio: 16 / 9; }
.frame--card  { --frame-ratio: 3 / 2; }
.frame--sheet { --frame-ratio: 2 / 3; }
.frame--square{ --frame-ratio: 1 / 1; }
.frame > img,
.frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame-spec {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-indent: .18em;
  color: var(--type-3);
  padding: 1rem;
  margin: 0;
  max-width: none;
}
.frame-spec b { display: block; color: var(--type-2); font-weight: 500; margin-bottom: .35rem; }

/* ------------------------------------------------------------
   7. PROJECT SYSTEM
   ------------------------------------------------------------ */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.25rem;
}
.filter {
  font-family: var(--ui);
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-indent: .1em;
  color: var(--type-2);
  background: transparent;
  border: 1px solid var(--line);
  padding: .45rem .95rem;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.filter:hover { color: var(--type); border-color: var(--type-3); }
.filter[aria-pressed="true"] {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.slate {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.slate--feature { grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr)); }

.project {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}
.project .frame { transition: border-color .3s var(--ease); }
.project:hover .frame { border-color: var(--accent-dim); }
.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .85rem;
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-indent: .12em;
  color: var(--type-3);
  margin: 0;
  max-width: none;
}
.project-title {
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.22;
  color: var(--type);
  margin: 0;
}
.project:hover .project-title { color: var(--accent); }
.project-line { color: var(--type-2); margin: 0; font-size: .95rem; max-width: 46ch; }

.status-tag {
  display: inline-block;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-indent: .14em;
  padding: .2rem .55rem;
  border: 1px solid var(--line);
  color: var(--type-2);
}
.status-tag[data-status="development"] { border-color: var(--accent-dim); color: var(--accent); }
.status-tag[data-status="production"]  { border-color: var(--accent); color: var(--accent); }
.status-tag[data-status="released"]    { border-color: var(--type-3); color: var(--type-2); }
.status-tag[data-status="announced"]   { border-color: var(--type-3); color: var(--type-2); }

.empty-state {
  border: 1px dashed var(--line);
  padding: clamp(2rem, 5vw, 3.5rem);
  color: var(--type-2);
  max-width: none;
}

/* ------------------------------------------------------------
   8. CONVERSION ROUTER — five doors, not one form
   ------------------------------------------------------------ */

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
  margin: 0;
  padding: 0;
}
.door {
  background: var(--ground);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
  transition: background-color .25s var(--ease);
}
.door:hover { background: var(--ground-raised); }
.door .door-no {
  font-size: var(--step--1);
  letter-spacing: .2em;
  color: var(--accent);
  margin: 0;
  max-width: none;
}
.door h3 { font-size: var(--step-1); line-height: 1.2; margin: 0; }
.door p { color: var(--type-2); font-size: .95rem; margin: 0; }
.door .door-go {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-indent: .14em;
  color: var(--type-3);
  transition: color .25s var(--ease);
}
.door:hover .door-go { color: var(--accent); }

/* Routed intake: one form, five personalities. */
.intake { max-width: 44rem; }
.intake fieldset { border: 0; margin: 0 0 1.75rem; padding: 0; }
.intake legend {
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-indent: .16em;
  color: var(--type-3);
  padding: 0;
  margin-bottom: 1rem;
}
.route-choice { display: grid; gap: .55rem; }
.route-choice label {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  border: 1px solid var(--line);
  padding: .85rem 1rem;
  cursor: pointer;
  color: var(--type-2);
  font-size: .95rem;
  margin: 0;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.route-choice label:hover { border-color: var(--type-3); color: var(--type); }
.route-choice input { width: auto; margin-top: .3rem; accent-color: var(--accent); }
.route-choice input:checked + span { color: var(--type); }
.route-choice label:has(input:checked) { border-color: var(--accent); color: var(--type); }
.field-group[hidden] { display: none; }

/* ------------------------------------------------------------
   9. EDITORIAL UTILITIES
   ------------------------------------------------------------ */

.pull {
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.22;
  color: var(--type);
  max-width: 26ch;
  margin: 0;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--accent);
}

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}

.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: .5rem 1.5rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.spec-list dt, .spec-list .k {
  color: var(--type-3);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-indent: .12em;
}
.spec-list .v { color: var(--type-2); }
@media (max-width: 620px) {
  .spec-list li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

.placeholder-note {
  border-left: 1px solid var(--accent-dim);
  padding-left: 1rem;
  font-size: var(--step--1);
  color: var(--type-3);
  max-width: 52ch;
}

.band--film {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* Ecosystem navigator — used in the footer, not as a mega-menu. */
.ecosystem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1.25rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 78rem;
}
.ecosystem a {
  text-decoration: none;
  display: block;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
  transition: border-color .25s var(--ease);
}
.ecosystem a:hover { border-top-color: var(--accent); }
.ecosystem .e-name {
  display: block;
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-indent: .16em;
  color: var(--type-2);
}
.ecosystem a:hover .e-name { color: var(--type); }
.ecosystem .e-role {
  display: block;
  font-size: var(--step--1);
  color: var(--type-3);
  margin-top: .3rem;
  letter-spacing: 0;
  text-indent: 0;
}
.ecosystem .is-self .e-name { color: var(--accent); }

/* ------------------------------------------------------------
   10. ENTRANCE MOTION
   Structure arriving, not decoration. Off entirely for
   reduced-motion, and off if JS never runs.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .js .rise {
    opacity: 0;
    transform: translate3d(0, 1.1rem, 0);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .js .rise.is-in { opacity: 1; transform: none; }
  .js .rise:nth-child(2) { transition-delay: .07s; }
  .js .rise:nth-child(3) { transition-delay: .14s; }
  .js .rise:nth-child(4) { transition-delay: .21s; }
}

@media (max-width: 760px) {
  .reel { min-height: min(88vh, 46rem); min-height: min(88svh, 46rem); }
  .outputs li { font-size: var(--step-2); }
  .doors { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .reel-sweep, .grain::after, .vignette::before, .const-map { display: none; }
}

/* ---------- form submission status ---------- */
.formstatus { margin-top: 1.25rem; padding: .9rem 1.1rem; border-left: 2px solid var(--accent); background: var(--ground-raised); }
.formstatus[hidden] { display: none; }
.formstatus--error { border-left-color: #D9795A; }