/* ---------------------------------------------------------------
   kurushjerar.com
   Homepage: one full-bleed carousel. Everything else — wordmark,
   nav, footer — sits superimposed directly on the image, no panels,
   no boxes. Small, quiet type; the photography carries the page.
   --------------------------------------------------------------- */

:root {
  --bg: #0b0b0b;
  --fg: #f4f2ee;
  --dim: rgba(244, 242, 238, 0.55);
  --faint: rgba(244, 242, 238, 0.34);
  --rule: rgba(244, 242, 238, 0.14);
  --accent: #cba36c;

  --gutter: clamp(1.25rem, 3.2vw, 2.75rem);
  --meta: clamp(0.62rem, 0.72vw, 0.74rem);
  --nav: clamp(0.8rem, 0.95vw, 0.95rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --stack: "Helvetica Neue", Helvetica, "Inter", "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* Monospace carries all telemetry — counts, folio, spine, captions.
   The contrast against the grotesque nav is what makes it read as an
   instrument rather than a template. */
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--stack);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Grain — unifies visually varied source material into one voice.
   Inline SVG so there is no external asset to load. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9;
  pointer-events: none;
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 900ms steps(3) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* --- homepage: full-bleed carousel ----------------------------- */

body.home { overflow: hidden; }

/* The plate behind the frames: near-black and faintly vignetted, so
   the moment between frames reads as a fade through black, not a
   flash of empty page. */
.carousel {
  position: fixed;
  inset: 0;
  cursor: pointer;
  background:
    radial-gradient(ellipse at 50% 45%, #141415 0%, #0d0d0e 55%, #090909 100%);
}

.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* leaving: a long dissolve to black, still zooming as it goes */
  transition: opacity 1300ms var(--ease);
}

/* arriving: wait for black, then rise into it */
.frame.is-live {
  opacity: 1;
  transition: opacity 1100ms var(--ease) 850ms;
}

/* Every frame drifts for its whole life, and the animation outlasts
   the dwell on purpose: the zoom is still moving while the frame
   dissolves, so it reads as sinking into black rather than stopping
   and then fading. Wide frames cover the viewport and drift a fixed
   3.5%. Upright frames start whole and expand toward the side edges;
   site.js computes --kto per frame from the image's aspect. */
.frame.ken { animation: ken 11000ms linear forwards; }

@keyframes ken {
  from { transform: scale(var(--kfrom, 1)); }
  to   { transform: scale(var(--kto, 1.035)); }
}

/* Upright frames: the whole image against the plate, overscanned 6%
   so the top and bottom spill past the viewport instead of reading
   as a floating frame. */
.frame.tall {
  object-fit: contain;
  --kfrom: 1.06;
}

/* Hover preview: sits above the stills, cover-fitted the same way so
   swapping between them reads as one continuous surface. */
.preview {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 620ms var(--ease);
  background: #000;
}

.preview.is-live { opacity: 1; }

.preview img,
.preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.preview iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100%;
  border: 0;
  pointer-events: none;
}

/* Scrims keep small text legible over any image without ever
   drawing a box — a gradient, not a panel. */
.scrim {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

.scrim-t {
  top: 0;
  height: 30vh;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}

.scrim-b {
  bottom: 0;
  height: 26vh;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}

/* --- registration marks + scrubber ------------------------------ */

.marks { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

.marks .m {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--faint);
}

.marks .tl { top: calc(var(--gutter) - 8px); left: calc(var(--gutter) - 8px); border-top-width: 1px; border-left-width: 1px; }
.marks .tr { top: calc(var(--gutter) - 8px); right: calc(var(--gutter) - 8px); border-top-width: 1px; border-right-width: 1px; }
.marks .bl { bottom: calc(var(--gutter) - 8px); left: calc(var(--gutter) - 8px); border-bottom-width: 1px; border-left-width: 1px; }
.marks .br { bottom: calc(var(--gutter) - 8px); right: calc(var(--gutter) - 8px); border-bottom-width: 1px; border-right-width: 1px; }

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 3;
  pointer-events: none;
}

.progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  opacity: 0.75;
}

/* --- superimposed HUD ------------------------------------------- */

.hud {
  position: fixed;
  z-index: 2;
  pointer-events: none;
}

