:root {
  --page-top: 64px; /* space between the tabs and the top of every project page */
  --ink: #000;
  --paper: #f4ecd0; /* warm cream, same as the furniture lookbook */
  --yellow: #ffd112; /* matches the name logo */
  --line: 1.5px solid var(--ink);
  --row-h: 285px;   /* height of each project row */
  --side: 300px;    /* width of the text column */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --text: "Bricolage Grotesque", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Header ---------- */
.site-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* name column hugs the name */
  border-bottom: var(--line);
}

.brand {
  display: flex;
  align-items: flex-end;
  padding: 12px 16px;
  min-width: 0;
}

.name { min-width: 0; }

/* The name image has empty space on its right (the lettering ends at
   1872 of 2000px), so the link box is cut to the lettering's width. */
.name a {
  display: block;
  height: clamp(56px, 7vw, 130px);
  aspect-ratio: 1872 / 431;
  overflow: hidden;
}

.name img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

/* Hovering the logo swaps its colours, the same quick fill as the
   Email/Instagram/LinkedIn links: the box turns yellow and the yellow
   lettering turns the cream of the page. A cream copy of the logo
   (assets/name-cream.png) sits behind the yellow one and shows through
   when the yellow one fades out. The whole box is the link. */
.brand { position: relative; transition: background .15s; }
.name a { background: url("assets/name-cream.png") left top / auto 100% no-repeat; }
.name a::after { content: ""; position: absolute; inset: 0; }
.name img { transition: opacity .15s; }
.brand:hover { background: var(--yellow); }
.brand:hover .name img { opacity: 0; }

/* Round photo sticker pinned to the bottom-right of the screen.
   The ring of text spins (animations.js) and links to the bio page. */
.bio-sticker {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: var(--yellow);
  border: var(--line);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.bio-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bio-ring text {
  font-family: var(--display);
  font-weight: 400;
  font-size: 10.5px;
  text-transform: uppercase;
  fill: var(--ink);
}

.bio-face {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: var(--line);
  background: var(--paper);
}

/* Zoomed in and shifted so the face sits in the middle of the circle
   (the face is left of centre and in the upper third of the photo) */
.bio-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: translate(10.5%, 15%) scale(1.5);
  transition: transform .4s;
}
.bio-sticker:hover .bio-face img { transform: translate(11.6%, 16.5%) scale(1.65); }

/* Keep the footer's right-hand link clear of the sticker */
body:has(.bio-sticker) .site-footer { padding-right: 184px; }

.contact {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border-left: var(--line);
}

.contact a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 18px);
  border-bottom: var(--line);
  transition: background .15s, color .15s;
}
.contact a:last-child { border-bottom: 0; }
.contact a:hover { background: var(--yellow); color: var(--ink); }
.contact-icon { display: none; width: 22px; height: 22px; } /* icons only on phones */

/* ---------- Category filters ---------- */
.filters {
  display: flex;
  border-bottom: var(--line);
}

.filters button {
  flex: 1 1 0;
  min-width: max-content;
  background: none;
  border: 0;
  border-right: var(--line);
  padding: 6px 14px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(12px, .9vw, 15px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.filters button:last-child { border-right: 0; }
.filters button:hover { background: rgba(0, 0, 0, .06); }
.filters button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }

/* ---------- Project rows ---------- */
.project {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  height: var(--row-h);
  border-bottom: var(--line);
}
.project[hidden] { display: none; }

/* Intro at the top of a category tab (INTROS in projects.js): one
   full-width band that sits above the grid rather than inside it */
.cat-intro {
  border-bottom: var(--line);
  padding: clamp(36px, 5vw, 72px) 12px clamp(32px, 4vw, 60px);
}
.cat-intro[hidden] { display: none; }
.cat-intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 4vw;
  align-items: end; /* the detail lines up with the bottom of the statement */
}
.cat-intro-label {
  display: inline-block;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  padding: 6px 14px; border: 1px solid var(--ink); border-radius: 999px;
  margin-bottom: 20px;
}
.cat-intro-lede {
  font-size: clamp(22px, 2.2vw, 34px); line-height: 1.18;
  font-weight: 600; letter-spacing: -.025em;
  max-width: 30ch; margin: 0;
}
.cat-intro-text { font-size: 15px; line-height: 1.6; max-width: 60ch; margin: 0; opacity: .8; }
.cat-intro-clients {
  display: flex; flex-wrap: wrap; gap: 4px 0;
  margin-top: 24px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.cat-intro-clients span { white-space: nowrap; }
.cat-intro-clients span:not(:last-child)::after { content: "•"; color: var(--yellow); margin: 0 9px; }
@media (max-width: 700px) {
  .cat-intro { padding: 32px 16px 30px; }
  .cat-intro-inner { grid-template-columns: 1fr; gap: 18px; }
  .cat-intro-text { font-size: 14px; }
}


.info {
  display: flex;
  flex-direction: column;
  padding: 14px 12px 12px;
  border-right: var(--line);
  min-width: 0;
}

.info h2 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 10px;
}

.info p {
  font-size: 15px;
  line-height: 1.45;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  list-style: none;
}

.tags li {
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
}

/* Horizontal image strip. Its height is set outright (not a percentage of
   the row), so every browser sizes the photos to fit inside the row. */
.media { position: relative; min-width: 0; height: calc(var(--row-h) - 1.5px); } /* leaves room for the row's bottom line, so the photos never cover it */

.strip {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
}
.strip::-webkit-scrollbar { display: none; }
.strip.dragging { cursor: grabbing; scroll-snap-type: none; }

.tile {
  flex: none;
  height: 100%;
  scroll-snap-align: start;
  overflow: hidden;
}

/* Photos take the row's height and their own natural width, so each one
   fits the box at its true shape, never cropped or overflowing */
.tile img, .tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.placeholder {
  display: flex;
  align-items: flex-end;
  padding: 10px;
  font-family: var(--display);
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
}

.arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
}
.arrow.prev { left: 10px; }
.arrow.next { right: 10px; }

.arrow[disabled] { opacity: 0 !important; pointer-events: none; }

/* Home page links into project pages */
.info h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.tile { display: block; }
.tile img, .tile video { transition: opacity .2s; }
/* (No hover dimming on strip images: changing their opacity made Safari
   redraw the animated GIFs, which flashed the background through) */
.strip a { -webkit-user-drag: none; }

/* ---------- Project page ---------- */
.detail {
  display: grid;
  grid-template-columns: minmax(320px, 30%) minmax(0, 1fr);
  border-bottom: var(--line);
}

.detail-info {
  position: sticky;
  top: var(--tabs-h, 0px); /* just below the pinned category tabs */
  align-self: start;
  max-height: calc(100vh - var(--tabs-h, 0px));
  overflow-y: auto;
  padding: var(--page-top) 16px 24px;
}

