/* ============================================================
   THE ARCHIVE. Ported from the rival's gallery room (harvest §9) with all
   three of its measured faults fixed, and re-framed on her own material.

   THEIRS: 17.0 MB on a full phone scroll, 126 images at full master size, a
   scroll lock that was a no-op (`.viewer-open` set on body with no CSS rule
   behind it, measured scrolling 600 to 1100 behind an open dialog), a phone
   dialog where the image filled a quarter of the sheet inside a dashed rule of
   dead space, and an eyebrow above the H1.

   OURS: a real two tier pipeline. 109 photographs at 460px webp for the wall
   (24 KB each, 2.69 MB for every one of them, and they load lazily so a phone
   pays for what it scrolls); the 1500px webp is fetched only when a photograph
   is opened, one at a time. The lock is the iOS body pin we already own from
   OverDrive's editor sheet. The viewer sizes itself to the picture.

   THE FRAMING IS THE POINT (Campbell, 2026-07-31: "cropped/framed
   artistically/differently"). No two neighbours share a silhouette: the wall
   cycles seven apertures on a seven step that never lines up with the three or
   four column count, so the repeat is never visible.
   ============================================================ */

.arc-head{
  max-width:44ch;
  margin:0 auto var(--space-7);
  text-align:center;
}
.arc-head p{ margin-top:var(--space-4); }

/* --- the rooms. aria-pressed carries the state; no pill badges. --- */
.arc-rooms{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--space-3);
  margin:0 auto var(--space-6);
}
.arc-room{
  font-family:var(--kc-text); font-size:var(--kc-small); line-height:18px;
  min-height:46px; padding:10px 20px;
  display:inline-flex; align-items:center;
  background:transparent; color:var(--kc-ink);
  border:1px dashed var(--kc-field-deep);
  border-radius:999px;
  cursor:pointer;
  transition:background .25s var(--kc-ease-settle), border-color .25s, color .25s;
}
.arc-room:hover{ border-color:var(--kc-rose); }
.arc-room:focus-visible{ outline:2px solid var(--kc-rose); outline-offset:3px; }
/* the selected room is the one written ON the board, not a coloured pill */
.arc-room[aria-pressed="true"]{
  background:var(--kc-espresso); color:#fdf6f2; border-style:solid; border-color:var(--kc-espresso);
}
.arc-count{ text-align:center; margin-bottom:var(--space-6); }

/* --- THE WALL. Masonry by columns, so heights are never forced equal and the
       run reads as prints pinned up rather than a grid of tiles. --- */
.arc-wall{
  columns:4 268px;
  column-gap:var(--space-5);
  max-width:1380px;
  margin-inline:auto;
}
/* THE TWO FAMILY LAW. A <button> inherits nothing: with no family declared
   these resolved to Arial and g28-axis read a third font on the page. */
.arc-item, .arc-vb{ font-family:var(--kc-text); }
.arc-item{
  break-inside:avoid;
  margin:0 0 var(--space-5);
  display:block; width:100%;
  padding:0; border:0; background:none; cursor:zoom-in;
  transition:transform .5s var(--kc-ease-settle), filter .5s var(--kc-ease-settle);
}
.arc-item img{
  display:block; width:100%; height:auto;
  background:var(--kc-cream-deep);
  box-shadow:0 16px 30px -18px rgba(67,37,36,.55);
}
.arc-item:hover{ transform:translateY(-5px) rotate(0deg); filter:saturate(1.06); }
.arc-item:focus-visible{ outline:2px solid var(--kc-rose); outline-offset:5px; }
.arc-item[hidden]{ display:none; }

/* SEVEN APERTURES ON A SEVEN STEP. Column counts here are 4, 3 and 2, none of
   which divides seven, so a shape never lands under itself. Two of them are
   torn polygons rather than radii, which is the one framing move the rival
   found that we did not already own: a photograph with a slightly torn edge
   reads as a print somebody handled, not as a component. */
