/* ==========================================================================
   CRIT — the archive (homepage) and its directory.
   Not a card grid. A spatial editorial composition built from profile data:
   names sit on an invisible 12 x 6 grid with deliberate offsets, crops,
   orientations and scale jumps, surrounded by a lot of deliberate black.
   ========================================================================== */

.archive {
  position: relative;
  z-index: var(--z-type);
  min-height: 100svh;
  display: grid;
  /* `minmax(0, 1fr)`, not `1fr`: a bare flexible track has an automatic minimum
     of its content, so a directory whose names grow taller than the viewport
     would push the whole archive past the fold. Zero lets it shrink. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: var(--edge) var(--gutter);
  opacity: 0;
  transition: opacity 700ms var(--ease-out-expo);
}

.archive[data-ready='1'] { opacity: 1; }

/* The archive is one screen, not a document. On phones it is allowed to scroll
   (nineteen names need the room); on a desktop it is a fixed composition and
   never moves. */
@media (min-width: 901px) {
  .archive {
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
  }
}

/* ------------------------------------------------------------- chrome */

.archive__head,
.archive__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
  pointer-events: none;
}

.archive__head { align-items: center; }

.archive__head > *,
.archive__foot > * { pointer-events: auto; }

.brandmark {
  display: grid;
  gap: 0.6rem;
  align-items: center;
}

.brandmark img {
  width: clamp(38px, 3.4vw, 58px);
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 18px rgba(190, 198, 214, 0.16));
}

.brandmark__meta {
  display: block;
  line-height: 1.5;
}

.archive__counter {
  display: grid;
  gap: 0.32rem;
  text-align: right;
  justify-items: end;
}

.archive__counter b {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 80, 'wght' 500;
  font-size: clamp(0.9rem, 1.4vw, 1.15rem);
  letter-spacing: var(--track-snug);
  color: var(--bone);
  font-weight: 500;
}

/* ------------------------------------------------- watermark + edge type */

.archive__watermark {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  transform: translate3d(-50%, -50%, 0);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 64, 'wght' 700;
  font-size: min(46vw, 46rem);
  line-height: 0.72;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.055);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 1800ms var(--ease-out-expo) 300ms;
}

.archive[data-ready='1'] .archive__watermark { opacity: 1; }

.archive__edge-type {
  position: absolute;
  left: calc(var(--edge) * 0.42);
  top: 50%;
  transform: translate3d(0, -50%, 0);
  writing-mode: vertical-rl;
  font-family: var(--font-meta);
  font-size: 0.72rem;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--fg-soft);
  text-shadow: 0 0 16px rgba(178, 192, 220, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1600ms var(--ease-out-expo) 500ms;
}

.archive[data-ready='1'] .archive__edge-type { opacity: 1; }

/* ------------------------------------------------------------- directory */

.directory {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, minmax(0, 1fr));
  align-content: center;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(0.5rem, 2vh, 1.6rem) 0;
  gap: clamp(0.1rem, 0.4vh, 0.4rem) 0;
  perspective: 1400px;
}

.entry {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 0;
  text-align: left;
  transform: translate3d(0, var(--lift, 0), 0);
  opacity: 0;
  transition:
    opacity 620ms var(--ease-out-expo),
    transform 620ms var(--ease-out-expo);
}

.archive[data-ready='1'] .entry {
  opacity: 1;
  transform: translate3d(0, var(--lift, 0), 0);
}

.entry__inner {
  display: block;
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0) scale(var(--entry-scale, 1));
  transform-origin: var(--mag-origin, left center);
  transition: transform 340ms var(--ease-out-expo);
}

/* Promote only the name under the pointer: keeping all nineteen entries on
   their own compositor layers spent a full-screen quad budget on layers that
   were not moving. The entrance still composites — a running opacity/transform
   transition is promoted automatically. */
.entry:hover .entry__inner,
.entry:focus-visible .entry__inner {
  will-change: transform;
}

.entry__name {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 80, 'wght' 560;
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: var(--track-tight);
  color: var(--fg-soft);
  /* Names catch the light even at rest. */
  text-shadow: 0 0 26px rgba(178, 192, 220, 0.16);
  white-space: nowrap;
  transition:
    color 220ms var(--ease-out-expo),
    font-variation-settings 380ms var(--ease-out-expo),
    opacity 380ms var(--ease-out-expo),
    letter-spacing 380ms var(--ease-out-expo);
}

.entry[data-orient='v'] {
  justify-items: center;
  align-content: center;
}

.entry[data-orient='v'] .entry__name {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: normal;
  line-height: 1;
  letter-spacing: 0.06em;
  padding-block: 0.1em;
}

.entry[data-align='end'] { justify-items: end; text-align: right; }
.entry[data-align='center'] { justify-items: center; text-align: center; }
.entry[data-align='end'] .entry__inner { --mag-origin: right center; }

