/* ============================================================================
   STYLES.CSS  —  THE LAYOUT ENGINE
   ----------------------------------------------------------------------------
   You do NOT need to edit this file. Everything you'd normally want to change
   (fonts, colours, sizes, spacing) is in theme.css.

   This file just says WHERE things go. It reads its colours and sizes from
   theme.css, so changing theme.css changes this automatically.
   ============================================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--color-accent); color: #fff; }

.wrap {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-text); color: var(--color-background);
  padding: 12px 20px; z-index: 200;
}
.skip-link:focus { left: 12px; top: 12px; }


/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-nav-background);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--speed) ease;
}
.nav.is-stuck { border-bottom-color: transparent; }

.nav__inner {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 18px var(--page-padding);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px;
}

.nav__brand {
  font-family: var(--font-display);
  font-size: calc(var(--size-nav) + 1px);
  font-weight: 700;
  text-transform: var(--case-titles);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nav__links {
  display: flex; gap: 28px;
  font-size: var(--size-nav);
  font-weight: var(--weight-nav);
}
.nav__links a { position: relative; padding-bottom: 3px; color: var(--color-text-muted); transition: color var(--speed) ease; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--color-accent);
  transition: right var(--speed) ease;
}
.nav__links a:hover { color: var(--color-text); }
.nav__links a:hover::after { right: 0; }

@media (max-width: 560px) {
  .nav__inner { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
  .nav__links { gap: 18px; font-size: 12px; }
}


/* ============ HERO ============ */
.hero { padding-top: 96px; }

/* Headline on the left, the showreel on the right. The .has-side class is
   added by site.js only when heroImage is set in content.js. */
.hero__grid { display: grid; gap: 48px; align-items: start; }
/* Showreel on the LEFT, the writing on the RIGHT.
   To swap them back, change the order to  minmax(0, 1fr) var(--hero-image-width)
   and give .hero__reel  order: 2. */
.hero__grid.has-side {
  grid-template-columns: var(--hero-image-width) minmax(0, 1fr);
  gap: var(--hero-gap);
  align-items: start;           /* the writing starts level with the top of the thumbnail */
}
@media (max-width: 900px) {
  .hero__grid.has-side { grid-template-columns: 1fr; gap: 36px; align-items: start; }
}

.hero__eyebrow {
  margin: 0 0 34px;
  font-size: var(--size-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-hero-title);
  font-weight: var(--weight-hero-title);
  text-transform: var(--case-hero-title, var(--case-titles));
  letter-spacing: var(--tracking-hero-title);
  line-height: var(--leading-hero-title);
  white-space: pre-line;
  max-width: 15em;
}

/* THE HEADLINE, LINE BY LINE.
   Every line of the headline is its own block, so the gap ABOVE it can be
   nudged on its own instead of every gap having to be the same.

   Why you would want that: a line starting with tall letters (h, l, d, f, t)
   looks further from the line above it than one starting with short letters
   (r, u, n, a, m), even though the computer has spaced them identically.
   Designers correct this by eye. These dials are how you do it.

   The numbers are in theme.css under "THE HEADLINE, LINE BY LINE".
   The numbers are in em, a share of the letter height, so the spacing holds
   at every screen size. All zeros = one even gap everywhere. Minus pulls a
   line up, plus pushes it down. */
.hero__title .line { display: block; }
.hero__title .line:nth-child(2) { margin-top: var(--hero-line-gap-1, 0em); }
.hero__title .line:nth-child(3) { margin-top: var(--hero-line-gap-2, 0em); }
.hero__title .line:nth-child(4) { margin-top: var(--hero-line-gap-3, 0em); }
.hero__title .line:nth-child(5) { margin-top: var(--hero-line-gap-4, 0em); }
.hero__title .line:nth-child(6) { margin-top: var(--hero-line-gap-5, 0em); }

