@import url('fonts.css');

/* ============================================================
   DESIGN TOKENS
   Palette and type lifted from the Squarespace design.
   Retune the whole site from this block.
   ============================================================ */

:root {
  /* Colour */
  --black:      #000000;
  --white:      #FFFFFF;
  --apricot:    #EFB071;   /* the one distinctive brand colour */
  --pale:       #EAF0F6;   /* light section band */

  --ink:        #101012;   /* body text on light */
  --ink-muted:  #5B6068;
  --paper:      #FFFFFF;
  --rule:       rgba(16, 16, 18, 0.14);
  --rule-dark:  rgba(255, 255, 255, 0.18);
  --on-dark:    #FFFFFF;
  --on-dark-muted: rgba(255, 255, 255, 0.62);

  /* Type */
  --display: 'Cormorant Garamond', 'Times New Roman', Times, serif;
  --ui: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --t-hero:  clamp(3.5rem, 15vw, 12rem);
  --t-xl:    clamp(2.5rem, 7vw, 5.5rem);
  --t-lg:    clamp(1.9rem, 4vw, 3rem);
  --t-md:    clamp(1.3rem, 2.2vw, 1.75rem);
  --t-body:  clamp(1rem, 1.05vw, 1.125rem);
  --t-sm:    0.9375rem;
  --t-xs:    0.8125rem;

  /* Spacing */
  --gutter:  clamp(1.25rem, 5vw, 5rem);
  --section: clamp(4.5rem, 10vw, 9rem);
  --maxw:    82rem;
  --measure: 38rem;

  --header-h: 4.5rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2px solid var(--apricot);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--black);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  font-size: var(--t-sm);
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--dark  { background: var(--black); color: var(--on-dark); }
.section--pale  { background: var(--pale); }

.section-label {
  font-family: var(--ui);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.75rem;
}
.section--dark .section-label { color: var(--on-dark-muted); }

.lede {
  font-size: var(--t-md);
  line-height: 1.45;
  max-width: var(--measure);
  font-weight: 400;
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--on-dark);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

/* Solid once scrolled past the hero, or on any page without a dark hero. */
.site-header.is-stuck {
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.wordmark {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav ul {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.site-nav a:hover { border-bottom-color: currentColor; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--apricot); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  padding: 0.5rem 0;
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: rgba(0, 0, 0, 0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--on-dark);
    display: none;
  }
  .site-nav[data-open="true"] { display: block; }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.75rem;
  }
  .site-nav li + li { border-top: 1px solid var(--rule-dark); }
  .site-nav a {
    display: block;
    padding: 0.95rem 0;
    font-size: 1.05rem;
    border-bottom: 0;
  }
}

/* ============================================================
   HERO — full viewport, black, name stacked
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--black);
  color: var(--on-dark);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

/* The portrait is square. Full-bleed on a wide screen shows the entire frame,
   which shrinks the face and hands the composition to the dark background, so
   on desktop it takes the right side only and feathers into the black, letting
   the name own the left. */
@media (min-width: 861px) {
  .hero__media {
    left: auto;
    width: min(62%, 46rem);
  }
  .hero__media img,
  .hero__media video {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
  }
}

/* On mobile a full-bleed square gets scaled to the viewport height, which zooms
   the face enormously. Matching the Squarespace treatment instead: a contained,
   inset 4:5 block with the name stacked beneath it. */
@media (max-width: 860px) {
  .hero {
    display: block;
    min-height: 0;
    padding-top: calc(var(--header-h) + 1.25rem);
    padding-bottom: clamp(2rem, 6vh, 3.5rem);
  }

  .hero__media {
    position: relative;
    inset: auto;
    padding-inline: var(--gutter);
  }
  .hero__media img,
  .hero__media video {
    aspect-ratio: 4 / 5;
    height: auto;
    object-position: 62% 22%;
    opacity: 1;
  }
  /* The name sits below the image now, so it needs no scrim. */
  .hero__media::after { content: none; }

  /* section.hero beats the base `.hero .wrap` rule, which sits later in the file
     and otherwise reapplies its header-clearing padding of 104px here. */
  section.hero .wrap {
    padding-top: clamp(1.5rem, 4vw, 2rem);
    padding-bottom: 0;
  }
}
/* The portrait is a tight, already-dark chiaroscuro crop, so it carries a high
   opacity. object-position keeps the face in frame and the dark left side clear
   for the name; the Y value stops a 16:9 crop slicing through the eyes. */
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 26%;
  opacity: 0.95;
}

