/* artist.partners — every component on the site
   Load order is tokens -> base -> layout -> components -> responsive;
   the media queries come last so they can override component rules.
   See README.md for the rules this system holds to. */

/* ============================================================
   HOVER HIGHLIGHT — the row under the pointer takes the Bone
   ground. The plate is a pseudo-element inset past the page
   margin so it reads full bleed while the type stays on grid.
   ============================================================ */
.hl { position: relative; }
.hl > * { position: relative; z-index: 1; }
.hl::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--margin));
  background: var(--highlight);
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: 0;
  pointer-events: none;
}
.hl:hover::before { opacity: 1; }
@media (hover: none) { .hl::before { display: none; } }

/* ============================================================
   NAV — fixed. Hidden while scrolling down, revealed on the way
   back up. The small wordmark only exists once the large one at
   the top of the page has been scrolled past.
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--nav-h);
  padding: var(--atom) var(--margin);
  background: var(--ground);
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition: transform .4s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav[data-hidden="true"] { transform: translateY(-101%); }
.nav[data-solid="true"] { border-bottom-color: var(--rule); }

.nav-mark {
  width: 88px;
  color: var(--ink);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.nav[data-mark="true"] .nav-mark { opacity: 1; transform: none; pointer-events: auto; }

.nav-links { display: flex; gap: var(--s-1); list-style: none; margin: 0 0 0 auto; padding: 0; flex-wrap: wrap; }
.nav-links a {
  font-size: var(--t-14); color: var(--ink); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.nav-links a:hover, .nav-links a:focus-visible { border-bottom-color: var(--accent); }

.rail {
  display: flex; justify-content: space-between; gap: var(--s-1);
  font-size: var(--t-12); color: var(--muted);
  padding: var(--atom) var(--margin);
  border-top: 1px solid var(--rule);
}

/* ============================================================
   HERO — the wordmark IS the composition, per the credentials
   deck. Set to a width across the full measure, never a
   font-size.
   ============================================================ */
.hero { padding-block: calc(var(--nav-h) + var(--s-3)) var(--s-2); }
.hero-mark { grid-column: 1 / -1; width: 100%; color: var(--ink); }
.hero-foot { padding-bottom: var(--s-3); }

/* ====================== SIGNAL BAND ====================== */
.band { position: relative; background: #000; overflow: hidden; height: 220px; }
.band video, .band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   LOGO WALLS — height-normalised, greyed, brought up on hover.
   ============================================================ */
.logos { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule); }
.logo-cell {
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  min-height: 118px;
  display: grid;
  place-items: center;
  padding: var(--s-1);
}
.logo-cell:nth-child(5n) { border-right: 0; }
.logo-cell img {
  max-height: 30px; max-width: 74%; width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  mix-blend-mode: var(--logo-blend);
  transition: opacity .3s var(--ease);
}
.logo-cell:hover img { opacity: .95; }

.partners { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.partners .logo-cell:nth-child(5n) { border-right: 1px solid var(--rule); }
.partners .logo-cell:nth-child(4n) { border-right: 0; }

/* ============================================================
   CAPABILITIES — a film, then the argument. The films are the
   engineering treated black and white; they sit as solid graphic
   blocks against the white ground.
   ============================================================ */
.cap { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; padding-block: var(--s-2); border-top: 1px solid var(--rule); align-items: start; }
.cap-n { grid-column: 1 / 2; }
.cap-film {
  grid-column: 2 / 7;
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.cap-film video, .cap-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cap-txt { grid-column: 8 / -1; }

/* ============================================================
   WORK — image and argument side by side, tops aligned so no
   entry drifts against its image. Rows alternate side.
   ============================================================ */
.work { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; padding-block: var(--s-2); border-top: 1px solid var(--rule); align-items: start; }
/* grid-row is explicit on both. Without it, a reversed row places
   the figure at column 7 first and the text — which wants columns
   1-6, behind the auto-placement cursor — drops to a second row. */
.work-fig { grid-column: 1 / 7; grid-row: 1; margin: 0; }
.work-txt { grid-column: 8 / -1; grid-row: 1; display: flex; flex-direction: column; gap: var(--s-1); }
.work:nth-of-type(even) .work-fig { grid-column: 7 / -1; }
.work:nth-of-type(even) .work-txt { grid-column: 1 / 6; }
.work-fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.work-txt a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }

.status { font-family: var(--font-mono); font-size: var(--t-12); letter-spacing: .04em; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status--live { color: var(--accent); }

/* ============================ STATS ============================ */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--atom); }
.stat { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--rule); }
.stat-n { font-family: var(--font-display); font-size: var(--t-34); line-height: 1; font-variant-numeric: tabular-nums; }
.stats--major { grid-column: 1 / -1; }
.stats--major .stat-n { font-size: var(--t-56); }
.stats--major .stat { padding-top: var(--s-1); }