.hud a,
.hud .index a { pointer-events: auto; }

.hud-id {
  top: var(--gutter);
  left: var(--gutter);
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  font-size: var(--nav);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.hud-id [data-name] {
  color: var(--fg);
  pointer-events: auto;
}

.hud-id [data-folio] {
  color: var(--faint);
  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hud-nav {
  top: 38vh;
  left: var(--gutter);
  max-width: 20rem;
}

.index {
  list-style: none;
  margin: 0;
  padding: 0;
}

.index a {
  display: grid;
  grid-template-columns: 1.8em 2.2em auto;
  align-items: center;
  gap: 0.5em;
  padding: 0.34em 0;

  font-size: var(--nav);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;

  color: var(--dim);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
  transition: color 320ms var(--ease);
}

.index .idx {
  font-size: 0.72em;
  color: var(--faint);
  transition: color 320ms var(--ease);
}

/* the rule extends on hover — the row measures itself open */
.index .rule {
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(0.35);
  transform-origin: 0 50%;
  transition: transform 340ms var(--ease), opacity 340ms var(--ease);
}

.index .label {
  transform: translateX(0);
  transition: transform 340ms var(--ease);
}

.index a:hover,
.index a:focus-visible {
  color: var(--fg);
  outline: none;
}

.index a:hover .idx,
.index a:focus-visible .idx { color: var(--accent); }

.index a:hover .rule,
.index a:focus-visible .rule { transform: scaleX(1); opacity: 0.8; }

.index a:hover .label,
.index a:focus-visible .label { transform: translateX(0.3em); }

/* --- spine: running discipline, vertical on the right edge ------ */

.hud-spine {
  top: 50%;
  right: calc(var(--gutter) - 0.2em);
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: var(--meta);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--faint);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.hud-foot {
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  align-items: baseline;
  gap: 1.5rem;

  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.hud-foot > a:last-child { justify-self: end; }
.hud-foot a { transition: color 240ms var(--ease); }
.hud-foot a:hover { color: var(--accent); }

.frame-caption {
  color: var(--fg);
  letter-spacing: 0.1em;
}

.frame-count { color: var(--faint); }

/* --- inner pages ---------------------------------------------- */

.page-shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: var(--gutter);
  gap: var(--gutter);
  position: relative;
  z-index: 2;
}

.page-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.page-top a:hover { color: var(--fg); }

.page-top strong {
  color: var(--fg);
  text-transform: uppercase;
}

.page-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* gallery — one image, generous margins, nothing else */

.viewer {
  flex: 1;
  min-height: 0;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.viewer img {
  max-width: min(100%, 1200px);
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.viewer .zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border: 0;
  background: transparent;
  padding: 0;
}

.viewer .prev { left: 0; cursor: w-resize; }
.viewer .next { right: 0; cursor: e-resize; }

/* On-screen arrows: pointer devices navigate by click zone and key,
   so the chevrons only materialise on touch layouts (see media query). */
.chev {
  display: none;
  width: 2.4rem;
  height: 2.4rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(11, 11, 11, 0.55);
  border: 1px solid var(--rule);
  color: var(--dim);
  font-size: 1rem;
}

.viewer-meta {
  margin-top: 1rem;
  flex: none;
  display: flex;
  justify-content: space-between;
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.empty {
  flex: 1;
  display: flex;
  align-items: center;
}

.empty p {
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --- browse pages: photo genre browser, context ----------------- */

body.browse { overflow-y: auto; }

body.browse .page-shell {
  height: auto;
  min-height: 100dvh;
}

body.lb-open { overflow: hidden; }

/* Port slideshow takes over the viewport; lock scrolling under it. */
body.port-mode { overflow: hidden; }

/* Genre tabs: a persistent horizontal bar, the way into each tab. */
.genrebar {
  flex: none;
  position: relative;
  z-index: 4;
  margin-bottom: 1.5rem;
}

.genres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.genres li {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  padding: 0.2em 0;
  color: var(--faint);
  cursor: pointer;
  transition: color 240ms var(--ease);
}

.genres li:hover { color: var(--fg); }
.genres li.is-live { color: var(--accent); }
.genres .n { font-size: 0.82em; opacity: 0.6; }

/* Instagram sits under the tabs -- an outbound link for the Trnch page. */
.genre-ig {
  display: inline-block;
  margin-top: 1rem;
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 240ms var(--ease);
}
.genre-ig:hover { color: var(--accent); }

/* A genre that is a single clip fills the space below the tabs and plays
   whole (no crop) on black, like the music reel. Height is set in JS to
   reach the bottom of the viewport. */
.clipstage {
  position: relative;
  width: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.clip-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.clip-sound {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  z-index: 2;
  font-family: var(--mono);
  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
  color: var(--faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 240ms var(--ease);
}
.clip-sound:hover { color: var(--accent); }

/* Project browser: full-width grid of projects; when a project is
   open, the statement takes a sticky column on the left. */
.browser {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--gutter) * 1.25);
  align-items: start;
}

.browser.reading { grid-template-columns: 15rem 1fr; }

.side {
  position: sticky;
  top: var(--gutter);
  display: none;
  flex-direction: column;
  gap: 2.25rem;
}

.browser.reading .side { display: flex; }

/* Port: full-bleed slideshow behind the floating header + tabs. */
.port {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 45%, #141415 0%, #0d0d0e 55%, #090909 100%);
  cursor: pointer;
  overflow: hidden;
}

.port[hidden] { display: none; }

/* Scrims keep the floating header, tabs and caption legible over a
   bright frame without drawing a panel. */
.port::before,
.port::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.port::before { top: 0; height: 42vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.16) 55%, transparent); }
.port::after { bottom: 0; height: 26vh; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent); }

.port-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}

.port-frame.is-live { opacity: 1; }

.port-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
}