/* Only a vertical wash now — the horizontal falloff is handled by the mask
   above, so the face keeps its contrast instead of being flattened twice. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.00) 32%,
    rgba(0,0,0,0.00) 44%,
    rgba(0,0,0,0.62) 72%,
    rgba(0,0,0,0.92) 100%);
}

.hero .wrap {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(3rem, 8vh, 6rem);
  padding-top: calc(var(--header-h) + 2rem);
}

.hero__name {
  font-size: var(--t-hero);
  line-height: 0.82;
  letter-spacing: 0.005em;
  margin: 0;
}
.hero__name span { display: block; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(1.5rem, 3vh, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
}

.hero__title {
  font-family: var(--ui);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero__line {
  font-family: var(--ui);
  color: var(--on-dark-muted);
  max-width: 34rem;
  margin: 0;
  font-size: var(--t-sm);
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3rem, 8vh, 6rem);
  z-index: 1;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  text-decoration: none;
}
@media (max-width: 860px) { .hero__scroll { display: none; } }

/* ============================================================
   CREDIBILITY BAR — apricot, sits directly under the hero
   ============================================================ */

.credibility {
  background: var(--apricot);
  color: var(--black);
}

.credibility .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.credibility__text { max-width: 54rem; }

.credibility__eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  opacity: 0.72;
}

.credibility__headline {
  font-family: var(--display);
  font-size: var(--t-lg);
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0;
}

.credibility__sub {
  font-size: var(--t-sm);
  margin: 0.6rem 0 0;
  opacity: 0.82;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ui);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--solid { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--solid:hover { background: transparent; color: var(--black); }

.section--dark .btn:hover { background: var(--white); color: var(--black); border-color: var(--white); }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--black);
  color: var(--on-dark);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule-dark);
}

.site-footer__email {
  font-family: var(--display);
  font-size: var(--t-lg);
  text-transform: none;
  text-decoration: none;
  line-height: 1;
  word-break: break-word;
}
.site-footer__email:hover { color: var(--apricot); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links a {
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--on-dark-muted);
  transition: color 0.25s var(--ease);
}
.footer-links a:hover { color: var(--on-dark); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-size: var(--t-xs);
  color: var(--on-dark-muted);
}

.site-footer__name {
  font-family: var(--display);
  font-size: var(--t-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark);
}

/* ============================================================
   PLACEHOLDERS — visible on purpose, so nothing ships half-filled
   ============================================================ */

.placeholder {
  display: block;
  border: 1px dashed var(--apricot);
  background: repeating-linear-gradient(
    45deg,
    rgba(239, 176, 113, 0.07) 0 10px,
    transparent 10px 20px
  );
  color: var(--ink-muted);
  font-family: var(--ui);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 2rem 1rem;
}
.section--dark .placeholder,
.hero .placeholder { color: var(--on-dark-muted); }

.placeholder--media {
  display: grid;
  place-content: center;
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* In the hero the placeholder fills the viewport, so pin its label to the top
   corner instead of the centre where it would sit across the name. */
.hero .placeholder--media {
  height: 100%;
  aspect-ratio: auto;
  place-content: start;
  text-align: left;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 0;
  border: 0;
}

/* ============================================================
   SPLIT — text beside media, stacks on small screens
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.split__title {
  font-size: var(--t-xl);
  margin: 0 0 1.25rem;
}

/* Single-column alternative to .split, for sections with no image yet. Capped at
   a readable measure so the copy doesn't run the full width of the page. */
.stack {
  max-width: 46rem;
}

.note {
  font-size: var(--t-sm);
  color: var(--ink-muted);
}
.section--dark .note { color: var(--on-dark-muted); }

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
.link-row a {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  border: 1px solid currentColor;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.link-row a:hover { background: var(--apricot); color: var(--black); border-color: var(--apricot); }

/* ============================================================
   WORK GRID
   ============================================================ */

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* minmax(0, 1fr) instead of the default auto track: a grid item carrying an
   aspect-ratio can transfer a content-based minimum height back into a minimum
   width, which blows the column wider than the card and knocks the cards out of
   alignment with each other. */
.work-card a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  gap: 1.1rem;
  text-decoration: none;
  height: 100%;
}

/* The container owns the ratio, not the child. Otherwise a placeholder sizes
   itself from its own text and cards end up different heights, which shifts
   every row beneath them out of line. */
.work-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--pale);
  aspect-ratio: 4 / 3;
  min-width: 0;
  min-height: 0;
}
/* Absolute children are out of flow, so no amount of text inside a placeholder
   can stretch the box past its ratio. In normal flow it grows and the rows
   below fall out of line with the neighbouring cards. */
