/* ===========================================================================
   distance.css — The Distance Between Us (collection page only)

   Loaded by /studio/the-distance-between-us/ and nothing else. Every rule is
   scoped under .distance-page, so no other page can be reached from here.
   It sits on top of styles.css + closer.css and reuses their tokens and the
   Studio entrance, colophon, return link and reveal.

   GOVERNING IDEA
       Words are the fixed station. Photographs are the weather.

   Every line of text — passages, titles, plate numbers, the credit — starts
   on the site's text axis (.axis: 880px container, 28px inset, 660px
   measure) and never moves. Photographs change register and position.

   Photographs are never cropped. Each image's displayed width is computed
   from its own aspect ratio (--ar, written on the figure) and a height or
   width budget, so the whole composition is always shown.

   FIRST VISUAL BUILD (Stage 3). Values are provisional and meant to be
   tuned against the photographs, not treated as specification.
   =========================================================================== */

.distance-page {
  --header-h: 89px;            /* sticky header: 68px mark + 20px pad + rule */
  --axis-inner: 824px;         /* --container minus the 28px insets */

  /* --- the pause scale -----------------------------------------------------
     Three relationships only: NORMAL, BREATH, SILENCE. vh so a pause is felt
     as a proportion of the window; clamped so it never collapses on short
     screens or balloons on tall ones. */
  --gap-normal:  clamp(120px, 17vh, 170px);   /* NORMAL  — between encounters */
  --gap-breath:  clamp(250px, 36vh, 340px);   /* BREATH  — slowing, or a change of register */
  --gap-silence: clamp(360px, 44vh, 440px);   /* SILENCE — the approach to Beyond Measure only. Bounded
                                                 so the next plate always shows before a screen empties. */

  /* The entrance sits outside the sequence and keeps its own spacing. */
  --gap-opening: clamp(64px, 9vh, 88px);      /* title → opening writing */
  --gap-entry:   clamp(96px, 13vh, 132px);    /* opening writing → first artwork */
}

/* Spacing lives on these classes only, so an element's own styles never
   fight the rhythm. */
.distance-page .gap-normal        { margin-top: var(--gap-normal); }
.distance-page .gap-breath        { margin-top: var(--gap-breath); }
.distance-page .gap-silence       { margin-top: var(--gap-silence); }
.distance-page .gap-opening       { margin-top: var(--gap-opening); }
.distance-page .gap-entry         { margin-top: var(--gap-entry); }

/* ---------------------------------------------------------------------------
   The writing — the same serif setting as the What I Almost Missed essay,
   distributed in beats rather than set as one block.
--------------------------------------------------------------------------- */
.distance-page .tdbu-text p {
  font-family: var(--serif);
  font-size: clamp(1.18rem, 2.1vw, 1.32rem);
  line-height: 1.62;
  color: var(--ink);
  opacity: 0.9;
  margin: 0;
  max-width: var(--measure);
}

.distance-page .tdbu-text p + p { margin-top: 34px; }

/* The threshold: the same voice, the second line in forest so the title of
   the collection is heard once more before the crossing. No size change. */
.distance-page .tdbu-threshold p:last-child { color: var(--forest); opacity: 1; }

/* ---------------------------------------------------------------------------
   Plates — one axis, one plate, three scales

   Every photograph sits centred on the same photographic axis, inside the
   same Warm Limestone board. Captions stay on the text axis.

   Sizing. --w is the photograph's displayed width. The plate inset is a
   fixed proportion (--k) of the photograph's SHORT side, so portraits and
   landscapes carry the same margin logic:
       inset        = --w * --ir          (--ir = --k * --short-r)
       plate width  = --w * (1 + 2*ir)
       plate height = (--w / ar) * (1 + 2*ir*ar)
   Present is defined by equal area, not equal width or height: a portrait
   and a landscape at the same scale are mirror images of each other
   (--S * sqrt(ar)), which is what lets them feel like one register.
   Every size is then capped so the whole plate fits the window below the
   header and never exceeds the page. Nothing is cropped.
--------------------------------------------------------------------------- */
.distance-page {
  --plate: #D9D1C3;              /* Warm Limestone — approved */
  --plate-mark: #6F6552;         /* graphite bronze — approved */
  --k: 0.09;                     /* inset, as a share of the short side */
  --S: min(640px, calc((100vh - var(--header-h)) * 0.68));
  --side: 56px;                  /* page margin a plate may not cross */
  --vpad: 40px;                  /* breathing room when a plate fills the window */
}

.distance-page .tdbu-plate {
  --ir: calc(var(--k) * var(--short-r));
  --scale: 1;
  --maxw: 10000px;
  --w: min(
    calc(var(--S) * var(--sar) * var(--scale)),
    calc((100vw - var(--side)) / (1 + 2 * var(--ir))),
    calc((100vh - var(--header-h) - var(--vpad)) * var(--ar) / (1 + 2 * var(--ir) * var(--ar))),
    var(--maxw)
  );
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0;
}

