/* Homepage. Loaded after talks.css, which gives the tokens (--bg, --ink, --ink-2, --ink-3, --rule, --accent, --display,
   --body, --mono, --section-y), .container, .lede, .cta-row, .btn, .link and the crimson metal on h1/h2 em.
   One artwork fills the first screen: it arrives as dots sized by its light, develops into the photograph, and the next
   work grows out of the same dots (home.js). Then the services, five works, the Gallery strip, clients and the call. */

.hm-small { margin: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.hm-rule::before { content: ""; display: block; width: 2.2rem; height: 2px; margin-bottom: 1.2rem; background: var(--accent); }
.hm-more { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; font-size: 0.95rem; white-space: nowrap; }
.hm-more:hover, .hm-more:focus-visible { border-bottom-width: 2px; }
.home .btn { transition: transform 220ms ease, background-color 220ms ease; }
.home .btn:hover { transform: translateY(-1px); background: #fff; }
.home .cta-row .link:hover { border-bottom-width: 2px; }
.hm-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.hm-head h2 { margin: 0; font-family: var(--display); font-size: clamp(2.4rem, 1.4rem + 3.6vw, 5rem); line-height: 0.98; letter-spacing: -0.015em; }

/* Hero */
.hm-hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; isolation: isolate; }
.hm-stage { position: absolute; inset: 0; z-index: -1; background: #0b0b0b; }
.hm-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity 1200ms ease, transform 7000ms cubic-bezier(.2, .6, .2, 1); }
.hm-slide.is-on { opacity: 1; transform: scale(1); }
.hm-slide picture { display: contents; }
.hm-slide img { width: 100%; height: 100%; object-fit: cover; }
/* Without the script, the first photograph simply shows. With it, the photograph waits for its dots. */
.js-develop .hm-slide.is-on:not(.is-shown) { opacity: 0; }
.hm-dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 900ms ease; }
.hm-dots.is-off { opacity: 0; }
.hm-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(8, 8, 8, 0.96) 0%, rgba(8, 8, 8, 0.7) 26%, rgba(8, 8, 8, 0) 58%),
    linear-gradient(90deg, rgba(8, 8, 8, 0.75) 0%, rgba(8, 8, 8, 0) 55%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.55) 0%, rgba(8, 8, 8, 0) 18%); }
.hm-copy { align-self: end; width: 100%; padding-top: 8rem; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.hm-copy h1 { margin: 0; max-width: 9.5ch; font-family: var(--display); font-size: clamp(3.6rem, 0.8rem + 9.4vw, 11rem); line-height: 0.86; letter-spacing: -0.035em; }
.hm-copy .lede { max-width: 34rem; color: rgba(250, 250, 250, 0.78); }

.hm-caption { position: absolute; right: max(16px, 4vw); bottom: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.3rem 1rem; width: min(22rem, 34vw); }
.hm-n { color: var(--ink-3); }
.hm-n b { font-weight: 400; color: var(--accent); }
.hm-t { grid-column: 2 / 4; color: var(--ink); text-decoration: none; font-family: var(--display); font-size: 1.25rem; line-height: 1.2; }
.hm-t:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; }
.hm-m { grid-column: 2 / 3; color: var(--ink-2); }
.hm-t, .hm-m { transition: opacity 300ms ease, transform 300ms ease; }
.hm-caption.is-swapping .hm-t, .hm-caption.is-swapping .hm-m { opacity: 0; transform: translateY(0.3rem); }
.hm-bar { position: relative; grid-column: 1 / 3; grid-row: 3; align-self: center; height: 1px; margin-top: 0.8rem; overflow: hidden; background: var(--rule); }
.hm-bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.hm-bar.is-running i { animation: hm-bar 6500ms linear both; }
.hm-hero.is-paused .hm-bar i { animation-play-state: paused; }
@keyframes hm-bar { to { transform: scaleX(1); } }
.hm-pause { grid-column: 3; grid-row: 3; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-top: 0.8rem; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.hm-pause span { width: 0.42rem; height: 0.5rem; border-inline: 2px solid currentColor; }
.hm-pause[aria-pressed="true"] span { width: 0; height: 0; margin-left: 2px; border: 0; border-left: 0.45rem solid currentColor; border-block: 0.28rem solid transparent; }
.hm-pause[hidden], .hm-bar[hidden] { display: none; }
@media (max-width: 760px) {
  .hm-hero { min-height: 92svh; }
  .hm-copy { padding-bottom: 7.5rem; }
  .hm-caption { left: max(16px, 4vw); right: max(16px, 4vw); bottom: 1.6rem; width: auto; }
}

/* What the studio builds: the statement large, the four services under it. */
.hm-what { padding-top: var(--section-y); }
.hm-what h2 { margin: 0; max-width: 17ch; font-family: var(--display); font-size: clamp(2.2rem, 1rem + 4.2vw, 5.6rem); line-height: 1; letter-spacing: -0.02em; }
.hm-what-sub { margin: 1.6rem 0 0; max-width: 34rem; color: var(--ink-2); font-size: 1.1rem; }
.hm-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.2rem, 2.4vw, 2.4rem); margin: clamp(3rem, 6vw, 4.5rem) 0 2.4rem; padding: 0; list-style: none; }
.hm-services a { position: relative; display: block; height: 100%; padding-top: 1.2rem; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.hm-services a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--accent); transform: scaleX(0.14); transform-origin: left; transition: transform 500ms cubic-bezier(.2, .7, .2, 1); }
.hm-services a:hover::before, .hm-services a:focus-visible::before { transform: scaleX(1); }
.hm-services .mono { color: var(--accent); }
.hm-services h3 { margin: 0.8rem 0 0.7rem; font-family: var(--display); font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.7rem); line-height: 1.12; }
.hm-services p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 980px) { .hm-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hm-services { grid-template-columns: minmax(0, 1fr); } }