.hero__lede {
  margin: 34px 0 0;
  font-size: var(--size-hero-lede);
  line-height: 1.22;
  max-width: 34em;
  color: var(--color-text-muted);
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 72px;
  padding-top: 26px;
  border-top: 1px solid var(--color-line);
}
.hero__metaItem { display: flex; flex-direction: column; gap: 8px; }
.hero__metaLabel {
  font-size: var(--size-small); font-weight: 700; color: var(--color-text);
}
.hero__metaValue { font-size: var(--size-small); font-weight: 700; color: var(--color-text); }
.hero__metaLink { border-bottom: 1px solid var(--color-line); padding-bottom: 2px; transition: border-color var(--speed) ease, color var(--speed) ease; width: fit-content; }
.hero__metaLink:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

@media (max-width: 560px) {
  .hero { padding-top: 64px; }
  .hero__meta { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
}

.hero__image { margin: 0; }
.hero__image img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
}


/* ============ SECTIONS ============ */
.section { padding-top: var(--section-gap); scroll-margin-top: 90px; }

.sectionHead {
  display: flex; align-items: baseline; gap: 22px;
  padding-bottom: 26px; margin-bottom: 48px;
  border-bottom: 1px solid var(--color-line);
}
.sectionHead__num {
  font-size: 11px; letter-spacing: var(--tracking-label);
  color: var(--color-text-faint);
}
.sectionHead__title {
  margin: 0; flex: 1;
  font-family: var(--font-display);
  font-size: var(--size-section-title);
  font-weight: var(--weight-section-title);
  text-transform: var(--case-titles);
  letter-spacing: var(--tracking-section-title);
  line-height: var(--leading-heading);
}
.sectionHead__note {
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; font-weight: 700; color: var(--color-text);
}
@media (max-width: 560px) { .sectionHead__note { display: none; } }

.section__lede .line { display: block; }
.section__lede .line:first-child {
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: 9px;
}

.section__lede {
  margin: -20px 0 44px;
  /* Wide enough that the one-line section ledes stay on one line on a normal
     screen. They still turn over on a laptop or a phone, which is fine. */
  max-width: 52em;
  color: var(--color-text-muted);
}


/* ============ WORK GRID (VIDEOS) ============ */
.workGrid {
  display: grid;
  grid-template-columns: repeat(var(--work-columns), minmax(0, 1fr));
  gap: var(--grid-gap) var(--grid-gap);
}

.work { grid-column: span 1; }
.work--featured { grid-column: 1 / -1; }

.workCard {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
}

.workCard__media {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-placeholder);
  aspect-ratio: 16 / 9;
}
.work--featured .workCard__media { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .work--featured .workCard__media { aspect-ratio: 16 / 9; } }

.workCard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(.2,.8,.2,1), filter var(--speed) ease;
}
.workCard:hover .workCard__media img { transform: scale(1.04); }

.workCard__empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 20px;
  color: var(--color-text-muted);
  font-size: var(--size-small);
}
.workCard__empty strong { font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-faint); }

.workCard__play {
  position: absolute; left: 20px; bottom: 20px;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  transform: translateY(6px); opacity: 0;
  transition: opacity var(--speed) ease, transform var(--speed) ease;
}
.workCard:hover .workCard__play,
.workCard:focus-visible .workCard__play { opacity: 1; transform: translateY(0); }
.workCard__play::before {
  content: ""; margin-left: 4px;
  border-left: 13px solid #17150F;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.workCard__body { padding-top: 18px; }
.workCard__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-card-title);
  font-weight: var(--weight-card-title);
  text-transform: var(--case-titles);
  letter-spacing: var(--tracking-card-title);
  line-height: var(--leading-heading);
  transition: color var(--speed) ease;
}
.workCard:hover .workCard__title { color: var(--color-accent); }

.workCard__meta {
  margin: 10px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: var(--size-small);
  color: var(--color-text-muted);
}
.workCard__meta span:not(:last-child)::after {
  content: "/"; margin-left: 14px; color: var(--color-text-faint);
}
.workCard__award {
  display: inline-block; margin-top: 14px;
  font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid currentColor; border-radius: 999px;
  padding: 5px 12px;
}


/* ============ SOCIAL REELS ============ */

/* The showreel sits on its own row: big 9:16 thumbnail on the left, the
   writing beside it. Underneath, the eight reels run down staggered tracks. */

.reelsLayout { display: block; }

/* ---- the showreel, beside the headline ---- */

/* A tall thumbnail with the title and a play cue underneath. Clicking it
   opens the same pop-up player the reels below use. */
