/* Structure only. Every value here reads a token; change the look in
   design/systems/*.css (colour, type) or inspiration/*.css (rhythm). */

.page { display: flex; flex-direction: column; min-height: 100svh; }

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--in-pad-x);
  color: var(--ds-ink);
  transition: opacity 400ms var(--mo-ease), color 260ms var(--mo-ease);
}
.nav--over-media { color: var(--ds-cover-ink); }
.nav--over-media::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 210%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0));
}
.nav a { display: flex; align-items: center; min-height: 44px; }
.nav__links { display: flex; gap: clamp(14px, 2.4vw, 34px); }
.nav__links a { position: relative; }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 10px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--mo-hover) var(--mo-ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ── Cover ─────────────────────────────────────────────────────── */

.cover {
  order: var(--in-order-cover);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(24px, 5vh, 64px);
  min-height: var(--in-cover-min);
  padding: clamp(56px, 9vh, 104px) var(--in-pad-x) clamp(20px, 4vh, 44px);
  background: var(--ds-cover-bg);
  color: var(--ds-cover-ink);
  overflow: clip;
}

/* The source clip is 16:9. Wide screens fill edge to edge; narrow ones
   letterbox it centred on the plate rather than crop to a slit. */
.cover__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--in-cover-fit, cover);
  object-position: var(--in-cover-focus, 50% 50%);
  filter: var(--ds-img-filter);
}
.cover__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / var(--in-scrim-top, 0.58)) 0%,
    rgb(0 0 0 / var(--in-scrim-mid, 0.14)) 34%,
    rgb(0 0 0 / var(--in-scrim-mid, 0.14)) 60%,
    rgb(0 0 0 / var(--in-scrim-bottom, 0.72)) 100%);
}

.cover__frame {
  position: absolute;
  z-index: 3;
  inset: var(--in-cover-frame);
  border: var(--in-rule) solid var(--in-trim, var(--ds-cover-frame));
  pointer-events: none;
}

.mark {
  display: var(--in-show-marks);
  position: absolute;
  width: 28px; height: 28px;
  opacity: 0.85;
}
.mark::before, .mark::after { content: ''; position: absolute; background: var(--in-trim, var(--ds-cover-frame)); }
.mark::before { left: 50%; top: 0; width: 1px; height: 100%; }
.mark::after { top: 50%; left: 0; height: 1px; width: 100%; }
.mark--tl { top: -14px; left: -14px; }
.mark--tr { top: -14px; right: -14px; }
.mark--bl { bottom: -14px; left: -14px; }
.mark--br { bottom: -14px; right: -14px; }

.cover__masthead,
.cover__type { position: relative; z-index: 2; }

.cover__masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(16px, 4vw, 48px);
  justify-content: space-between;
  padding-bottom: clamp(10px, 1.4vh, 16px);
  border-bottom: var(--in-rule) solid var(--in-trim, var(--ds-cover-frame));
}
.cover__masthead .label { color: var(--ds-cover-ink); }

.cover__type {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vh, 22px);
  text-align: center;
}
.cover__title {
  margin: 0;
  font-size: var(--in-cover-title-size, clamp(52px, 12vw, 210px));
  line-height: 0.9;
  color: var(--ds-cover-ink);
  text-shadow: 0 2px 60px rgb(0 0 0 / 0.5);
}
.cover__strap {
  color: var(--ds-cover-ink);
  text-shadow: 0 1px 22px rgb(0 0 0 / 0.6);
}
.cover__strap + .cover__strap {
  margin-top: -0.35em;
  color: var(--ds-cover-accent);
}

/* ── Ticker ────────────────────────────────────────────────────── */

.ticker {
  order: var(--in-order-ticker);
  display: var(--in-show-marquee);
  overflow: hidden;
  padding: clamp(10px, 1.4vw, 20px) 0;
  border-bottom: var(--in-rule) solid var(--ds-line);
  user-select: none;
}
.ticker__track { display: flex; flex: 0 0 auto; white-space: nowrap; will-change: transform; }
.ticker__group {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.4vw, 52px);
  padding-right: clamp(20px, 3.4vw, 52px);
  font-family: var(--ds-font-display);
  font-size: clamp(20px, 3.2vw, 52px);
  line-height: 1;
  letter-spacing: var(--ds-display-tracking);
  text-transform: var(--ds-display-case);
}
.ticker__dot { color: var(--ds-accent); }

