/* =========================================
   TOKENS
   ========================================= */
:root {
  --bg: #0a0a0a;
  --bg-raised: #141414;
  --text: #d4d4d4;
  --text-bright: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.62);
  --text-faint: rgba(255, 255, 255, 0.4);
  --overlay-label: rgba(62, 62, 62, 0.75);
  --overlay-label-hover: #f8f8f8;
  --border: rgba(255, 255, 255, 0.14);
  --focus: #ffffff;

  --font-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  --header-h: 64px;
  --gutter: 16px;
  --max-width: 1600px;
}

@media (min-width: 900px) {
  :root {
    --header-h: 84px;
    --gutter: 28px;
  }
}

/* =========================================
   RESET / BASE
   ========================================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

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

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 1000;
  background: var(--text-bright);
  color: #000;
  padding: 10px 16px;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-weight: 700;
}
.skip-link:focus {
  top: 12px;
}

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

/* =========================================
   HEADER / NAV — desktop
   ========================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500;
  background: transparent;
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--gutter);
  width: 100%;
}

.site-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--text-bright);
  white-space: nowrap;
}

.nav-main { display: none; }
.header-actions { display: none; }

/* Menu button: two thin lines of unequal length in soft grey. They
   brighten and even out on hover or tap, and fold into a slim X when the
   menu is open. The button's tap area is a full 48px square. */
.menu-toggle {
  position: relative;
  width: 48px;
  height: 48px;
  margin-right: -10px; /* keeps the lines at the page edge while the tap area extends past them */
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle-bar {
  position: absolute;
  right: 10px;
  height: 1.5px;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.3s ease, width 0.3s ease, background-color 0.3s ease;
}
.menu-toggle-bar:nth-child(1) { top: 19px; width: 26px; }
.menu-toggle-bar:nth-child(2) { top: 27px; width: 17px; }
.menu-toggle:hover .menu-toggle-bar,
.menu-toggle:active .menu-toggle-bar,
.menu-toggle:focus-visible .menu-toggle-bar { background: var(--text-bright); width: 26px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar { width: 24px; background: var(--text-bright); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Full-screen mobile menu — "side title" look */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80svh;
}
.mobile-menu[hidden] { display: none; }

.mobile-menu ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.mobile-menu li {
  max-width: 100%;
}

.mobile-menu a {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(26px, 11vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(62, 62, 62, 0.7);
  text-transform: uppercase;
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  transform: translateX(0);
}
/* Long names (like "Music Videos" and "Commercials", marked .is-long) get
   a smaller ceiling so they never run past the screen edge; a long list
   (7 or more) is set a little smaller all round so it fits the screen. */
.mobile-menu li.is-long a { font-size: clamp(22px, 8.5vw, 52px); }
.mobile-menu ul.is-many { gap: 12px; }
.mobile-menu ul.is-many a { font-size: clamp(22px, 7.5vw, 46px); }
.mobile-menu li:nth-child(1) a:hover,
.mobile-menu li:nth-child(1) a:focus-visible,
.mobile-menu li:nth-child(1) a.is-chosen { color: rgba(235, 87, 87, 1); transform: translateX(-8px); }
.mobile-menu li:nth-child(2) a:hover,
.mobile-menu li:nth-child(2) a:focus-visible,
.mobile-menu li:nth-child(2) a.is-chosen { color: rgba(242, 153, 74, 1); transform: translateX(-8px); }
.mobile-menu li:nth-child(3) a:hover,
.mobile-menu li:nth-child(3) a:focus-visible,
.mobile-menu li:nth-child(3) a.is-chosen { color: rgba(39, 174, 96, 1); transform: translateX(-8px); }
.mobile-menu li:nth-child(4) a:hover,
.mobile-menu li:nth-child(4) a:focus-visible,
.mobile-menu li:nth-child(4) a.is-chosen { color: rgba(45, 156, 219, 1); transform: translateX(-8px); }
.mobile-menu li:nth-child(5) a:hover,
.mobile-menu li:nth-child(5) a:focus-visible,
.mobile-menu li:nth-child(5) a.is-chosen { color: rgba(155, 81, 224, 1); transform: translateX(-8px); }
/* More than five links: the same five colors again, in order. */
.mobile-menu li:nth-child(5n+6) a:hover, .mobile-menu li:nth-child(5n+6) a:focus-visible, .mobile-menu li:nth-child(5n+6) a.is-chosen { color: rgba(235, 87, 87, 1); transform: translateX(-8px); }
.mobile-menu li:nth-child(5n+7) a:hover, .mobile-menu li:nth-child(5n+7) a:focus-visible, .mobile-menu li:nth-child(5n+7) a.is-chosen { color: rgba(242, 153, 74, 1); transform: translateX(-8px); }
.mobile-menu li:nth-child(5n+8) a:hover, .mobile-menu li:nth-child(5n+8) a:focus-visible, .mobile-menu li:nth-child(5n+8) a.is-chosen { color: rgba(39, 174, 96, 1); transform: translateX(-8px); }
.mobile-menu li:nth-child(5n+9) a:hover, .mobile-menu li:nth-child(5n+9) a:focus-visible, .mobile-menu li:nth-child(5n+9) a.is-chosen { color: rgba(45, 156, 219, 1); transform: translateX(-8px); }
.mobile-menu li:nth-child(5n+10) a:hover, .mobile-menu li:nth-child(5n+10) a:focus-visible, .mobile-menu li:nth-child(5n+10) a.is-chosen { color: rgba(155, 81, 224, 1); transform: translateX(-8px); }

/* The page you're currently on stays lit up white when you reopen the menu. */
.mobile-menu li.is-current-page a {
  color: #ffffff;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
}

body.menu-open { overflow: hidden; }

@media (min-width: 900px) {
  .menu-toggle { display: none; }
  .mobile-menu { display: none !important; }

  /* The menu links and the name all sit in ONE evenly-spaced row —
     "display: contents" unwraps the <nav>/<ul> boxes so each <li> becomes
     a direct flex child of .header-inner, sitting alongside .site-title.
     "order" then places the name in the middle (the first half of the
     links, .nav-item-left, before it; the rest after) without it needing
     to live in the markup between the links. Contact stays separate,
     pinned to the corner, same as the original site. */
  .header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Matches the original site's own nav gap: column-gap: clamp(50px, 9vw, 130px) */
    gap: clamp(50px, 9vw, 130px);
  }

  .nav-main,
  .nav-list { display: contents; }

  .nav-item-left { order: 1; }
  .site-title { order: 2; }
  .nav-item-right { order: 3; }

  .nav-list a,
  .header-actions a {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 17px;
    color: var(--text-dim);
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
  }
  .nav-list a:hover,
  .nav-list a:focus-visible,
  .header-actions a:hover,
  .header-actions a:focus-visible {
    color: var(--text-bright);
    transform: scale(1.04);
  }

  .site-title {
    font-size: 20px;
    color: var(--text-bright);
    position: relative;
    top: -2px;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
  }
  .site-title:hover,
  .site-title:focus-visible {
    transform: scale(1.03);
    text-shadow: 0.2px 0 0 currentColor, -0.2px 0 0 currentColor;
  }

  .header-actions {
    display: block;
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
  }

  /* When the links would run into Contact (js/main.js checks — e.g. on
     narrower laptops, or with more links), they first move closer
     together; if they still don't fit, they fold away behind the menu
     button, which opens the full-screen menu. */
  .site-header.nav-compact .header-inner { gap: clamp(28px, 4.5vw, 60px); }
  .site-header.nav-collapsed .nav-main,
  .site-header.nav-collapsed .header-actions { display: none; }
  .site-header.nav-collapsed .menu-toggle {
    display: block;
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
  }
  .mobile-menu.is-desktop-menu:not([hidden]) { display: flex !important; }
}

/* =========================================
   HERO
   ========================================= */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 420px;
  background: #000;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.hero-video--mobile { display: block; }

@media (min-width: 768px) {
  .hero-video--mobile { display: none; }
  .hero-video--desktop { display: block; }
}

/* The reel: the top reel is a silent loop; tapping it (or this small
   full-screen icon in its bottom-right corner) opens the full reel with
   sound. Just the icon's four thin corners, softly shadowed so it reads
   on bright frames too; it brightens and opens out a little on hover or
   tap. Its tap area is a full 48px square. */
.hero--playable { cursor: pointer; }
.hero-play {
  position: absolute;
  right: calc(var(--gutter) - 12px);
  bottom: max(14px, 3svh);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.72);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}
.hero-play[hidden] { display: none; }
.hero-play svg { width: 22px; height: 22px; }
.hero--playable:hover .hero-play,
.hero-play:active,
.hero-play:focus-visible {
  color: var(--text-bright);
  transform: scale(1.12);
}
.hero-play:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: -4px; }
@media (min-width: 900px) {
  .hero-play { bottom: 26px; }
  .hero-play svg { width: 24px; height: 24px; }
}

