/* ==========================================================================
   DEFY STUDIOS — archive.css
   The archive page: a dense, sortable wall of frames. The grid packs itself
   (grid-auto-flow: dense), so filtering never leaves holes.
   ========================================================================== */

.arc__head { padding-top: calc(var(--nav-h) + clamp(70px, 10vw, 170px)); }
.arc__title {
  margin-top: 26px;
  font-size: var(--fs-d1); font-weight: 800; line-height: .84; letter-spacing: -.06em;
}
.arc__lede {
  margin: clamp(28px, 4vw, 56px) 0 0 auto; max-width: 34ch;
  font-size: var(--fs-lead); line-height: 1.25; letter-spacing: -.015em; color: var(--muted);
}

/* ---- filters --------------------------------------------------------- */
.arc__bar {
  position: sticky; top: var(--nav-h); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: clamp(56px, 8vw, 120px); padding-block: 14px;
  background: linear-gradient(var(--black) 70%, rgba(0, 0, 0, 0));
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  font: 600 expanded var(--fs-micro)/1 var(--ff); text-transform: uppercase; letter-spacing: .14em;
  padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--fg);
  transition: background .35s var(--ease), color .35s, border-color .35s;
}
.filter:hover { border-color: var(--fg); }
.filter[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--black); }
.arc__count { font: 600 expanded var(--fs-micro)/1 var(--ff); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }

/* ---- the wall ---------------------------------------------------------- */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense;
  gap: var(--gap); margin-top: 18px;
}
.tile { position: relative; min-width: 0; display: grid; grid-template-rows: 1fr auto; gap: 10px; }
.tile[hidden] { display: none; }
.tile--wide { grid-column: span 2; }

.tile__btn {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  /* never taller than the screen under the nav and the filter bar, so every
     frame and film can be seen whole without scrolling */
  max-height: calc(100svh - var(--nav-h) - 170px);
  background: var(--ink-2);
}
.tile--wide .tile__btn { aspect-ratio: auto; height: 100%; min-height: 100%; }
.tile__btn img {
  width: 100%; height: 100%; object-fit: cover;
  transition: scale 1.2s var(--ease), filter .6s var(--ease);
}
/* press clippings are documents: show the whole page, never crop it */
.tile--doc .tile__btn { background: var(--white); }
.tile--doc .tile__btn img { object-fit: contain; padding: 8%; }
.tile__btn::after {
  content: ""; position: absolute; inset: 0; border: 1px solid transparent; transition: border-color .4s;
}
.tile__btn:hover img, .tile__btn:focus-visible img { scale: 1.05; }
/* films: the poster is the tile; the loop fades in over it on hover */
.tile__btn video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.tile__btn video.is-playing { opacity: 1; }
.tile__badge { z-index: 3;
  position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 8px; border-radius: 999px; background: var(--amber); color: var(--black);
  font: 600 expanded 10px/1 var(--ff); text-transform: uppercase; letter-spacing: .12em;
}
.tile__badge::before { content: ""; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.tile__btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
/* the rest of the wall steps back while one tile is under the pointer — an
   overlay fading on top of each tile, which the compositor handles, rather
   than a filter on every image (which repaints the whole wall) */
.tile__btn::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--black); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .grid:hover .tile__btn::before { opacity: .42; }
  .grid:hover .tile__btn:hover::before { opacity: 0; }
}

.tile__cap { font: 600 expanded var(--fs-micro)/1.35 var(--ff); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.tile__cap span { color: var(--fg); }

/* entrance: tiles rise in as they enter (only when motion is on) */
.motion .tile { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.motion .tile.is-in { opacity: 1; transform: none; }

/* ---- closing ---------------------------------------------------------- */
.arc__end {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  padding-block: var(--sec) clamp(40px, 6vw, 90px);
}
.arc__end-title { font-size: var(--fs-d2); font-weight: 800; line-height: .86; letter-spacing: -.055em; text-transform: uppercase; }
.arc__cta {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--fs-lead); font-weight: 700; letter-spacing: -.02em;
  padding: 22px 34px; border-radius: 999px; background: var(--amber); color: var(--black);
  transition: transform .5s var(--ease), background .3s, color .3s;
}
.arc__cta:hover { background: var(--white); transform: translateY(-3px); }
.arc__cta span { transition: transform .5s var(--ease); }
.arc__cta:hover span { transform: translateX(6px); }

@media (min-width: 1900px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile--wide { grid-column: span 2; }
  .tile--wide .tile__btn { aspect-ratio: 16 / 10; height: auto; }
  .filter { padding: 10px 12px; }
  /* two rows of filters are too tall to pin on a phone */
  .arc__bar { position: static; padding-block: 10px; background: none; }
}


/* ---- the sphere ----------------------------------------------------------
   With motion on, js/orb.js draws the archive as the inside of a sphere in
   WebGL. The section is the stage; the page's own tiles stay in the
   document, off screen, for the keyboard and screen readers. */
.orb {
  position: relative; margin-top: 6px;
  height: calc(100svh - var(--nav-h) - 72px); min-height: 460px;
  overflow: hidden; overflow: clip;               /* clip: focus can never scroll the stage */
  background: var(--black);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.orb.is-drag { cursor: grabbing; }
.orb__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .25s var(--ease); }
.orb.is-swap .orb__gl { opacity: 0; }
/* the edges fall away into the dark */
.orb::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 78% 88% at center, transparent 55%, rgba(0, 0, 0, .85) 100%);
}
/* the tiles stay in the page, off screen, for the keyboard and screen readers. With the sphere
   on they go off screen from the first paint, so the plain grid never flashes up while
   three.js loads */
.orb .grid, .arc-orb .grid { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; margin: 0; overflow: hidden; }
.orb__hint {
  position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 4; pointer-events: none;
  padding: 11px 16px; border-radius: 999px; background: rgba(0, 0, 0, .72); border: 1px solid var(--line-2);
  font: 600 expanded 10px/1 var(--ff); text-transform: uppercase; letter-spacing: .16em; color: var(--amber);
  white-space: nowrap; transition: opacity .6s var(--ease);
}
.orb.is-used .orb__hint { opacity: 0; }

/* ---- the page is the sphere --------------------------------------------
   With the sphere on, the archive opens straight onto it: the nav and the
   filters on top, the sphere filling the rest of the screen, nothing to
   scroll and no footer. The heading stays for screen readers and search. */
.arc-orb, .arc-orb body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.arc-orb #main { height: 100svh; display: flex; flex-direction: column; padding-top: var(--nav-h); overflow: hidden; }
.arc-orb .arc__head {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.arc-orb .arc__end, .arc-orb .footer { display: none; }
.arc-orb .arc__bar { position: relative; top: auto; flex: none; margin-top: 0; padding-block: 6px 14px; background: none; }
/* the count floats over the sphere's top corner, so a longer label can never wrap the bar and
   change the sphere's size */
.arc-orb .arc__count { position: absolute; right: var(--pad); top: calc(100% + 16px); z-index: 5; pointer-events: none; white-space: nowrap; }
.arc-orb .orb { flex: 1; height: auto; min-height: 0; margin-top: 0; }
@media (max-width: 600px) {
  /* one row of filters that slides sideways, so the sphere keeps the screen */
  .arc-orb .arc__bar { flex-wrap: nowrap; padding-block: 4px 10px; }
  .arc-orb .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
  .arc-orb .filters::-webkit-scrollbar { display: none; }
  .arc-orb .filter { flex: none; }
  .arc-orb .arc__count { display: none; }
  .arc-orb .orb { height: auto; }
}