/* ============================================================
   THE ARCHIVE — a breathing mosaic over a fixed plate.

   The wall opens as it crosses the viewport and closes again as it
   leaves. What it opens ONTO is the point: a still fixed to the
   viewport sits behind everything from the plate section down, so the
   gutters are not blank paper but glimpses of another frame.

   Orientation is never invented. Every tile's column/row span comes
   from its source aspect (--c/--r on desktop, --cm/--rm on narrow),
   so a portrait film stays portrait and a landscape plate stays
   landscape at both breakpoints.
   ============================================================ */

/* ------------------------------------------------------------
   LANDING — opaque, so the fixed plate never shows behind it
   ------------------------------------------------------------ */

.archive-hero {
  position: relative;
  z-index: 1;
  background: var(--ivory);
  max-width: 96rem;
  margin: 0 auto;
  padding: clamp(8rem, 18vh, 12rem) var(--gutter) clamp(3rem, 8vh, 5rem);
}

.archive-hero .display { font-size: var(--text-hero); line-height: 0.95; }

.archive-hero .lede { margin-top: 1.4rem; max-width: 36rem; }

.archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(2rem, 5vh, 3rem);
}

.archive-filter {
  display: inline-flex;
  align-items: center;
  padding: 0.62rem 1.15rem;
  border: 1px solid rgba(166, 124, 78, 0.35);
  border-radius: 2px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--dur-mid) ease, border-color var(--dur-mid) ease,
              background-color var(--dur-mid) ease;
}

.archive-filter:hover { border-color: var(--bordeaux); color: var(--bordeaux); }

.archive-filter.is-active {
  background: var(--bordeaux);
  border-color: var(--bordeaux);
  color: var(--ivory);
}

.archive-count {
  margin-top: 1.2rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


/* ------------------------------------------------------------
   THE FIXED PLATE
   Fixed rather than sticky: it must stay put behind the plate copy
   AND behind the whole mosaic, which sticky cannot span. archive.js
   fades it in at the plate, so it never shows through the landing.
   ------------------------------------------------------------ */

.ar-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

body.ar-bg-on .ar-bg { opacity: 1; }

.ar-bg picture,
.ar-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

/* Two veils: a flat one holding the copy legible (measured at 4.6:1
   against the real frame) and a raking one keeping a little wine in
   the corner the wall opens toward. */
.ar-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--ivory) 0%, rgba(246, 242, 236, 0.30) 18%,
                    rgba(246, 242, 236, 0.30) 82%, var(--ivory) 100%),
    linear-gradient(100deg, rgba(246, 242, 236, 0.48) 0%,
                    rgba(246, 242, 236, 0.18) 55%, rgba(110, 18, 37, 0.14) 100%);
}

/* everything that is not the plate paints above it */
.ar-plate,
.ar-mosaic,
.ar-cta,
.footer { position: relative; z-index: 1; }


/* ------------------------------------------------------------
   THE PLATE — copy alone, standing on the fixed still
   ------------------------------------------------------------ */

.ar-plate {
  min-height: 92svh;
  display: grid;
  place-items: center;
}

/* A scrim under the copy alone. The global veil is deliberately light so
   the wall opens onto a readable photograph; the legibility the copy
   needs is bought locally instead of by washing out the whole plate. */
.ar-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 68% 58% at 50% 50%,
              rgba(246, 242, 236, 0.90) 0%,
              rgba(246, 242, 236, 0.66) 46%,
              rgba(246, 242, 236, 0) 78%);
}

.ar-plate-inner {
  max-width: 44rem;
  padding: clamp(4rem, 12vh, 8rem) var(--gutter);
  text-align: center;
}

.ar-plate-inner .eyebrow { justify-content: center; }
.ar-plate-inner .display { font-size: var(--text-h2); }
.ar-plate-inner .lede { margin-top: 1.3rem; }


/* ------------------------------------------------------------
   THE MOSAIC
   --spread runs 0 (wall shut, no gutters) to 1 (wall open).
   --colw is one column, and rows are one column tall, so a tile's
   C/R spans ARE its aspect ratio.
   ------------------------------------------------------------ */

.ar-mosaic {
  --colw: 8.2vw;
  padding: 0 0 clamp(4rem, 10vh, 7rem);
}

.ar-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: var(--colw);
  /* wider than the reference: these gutters are showing a photograph
     now, so they are worth opening */
  gap: calc(var(--spread, 0) * 1.5rem);
  padding: 0 calc(var(--spread, 0) * var(--gutter));
  transition: gap 0.12s linear, padding 0.12s linear;
}