/* ── Carousel of productions ───────────────────────────────────── */

.carousel {
  order: var(--in-order-work);
  padding: var(--in-band-y) 0 var(--in-band-y) var(--in-pad-x);
}
.carousel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(18px, 3vw, 42px);
  padding-right: var(--in-pad-x);
}
.carousel__nav { display: flex; gap: 8px; }
.carousel__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: var(--in-rule) solid var(--ds-line);
  border-radius: var(--ds-radius);
  transition: background var(--mo-hover) var(--mo-ease), color var(--mo-hover) var(--mo-ease), opacity 300ms;
}
.carousel__btn:hover { background: var(--ds-ink); color: var(--ds-paper); }
.carousel__btn[disabled] { opacity: 0.25; pointer-events: none; }

.carousel__viewport {
  overflow: hidden;
  padding-bottom: 16px;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.carousel__viewport.is-dragging { cursor: grabbing; }
/* No max-content: a percentage flex-basis cannot resolve against an
   indefinite width, and the cards fall back to content size. */
.carousel__rail {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--in-gap);
  will-change: transform;
  backface-visibility: hidden;
}


.card { flex: 0 0 var(--in-card-w); min-width: 0; -webkit-user-drag: none; }

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--in-card-ar, 3 / 4);
  background: var(--ds-paper-2);
  border-radius: var(--ds-radius);
}
.card__img, .card__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--ds-img-filter);
  pointer-events: none;
  -webkit-user-drag: none;
}
.card__img { transition: transform 1100ms var(--mo-ease), filter 600ms var(--mo-ease); }
.card__video { opacity: 0; transition: opacity 420ms var(--mo-ease); }
.card:hover .card__img { transform: scale(1.06); filter: var(--ds-img-filter-hover); }
.card.is-playing .card__video { opacity: 1; }
.card.is-playing .card__img { transform: scale(1.02); }


.card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: var(--in-rule) solid var(--ds-line);
}
.card__title {
  font-size: var(--in-card-title-size, clamp(20px, 2.4vw, 38px));
  overflow-wrap: break-word;
  transition: color var(--mo-hover) var(--mo-ease);
}
.card:hover .card__title { color: var(--ds-accent); }

/* ── Frames, shared by the production pages ────────────────────── */

/* One measure for every production page: the column is capped and centred so
   frames run down the page as you scroll instead of spreading thin sideways. */
.frames {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--in-gap);
  width: 100%;
  max-width: var(--in-column);
  margin-inline: auto;
}
/* Wrapping flex, not grid: a row that does not fill centres itself, so a
   single trailing picture sits in the middle instead of hanging off the left. */
.frames > .frame { flex: 0 0 100%; }
.frames--feature { display: grid; grid-template-columns: 1fr; align-items: start; }

.frame { margin: 0; }
.frames > .frame.frame--wide { flex: 0 0 100%; grid-column: 1 / -1; }
.frame__box {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--frame-ar, var(--in-tile-ar));
  background: var(--ds-paper-2);
  border-radius: var(--ds-radius);
}
.frame__box img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--ds-img-filter);
  transition: filter 600ms var(--mo-ease);
}
.frame:hover .frame__box img { filter: var(--ds-img-filter-hover); }
.frame__cap {
  display: var(--in-show-captions);
  margin-top: 9px;
  font-size: var(--in-label-size);
  font-weight: var(--ds-ui-weight);
  letter-spacing: var(--ds-ui-tracking);
  text-transform: var(--ds-ui-case);
  color: var(--ds-ink-2);
}

.filmstrip {
  display: flex;
  width: 100%;
  max-width: var(--in-column);
  margin-inline: auto;
  gap: var(--in-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
  cursor: grab;
}
.filmstrip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.filmstrip .frame { flex: 0 0 min(82vw, 620px); scroll-snap-align: start; }
.filmstrip .frame__box { aspect-ratio: auto; height: var(--in-strip-h); }


/* ── Production page ───────────────────────────────────────────── */

.work-page { padding-top: clamp(56px, 9vh, 104px); }

.work-hero {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 15px);
  padding: clamp(28px, 5vw, 90px) var(--in-pad-x) clamp(24px, 4vw, 60px);
  width: 100%;
  max-width: calc(var(--in-column) + var(--in-pad-x) * 2);
  margin-inline: auto;
}
/* Wraps at spaces, never inside a word — 68ch here once split
   "FashionForward" across two lines at full display size. */