.hero__reel { margin: 0; }

.showreel__link {
  display: block; width: 100%;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}

.showreel__frame {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--reels-radius);
  background: var(--color-placeholder);
  aspect-ratio: var(--showreel-ratio, 3 / 4);
}
.showreel__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.showreel__link:hover .showreel__frame img { transform: scale(1.04); }

/* THE SILENT PREVIEW. A muted, looping clip that starts by itself so the
   top of the page moves. It ignores the mouse entirely — clicking anywhere
   on the frame opens the real thing with sound. */
.showreel__preview {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; border: 0;
  object-fit: cover; pointer-events: none;
  background: transparent;   /* if the player fails, the thumbnail shows through */
}
/* An embedded player cannot be cropped the way a picture can, so the frame
   holds a 9:16 player and hides what falls outside — the same centre crop a
   photograph would get. The 1.02 hides the player's hairline edges; raise it
   to 1.2 if you ever see a title bar creep in. */
.showreel__preview--embed {
  inset: auto; top: 50%; left: 50%;
  width: 100%; height: auto;
  aspect-ratio: var(--showreel-video-ratio, 9 / 16);
  transform: translate(-50%, -50%) scale(1.02);
}

.showreel__play {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--speed) ease, transform var(--speed) ease;
}
.showreel__link:hover .showreel__play,
.showreel__link:focus-visible .showreel__play { opacity: 1; transform: translateY(0); }
/* While the silent preview is running, keep the play button showing —
   otherwise people assume it is already playing and never click. */
.showreel__frame.has-preview .showreel__play { opacity: 0.82; transform: none; }
.showreel__link:hover .showreel__frame.has-preview .showreel__play { opacity: 1; }
.showreel__play::before {
  content: ""; margin-left: 4px;
  border-left: 13px solid #17150F;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.showreel__body {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 16px; margin-top: 14px;
}
.showreel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-card-title);
  font-weight: var(--weight-card-title);
  text-transform: var(--case-titles);
  letter-spacing: var(--tracking-card-title);
  line-height: var(--leading-heading);
}
.showreel__foot {
  margin: 0;
  font-family: var(--font-label);
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-text-faint);
}
.showreel__cta {
  display: inline-block; margin-top: 10px;
  font-family: var(--font-label);
  font-size: 12px; font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px;
}
.showreel__link:hover .showreel__cta { color: var(--color-accent); }

/* On a phone the showreel drops under the headline; keep it from filling
   the whole screen on its own. */
@media (max-width: 900px) {
  .hero__reel { max-width: 62%; }
}
@media (max-width: 560px) {
  .hero__reel { max-width: 100%; }
}

/* ---- the eight, in staggered tracks ---- */
.reelsTracks { display: flex; gap: var(--reels-track-gap); align-items: flex-start; }
.reelsTrack  { flex: 1 1 0; min-width: 0; }
.reelsTrack:nth-child(2) { margin-top: var(--reels-stagger); }
.reelsTrack:nth-child(3) { margin-top: calc(var(--reels-stagger) * 2); }
.reelsTrack:nth-child(4) { margin-top: calc(var(--reels-stagger) * 3); }

.reel {
  display: block; width: var(--reel-size-lg);
  margin: 0 0 var(--reels-item-gap);
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.reel--md { width: var(--reel-size-md); }
.reel--sm { width: var(--reel-size-sm); }
.reel--right { margin-left: auto; }

/* the little line ABOVE the thumbnail: 01  SEPHORA - BEAUTY PASS  SOCIAL */
.reel__label {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  margin: 0 0 10px;
  font-family: var(--font-label);
  font-size: 12px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-text);
}
.reel__name { font-weight: 700; }
.reel__tag { font-weight: 700; color: var(--color-text-faint); }

/* The shape of each thumbnail comes from that reel's own `ratio` line in
   content.js. Mixing tall and squarer tiles is what keeps the columns from
   leaving big gaps beside each other. 9:16 is the default. */
.reel__frame {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--reels-radius);
  background: var(--color-placeholder);
  aspect-ratio: var(--reel-ratio, 9 / 16);
}
.reel__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.reel:hover .reel__frame img { transform: scale(1.05); }

