:root { --bg: #000; --fg: #f2f2f2; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); }
body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }

/* home */
body.home { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: min(100vw, calc(100dvh * 16 / 9)); aspect-ratio: 16 / 9; }
.tile { position: relative; overflow: hidden; background: #000; color: inherit; text-decoration: none; display: block; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(5px); transform: scale(1.05); transition: opacity .9s ease, filter .6s ease, transform .8s ease; }
.tile video.on { opacity: 1; }
.tile .label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(14px, 2.4vw, 34px); letter-spacing: .18em; text-transform: lowercase; text-shadow: 0 1px 14px rgba(0,0,0,.7); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.tile:hover video, .tile:focus-visible video { filter: none; transform: scale(1); }
.tile:hover .label, .tile:focus-visible .label { opacity: 1; }
.tile:focus-visible { outline: 2px solid var(--fg); outline-offset: -4px; }
@media (hover: none) {
  .tile video { filter: blur(3px); }
  .tile .label { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tile video { transition: none; }
}

/* category pages */
body.cat header { padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 48px) 8px; }
body.cat .back { color: var(--fg); opacity: .6; text-decoration: none; font-size: 14px; letter-spacing: .08em; }
body.cat .back:hover { opacity: 1; }
body.cat h1 { margin-top: 18px; font-size: clamp(28px, 5vw, 56px); font-weight: 300; letter-spacing: .12em; text-transform: lowercase; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: clamp(16px, 2.5vw, 32px); padding: clamp(16px, 4vw, 48px); }
.card .frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #111; border: 0; padding: 0; cursor: pointer; overflow: hidden; }
.card .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.card .frame:hover img { transform: scale(1.03); }
.card .frame .play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 2px solid var(--fg); background: rgba(0,0,0,.35); }
.card .frame .play::after { content: ""; position: absolute; left: 25px; top: 19px; border-left: 18px solid var(--fg); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.card iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.card figcaption { margin-top: 10px; font-size: 14px; display: flex; justify-content: space-between; gap: 12px; letter-spacing: .03em; }
.card figcaption span { opacity: .75; }
.card figcaption a { color: var(--fg); opacity: .5; text-decoration: none; white-space: nowrap; }
.card figcaption a:hover { opacity: 1; }


.tile.logo { display: flex; align-items: center; justify-content: center; }
.tile.logo img { width: 100%; height: auto; display: block; }

body.cat .logo-link { display: inline-block; }
body.cat .logo-link img { height: clamp(52px, 7vw, 92px); width: auto; display: block; margin-left: -6px; }
body.cat footer { display: flex; justify-content: center; padding: clamp(32px, 6vw, 80px) 16px; }
body.cat footer img { width: 56px; height: 56px; opacity: .55; transition: opacity .3s ease; display: block; }
body.cat footer a:hover img { opacity: 1; }

/* ---------- phones: vertical feed that snaps card by card ---------- */
@media (max-width: 700px) {
  html { scroll-snap-type: y mandatory; }
  body.home { display: block; min-height: 0; overflow: visible; }
  .grid {
    --cw: calc(100vw - 24px);
    display: flex; flex-direction: column; gap: 14px;
    width: 100%; aspect-ratio: auto;
    padding: max(16px, calc(50vh - var(--cw) * .375)) 12px;
    padding-block: max(16px, calc(50dvh - var(--cw) * .375));
  }
  .tile {
    width: 100%; aspect-ratio: 4 / 3; flex: none;
    border-radius: 4px;
    scroll-snap-align: center; scroll-snap-stop: always;
    transform: scale(calc(.93 + .07 * var(--f, 0)));
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
  }
  .tile video {
    filter: blur(calc((1 - var(--f, 0)) * 11px));
    transform: scale(calc(1.08 - .08 * var(--f, 0)));
    transition: opacity .9s ease;
  }
  .tile .label {
    font-size: 26px; letter-spacing: .24em; padding-left: .24em;
    opacity: var(--f, 0); transition: none;
  }
  .tile:hover video, .tile:focus-visible video { filter: blur(calc((1 - var(--f, 0)) * 11px)); transform: scale(calc(1.08 - .08 * var(--f, 0))); }
  .tile:hover .label, .tile:focus-visible .label { opacity: var(--f, 0); }
  .tile.logo { background: #000; order: -1; }
  .tile.logo img { width: 92%; }
}