/* Scale classes. Archivo's width axis does the counterpoint work: anchors are
   extremely condensed, counterpoints are opened up. */
.entry[data-size='xxl'] .entry__name {
  font-size: var(--type-xxl);
  font-variation-settings: 'wdth' 66, 'wght' 660;
  letter-spacing: -0.052em;
}
.entry[data-size='xl'] .entry__name {
  font-size: var(--type-xl);
  font-variation-settings: 'wdth' 72, 'wght' 620;
  letter-spacing: -0.042em;
}
.entry[data-size='lg'] .entry__name {
  font-size: var(--type-lg);
  font-variation-settings: 'wdth' 84, 'wght' 540;
}
.entry[data-size='md'] .entry__name {
  font-size: var(--type-md);
  font-variation-settings: 'wdth' 92, 'wght' 500;
}
.entry[data-size='sm'] .entry__name {
  font-size: var(--type-sm);
  font-variation-settings: 'wdth' 100, 'wght' 460;
  letter-spacing: 0.01em;
}
.entry[data-size='xs'] .entry__name {
  font-family: var(--font-meta);
  font-size: var(--type-xs);
  font-weight: 400;
  letter-spacing: var(--track-meta);
  color: var(--fg-soft);
}
.entry[data-orient='v'][data-size='xl'] .entry__name,
.entry[data-orient='v'][data-size='lg'] .entry__name { font-size: clamp(1.1rem, 2.1vw, 2.2rem); }
.entry[data-orient='v'][data-size='xxl'] .entry__name { font-size: clamp(1.5rem, 2.9vw, 3.1rem); }
.entry[data-orient='v'][data-size='md'] .entry__name { font-size: clamp(1rem, 1.35vw, 1.4rem); }
.entry[data-orient='v'][data-size='sm'] .entry__name { font-size: clamp(0.92rem, 1.05vw, 1.15rem); }
.entry[data-orient='v'][data-size='xs'] .entry__name { font-size: 0.82rem; letter-spacing: 0.3em; }

/* ------------------------------------------------------- hover behaviour */

.entry[data-hover='0'] .entry__name {
  opacity: calc(0.66 + var(--dim, 1) * 0.34);
  color: var(--fg-soft);
}

.entry[data-hover='1'] .entry__name {
  color: var(--white);
  --entry-scale: 1.012;
}

.entry[data-hover='1'][data-size='xxl'] .entry__name { font-variation-settings: 'wdth' 70, 'wght' 680; }
.entry[data-hover='1'][data-size='xl'] .entry__name { font-variation-settings: 'wdth' 78, 'wght' 640; }
.entry[data-hover='1'][data-size='lg'] .entry__name { font-variation-settings: 'wdth' 90, 'wght' 560; }
.entry[data-hover='1'][data-size='md'] .entry__name { font-variation-settings: 'wdth' 100, 'wght' 520; }
.entry[data-hover='1'][data-size='sm'] .entry__name { font-variation-settings: 'wdth' 108, 'wght' 500; }
.entry[data-hover='1'][data-size='xs'] .entry__name { color: var(--bone); letter-spacing: 0.34em; }

.entry:hover .entry__name,
.entry:focus-visible .entry__name { color: var(--white); }

/* The archival index number that surfaces only on approach. */
.entry__num {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate3d(0, -50%, 0);
  font-family: var(--font-meta);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--fg-soft);
  opacity: 0;
  transition: opacity 300ms var(--ease-out-expo);
  pointer-events: none;
  white-space: nowrap;
}

.entry[data-align='end'] .entry__num { left: auto; right: 0; }
.entry[data-hover='1'] .entry__num { opacity: 0.85; }

/* A hairline that draws under the name when it becomes the subject. */
.entry__rule {
  position: absolute;
  left: 0;
  bottom: -0.42em;
  width: 100%;
  height: 1px;
  background: var(--line-strong);
  transform: scaleX(0);
  transform-origin: var(--rule-origin, left center);
  transition: transform 420ms var(--ease-out-expo);
}

.entry[data-align='end'] .entry__rule { --rule-origin: right center; }
.entry[data-hover='1'] .entry__rule { transform: scaleX(1); }

.entry[data-bleed='1'] { overflow: visible; }

/* A cropped name is allowed to run past the frame — the archive is larger
   than the screen. */
.entry[data-bleed='1'] .entry__name { letter-spacing: -0.06em; }

@media (max-width: 1100px) {
  .archive__edge-type { display: none; }
}

@media (max-width: 900px) {
  .directory {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: none;
    grid-auto-rows: min-content;
    gap: clamp(0.5rem, 1.8vh, 1.1rem) 0.4rem;
    align-content: start;
  }
}

.entry:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: 6px;
}