/* ---------------------------------------------------------------
   hugobone.com
   Display face: change --font-display / --display-stretch below.
   --------------------------------------------------------------- */

:root {
  --bg: #ffffff;
  --ink: #000;
  /* Hot pink, chosen 17 Sep to replace the amber. These three are only
     fallbacks: data/site.json's "colors" block is the source of truth and
     build.py injects it inline, so change it there, not here.
     #d6006e is 5.14:1 on white. The old amber was 1.79:1, which failed the
     4.5:1 floor for the credits line and the buttons. A brighter hot pink
     (#ff69b4 is 2.65:1, deeppink 3.64:1) will not clear it, so do not
     "brighten it up" without rechecking the ratio. */
  --accent: #d6006e;   /* manifesto emphasis, rollovers, focus rings */
  --credits: #d6006e;  /* work-page credits and section-head notes */
  --button: #d6006e;   /* outlined buttons */

  --font-display: "Archivo", Helvetica, Arial, sans-serif;
  --display-stretch: 125%;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1159px;
  --gutter: 24px;
  --grid-gap-x: 21px;
  --grid-gap-y: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
em { font-style: normal; color: var(--accent); }

.display {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 700;
  text-transform: uppercase;
}

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- header ---------- */

.site-header { padding: 44px 0 30px; }
.site-header .wrap {
  /* 64px across, 28px down once the nav drops under the name: the two used
     to sit 24px and 14px apart, close enough to read as one line. */
  /* Baseline, not flex-start: the name (15.8px, line-height 1.2) and the nav
     links (14.4px, line-height 1.6) have different line boxes, so aligning
     their tops left the name's baseline 2px above the nav's. */
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 28px 64px;
  /* When the nav won't fit on one line beside the name, it drops whole onto
     its own line underneath, rather than squeezing into a narrow column of
     four or five rows (which is what it did at 700-1000px once APPS joined). */
  flex-wrap: wrap;
}

.wordmark {
  /* Must not shrink: it's nowrap, so a squeezed box overflows its text
     straight across the nav between roughly 640 and 900px. */
  flex: 0 0 auto;
  font-size: 15.8px; letter-spacing: -0.02em; text-decoration: none;
  line-height: 1.2; white-space: nowrap;
}

.site-nav {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 10px 32px;   /* 32px as on the design canvas; 46px pushed it to two rows */
}

.site-nav a {
  font-size: 14.4px; line-height: 1.6; text-transform: uppercase; text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.site-nav a[aria-current="page"] { border-bottom-color: currentColor; }
.site-nav .social { display: flex; align-items: center; margin-left: 4px; }
.site-nav .social svg { width: 17px; height: 17px; fill: currentColor; display: block; }

/* ---------- manifesto ---------- */

.manifesto {
  font-size: 21px; line-height: 1.42; letter-spacing: -0.02em;
  margin: 24px 0 56px;
}

/* ---------- work grid ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--grid-gap-x);
  row-gap: 34px;
  padding-bottom: 80px;
}

.grid-item {
  display: block; text-decoration: none;
  opacity: 0; transform: translateY(18px);
  transition: opacity .65s cubic-bezier(.19,1,.22,1), transform .65s cubic-bezier(.19,1,.22,1);
}
.grid-item.is-in { opacity: 1; transform: none; }

.grid-image { overflow: hidden; background: #f1f1f1; aspect-ratio: 4 / 3; }
.grid-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.19,1,.22,1);
}

.portfolio-text { padding-top: 14px; }

.portfolio-title {
  font-size: 18.5px; line-height: 1.2; letter-spacing: -0.02em;
  margin: 0; color: var(--ink); transition: color .2s ease;
  text-wrap: balance;
}
.portfolio-sub {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700; line-height: 1.35; margin: 4px 0 0;
  color: var(--ink); transition: color .2s ease;
}

.grid-item:focus-visible .portfolio-title,
.grid-item:focus-visible .portfolio-sub { color: var(--accent); }

/* ---------- page furniture ---------- */

.page { padding-bottom: 90px; }

.page-headline {
  font-size: 35px; line-height: 1.2; letter-spacing: -0.02em;
  text-align: center; margin: 18px auto 16px; max-width: 24ch;
  overflow-wrap: anywhere;
  text-wrap: balance;   /* evens the lines; ignored by older browsers */
}

.credits {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 700; text-transform: uppercase;
  font-size: 18.5px; line-height: 1.35; text-align: center;
  color: var(--credits); margin: 0 auto 52px; max-width: 40ch;
}
.credits a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

/* work-page media: 2-up, inset from the page edges */

.media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
  max-width: 977px;
  margin: 0 auto;
  /* Without this, grid stretches every cell in a row to the tallest image and
     the shorter one sits in a slab of grey. */
  align-items: start;
}
.media > .embed, .media > .media-full { grid-column: 1 / -1; }
/* A lone trailing image centres itself. build.py decides which one that is:
   :nth-child would count the films too, and miscount every page that mixes
   films and stills. */
.media > .shot-widow:not(:only-child) {
  grid-column: 1 / -1;
  max-width: 514px;
  margin-inline: auto;
}
/* ...but if it's the ONLY image, let it run full width */
.media > .shot:only-child { grid-column: 1 / -1; max-width: none; margin-inline: 0; }
/* Same intent as :only-child, but for a still that is alone inside a SECTION.
   :only-child can't see it, because the subhead is a sibling.
   .shot-full is the same treatment asked for by hand, on a still that shares
   its section with others: a 48-sheet wants the width of the film above it,
   not half of it. */
.media > .shot-solo,
.media > .shot-full { grid-column: 1 / -1; max-width: none; margin-inline: 0; }

/* Asked for by hand, the opposite way round: a row to itself, but inset rather
   than full bleed. A tall poster at the full 977px column dominates everything
   under it. Same measure as a widow, so the page has one inset width and not
   two. */
.media > .shot-narrow {
  grid-column: 1 / -1;
  max-width: 514px;
  margin-inline: auto;
}

/* A subhead inside the media grid. Vanguard runs as three iterations of one
   platform, so the page needs a visible seam between them rather than one
   undifferentiated wall of ads. Spans both columns; the first one sits flush
   because there is nothing above it to divide from. */
.media > .media-head {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap;
  margin: 38px 0 2px; padding-top: 22px;
  border-top: 1px solid rgba(0,0,0,.12);
}
.media > .media-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.media-head h2 { font-size: 21px; line-height: 1; margin: 0; }
.media-head span {
  font-size: 14px; letter-spacing: 0; text-transform: none;
  font-weight: 400; color: var(--credits);
}

/* Body copy on a work page: same measure as the prose elsewhere, centred
   under the credits line so it reads as part of the page furniture. */
.work-body { margin: 34px auto 50px; }
/* The credits line already carries 52px beneath it. Only close that gap when
   there IS a credits line: three of these pages have none, and a blanket
   negative margin pulled the copy up into the headline on those. */
.credits + .work-body { margin-top: -22px; }
.work-body p:last-child { margin-bottom: 0; }
.work-link a { color: var(--accent); font-weight: 600; text-decoration: none; }
/* "Full credits here." run on at the end of a campaign's copy: the same size
   as the copy, in the secondary grey used for press sources, underlined. */
.credits-link { color: #444; }
.credits-link a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Play: the IMDb link sits under the standfirst, above the film. */
.standfirst-intro + .play-link { margin: -24px 0 40px; }

.shot {
  appearance: none; border: 0; padding: 0; margin: 0;
  background: #f1f1f1; cursor: zoom-in; display: block; width: 100%;
  overflow: hidden;
}
.shot img { width: 100%; transition: opacity .25s ease; }
.shot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(255, 255, 255, .97);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 64px;
  opacity: 0; pointer-events: none;
  /* visibility, not just opacity: an opacity-0 element is still focusable and
     still read aloud. Delayed to the end of the fade so the transition survives. */
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.lightbox[open], .lightbox.is-open {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}
.lightbox img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; box-shadow: 0 10px 60px rgba(0,0,0,.14);
}
.lightbox button {
  position: absolute; appearance: none; background: none; border: 0;
  cursor: pointer; color: var(--ink); padding: 12px; line-height: 0;
}
.lightbox .lb-close { top: 18px; right: 22px; }
.lightbox .lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lightbox button svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2; fill: none; }
body.lb-open { position: fixed; width: 100%; overflow: hidden; overscroll-behavior: none; }