.back {
  display: inline-block;
  font-family: var(--display);
  font-weight: 300;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.back:hover { text-decoration: underline; }

.detail-info h1 {
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-bottom: 14px;
}
.detail-info h1 img { max-height: 60px; max-width: 100%; }

.lede { font-size: 20px; line-height: 1.4; margin-bottom: 24px; }

.meta {
  display: grid;
  grid-template-columns: 110px 1fr;
  border-top: var(--line);
  margin-bottom: 24px;
}
.meta dt, .meta dd { padding: 8px 0; border-bottom: 1px solid #ccc; font-size: 15px; }
/* Client / brand names linking to their websites */
.meta-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.meta-link:hover { text-decoration-thickness: 2px; }
.meta dt {
  font-family: var(--display);
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  padding-top: 11px;
}

.overview p { font-size: 16px; line-height: 1.6; margin-bottom: 1em; }

/* Two-column gallery: portrait images sit side by side, landscape ones
   ("wide", set in project-page.js) span both columns. Each figure is also
   capped at its photo's real width so nothing gets stretched and blurry. */
.detail-gallery {
  border-left: var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 24px;
  padding: var(--page-top) 24px 24px; /* first image level with the case-study pages */
  align-content: start;
  align-items: start;
}
.detail-gallery figure { width: 100%; justify-self: center; scroll-margin-top: 24px; }
.detail-gallery figure.wide { grid-column: 1 / -1; }
/* Two-across photos stacked in columns (project-page.js), no gaps */
.gallery-stack { grid-column: 1 / -1; columns: 2; column-gap: 24px; }
.gallery-stack figure { break-inside: avoid; margin-bottom: 24px; max-width: none !important; }
@media (max-width: 700px) { .gallery-stack { columns: 1; } }
.frame { width: 100%; overflow: hidden; }
.frame img, .frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The Givenchy video has a 1px black column on its right edge: enlarge it a
   hair from the left so that column falls outside the frame (the frame
   clips anything outside it) */
.frame video[src*="givenchy-campaign"] { transform: scale(1.008); transform-origin: left center; }
/* Dior Men and ABT have a 1px black column on both edges: enlarge from the centre */
.frame video:is([src*="dior/dior-campaign"], [src*="abt-campaign"], [src*="moschino-concert"]) { transform: scale(1.008); }
.frame.placeholder { font-size: 13px; padding: 14px; }
.detail-gallery figcaption {
  padding-top: 8px;
  font-family: var(--display);
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
}

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: var(--line); /* a black line above Previous / Next on every project page */
  border-bottom: var(--line);
}
.detail + .pager { border-top: 0; } /* those pages already end in a line */
.tab-pager[hidden] { display: none; } /* only on the category tabs, not the All view */
.pager[hidden] { display: none; } /* the tab footer, when a tab has none */
.tab-pager { border-top: 0; } /* the tabs it follows already end in a line */
.pager a {
  padding: 18px 16px;
  font-size: clamp(20px, 2.2vw, 34px);
  font-weight: 600;
  letter-spacing: -.02em;
  transition: background .15s, color .15s;
}
.pager a + a { border-left: var(--line); text-align: left; } /* left, so the bio sticker in the corner never covers it */
.pager a:hover { background: rgba(0, 0, 0, .06); } /* the same light grey as the tabs at the top */
.pager span {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.not-found { padding: 60px 16px; font-size: 22px; }
.not-found .back { margin-top: 16px; }

/* ---------- Bio page ---------- */
/* Cream page like the rest of the site, with pops of yellow: the name
   logo, the highlighter strokes, the facts labels and the button */
.page-bio { background: var(--paper); }
.page-bio .contact a:hover { background: var(--yellow); color: var(--ink); }
.page-bio .bio-facts { border-top: 4px solid var(--yellow); }
.page-bio .bio-facts dt { color: var(--ink); }
.page-bio .bio-facts dt::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--yellow);
  border: 1px solid var(--ink);
  vertical-align: 1px;
}
.page-bio .back:hover { background: var(--yellow); text-decoration: none; }
.page-bio .bio-cta { background: var(--yellow); color: var(--ink); }
.page-bio .bio-cta:hover { background: var(--ink); color: var(--yellow); }

/* Words of the bio headline, split up by animations.js */
.bio-lede .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .14em;  /* room for letters like g and y */
  margin-bottom: -.14em;
}
.bio-lede .word-in { display: inline-block; }

/* Stand-in lines that draw the bio page's borders in (animations.js) */
.line-draw {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  transform-origin: 0 0;
}

/* Little greetings that burst out when the bio photo is hovered */
.pop {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  font-family: var(--display);
  font-size: 15px;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--paper);
  border: var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}

/* Until animations.js is ready, show only the page background */
html.is-loading body > * { visibility: hidden; }

/* Full-screen circle used for the page transition (animations.js) */
.page-wipe {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper); /* cream, same as the site background */
  pointer-events: none;
}
.page-wipe.to-home { background: var(--paper); }

.bio {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  border-bottom: var(--line);
}

/* The photo fills its whole panel, edge to edge */
.bio {
  min-height: 80vh;
}

.bio-portrait {
  position: relative;
  overflow: hidden;
  border-right: var(--line);
}

.bio-portrait img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 22%; /* keeps the face in view when cropped */
}

.bio-text {
  padding: 14px 24px 48px;
  max-width: 720px;
}

.bio-lede {
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: 28px;
}

/* Highlighter stroke; animations.js draws it in from 0% width */
.bio-lede mark {
  background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 100% / 100% 42%;
  color: inherit;
}

.bio-text > p:not(.bio-lede) {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 1em;
}

.bio-facts {
  display: grid;
  grid-template-columns: 140px 1fr;
  border-top: var(--line);
  margin: 32px 0;
}
.bio-facts dt, .bio-facts dd { padding: 10px 0; border-bottom: 1px solid #ccc; font-size: 15px; }
.bio-facts dt {
  font-family: var(--display);
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  padding-top: 13px;
}

.bio-cta {
  display: inline-block;
  background: var(--yellow);
  border: var(--line);
  padding: 12px 18px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  transition: background .15s, color .15s;
}
.bio-cta:hover { background: var(--ink); color: var(--yellow); }
.bio-cta span { display: inline-block; }

/* ---------- Lookbook (category tabs listed in LOOKBOOK) ---------- */
/* Modelled on the furniture PDF: warm cream pages, big heavy ZVA numbers,
   a collage of photos per chapter, and families of pieces shown together. */
.lookbook {
  --cream: #f4ecd0;
  --mute: #7d7461;
  --rule: rgba(28, 26, 23, .16);
  --heavy: "Archivo Black", "Bricolage Grotesque", sans-serif;
  background: var(--cream);
  color: #141210;
  border-bottom: var(--line);
}
.lookbook[hidden], #projects[hidden] { display: none; }

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 0;
}
.chapter:last-child { border-bottom: 0; }
.chapter:nth-child(odd) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.chapter:nth-child(odd) .collage { order: 2; }