/* The player: the reel over the whole page, black around it. */
.reel-player {
  position: fixed;
  inset: 0;
  z-index: 700; /* above the header and the phone menu */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.reel-player[hidden] { display: none; }
.reel-player.is-open { opacity: 1; }
.reel-stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.reel-video {
  display: block;
  width: min(100vw, calc((100svh - 140px) * 16 / 9));
  max-width: 1600px;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  background: #000;
}
.reel-bar {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  left: max(12px, env(safe-area-inset-left));
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.reel-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-width: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-bright);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.reel-bar button[hidden] { display: none; }
.reel-bar .reel-close { padding: 0; }
.reel-bar svg { width: 20px; height: 20px; flex: none; }
.reel-bar button:hover,
.reel-bar button:active,
.reel-bar button:focus-visible { background: var(--text-bright); border-color: var(--text-bright); color: #0a0a0a; }
body.reel-open { overflow: hidden; }

/* =========================================
   CATEGORY BLOCKS — full-bleed collage
   ========================================= */
.categories {
  /* Edge-to-edge on every screen size — no side gutter, no max-width cap. */
  width: 100%;
  /* Lets data/homepage-layout.js size things in "cqw" (1% of this width). */
  container-type: inline-size;
}

/* The cover (video, or the Commercials still) is shot/cropped at a known
   16:9 (desktop) or 9:16 (phone) ratio already, so object-fit: cover on
   it never trims anything meaningful — it's a deliberate crop, same as
   the original site's video blocks. Photos alongside it are different:
   see .category-masonry below, which never crops them. */
.category {
  display: flex;
  gap: 3px;
}
.category--cover-left { flex-direction: row; }
.category--cover-right { flex-direction: row-reverse; }

.category-cover {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-raised);
  flex: 0 0 42%;
  aspect-ratio: 9 / 16;
  /* Contains the label's z-index: 10 (needed to sit above the video
     inside this box) so it can't leak out and out-stack unrelated
     elements elsewhere on the page, like a neighboring category's photo. */
  isolation: isolate;
}
.category-cover-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
/* Phones get their own vertical-shot clip; desktop/tablet gets the
   widescreen one — same swap mechanism as the hero. */
.category-cover-media--mobile { display: block; }
@media (min-width: 768px) {
  .category-cover-media--mobile { display: none; }
  .category-cover-media--desktop { display: block; }
}

.category-label {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--overlay-label);
  transition: color 0.35s ease, transform 0.35s ease;
  padding: 0 8%;
  line-height: 1.05;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
/* Phones: the cover box is narrower, so the label wraps to fit inside it
   instead of being clipped. Desktop has room to stay on one line. */
.category-label--large { font-size: clamp(15px, 7.5vw, 90px); }
.category-label--small { font-size: clamp(11px, 5vw, 72px); }

@media (min-width: 900px) {
  .category-label { white-space: nowrap; line-height: 1; }
  .category-label--large { font-size: clamp(35px, 9vw, 120px); }
  .category-label--small { font-size: clamp(20px, 6vw, 100px); }
}

/* Hover (or a tap, on phones): the section name lights up and grows just
   slightly. */
.category-cover:hover .category-label,
.category-cover:active .category-label,
.category-cover:focus-visible .category-label {
  color: var(--overlay-label-hover);
  transform: scale(1.05);
}

/* Every supporting photo shown at its own true width/height ratio —
   never cropped, never letterboxed with grey. The image itself decides
   the tile's height; "size" only sets how much of the row's width it
   gets, so the emphasis/order you chose in the data file still comes
   through without ever hiding part of a photo. */
.category-masonry {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 3px;
}
.tile { background: var(--bg-raised); }
.tile-img { width: 100%; height: auto; display: block; }

.tile--lg { flex: 1 1 58%; }
.tile--md { flex: 1 1 44%; }
.tile--sm { flex: 1 1 29%; }

@media (min-width: 900px) {
  /* Without this, the flex row stretches the cover to match the height of
     the masonry column beside it (flex's default cross-axis behavior),
     which silently overrides the 16:9 aspect-ratio below and can leave the
     cover looking square or portrait instead of landscape. */
  .category { gap: 4px; align-items: flex-start; }
  .category-cover { flex-basis: 44%; aspect-ratio: 16 / 9; }
  .category-masonry { gap: 4px; }
  .tile--lg { flex-basis: 56%; }
  .tile--md { flex-basis: 38%; }
  .tile--sm { flex-basis: 24%; }
}

/* =========================================
   HOMEPAGE COLLAGE — desktop (900px and up). Where each photo sits, how
   big it is, and which photos sit on top are all set in
   data/homepage-layout.js (js/main.js turns that file into CSS). These
   rules only make every section a free-placement canvas: the cover and
   each photo are placed absolutely inside it, and each photo fills its
   box (object-fit: cover), as in the hand-placed original.
   ========================================= */
@media (min-width: 900px) {
  .category { display: block; position: relative; }
  .category-masonry { display: contents; }
  .category-cover,
  .tile { position: absolute; }
  .tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }

  [data-id="commercials"] .category-cover .category-label {
    white-space: normal;
    font-size: clamp(16px, 4.8vw, 84px);
  }
}

/* =========================================
   PHONES + TABLETS (under 900px) — the same hand-placed collage idea as
   desktop, not a grid: each section's tall cover sits on its own side,
   and the landscape photos are staggered around it, layering slightly
   over their neighbors and leaking into the next section so there are
   no big empty gaps. Positions are in vw (a percentage of the screen
   width), so the whole collage scales as one piece on any phone.

   Never cropped: every photo box is given its photo's exact shape
   (its "aspect" in data/homepage-layout.js, where all positions live),
   and the photo inside keeps its natural height.
   ========================================= */
@media (max-width: 899px) {
  /* pointer-events: the sections overlap each other, and a section's own
     (invisible) box would otherwise sit on top of a neighbor's photo that
     leaks into it, swallowing the tap. Only the photos catch taps. */
  .category {
    display: block;
    position: relative;
    pointer-events: none;
  }
  .category-masonry { display: contents; }

  .category-cover,
  .tile {
    position: absolute;
    pointer-events: auto;
  }
  .tile { background: none; }
  /* Fills the box, which already has the photo's own shape, so nothing
     is stretched or trimmed, and the image has a real size to lazy-load
     into before it arrives. */
  .tile-img { height: 100%; }

  /* "COMMERCIALS" on one line, as large as fits: the word is ~7.67x its
     font size wide (widest of the phone fonts), and 5vw of that fills the
     cover's width minus a slim 4% margin each side. */
  /* Same size as "FILMS", so the two read as equal weight. */
  [data-id="musicVideos"] .category-label { font-size: clamp(15px, 7.5vw, 90px); }
  [data-id="films"] .category-label { font-size: clamp(17px, 8.625vw, 104px); } /* 15% larger */

  [data-id="commercials"] .category-label {
    white-space: nowrap;
    hyphens: manual;
    padding: 0 4%;
    font-size: 5vw;
  }
}

/* Hover: a very subtle whole-frame grow — the tile itself scales up and
   spills slightly outside its box, rather than the photo zooming while
   staying clipped inside it. No z-index bump: a tile that already sits
   underneath a neighbor stays underneath it while growing, instead of
   jumping to the front. */
@media (min-width: 900px) {
  .tile { transition: transform 0.3s ease; }
  .tile:hover,
  .tile:focus-within { transform: scale(1.02); }
}

/* Phones: there's no hover, so the first tap on a photo or cover plays
   the same subtle grow, and a second tap opens its page (js/main.js adds
   .is-tapped). Tapping the section name opens the page on the first tap. */
@media (max-width: 899px) {
  .category-cover,
  .tile { transition: transform 0.3s ease; }
  .category-cover.is-tapped,
  .tile.is-tapped { transform: scale(1.02); }
  .category-cover.is-tapped .category-label {
    color: var(--overlay-label-hover);
    transform: scale(1.05);
  }
}