.reel__time {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  font-family: var(--font-label);
  font-size: 10px; letter-spacing: 0.06em;
  color: #fff; background: rgba(0,0,0,0.45);
  padding: 4px 7px; border-radius: 4px;
}

.reel__empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; text-align: center; padding: 16px;
  color: var(--color-text-muted); font-size: 12px; line-height: 1.45;
}
.reel__empty strong {
  font-family: var(--font-label);
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-text-faint);
}

.reel__play {
  position: absolute; left: 12px; bottom: 12px;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(5px);
  transition: opacity var(--speed) ease, transform var(--speed) ease;
}
.reel:hover .reel__play,
.reel:focus-visible .reel__play { opacity: 1; transform: translateY(0); }
.reel__play::before {
  content: ""; margin-left: 3px;
  border-left: 10px solid #17150F;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* the two or three sentences under the thumbnail */
.reel__copy {
  margin: 12px 0 0;
  font-size: calc(var(--size-body) * 0.85);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}
.reel--sm .reel__copy { font-size: calc(var(--size-body) * 0.82); }

/* the note that closes the last track */
.reelsMore {
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}
.reelsMore p {
  margin: 0 0 14px; max-width: 34ch;
  font-size: calc(var(--size-body) * 0.85);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}

/* On tablets the tracks drop to two, on phones to one. The reels also go
   full width there, because a 63%-wide thumbnail on a phone is too small. */
@media (max-width: 900px) {
  .reel, .reel--md, .reel--sm { width: 100%; }
}
@media (max-width: 560px) {
  .reelsTracks { display: block; }
  .reelsTrack { margin-top: 0 !important; }
}


/* ============ INTERIORS GALLERY ============ */
.gallery { columns: var(--gallery-columns); column-gap: var(--gallery-gap); }

.photo { break-inside: avoid; margin: 0 0 var(--gallery-gap); }

/* Each photo's shape comes from its own `ratio:` line in content.js, so the
   gallery holds its full height from the first paint. Without this the page
   grows as the pictures arrive and every anchor link lands in the wrong
   place. */
.photo__frame { display: block; aspect-ratio: var(--photo-ratio, auto); }

.photo__btn {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.photo__frame {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-placeholder);
}
.photo__frame img {
  width: 100%; height: auto;
  transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.photo:hover .photo__frame img { transform: scale(1.04); }

.photo__empty {
  aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 18px; text-align: center;
  color: var(--color-text-muted); font-size: var(--size-small);
}
.photo__empty strong { font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-faint); }

.photo__caption {
  margin: 12px 0 0;
  font-size: var(--size-small);
  color: var(--color-text-muted);
}


/* ============ ABOUT ============ */
.about { display: block; max-width: 66em; }
.about::after { content: ""; display: block; clear: both; }

.about__photo {
  float: left;
  width: var(--about-photo-width, 32%);
  margin: 5px var(--about-photo-gap, 34px) 22px 0;
}
.about__photo img { display: block; width: 100%; border-radius: var(--radius); }

/* On a phone there is no room to wrap text beside a picture, so the photo
   stops floating and sits full width above the paragraphs. */
@media (max-width: 700px) {
  .about__photo { float: none; width: 100%; margin: 0 0 26px; }
}

.about__text p { margin: 0 0 1.2em; }
.about__text p:last-child { margin-bottom: 0; }

.about__list {
  clear: left;
  margin: 34px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--color-line);
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 34px;
  list-style: none;
}
@media (max-width: 560px) { .about__list { grid-template-columns: 1fr; } }
.about__list dt {
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 6px;
}
.about__list dd { margin: 0; font-size: var(--size-small); }


/* ============ CONTACT ============ */
.contact__lede { margin: -20px 0 40px; max-width: 34em; color: var(--color-text-muted); }

.contact__email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--size-contact-email);
  font-weight: var(--weight-section-title);
  letter-spacing: var(--tracking-section-title);
  line-height: 1.15;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 8px;
  word-break: break-word;
  transition: color var(--speed) ease, border-color var(--speed) ease;
}
.contact__email:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.contact__links {
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  margin-top: 44px;
  font-size: var(--size-small);
}
.contact__links a {
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 3px;
  transition: color var(--speed) ease, border-color var(--speed) ease;
}
.contact__links a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }


/* ============ FOOTER ============ */
.footer {
  margin-top: var(--section-gap);
  background: var(--color-footer-background);
  color: var(--color-footer-text);
  padding: 44px 0;
}
.footer__inner {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: var(--size-small);
}

/* A jump link (#reels, #interiors...) would otherwise put the section's top
   edge underneath the sticky menu bar. This holds it clear. */
section[id], main[id] { scroll-margin-top: 96px; }
@media (max-width: 560px) { section[id], main[id] { scroll-margin-top: 74px; } }


/* ============ LIGHTBOX ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: var(--color-lightbox-backdrop);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px 72px;
  animation: lbIn 0.25s ease;
}
.lightbox[hidden] { display: none; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox__stage {
  width: 100%; max-width: 1400px; flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.lightbox__stage img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
}
.lightbox__frame {
  width: 100%; aspect-ratio: 16 / 9; max-height: 100%;
  background: #000;
}
/* A reel's player takes the same shape as its thumbnail, so a 4:5 or square
   video isn't letterboxed inside a tall box. Driven by HEIGHT, not width. */
.lightbox__frame--tall {
  aspect-ratio: var(--lb-ratio, 9 / 16);
  width: auto; height: 100%; max-width: 100%;
  border-radius: var(--reels-radius);
  overflow: hidden;
}
.lightbox__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.lightbox__caption {
  margin: 20px 0 0; color: rgba(255,255,255,0.72);
  font-size: var(--size-small); text-align: center;
}

.lightbox__close,
.lightbox__nav {
  position: absolute; background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.72); line-height: 1;
  transition: color var(--speed) ease;
}
.lightbox__close:hover, .lightbox__nav:hover { color: #fff; }
.lightbox__close { top: 18px; right: 24px; font-size: 40px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 56px; padding: 10px 16px; }
.lightbox__nav--prev { left: 8px; }
.lightbox__nav--next { right: 8px; }
.lightbox__nav[hidden] { display: none; }

@media (max-width: 560px) {
  .lightbox { padding: 60px 16px 40px; }
  .lightbox__nav { font-size: 38px; padding: 8px; }
}


/* ============ REVEAL ON SCROLL ============ */
/* The .reveal class is put on by reveal.js, never by the HTML, so if the
   JavaScript ever fails to run nothing ends up invisible. All four numbers
   below come from the "THE SCROLL FADE" block in theme.css. */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--reveal-speed) ease,
    transform var(--reveal-speed) cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .workCard__media img, .photo__frame img { transition: none; }
}

/* Printing shows everything, whatever the screen was doing. */
@media print {
  .reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; }
}


/* ============ STORIES: THE LIST ON THE HOMEPAGE ============ */
/* No rule of its own here. The line under the "Stories" heading is the only
   one this list needs — a second one 48px below it just reads as a gap.
   The heading keeps its normal breathing room, because the line of writing
   under it fills that space. */
.storyList { border-top: 0; }

.storyRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 30px;
  gap: 26px; align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-line);
  transition: background var(--speed) ease, padding-left var(--speed) ease;
}
.storyRow:hover { background: rgba(0,0,0,0.035); padding-left: 12px; }

.storyRow__label { margin: 0 0 7px; }
.storyRow__num,
.storyRow__label {
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-text-faint);
}
.storyRow__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--size-card-title);
  font-weight: var(--weight-card-title);
  text-transform: var(--case-titles);
  letter-spacing: var(--tracking-card-title);
  line-height: var(--leading-heading);
  transition: color var(--speed) ease;
}
.storyRow:hover .storyRow__title { color: var(--color-accent); }
.storyRow__blurb { margin: 0; font-size: var(--size-small); color: var(--color-text-muted); }
.storyRow__go { justify-self: end; font-size: 18px; color: var(--color-text-faint); transition: color var(--speed) ease, transform var(--speed) ease; }
.storyRow:hover .storyRow__go { color: var(--color-accent); transform: translateX(4px); }