/* Photo collage: one large photo with smaller views around it */
.collage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
  height: min(92vh, 900px);
  padding: 24px;
}
.collage a { position: relative; overflow: hidden; background: #e6dcc0; }
.collage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.collage a:hover img { transform: scale(1.04); }
.collage.n5 a:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.collage.n5 a:nth-child(4) { grid-area: 3 / 1 / 4 / 2; }
.collage.n5 a:nth-child(5) { grid-area: 3 / 2 / 4 / 4; }
.collage.n4 a:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.collage.n4 a:nth-child(4) { grid-area: 3 / 1 / 4 / 4; }
/* Three photos: one large on the left, two stacked evenly on the right */
.collage.n3 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.collage.n3 a:nth-child(1) { grid-area: 1 / 1 / 3 / 3; }
.collage.n3 a:nth-child(2) { grid-area: 1 / 3 / 2 / 4; }
.collage.n3 a:nth-child(3) { grid-area: 2 / 3 / 3 / 4; }
.collage.n2 { grid-template-rows: 1fr; }
.collage.n2 a:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
.collage.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
/* A chapter with a single photo shows it at its own shape, full height,
   so nothing is cropped (e.g. the tall ZVA10 Room Divider) */
.collage.n1 { justify-items: start; }
.collage.n1 a { height: 100%; max-width: 100%; }

.chapter-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 8vh 4vw;
}
.chapter-codes {
  font-family: var(--heavy);
  font-weight: 400;
  font-size: clamp(56px, 6.4vw, 108px);
  line-height: .9;
  letter-spacing: -.01em;
}
.chapter-pieces { list-style: none; border-top: 1px solid var(--rule); }
.chapter-pieces li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.chapter-pieces a { font-weight: 700; font-size: 17px; }
.chapter-pieces a:hover { text-decoration: underline; }
.chapter-pieces span { font-size: 13px; color: var(--mute); }
.chapter-material { font-family: var(--heavy); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.chapter-desc { font-size: 15px; line-height: 1.7; color: #3d382f; max-width: 44ch; }
.chapter-links { display: flex; flex-wrap: wrap; gap: 18px; }
/* "View the piece" links as yellow pill buttons */
.chapter .more {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--yellow);
  transition: background .15s, color .15s;
}
.chapter .more:hover { background: #141210; color: var(--yellow); }

/* Process collage at the bottom of the lookbook: every workshop photo at
   its own shape, packed into columns like a pinboard */
.lb-process { padding: 72px 4vw 96px; border-top: 1px solid var(--rule); }
.lb-process h2 {
  font-family: var(--heavy);
  font-weight: 400;
  font-size: clamp(56px, 7vw, 120px);
  line-height: .9;
  margin-bottom: 14px;
}
.lb-process > p { font-size: 15px; color: #3d382f; max-width: 52ch; margin-bottom: 40px; }
.process-collage { columns: 5 180px; column-gap: 12px; } /* smaller photos, less scrolling */
.process-collage figure { break-inside: avoid; margin: 0 0 12px; position: relative; overflow: hidden; }
.process-collage img { display: block; width: 100%; height: auto; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.process-collage figure:hover img { transform: scale(1.04); }
.process-collage figcaption {
  position: absolute; left: 8px; bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--yellow);
  font: 700 11px var(--text);
  letter-spacing: .06em;
}

@media (max-width: 900px) {
  .chapter, .chapter:nth-child(odd) { grid-template-columns: 1fr; }
  .chapter:nth-child(odd) .collage { order: 0; }
  .collage { height: 110vw; padding: 12px; gap: 6px; }
  .chapter-text { padding: 24px 16px 48px; }
}

/* Logos used in place of a title (`logo` in projects.js) */
.info h2 .row-logo { display: block; height: auto; width: 100%; max-width: 220px; }
/* Client logos in place of a row's title: all sit in the same short box,
   left-aligned, so wide wordmarks and taller marks read at a similar size */
.info h2 .brand-logo { width: 150px; max-width: 100%; height: auto; object-fit: contain; object-position: left center; } /* every client logo in a row is the same width */
/* Each logo's height is tuned by eye so they carry a similar visual weight */

/* The same client logos as a project page's heading, about twice the row
   size, with the same by-eye balance between them */
.detail-info h1.brand-heading { line-height: 0; margin-bottom: 22px; }
.detail-info h1 img.brand-logo { width: auto; max-width: min(100%, 300px); height: 56px; object-fit: contain; object-position: left center; }
.detail-info h1 img.brand-logo[src*="dior"] { height: 46px; }
.detail-info h1 img.brand-logo[src*="moschino"] { height: 54px; }
.detail-info h1 img.brand-logo[src*="zara"] { height: 54px; }
.detail-info h1 img.brand-logo[src*="adidas"] { height: 80px; }
.detail-info h1 img.brand-logo[src*="american-ballet"] { height: 92px; }
.detail-info h1 img.brand-logo[src*="givenchy"] { height: 30px; max-width: min(100%, 320px); }
.detail-info h1 img.brand-logo[src*="versace"] { height: 96px; }
.detail-info h1 img.brand-logo[src*="prime-video"] { height: 72px; }
.detail-info h1 img.brand-logo[src*="british-vogue"] { height: 60px; }
.detail-info h1 img.brand-logo[src*="loewe"] { height: 44px; }
.detail-info h1 img.brand-logo[src*="town-and-country"] { width: 100%; height: auto; max-width: 320px; } /* same width as the People App logo */
/* A brand logo as the title of a case study (e.g. Parents) */
.cs-hero h1.brand-heading { line-height: 0; margin: 28px 0 30px; }
.cs-hero h1 img.brand-logo { display: block; width: auto; max-width: 100%; height: clamp(56px, 6vw, 96px); }
.cs-hero h1 img.brand-logo[src*="kalyana"] { width: 100%; max-width: 420px; height: auto; } /* same width as the details table below it */
.wall-intro h2 .wall-logo { display: block; width: 100%; max-width: 320px; height: auto; }
.detail-info h1 img { max-height: none; width: 100%; max-width: 280px; height: auto; }
@media (max-width: 700px) {
  .info h2 .row-logo { max-width: 180px; }
}

/* ---------- Case study project pages (`caseStudy` in projects.js) ---------- */
/* Full-width sections on the project's own background colour (`theme`). */
.cs {
  background: var(--cs-bg);
  color: var(--cs-ink);
  --cs-serif: "Cormorant Garamond", Georgia, serif;
  --cs-rule: color-mix(in srgb, var(--cs-ink) 18%, transparent);
}
.cs section { padding: 96px 6vw; border-bottom: 1px solid var(--cs-rule); }
.cs section:last-child { border-bottom: 0; }
.cs h1, .cs h2 { font-family: var(--cs-serif); font-weight: 300; letter-spacing: 0; }
.cs .cs-label {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cs-ink) 55%, transparent);
}
.cs-img { margin: 0; }
.cs-img img { display: block; width: 100%; height: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .08); }
.cs-img img[src$=".png"] { box-shadow: none; } /* transparent artwork sits straight on the page, no box */