/* =========================================
   FILMS PAGE (films.html)
   Phones: each film stacks — title, the big poster or video, the
   synopsis, then its stills in a small staggered collage.
   Desktop (900px+): each film is hand-placed to match Films-Desktop.png,
   positions in vw so the layout scales as one piece.
   Stills are never cropped: each keeps its own shape (aspect-ratio only
   reserves the space until the photo loads).
   ========================================= */
/* Page titles share the homepage section labels' look: heavy, dark,
   see-through grey that fills with white (and grows very slightly) on
   hover or tap.
   Position: every title's capital letters start at the same height on
   every page. Capitals sit 0.149em below the top of the line in this
   font, so "- 0.149em" cancels that out whatever the title's size, and
   "0.149 * clamp(...)" puts them where the Music Videos title's are. */
.page-title {
  margin: 0;
  padding-top: calc(var(--header-h) + 4px + 0.149 * clamp(30px, 11vw, 80px) - 0.149em);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(44px, 16vw, 96px);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--overlay-label);
  white-space: nowrap; /* never breaks a word (no stray "S" on a second line) */
  transition: color 0.35s ease, transform 0.35s ease;
}
/* A long title (a page added in AlexHelper, like "Documentaries") takes the
   smaller size the Music Videos and Commercials titles use, so it always
   fits on one line. */
#main .page-title.page-title--long { font-size: clamp(30px, 11vw, 80px); }
#main .page-title.page-title--xlong { font-size: clamp(24px, 8vw, 64px); }
@media (min-width: 900px) {
  #main .page-title.page-title--long { font-size: clamp(40px, 5.3vw, 110px); }
  #main .page-title.page-title--xlong { font-size: clamp(32px, 4vw, 84px); }
}
.page-title:hover,
.page-title:active,
.page-title:focus-within {
  color: var(--overlay-label-hover);
  transform: scale(1.03);
}

.project-note { margin: 0; font-size: clamp(13px, 3.6vw, 22px); color: var(--text); }
.project-note a { text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s ease; }
.project-note a:hover,
.project-note a:focus-visible { color: var(--text-bright); }

.project-title { margin: 0; }
.project-title img { width: 100%; height: auto; }

/* Loglines: Jost (the Futura look-alike) at its regular weight, open
   line spacing, left-aligned to the edge of the video or poster above. */
.project-desc {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.55;
  text-align: left;
  color: var(--text);
}

.project-feature-img,
.project-still { width: 100%; height: auto; }
[data-project="prophet"] .project-still { aspect-ratio: auto 1400 / 737; }
[data-project="slb"] .project-still { aspect-ratio: auto 1400 / 593; }
[data-project="revelations"] .project-still { aspect-ratio: auto 1400 / 784; }
.project-feature-img { aspect-ratio: auto 1400 / 736; }

/* YouTube: a click-to-load preview; the real player loads on press. */
.yt {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.yt-button {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.yt-poster { width: 100%; height: 100%; object-fit: contain; }
.yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(52px, 5vw, 76px);
  height: auto;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
.yt-button:hover .yt-play,
.yt-button:focus-visible .yt-play { transform: translate(-50%, -50%) scale(1.08); }
.yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 899px) {
  #films-list,
  #commercials-list { padding: 0 4vw; }
  .project { margin-top: 12vw; }
  .project:first-child { margin-top: 16vw; } /* standard space under the page title on phones */

  .project-note { text-align: right; margin-bottom: 3vw; }
  .project-title { width: 72%; margin-bottom: 3vw; }
  [data-project="revelations"] .project-title { width: 70%; margin-left: auto; }

  .project-feature { margin: 0 -4vw; }
  .project-desc { font-size: clamp(16px, 4.4vw, 21px); line-height: 1.55; margin: 3vw 0 5vw; max-width: 34em; } /* tucked close under the video, like desktop */

  .project-stills { position: relative; margin: 0 -4vw; }
  .project-still { position: absolute; }
}

@media (min-width: 900px) {
  .page-title {
    padding-top: calc(max(var(--header-h), 9.65vw) + 0.149 * clamp(40px, 5.3vw, 110px) - 0.149em);
    font-size: clamp(56px, 7.3vw, 140px);
  }

  .project { position: relative; }
  .project-stills { display: contents; }
  .project > *,
  .project-still,
  .project-instagram { position: absolute; }

  .project-note { font-size: clamp(14px, 1.45vw, 26px); }
  .project-desc { font-size: clamp(16px, 1.45vw, 24px); max-width: 36em; }

  /* Each hand-placed project's pieces (and its height and the space above
     it) are set in data/page-layouts.js; js/main.js turns that into CSS. */
  #films-list { padding-bottom: 9.98vw; } /* the space before the footer, after whichever film is last */
}

/* =========================================
   MUSIC VIDEOS PAGE (music-videos.html) — same building blocks as the
   Films page. Desktop matches Music Videos-Desktop.png: each video sits
   in the center column between a column of stills on either side.
   Phones: each video runs full width with two stills layered over its
   top edge and the rest collaged beneath it.
   ========================================= */
[data-project="skydancer"] .project-still { aspect-ratio: auto 1400 / 584; }
[data-project="homesick"] .project-still { aspect-ratio: auto 1400 / 780; }

/* Artist + song title above each video, in the Films loglines' font. It
   hangs just above the project (bottom: 100%) so the stills layered around
   the video keep their places, and a long title can wrap upward. */
.project-title--text {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: left;
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

@media (max-width: 899px) {
  .music-videos-page .page-title { font-size: clamp(30px, 11vw, 80px); }

  .music-videos-page .project { position: relative; }
  .music-videos-page .project-feature { position: absolute; left: 0; width: 100%; margin: 0; }
  .music-videos-page .project-stills { position: static; margin: 0; }
  .music-videos-page .project { margin-top: 21vw; }
  /* The same 16vw under the page title, measured to the song title hanging above this project (its 3vw gap + one line of text). */
  .music-videos-page .project:first-child { margin-top: calc(19vw + 1.35 * clamp(15px, 4.2vw, 20px)); }
  .music-videos-page .project-title--text {
    position: absolute;
    bottom: 100%;
    left: 4vw;
    right: 4vw;
    width: auto;
    margin: 0 0 3vw;
    font-size: clamp(15px, 4.2vw, 20px);
  }

  /* Each project's height and where its video and stills sit are set in
     data/page-layouts.js; js/main.js turns that into CSS. */
}

@media (min-width: 900px) {
  .music-videos-page .page-title { font-size: clamp(40px, 5.3vw, 110px); }
  .music-videos-page .project--simple:first-child { margin-top: 8.35vw; } /* the hand-placed videos' space above is in data/page-layouts.js */
  .music-videos-page .project-title--text {
    left: 22.21%;
    top: auto;
    bottom: 100%;
    width: 55.57%;
    margin-bottom: 1vw;
    font-size: clamp(17px, 1.7vw, 28px);
  }

  /* Each project's pieces (and its height and the space above it) are set
     in data/page-layouts.js; the song title follows the video's spot. */
}

/* =========================================
   COMMERCIALS PAGE (commercials.html) — same building blocks again, plus
   a logo + title heading and a click-to-load Instagram post per project.
   Desktop matches Commercials-Desktop.png. Phones: heading, the YouTube
   video full width, then the Instagram post beside the two stills.
   ========================================= */
.project-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--text);
}
/* screen: the Open Book logo sits on solid black; this drops the black
   into the page background so no box shows around it. */
.project-title .project-logo { width: auto; mix-blend-mode: screen; }
/* The logo + title is also a play button for the project's video: on
   hover (or tap) the title brightens to white and the pair grows slightly. */
.project-heading-play {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: inherit;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transform-origin: left center;
  transition: color 0.3s ease, transform 0.3s ease;
}
.project-heading-play:hover,
.project-heading-play:active,
.project-heading-play:focus-visible {
  color: var(--text-bright);
  transform: scale(1.03);
}
.commercials-page .project-still { aspect-ratio: auto 1400 / 788; }

.ig {
  position: relative;
  aspect-ratio: 439 / 785;
  background: #000;
}
.ig.is-sized { aspect-ratio: auto; background: none; }
.ig-button {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.ig-poster { width: 100%; height: 100%; object-fit: contain; }
.ig-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(26px, 3vw, 46px);
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s ease;
}
.ig-button:hover .ig-play,
.ig-button:focus-visible .ig-play { transform: translate(-50%, -50%) scale(1.08); }
.ig-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 600;
}
/* Fills the card until Instagram reports its real height, then takes it. */
.ig-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; border-radius: 3px; background: #fff; }
.ig.is-sized .ig-frame { position: static; }

