/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--c-bg); color: var(--c-fg); -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-width: none;                 /* page still scrolls, the bar is just hidden */
}
html::-webkit-scrollbar { display: none; }
html.lenis { scroll-behavior: auto; }    /* Lenis does its own easing */
body {
  margin: 0;
  min-height: 100svh;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--f-display);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

/* normal cursor everywhere; the favicon cross (black background removed, 48px copy for
   high-DPI screens) only over things that react to hover: links, buttons, video cards */
a, button, .vc-card {
  cursor: url("../cursor/cursor-24.png") 12 12, pointer;
  cursor: image-set(url("../cursor/cursor-24.png") 1x, url("../cursor/cursor-48.png") 2x) 12 12, pointer;
}
:focus-visible { outline: 1px solid var(--c-fg); outline-offset: 4px; }

/* everything sits above the x-field; content is centred and capped on big screens */
.hero, .work, .foot { position: relative; z-index: 1; max-width: var(--page-max); margin-inline: auto; }
.hero { z-index: 2; }   /* popovers stay above the video cards */

/* ---------- background grid (dots + crosshairs, drawn in site.js) ---------- */
.bgrid { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ---------- labels (mono, wide tracking) ---------- */
.label {
  font-family: var(--f-label);
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-decoration: none;
  padding: 0.4em 0;
}
.label:hover, .label[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

/* ---------- hero ---------- */
/* The hero is exactly as wide as the (condensed) VISUAL ARTIST line and centred, so the
   wordmark's left edge and the nav's right edge line up with it at every width.
   7.264 = width of "VISUAL ARTIST" in Times New Roman (and its metric-compatible stand-ins) per 1em. */
.hero {
  width: calc(var(--t-role) * 7.264 * var(--sx-role));
  padding: clamp(40px, 8vh, 72px) 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--gutter);
  align-content: start;
}

.wordmark { margin: 0; font-weight: 400; display: contents; }

.wordmark__stack {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column;
  font-size: var(--t-stack);
  line-height: 0.75;
}
.wm-line { display: block; white-space: nowrap; transform-origin: left center; }
.wm-da  { transform: scaleX(var(--sx-da)); }
.wm-vid { transform: scaleX(var(--sx-vid)); }
.wm-kv  { transform: scaleX(var(--sx-kv)); }
.wm-ien { transform: scaleX(var(--sx-ien)); }

.wordmark__role {
  grid-column: 1 / -1; grid-row: 2;
  display: block;
  margin-top: calc(var(--t-stack) * 0.66);
  font-size: var(--t-role);
  line-height: 0.8;
  white-space: nowrap;
  transform-origin: left center;
  transform: scaleX(var(--sx-role));
}

/* nav: contact top-right of the stack, about at its foot */
.hero__nav {
  grid-column: 2; grid-row: 1;
  justify-self: end;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-end;
}
/* letter-spacing leaves a gap after the last letter; let it hang so the letters end on the edge */
.hero__nav .label { margin-right: calc(-1 * var(--ls-label)); }

/* grid-snapped hero (site.js adds .is-gridded and sets the sizes/positions from measured letter shapes):
   the block spans whole grid cells and every element sits inside its cells with equal air.
   Without JS the layout above is the fallback. */
.hero.is-gridded {
  display: block; position: relative;
  width: var(--hero-w); height: var(--hero-h); max-width: none;
  margin: var(--hero-y) 0 0 var(--hero-x); padding: 0;
}
.hero.is-gridded .wordmark__stack,
.hero.is-gridded .wordmark__role { position: absolute; margin: 0; }
.hero.is-gridded .hero__nav { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
.hero.is-gridded .tip { position: absolute; pointer-events: auto; }

/* ---------- tooltips / popovers ---------- */
.tip { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.tip > .label { position: relative; z-index: 21; }   /* above the open panel's hover zone, so it keeps its cursor */
.tip__panel {
  position: absolute; top: 100%; right: 0;
  margin-top: 10px;
  z-index: 20;
  padding: 14px 18px;
  background: var(--c-bg);
  border-radius: var(--card-radius);
  box-shadow: 0 0 0 var(--card-border) var(--c-line);
  font-family: var(--f-label);
  font-size: var(--t-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: tip-in 160ms var(--ease-out);
}
.tip__panel[hidden] { display: none; }
/* invisible hover zone around an open panel: 24px of slack on three sides and 60px on the label's
   side, covering the gap and the whole label row, so the panel doesn't close on a loose mouse.
   z-index -1 keeps it behind the panel's text, so the links stay clickable */
.tip__panel::before { content: ""; position: absolute; z-index: -1; inset: -60px -24px -24px; }
.tip--about .tip__panel { top: auto; bottom: 100%; margin: 0 0 10px; }
.tip--about .tip__panel::before { inset: -24px -24px -60px; }
@keyframes tip-in { from { opacity: 0; transform: translateY(-4px); } }

.tip__link { text-decoration: none; text-transform: none; letter-spacing: 0.12em; }
.tip__link:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* social icon buttons under the email: hairline squares like the cards, solid white on hover */
.social { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.social__btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--card-radius);
  box-shadow: 0 0 0 var(--card-border) var(--c-line);
  color: var(--c-fg);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.social__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.social__btn svg .fill { fill: currentColor; stroke: none; }
.social__btn:hover, .social__btn:focus-visible { background: var(--c-fg); color: var(--c-bg); box-shadow: 0 0 0 var(--card-border) var(--c-fg); }

/* two aligned columns: name (+ city code), years */
.cv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto auto; gap: 0.9em 2em; }
.cv li { display: contents; }
/* school / studio names link to their sites: plain until hovered, then underlined like the labels */
.cv__link { text-decoration: none; }
.cv__link:hover, .cv__link:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
/* city code right after the name: smaller and grey; hover shows the full name (title) */
.cv__place { font-size: 0.75em; color: var(--c-dim); text-decoration: none; margin-left: 0.25em; }
/* hairline between groups (education / studios / freelance), same as the card border */
.cv li.cv__rule { display: block; grid-column: 1 / -1; height: 1px; background: var(--c-line); }

/* ---------- work ---------- */
.work { padding: clamp(48px, 9vh, 120px) var(--collage-x) 0; }
.noscript { font-family: var(--f-label); text-align: center; padding: 20vh 0; }
/* type filters above the collage: same lowercase mono labels as contact/about, active one underlined */
.filters {
  position: sticky; top: 16px; z-index: 20;          /* sticks near the top while the collage scrolls */
  width: fit-content; max-width: 100%; margin: 0 auto clamp(32px, 6vh, 72px);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.2em clamp(18px, 2.4vw, 40px);
  padding: 8px 20px;
  border-radius: var(--card-radius);
  box-shadow: 0 0 0 var(--card-border) transparent;
  transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out;
}
/* once stuck (site.js adds .is-stuck), a dark glass pill keeps it readable over the videos */
.filters.is-stuck {
  background-color: var(--c-glass);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 var(--card-border) var(--c-line);
}
.filters[hidden] { display: none; }
/* at least a screen tall, so a type with only a few videos never makes the page too short to
   keep the filter buttons at the top (that would snap the scroll position after a click) */
.work .collage__stage { min-height: 100svh; }
.filters .label[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.more { display: flex; justify-content: center; padding-top: 40px; }
.more[hidden] { display: none; }

/* ---------- footer ---------- */
.foot { display: flex; justify-content: center; padding: 80px 0 64px; }
.foot__copy { margin: 0; font: 12px/1 var(--f-label); letter-spacing: var(--ls-label); color: var(--c-dim); }
/* back to top: pinned bottom-left, fades in once the page is scrolled (site.js adds .is-on) */
.foot__top {
  position: fixed; z-index: 30;
  left: var(--gutter);
  bottom: max(clamp(16px, 3vw, 40px), env(safe-area-inset-bottom));
  font-size: clamp(40px, 4.2vw, 60px); letter-spacing: 0;
  -webkit-text-stroke: 1.5px currentColor;   /* thickens the thin Courier arrow */
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.foot__top.is-on { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease-out), visibility 0s; }

/* ---------- phone: same layout as desktop, just smaller popover text ---------- */
@media (max-width: 640px) {
  .tip__panel { font-size: 13px; letter-spacing: 0.14em; }
  /* not quite wide enough for name + code on one line: the code tucks under its name */
  .cv__place { display: block; margin: 0.3em 0 0; }
  /* too tall to open upward above "about" on a phone: open downward, over the collage */
  .tip--about .tip__panel { top: 100%; bottom: auto; margin: 10px 0 0; }
  .tip--about .tip__panel::before { inset: -60px -24px -24px; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tip__panel { animation: none; }
  .foot__top, .foot__top.is-on { transition: none; }
}