.cs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6vw;
  align-items: start;
  /* Same top spacing as every other project page (see .detail-info) */
  padding-top: var(--page-top) !important;
}
.cs-hero h1 { font-size: clamp(64px, 8vw, 140px); line-height: .9; margin: 28px 0 24px; }
.cs-hero .lede { font-size: 19px; line-height: 1.6; max-width: 34ch; margin-bottom: 32px; }
.cs-hero .meta { border-top-color: var(--cs-rule); max-width: 420px; }
.cs-hero .meta dt, .cs-hero .meta dd { border-bottom-color: var(--cs-rule); }
.cs-hero .cs-img { max-width: 560px; justify-self: center; width: 100%; }

.cs-text { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4vw; }
.cs-text h2 { font-size: clamp(36px, 3.6vw, 60px); line-height: 1.05; margin-bottom: 28px; max-width: 18ch; }
.cs-text p:not(.cs-label) { font-size: 17px; line-height: 1.75; max-width: 60ch; margin-bottom: 1em; }

.cs-head { max-width: 640px; margin-bottom: 48px; }
.cs-head h2 { font-size: clamp(32px, 3vw, 48px); line-height: 1.05; margin: 10px 0 14px; }
.cs-head p:not(.cs-label) { font-size: 16px; line-height: 1.7; }
.cs-row { display: grid; gap: 3vw; }
.cs-images.two .cs-row { grid-template-columns: 1fr 1fr; }
.cs-images.one .cs-row { max-width: 760px; margin: 0 auto; }
.cs-images.three .cs-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2vw; }
.cs-grid-row { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 1.4vw; }
.cs-grid .cs-img img { box-shadow: none; }
.cs-grid-row + .cs-grid-row { margin-top: 1.4vw; } /* stacked groups in one section */
/* split: groups side by side (e.g. Kalyana: wordmarks, k icons, construction).
   The k icons' square tiles set the height; the other groups stretch to match */
.cs-split { display: grid; grid-template-columns: repeat(var(--split, 2), minmax(0, 1fr)); gap: 1.4vw; }
.cs-split .cs-grid-row + .cs-grid-row { margin-top: 0; }
.cs-split .cs-grid-row { grid-auto-rows: 1fr; }
.cs-split .cs-img:not(.cs-tile) { display: flex; align-items: center; } /* artwork centred in its row */
.cs-split .cs-tile:not(.tall) { aspect-ratio: auto; }
.cs-split .cs-tile.tall { aspect-ratio: 1; }
.cs-grid .cs-split .cs-tile.tall img { width: 34%; }
.cs-grid .cs-tile.drawing { aspect-ratio: 3 / 4; position: relative; padding: 0; } /* same shape as the PDF draft pages */
.cs-grid .cs-split .cs-tile.drawing { aspect-ratio: 1; position: relative; padding: 0; }
.cs-grid .cs-tile.drawing img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.cs-below { margin-top: 1.4vw; }
.cs-grid .cs-below .cs-tile.drawing { aspect-ratio: 1; } /* the row under a split section: square tiles */
/* Logo tiles: a transparent logo centred on a block of brand colour */
.cs-tile { aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 0 12%; border: 1px solid var(--cs-rule); }
.cs-tile img, .cs-grid .cs-tile img { width: 100%; height: auto; box-shadow: none; }
.cs-tile.tall { aspect-ratio: 4 / 5; padding: 0; }
.cs-tile.tall img, .cs-grid .cs-tile.tall img { width: 44%; height: auto; }

.cs-stats { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4vw; padding-top: 64px !important; padding-bottom: 64px !important; }
.cs-stats dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 3vw; margin: 0; }
.cs-stats dt {
  font-family: var(--cs-serif); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(64px, 7vw, 120px); line-height: 1; color: var(--cs-accent);
}
/* Slot-machine reels for the numbers (animations.js) */
.cs-stats dt { white-space: nowrap; }
.reel { position: relative; display: inline-block; height: 1em; line-height: 1; vertical-align: top; clip-path: inset(0 -40%); }
.reel-size { visibility: hidden; }
.reel-strip { position: absolute; left: 50%; top: 0; translate: -50% 0; display: flex; flex-direction: column; align-items: center; }
.reel-strip span { display: block; height: 1em; line-height: 1; }
.reel-static { display: inline-block; height: 1em; line-height: 1; vertical-align: top; }
.cs-stats dd { margin: 14px 0 0; font-size: 16px; line-height: 1.5; max-width: 24ch; }
/* Stats beside a regular project's details (e.g. Town & Country) */
.detail-stats { display: block; padding: 0 !important; margin: 0 0 24px; }
.detail-stats dl { display: flex; flex-wrap: wrap; gap: 20px 32px; }
.detail-stats dt { font-family: inherit; font-weight: 600; font-size: clamp(26px, 2.5vw, 40px); letter-spacing: -.03em; color: inherit; } /* same size as the People App numbers */
.detail-stats dd { margin-top: 6px; font-size: 12px; line-height: 1.35; }
/* People App: three smaller numbers side by side in its narrow side panel */
.wall-intro .detail-stats dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wall-intro .detail-stats dt { font-size: clamp(26px, 2.5vw, 40px); }
.wall-intro .detail-stats dd { font-size: 12px; line-height: 1.35; margin-top: 6px; }

/* Bold sans headings for brands that aren't quiet and serif (theme.font: "sans") */
.cs-sans { --cs-serif: var(--display); }
.cs-sans h1, .cs-sans h2 { font-weight: 700; letter-spacing: -.02em; }
.cs-sans .cs-hero h1 { font-size: clamp(56px, 6.4vw, 112px); }
.cs-sans .cs-swatch strong { font-weight: 600; font-size: 20px; }
.cs-sans .cs-hero .cs-img { max-width: 680px; }
.cs-hero .cs-img:has(img[src*="k-construction"]) { max-width: 500px; } /* Kalyana: the k drawing a little smaller */
/* big: true – a larger lead image, for wide pictures */
.cs-hero.big { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5vw; }
.cs-hero.big .cs-img { max-width: 900px; }