/* ---------- marquee ---------- */

.marquee {
  overflow: hidden; display: flex; width: 100%;
  user-select: none; -webkit-mask-image: none;
}
.marquee-track {
  display: flex; flex: 0 0 auto; min-width: 100%;
  animation: marquee-scroll var(--marquee-speed, 30s) linear infinite;
}
.marquee-track > * {
  flex: 0 0 auto; margin: 0; padding-right: .5em; white-space: nowrap;
}
@keyframes marquee-scroll { to { transform: translateX(-50%); } }

.marquee-hero .marquee-track > * {
  font-size: clamp(46px, 9.5vw, 110px); line-height: 1.05; letter-spacing: -0.02em;
}
.marquee-quotes { margin: 70px 0 0; padding-top: 34px; border-top: 1px solid rgba(0,0,0,.12); }
.marquee-quotes .marquee-track > * { font-size: 20px; line-height: 1.4; }

/* ---------- generic content ---------- */

.two-col { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; }

.section-heading {
  font-size: 18.5px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 18px;
}
.section-heading-lg { font-size: 35px; line-height: 1.2; margin: 0 0 24px; }

.prose p { margin: 0 0 20px; }
.prose { max-width: 707px; }

.awards { margin-top: 64px; }
.awards .row {
  display: grid; grid-template-columns: 90px 1fr; gap: 24px;
  padding: 18px 0; border-top: 1px solid rgba(0,0,0,.12);
}
.awards .year { font-size: 15px; }
.awards .detail { font-size: 15.5px; line-height: 1.55; }

