/* ==========================================================================
   CRIT — responsive composition.
   Mobile is not a shrunken desktop. It gets its own art direction: larger
   relative crops, edge typography, one-screen profiles wherever practical, and
   no hover dependence anywhere.
   ========================================================================== */

/* --------------------------------------------------------------- tablet */

@media (max-width: 1080px) {
  .pf-stage {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 0.7rem clamp(0.6rem, 2vw, 1.1rem);
  }

  /* Master composition — tablet. The same zones as the desktop, a tighter frame:
     quote top-left, name upper-right, the plate holding the left three quarters
     from row three down, socials and then the second plate stepping down the
     right edge, track and bio across the bottom, and the bottom-right corner
     left empty for the fixed navigation. */
  .profile[data-layout='master'] .pf-stage {
    grid-template-areas:
      '. . . . . .'
      'Q Q . . I I'
      'V V V V . .'
      'V V V V L L'
      'V V V V X X'
      'S S B B . .';
  }
  .profile[data-layout='master'] .pf-extra img { max-width: clamp(72px, 9vw, 120px); }
  /* The plate keeps the desktop's treatment here: centred in its own zone rather
     than pressed to the left edge. The desktop's left bias is dropped, because on
     a frame this narrow the zone is already most of the width and a fifth of it in
     would walk the picture into the centre. */
  .profile[data-layout='master'] .pf-slot--visual {
    justify-content: center;
    padding-inline: 0;
  }

  .profile[data-layout='float'] .pf-stage {
    grid-template-areas:
      '. . . . . V'
      '. . . . . V'
      '. . . . . Q'
      '. I . . . Q'
      '. B . . . Q'
      '. . L . S .';
  }
  .profile[data-layout='float'] .pf-slot--visual { width: 100%; }
  .profile[data-layout='float'] .pf-slot--song,
  .profile[data-layout='float'] .pf-slot--socials { justify-self: start; text-align: left; }

  .profile[data-layout='portal'] .pf-stage {
    grid-template-areas:
      '. . . . . .'
      '. . V V V .'
      '. . V V V .'
      'I I I I I .'
      'B B . . . S'
      '. . L L . .';
  }

  .profile[data-layout='edge'] .pf-stage {
    grid-template-areas:
      '. . . . . .'
      'I . . . V V'
      'I . . . V V'
      'B . . . V V'
      'Q . . . V V'
      'L . . S . .';
  }

  .profile[data-layout='center'] .pf-stage {
    grid-template-areas:
      '. . . . . .'
      '. . V V . .'
      '. . V V . .'
      '. Q Q Q . .'
      '. I I I . .'
      '. B B . L L';
  }
  .profile[data-layout='center'] .pf-slot--socials,
  .profile[data-layout='center'] .pf-slot--song,
  .profile[data-layout='center'] .pf-slot--extra { position: static; }
  .profile[data-layout='center'] .pf-slot--socials { grid-area: L; }

  .profile[data-layout='overlap'] .pf-stage {
    grid-template-areas:
      '. . . . . S'
      '. V V V V .'
      '. V V V V .'
      'I I I I I .'
      'Q . . . . .'
      'B B . . L L';
  }
  .profile[data-layout='overlap'] .pf-slot--song,
  .profile[data-layout='overlap'] .pf-slot--socials { justify-self: start; text-align: left; }

  .profile[data-layout='void'] .pf-stage {
    grid-template-areas:
      '. . . . . .'
      '. . . . . .'
      '. I I I I .'
      '. . . . . .'
      '. . Q . . .'
      '. B . L L .';
  }

  .profile[data-layout='archive'] .pf-stage {
    grid-template-areas:
      '. . . . . .'
      '. . V V V .'
      '. . V V V .'
      'I . . . Q .'
      'I . . . Q .'
      'B . . S . L';
  }
  .profile[data-layout='archive'] .pf-slot--socials,
  .profile[data-layout='archive'] .pf-slot--song,
  .profile[data-layout='archive'] .pf-slot--extra { position: static; }
  .profile[data-layout='archive'] .pf-slot--socials { grid-area: L; }
  .profile[data-layout='archive'] .pf-slot--song { grid-area: S; justify-self: end; }

  .profile[data-layout='typographic'] .pf-stage {
    grid-template-areas:
      '. . . . . .'
      'I I I I I I'
      'I I I I I I'
      'I I I I I I'
      '. Q . . . .'
      '. B . L L .';
  }
  .profile[data-layout='typographic'] .pf-slot--socials { grid-area: L; justify-self: start; }
  .profile[data-layout='typographic'] .pf-slot--song,
  .profile[data-layout='typographic'] .pf-slot--extra { position: static; display: none; }

  .profile[data-layout='fragment'] .pf-stage {
    grid-template-areas:
      '. . . . . .'
      'V V . . . I'
      'V V . . . I'
      'V V . . . I'
      '. . . . . I'
      'B B . . L L';
  }
  .profile[data-layout='fragment'] .pf-slot--visual { translate: -12% 0; }
  .profile[data-layout='fragment'] .pf-slot--song,
  .profile[data-layout='fragment'] .pf-slot--extra { position: static; display: none; }

  .profile[data-layout='immersive'] .pf-stage {
    grid-template-areas:
      '. . . . . .'
      '. . . . . .'
      '. Q Q Q . .'
      '. I I I . .'
      '. B B . . .'
      '. B B . L L';
  }
  .profile[data-layout='immersive'] .pf-slot--socials { grid-area: L; justify-self: start; }
  .profile[data-layout='immersive'] .pf-slot--song,
  .profile[data-layout='immersive'] .pf-slot--extra { position: static; display: none; }

  .pf-stage [class*='pf-slot'] { grid-area: auto; }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 720px) {
  :root {
    --type-xxl: clamp(2.6rem, 15vw, 5rem);
    --type-xl: clamp(1.9rem, 10vw, 3.4rem);
    --type-lg: clamp(1.35rem, 7vw, 2.2rem);
    --track-max: 0.34em;
  }

  .archive {
    padding: clamp(0.9rem, 3vw, 1.4rem) clamp(1rem, 5vw, 1.6rem);
    grid-template-rows: auto auto 1fr auto;
  }

  .archive__watermark {
    font-size: 58vw;
    top: 52%;
    -webkit-text-stroke-width: 0.7px;
  }

  /* The directory becomes a legible vertical archive: still staggered, still
     varied in scale, but thumb-friendly and free of hover dependence. */
  .directory {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: min-content;
    gap: clamp(0.85rem, 2.6vh, 1.5rem) 0.5rem;
    align-content: start;
    padding: clamp(1.4rem, 5vh, 2.6rem) 0 clamp(1rem, 3vh, 2rem);
  }

  .directory .entry {
    grid-column: auto / span 2 !important;
    grid-row: auto !important;
    justify-items: start;
    transform: none !important;
    text-align: left;
  }

  .directory .entry[data-size='xxl'] { grid-column: 1 / -1 !important; }
  .directory .entry[data-size='xl'] { grid-column: 1 / -1 !important; }
  .directory .entry[data-size='xs'],
  .directory .entry[data-size='sm'] { grid-column: span 1 !important; }

  .directory .entry[data-orient='v'] .entry__name,
  .directory .entry[data-orient='v'][data-size] .entry__name {
    writing-mode: horizontal-tb;
    font-size: var(--type-sm);
    letter-spacing: 0.02em;
    line-height: 1;
  }

  .directory .entry[data-align='end'],
  .directory .entry[data-align='center'] { justify-items: start; text-align: left; }

  .directory .entry__name { white-space: nowrap; }
  .directory .entry[data-size='xxl'] .entry__name,
  .directory .entry[data-size='xl'] .entry__name { letter-spacing: -0.04em; }

  .entry__num { display: none; }
  .entry__rule { display: none; }
  .entry[data-hover='0'] .entry__name { opacity: 1; color: var(--fg-soft); }
  .entry .entry__inner { transform: none !important; }

  /* ------------------------------------------------------------ entrance */

  .entrance__core {
    width: min(86vw, 520px);
    transform: translate3d(0, -3vh, 0);
  }

  .entrance__type { margin-top: 1.5rem; }
  .entrance__enter-label { font-size: 0.82rem; }
  .entrance__foot { flex-direction: column; align-items: flex-start; gap: 0.35rem; }

  /* ----------------------------------------------------------- profiles */

  .pf-stage {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(7, minmax(0, 1fr));
    gap: 0.5rem 0.7rem;
    padding: clamp(3.4rem, 9vh, 4.6rem) clamp(1rem, 5vw, 1.5rem) clamp(1.6rem, 5vh, 2.4rem);
  }

  /* Master composition — phone. One column of zones, the same hierarchy.
     The portrait takes the space that is left; every metadata row is sized to
     its own content and may only shrink, so text is never pushed out of its
     zone into a neighbour. */
  .profile[data-layout='master'] .pf-stage {
    grid-template-rows:
      minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)
      minmax(0, max-content) minmax(0, max-content)
      minmax(0, max-content) minmax(0, max-content);
    grid-template-areas:
      'V V V V'
      'V V V V'
      'V V V V'
      'V V V V'
      'I I I I'
      'B B B B'
      'Q Q L L'
      'S S X X';
  }
  .profile[data-layout='master'] .pf-visual {
    height: 100%;
    width: auto;
    aspect-ratio: 4 / 5;
    max-width: 100%;
    /* Centred on the stacked phone grid too, matching the desktop. On a frame this
       narrow the zone is the whole width, so this reads as a balanced column with
       equal air either side rather than a plate stuck to one edge. */
    margin-inline: auto;
  }
  .profile[data-layout='master'] .pf-slot--identity { justify-items: start; text-align: left; }
  .profile[data-layout='master'] .pf-extra img { max-width: clamp(64px, 20vw, 110px); }
  /* The lower band keeps the master's reading order: quote left and socials
     right on one row, then track left and the second plate lower-right. */
  .profile[data-layout='master'] .pf-slot--extra { justify-self: end; align-self: center; }
  .profile[data-layout='master'] .pf-slot--quote { justify-self: start; text-align: left; }
  .profile[data-layout='master'] .pf-slot--song { justify-self: start; text-align: left; }
  .profile[data-layout='master'] .pf-slot--socials { justify-self: end; align-self: center; }

  /* Mobile profiles get their own composition family per layout rather than
     a stacked image/text/socials column. */
  .profile[data-layout='float'] .pf-stage {
    grid-template-areas:
      'V V V V'
      'V V V V'
      'Q Q Q Q'
      'I I I I'
      'I I I I'
      'B B . .'
      'L L S S';
  }
  .profile[data-layout='float'] .pf-slot--visual { width: 100%; grid-area: V; }
  .profile[data-layout='float'] .pf-slot--identity { grid-area: I; }
  .profile[data-layout='float'] .pf-slot--quote { grid-area: Q; writing-mode: horizontal-tb; }
  .profile[data-layout='float'] .pf-slot--bio { grid-area: B; }
  .profile[data-layout='float'] .pf-slot--socials { grid-area: L; }
  .profile[data-layout='float'] .pf-slot--song { grid-area: S; }

  .profile[data-layout='portal'] .pf-stage {
    grid-template-areas:
      '. . . .'
      'V V V .'
      'V V V .'
      'I I I I'
      'I I I I'
      'B B . .'
      'L L . S';
  }
  .profile[data-layout='portal'] .pf-slot--quote { grid-area: V; justify-self: start; align-self: start; }
  .profile[data-layout='portal'] .pf-slot--song { grid-area: S; justify-self: end; }

  .profile[data-layout='edge'] .pf-stage {
    grid-template-areas:
      'S S . .'
      '. V V V'
      '. V V V'
      'I I I I'
      'I I I I'
      'B B Q Q'
      'L L . .';
  }
  .profile[data-layout='edge'] .pf-slot--identity { grid-area: I; }
  .profile[data-layout='edge'] .pf-slot--visual { grid-area: V; translate: 10% 0; }
  .profile[data-layout='edge'] .pf-slot--bio { grid-area: B; }
  .profile[data-layout='edge'] .pf-slot--song { grid-area: S; justify-self: start; }
  .profile[data-layout='edge'] .pf-slot--quote { grid-area: Q; text-align: right; justify-self: end; }

  .profile[data-layout='center'] .pf-stage {
    grid-template-areas:
      '. . . .'
      '. V V .'
      '. V V .'
      '. Q Q .'
      'I I I I'
      'B B . .'
      'L L . S';
  }
  .profile[data-layout='center'] .pf-slot--visual { grid-area: V; }
  .profile[data-layout='center'] .pf-slot--quote { grid-area: Q; }
  .profile[data-layout='center'] .pf-slot--identity { grid-area: I; }
  .profile[data-layout='center'] .pf-slot--bio { grid-area: B; }
  .profile[data-layout='center'] .pf-slot--socials { grid-area: L; }
  .profile[data-layout='center'] .pf-slot--song { grid-area: S; justify-self: end; }

  .profile[data-layout='overlap'] .pf-stage {
    grid-template-areas:
      'V . . .'
      'V . . .'
      'Q Q Q .'
      'I I I I'
      'I I I I'
      'B B . .'
      'L L . S';
  }
  .profile[data-layout='overlap'] .pf-slot--visual { grid-area: V; }
  .profile[data-layout='overlap'] .pf-slot--identity { grid-area: I; }
  .profile[data-layout='overlap'] .pf-slot--song { grid-area: S; justify-self: end; }

  .profile[data-layout='void'] .pf-stage {
    grid-template-areas:
      '. . . .'
      '. . . .'
      '. Q Q .'
      'I I I I'
      'I I I I'
      'B B . .'
      'L L . .';
  }
  .profile[data-layout='void'] .pf-slot--quote { grid-area: Q; }
  .profile[data-layout='void'] .pf-slot--socials { grid-area: L; }

  .profile[data-layout='archive'] .pf-stage {
    grid-template-areas:
      '. . . .'
      '. V V .'
      '. V V .'
      'I I I I'
      'Q Q . .'
      'B B . .'
      'L L . S';
  }
  .profile[data-layout='archive'] .pf-slot--visual { grid-area: V; }
  .profile[data-layout='archive'] .pf-slot--identity { grid-area: I; }
  .profile[data-layout='archive'] .pf-slot--quote { grid-area: Q; }
  .profile[data-layout='archive'] .pf-slot--bio { grid-area: B; }
  .profile[data-layout='archive'] .pf-slot--socials { grid-area: L; }
  .profile[data-layout='archive'] .pf-slot--song { grid-area: S; justify-self: end; }

  .profile[data-layout='typographic'] .pf-stage {
    grid-template-areas:
      'I I I I'
      'I I I I'
      'I I I I'
      'I I I I'
      'Q Q . .'
      'B B . .'
      'L L . .';
  }
  .profile[data-layout='typographic'] .pf-slot--identity { grid-area: I; }
  .profile[data-layout='typographic'] .pf-slot--quote { grid-area: Q; }
  .profile[data-layout='typographic'] .pf-slot--bio { grid-area: B; }
  .profile[data-layout='typographic'] .pf-slot--socials { grid-area: L; }
  .profile[data-layout='typographic'] .pf-name { --pf-name-size: clamp(3rem, 19vw, 6rem); }

  .profile[data-layout='fragment'] .pf-stage {
    grid-template-areas:
      'V . . .'
      'V . . .'
      'V . . .'
      '. I I I'
      '. I I I'
      'B B Q Q'
      'L L . .';
  }
  .profile[data-layout='fragment'] .pf-slot--visual { grid-area: V; translate: -14% 0; }
  .profile[data-layout='fragment'] .pf-slot--identity { grid-area: I; justify-items: start; text-align: left; }
  .profile[data-layout='fragment'] .pf-slot--bio { grid-area: B; }
  .profile[data-layout='fragment'] .pf-slot--quote { grid-area: Q; text-align: right; justify-self: end; }

  .profile[data-layout='immersive'] .pf-stage {
    grid-template-areas:
      '. . . .'
      '. . . .'
      '. Q Q .'
      'I I I I'
      'I I I I'
      'B B . .'
      'L L . S';
  }
  .profile[data-layout='immersive'] .pf-slot--quote { grid-area: Q; }
  .profile[data-layout='immersive'] .pf-slot--identity { grid-area: I; }
  .profile[data-layout='immersive'] .pf-slot--bio { grid-area: B; }
  .profile[data-layout='immersive'] .pf-slot--socials { grid-area: L; }
  .profile[data-layout='immersive'] .pf-slot--song { grid-area: S; justify-self: end; }

  .pf-stage [class*='pf-slot'] { grid-area: auto; }

  /* Fixed bottom furniture returns into the grid on mobile. */
  .pf-slot--song,
  .pf-slot--socials,
  .pf-slot--extra { position: static !important; }

  .pf-slot--song { justify-self: start; }
  .pf-slot--extra { align-content: end; justify-self: end; text-align: right; }
  .pf-slot--extra img { width: 78px; }
  .pf-extra__info { max-width: 24ch; font-size: 0.82rem; }

  .pf-name { --pf-name-size: clamp(2.4rem, 13vw, 4.4rem); }
  .pf-identity { align-content: center; }

  .pf-socials { gap: 0.75rem 1rem; }
  .pf-social { font-size: 0.68rem; letter-spacing: 0.18em; }

  .pf-caption { display: none; }

  /* The preview fragment is a desktop affordance — touch opens directly. */
  .preview { display: none; }

  .archive__counter { display: none; }
}