/* ========================= MANIFESTO ========================= */
.claim { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; padding-block: var(--s-2); border-top: 1px solid var(--rule); }
.claim-h { grid-column: 1 / 6; }
.claim-b { grid-column: 7 / -1; }

/* ========================== OFFICES ========================== */
.offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--atom); grid-column: 1 / -1; border-top: 1px solid var(--rule); }
.office { padding-top: var(--s-1); border-right: 1px solid var(--rule); padding-right: var(--atom); display: flex; flex-direction: column; gap: 6px; }
.office:last-child { border-right: 0; }
.office-city { font-family: var(--font-display); font-size: var(--t-34); line-height: 1; }

/* ========================= CASE STUDY ========================= */
.full { margin: 0; }
.full img { width: 100%; height: auto; }
.full figcaption { padding: 10px var(--margin) 0; }

.flow { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--atom); border-top: 1px solid var(--rule); }
.step { padding-top: var(--s-1); border-right: 1px solid var(--rule); padding-right: var(--atom); display: flex; flex-direction: column; gap: 8px; }
.step:last-child { border-right: 0; }
.step-n { font-family: var(--font-mono); font-size: var(--t-12); color: var(--accent); letter-spacing: .04em; }

.tech { display: flex; flex-wrap: wrap; gap: var(--s-1); font-family: var(--font-mono); font-size: var(--t-12); color: var(--muted); letter-spacing: .04em; }

/* ============================================================
   ACKNOWLEDGEMENT OF COUNTRY — the first screen. It does not
   time out: the statement is read at the reader's pace and
   dismissed deliberately. The film is held well back so the
   words lead.
   ============================================================ */
.ack {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000;
  display: grid;
  align-items: center;
  /* on a short viewport the statement must still be readable and the
     control still reachable, so the screen scrolls rather than clips */
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 1;
  transition: opacity .6s var(--ease);
  cursor: pointer;          /* the whole screen dismisses */
}
.ack[hidden] { display: none; }
.ack[data-leaving="true"] { opacity: 0; pointer-events: none; }

/* fixed, not absolute — the film must stay put if the screen scrolls */
.ack-film {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* This footage averages 151/255 across the middle band, so it needs far
     less holding back than the paint film did. Brightness .86 with the
     veil below leaves the type near 5.7:1, and above 3:1 even on the pale
     highlights. Full saturation — the warmth is the point. */
  filter: brightness(.86);
}
/* a second scrim under the measure, so the type never sits on a
   bright drop of paint */
/* the veil is strongest at the centre, where the type now sits */
.ack::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,.36) 0%, rgba(0,0,0,.26) 58%, rgba(0,0,0,.18) 100%);
  pointer-events: none;
}
.ack-inner { position: relative; z-index: 1; padding-block: var(--s-2); }
.ack-block { grid-column: 3 / 11; align-items: center; text-align: center; }
.ack-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-34);
  line-height: 1.34;
  color: #ECEBE7;
  margin: 0 auto;
  max-width: 26em;
  text-wrap: pretty;
}
.ack .label { color: #A9A6A0; }
.ack-go {
  align-self: center;
  margin-top: var(--s-1);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--accent);
  padding: 0 0 3px;
  /* 12px, so it needs 4.5:1 rather than the 3:1 the statement gets */
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: var(--t-12);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.ack-go:hover { color: #fff; }
.ack-go:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

html[data-ack="open"], html[data-ack="open"] body { overflow: hidden; }