.port-prev { left: 0; width: 32%; cursor: w-resize; justify-content: flex-start; padding-left: 0.6rem; }
.port-next { right: 0; width: 68%; cursor: e-resize; justify-content: flex-end; padding-right: 0.6rem; }

.port-hud {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.port-hud .port-title { color: var(--fg); letter-spacing: 0.1em; }

/* In Port mode the page header floats over the slideshow, legible on
   any frame via a soft top scrim. */
body.port-mode .page-shell { position: static; }
body.port-mode .page-top,
body.port-mode .genrebar {
  position: relative;
  z-index: 4;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}

body.port-mode .genres li { color: var(--dim); }
body.port-mode .genres li:hover { color: var(--fg); }
body.port-mode .genres li.is-live { color: var(--accent); }
body.port-mode .page-top,
body.port-mode .page-top strong { color: var(--fg); }

.statement h3,
.lb-side h3 {
  margin: 0 0 0.7rem;
  font-size: var(--meta);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.statement p,
.lb-side p {
  margin: 0;
  color: var(--dim);
  font-size: 0.88rem;
  line-height: 1.6;
}

.crumb {
  display: flex;
  align-items: baseline;
  gap: 1.2em;
  margin: 0 0 1.4rem;
  font-family: var(--mono);
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.crumb-back {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--faint);
  transition: color 240ms var(--ease);
}

.crumb-back:hover { color: var(--accent); }

/* Walk between subjects (People, Brands…) without leaving the reading
   view. Sits at the end of the crumb line. */
.proj-nav {
  margin-left: auto;
  display: inline-flex;
  gap: 1.2em;
}

.proj-nav button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--faint);
  transition: color 240ms var(--ease);
}

.proj-nav button:hover { color: var(--accent); }

/* Uniform grid: every cell the same portrait format. The crop is
   steered per image via object-position (site.json `focus`), so the
   grid stays even while faces stay in frame. */
.projects {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1.4rem;
}

.projects li { margin: 0; }

.project-card {
  display: block;
  width: 100%;
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
}

.project-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 32%;
  display: block;
  transition: opacity 240ms var(--ease);
}

.project-card:hover img,
.project-card:focus-visible img { opacity: 0.8; }

.project-card .pc-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 0.55rem;
  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.thumbs {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.8rem;
}

.thumbs li { margin: 0; }

.thumbs button {
  display: block;
  width: 100%;
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.thumbs img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 32%;
  display: block;
  transition: opacity 240ms var(--ease);
}

.thumbs button:hover img,
.thumbs button:focus-visible img { opacity: 0.8; }

