/* Out in Tallahassee: two mosaics, a bright outdoor one on the navy page, then an indoor one on a
   cream band. Each ground exists to flatter its photographs: sunlit festival frames pop on navy,
   dim bar interiors sink into navy and glow on cream. That is what keeps the two markets pulling
   equally.

   This band is one of the page's TWO cream sections, not the only one: #where went back to cream on
   2026-10-31 and the ground rule both bands answer is written out at the top of #where in
   css/brand.css. (This comment claimed "exactly ONCE on the whole page" until that day.) */

.collage-half { padding: 0 0 3rem; }
.collage-half + .collage-half { padding-top: 3rem; margin-top: 0; }   /* no fade to clear any more, just the gap between the halves */
.collage-half:last-child { padding-bottom: 0; }
.collage-cream {
  color: var(--navy);
  /* A clean edge. This was a 5rem navy-to-cream fade, and Dylan's ruling on seeing it was that the
     blend "looks bad... by the collages". It was defended by citing apple-design's "scroll edge
     effects, not hard dividers", which governs floating chrome over scrolling content, not
     colour-blocked sections - so it was answering a question nobody asked. It also had nothing to
     do while both halves are filled with dark placeholder panels: 80px of unmasked blue-grey with
     nothing in it reads as a rendering artefact rather than as a change of light.

     The construction underneath it is kept deliberately, because it fixed a real bug: ONE opaque
     layer, never a gradient on a ::before above a cream box. The band's top edge falls on a
     fractional pixel (measured at y = 137.59375), so two separately painted layers antialias that
     row independently and leak a 1px light line across the top of the band. A single background
     avoids it by construction. */
  background: var(--cream);
}

/* The section's own bottom padding would show navy beneath the band; the band ends flush instead. */
#out { padding-bottom: 0; }
.collage-cream:last-child { padding-bottom: 4.5rem; }
.collage-navy:last-child { padding-bottom: 6rem; }

/* A HORIZONTAL STRIP, and still no crop (Dylan, 2026-10-31: "you can make it more horizontal
   maybe even make it scrollable").

   Three layouts have stood here in one day and the reason each fell is worth keeping, because the
   constraint that killed the first two is the same one:

     1. Fixed square cells + object-fit: cover. The GRID chose the frame and trimmed the
        photograph to it. Every photograph this project has is an upright phone frame, so a
        portrait shot in a 2.5:1 tile was a band sliced out of its middle.
     2. Equal-width CSS columns. Nothing was cropped any more - the column set the width and the
        image kept its own height - but column-count fills column one to the bottom before it
        starts column two, so with nine photographs the half ran down the page as a long ragged
        wall of upright pictures.
     3. This: one row, scrolled sideways.

   A strip is the layout that upright photographs actually want. Fix the HEIGHT and let each
   width follow the image's own ratio, and the result is flush top and bottom with no crop
   anywhere - the thing a vertical masonry of portrait frames can never be. It is also the right
   shape for the content: this section is evidence that the brand turns up, and evidence reads as
   a run of frames you move along rather than a page you scroll past.

   WHY NATIVE SCROLL AND NOT A CUSTOM DRAG. apple-design 3 makes interruptibility the first
   requirement, and a native scroller is interruptible, velocity-carrying and momentum-projecting
   before a line is written - it gets 5 and 6 for free, on the platform's own curve, at the
   platform's own frame budget. js/rail.js once hand-rolled exactly this and was deleted; the page
   has one hand-rolled scroller already, on the can carousel, and it needed a spring, a velocity
   history and a projection function to equal what the browser does here by default. This strip is
   NOT that rail returning: no #out-rail, no .out-rail, and js/rail.js stays deleted, which
   tests/collage.test.js still asserts.

   THE NO-HERO RULE holds by construction again, and more simply than before: every tile is the
   same height, so no photograph is given more room than another. A wide frame is wider only
   because it is wider. */