@media (max-width: 899px) {
  .commercials-page .page-title { font-size: clamp(30px, 11vw, 80px); }

  .commercials-page .project-title { width: auto; gap: 2.5vw; margin-bottom: 4vw; font-size: 5.6vw; }

  .commercials-page .project-stills { margin-top: 4vw; }
  .project-instagram { position: absolute; }
  /* Each project's logo size, stills-area height and where its Instagram
     post and stills sit are set in data/page-layouts.js. */

}

@media (min-width: 900px) {
  .commercials-page .page-title { font-size: clamp(40px, 5.3vw, 110px); }
  .commercials-page .project--simple:first-child { margin-top: 7.85vw; } /* the hand-placed projects' space above is in data/page-layouts.js */
  .project-heading { font-size: clamp(22px, 4vw, 80px); gap: 1.1vw; }

  /* Each project's pieces, logo size, height and the space above it are
     set in data/page-layouts.js; js/main.js turns that into CSS. */
}

/* =========================================
   NEW PROJECTS — any project with  layout: "simple"  in projects.js.
   The projects above are each hand-placed with positions measured just
   for them. A new project instead lays itself out, top to bottom: title,
   video, synopsis, then its stills staggered two across (phones) or three
   across (desktop), each at its own shape, never cropped. Works on the
   Films, Music Videos, and Commercials pages with any number of stills.
   ========================================= */
.project.project--simple { position: relative; height: auto; }
.project.project--simple > *,
.project.project--simple .project-title,
.project.project--simple .project-feature,
.project.project--simple .project-desc,
.project.project--simple .project-still,
.project.project--simple .project-instagram {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: auto;
  transform: none;
}
.project.project--simple .project-title { margin: 0 0 3vw; font-size: clamp(18px, 5vw, 24px); }
.project.project--simple .project-title img { width: min(72%, 420px); }
.project.project--simple .project-title .project-logo { width: auto; height: 2.2em; } /* a client logo sits beside its name at a matching size */
.project.project--simple .project-feature { margin: 0 -4vw; }
.project.project--simple .project-desc { margin: 3vw 0 0; }
.project.project--simple .project-stills {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 3vw;
  height: auto;
  margin: 6vw 0 0;
}
.project.project--simple .project-still,
.project.project--simple .project-instagram { flex: 0 0 calc(50% - 1.5vw); min-width: 0; }
.project.project--simple .project-stills > :nth-child(even) { margin-top: 7vw; }

@media (max-width: 899px) {
  .music-videos-page .project.project--simple { margin-top: 12vw; padding: 0 4vw; }
  .music-videos-page .project.project--simple:first-child { margin-top: 16vw; } /* standard space under the page title */
}

@media (min-width: 900px) {
  .project.project--simple { margin-top: 7.3vw; padding: 0 2.43vw; } /* same gap as between the hand-placed films */
  .project.project--simple .project-title { margin-bottom: 1.2vw; font-size: clamp(20px, 1.9vw, 32px); }
  .project.project--simple .project-feature { width: 70%; margin: 0; }
  .project.project--simple .project-desc { width: 70%; margin-top: 1.2vw; }
  .project.project--simple .project-stills { gap: 1vw; margin-top: 3vw; }
  .project.project--simple .project-still,
  .project.project--simple .project-instagram { flex-basis: calc((100% - 2vw) / 3); }
  .project.project--simple .project-stills > :nth-child(even) { margin-top: 0; }
  .project.project--simple .project-stills > :nth-child(3n+2) { margin-top: 3vw; }
  /* A hand-placed project that comes after a new one keeps the usual gap
     (Music Videos' song titles hang above their project, so a bit more). */
  .project--simple + .project { margin-top: 7.3vw; }
  .music-videos-page .project--simple + .project { margin-top: 11vw; }
}

/* =========================================
   NEW-PROJECT COLLAGES — a new project with 3 or 6 stills (and no
   Instagram post) gets one of three patterns modeled on the hand-placed
   projects: varied widths, staggered heights, one small overlap, and on
   desktop one or two stills beside the video, one at its top and one at
   its bottom (pattern 2 puts the video on the right). js/main.js picks the pattern; everything flows, so heights
   are never guessed. Phones: stills alternate sides below the video.
   ========================================= */
.project.project--simple.has-collage .project-stills {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2vw;
  row-gap: 3vw;
  align-items: start;
}
.project.project--simple.has-collage .project-stills > * { margin: 0; flex: none; min-width: 0; }
  .project--simple.collage-1.stills-6 .project-stills > :nth-child(1) { grid-column: 1 / 9; grid-row: 1; }
  .project--simple.collage-1.stills-6 .project-stills > :nth-child(2) { grid-column: 8 / 13; grid-row: 1; margin-top: 14vw; position: relative; z-index: 1; }
  .project--simple.collage-1.stills-6 .project-stills > :nth-child(3) { grid-column: 1 / 6; grid-row: 2; margin-top: 2vw; }
  .project--simple.collage-1.stills-6 .project-stills > :nth-child(4) { grid-column: 6 / 13; grid-row: 2; margin-top: 6vw; }
  .project--simple.collage-1.stills-6 .project-stills > :nth-child(5) { grid-column: 2 / 9; grid-row: 3; }
  .project--simple.collage-1.stills-6 .project-stills > :nth-child(6) { grid-column: 9 / 13; grid-row: 3; margin-top: 7vw; }
  .project--simple.collage-2.stills-6 .project-stills > :nth-child(1) { grid-column: 5 / 13; grid-row: 1; }
  .project--simple.collage-2.stills-6 .project-stills > :nth-child(2) { grid-column: 1 / 6; grid-row: 1; margin-top: 14vw; position: relative; z-index: 1; }
  .project--simple.collage-2.stills-6 .project-stills > :nth-child(3) { grid-column: 7 / 13; grid-row: 2; margin-top: 2vw; }
  .project--simple.collage-2.stills-6 .project-stills > :nth-child(4) { grid-column: 1 / 8; grid-row: 2; margin-top: 6vw; }
  .project--simple.collage-2.stills-6 .project-stills > :nth-child(5) { grid-column: 5 / 12; grid-row: 3; }
  .project--simple.collage-2.stills-6 .project-stills > :nth-child(6) { grid-column: 1 / 5; grid-row: 3; margin-top: 7vw; }
  .project--simple.collage-3.stills-6 .project-stills > :nth-child(1) { grid-column: 1 / 13; grid-row: 1; }
  .project--simple.collage-3.stills-6 .project-stills > :nth-child(2) { grid-column: 1 / 7; grid-row: 2; }
  .project--simple.collage-3.stills-6 .project-stills > :nth-child(3) { grid-column: 7 / 13; grid-row: 2; margin-top: 6vw; }
  .project--simple.collage-3.stills-6 .project-stills > :nth-child(4) { grid-column: 1 / 8; grid-row: 3; margin-top: 1vw; }
  .project--simple.collage-3.stills-6 .project-stills > :nth-child(5) { grid-column: 8 / 13; grid-row: 3; margin-top: 5vw; }
  .project--simple.collage-3.stills-6 .project-stills > :nth-child(6) { grid-column: 3 / 10; grid-row: 4; margin-top: -2vw; position: relative; z-index: 1; }
  .project--simple.collage-1.stills-3 .project-stills > :nth-child(1) { grid-column: 1 / 9; grid-row: 1; }
  .project--simple.collage-1.stills-3 .project-stills > :nth-child(2) { grid-column: 8 / 13; grid-row: 1; margin-top: 14vw; position: relative; z-index: 1; }
  .project--simple.collage-1.stills-3 .project-stills > :nth-child(3) { grid-column: 3 / 11; grid-row: 2; margin-top: 2vw; }
  .project--simple.collage-2.stills-3 .project-stills > :nth-child(1) { grid-column: 5 / 13; grid-row: 1; }
  .project--simple.collage-2.stills-3 .project-stills > :nth-child(2) { grid-column: 1 / 6; grid-row: 1; margin-top: 14vw; position: relative; z-index: 1; }
  .project--simple.collage-2.stills-3 .project-stills > :nth-child(3) { grid-column: 2 / 10; grid-row: 2; margin-top: 2vw; }
  .project--simple.collage-3.stills-3 .project-stills > :nth-child(1) { grid-column: 1 / 13; grid-row: 1; }
  .project--simple.collage-3.stills-3 .project-stills > :nth-child(2) { grid-column: 1 / 7; grid-row: 2; }
  .project--simple.collage-3.stills-3 .project-stills > :nth-child(3) { grid-column: 7 / 13; grid-row: 2; margin-top: 6vw; }

