/* ==========================================================================
   PROJECT PAGES (01–06)
   Frame width 1440. Copy and in-margin media use 170px side padding
   (1100px content width at 1440). Full-bleed media spans the view.
   ========================================================================== */

.project {
  padding-top: var(--header-h);
  background: var(--c-page);
}

/* ---- PAGE_HEADER / INTRO_SECTION ------------------------------------- */
.project-intro {
  padding: var(--gap-header-identifier) var(--pad-copy) 0;
}

.identifier {
  font-family: var(--font-ayuthaya);
  font-weight: 400;
  font-size: var(--t-identifier-size);
  line-height: var(--t-identifier-lh);
  color: var(--c-meta);
}

.project-intro .copy { margin-top: var(--gap-copy); }

/* ---- Copy ------------------------------------------------------------- */
.copy {
  font-family: var(--font-grotesk);
  font-weight: var(--w-light);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--c-text);
}
.copy h2 {
  font-weight: var(--w-medium);
  font-size: var(--t-heading-size);
  line-height: var(--t-heading-lh);
  margin-bottom: var(--para-gap);
}
.copy p + p { margin-top: var(--para-gap); }

.text-section { padding: 0 var(--pad-copy); }

/* ---- Section rhythm --------------------------------------------------- */
.section { margin-top: var(--gap-section); }
.group > .block + .block { margin-top: var(--gap-group); }

/* ---- Media rows ------------------------------------------------------- */
.row {
  display: flex;
  align-items: flex-start;
}
.row--content { padding: 0 var(--pad-copy); }
.row--spread { justify-content: space-between; }

/* Width is set inline as a percentage of the row; height comes from the
   Figma rect's aspect ratio so FILL crops match the design exactly. */
.media {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}
.media > img,
.media > video,
.media > .fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.media img,
.media video {
  object-fit: cover;
  object-position: 50% 50%;
}

/* Timed cross-fades (Lion-O, Jedi/Sith, Olympics) */
.fade > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dur-dissolve) var(--ease-out);
}
.fade > img.is-current { opacity: 1; }

/* ---- USER_FLOW (04 / UI/UX DESIGN) ------------------------------------ */
.flow-screen { flex: 0 0 auto; }
.flow-screen .media { width: 100%; }
.flow-label {
  margin-top: 30px;
  text-align: center;
  color: var(--c-text);
  font-family: var(--font-grotesk);
  font-size: 14px;
}
.flow-label__name {
  display: block;
  font-weight: var(--w-medium);
  line-height: 32px;
}
.flow-label__number {
  display: block;
  margin-top: 8px;
  font-weight: var(--w-light);
  line-height: 14px;
}

/* ---- CONTENT_CAPTION -------------------------------------------------- */
.caption {
  padding: var(--caption-pad-top) calc(var(--pad-copy) + var(--caption-inset)) 0;  /* inset image: 200px */
  text-align: right;
  font-family: var(--font-ayuthaya);
  font-weight: 400;
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
  color: var(--c-meta);
}
.caption--full { padding-right: var(--caption-inset); }  /* full-width image: 30px */

/* ---- FOOTER ----------------------------------------------------------- */
.footer {
  margin-top: var(--gap-section);
  padding: 0 var(--footer-pad-x) var(--footer-pad-bottom);
  font-family: var(--font-grotesk);
  font-weight: var(--w-light);
  font-size: var(--t-footer-size);
  line-height: var(--t-footer-lh);
  color: var(--c-meta);
}

/* ---- Sound control (Refinement 11 — AnimeConUK promo only) ------------ */
.sound-toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.6);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color var(--dur-icon) var(--ease-out);
}
.sound-toggle:hover,
.sound-toggle:focus-visible { background: rgba(20, 20, 20, 0.9); }
.sound-toggle svg { display: block; }
.sound-toggle .icon-on { display: none; }
.sound-toggle[aria-pressed="true"] .icon-on { display: block; }
.sound-toggle[aria-pressed="true"] .icon-off { display: none; }