/* ---------- initiatives carousel ---------- */

.carousel { position: relative; margin-top: 10px; }
.carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 242px;
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 18px;
  scrollbar-width: thin;
}
.carousel-track > * { scroll-snap-align: start; }
.carousel-track { align-items: stretch; }
.card { display: flex; flex-direction: column; }
.card img { aspect-ratio: 3 / 2; object-fit: cover; background: #f1f1f1; }
.card .btn { margin-top: auto; align-self: flex-start; }
.card h2 { font-size: 29.7px; line-height: 1.15; margin: 16px 0 12px; }
.card p { font-size: 15px; line-height: 1.5; margin: 0 0 18px; }

/* The .carousel-nav prev/next buttons were removed on 17 Sep. Four cards fit a
   desktop window without scrolling, so both arrows were permanently disabled
   and read as broken furniture. The track itself still scrolls and snaps. */

.btn {
  display: inline-block;
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; padding: 17px 28px;
  border: 2px solid var(--button); color: var(--button); background: none;
  transition: background .2s ease, color .2s ease;
}

/* ---------- about and contact (29 Sep) ----------
   About follows the "hugobone.com About, Contact and Apps" design canvas.
   Apps takes its standfirst and intro from Initiatives. The only
   new colour is the dark pink on link hover, which holds 8:1 on white. */

.kicker { font-size: 14px; color: var(--accent); margin: 0; }
.lede { font-size: 21px; line-height: 1.5; margin: 0; }

.about h2 { font-size: 22px; line-height: 1.2; margin: 0; }
.about h3 { font-size: 16px; margin: 0 0 12px; }

.about-hero {
  display: grid; grid-template-columns: 500px minmax(0, 1fr); gap: 72px;
  align-items: end; margin-top: 18px;
}
.about-hero .portrait img {
  width: 100%; aspect-ratio: 500 / 640; object-fit: cover; object-position: 50% 30%;
  background: #f1f1f1;
}
.about-hero-text { display: flex; flex-direction: column; gap: 32px; padding-bottom: 8px; }
.about-hero h1 { font-size: 50px; line-height: 1.06; margin: 0; overflow-wrap: anywhere; }
.about-hero .lede { max-width: 640px; font-size: 19px; line-height: 1.55; }

.stats {
  list-style: none; margin: 88px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
}
.stat {
  border-top: 3px solid var(--ink); padding-top: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.stat-fig { font-size: 64px; line-height: 1; color: var(--accent); }
.stat-label { font-size: 15px; line-height: 1.45; }
.stat-label .short { display: none; }

.about-section {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 72px;
  margin-top: 110px;
}
.about-section .prose p { margin: 0 0 22px; }
.about-section .prose p:last-child { margin-bottom: 0; }

.about-quotes { margin-top: 110px; display: flex; flex-direction: column; gap: 40px; }
.about-quotes figure { margin: 0; display: flex; flex-direction: column; }
.about-quotes blockquote { margin: 0; }
.about-quotes figcaption { font-size: 15px; line-height: 1.45; }
.about-quotes figcaption strong { font-weight: 600; }
.quote-lead { gap: 18px; }
.quote-lead blockquote { font-size: 46px; line-height: 1.08; color: var(--accent); max-width: 22ch; }
.quote-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.quote { gap: 14px; border-top: 1px solid var(--ink); padding-top: 18px; }
.quote blockquote { font-size: 22px; line-height: 1.15; }

.ruled { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ink); }
.ruled > li { padding: 18px 0; border-top: 1px solid var(--ink); }
.ruled .year { color: var(--accent); }

.career .row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 24px;
}
.career .year { font-size: 15px; padding-top: 3px; }
.career .role { font-weight: 600; }
.note { font-size: 15px; line-height: 1.5; color: #444; margin: 18px 0 0; }

.awards-list .row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; }
.awards-list .year { font-size: 22px; line-height: 1.2; }
.awards-list .detail p { margin: 0; font-size: 16px; line-height: 1.6; }
.awards-list .detail p + p { margin-top: 8px; }
.awards-list strong { font-weight: 600; }
.awards-list a { color: var(--accent); text-decoration: none; }