/* the three scales */
.distance-page .reg-distant  { --scale: 0.82; }
.distance-page .reg-intimate { --scale: 0.88; }   /* Heart of the Matter: intimate, not diminished */
.distance-page .reg-present  { --scale: 1; }
.distance-page .reg-generous { --scale: 1.12; }   /* A Higher Calling: the upper edge of Present */
.distance-page .reg-end      { --scale: 1.5; --maxw: 848px; }   /* Beyond Measure: as large as its 1696px source allows at 2x (848px), still fitted to the window */
/* The Far Side of Near: Present, with its width matched to The Sun, Between Us
   (sqrt(0.75 / 0.713) = 1.026). Its slightly taller frame makes it at least
   as large, never smaller. */
.distance-page .reg-match-02 { --scale: 1.026; }

/* Expansive — Audacity alone: the largest work in the exhibition, not a
   full-screen interruption. The plate keeps clear canvas above, below and to
   the sides. */
.distance-page .reg-expansive {
  --w: min(
    calc((100vw - 240px) / (1 + 2 * var(--ir))),
    calc((100vh - var(--header-h) - 90px) * var(--ar) / (1 + 2 * var(--ir) * var(--ar))),
    1180px
  );
}

/* the one photographic axis */
.distance-page .tdbu-frame {
  display: flex;
  justify-content: center;
}

.distance-page .tdbu-board {
  position: relative;
  background: var(--plate);
  padding: calc(var(--w) * var(--ir));
  line-height: 0;
}

/* Registration mark — one graphite-bronze corner, top left of every plate,
   set in from the edge by a fixed share of the inset. */
.distance-page .tdbu-board::before {
  content: "";
  position: absolute;
  top: calc(var(--w) * var(--ir) * 0.38);
  left: calc(var(--w) * var(--ir) * 0.38);
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--plate-mark);
  border-left: 1px solid var(--plate-mark);
  opacity: 0.55;
}

.distance-page .tdbu-board picture { display: block; }

.distance-page .tdbu-board img {
  display: block;
  width: var(--w);
  height: auto;
}

/* The artwork encounter: plate, then number, then title, as one group.
   .tdbu-artwork shrinks to the plate's width, so the label starts exactly at
   that plate's left edge. Portrait and landscape labels therefore begin at
   different x — the variation comes from the artwork, not the layout.
   Nothing is set inside the plate. */
.distance-page .tdbu-artwork {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.distance-page .tdbu-label {
  margin: 14px 0 0;
  padding: 0;
  text-align: left;
}

.distance-page .tdbu-num {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.42;
  margin-bottom: 5px;
}

.distance-page .tdbu-title {
  display: block;
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--forest);
  opacity: 0.88;
}

/* Beyond Measure: the same rule, the approved display size. */
.distance-page .tdbu-label-end { margin-top: 18px; }
.distance-page .tdbu-label-end .tdbu-num { margin-bottom: 8px; }

.distance-page .tdbu-title-end {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--forest);
}

/* ---------------------------------------------------------------------------
   Functional ending — almost outside the collection
--------------------------------------------------------------------------- */
.distance-page .tdbu-functional .colophon {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.distance-page .tdbu-functional .collection-return {
  max-width: var(--container);
  margin: 40px auto 0;
  padding: 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 44px;
}

.distance-page .collection-return .back-link {
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.distance-page .collection-return .back-link:hover,
.distance-page .collection-return .back-link:focus-visible { opacity: 1; }

/* ---------------------------------------------------------------------------
   Tablet — same composition, pauses shortened
--------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .distance-page {
    --gap-normal:  96px;
    --gap-breath:  clamp(200px, 26vh, 260px);
    --gap-silence: clamp(320px, 40vh, 420px);
    --gap-opening: clamp(180px, 28vh, 280px);
    --S: min(560px, calc((100vw - 56px) * 0.62), calc((100vh - var(--header-h)) * 0.6));
  }
  /* Audacity's plate runs to the edges */
  .distance-page .reg-expansive {
    --w: min(
      calc(100vw / (1 + 2 * var(--ir))),
      calc((100vh - var(--header-h)) * var(--ar) / (1 + 2 * var(--ir) * var(--ar)))
    );
  }
}

/* ---------------------------------------------------------------------------
   Phone — width becomes the constant. Present plates fill the column;
   Distant plates are narrower; Audacity's plate alone runs edge to edge.
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .distance-page {
    --gap-normal:  72px;
    --gap-breath:  150px;
    --gap-silence: 250px;
    --gap-opening: 140px;
    --k: 0.075;
    --side: 40px;
    --S: 10000px;                 /* width, not area, governs on a phone */
  }
  .distance-page .reg-distant  { --scale: 1; --side: calc(40px + 34vw); }
  .distance-page .reg-generous { --scale: 1; }
  .distance-page .reg-present,
  .distance-page .reg-distant {
    --w: min(
      calc((100vw - var(--side)) / (1 + 2 * var(--ir))),
      calc((100vh - var(--header-h) - 60px) * var(--ar) / (1 + 2 * var(--ir) * var(--ar))),
      var(--maxw)
    );
  }
  .distance-page .reg-expansive {
    --w: calc(100vw / (1 + 2 * var(--ir)));
  }
  .distance-page .tdbu-functional .collection-return { padding: 0 20px; }
}