/* ==========================================================================
   Porta Productions — refine.css
   Craft pass: display typography + editorial gallery.
   Loaded AFTER the page's own styles, so everything here is an override and
   deleting this one file returns the site exactly to how it was.
   ========================================================================== */

/* -------------------------------------------------- 1. DISPLAY TYPOGRAPHY */

/* Tracking has to shrink as type grows. The site set +.004em on every
   heading, which is roughly right for 21px and clearly wrong at 98px — big
   serifs look loose and amateur with positive tracking. Optical sizing lets
   Cormorant's variable axis thin the strokes at display sizes the way a
   metal punchcutter would have. */
h1, h2, h3, h4 {
  font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
}
h1 { letter-spacing: -0.022em; }
h2 { letter-spacing: -0.016em; }
h3 { letter-spacing: -0.006em; }
h4 { letter-spacing: -0.004em; }

/* Balance stops a two-line headline from leaving one orphaned word on line
   two — the single most visible difference between set type and dumped text. */
h1, h2, .sec-head h2, #hero h1 { text-wrap: balance; }

/* Pretty does the same job for body copy: it protects the last line from
   ending on a single short word, without touching the lines above it. */
p, .quote p, .svc-feat li, .stat .lab { text-wrap: pretty; }

/* Quotation marks are punctuation, not letters — they belong in the margin,
   so the first real character lines up with the text below it. */
.quote, .quote p { hanging-punctuation: first last; }
.quote p { quotes: "\201C" "\201D" "\2018" "\2019"; }

/* Numbers that animate must not reflow while they count. Tabular figures
   give every digit the same width, so a stat settles instead of twitching. */
.stat .num, .count, .bk-item, .tile .meta .c, .trust span {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Small caps-tracked labels get their trailing space back — letter-spacing
   adds a gap after the final character that visually breaks alignment. */
.kicker, .stat .lab, .quote .by, .tile .meta .c, #hero .badge, #hero .trust span {
  margin-right: -0.42em;
  padding-right: 0.42em;
}

/* Italic <em> in a serif headline needs a hair of space before the roman
   that follows, or the italic's exit stroke collides with it. */
h1 em, h2 em { margin-right: .03em; }


/* ------------------------------------------------------ 2. EDITORIAL WORK */

/* The grid cropped every photograph to 4:3. A 1400x787 aerial and a 1300x1140
   exterior are not the same shape, and forcing them to be threw away the
   framing that was paid for. A masonry column flow lets each frame keep its
   own proportion — which is both more honest to the work and the thing that
   reads as an edited page rather than a CMS grid. */
.gal {
  display: block;
  columns: 3;
  column-gap: 16px;
  grid-template-columns: none;
}
@media (max-width: 980px) { .gal { columns: 2; } }
@media (max-width: 560px) { .gal { columns: 1; } }

.tile {
  aspect-ratio: auto;
  display: block;
  width: 100%;
  margin: 0 0 16px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.tile img {
  position: relative;
  width: 100%;
  height: auto;          /* the frame follows the photograph, not the reverse */
  object-fit: contain;
}

/* The first frame runs the full width as a lead image, the way an opening
   spread does. Cropped to a cinema ratio on purpose — this one is a banner,
   not a photograph to study. */
.gal .tile.gs-lead { column-span: all; margin-bottom: 22px; }
.gal .tile.gs-lead img { aspect-ratio: 21 / 9; object-fit: cover; }
.gal .tile.gs-lead .meta { padding: 22px 26px; }
.gal .tile.gs-lead .meta .n { font-size: clamp(22px, 2.4vw, 32px); }
.gal .tile.gs-lead .meta .c { font-size: 10px; }
@media (max-width: 560px) {
  .gal .tile.gs-lead img { aspect-ratio: 4 / 3; }
  .gal .tile.gs-lead .meta { padding: 14px 16px; }
}

/* The caption scrim was sized for a uniform tile. On frames of different
   heights it sits on a consistent band instead — and it has to be strong
   enough for a white kitchen or a midday sky, not just a twilight exterior.
   The captions are the only thing on this page that name the property, so
   they cannot be allowed to wash out on the brightest frames. */
.tile::after {
  background: linear-gradient(180deg,
    rgba(10,14,20,0) 42%,
    rgba(10,14,20,.42) 68%,
    rgba(10,14,20,.88) 100%);
}
.tile .meta .n { text-shadow: 0 1px 12px rgba(6,9,14,.8); }
.tile .meta .c { color: #E8EAEC; text-shadow: 0 1px 10px rgba(6,9,14,.9); }

/* The lead frame is tall, so its scrim needs a longer run-up or the band
   reads as a hard bar across the bottom of the photograph. */
.gal .tile.gs-lead::after {
  background: linear-gradient(180deg,
    rgba(10,14,20,0) 55%,
    rgba(10,14,20,.34) 76%,
    rgba(10,14,20,.9) 100%);
}

/* The loading shimmer assumed a fixed box; with auto heights it can flash
   at full width before the image has any height at all. */
.tile:not(:has(img.loaded)) { min-height: 180px; }

/* A masonry column has no rows, so a stray half-height gap at the foot of
   one column is normal — this keeps the columns from drifting too far apart. */
.gal { orphans: 1; widows: 1; }