/* Short phones: the portrait yields a row so the metadata band never spills
   past the fold. */
@media (max-width: 720px) and (max-height: 640px) {
  .profile[data-layout='master'] .pf-stage {
    grid-template-rows:
      minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)
      minmax(0, max-content) minmax(0, max-content)
      minmax(0, max-content) minmax(0, max-content);
    grid-template-areas:
      'V V V V'
      'V V V V'
      'V V V V'
      'I I I I'
      'B B B B'
      'Q Q L L'
      'S S X X';
  }
}

/* Narrow phones: the metadata band can hold several links, so the socials get a
   row of their own and wrap, right-aligned, instead of being clipped. The second
   plate keeps the bottom-right corner to itself for the same reason. */
@media (max-width: 420px) {
  .profile[data-layout='master'] .pf-stage {
    grid-template-rows:
      minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)
      minmax(0, max-content) minmax(0, max-content)
      minmax(0, max-content) minmax(0, max-content) minmax(0, max-content);
    grid-template-areas:
      'V V V V'
      'V V V V'
      'V V V V'
      'I I I I'
      'B B B B'
      'Q Q L L'
      'S S . .'
      '. . X X';
  }
  .profile[data-layout='master'] .pf-slot--socials { justify-self: end; align-self: center; }
  .profile[data-layout='master'] .pf-slot--extra { justify-self: end; align-self: center; }
  .profile[data-layout='master'] .pf-socials { justify-content: flex-end; gap: 0.45rem 0.85rem; }
  .profile[data-layout='master'] .pf-social { font-size: 0.6rem; letter-spacing: 0.08em; }
}

