/* 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 ======================
   #000 is the letterbox behind the film and the film's own black. The dark
   ground is set to the same value in tokens.css so the band has no seam at
   its edges; on the white ground it reads as a solid graphic block. */
.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; }
/* A partial final row would otherwise end on a rule with nothing after it. */
.logo-cell:last-child { border-right: 0; }
.logo-cell img {
  max-height: 30px; max-width: 74%; width: auto; height: auto;
  object-fit: contain;
  filter: var(--logo-filter);
  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; }

/* ========================= 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; }

/* Notes reuse the .claim row: the whole row is the link target. */
.note { color: inherit; text-decoration: none; }
.note .claim-h { transition: color var(--dur, .2s) ease; }
.note:hover .claim-h, .note:focus-visible .claim-h { color: var(--accent); }

/* ========================== OFFICES ========================== */
.offices { grid-column: 1 / -1; border-top: 1px solid var(--rule); }
.office { padding-top: var(--s-1); padding-bottom: var(--s-1); display: flex; flex-direction: column; align-items: start; gap: 2px; }
.office-city { font-family: var(--font-display); font-size: var(--t-34); line-height: 1.15; }
.office-email { margin-top: var(--s-1); }

/* ============================================================
   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;
  padding: 0;
  /* 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; }

/* ============================================================
   PROSE — long structured legal copy. The only place on the
   site with nested lists and stacked headings.
   ============================================================ */
.prose > * { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-1); }
.prose h2 { margin-top: var(--s-2); }
.prose ul { padding-left: 1.1em; margin-bottom: 0; }
.prose li { font-size: var(--t-16); }
.prose li + li { margin-top: 6px; }

/* ============================================================
   LAYOUT UTILITIES — these exist because the CSP is style-src
   'self' with no 'unsafe-inline', so a style="" attribute is
   silently dropped in production. Anything positional has to be
   a class. tools/check.py errors on an inline style attribute.
   ============================================================ */
.page-head   { padding-block: calc(var(--nav-h) + var(--s-2)) var(--s-2); }
.page-head--roomy { padding-block: calc(var(--nav-h) + var(--s-3)) var(--s-3); }
.gap-below   { margin-bottom: var(--s-2); }
.gap-below--wide { margin-bottom: var(--s-3); }
.align-end   { align-self: end; }