/* Selected work: an uneven grid. Pictures arrive as dots while they scroll in (CSS only, see .hm-dotted). */
.hm-work { padding-top: var(--section-y); }
.hm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.6rem); }
.hm-card { grid-column: span 4; display: grid; align-content: start; gap: 0.9rem; color: inherit; text-decoration: none; }
.hm-card.is-wide { grid-column: span 7; }
.hm-card.is-tall { grid-column: span 5; }
.hm-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #121212; }
.hm-card.is-wide .hm-media, .hm-card.is-tall .hm-media { aspect-ratio: auto; height: clamp(18rem, 36vw, 34rem); }
.hm-media picture { display: contents; }
.hm-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.2, .7, .2, 1); }
.hm-card:hover img { transform: scale(1.035); }
.hm-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.3rem 1rem; }
.hm-cap strong { font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem); line-height: 1.15; }
.hm-cap .mono { color: var(--ink-3); }
.hm-card:hover strong, .hm-card:focus-visible strong { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
@media (max-width: 860px) {
  .hm-card, .hm-card.is-wide, .hm-card.is-tall { grid-column: 1 / -1; }
  .hm-card.is-wide .hm-media, .hm-card.is-tall .hm-media { height: auto; aspect-ratio: 4 / 3; }
}

/* Pictures that arrive as data: the photograph shows through a grid of dots that grow until they touch. The dot radius
   (--dot) is a registered property so it can animate. At rest it covers each cell, so without support the photograph
   simply shows. */
@property --dot { syntax: "<length>"; inherits: true; initial-value: 7px; }
.hm-dotted { --cell: 8px; }
@keyframes hm-dot-grow { from { --dot: 0px; filter: grayscale(1) brightness(1.5) contrast(1.3); } 55% { filter: grayscale(0.6) brightness(1.2) contrast(1.15); } to { --dot: 7px; filter: none; } }
@supports ((animation-timeline: view()) and (animation-range: 0% 100%)) {
  @media (prefers-reduced-motion: no-preference) {
    .hm-dotted img {
      -webkit-mask: radial-gradient(circle at center, #000 var(--dot), transparent calc(var(--dot) + 0.6px)) 0 0 / var(--cell) var(--cell);
      mask: radial-gradient(circle at center, #000 var(--dot), transparent calc(var(--dot) + 0.6px)) 0 0 / var(--cell) var(--cell);
      animation: hm-dot-grow linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 42%;
    }
  }
}

/* The Gallery strip. home.js turns it, clones the pictures to close the loop, and lets visitors drag and flick it.
   Without the script it is a row that scrolls sideways. Pictures never lift out when dragged. */
.hm-gallery { padding-top: var(--section-y); }
.hm-strip { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.hm-strip::-webkit-scrollbar { display: none; }
.hm-strip-track { display: flex; width: max-content; gap: clamp(0.8rem, 1.6vw, 1.4rem); margin: 0; padding: 0.6rem max(16px, 4vw); list-style: none; }
.hm-strip-track li { flex: none; scroll-snap-align: center; }
.hm-strip-track a { display: block; width: clamp(6.5rem, 11vw, 10rem); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #151515; transition: transform 400ms cubic-bezier(.2, .7, .2, 1); }
.hm-strip-track a:hover, .hm-strip-track a:focus-visible { transform: scale(1.08); }
.hm-strip-track picture { display: contents; }
.hm-strip-track img { width: 100%; height: 100%; object-fit: cover; }
.hm-strip a, .hm-strip img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.hm-strip.is-js { overflow: hidden; scroll-snap-type: none; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hm-strip.is-js a { cursor: inherit; }
.hm-strip.is-js .hm-strip-track { padding-inline: 0; will-change: transform; }
.hm-strip.is-dragging { cursor: grabbing; }
.hm-strip.is-dragging a { pointer-events: none; }

/* Clients as a wall of names. */
.hm-clients { padding-top: var(--section-y); }
.hm-clients > .hm-rule { margin-bottom: 2rem; }
.hm-client-list { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.hm-client-list div { display: grid; grid-template-columns: minmax(9rem, 0.3fr) minmax(0, 1fr); gap: 0.6rem 3vw; align-items: baseline; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.hm-client-list p { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 1rem + 2vw, 3.2rem); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.hm-client-list p span:not(:last-child)::after { content: " · "; color: var(--ink-3); }
@media (max-width: 700px) { .hm-client-list div { grid-template-columns: minmax(0, 1fr); } }

/* Closing call. */
.hm-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 2rem 5vw; align-items: end; margin-top: var(--section-y); padding-block: var(--section-y); border-top: 1px solid var(--rule); }
.hm-cta h2 { margin: 0; font-family: var(--display); font-size: clamp(3.2rem, 1rem + 8vw, 9rem); line-height: 0.9; letter-spacing: -0.03em; }
.hm-cta p { margin: 0; max-width: 30rem; color: var(--ink-2); font-size: 1.08rem; }
@media (max-width: 760px) { .hm-cta { grid-template-columns: minmax(0, 1fr); } }