@media (max-width: 380px) {
  .directory { grid-template-columns: repeat(3, 1fr); }
  .directory .entry { grid-column: span 2 !important; }

  /* Very narrow: the index would otherwise meet the archive marker, so the
     rule is dropped and the marker is set smaller. */
  .pf-index { font-size: 0.62rem; letter-spacing: 0.12em; gap: 0.4rem; }
  .pf-index::before { display: none; }
}

/* ------------------------------------------------------------- landscape */

@media (max-height: 620px) and (orientation: landscape) {
  /* The archive marker is anchored to the viewport's top edge, so the stage has to
     start below wherever it actually ends - not below a guessed 3rem. On this
     breakpoint the tablet grid also moves the quote into the first row, where it
     used to meet the marker: at 1024x600 the two boxes overlapped by 1199px2.
     The floor only bites where the fixed padding was already too small. */
  .pf-stage { padding-top: max(3rem, calc(var(--edge) + 2.5rem)); padding-bottom: 1.4rem; }
  .pf-name { --pf-name-size: clamp(1.6rem, 6vw, 2.6rem); }
  /* A short landscape carries every zone the master defines - it just has less
     of each. The second plate is reduced rather than dropped, because hiding it
     would leave the composition with a hole where a zone belongs. */
  .profile[data-layout='master'] .pf-extra img { max-width: clamp(46px, 5.5vw, 78px); }
  .profile[data-layout='master'] .pf-extra__info { display: none; }

  /* Below about 620px of height there is not enough room for a dominant plate
     and full-length prose at the same time. The plate keeps the larger share,
     because it is the composition, and the two text zones are held to a line
     count so they can never push past the fold. Neither zone is removed: the
     master still has all six, it simply says less. */
  .profile[data-layout='master'] .pf-stage {
    grid-template-rows:
      minmax(0, 0.25fr)   /* the empty top band */
      minmax(0, 0.7fr)    /* quote and name */
      minmax(0, 1.15fr)   /* plate, top */
      minmax(0, 1.15fr)   /* plate, socials */
      minmax(0, 1.15fr)   /* plate, second plate */
      minmax(0, 0.95fr);  /* track and bio */
  }
  .profile[data-layout='master'] .pf-bio p {
    font-size: clamp(0.68rem, 1.5vw, 0.8rem);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .profile[data-layout='master'] .pf-quote p,
  .profile[data-layout='master'] .pf-quote {
    font-size: clamp(0.66rem, 1.4vw, 0.78rem);
    line-height: 1.4;
  }
  .entrance__gate { padding-bottom: 1rem; }
  .entrance__core { width: min(56vw, 420px); }
}

/* ---------------------------------------------------------- reduced motion
   CRIT keeps its identity — the atmosphere still breathes, just far less. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 220ms !important;
    scroll-behavior: auto !important;
  }

  .atmo-grain,
  .atmo-scratches { animation: none !important; }
  .pf-grain { animation: none !important; }
  .atmo-light { animation: none !important; }
  .entry { transform: none !important; }
  .preview { transition-duration: 160ms !important; }
  .portal-veil[data-closing='1'],
  .portal-veil[data-opening='1'] { animation-duration: 320ms !important; }
  /* Reduced motion still deserves lit metal — only the movement stops, not the
     light. The gain is static and the halo comes from the pre-baked bloom. */
  .entrance__glyph {
    filter: brightness(1.38) contrast(1.08) saturate(1.05) !important;
  }
  .entrance__bloom,
  .entrance[data-stage='settled'] .entrance__bloom { opacity: 0.34 !important; }
  .entrance__sparkles i { animation: none !important; opacity: 0.45; transform: scale(0.8); }
  /* The ignition and exit bursts are pure movement; with motion reduced there is
     nothing to read, so they stay out of the frame entirely rather than
     snapping straight to their end state (which would flash the void). */
  .entrance__pulse,
  .entrance__shock,
  .entrance__portal,
  .entrance__sparks,
  .entrance__iris,
  .entrance__streak,
  .entrance__outburst { display: none !important; }
}

/* ---------------------------------------------------------------- print */

@media print {
  .atmosphere,
  .entrance,
  .cursor,
  .preview,
  .portal-veil { display: none !important; }
  body { background: #fff; color: #000; }
}