@media (max-width: 900px) {
  .storyRow { grid-template-columns: minmax(0, 1fr) 24px; gap: 14px; }
  .storyRow__blurb { grid-column: 1 / -1; margin-top: 8px; }
  .storyRow__label { display: none; }
}


/* ============ STORIES: THE PAGE ITSELF ============ */
.story { padding-bottom: 40px; }

.storyHead { padding-top: 72px; }

.story__back {
  display: inline-block; margin-bottom: 40px;
  font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-line); padding-bottom: 3px;
  transition: color var(--speed) ease, border-color var(--speed) ease;
}
.story__back:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.storyHead__label {
  margin: 0 0 18px;
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-text-faint);
}
.storyHead__title {
  margin: 0; max-width: 17em;
  font-family: var(--font-display);
  font-size: var(--size-hero-title);
  font-weight: var(--weight-hero-title);
  text-transform: var(--case-titles);
  letter-spacing: var(--tracking-hero-title);
  line-height: var(--leading-hero-title);
}
.storyHead__standfirst {
  margin: 28px 0 0; max-width: 40em;
  font-size: var(--size-hero-lede); line-height: 1.24;
}
.storyHead__meta {
  display: flex; flex-wrap: wrap; gap: 22px 52px;
  margin: 44px 0 0; padding-top: 22px;
  border-top: 1px solid var(--color-line);
}
.storyHead__meta dt {
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 6px;
}
.storyHead__meta dd { margin: 0; font-size: var(--size-small); font-weight: 700; }

/* The big picture at the top of a story shows its own shape, at the same
   width as the pictures inside the story, lined up on the left with the
   writing. It used to be stretched full width and cropped to a wide band,
   which turned a portrait photograph into a landscape one. */
.story__hero { margin: 56px 0 0; }
.story__hero .story__img {
  display: block;
  width: min(100%, 62ch);
  height: auto; max-height: none;
  object-fit: contain;
}

.storyBody { max-width: 62ch; padding-top: 56px; }

.story__h {
  margin: 52px 0 16px;
  font-family: var(--font-display);
  font-size: calc(var(--size-card-title) - 2px);
  font-weight: 700;
  text-transform: var(--case-titles);
  letter-spacing: var(--tracking-card-title);
  line-height: var(--leading-heading);
}
.storyBody > *:first-child { margin-top: 0; }

.story__p { margin: 0 0 1.1em; }

.story__list { margin: 0 0 1.4em; padding-left: 20px; }
.story__list li { margin-bottom: 0.55em; }

.story__quote {
  margin: 46px 0; padding: 26px 0 0;
  border-top: 2px solid var(--color-text);
}
.story__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--size-card-title) + 2px);
  font-weight: 700;
  letter-spacing: var(--tracking-card-title);
  line-height: 1.08;
}
.story__quote cite {
  display: block; margin-top: 12px; font-style: normal;
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-text-faint);
}

/* A STATS BLOCK READS DOWN THE PAGE, ONE ROW PER ENTRY.
   It used to be a grid of boxes across the page. With five entries and room
   for four, the fifth dropped onto a second row and left a large empty
   block beside it. A list cannot do that: any number of entries looks
   deliberate, and it reads like the timeline it is. */
.story__stats {
  display: block;
  margin: 36px 0 40px;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.stat {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: 20px; align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid var(--color-line);
}
.stat:first-child { border-top: 0; }
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700;
  letter-spacing: var(--tracking-card-title); line-height: 1.15;
}
.stat__label {
  display: block; margin-top: 0;
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-text-faint);
}

/* Pictures break out wider than the text column */
.story__figure { margin: 46px 0; width: min(100%, 62ch); }
.story__figure--duo { width: 100%; max-width: none; }
/* --img-ratio comes from that picture's own `ratio:` line in stories.js.
   Setting it reserves the space before the file arrives, so the page does
   not jump while you are reading. Without one, nothing is reserved. */
.story__img {
  width: 100%; height: auto;
  aspect-ratio: var(--img-ratio, auto);
  object-fit: cover;
  border-radius: var(--radius); cursor: zoom-in;
}
.story__duo  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gallery-gap); }
.story__trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gallery-gap); }
@media (max-width: 900px) { .story__trio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .story__duo, .story__trio { grid-template-columns: 1fr; }
}