.cs-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 3vw; }
.cs-swatch span {
  display: block; aspect-ratio: 1; margin-bottom: 14px;
  border: 1px solid var(--cs-rule);
}
.cs-swatch.secondary span { aspect-ratio: 2 / 1; }
/* compact: true – smaller swatches for a big palette */
.cs-palette.compact .cs-swatches { grid-template-columns: repeat(var(--pcols, 5), minmax(0, 1fr)); gap: 20px 1.6vw; max-width: 760px; }
.cs-palette.compact .cs-swatch strong { font-size: 15px; }
.cs-palette.compact .cs-swatch em { font-size: 10.5px; }
.cs-swatch strong { display: block; font-family: var(--cs-serif); font-weight: 400; font-size: 24px; }
.cs-swatch em { font-style: normal; font-size: 12px; letter-spacing: .14em; color: color-mix(in srgb, var(--cs-ink) 55%, transparent); }

.cs-strip-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2vw; }
.cs-strip .cs-img img { box-shadow: none; border: 1px solid var(--cs-rule); }

@media (max-width: 700px) {
  .cs section { padding: 56px 16px; }
  .cs-images .cs-row[style] { grid-template-columns: 1fr !important; }
  .cs-hero, .cs-text, .cs-images.two .cs-row, .cs-images.three .cs-row, .cs-strip-row { grid-template-columns: 1fr; }
  .cs-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cs-split { grid-template-columns: 1fr; gap: 10px; }
  .cs-stats { grid-template-columns: 1fr; gap: 12px; padding-top: 40px !important; padding-bottom: 40px !important; }
  .cs-stats dl { grid-template-columns: 1fr; gap: 28px; }
  .cs-hero { min-height: 0; gap: 40px; }
  .cs-text { gap: 12px; }
  .cs-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .cs-palette.compact .cs-swatches[style] { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important; gap: 16px 10px; } .cs-palette.compact .cs-swatch strong { font-size: 12px; } /* phones: as many across as fit, filling the width */
  .cs-grid-row[style*="--cols:6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Story wall (category tabs listed in STORYWALL) ---------- */
/* A dark stage with the project intro on the left and columns of phone
   screens that drift up and down on the right (script.js). */
.storywall {
  display: grid;
  grid-template-columns: minmax(280px, 30%) minmax(0, 1fr);
  height: calc(100vh - 40px);
  min-height: 640px;
  background: #0e0e10;
  color: #f3efe8;
  overflow: hidden;
  border-bottom: var(--line);
}
.storywall[hidden] { display: none !important; } /* beats the header styles' display: block */
/* The People App wall grows with its text, so the whole write-up can be read:
   at least a screen tall, taller when the text needs it. The story columns
   don't add height of their own (contain: size); they fill whatever height
   the text gives the row. */
.storywall:has(.wall) { height: auto; min-height: calc(100vh - 40px); }
.storywall .wall { contain: size; }

.wall-intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* text starts at the top of the panel */
  gap: 18px;
  padding: 6vh 3vw;
  border-right: 1px solid rgba(243, 239, 232, .15);
}
.wall-intro .eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: .6; }
.wall-intro h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: clamp(48px, 5vw, 88px);
  line-height: .95;
}
.wall-intro p { font-size: 15px; line-height: 1.7; opacity: .8; max-width: 36ch; }
.wall-intro .spec {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 20px;
  font-size: 13px; padding-top: 14px; border-top: 1px solid rgba(243, 239, 232, .15);
}
.wall-intro .spec dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .55; padding-top: 2px; }
.wall-play {
  align-self: flex-start;
  margin-top: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: #000;
  font: 400 13px var(--display);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s;
}
.wall-play:hover { transform: scale(1.04); }

.wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding: 0 24px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
}
.wall-col { overflow: hidden; }
.wall-track {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 20px;
  animation: wall-up var(--speed, 60s) linear infinite;
}
.wall-col.down .wall-track { animation-name: wall-down; }
@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .wall-track { animation: none; } }

.phone {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 2px solid #26262a;
  border-radius: 26px;
  overflow: hidden;
  background: #000;
}
.phone video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* Story player */
.story-player {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: rgba(8, 8, 10, .94);
}
.story-player[hidden] { display: none; }
.sp-frame {
  position: relative;
  height: min(88vh, 860px);
  aspect-ratio: 9 / 16;
  max-width: 94vw;
  border: 6px solid #26262a;
  border-radius: 34px;
  overflow: hidden;
  background: #000;
}
.sp-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-bars { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2; display: flex; gap: 4px; }
.sp-bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.sp-bars i { display: block; height: 100%; width: 0; background: #fff; }
.sp-tap { position: absolute; top: 0; bottom: 0; width: 40%; border: 0; background: none; cursor: pointer; z-index: 1; }
.sp-prev { left: 0; }
.sp-next { right: 0; width: 60%; }
.sp-title {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 40px 16px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7));
  color: #fff; font-size: 14px; line-height: 1.4;
  pointer-events: none;
}
.sp-btn {
  position: fixed; top: 18px; z-index: 3;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: none;
  color: #fff;
  font: 300 12px var(--display);
  text-transform: uppercase;
  cursor: pointer;
}
.sp-btn:hover { background: #fff; color: #000; }
/* Arrows either side of the phone, and the story count under it */
.sp-stage { position: relative; display: flex; align-items: center; gap: 28px; }
.sp-arrow {
  flex: none;
  display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0;
  border: var(--line); border-radius: 50%;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: background .2s, transform .25s cubic-bezier(.2, .7, .2, 1), opacity .2s;
}
.sp-arrow svg { width: 22px; height: 22px; display: block; transition: transform .25s; }
.sp-arrow:hover { background: var(--yellow); transform: scale(1.08); }
.sp-arrow-prev:hover svg { transform: translateX(-2px); }
.sp-arrow-next:hover svg { transform: translateX(2px); }
.sp-arrow:disabled { opacity: .3; pointer-events: none; }
.sp-count {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 14px;
  text-align: center; color: rgba(255, 255, 255, .7);
  font: 400 12px var(--display); letter-spacing: .14em;
}
.sp-close { right: 18px; }
.sp-sound { left: 18px; }

@media (max-width: 1000px) {
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wall-col:nth-child(4) { display: none; }
}
@media (max-width: 700px) {
  .storywall { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .wall-intro { border-right: 0; padding: 32px 16px; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 120vw; gap: 12px; padding: 0 16px; }
  .wall-col:nth-child(3), .wall-col:nth-child(4) { display: none; }
  .wall-track { gap: 12px; padding-bottom: 12px; }
  .phone { border-width: 2px; border-radius: 18px; }
  .sp-frame { height: 82vh; border-radius: 24px; }
  /* On phones the arrows sit over the edges of the video */
  .sp-stage { gap: 0; }
  .sp-arrow { position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; margin-top: -21px; }
  .sp-arrow-prev { left: 8px; }
  .sp-arrow-next { right: 8px; }
  .sp-frame { height: 78vh; }
}

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  justify-content: space-between;
  padding: 14px 12px;
  font-family: var(--display);
  font-weight: 300;
  font-size: 13px;
  text-transform: uppercase;
}
.site-footer a:hover { text-decoration: underline; }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  :root { --side: 240px; --row-h: 240px; }
  .info h2 { font-size: 20px; }
  .info p { font-size: 14px; }
}