@media (min-width: 900px) {
  .project.project--simple.has-collage {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1vw;
    row-gap: 1vw;
    align-items: start;
  }
  .project.project--simple.has-collage .project-stills { display: contents; }
  .project.project--simple.has-collage .project-title { grid-row: 1; margin: 0 0 0.2vw; }
  .project.project--simple.has-collage .project-feature { grid-row: 2; width: auto; margin: 0; }
  .project.project--simple.has-collage .project-desc { grid-row: 3; width: auto; margin: 0.2vw 0 1vw; }
  .project.project--simple.collage-1 .project-title,
  .project.project--simple.collage-1 .project-feature,
  .project.project--simple.collage-1 .project-desc,
  .project.project--simple.collage-3 .project-title,
  .project.project--simple.collage-3 .project-feature,
  .project.project--simple.collage-3 .project-desc { grid-column: 1 / 9; }
  .project.project--simple.collage-2 .project-title,
  .project.project--simple.collage-2 .project-feature,
  .project.project--simple.collage-2 .project-desc { grid-column: 5 / 13; }
  .project--simple.collage-1.stills-6 .project-stills > :nth-child(1) { grid-column: 9 / 13; grid-row: 2; margin-top: 1.5vw; }
  .project--simple.collage-1.stills-6 .project-stills > :nth-child(2) { grid-column: 10 / 13; grid-row: 2; align-self: end; }
  .project--simple.collage-1.stills-6 .project-stills > :nth-child(3) { grid-column: 1 / 5; grid-row: 4; margin-top: 2vw; }
  .project--simple.collage-1.stills-6 .project-stills > :nth-child(4) { grid-column: 5 / 10; grid-row: 4; margin-top: 4.5vw; }
  .project--simple.collage-1.stills-6 .project-stills > :nth-child(5) { grid-column: 10 / 13; grid-row: 4; margin-top: 1vw; }
  .project--simple.collage-1.stills-6 .project-stills > :nth-child(6) { grid-column: 3 / 8; grid-row: 5; margin-top: -2vw; position: relative; z-index: 1; }
  .project--simple.collage-2.stills-6 .project-stills > :nth-child(1) { grid-column: 1 / 5; grid-row: 2; }
  .project--simple.collage-2.stills-6 .project-stills > :nth-child(2) { grid-column: 2 / 5; grid-row: 2; align-self: end; }
  .project--simple.collage-2.stills-6 .project-stills > :nth-child(3) { grid-column: 1 / 6; grid-row: 4; margin-top: 3vw; }
  .project--simple.collage-2.stills-6 .project-stills > :nth-child(4) { grid-column: 6 / 9; grid-row: 4; }
  .project--simple.collage-2.stills-6 .project-stills > :nth-child(5) { grid-column: 9 / 13; grid-row: 4; margin-top: 5vw; }
  .project--simple.collage-2.stills-6 .project-stills > :nth-child(6) { grid-column: 6 / 11; grid-row: 5; margin-top: -2vw; position: relative; z-index: 1; }
  .project--simple.collage-3.stills-6 .project-stills > :nth-child(1) { grid-column: 9 / 13; grid-row: 2; align-self: end; }
  .project--simple.collage-3.stills-6 .project-stills > :nth-child(2) { grid-column: 1 / 7; grid-row: 4; margin-top: 1vw; }
  .project--simple.collage-3.stills-6 .project-stills > :nth-child(3) { grid-column: 7 / 10; grid-row: 4; margin-top: 5vw; }
  .project--simple.collage-3.stills-6 .project-stills > :nth-child(4) { grid-column: 10 / 13; grid-row: 4; margin-top: 2vw; }
  .project--simple.collage-3.stills-6 .project-stills > :nth-child(5) { grid-column: 2 / 6; grid-row: 5; margin-top: -1.5vw; position: relative; z-index: 1; }
  .project--simple.collage-3.stills-6 .project-stills > :nth-child(6) { grid-column: 6 / 11; grid-row: 5; margin-top: 2vw; }
  .project--simple.collage-1.stills-3 .project-stills > :nth-child(1) { grid-column: 9 / 13; grid-row: 2; margin-top: 1.5vw; }
  .project--simple.collage-1.stills-3 .project-stills > :nth-child(2) { grid-column: 10 / 13; grid-row: 2; align-self: end; }
  .project--simple.collage-1.stills-3 .project-stills > :nth-child(3) { grid-column: 3 / 8; grid-row: 4; margin-top: 1vw; }
  .project--simple.collage-2.stills-3 .project-stills > :nth-child(1) { grid-column: 1 / 5; grid-row: 2; }
  .project--simple.collage-2.stills-3 .project-stills > :nth-child(2) { grid-column: 2 / 5; grid-row: 2; align-self: end; }
  .project--simple.collage-2.stills-3 .project-stills > :nth-child(3) { grid-column: 7 / 12; grid-row: 4; margin-top: 1vw; }
  .project--simple.collage-3.stills-3 .project-stills > :nth-child(1) { grid-column: 9 / 13; grid-row: 2; margin-top: 3vw; }
  .project--simple.collage-3.stills-3 .project-stills > :nth-child(2) { grid-column: 1 / 6; grid-row: 4; margin-top: 1vw; }
  .project--simple.collage-3.stills-3 .project-stills > :nth-child(3) { grid-column: 6 / 10; grid-row: 4; margin-top: 4vw; }
}

/* =========================================
   NEW-PROJECT LAYOUTS FOR MUSIC VIDEOS AND COMMERCIALS — the house
   layout of each page, applied automatically to new projects there
   (js/main.js adds the classes; Films uses the collages above).
   Music Videos: the video centered with a column of stills on each side,
   like Skydancer and Homesick; on phones two stills above the video and
   the rest staggered below. Commercials: logo + title, the video beside
   the Instagram post (sides alternate project to project, like The Open
   Book and Jitlada), stills under the video (two across beside the Instagram post, or
   in rows of three without one); on phones the Instagram post sits beside
   a column of stills.
   ========================================= */
/* Music Videos — phones */
.music-videos-page .project.project--simple .project-title { font-size: clamp(15px, 4.2vw, 20px); }
.project.project--simple.layout-mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3vw;
  row-gap: 3vw;
  align-items: start;
}
.project.project--simple.layout-mv .project-title { grid-column: 1 / -1; grid-row: 1; margin: 0; }
.project.project--simple.layout-mv .project-feature { grid-column: 1 / -1; grid-row: 3; }
.project.project--simple.layout-mv .project-desc { grid-column: 1 / -1; grid-row: 4; margin: 0; }
.project.project--simple.layout-mv .project-stills,
.project.project--simple.layout-mv .mv-column { display: contents; }
.project.project--simple.layout-mv .project-still { margin: 0; min-width: 0; }
.project.project--simple.layout-mv .mv-column--left .project-still { grid-column: 1; }
.project.project--simple.layout-mv .mv-column--right .project-still { grid-column: 2; }
.project.project--simple.layout-mv .mv-column--left > :first-child { grid-row: 2; }
.project.project--simple.layout-mv .mv-column--right > :first-child { grid-row: 2; margin-top: 5vw; }

/* Commercials — phones */
.commercials-page .project.project--simple .project-title { font-size: 5.6vw; }
.commercials-page .project.project--simple .project-title .project-logo { height: 1.2em; }
.commercials-page .project.project--simple .project-title--text { text-decoration: none; }
.project.project--simple.layout-com.has-instagram .project-stills {
  display: grid;
  grid-template-columns: 44fr 54fr;
  column-gap: 2vw;
  row-gap: 3vw;
  align-items: start;
}
.project.project--simple.layout-com.has-instagram .project-stills > * { margin: 0; min-width: 0; }
.project.project--simple.layout-com.has-instagram .project-instagram { grid-column: 1; grid-row: 1 / span 3; }
.project.project--simple.layout-com.has-instagram .project-still { grid-column: 2; }
.project.project--simple.layout-com.has-instagram.video-right .project-stills { grid-template-columns: 54fr 44fr; }
.project.project--simple.layout-com.has-instagram.video-right .project-instagram { grid-column: 2; }
.project.project--simple.layout-com.has-instagram.video-right .project-still { grid-column: 1; }