.work-hero__title { font-size: var(--in-title-size); overflow-wrap: normal; }
.work-hero__note { margin: 4px 0 0; max-width: var(--in-measure); color: var(--ds-ink-2); }
.work-hero__back { border-bottom: 1px solid var(--ds-line); }


.work-body {
  display: flex;
  flex-direction: column;
  gap: var(--in-gap);
  padding: 0 var(--in-pad-x) clamp(30px, 5vw, 80px);
}
/* Sized by height, not column width — a portrait clip in a full-width
   column would otherwise run taller than the screen. */
.work-videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--in-gap);
  width: 100%;
  max-width: var(--in-column);
  margin-inline: auto;
}
.work-video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: var(--in-video-max-h, min(78svh, 760px));
  background: var(--ds-paper-2);
  border-radius: var(--ds-radius);
}

.work-text {
  display: grid;
  gap: clamp(16px, 3vw, 56px);
  padding: var(--in-band-y) max(var(--in-pad-x), (100% - var(--in-column)) / 2);
  border-top: var(--in-rule) solid var(--ds-line);
  background: var(--ds-paper-2);
}
.work-text__body { max-width: 62ch; display: flex; flex-direction: column; gap: 14px; }
.work-standfirst {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: clamp(19px, 1.9vw, 28px);
  line-height: 1.25;
}
.work-text__credits { display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 64px); align-items: start; }
.work-credits ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--ds-ink-2);
}
.handle {
  color: var(--ds-ink);
  border-bottom: 1px solid var(--ds-line);
  transition: color var(--mo-hover) var(--mo-ease), border-color var(--mo-hover) var(--mo-ease);
}
.handle:hover { color: var(--ds-accent); border-color: var(--ds-accent); }

.work-next {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px clamp(16px, 4vw, 48px);
  padding: clamp(30px, 5vw, 74px) max(var(--in-pad-x), (100% - var(--in-column)) / 2);
  border-top: var(--in-rule) solid var(--ds-line);
}
.work-next__link { display: flex; flex-direction: column; gap: 6px; min-height: 44px; }
.work-next__link--end { text-align: right; align-items: flex-end; }
.work-next__title { font-size: clamp(22px, 3.4vw, 52px); transition: color var(--mo-hover) var(--mo-ease); }
.work-next__link:hover .work-next__title { color: var(--ds-accent); }

/* ── About ─────────────────────────────────────────────────────── */

.about-page { padding-top: clamp(56px, 9vh, 104px); }
.about {
  display: grid;
  gap: clamp(22px, 4vw, 64px);
  padding: clamp(28px, 5vw, 90px) var(--in-pad-x) var(--in-band-y);
  align-items: start;
}
.about__head { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px); }
.about__title { font-size: var(--in-title-size); }
.about__portrait { margin: 0; }
.about__body { display: flex; flex-direction: column; gap: 16px; max-width: 62ch; }
.about__body > p { margin: 0; }
.about__empty { color: var(--ds-ink-2); }
.about__empty code { font-size: 0.88em; padding: 1px 5px; background: var(--ds-paper-2); }
.about__body > .about__based { margin-top: 6px; }

@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .about__head { grid-column: 1; }
  .about__portrait { grid-column: 1; }
  .about__body { grid-column: 2; grid-row: 1 / span 2; }
}

/* ── Contact ───────────────────────────────────────────────────── */

.contact-page { padding-top: clamp(56px, 9vh, 104px); }
.contact {
  display: grid;
  gap: clamp(22px, 4vw, 64px);
  padding: clamp(28px, 5vw, 90px) var(--in-pad-x) var(--in-band-y);
  align-items: start;
}
.contact__head { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px); }
.contact__title { font-size: var(--in-title-size); }
.contact__direct { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 26px); max-width: 52ch; }
.contact__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.contact__links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: clamp(17px, 1.7vw, 23px);
  border-bottom: 1px solid var(--ds-line);
  transition: color var(--mo-hover) var(--mo-ease), border-color var(--mo-hover) var(--mo-ease);
}
.contact__links a:hover { color: var(--ds-accent); border-color: var(--ds-accent); }