/* ---------- Phone ---------- */
@media (max-width: 700px) {
  .site-header { grid-template-columns: 1fr; }
  .brand { padding: 14px 16px 12px; }
  .bio-sticker { width: 112px; height: 112px; right: 14px; bottom: 14px; }
  .bio-face { inset: 21px; }
  .bio-ring text { font-size: 11px; }
  body:has(.bio-sticker) .site-footer { padding-right: 140px; }
  /* (the sticker's space leaves too little room side by side, so stack them) */
  .site-footer { flex-direction: column; gap: 6px; }
  .name { flex: 1 1 auto; }
  .name a { height: auto; width: 100%; }
  /* Contact links as three small icons beside the name, not three full rows */
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .contact { grid-template-rows: none; grid-template-columns: repeat(3, 44px); border-left: var(--line); border-top: 0; }
  .contact a { justify-content: center; padding: 0; border-bottom: 0; border-left: var(--line); }
  .contact a:first-child { border-left: 0; }
  .contact-icon { display: block; }
  .contact-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* still read out by screen readers */

  /* All six tabs visible at once: a 3 × 2 grid with shorter names */
  .filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .filters button { min-width: 0; padding: 9px 4px; font-size: 0; border-right: var(--line); }
  .filters button::after { content: attr(data-short); font-size: 12px; }
  .filters button:nth-child(3n) { border-right: 0; }
  .filters button:nth-child(-n+3) { border-bottom: var(--line); }

  .project { grid-template-columns: 1fr; height: auto; }
  .info { border-right: 0; border-bottom: var(--line); padding: 14px 16px; }
  .info h2 { font-size: 20px; }
  .info p { font-size: 14px; margin-bottom: 12px; }
  .media { height: 260px; }
  .arrow { display: none; }

  .site-footer { padding: 14px 16px; }

  .detail { grid-template-columns: 1fr; }
  .detail-info { position: static; max-height: none; border-bottom: var(--line); }
  .detail-gallery { border-left: 0; grid-template-columns: 1fr; gap: 24px; padding: 16px; }
  .back { margin-bottom: 18px; }
  .lede { font-size: 17px; }
  .pager a { padding: 14px 16px; font-size: 18px; }

  .bio { grid-template-columns: 1fr; }
  .bio-portrait { border-right: 0; border-bottom: var(--line); }
  .bio { min-height: 0; }
  .bio-portrait { aspect-ratio: 4 / 5; }
  .bio-text { padding: 14px 16px 36px; }
  .bio-facts { grid-template-columns: 110px 1fr; }
}

/* Process sheet at the end of a project page's photos (project-page.js) */
.process-sheet { max-width: 600px; justify-self: center; } /* smaller, less scrolling */
.process-sheet img { display: block; width: 100%; height: auto; }

/* Story wall split: cream intro panel on the left, dark stage for the
   phones on the right (remove this block to make it all dark again) */
.wall-intro {
  background: var(--paper);
  color: var(--ink);
  border-right: var(--line);
}
.wall-intro .spec { border-top-color: rgba(0, 0, 0, .15); }
@media (max-width: 700px) {
  .wall-intro { border-right: 0; border-bottom: var(--line); }
}

/* Thin black line between the images in the home page strips. content-box
   keeps each image at its exact shape; the line is added outside it. */
.strip .tile { box-sizing: content-box; border-right: var(--line); }
/* Transparent artwork (logos, seals) gets a little room inside its tile */
.strip .tile img[src$=".png"] { box-sizing: border-box; padding: 7%; object-fit: contain; }

/* ---------- Phone mockups ---------- */
/* Home strip (frame: "phone"): each clip sits inside a phone with a dark
   bezel, a camera notch and side buttons, on the cream background. */
/* Phones are taller than the row (--ph), shaped like a modern phone, and
   run off the bottom edge so only their top part shows */
.frame-phone .media { --ph: calc((var(--row-h) - 18px) * 1.3); }
.frame-phone .strip .tile {
  position: relative;
  height: calc(100% - 18px);
  width: calc(var(--ph) * 9 / 19);
  aspect-ratio: auto !important;
  padding: 18px 14px 0;
  background: transparent;
}
.frame-phone .tile video,
.frame-phone .tile img {
  width: 100%;
  height: var(--ph);
  border: 6px solid #111;
  border-radius: 30px;
  box-shadow: 0 0 0 1.5px #3a3a3e, 0 10px 22px rgba(0, 0, 0, .22);
  object-fit: cover;
}
@media (max-width: 700px) {
  .frame-phone .media { --ph: calc((260px - 18px) * 1.3); }
}
/* Camera notch */
.frame-phone .tile::after,
.wall .phone::after,
.sp-frame::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: 30%;
  border-radius: 999px;
  background: #000;
  pointer-events: none;
  z-index: 2;
}
.frame-phone .tile::after { top: 31px; height: 6px; width: 19%; }
/* Side buttons */
.frame-phone .tile::before {
  content: "";
  position: absolute;
  right: 11px;
  top: 30%;
  width: 3px;
  height: 14%;
  border-radius: 2px;
  background: #2a2a2e;
}

/* Story wall phones and the story player get the same notch */
.wall .phone { position: relative; }
.wall .phone::after { top: 8px; height: 4%; max-height: 11px; width: 20%; }
.sp-frame::after { top: 14px; height: 16px; width: 20%; }
.sp-bars { top: 46px; }

/* No camera notch on the phone mockups */
.frame-phone .tile::after,
.wall .phone::after,
.sp-frame::after { display: none; }

/* Tabs: pinned to the top while scrolling, and quieter so they read as a
   menu rather than repeating the row titles */
/* Only the tab bar stays pinned at the top; the header scrolls away.
   (.topbar is a plain wrapper, so the tabs can stick to the whole page.) */
.topbar { display: contents; }
.filters {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
}
/* Tab text at its original, larger size (12–15px) */
.filters button[aria-pressed="true"] { font-weight: 600; }

/* Clients: a bold credit line above the skill tags on the home page rows */
.info .clients {
  margin-top: auto;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.info .clients + .tags { margin-top: 0; }

/* Strip arrows: cream circles with a thin black outline and a drawn arrow.
   They fade in on hover and fill with yellow when pointed at. */
.media .arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  z-index: 3;
  transition: opacity .25s, background .2s, transform .25s cubic-bezier(.2, .7, .2, 1);
}
.media .arrow svg { width: 20px; height: 20px; display: block; transition: transform .25s; }
.media .arrow.prev { left: 14px; }
.media .arrow.next { right: 14px; }
.media .arrow:hover { background: var(--yellow); transform: scale(1.08); }
.media .arrow.prev:hover svg { transform: translateX(-2px); }
.media .arrow.next:hover svg { transform: translateX(2px); }
.media .arrow:active { transform: scale(.96); }