@media (min-width: 900px) {
  /* Music Videos — desktop: the same three columns as Skydancer/Homesick */
  .music-videos-page .project.project--simple .project-title { font-size: clamp(17px, 1.7vw, 28px); }
  .project.project--simple.layout-mv {
    grid-template-columns: 21.36fr 55.57fr 21.36fr;
    column-gap: 0.855%;
    row-gap: 1vw;
    padding: 0;
  }
  .project.project--simple.layout-mv .project-title { grid-column: 2; }
  .project.project--simple.layout-mv .project-feature { grid-column: 2; grid-row: 2; width: auto; margin: 0; }
  .project.project--simple.layout-mv .project-desc { grid-column: 2; grid-row: 3; width: auto; }
  .project.project--simple.layout-mv .mv-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1vw;
    grid-row: 2;
    align-self: stretch;
  }
  .project.project--simple.layout-mv .mv-column--left { grid-column: 1; }
  .project.project--simple.layout-mv .mv-column--right { grid-column: 3; padding-top: 1.2vw; }
  .project.project--simple.layout-mv .mv-column .project-still { margin: 0; flex: none; width: 100%; }

  /* Commercials — desktop */
  .commercials-page .project.project--simple .project-title { font-size: clamp(22px, 4vw, 80px); }
  .project.project--simple.layout-com {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1vw;
    row-gap: 1vw;
    align-items: start;
  }
  .project.project--simple.layout-com .project-stills,
  .project.project--simple.layout-com.has-instagram .project-stills { display: contents; }
  .project.project--simple.layout-com .project-title { grid-column: 1 / -1; grid-row: 1; margin: 0 0 0.3vw; }
  .project.project--simple.layout-com .project-feature { grid-row: 2; width: auto; margin: 0; }
  .project.project--simple.layout-com .project-desc { grid-row: 3; width: auto; margin: 0.2vw 0 1vw; }
  .project.project--simple.layout-com .project-still,
  .project.project--simple.layout-com .project-instagram { margin: 0; min-width: 0; }
  .project.project--simple.layout-com.video-left .project-feature,
  .project.project--simple.layout-com.video-left .project-desc { grid-column: 1 / 9; }
  .project.project--simple.layout-com.video-right .project-feature,
  .project.project--simple.layout-com.video-right .project-desc { grid-column: 5 / 13; }
  .project.project--simple.layout-com.video-left .project-instagram { grid-column: 9 / 13; grid-row: 2 / var(--ig-end, 4); }
  .project.project--simple.layout-com.video-right .project-instagram { grid-column: 1 / 5; grid-row: 2 / var(--ig-end, 4); }
  /* With an Instagram post: stills two across under the video (the card runs down the side, spanning exactly those rows — set in js/main.js), like The Open Book and Jitlada. */
  .project.project--simple.layout-com.has-instagram .project-still:nth-child(1) { grid-row: 4; margin-top: 0; }
  .project.project--simple.layout-com.has-instagram .project-still:nth-child(2) { grid-row: 4; margin-top: 2vw; }
  .project.project--simple.layout-com.has-instagram .project-still:nth-child(3) { grid-row: 5; margin-top: 0; }
  .project.project--simple.layout-com.has-instagram .project-still:nth-child(4) { grid-row: 5; margin-top: 2vw; }
  .project.project--simple.layout-com.has-instagram .project-still:nth-child(5) { grid-row: 6; margin-top: 0; }
  .project.project--simple.layout-com.has-instagram .project-still:nth-child(6) { grid-row: 6; margin-top: 2vw; }
  .project.project--simple.layout-com.has-instagram .project-still:nth-child(7) { grid-row: 7; margin-top: 0; }
  .project.project--simple.layout-com.has-instagram .project-still:nth-child(8) { grid-row: 7; margin-top: 2vw; }
  .project.project--simple.layout-com.video-left.has-instagram .project-still:nth-child(odd) { grid-column: 1 / 5; }
  .project.project--simple.layout-com.video-left.has-instagram .project-still:nth-child(even) { grid-column: 5 / 9; }
  .project.project--simple.layout-com.video-right.has-instagram .project-still:nth-child(odd) { grid-column: 5 / 9; }
  .project.project--simple.layout-com.video-right.has-instagram .project-still:nth-child(even) { grid-column: 9 / 13; }
  .project.project--simple.layout-com:not(.has-instagram) .project-still:nth-child(1) { grid-row: 2; align-self: end; }
  .project.project--simple.layout-com.video-left:not(.has-instagram) .project-still:nth-child(1) { grid-column: 9 / 13; }
  .project.project--simple.layout-com.video-right:not(.has-instagram) .project-still:nth-child(1) { grid-column: 1 / 5; }
  .project.project--simple.layout-com:not(.has-instagram) .project-still:nth-child(2) { grid-column: 1 / 5; grid-row: 4; margin-top: 0; }
  .project.project--simple.layout-com:not(.has-instagram) .project-still:nth-child(3) { grid-column: 5 / 9; grid-row: 4; margin-top: 2vw; }
  .project.project--simple.layout-com:not(.has-instagram) .project-still:nth-child(4) { grid-column: 9 / 13; grid-row: 4; margin-top: 0.8vw; }
  .project.project--simple.layout-com:not(.has-instagram) .project-still:nth-child(5) { grid-column: 1 / 5; grid-row: 5; margin-top: 0; }
  .project.project--simple.layout-com:not(.has-instagram) .project-still:nth-child(6) { grid-column: 5 / 9; grid-row: 5; margin-top: 2vw; }
  .project.project--simple.layout-com:not(.has-instagram) .project-still:nth-child(7) { grid-column: 9 / 13; grid-row: 5; margin-top: 0.8vw; }
  .project.project--simple.layout-com:not(.has-instagram) .project-still:nth-child(8) { grid-column: 1 / 5; grid-row: 6; margin-top: 0; }
  .project.project--simple.layout-com:not(.has-instagram) .project-still:nth-child(9) { grid-column: 5 / 9; grid-row: 6; margin-top: 2vw; }
  .project.project--simple.layout-com:not(.has-instagram) .project-still:nth-child(10) { grid-column: 9 / 13; grid-row: 6; margin-top: 0.8vw; }
}

/* =========================================
   CUSTOMIZED NEW PROJECTS — a new project whose layout was customized in
   AlexHelper keeps its fonts and colors from the house style
   above, but its pieces are placed by hand like the original projects
   (positions in data/page-layouts.js; js/main.js adds .project--placed).
   ========================================= */
@media (min-width: 900px) {
  .project.project--simple.project--placed { display: block; }
  .project.project--simple.project--placed > *,
  .project.project--simple.project--placed .project-stills > * { position: absolute; margin: 0; }
  .project.project--simple.project--placed .project-stills { display: contents; }
}
@media (max-width: 899px) {
  .project.project--simple.project--placed .project-stills { display: block; position: relative; }
  .project.project--simple.project--placed .project-stills > * { position: absolute; margin: 0; }
  /* placed as a whole on phones too (Music Videos): every piece sits inside the project */
  .project.project--simple.project--placed.project--phone-whole > *,
  .project.project--simple.project--placed.project--phone-whole .project-stills > * { position: absolute; margin: 0; }
  .project.project--simple.project--placed.project--phone-whole .project-stills { display: contents; }
}

/* =========================================
   ABOUT PAGE (about.html) — the bio centered between four photos.
   Desktop matches About-Desktop.png. Phones: the two wide photos
   staggered, the bio and Contact link, then the two tall photos.
   ========================================= */
.about-photo { width: 100%; height: auto; }
.about-photos--top .about-photo { aspect-ratio: auto 3 / 2; }
.about-photos--bottom .about-photo { aspect-ratio: auto 2 / 3; }

/* The bio reads like the Films loglines: Jost at its regular weight,
   open line spacing, left-aligned. */
.about-text {
  text-align: left;
  color: var(--text);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.6;
}
.about-text p { margin: 0; }
.about-text p + p { margin-top: 1.1em; }
/* Contact: a quiet outlined button (the Contact page's Send button in
   outline form) that fills white, with the arrow nudging forward, on
   hover or tap. */
.about-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  min-height: 48px;
  padding: 0.8em 1.6em;
  border: 1px solid rgba(255, 255, 255, 0.55);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-bright);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.about-contact svg { flex: none; transition: transform 0.3s ease; }