.ar-tile {
  position: relative;
  overflow: hidden;
  grid-column: span var(--c, 3);
  grid-row: span var(--r, 4);
  background: var(--ivory-deep);
  /* each tile drifts at its own rate as the wall opens, so it reads as
     decompression rather than as a gap animation */
  transform: translate3d(0, calc(var(--spread, 0) * var(--drift, 0px)), 0);
  transition: transform 0.12s linear;
}

.ar-tile img,
.ar-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The still is what you normally see. The film sits on top at zero
   opacity and only fades up while previewing — a <video preload="none">
   will not reliably paint its own poster, and this keeps the wall still
   until a cursor or a finger asks for movement. */
.ar-tile .ar-film {
  opacity: 0;
  transition: opacity var(--dur-mid) ease;
}

.ar-tile.is-previewing .ar-film { opacity: 1; }

/* The frosting on the held-back majority. */
.ar-tile.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(11px) saturate(0.86);
  -webkit-backdrop-filter: blur(11px) saturate(0.86);
  background: rgba(246, 242, 236, 0.29);
  transition: backdrop-filter var(--dur-mid) ease, background-color var(--dur-mid) ease;
}

.ar-tile.is-locked:hover::after,
.ar-tile.is-locked.is-previewing::after {
  backdrop-filter: blur(8.5px) saturate(0.92);
  -webkit-backdrop-filter: blur(8.5px) saturate(0.92);
  background: rgba(246, 242, 236, 0.22);
}

/* the wax seal, small — the tile is the point, not the lock */
.ar-tile.is-locked .ar-lock {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  z-index: 2;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bordeaux);
  color: var(--ivory);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.9;
}

.ar-tile-label {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  z-index: 2;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory);
  text-shadow: 0 1px 6px rgba(23, 17, 15, 0.7);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-mid) ease, transform var(--dur-mid) var(--ease-silk);
}

.ar-tile:hover .ar-tile-label,
.ar-tile.is-previewing .ar-tile-label { opacity: 1; transform: none; }

/* a hairline that only shows once the wall has opened */
.ar-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgba(166, 124, 78, calc(var(--spread, 0) * 0.35));
  pointer-events: none;
}

.ar-tile[hidden] { display: none; }


/* ------------------------------------------------------------
   THE ANNOTATIONS — a full-width editorial pause across the wall,
   rather than a blank tile punched out of it
   ------------------------------------------------------------ */

.ar-note {
  grid-column: 1 / -1;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1rem var(--gutter);
  text-align: center;
  opacity: calc(var(--spread, 0) * 1.5 - 0.35);
  transition: opacity 0.12s linear;
}

.ar-note-rule {
  width: clamp(2.5rem, 6vw, 5rem);
  height: 1px;
  background: var(--bordeaux);
  opacity: 0.55;
}

.ar-note strong {
  max-width: 34rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 0.85rem + 1vw, 2rem);
  line-height: 1.25;
  color: var(--ink);
}

.ar-note-tag {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bordeaux);
}


/* ------------------------------------------------------------
   NARROW — six columns, and every tile re-spans to keep its own
   orientation rather than inheriting the desktop spans
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  .ar-mosaic { --colw: 16.4vw; }

  .ar-grid {
    grid-template-columns: repeat(6, 1fr);
    /* the wall stays slightly open on a phone — edge to edge at this
       width reads as texture rather than as a catalogue */
    gap: calc(0.25rem + var(--spread, 0) * 0.75rem);
    padding: 0 calc(var(--spread, 0) * 0.75rem);
  }

  .ar-tile {
    grid-column: span var(--cm, 3);
    grid-row: span var(--rm, 4);
    transform: none;
  }

  .ar-note {
    grid-row: span 2;
    padding: 1.2rem 1rem;
    opacity: 1;
  }

  .ar-plate { min-height: 78svh; }

  /* a real touch target: 44px, not the 36px the type alone gives */
  .archive-filter { min-height: 44px; padding: 0.6rem 1.1rem; }
}


/* ------------------------------------------------------------
   THE CTA — one under each section, all pointing at the Circle
   ------------------------------------------------------------ */

.ar-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  padding: clamp(3rem, 7vh, 4.75rem) var(--gutter);
  text-align: center;
}

.ar-cta-rule {
  width: clamp(2.5rem, 6vw, 5rem);
  height: 1px;
  background: var(--bordeaux);
  opacity: 0.55;
}

.ar-cta-copy {
  max-width: 36rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 0.85rem + 0.85vw, 1.75rem);
  line-height: 1.32;
  color: var(--ink);
}

.ar-cta .btn { margin-top: 0.2rem; }

@media (max-width: 900px) {
  .ar-cta { padding: clamp(2.5rem, 6vh, 3.5rem) 1.25rem; gap: 1rem; }
  .ar-cta .btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-grid,
  .ar-tile,
  .ar-note,
  .ar-bg { transition: none; }
}