.arc-item:nth-child(7n+1) img{ border-radius:50%; aspect-ratio:1; object-fit:cover; }
.arc-item:nth-child(7n+2) img{ border-radius:6px 6px 26px 6px; }
.arc-item:nth-child(7n+3) img{ clip-path:polygon(3% 0, 100% 4%, 96% 100%, 0 95%); }
.arc-item:nth-child(7n+4) img{ border-radius:50% 50% 14px 14px; aspect-ratio:3/4; object-fit:cover; }
.arc-item:nth-child(7n+5) img{ border-radius:50% 50% 10px 50%; aspect-ratio:1; object-fit:cover; }
.arc-item:nth-child(7n+6) img{ clip-path:polygon(0 4%, 96% 0, 100% 94%, 4% 100%); }
.arc-item:nth-child(7n+7) img{ border-radius:18px; }

/* set down at small honest angles, never square to the grid */
.arc-item:nth-child(4n+1){ transform:rotate(-1.4deg); }
.arc-item:nth-child(4n+2){ transform:rotate(1.1deg);  }
.arc-item:nth-child(4n+3){ transform:rotate(-.6deg);  }
.arc-item:nth-child(4n+4){ transform:rotate(1.7deg);  }
.arc-item:hover{ transform:translateY(-5px); }

/* ============ THE VIEWER ============ */
.arc-viewer{
  padding:0; border:0; background:transparent;
  max-width:100vw; max-height:100dvh; width:100%; height:100%;
  overflow:hidden;
}
.arc-viewer::backdrop{ background:rgba(27,14,14,.94); }
.arc-vin{
  position:relative;
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-4);
  padding:clamp(14px, 3vw, 34px);
  padding-top:max(clamp(14px,3vw,34px), env(safe-area-inset-top));
  padding-bottom:max(clamp(14px,3vw,34px), env(safe-area-inset-bottom));
}
/* THE STAGE IS SIZED TO THE PICTURE. On the rival's phone the image filled about
   a quarter of the sheet with a dashed rule drawn around the dead space. */
.arc-vstage{
  flex:1 1 auto;
  min-height:0;
  display:flex; align-items:center; justify-content:center;
  width:100%;
}
.arc-vstage img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:4px 4px 22px 4px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.8);
}
.arc-vbar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; gap:var(--space-4);
  color:#f0dcd5;
  font-size:var(--kc-small);
}
.arc-vbar b{ font-weight:400; color:#fff6ee; }
.arc-vb{
  min-width:50px; min-height:50px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:#fff6ee;
  border:1px dashed rgba(251,228,234,.5);
  border-radius:999px; cursor:pointer;
  font-size:19px; line-height:1;
  transition:background .2s, border-color .2s;
}
.arc-vb:hover{ background:rgba(251,228,234,.14); border-color:var(--kc-field); }
.arc-vb:focus-visible{ outline:2px solid var(--kc-field); outline-offset:3px; }
.arc-vclose{ position:absolute; top:max(10px, env(safe-area-inset-top)); right:12px; }

/* the picture carries its identity across the open, so it grows out of the wall
   instead of appearing over it (browsers without view transitions just open) */
.arc-active{ view-transition-name:kc-bake; }

@media (max-width:900px){ .arc-wall{ columns:3 210px; column-gap:var(--space-4); } }
@media (max-width:620px){
  .arc-wall{ columns:2 148px; column-gap:var(--space-3); }
  /* the picture gets the sheet; the controls ride over the dark under it */
  .arc-vin{ padding:6px; padding-bottom:max(6px, env(safe-area-inset-bottom)); }
  .arc-vbar{ position:absolute; left:0; right:0;
             bottom:max(10px, env(safe-area-inset-bottom));
             background:linear-gradient(rgba(27,14,14,0), rgba(27,14,14,.82) 40%);
             padding:16px 8px 8px; }
  .arc-vstage{ height:100%; }
  .arc-item{ margin-bottom:var(--space-4); }
  .arc-rooms{ gap:var(--space-2); }
  .arc-room{ padding:9px 15px; }
}
@media (prefers-reduced-motion:reduce){
  .arc-item, .arc-item:hover{ transition:none; }
}