/* ---------- Phone mockups on case study pages (type: "phones") ---------- */
.ph-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4vw; max-width: 1100px; margin: 0 auto; }
.ph { margin: 0; text-align: center; }
.ph figcaption {
  margin-top: 16px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cs-ink) 55%, transparent);
}
.ph-screen {
  position: relative;
  aspect-ratio: 9 / 19.5;
  max-width: 300px;
  margin: 0 auto;
  border: 9px solid #121212;
  border-radius: 44px;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px #3a3a3e, 0 30px 60px rgba(27, 15, 38, .25);
  container-type: inline-size;
}
.ph-status { position: absolute; top: 3.5%; left: 9%; font: 600 4.5cqw var(--text); }

/* Home screen: a grid of plain app icons, with Kalyana among them */
.ph-home { background: linear-gradient(160deg, #efe3c8, #d9c6a3 55%, #b99f86); }
.ph-grid {
  position: absolute; top: 14%; left: 8%; right: 8%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7cqw 0;
}
.ph-app { display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.ph-app i { width: 17cqw; height: 17cqw; border-radius: 4.4cqw; display: block; }
.ph-app b { font: 500 3.6cqw var(--text); height: 4.5cqw; color: #1b0f26; }
.ph-brand i { box-shadow: 0 2cqw 5cqw rgba(27, 15, 38, .35); }
.ph-dock {
  position: absolute; left: 6%; right: 6%; bottom: 3.5%;
  display: flex; justify-content: space-around;
  padding: 4cqw 3cqw; border-radius: 9cqw;
  background: rgba(255, 255, 255, .35); backdrop-filter: blur(8px);
}
.ph-dock i { width: 15cqw; height: 15cqw; border-radius: 4cqw; display: block; }

/* Splash: the k block on matching plum */
.ph-splash { display: grid; place-items: center; }
.ph-splash img { width: 52%; display: block; clip-path: inset(3% 4%); }

/* Session screen */
.ph-session { background: #faf5e2; /* same cream as the leaf artwork */ color: #1b0f26; display: flex; flex-direction: column; align-items: center; padding-top: 16%; }
.ph-leaf { width: 46%; }
.ph-kicker { margin-top: 9cqw; font-size: 3.6cqw; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.ph-session h3 { margin-top: 2cqw; font: 400 10cqw "Cormorant Garamond", Georgia, serif; }
.ph-meta { font-size: 4cqw; opacity: .7; }
.ph-ring {
  margin-top: 8cqw; width: 24cqw; height: 24cqw; border-radius: 50%;
  border: 1.2cqw solid #d9cbb0; border-top-color: #321d38;
  display: grid; place-items: center;
}
.ph-ring span { width: 12cqw; height: 12cqw; border-radius: 50%; display: block; clip-path: polygon(30% 20%, 30% 80%, 80% 50%); }

@media (max-width: 700px) {
  .ph-row { grid-template-columns: 1fr; gap: 40px; }
  .ph-screen { max-width: 260px; }
}

/* "← All work" link at the top of the Motion Design story wall */
.wall-intro .wall-back { align-self: flex-start; margin-bottom: 6px; }

/* "← All work" link at the top of the Furniture & Objects lookbook */
.lb-top { padding: 18px 4vw; border-bottom: 1px solid var(--rule, rgba(28, 26, 23, .16)); }
@media (max-width: 900px) { .lb-top { padding: 14px 16px; } }

/* Strip arrows are always visible: fading them in on hover made Safari
   redraw the GIFs underneath, which flashed the background through */
.media .arrow { opacity: 1; }
.media .arrow[disabled] { opacity: 1 !important; pointer-events: auto; }

/* ---------- Set wall (Set Design tab: STORYWALL type "sets") ---------- */
/* Left: the MHS Artists intro.
   Right: the sets as framed tiles drifting up and down (script.js). */
.set-intro { gap: 10px; padding: 26px 3vw 28px; }
.set-intro::-webkit-scrollbar { display: none; }
.set-intro h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 2.8vw, 46px);
  letter-spacing: -.03em;
  line-height: 1;
}
.set-intro .set-lede { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.4; font-weight: 500; opacity: 1; max-width: 40ch; }
.set-intro p:not(.set-lede):not(.eyebrow) { font-size: 13.5px; line-height: 1.55; max-width: 58ch; }

.storywall:has(.set-stage) { height: auto; min-height: 0; grid-template-columns: minmax(300px, 38%) minmax(0, 1fr); }
.set-stage {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center; /* the row sits in the middle of the band */
  padding: 24px 0;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.set-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: set-drift var(--speed, 100s) linear infinite;
}
@keyframes set-drift { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) { .set-track { animation: none; } }
.set-track .set-tile { flex: none; height: clamp(220px, 20vw, 300px); }
.set-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: #1b1b1e;
  pointer-events: none; /* display only */
}
.set-tile img, .set-tile video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.set-name {
  position: absolute; left: 10px; bottom: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(14, 14, 16, .72); color: #f3efe8;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .set-intro { overflow: visible; }
  .storywall:has(.set-stage) { grid-template-columns: 1fr; }
  .set-stage { padding: 16px 0; }
  .set-track .set-tile { height: 200px; }
}

/* A little breathing room between the Set Design wall and the project rows
   below it (the top line closes the first row) */
.storywall[data-style="wall"]:not([hidden]) + #projects:not([hidden]) { margin-top: 56px; border-top: var(--line); }
@media (max-width: 700px) {
  .storywall[data-style="wall"]:not([hidden]) + #projects:not([hidden]) { margin-top: 32px; }
}
/* No line under the Set Design wall; the space below it does the separating */
.storywall:has(.set-stage) { border-bottom: 0; }

/* Set Design header, options "row" and "line" (STORYWALL style) */
.storywall[data-style="row"], .storywall[data-style="line"] {
  display: block; height: auto; min-height: 0;
  background: none; color: inherit; border-bottom: 0;
}
/* Row: the same grid, height and lines as the project rows below */
.set-header { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); height: var(--row-h); border-bottom: var(--line); }
@media (max-width: 700px) { .set-header { grid-template-columns: 1fr; height: auto; } }
.set-header .set-stage { background: #0e0e10; padding: 18px 0; }
.set-header .set-track .set-tile { height: calc(var(--row-h) - 36px); }
/* Line: one sentence above the rows */
.set-line {
  padding: 18px 12px;
  border-bottom: var(--line);
  font-size: 15px; font-weight: 500; letter-spacing: -.005em;
}

/* Tab bar: "← All work" and the tab's one-line note, side by side */
.tab-bar {
  display: flex;
  align-items: center;
  gap: 0 20px;
  padding: 16px 12px;
  border-bottom: var(--line);
}
.tab-bar .tab-back { flex: none; margin: 0; }
.tab-line {
  padding-left: 20px;
  border-left: 1px solid rgba(28, 26, 23, .25);
  font-size: 15px; font-weight: 500; letter-spacing: -.005em; line-height: 1.35;
}
@media (max-width: 700px) {
  .tab-bar { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
  .tab-line { padding-left: 0; border-left: 0; font-size: 14px; }
}



/* ---------- Ovals, unified ----------
   Every pill-shaped label and button (client bubbles, tab intro labels,
   "View ZVA…", "View the stories", photo captions) has the same yellow
   fill and thin black outline */
.tags li,
.cat-intro-label,
.chapter .more,
.wall-play,
.process-collage figcaption,
.set-name {
  background: var(--yellow);
  border: 1px solid #000;
  color: #000;
}
/* …except the client bubbles on the image-strip rows (home page and the
   category tabs like Branding): those stay outline only */
.project .tags li { background: none; }

/* The rolling-number reels are tall strips of digits, mostly hidden. Keep that
   hidden part from adding empty space to the page (seen in Safari on iPhone). */
.cs-stats dl { overflow: clip; }
@media (max-width: 700px) {
  .detail-info { overflow: visible; } /* on phones the details column is not a scroll box */
}

/* Phones: the bigger lead image (Parents) stacks under the text like the
   other case studies, instead of squeezing the text into a narrow column */
@media (max-width: 700px) {
  .cs-hero.big { grid-template-columns: 1fr; gap: 40px; }
}

/* Phones: the Furniture & Objects process photos three across (desktop unchanged) */
@media (max-width: 700px) {
  .process-collage { columns: 3; column-gap: 6px; }
  .process-collage figure { margin-bottom: 6px; }
  .process-collage figcaption { font-size: 9px; padding: 2px 6px; left: 4px; bottom: 4px; }
}

/* Phones: the rolling numbers on Motion Design (People App) and Town & Country
   use the same big, stacked style as the Branding case studies */
@media (max-width: 700px) {
  .detail-stats dl, .wall-intro .detail-stats dl { display: grid; grid-template-columns: 1fr; gap: 28px; }
  .detail-stats dt, .wall-intro .detail-stats dt { font-size: 64px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
  .detail-stats dd, .wall-intro .detail-stats dd { margin-top: 14px; font-size: 16px; line-height: 1.5; max-width: 24ch; }
}

/* Phones: each home-page row reads as one block. No line between a project's
   text and its photos; a strong line and a band of space close it off before
   the next project starts. */
@media (max-width: 700px) {
  .info { border-bottom: 0; padding-bottom: 16px; }
  .project { border-bottom: var(--line); margin-bottom: 36px; } /* same thickness as the other lines */
}

/* The whole text box of a row (title, description, client tags) opens the
   project, not just the title or logo */
.info { cursor: pointer; } /* (clicks handled in script.js, addRow) */
.info:hover h2 a { text-decoration: underline; text-underline-offset: 4px; }

/* Phones: your portrait in the header (beside the contact icons) links to the
   bio, in place of the floating "Read my bio" sticker. Desktop keeps the sticker. */
.contact-bio { display: none !important; }
@media (max-width: 700px) {
  .bio-sticker { display: none; }
  body:has(.bio-sticker) .site-footer { padding-right: 16px; }
  .contact { grid-template-columns: repeat(4, 44px); }
  .contact a.contact-bio { display: flex !important; }
  .contact-bio img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 1.5px solid var(--ink); background: var(--yellow); }
  .page-bio .contact { grid-template-columns: repeat(3, 44px); }
  .page-bio .contact a.contact-bio { display: none !important; } /* (already on the bio) */
}

/* Motion Design carousel: no dividing lines between the phone mockups */
.frame-phone .strip .tile { border-right: 0; }

/* Phones: no dividing lines between the email, Instagram, LinkedIn and bio icons
   (the line between your name and the icons stays) */
@media (max-width: 700px) {
  .contact a { border-left: 0; }
}

/* Desktop: your name takes exactly the first third of the width, so the line
   after it sits right on the line between the 2nd and 3rd tabs. The tabs are
   six exactly equal columns (two tabs = one third). Both lines are drawn on
   the right-hand side of their boxes, so they meet edge to edge. */
@media (min-width: 701px) {
  .site-header { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .brand { border-right: var(--line); }
  .contact { border-left: 0; }
  .name a { width: 100%; height: auto; max-width: 100%; }
  /* (the image keeps its height-based sizing, the same as the cream hover
     version behind it, so the two match exactly) */
  .filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .filters button { min-width: 0; }
}

/* Desktop: LinkedIn is the last visible contact link (the bio portrait after it
   only shows on phones), so it has no line of its own under it */
@media (min-width: 701px) {
  .contact a:nth-last-child(2) { border-bottom: 0; }
}

/* Desktop: the contact links as small round icon buttons at the right of the
   header, like on phones, instead of three tall stacked rows */
@media (min-width: 701px) {
  .contact { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 20px; }
  .contact a { width: 48px; height: 48px; padding: 0; justify-content: center; border: var(--line) !important; border-radius: 50%; }
  .contact-icon { display: block; width: 22px; height: 22px; }
  .contact-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Phones: on the Set Design tab, each project row shows just its logo (and
   client tag) above the photos, without the one-line description */
@media (max-width: 700px) {
  .project:not([data-summary])[data-tags="Set Design"] .info > p { display: none; }
}

/* Motion Design (People App): on desktop the stats, write-up and "View the
   stories" sit in the side panel; on phones they come after the stories,
   so the stories follow straight on from the Client / Brand / Role details */
.wall-rest { display: flex; flex-direction: column; gap: 18px; }
.wall-after { display: none; }
@media (max-width: 700px) {
  .wall-intro .wall-rest { display: none; }
  .wall-intro:not(.wall-after) { padding-bottom: 20px; }
  .wall-after { display: flex; border-top: var(--line); border-bottom: 0; }
}

/* Case-study image sections with a set number across (`cols` in projects.js),
   kept on phones too */
.cs-images.cs-cols .cs-row { grid-template-columns: repeat(var(--ic), minmax(0, 1fr)) !important; gap: 2vw; }
@media (max-width: 700px) {
  .cs-images.cs-cols .cs-row { gap: 8px; }
}

/* Desktop: the lead image on case studies sits centred against the logo,
   description and details beside it, rather than hanging from the top */
@media (min-width: 701px) {
  .cs-hero { align-items: center; }
  /* (nudged down by half the "← Branding" link above the logo, so the image
     centres on the logo-to-details block itself) */
  .cs-hero > :not(.cs-hero-text) { margin-top: 20px; }
}

/* Phones: the first row on a tab gets the same space above it as the rows
   below it have (they get theirs from the gap after the row before) */
@media (max-width: 700px) {
  #projects { padding-top: 36px; }
}