.about-contact:hover,
.about-contact:active,
.about-contact:focus-visible {
  background: var(--text-bright);
  border-color: var(--text-bright);
  color: #0a0a0a;
}
.about-contact:hover svg,
.about-contact:active svg,
.about-contact:focus-visible svg { transform: translateX(4px); }

@media (max-width: 899px) {
  .about { padding-top: calc(var(--header-h) + 2vw); }
  .about-photos { position: relative; }
  .about-photo { position: absolute; }

  .about-photos--top { height: 42vw; }
  .about-photos--top .about-photo:nth-child(1) { left: 0;   top: 0;   width: 60%; }
  .about-photos--top .about-photo:nth-child(2) { left: 62%; top: 9vw; width: 38%; }

  .about-text { padding: 0 7vw; margin: 9vw 0 10vw; font-size: clamp(16px, 4.4vw, 21px); line-height: 1.55; }
  .about-contact { margin-top: 1.8em; }

  .about-photos--bottom { height: 77vw; }
  .about-photos--bottom .about-photo:nth-child(1) { left: 0;   top: 0;    width: 50%; }
  .about-photos--bottom .about-photo:nth-child(2) { left: 54%; top: 10vw; width: 40%; }
}

@media (min-width: 900px) {
  .about { position: relative; height: 66vw; }
  .about-photos { display: contents; }
  .about-photo,
  .about-text { position: absolute; }

  .about-photos--top .about-photo:nth-child(1)    { left: 2%;      top: 6.64vw;  width: 23.29%; } /* slate */
  .about-photos--top .about-photo:nth-child(2)    { left: 74.71%;  top: 13.64vw; width: 23.29%; } /* candlelight */
  .about-photos--bottom .about-photo:nth-child(1) { left: 2%;      top: 30.86vw; width: 19.29%; } /* crew */
  .about-photos--bottom .about-photo:nth-child(2) { left: 78.71%;  top: 40vw;    width: 15.21%; } /* portrait */

  .about-text { left: 30.29%; top: 22.9vw; width: 39.36%; font-size: clamp(16px, 1.45vw, 24px); }
  .about-contact { margin-top: 2.4em; font-size: clamp(13px, 0.95vw, 16px); }
}

/* =========================================
   WRITINGS PAGE (a page added in AlexHelper with the "Writings" style) —
   published works, then your own writing, set like a literary journal:
   a quiet section label with a hairline, big bright titles in the heading
   font, and the body text in Jost like the Films loglines. Pictures (a
   book cover, a magazine page) keep their own shape, never cropped.
   A post opens in the page itself, as one centered column for reading.
   ========================================= */
.writings-page #writings { padding: 14vw var(--gutter) 16vw; max-width: 1180px; margin: 0 auto; }
.writings-section + .writings-section { margin-top: 18vw; }
.writings-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 8vw;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.writings-heading::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.press-list,
.post-list { list-style: none; margin: 0; padding: 0; }

.press-item { display: grid; gap: 6vw; }
.press-item + .press-item { margin-top: 14vw; }
.press-image { width: min(62%, 320px); height: auto; }
.press-title,
.post-title,
.post-heading {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-bright);
}
.press-title { font-size: clamp(24px, 7vw, 40px); }
.press-title a { transition: opacity 0.3s ease; }
.press-title a:hover,
.press-title a:focus-visible { opacity: 0.75; }
.press-meta,
.post-date {
  margin: 12px 0 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.press-blurb,
.post-excerpt {
  margin: 14px 0 0;
  max-width: 34em;
  font-weight: 400;
  font-size: clamp(16px, 4.4vw, 20px);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--text);
}
.press-link,
.post-more,
.post-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.3s ease;
}
.press-link,
.post-more { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.press-link:hover,
.press-link:focus-visible,
.post-link:hover .post-more,
.post-back:hover,
.post-back:focus-visible { color: var(--text-bright); }

.post-item + .post-item { border-top: 1px solid var(--border); }
.post-link { display: block; padding: 8vw 0; }
.post-list .post-date { margin: 0 0 10px; }
.post-title { font-size: clamp(22px, 6.4vw, 34px); transition: opacity 0.3s ease; }
.post-link:hover .post-title,
.post-link:focus-visible .post-title { opacity: 0.75; }

.post-view { max-width: 38em; margin: 0 auto; }
.post-back { margin-top: 0; color: var(--text-dim); }
.post-view .post-date { margin-top: 12vw; }
.post-heading { margin-top: 10px; font-size: clamp(30px, 9vw, 64px); line-height: 1.05; }
.post-image { display: block; width: 100%; height: auto; margin-top: 8vw; }
.post-body { margin-top: 8vw; }
.post-body p {
  margin: 0 0 1.2em;
  font-size: clamp(17px, 4.6vw, 21px);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--text);
}
.post-nav { display: grid; gap: 22px; margin-top: 14vw; padding-top: 7vw; border-top: 1px solid var(--border); }
.post-nav-link { display: block; }
.post-nav-label { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.post-nav-title { display: block; margin-top: 6px; font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: var(--text); transition: color 0.3s ease; }
.post-nav-link:hover .post-nav-title,
.post-nav-link:focus-visible .post-nav-title { color: var(--text-bright); }
.writings-empty { margin: 0; padding: 20vw 0; text-align: center; color: var(--text-dim); }

@media (min-width: 900px) {
  .writings-page #writings { padding: 7vw 2.43vw 9.98vw; }
  .writings-section + .writings-section { margin-top: 8vw; }
  .writings-heading { margin-bottom: 3.5vw; font-size: 13px; }
  .press-item.has-image { grid-template-columns: minmax(0, 320px) 1fr; gap: 4vw; align-items: start; }
  .press-image { width: 100%; }
  .press-item + .press-item { margin-top: 5vw; }
  .press-title { font-size: clamp(28px, 2.6vw, 48px); }
  .press-blurb,
  .post-excerpt { font-size: clamp(16px, 1.45vw, 24px); }
  .post-link { display: grid; grid-template-columns: 220px 1fr; gap: 3vw; padding: 3vw 0; }
  .post-list .post-date { margin: 0.7em 0 0; }
  .post-title { font-size: clamp(26px, 2.2vw, 40px); }
  .post-view .post-date { margin-top: 4vw; }
  .post-heading { font-size: clamp(40px, 4vw, 72px); }
  .post-image { margin-top: 3vw; }
  .post-body { margin-top: 3vw; }
  .post-body p { font-size: clamp(18px, 1.35vw, 22px); }
  .post-nav { grid-template-columns: 1fr 1fr; margin-top: 5vw; padding-top: 2.5vw; }
  .post-nav-link:nth-child(2) { text-align: right; }
}

/* =========================================
   CONTACT PAGE (contact.html) — underlined title, then a simple form
   with underline-only fields, as in Contact-Desktop.png. "Send" is a
   solid button so it clearly reads as the thing to press.
   ========================================= */
.contact-page .page-title {
  font-size: clamp(30px, 11vw, 80px);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
}

/* A short, warm opening line in the Films loglines' style, so the page
   reads as an invitation. It carries the standard phone spacing under
   the page title. */
.contact-intro {
  margin: 16vw 6vw 0; /* phones: the standard space under the page title */
  font-weight: 400;
  font-size: clamp(16px, 4.4vw, 21px);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--text);
}

.contact-form {
  margin: 8vw auto 0;
  padding: 0 6vw;
  font-size: 16px; /* 16px+ stops phones zooming in when a field is tapped */
  color: var(--text);
}
.contact-name { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Labels: small spaced capitals, quiet grey — like a caption, not a form. */
.contact-field label {
  display: block;
  padding: 0;
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.contact-optional { text-transform: none; letter-spacing: 0.02em; color: var(--text-faint); margin-left: 0.2em; }

.contact-row { display: flex; flex-direction: column; gap: 0 2.5vw; }
.contact-field { margin-bottom: 1.4em; flex: 1 1 0; min-width: 0; }

/* Slim fields: just a thin line to write on, brightening while typing. */
.contact-field input,
.contact-field textarea {
  display: block;
  width: 100%;
  margin-top: 0.2em;
  padding: 0.3em 0 0.35em;
  font: inherit;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--text-bright);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  transition: border-color 0.3s ease;
}
.contact-field textarea { min-height: 4.6em; resize: vertical; field-sizing: content; }
.contact-field input::placeholder,
.contact-field textarea::placeholder { color: var(--text-faint); opacity: 1; }
.contact-field input:hover,
.contact-field textarea:hover { border-bottom-color: rgba(255, 255, 255, 0.55); }
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-bottom-color: var(--text-bright);
}