/* A clip cell: poster still + a play badge marking it as video. */
.cell-clip { position: relative; display: block; }
.cell-clip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 32%; display: block; }
.cell-clip .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
  font-size: 0.7rem;
  padding-left: 0.12em;
  pointer-events: none;
  transition: background 240ms var(--ease);
}
.project-card:hover .cell-clip .play,
.thumbs button:hover .cell-clip .play { background: rgba(10, 10, 10, 0.28); }

/* Lightbox: the full image, with the statement standing on the left
   exactly where it stood beside the grid. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(7, 7, 7, 0.97);
  display: grid;
  grid-template-columns: 16rem 1fr;
}

.lightbox[hidden] { display: none; }

.lb-side {
  align-self: center;
  padding: var(--gutter) 0 var(--gutter) var(--gutter);
}

.lightbox figure {
  margin: 0;
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

/* The stage wraps the media and shrinks to its rendered box, so the
   click-zones overlay only the image -- the margin around it belongs
   to the figure, where a click dismisses. */
.lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: calc(100dvh - 2 * var(--gutter) - 2.5rem);
}

.lightbox figure img,
.lightbox figure video {
  max-width: 100%;
  max-height: calc(100dvh - 2 * var(--gutter) - 2.5rem);
  object-fit: contain;
  display: block;
}

.lightbox figure video[hidden],
.lightbox figure img[hidden] { display: none; }

/* Over a playing clip the click-zones would swallow the controls, so
   they sit behind the video and only cover the outer edges. */
.lightbox figure video { position: relative; z-index: 3; }

/* A clip opens like the music reel: the statement column steps aside and
   the video fills the screen. */
.lightbox.lb-clip { grid-template-columns: 1fr; }
.lightbox.lb-clip .lb-side { display: none; }
.lightbox.lb-clip .lb-stage,
.lightbox.lb-clip figure video { max-height: calc(100dvh - 2 * var(--gutter)); }

.lb-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
}

.lb-prev { left: 0; cursor: w-resize; justify-content: flex-start; padding-left: 0.6rem; }
.lb-next { right: 0; cursor: e-resize; justify-content: flex-end; padding-right: 0.6rem; }

.lb-close {
  position: absolute;
  top: var(--gutter);
  right: var(--gutter);
  background: none;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
  color: var(--dim);
  font-size: 1rem;
  transition: color 240ms var(--ease);
}

.lb-close:hover { color: var(--accent); }

.lb-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--gutter) * 0.6);
  display: flex;
  justify-content: center;
  gap: 1.5em;
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  pointer-events: none;
}

.lb-meta .lb-title { color: var(--fg); }

/* --- context bio ------------------------------------------------ */

.bio { margin: 0 0 2.5rem; }

.bio p {
  margin: 0 0 1.1rem;
  color: var(--dim);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 40rem;
}

.bio p:last-child { margin-bottom: 0; }

/* --- in-page platform player (music) ---------------------------- */

.platform {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(7, 7, 7, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

.platform-card {
  width: min(34rem, 100%);
  background: #101012;
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}

.platform-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.platform-close {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--dim);
  font-size: 0.95rem;
  transition: color 240ms var(--ease);
}

.platform-close:hover { color: var(--accent); }

.platform iframe {
  width: 100%;
  height: clamp(20rem, 55dvh, 28rem);
  border: 0;
  display: block;
  background: #000;
}

.platform-out {
  padding: 0.9rem 1.1rem;
  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 240ms var(--ease);
}

.platform-out:hover { color: var(--accent); }

/* link rows — label / description / arrow (hoele structure) */

.rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 46rem;
}

.blurb {
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 2.5rem;
}

.linklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.linklist li { border-top: 1px solid var(--rule); }
.linklist li:last-child { border-bottom: 1px solid var(--rule); }

.linklist a {
  display: grid;
  grid-template-columns: minmax(7.5rem, 14rem) 1fr auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.1rem 0;
  transition: color 240ms var(--ease);
}

.row-label {
  font-size: var(--nav);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* embedded videos (music page) */

.videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.video {
  margin: 0;
}

.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
  background: #000;
}