.about-press { grid-template-columns: 300px minmax(0, 2fr) minmax(0, 1fr); }
.press > li { padding: 14px 0; font-size: 16px; line-height: 1.5; }
.press a, .press .press-title { font-weight: 600; display: block; }
.press a { color: var(--accent); text-decoration: none; }
.press .source { color: #444; display: block; }
.press-side { display: flex; flex-direction: column; gap: 40px; }
.press-side p { margin: 0; font-size: 16px; line-height: 1.6; }
.press-side a { color: var(--accent); text-decoration: none; font-weight: 600; }

.closing-band { background: var(--ink); color: var(--bg); padding: 96px 0; margin-bottom: -1px; }
.closing-band .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
}
.closing-band p { font-size: 50px; line-height: 1.05; margin: 0; max-width: 12em; }
.btn-solid {
  flex-shrink: 0; background: var(--button); color: #fff;
  font-size: 18px; padding: 22px 36px;
}

/* Contact: type only. The heading and line reuse the Initiatives standfirst
   (.manifesto, .standfirst-intro); the links get the white space. */
.contact-links {
  list-style: none; margin: 72px 0 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
}
.contact-links a {
  font-size: 21px; line-height: 1.3; letter-spacing: -0.02em;
  text-decoration: none; border-bottom: 2px solid transparent;
  overflow-wrap: anywhere; transition: color .18s ease, border-color .18s ease;
}
.contact-links .is-accent { color: var(--accent); }
.contact { padding-bottom: 160px; }