.work-card__media > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  padding: 1rem;
}
.work-card__media img {
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.work-card a:hover .work-card__media img { transform: scale(1.04); }

.work-card__body { display: block; }

.work-card__meta {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}

/* Sized below --t-lg on purpose: at the section heading size, "Metamorphosis"
   needs 398px inside a 358px card and spills into the neighbouring card.
   min-height reserves a full line so a title that does wrap can't drag its
   card's role text out of line with the others. */
.work-card__title {
  --work-title: clamp(1.6rem, 2.9vw, 2.4rem);
  display: block;
  font-family: var(--display);
  font-size: var(--work-title);
  text-transform: uppercase;
  line-height: 0.95;
  min-height: calc(var(--work-title) * 0.95);
  margin-bottom: 0.6rem;
  overflow-wrap: break-word;
  hyphens: auto;
}
.work-card a:hover .work-card__title { color: var(--apricot); }

.work-card__role {
  display: block;
  font-size: var(--t-sm);
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ============================================================
   SERVICES
   ============================================================ */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.services h3 {
  font-size: var(--t-md);
  margin-bottom: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.services p {
  font-size: var(--t-sm);
  color: var(--ink-muted);
}

/* ============================================================
   CONTACT
   ============================================================ */

.split--contact { margin-top: 2.5rem; }

.contact-email {
  font-family: var(--display);
  font-size: var(--t-lg);
  text-decoration: none;
  word-break: break-word;
}
.contact-email:hover { color: var(--apricot); }

.contact-form { display: grid; gap: 1rem; }

.contact-form label { display: grid; gap: 0.4rem; }
.contact-form label span {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.contact-form input,
.contact-form textarea {
  font: inherit;
  font-size: var(--t-sm);
  color: inherit;
  background: transparent;
  border: 1px solid var(--rule-dark);
  padding: 0.8rem 0.9rem;
  width: 100%;
  border-radius: 0;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--apricot); outline: none; }
.contact-form input:disabled,
.contact-form textarea:disabled { opacity: 0.4; cursor: not-allowed; }
.contact-form textarea { resize: vertical; }

.contact-form .btn:disabled { opacity: 0.4; cursor: not-allowed; }

.form-status {
  margin: 0;
  font-size: var(--t-sm);
  min-height: 1.4em;            /* reserve the line so the button doesn't jump */
}
.form-status[data-state="ok"]    { color: var(--apricot); }
.form-status[data-state="error"] { color: #FF9B8A; }

.contact-form button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* ============================================================
   PROJECT PAGES
   ============================================================ */

.project-hero {
  background: var(--black);
  color: var(--on-dark);
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.project-hero__eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--apricot);
  margin: 0 0 1rem;
}

/* Smaller than --t-hero: the home page splits a short name over two lines, but
   project titles are single long words ("Metamorphosis") that overflow at 15vw. */
.project-hero__title {
  font-size: clamp(2.5rem, 9vw, 7rem);
  line-height: 0.9;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.project-hero__role {
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
}

/* The verifiable third-party credit — deliberately the loudest thing on the page. */
.credit-quote {
  margin: 0;
  max-width: 52rem;
}
.credit-quote p {
  font-family: var(--display);
  font-size: var(--t-lg);
  line-height: 1.15;
  text-transform: none;
  margin: 0 0 1.25rem;
}
.credit-quote cite {
  display: block;
  font-family: var(--ui);
  font-style: normal;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.credit-quote cite a { color: inherit; }
.credit-quote cite a:hover { color: var(--ink); }

/* Spec list and credits share a two-column definition layout. */
.spec-list,
.credits {
  list-style: none;
  margin: 0;
  padding: 0;
}
.spec-list li,
.credits li {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: 1rem 1.5rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
}
.section--dark .spec-list li { border-top-color: var(--rule-dark); }

.spec-list li > span:first-child,
.credits li > span:first-child {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.section--dark .spec-list li > span:first-child { color: var(--on-dark-muted); }

@media (max-width: 560px) {
  .spec-list li,
  .credits li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Self-hosted player. Capped so a 16:9 clip doesn't dominate a wide screen. */
.video-player {
  display: block;
  width: 100%;
  max-width: 60rem;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--black);
}

/* Portrait photograph in a two-column split — capped so it doesn't tower over
   the column of text beside it. */
.portrait-img {
  width: 100%;
  height: auto;
  max-height: 40rem;
  object-fit: cover;
  object-position: center 30%;
}

/* Full-width feature image, shown at its own ratio rather than cropped. */
.feature-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Same rule as the work cards: the cell owns the ratio so every tile matches,
   whether it currently holds an image or a placeholder. */
.gallery li {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.gallery li > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  padding: 1rem;
}
.gallery img { object-fit: cover; }

/* Festival laurels */
.laurels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0 2.5rem;
}
.laurels li {
  padding: 1rem 0;
  border-top: 1px solid var(--rule-dark);
  font-size: var(--t-sm);
}
.laurels strong {
  display: block;
  font-weight: 600;
}
.laurels span.year { color: var(--on-dark-muted); }

/* Next project */
.next-project__link {
  display: block;
  text-decoration: none;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.next-project__meta {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
.next-project__title {
  display: block;
  font-family: var(--display);
  font-size: var(--t-xl);
  text-transform: uppercase;
  line-height: 1;
}
.next-project__link:hover .next-project__title { color: var(--apricot); }

/* Embedded video keeps its ratio without extra markup. */
.embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   WATCH CARD + CLIP LIST
   Instagram's official embed needs third-party JS and is unreliable, so links
   out get a proper card instead. Swap for an <iframe> when a Vimeo/YouTube
   upload exists.
   ============================================================ */

.watch-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  text-decoration: none;
  background: var(--black);
  color: var(--on-dark);
  min-width: 0;
  min-height: 0;
}

.watch-card__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transition: opacity 0.35s var(--ease), transform 0.6s var(--ease);
}
.watch-card:hover .watch-card__poster { opacity: 0.66; transform: scale(1.03); }

.watch-card__text {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.3rem;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 60%);
}

.watch-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  display: grid;
  place-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: var(--white);
  padding-left: 4px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.watch-card:hover .watch-card__play {
  background: var(--apricot);
  border-color: var(--apricot);
  color: var(--black);
}

.watch-card__label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--apricot);
}
.watch-card__title {
  font-family: var(--display);
  font-size: var(--t-lg);
  text-transform: uppercase;
  line-height: 1;
}
.watch-card__meta {
  font-size: var(--t-xs);
  color: var(--on-dark-muted);
}

/* Instagram clip embeds. Their official /embed/ iframe renders for logged-out
   visitors and brings its own thumbnail, player and like count, so it beats any
   hand-made card. Height is fixed because a cross-origin frame can't size itself. */
.clip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.clip-grid li { min-width: 0; }
/* Instagram's embed is a fixed-height cross-origin frame; it can't size itself,
   so 700px is set to clear the full chrome for a 9:16 reel at this column width.
   Anything shorter slices through the comment row and leaves a sliver. */
.clip-grid iframe {
  display: block;
  width: 100%;
  height: 700px;
  border: 0;
  background: var(--white);
}


/* The default .link-row sits on dark sections; this variant works on pale. */
.link-row--light a { border-color: var(--rule); }
.link-row--light a:hover { border-color: var(--apricot); }
@media (max-width: 900px) {
  .clip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .clip-grid { grid-template-columns: 1fr; }
  .clip-grid iframe { height: 620px; }
}

}

/* ============================================================
   LEMONADE FUZZ
   Cover work is kept separate from the original-music brand, so the page runs
   warmer than the composition pages. LF has no defined visual identity yet, so
   it inherits this design system rather than inventing one.
   ============================================================ */

.project-hero--lf {
  background: var(--apricot);
  color: var(--black);
}
.project-hero--lf .project-hero__eyebrow { color: rgba(0, 0, 0, 0.62); }
.project-hero--lf .project-hero__role {
  color: rgba(0, 0, 0, 0.72);
  border-top-color: rgba(0, 0, 0, 0.22);
}


/* ============================================================
   MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}