.form { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); max-width: 56ch; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__row { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.form__opt { margin-left: 7px; color: var(--ds-ink-2); text-transform: none; letter-spacing: 0; }
.form input,
.form textarea {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  color: var(--ds-ink);
  background: transparent;
  border: 1px solid var(--ds-line);
  border-radius: 0;
  transition: border-color var(--mo-hover) var(--mo-ease);
}
.form textarea { resize: vertical; min-height: 132px; }
.form input:hover,
.form textarea:hover { border-color: var(--ds-ink-2); }
.form input:focus,
.form textarea:focus { outline: none; border-color: var(--ds-accent); box-shadow: inset 0 0 0 1px var(--ds-accent); }
.form input:user-invalid,
.form textarea:user-invalid { border-color: var(--ds-accent); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2vw, 24px); }
.form__send {
  min-height: 52px;
  padding: 0 clamp(26px, 3.4vw, 46px);
  color: var(--ds-cover-ink);
  background: var(--ds-cover-bg);
  border: 1px solid var(--ds-cover-bg);
  cursor: pointer;
  transition: color var(--mo-hover) var(--mo-ease), background var(--mo-hover) var(--mo-ease);
}
.form__send:hover { color: var(--ds-cover-bg); background: transparent; }
.form__send[disabled] { opacity: 0.55; cursor: default; }
.form__status { margin: 0; min-height: 1.4em; color: var(--ds-ink-2); }
.form__status[data-state='sent'] { color: var(--ds-ink); }
.form__status[data-state='failed'] { color: var(--ds-accent); }
.form__status a { border-bottom: 1px solid currentColor; }

@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .contact__head { grid-column: 1; }
  .contact__direct { grid-column: 1; }
  .form { grid-column: 2; grid-row: 1 / span 2; }
}

/* ── Colophon ──────────────────────────────────────────────────── */

.colophon {
  order: var(--in-order-colophon);
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 4vw, 60px);
  padding: var(--in-band-y) var(--in-pad-x) clamp(24px, 4vw, 48px);
  background: var(--ds-cover-bg);
  color: var(--ds-cover-ink);
}
.colophon__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(22px, 4vw, 56px);
}
.colophon .label { color: var(--ds-cover-ink-2); }
.colophon__end { font-size: var(--in-end-size); line-height: 0.78; }
.colophon__links {
  display: flex;
  align-items: flex-end;
  gap: clamp(34px, 7vw, 110px);
  margin-right: clamp(0px, 6vw, 90px);
  font-size: clamp(22px, 2.6vw, 38px);
}
.colophon__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-bottom: 1px solid var(--ds-cover-line);
  transition: color var(--mo-hover) var(--mo-ease), border-color var(--mo-hover) var(--mo-ease);
}
.colophon__links a:hover { color: var(--ds-cover-accent); border-color: var(--ds-cover-accent); }
.colophon__legal {
  margin: 0;
  color: var(--ds-cover-ink-2);
  border-top: 1px solid var(--ds-cover-line);
  padding-top: clamp(14px, 2vw, 22px);
}

/* ── Breakpoints ───────────────────────────────────────────────── */

@media (max-width: 759.98px) {
  :root { --in-cover-focus: 50% 42%; }
  .colophon__links { margin-right: 0; gap: clamp(28px, 9vw, 60px); }
}

@media (min-width: 760px) {
  .frames--duo > .frame,
  .frames--pair > .frame,
  .frames--three-up > .frame { flex: 0 0 calc((100% - var(--in-gap)) / 2); }
  .frames--feature { grid-template-columns: 1.12fr 1fr; }
  .frames--feature .frame:first-child { grid-row: 1 / span 2; }
  .work-text { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
}

@media (min-width: 1040px) {
  .frames--three-up > .frame { flex: 0 0 calc((100% - var(--in-gap) * 2) / 3); }
  .frames--three-up .frame:nth-child(2) { margin-top: clamp(20px, 4vw, 62px); }
}

@media (min-width: 900px) {
  .card { flex: 0 0 calc((100% - var(--in-pad-x) - var(--in-gap) * (var(--in-carousel-visible) - 1)) / var(--in-carousel-visible)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .card__video { display: none; }
}