/* Apps: the standfirst and intro are the Initiatives ones (.manifesto,
   .standfirst-intro); below them each app is a row, image and copy side by
   side, alternating. The first row starts where the Initiatives cards do. */
.app {
  display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 72px;
  align-items: center; margin-top: 10px;
}
.app + .app { margin-top: 120px; }
.app-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); }
.app-flip .app-shot { order: 2; }
.app-shot { aspect-ratio: 620 / 520; display: grid; place-items: center; overflow: hidden; }
.app-shot img { width: 100%; height: 100%; object-fit: contain; }
.app-text { display: flex; flex-direction: column; gap: 22px; }
.app-text h2 { font-size: 34px; line-height: 1.05; margin: 0; }
.app-text p { margin: 0; line-height: 1.65; }
.app-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.app-links a { font-size: 15px; color: var(--accent); text-decoration: none; padding: 10px 0; }

/* Initiatives: the line under the standfirst, and cards with two buttons. */
.standfirst-intro { font-size: 19px; line-height: 1.55; max-width: 707px; margin: -32px 0 40px; }
.card-links { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.card-links .btn { margin-top: 0; }

/* Initiatives buttons, 1 Oct: every button is the card's full width and one
   line high, so all five match. The size is set so the longest label,
   GO TO TOURETTE’S HURTS, fits on one line at the narrowest card. */
.card .btn { width: 100%; box-sizing: border-box; text-align: center; white-space: nowrap;
  font-size: var(--card-btn-size, 11.5px); padding: 17px 8px; }

/* Award callouts on initiative cards, 1 Oct. */
.card-awards { list-style: none; margin: 0 0 22px; padding: 12px 0 0;
  border-top: 1px solid rgba(0,0,0,.12); font-size: 13.5px; line-height: 1.45; }
.card-awards li + li { margin-top: 4px; }

@media (max-width: 1100px) {
  .about-hero { grid-template-columns: 380px minmax(0, 1fr); gap: 48px; }
  .about-hero h1 { font-size: 40px; }
  .about-section, .about-press { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
  .press-side { grid-column: 2; }
  .app, .app-flip { gap: 48px; }
  .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; gap: 32px; margin-top: 0; }
  .about-hero .portrait { margin: 0 calc(-1 * var(--gutter)); }
  .about-hero .portrait img { aspect-ratio: auto; height: 460px; object-position: 50% 35%; }
  .about-hero-text { gap: 20px; }
  .about-hero h1 { font-size: 28px; line-height: 1.08; }
  .about-hero .lede { font-size: 17px; line-height: 1.6; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin-top: 48px; }
  .stat { padding-top: 14px; gap: 8px; }
  .stat-fig { font-size: 42px; }
  .stat-label { font-size: 14px; }
  .stat-label .long { display: none; }
  .stat-label .short { display: inline; }
  .about-section, .about-press { grid-template-columns: 1fr; gap: 20px; margin-top: 64px; }
  .press-side { grid-column: auto; gap: 24px; margin-top: 12px; }
  .about h2 { font-size: 18px; }
  .about-section .prose { font-size: 16px; }
  .about-quotes { margin-top: 64px; gap: 28px; }
  .quote-lead blockquote { font-size: 28px; line-height: 1.1; }
  .quote-grid { grid-template-columns: 1fr; gap: 28px; }
  .quote { padding-top: 16px; gap: 10px; }
  .quote blockquote { font-size: 18px; line-height: 1.2; }
  .career .row { grid-template-columns: 1fr; gap: 4px; }
  .career .year { font-size: 12px; padding-top: 0; }
  .career .row { font-size: 16px; }
  .awards-list .row { grid-template-columns: 1fr; gap: 6px; }
  .awards-list .year { font-size: 16px; }
  .awards-list .detail p { font-size: 15px; line-height: 1.55; }
  .closing-band { padding: 56px 0; }
  .closing-band .wrap { flex-direction: column; align-items: flex-start; gap: 28px; }
  .closing-band p { font-size: 30px; line-height: 1.08; }
  .btn-solid { font-size: 15px; padding: 16px 28px; }

  .contact-links { margin-top: 48px; gap: 18px; }
  .contact-links a { font-size: 18px; }
  .contact { padding-bottom: 110px; }

  .standfirst-intro { font-size: 17px; margin-top: -24px; }

  .app, .app-flip { grid-template-columns: 1fr; gap: 20px; }
  .app + .app { margin-top: 64px; }
  .app-flip .app-shot { order: 0; }
  .app-shot { margin: 0 calc(-1 * var(--gutter)); }
  .app-text { gap: 16px; }
  .app-text h2 { font-size: 24px; }
  .app-text p { font-size: 16px; }
  .app-links { flex-direction: column; gap: 0; }
  .app-links a { font-size: 14px; }
}

@media (hover: hover) and (pointer: fine) {
  .press-side a:hover, .press a:hover, .app-links a:hover, .awards-list a:hover, .work-link a:hover { color: #9e0051; text-decoration: underline; }
  .contact-links a:hover { border-bottom-color: var(--accent); }
  .btn-solid:hover { background: #9e0051; border-color: #9e0051; color: #fff; }
}

/* ---------- footer ---------- */

.site-footer { padding: 40px 0 56px; border-top: 1px solid rgba(0,0,0,.12); font-size: 13.5px; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-footer a { text-decoration: none; border-bottom: 1px solid transparent; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; gap: 30px; }
  .manifesto { font-size: 18px; }
  .page-headline { font-size: 26px; }
  .credits { font-size: 16px; }
  .lightbox { padding: 24px; }
  .lightbox .lb-prev { left: 0; } .lightbox .lb-next { right: 0; }
}

@media (max-width: 640px) {
  .site-header { padding: 26px 0 20px; }
  .site-header .wrap { flex-direction: column; align-items: flex-start; gap: 28px; }
  .site-nav { justify-content: flex-start; gap: 10px 24px; }
  .wordmark { white-space: normal; font-size: 14.5px; }
  .work-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .media { grid-template-columns: 1fr; }
  .media > .shot-widow:not(:only-child) { max-width: none; }
  .media > .media-head { margin-top: 26px; padding-top: 18px; }
  .manifesto { font-size: 16.5px; }
  .awards .row { grid-template-columns: 1fr; gap: 6px; }
  .section-heading-lg { font-size: 26px; }
}

/* ---------- hover states ----------
   Cursor devices only. A phone has no hover, so a tapped tile would
   otherwise keep its amber caption and zoom until you tapped elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { color: var(--accent); }
  .grid-item:hover .grid-image img { transform: scale(1.035); }
  .grid-item:hover .portfolio-title,
  .grid-item:hover .portfolio-sub { color: var(--accent); }
  .shot:hover img { opacity: .88; }
  .lightbox button:hover { color: var(--accent); }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .btn:hover { background: var(--button); color: var(--bg); }
  .site-footer a:hover { border-bottom-color: currentColor; }
}

/* The reveal starts every tile at opacity 0. Printing never scrolls, so
   without this a Save-as-PDF of the homepage is mostly blank pages. */
@media print {
  .grid-item { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .grid-item { opacity: 1; transform: none; }
  /* a frozen marquee hides everything past the first item — wrap it instead */
  .marquee { overflow: visible; display: block; }
  .marquee-track { display: block; animation: none; min-width: 0; }
  .marquee-track > * { white-space: normal; padding-right: 0; }
  .marquee-quotes .marquee-track > * + * { margin-top: 14px; }
  .marquee-hero .marquee-track > * { font-size: clamp(38px, 7vw, 72px); }
}