/* ---- a clickable video inside a story ---- */
.storyVideo { margin: 40px 0; }
.storyVideo__btn {
  display: block; width: min(320px, 62%);
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.storyVideo__frame {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: var(--img-ratio, 9 / 16);
  background: var(--color-placeholder);
  border-radius: var(--reels-radius);
}
.storyVideo__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.storyVideo__btn:hover .storyVideo__frame img { transform: scale(1.05); }
.storyVideo__empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px;
  font-size: var(--size-small); color: var(--color-text-muted);
}
.storyVideo__play {
  position: absolute; left: 12px; bottom: 12px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.93);
  display: flex; align-items: center; justify-content: center;
  opacity: 0.85; transition: opacity var(--speed) ease;
}
.storyVideo__btn:hover .storyVideo__play { opacity: 1; }

/* The likes and views row that sits under a story video. Same width as the
   thumbnail above it, and deliberately smaller than the big .stat blocks
   used elsewhere, so it reads as a caption rather than a headline. */
.storyVideo__stats {
  width: min(320px, 62%);
  display: flex; flex-wrap: wrap; column-gap: 22px; row-gap: 9px;
  margin-top: 11px; padding-top: 9px;
  border-top: 1px solid var(--color-line);
}
/* The role credit is words rather than a number, so it is set a shade
   smaller and allowed to take its own line when it will not fit beside
   the figures. */
.storyVideo__stat:last-child .storyVideo__statValue { font-size: 14px; }
.storyVideo__statValue {
  display: block;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  letter-spacing: var(--tracking-card-title); line-height: 1.1;
}
.storyVideo__statLabel {
  display: block; margin-top: 2px;
  font-size: 10px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-text-faint);
}
.storyVideo__play::before {
  content: ""; margin-left: 3px;
  border-left: 12px solid #17150F;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.storyVideo__title {
  display: block; margin-top: 12px;
  font-family: var(--font-display);
  font-size: var(--size-card-title);
  font-weight: var(--weight-card-title);
  text-transform: var(--case-titles);
  letter-spacing: var(--tracking-card-title);
  line-height: var(--leading-heading);
}
.storyVideo__caption {
  display: block; margin-top: 7px;
  font-size: var(--size-small); color: var(--color-text-muted);
  max-width: 44ch;
}
@media (max-width: 700px) { .storyVideo__btn { width: 100%; } }
.story__figure figcaption {
  margin-top: 12px; font-size: var(--size-small); color: var(--color-text-muted);
}
.story__imgMissing {
  padding: 26px; text-align: center;
  background: var(--color-placeholder); border-radius: var(--radius);
  font-size: var(--size-small); color: var(--color-text-muted);
}

.storyNext {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px;
  margin-top: 72px; padding-top: 24px;
  border-top: 2px solid var(--color-text);
}
.storyNext__label {
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-text-faint);
}
.storyNext__link {
  font-family: var(--font-display);
  font-size: var(--size-card-title); font-weight: 700;
  text-transform: var(--case-titles);
  letter-spacing: var(--tracking-card-title); line-height: var(--leading-heading);
  transition: color var(--speed) ease;
}
.storyNext__link:hover { color: var(--color-accent); }

.story__missing { padding: 120px 0 80px; }
.story__missing h1 {
  font-family: var(--font-display); font-weight: 700;
  text-transform: var(--case-titles); letter-spacing: var(--tracking-section-title);
  font-size: var(--size-section-title); margin: 0 0 20px;
}

/* A small link that sits under a homepage section, pointing into a story */
/* The link at the foot of a section. Deliberately loud — these are the
   doors into the longer stories, and a whisper gets no clicks.
   To dial it back: drop the font-size, or set font-weight to 400. */
.sectionMore {
  display: inline-block; margin-top: 38px;
  font-family: var(--font-display);
  font-size: calc(var(--size-card-title) * 0.78);
  font-weight: var(--weight-card-title);
  letter-spacing: var(--tracking-card-title);
  text-transform: var(--case-titles);
  color: var(--color-text);
  border-bottom: 2px solid var(--color-text); padding-bottom: 5px;
  transition: color var(--speed) ease, border-color var(--speed) ease;
}
.sectionMore:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }