/* =========================================================
   project.css
   Shared shell for every individual project page (/work/*).
   Structure only — no per-project color lives here. Each page
   sets --project-accent / --project-accent-soft (and optionally
   --project-motif-size) via its own tiny stylesheet in
   css/projects/, so this file stays identical across projects.

   To start a new project page:
   1. Copy work/ecubator.html, swap the content and media-slot
      labels.
   2. Copy css/projects/ecubator.css, swap the two accent colors
      (sample them from the campaign's own art — see that file's
      comment for how).
   3. Nothing in this file needs to change.
   ========================================================= */

:root {
  /* Fallbacks so a project page still reads correctly even if
     its accent stylesheet is missing. */
  --project-accent:      var(--color-accent);
  --project-accent-soft: var(--color-glow);

  --text-lg: clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.6rem, 1.3rem + 1.6vw, 2.5rem);
  --text-display: clamp(2.4rem, 1.8rem + 3.2vw, 4.5rem);
}

.project-main {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-2xl);
  flex: 1 0 auto;
}

/* ---- Hero ---- */
.project-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-2xl) 0 var(--space-lg);
  isolation: isolate;
}

.project-hero__motif {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-conic-gradient(
    var(--project-accent-soft) 0% 25%,
    transparent 0% 50%
  );
  background-size: var(--project-motif-size, 34px) var(--project-motif-size, 34px);
  opacity: 0.09;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.project-hero__title {
  font-family: var(--font-display);
  font-weight: 400; /* Shrikhand ships one weight — no 700 to ask for */
  font-size: var(--text-display);
  line-height: 1.02;
  color: var(--color-paper);
  margin-top: var(--space-sm);
}

.project-hero__partners {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--project-accent);
  margin-top: var(--space-xs);
}

.project-hero__intro {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

/* ---- Pixel-notched label chip ----
   Stepped corners echo the bordered pixel-UI boxes already in
   the campaign art (the "Step 1:" callouts, the "GO OFF THE EGG
   GRID" badge) rather than a generic pill or numbered eyebrow.
   Reused for the hero kicker and every section header. */
.pixel-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--project-accent);
  border: 1px solid var(--project-accent);
  padding: 0.45em 0.9em;
  background: color-mix(in srgb, var(--project-accent) 14%, transparent);
  clip-path: polygon(
    0 5px, 5px 5px, 5px 0,
    calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px,
    100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%,
    5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px)
  );
}

/* ---- Sections ---- */
.project-section {
  padding-top: var(--space-2xl);
}

.project-section__heading {
  font-family: var(--font-display);
  font-weight: 400; /* Shrikhand ships one weight — no 700 to ask for */
  font-size: var(--text-display);
  line-height: 1.05;
  color: var(--project-accent);
  text-align: center;
  margin-bottom: var(--space-md);
}

.project-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 65ch;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1.5;
}

.project-copy a,
.project-list a {
  color: var(--project-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-out);
}

.project-copy a:hover,
.project-copy a:focus-visible,
.project-list a:hover,
.project-list a:focus-visible {
  color: var(--color-paper);
}

.project-copy + .media-grid,
.project-copy + .media-slot,
.project-copy + .project-media-stack {
  margin-top: var(--space-lg);
}

.media-slot + .project-copy,
.media-grid + .project-copy,
.project-media-stack + .project-copy {
  margin-top: var(--space-lg);
}

/* A media-slot directly followed by a media-grid (no copy in
   between) has no built-in gap otherwise — they'd sit flush
   against each other. */
.media-slot + .media-grid,
.media-grid + .media-slot {
  margin-top: var(--space-lg);
}

/* ---- Script / storyboard breakdown ----
   For TV and radio spots: a slug line, then alternating action
   description and dialogue. Monospace to read like an actual
   script page rather than body copy. */
.project-script {
  border-left: 2px solid var(--project-accent);
  padding: 0.2em var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  max-width: 65ch;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.55;
}

.project-script__slug {
  font-weight: 700;
  color: var(--color-paper);
}

.project-script__action {
  font-style: italic;
  color: var(--color-text-muted);
}

.project-script__line {
  color: var(--color-paper);
}

.project-script__speaker {
  color: var(--project-accent);
  font-weight: 700;
}

.project-script + .media-grid,
.project-script + .media-slot,
.project-script + .project-media-stack {
  margin-top: var(--space-lg);
}

.project-script + .project-section__heading {
  margin-top: var(--space-lg);
}

/* ---- Pull quote ----
   Same bordered-block language as .project-script (a colored
   left rule) so the two read as one family, just for a single
   standalone line instead of a scene breakdown. */
.project-quote {
  border-left: 2px solid var(--project-accent);
  padding: 0.2em var(--space-md);
  max-width: 55ch;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-paper);
}

.project-quote cite {
  display: block;
  margin-top: 0.6em;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--project-accent);
}

.media-slot + .project-quote,
.media-grid + .project-quote {
  margin-top: var(--space-lg);
}

.project-quote + .media-grid,
.project-quote + .media-slot {
  margin-top: var(--space-lg);
}

/* ---- Styled list ----
   For taglines, alt copy, or any set of short parallel lines a
   project needs to show as a group rather than prose. */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  max-width: 65ch;
  list-style: none;
}