.contact-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  min-height: 52px;
  margin-top: 0.4em;
  padding: 0.9em 2.4em;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: var(--text-bright);
  border: 1.5px solid var(--text-bright);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.contact-send svg { transition: transform 0.3s ease; }
.contact-send:hover,
.contact-send:focus-visible {
  background: transparent;
  color: var(--text-bright);
  transform: scale(1.03);
}
.contact-send:hover svg,
.contact-send:focus-visible svg { transform: translateX(4px); }

.contact-status:empty { display: none; }
.contact-status { margin: 1.2em 0 0; font-size: 15px; color: var(--text); line-height: 1.5; }
/* The one quiet line with the email address, under the form. */
.contact-direct {
  margin: 7vw auto 14vw;
  padding: 0 6vw;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--text-dim);
}
.contact-direct a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; transition: color 0.3s ease, text-decoration-color 0.3s ease; }
.contact-direct a:hover,
.contact-direct a:focus-visible { color: var(--text-bright); text-decoration-color: currentColor; }


@media (min-width: 900px) {
  .contact-page .page-title { font-size: clamp(40px, 5.3vw, 110px); }
  .contact-intro {
    width: 47.5%;
    margin: 10vw auto 0;
    font-size: clamp(16px, 1.45vw, 24px);
  }
  .contact-form {
    width: 47.5%;
    margin-top: 2.6vw;
    padding: 0;
    font-size: clamp(15px, 1.25vw, 20px);
  }
  .contact-direct { width: 47.5%; margin: 2.2vw auto 6vw; padding: 0; font-size: clamp(14px, 1.05vw, 18px); }
  .contact-row { flex-direction: row; }
  .contact-field { margin-bottom: 1.3em; }
  .contact-send { width: auto; min-height: 0; font-size: clamp(13px, 1.05vw, 18px); }
}

/* =========================================
   FOOTER — your name centered on top with "Los Angeles, CA" just under
   it. Phones: the menu links in a centered row beneath (wrapping onto a
   second line on narrow screens), then Contact on the left and the
   social icons on the right, sharing one line. Desktop: one band under
   the name — Contact left, social icons center, menu links right.
   Unwrapping .footer-top/.footer-bottom with display:contents lets every
   element become a direct grid item, whichever wrapper it's nested in.
   ========================================= */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 22px var(--gutter) 20px;
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name    name"
    "address address"
    "navlist navlist"
    "contact social";
  align-items: center;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.footer-top,
.footer-bottom {
  display: contents;
}

.footer-spacer { display: none; }

.footer-name {
  grid-area: name;
  justify-self: center;
  align-self: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(28px, 6vw, 44px);
  color: var(--text-bright);
  text-decoration: none;
  text-align: center;
  transition: transform 0.25s ease;
  display: inline-block;
}
.footer-name:hover,
.footer-name:focus-visible {
  transform: scale(1.04);
}

.footer-top nav {
  grid-area: navlist;
  justify-self: center;
  margin-top: 18px;
}
.footer-top nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
}
/* The narrowest phones: a tidy 2 × 2 block instead of a lone last link. */
@media (max-width: 359px) {
  .footer-top nav ul {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    justify-items: center;
    gap: 8px 22px;
  }
}
.footer-top nav a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--text);
  display: inline-block;
  transition: color 0.25s ease, transform 0.25s ease;
}
.footer-top nav a:hover,
.footer-top nav a:focus-visible {
  color: var(--text-bright);
  transform: scale(1.06);
}

/* Contact: a compact outlined button (a smaller cousin of the About
   page's) that fills white, arrow nudging forward, on hover or tap. */
.footer-contact {
  grid-area: contact;
  justify-self: start;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  /* Scales down a touch on slender phones so it never looks oversized. */
  min-height: clamp(38px, 11.7vw, 44px);
  padding: 0 clamp(10px, 4vw, 15px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(11px, 3.47vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.footer-contact svg { flex: none; width: 1.08em; height: 1.08em; transition: transform 0.3s ease; }
.footer-contact:hover,
.footer-contact:active,
.footer-contact:focus-visible {
  background: var(--text-bright);
  border-color: var(--text-bright);
  color: #0a0a0a;
}
.footer-contact:hover svg,
.footer-contact:active svg,
.footer-contact:focus-visible svg { transform: translateX(3px); }

.footer-social {
  grid-area: social;
  justify-self: end;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-social a {
  color: var(--text);
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--text-bright);
  transform: scale(1.15);
}
.footer-social svg { width: 36px; height: 36px; }

.footer-address {
  grid-area: address;
  justify-self: center;
  margin: 2px 0 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

@media (min-width: 900px) {
  .site-footer {
    padding: 28px var(--gutter) 26px;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "name    name    name"
      "address address address"
      "contact social  navlist";
  }
  .footer-name { font-size: clamp(32px, 4vw, 44px); }
  .footer-address { font-size: 14px; }
  .footer-top nav { justify-self: end; margin-top: 26px; }
  .footer-top nav ul { gap: 8px 28px; }
  .footer-top nav a { font-size: 16px; }
  .footer-contact { min-height: 44px; padding: 0 1.15em; font-size: 14px; margin-top: 26px; }
  .footer-social { justify-self: center; margin-top: 26px; gap: 24px; }
  .footer-social svg { width: 46px; height: 46px; }
}

/* =========================================
   ADDED TEXT — words added in AlexHelper between a page's pieces, in the
   site's own text styles:
     title    — like a page's big title
     heading  — like a Writings title (Helvetica Neue, bold, bright)
     label    — small spaced capitals, like a section label
     body     — like the About bio
     logline  — like the Films loglines
     note     — like the small note above The Prophet
   A piece of text made bigger or smaller in AlexHelper gets a
   .text-size wrapper inside it (in em, so it scales with the screen).
   ========================================= */
.text-block {
  box-sizing: content-box;
  max-width: 38em;
  margin: 12vw 6vw 0;
  color: var(--text);
  overflow-wrap: break-word;
}
.text-block p { margin: 0; }
.text-block p + p { margin-top: 1.1em; }
.text-block.is-center { margin-left: auto; margin-right: auto; }
.text-block.is-right { margin-left: auto; }
#main > .text-block:last-child { margin-bottom: 12vw; }
.text-block a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.text-block a:hover,
.text-block a:focus-visible { color: var(--text-bright); text-decoration-color: currentColor; }

.text-block--title {
  max-width: none;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 11vw, 80px);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--overlay-label);
}
.text-block--heading {
  max-width: 20em;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 7vw, 48px);
  line-height: 1.1;
  color: var(--text-bright);
}
.text-block--label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.text-block--body {
  font-weight: 400;
  font-size: clamp(16px, 4.4vw, 21px);
  line-height: 1.6;
  letter-spacing: 0.01em;
}
.text-block--logline {
  max-width: 34em;
  font-weight: 400;
  font-size: clamp(16px, 4.4vw, 21px);
  line-height: 1.55;
  letter-spacing: 0.01em;
}
.text-block--note { font-size: clamp(13px, 3.6vw, 22px); }

@media (min-width: 900px) {
  .text-block { margin: 5vw 2.43vw 0; }
  #main > .text-block:last-child { margin-bottom: 6vw; }
  .text-block--title { font-size: clamp(40px, 5.3vw, 110px); }
  .text-block--heading { font-size: clamp(30px, 3.2vw, 64px); }
  .text-block--label { font-size: 13px; }
  .text-block--body { font-size: clamp(17px, 1.45vw, 24px); }
  .text-block--logline { font-size: clamp(16px, 1.45vw, 24px); max-width: 36em; }
  .text-block--note { font-size: clamp(13px, 1.2vw, 22px); }
}

/* Links inside formatted text (a logline, the bio, the Contact page's
   opening line, writing…), made with AlexHelper's Text tool: the same quiet
   underline as the Contact page's email link. */
.project-desc a,
.about-bio a,
.contact-intro a,
.press-blurb a,
.post-excerpt a,
.post-body a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.project-desc a:hover, .project-desc a:focus-visible,
.about-bio a:hover, .about-bio a:focus-visible,
.contact-intro a:hover, .contact-intro a:focus-visible,
.press-blurb a:hover, .press-blurb a:focus-visible,
.post-excerpt a:hover, .post-excerpt a:focus-visible,
.post-body a:hover, .post-body a:focus-visible { color: var(--text-bright); text-decoration-color: currentColor; }