.collage-half .wrap { max-width: none; padding: 0; }   /* the strip runs to the edge; the gutter moves onto the track below */
.collage-grid {
  list-style: none; margin: 0;
  display: flex; gap: var(--gap); --gap: .75rem;
  /* The gutter is padding on the track, not margin on the half, so the first frame starts on the
     text's left edge and the last one can still scroll clear of the right edge. */
  padding: 0 var(--gutter);
  overflow-x: auto; overflow-y: hidden;
  /* proximity, not mandatory: a visitor flicking through nine frames should be able to stop
     between two of them. Mandatory snapping fights the hand, which is apple-design 3's whole
     complaint about non-interruptible motion. */
  scroll-snap-type: x proximity; scroll-padding-left: var(--gutter);
  /* The page must not rubber-band sideways when the strip reaches its end (apple-design 9 wants
     resistance at ITS boundary, not the document's). */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
/* The scrollbar is noise under a row of photographs; the fade at the right edge and the frames
   running off it are the affordance. Keyboard and AT reach the track through tabindex, set in
   js/collage.js - a scroll container that is not focusable is unreachable without a mouse. */
.collage-grid { scrollbar-width: none; }
.collage-grid::-webkit-scrollbar { display: none; }
/* The ring sits ON THE BAND, not inside the track over the photographs. It was -2px, which drew
   it across the images: gold measured 1.03:1 over a bright tent and navy 1.21:1 over a dark bar
   interior, where a focus indicator needs 3:1. Each half's ring colour is chosen for its ground,
   so the ring has to be on the ground. Same lesson as the filler card: follow the surface a thing
   sits on, not the section it sits in. */
.collage-grid:focus-visible { outline-offset: 2px; }

/* THE TILE IS SIZED BY HEIGHT, which is what makes the no-crop promise work: width follows the
   image's own ratio, so an upright frame is narrow and a landscape one is wide, and both are
   whole. clamp keeps the strip around two-thirds of a phone screen and stops it eating a laptop. */
.tile {
  flex: none; height: clamp(16rem, 52vw, 27rem);
  scroll-snap-align: start; position: relative; min-width: 44px;
}
.tile img { display: block; height: 100%; width: auto; border-radius: 4px; -webkit-user-drag: none; }
/* An empty panel has no photograph to take a shape from, so it is given the upright 3:4 of the
   phone frames it is standing in for. */
.collage-grid .slot-empty {
  height: 100%; aspect-ratio: 3 / 4; display: grid; place-items: center;
  padding: .75rem; text-align: center; border-radius: 4px;
}
.slot-place {
  position: relative; font-family: "Playfair Display", Georgia, serif; font-weight: 700;
  /* Display type: slightly negative tracking and tight leading, the inverse of the small caps
     label beneath it (wide tracking, .slot-soon in brand.css). */
  font-size: clamp(1rem, 2.4vw, 1.3rem); line-height: 1.2; letter-spacing: -.005em; color: var(--cream);
}

@media (min-width: 37.5rem) {
  /* More air between frames once there is room for it. The size classes that used to be
     redefined here - t-tall, t-fill, and a t-fill3 that once made a full-bleed three-column
     strip, the hero tile the owner ruled out - went with the mosaic, and a strip of equal-height
     frames cannot produce a hero in the first place. */
  .collage-grid { --gap: 1rem; }
}

/* A strip has to say that it continues. A soft fade at the trailing edge does it without a
   scrollbar and without an arrow button sitting on top of a photograph - apple-design 12's
   "scroll edge effects, not hard dividers", which is about exactly this case: floating chrome
   over scrolling content. The mask is on a wrapper rather than the track so it does not scroll
   away with the frames, and each half fades to its own ground. */
.collage-half { position: relative; }
.collage-half::after {
  content: ''; position: absolute; inset: 0 0 auto auto; height: 100%; width: 4rem;
  pointer-events: none;
  /* --navy, not --navy-deep: the outdoor half paints no background of its own and shows the body
     ground, which css/site.css sets to --navy. Fading to --navy-deep put a visibly darker stripe
     down the right edge instead of a fade to nothing. CLAUDE.md: the two are not interchangeable. */
  background: linear-gradient(to right, rgba(22,37,63,0), var(--navy));
}
.collage-cream::after { background: linear-gradient(to right, rgba(245,235,210,0), var(--cream)); }
@media (prefers-reduced-transparency: reduce) { .collage-half::after { display: none; } }

/* Cream ground: nothing here may rely on the gold that works on navy. A text eyebrow on cream needs
   #6E5733 (5.76:1; --gold-lo is 4.46:1), and the gold focus ring is #F0E0B8 on #F5EBD2, 1.1:1, so a
   keyboard user would lose the cursor. #where carries exactly this override again, having dropped it
   while it was navy (navy on cream is 13:1). The panels keep their navy ground so the gold type
   inside them is unchanged. */
.collage-cream :focus-visible { outline-color: var(--navy); }
.collage-cream .eyebrow { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #6E5733; }
/* The empty panels stay dark on the cream band on purpose. The photographs that will fill this half are
   dim bar interiors, so dark panels preview the composition that is coming, whereas cream panels would
   make the band look light now and change character completely once real photographs land. The band's
   lightness returns the moment they arrive. A cream-on-cream panel would also lose its edges. */
.collage-cream .slot-empty { border-color: rgba(22,37,63,.55); }

@media (prefers-reduced-transparency: reduce) {
  /* This override existed to replace the fade with a solid edge. There is no fade any more - the
     default IS a solid edge - so only the tighter gap is left, which is still right: with no ramp
     to clear, 1.5rem is the whole separation this preference needs. */
  .collage-half + .collage-half { padding-top: 1.5rem; }
}
@media (prefers-contrast: more) {
  .collage-cream .slot-empty { border-color: var(--navy); }
}

/* Print: browsers drop backgrounds, which would leave cream type on white paper. */
@media print {
  /* The loop's copies are for scrolling, and paper does not scroll. Without this the strip prints
     each photograph three times - and css/brand.css wraps the strip for print, so they would be
     three full rows of it. */
  .tile-ghost { display: none !important; }
  #out, #out h2 { color: #16253F; }
  #out .eyebrow { background: none; color: #6E5733; }
  .collage-cream { background: #fff; border-top: .75pt solid #16253F; }   /* paper has no fade, so the boundary is a hairline */
  .collage-half { break-inside: avoid; padding-bottom: 1.5rem; }
  .collage-grid .slot-empty { background: #fff; border: 1px solid #16253F; }
  /* .slot-n went with the numbered placeholders on 2026-10-31. .slot-soon replaces it here:
     --muted is about 2.1:1 on white, and this page prints as the leave-behind. */
  .slot-place, .slot-soon { color: #16253F; }
}