.project-list li {
  position: relative;
  padding-left: 1.4em;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.5;
}

.project-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5em;
  height: 0.5em;
  background: var(--project-accent);
}

.project-copy + .project-list {
  margin-top: var(--space-sm);
}

.project-list + .media-grid,
.project-list + .media-slot {
  margin-top: var(--space-lg);
}

/* ---- Media placeholders ----
   Swap out later: give the element a real src (img/video) and
   drop the media-slot class + its ::before/::after. Aspect
   ratio is set by a modifier class so swapping the source never
   requires touching layout. */
.media-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  border: 1px dashed color-mix(in srgb, var(--project-accent) 55%, var(--color-text-muted) 45%);
  border-radius: 4px;
  background: color-mix(in srgb, var(--project-accent) 6%, transparent);
  overflow: hidden;
}

.media-slot--video { aspect-ratio: 16 / 9; }
.media-slot--square { aspect-ratio: 1 / 1; }
.media-slot--tall { aspect-ratio: 4 / 5; }
.media-slot--wide { aspect-ratio: 21 / 9; }

/* Lets a real photo/video keep its natural aspect ratio instead
   of being cropped to the slot's box — used wherever a source
   asset doesn't share the grid's usual ratio. Originally
   duplicated per-page; promoted here since every project page
   ended up needing it. */
.media-slot--natural { aspect-ratio: auto; }

.media-slot--natural img,
.media-slot--natural video {
  width: 100%;
  height: auto;
  object-fit: initial;
}

/* Once real media fills a slot, the dashed placeholder chrome
   should disappear — add this alongside media-slot rather than
   removing media-slot itself, so the aspect-ratio modifiers
   above still apply. */
.media-slot--filled {
  border: none;
  background: transparent;
}

/* Audio has no shape — a big empty rectangle reads wrong for a
   podcast spot. Shaped like the eventual <audio controls> bar
   instead of a photo/video frame. */
.media-slot--audio {
  aspect-ratio: unset;
  height: 4.5rem;
  justify-content: flex-start;
  padding: 0 var(--space-md);
  gap: var(--space-sm);
}

.media-slot--audio::before {
  content: "";
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--project-accent) 55%, var(--color-text-muted) 45%);
}

.media-slot--audio .media-slot__label {
  text-align: left;
}

.media-slot__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--project-accent) 70%, var(--color-text-muted) 30%);
}

/* Once a real asset fills the slot, it should behave like any
   other content image — cover the box, no dashed chrome. */
.media-slot img,
.media-slot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(var(--media-grid-cols, 3), 1fr);
}

.media-grid--2 { --media-grid-cols: 2; }
.media-grid--3 { --media-grid-cols: 3; }
.media-grid--4 { --media-grid-cols: 4; }

@media (max-width: 45em) {
  .media-grid { --media-grid-cols: 1 !important; }
}

/* A vertical run of full-size, natural-aspect-ratio images —
   for cases where a media-grid's cropped tiles would be too
   small to read (e.g. a case board full of text). Each image
   keeps its own aspect ratio rather than being squeezed into a
   fixed-ratio tile. */
.project-media-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ---- Credit footer ---- */
.project-credit {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(244, 237, 224, 0.12);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.project-credit__roles {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.project-credit__back {
  color: var(--project-accent);
  transition: color var(--duration-fast) var(--ease-out);
}

.project-credit__back:hover,
.project-credit__back:focus-visible {
  color: var(--color-paper);
}

.project-credit a:not(.project-credit__back) {
  color: var(--project-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--duration-fast) var(--ease-out);
}

.project-credit a:not(.project-credit__back):hover,
.project-credit a:not(.project-credit__back):focus-visible {
  color: var(--color-paper);
}

/* ---- Transport bar ----
   DVD-remote-styled prev/eject/next row at the bottom of every
   project page, above the site footer. Uses a 3-column grid so
   the eject button stays centered even when a project has no
   prev or no next (first/last in the lineup). */
.project-transport {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(244, 237, 224, 0.12);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm);
}

.transport-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.transport-btn:hover,
.transport-btn:focus-visible {
  color: var(--project-accent);
}

.transport-btn--prev { justify-self: start; }
.transport-btn--next { justify-self: end; flex-direction: row-reverse; }
.transport-btn--eject { justify-self: center; }

.transport-btn__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--project-accent) 55%, var(--color-text-muted) 45%);
  background: color-mix(in srgb, var(--project-accent) 14%, transparent);
  color: var(--project-accent);
  clip-path: polygon(
    0 5px, 5px 5px, 5px 0,
    calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px,
    100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%,
    5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px)
  );
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.transport-btn__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.transport-btn:hover .transport-btn__icon,
.transport-btn:focus-visible .transport-btn__icon {
  background: var(--project-accent);
  color: var(--color-bg);
}

@media (max-width: 32em) {
  .project-transport {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-md);
  }
  .transport-btn--prev,
  .transport-btn--next,
  .transport-btn--eject {
    justify-self: center;
  }
}

@media (max-width: 45em) {
  .project-main { padding: 0 var(--space-sm) var(--space-lg); }
  .project-hero { padding-top: var(--space-lg); }
}