/* ═══════════════════════════════════════════════════════════════════
   Arcos Design Firm — the infinite fisheye grid

   Two states, and the markup is the same in both. Without the script
   the section is a plain responsive grid of photographs. With it,
   js/fisheye.js adds .has-fg and every rule below that hides the list
   or sizes the canvas comes into effect. Nothing here assumes the
   script ran; that is the point of scoping all of it.
   ═══════════════════════════════════════════════════════════════════ */

.fg{
  position:relative;
  background:var(--ink);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}

/* ── the heading ──────────────────────────────────────────────────── */
.fg__head{
  padding:clamp(3rem,7vw,5.5rem) var(--gut) clamp(1.5rem,3vw,2.25rem);
  max-width:64ch;
}
.fg__title{
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-major);
  line-height:1.12; color:var(--bone);
  margin:.5rem 0 0;
}
.fg__lede{
  font-size:var(--fs-body);
  line-height:1.65; color:var(--bone-dim);
  margin:1.1rem 0 0; max-width:52ch;
}

/* ── the stage ────────────────────────────────────────────────────── */
/* Tall enough that the warp has room to read as a lens rather than as a
   slightly bent strip, capped so it never eats a whole tall desktop. */
/* Tall on purpose. At 72vh the field was a band you scrolled past on
   the way to the footer — and a grid that claims to be endless has to
   be given enough of the window to read as one, or it is just a strip
   of pictures. Near-full height now, with a floor for short windows and
   a ceiling so it does not become absurd on a tall desktop. */
.fg__stage{
  position:relative;
  height:clamp(560px,88vh,1040px);
  overflow:hidden;
  outline:none;
}

/* Only once the grid is live does the stage become a surface you drag:
   the cursor promises nothing the list underneath cannot do. */
.fg.has-fg .fg__stage{
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;

  /* pan-y, not none. The field has no edge, so a thumb that could drag
     it vertically would be a thumb that can never scroll past this
     section — the page would end here on a phone. Sideways belongs to
     the grid, up and down stays the document's, and the browser sends
     pointercancel when it takes the gesture, which releases the drag.
     js/fisheye.js draws the same line for the wheel. */
  touch-action:pan-y;
}
.fg.has-fg .fg__stage[data-dragging="true"]{ cursor:grabbing }
/* Set by js/fisheye.js as the pointer passes over a picture rather than
   the paper between them, so the click is advertised where it works. */
.fg.has-fg .fg__stage[data-over="img"]{ cursor:zoom-in }
.fg.has-fg .fg__stage[data-over="img"][data-dragging="true"]{ cursor:grabbing }

.fg.has-fg .fg__stage:focus-visible{
  outline:2px solid var(--bronze-hi);
  outline-offset:-4px;
}

.fg__canvas{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  pointer-events:none;                 /* the stage takes the pointer */
}

/* Vignette and a top fade, the two overlays the reference carries —
   in paper tones rather than black, so the field sits into the page
   instead of floating on it. */
.fg.has-fg .fg__stage::after,
.fg.has-fg .fg__stage::before{
  content:""; position:absolute; pointer-events:none; z-index:2;
}
.fg.has-fg .fg__stage::after{
  inset:0;
  background:radial-gradient(circle at center,
             transparent 48%, rgba(74,59,41,.14) 100%);
}
.fg.has-fg .fg__stage::before{
  inset:0 0 auto; height:5rem;
  background:linear-gradient(to bottom,
             color-mix(in srgb, var(--ink) 62%, transparent), transparent);
}

/* ── the cue ──────────────────────────────────────────────────────── */
.fg__cue{
  position:absolute; z-index:3;
  left:50%; bottom:1.15rem; transform:translateX(-50%);
  display:none; align-items:center; gap:.55rem;
  padding:.5rem .95rem;
  font-size:var(--fs-fine); letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone-faint);
  background:color-mix(in srgb, var(--black) 82%, transparent);
  border:1px solid var(--hair); border-radius:2rem;
  transition:opacity .5s var(--ease-out);
}
.fg.has-fg .fg__cue{ display:flex }
.fg.has-fg .fg__stage[data-dragging="true"] ~ .fg__cue{ opacity:0 }

/* ── the fallback list ────────────────────────────────────────────── */
/* This is the section without JavaScript: an ordinary grid of pictures.
   It is also what a screen reader gets either way — the canvas is
   aria-hidden and carries no text, so the list stays in the document
   when the grid is live and is only taken out of the layout. */
.fg__list{
  list-style:none; margin:0;
  padding:0 var(--gut) clamp(3rem,6vw,4.5rem);
  display:grid; gap:clamp(.5rem,1.2vw,1rem);
  grid-template-columns:repeat(auto-fill,minmax(min(220px,44vw),1fr));
}
.fg__fig{ margin:0 }
.fg__list img{
  display:block; width:100%; height:100%;
  aspect-ratio:4/3; object-fit:cover;
  background:var(--black);
  border:1px solid var(--hair);
}
/* Only in the fallback, where the figure is a thing you can point at.
   js/lightbox.js puts the cue on; without it there is nothing to
   promise. */
.has-lb .fg__fig{ cursor:zoom-in }

.fg.has-fg .fg__list{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ── reduced motion ───────────────────────────────────────────────── */
/* js/fisheye.js returns before it can add .has-fg, so the list is
   already the whole section. Nothing to undo — only the stage, which
   would otherwise sit there as a tall empty band. */
@media (prefers-reduced-motion:reduce){
  .fg__stage, .fg__cue{ display:none }
}