.video figcaption {
  margin-top: 0.5rem;
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.rows.has-videos {
  max-width: 60rem;
  justify-content: flex-start;
  padding-top: 1rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.rows.has-videos::-webkit-scrollbar { width: 6px; }
.rows.has-videos::-webkit-scrollbar-track { background: transparent; }
.rows.has-videos::-webkit-scrollbar-thumb { background: var(--rule); }

.row-desc {
  font-size: var(--meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 240ms var(--ease);
}

.row-arrow {
  color: var(--faint);
  transition: color 240ms var(--ease), transform 240ms var(--ease);
}

.linklist a:hover .row-label { color: var(--accent); }
.linklist a:hover .row-desc,
.linklist a:hover .row-arrow { color: var(--fg); }
.linklist a:hover .row-arrow { transform: translate(0.15em, -0.15em); }

@media (max-width: 640px) {
  .linklist a { grid-template-columns: 1fr auto; }
  .row-desc { grid-column: 1 / -1; }
}

/* --- music reel ------------------------------------------------- */

body.scrolls { overflow-y: auto; }

/* The reel is edge to edge: the page shell drops its padding and the
   header floats over the video instead of sitting above it. */
body.scrolls .page-shell {
  height: auto;
  min-height: 100dvh;
  padding: 0;
  gap: 0;
}

body.scrolls .page-top {
  position: absolute;
  top: var(--gutter);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 3;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

body.scrolls .rows { padding-left: var(--gutter); padding-right: var(--gutter); }

.reel {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: #000;
  overflow: hidden;
}

/* Fit the 16:9 player whole inside the viewport -- no cropping, so
   nothing (including baked-in captions) is ever cut off. Whichever
   axis is tight wins; the reel's black ground fills the rest. */
.reel .reel-player,
.reel iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  border: 0;
  pointer-events: none;
}

.reel-hud {
  position: absolute;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 2;
  pointer-events: none;
  font-family: var(--mono);
  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

.reel-queue {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.reel-queue li {
  color: var(--faint);
  cursor: pointer;
  pointer-events: auto;
  transition: color 240ms var(--ease);
}

.reel-queue li:hover { color: var(--fg); }
.reel-queue li.is-live { color: var(--accent); }

.reel-sound,
.reel-more {
  position: absolute;
  z-index: 2;
  font-family: var(--mono);
  font-size: var(--meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}

.reel-sound {
  top: calc(var(--gutter) + 1.6rem);
  right: var(--gutter);
  color: var(--faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 240ms var(--ease);
}

.reel-sound:hover { color: var(--accent); }

.reel-more {
  right: var(--gutter);
  bottom: var(--gutter);
  color: var(--faint);
  pointer-events: none;
  animation: nudge 2.4s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(0.25rem); opacity: 0.9; }
}

.reel-rows {
  flex: none;
  padding: 4rem 0 2rem;
}

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

@media (max-width: 820px) {
  .hud-nav { top: auto; bottom: 7.5rem; }
  .hud-spine { display: none; }
  .hud-foot {
    grid-template-columns: 1fr 1fr;
    row-gap: 0.5rem;
  }
  .frame-caption { grid-column: 1 / -1; order: -1; }
  .frame-count { justify-self: end; }

  /* touch layouts get visible arrows, centred on the frame's edges */
  .chev { display: flex; }
  .viewer .zone {
    display: flex;
    align-items: center;
  }
  .viewer .prev { justify-content: flex-start; padding-left: 0.5rem; }
  .viewer .next { justify-content: flex-end; padding-right: 0.5rem; }

  /* genre browser stacks: genres become a chip row, the statement
     moves under them, the grids take the full width */
  .browser { grid-template-columns: 1fr; gap: 1.5rem; }
  .side { position: static; gap: 1.25rem; }
  .genres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
  }
  .genres li { padding: 0.25em 0; }
  .statement p { max-width: 34rem; }

  /* lightbox: image first; the statement is condensed below it */
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lb-side {
    order: 2;
    align-self: end;
    padding: 0 var(--gutter) calc(var(--gutter) + 2.2rem);
  }
  .lb-side p { font-size: 0.78rem; }
  .lightbox figure { padding: calc(var(--gutter) + 2rem) var(--gutter) 0.75rem; }
  .lightbox figure img { max-height: 62dvh; }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .frame.ken { animation: none; }
  .frame,
  .index a { transition-duration: 1ms; }
}