/* ==========================================================================
   LISTING DETAIL PAGE AND THE NDA DEAL ROOM
   Loaded only on /listings/<slug>/ pages, so nothing here can touch the other
   sixty pages. Built on isb.css tokens and components. House rules hold: no
   border-radius, no drop shadows, gold only on dark, and small text on cream
   in slate (the gold on cream question is still open with Phil, and the
   standing default for new work is slate).
   ========================================================================== */

/* the hidden attribute has to beat .btn and every other display rule, or a
   hidden button, step or download link would still show */
.ld [hidden], .dlg [hidden] { display: none !important; }

/* --- small type and links on cream: slate and navy, never gold-text ------ */
.ld .band:not(.on-dark) .label,
.ld .band:not(.on-dark) .kicker,
.ld .band:not(.on-dark) .head__note,
.ld .band:not(.on-dark) .coord,
.ld .band:not(.on-dark) .crumb,
.ld .band:not(.on-dark) .crumb a { color: var(--slate); }
/* the coord line sits on cream now; its gold-line dot measures 2.11:1 there */
.ld .band:not(.on-dark) .coord::before { background: var(--slate); }
.ld .band:not(.on-dark) a:not(.btn) { color: var(--navy); text-decoration-color: var(--gold-line); }
.ld .band:not(.on-dark) a:not(.btn):hover { color: var(--slate); }
/* the dialogs sit outside .ld, so the site default of gold-text links reached
   the small phone line inside them: 3.26:1 on cream at 13px, measured in Chrome
   on 2026-09-16, under the 4.5:1 a small line needs. Navy is 10.52:1. The photo
   dialog is dark and keeps its own colours. */
.dlg:not(.dlg--photo) .form-note a { color: var(--navy); text-decoration-color: var(--gold-line); }
.dlg:not(.dlg--photo) .form-note a:hover { color: var(--slate); }

/* --- the ground rhythm of the bands, 2026-09-16 ---------------------------
   Phil, looking at revision 3: "it's like a light beige, then a dark beige,
   then a light beige ... the cream falling all the way down a little hurts my
   eyes." The page used to run cream, sand, cream, navy-deep, cream, sand,
   cream. Three light tones in a row read as one long field. Two bands moved and
   the rest stayed where they were:

     photo, cream, SLATE, cream, navy-deep, cream, NAVY, cream, gradient, footer

   Light and dark now alternate on every step from the photographs down, and no
   two bands share a ground back to back. That sequence is the standard for
   every listing page, for sale and for lease. It is written in the generator,
   tools/listing_page.py, not in any one page's JSON, so a new listing gets it
   without anybody remembering to ask.

   The class swaps are in the generator. What is left here is the handful of
   things inside those two bands that were coloured for cream and would be
   unreadable, or close to it, on a dark ground. Everything else already had an
   .on-dark rule waiting in isb.css: the thumbnail frames, the ghost watermark,
   the head note, the ghost buttons and the hilite ticks. */

/* the group headers carried slate on cream. On slate that is slate on slate. */
.ld .on-dark .ldgroup__h,
.ld .on-dark .ldgroup__count { color: var(--gold); }
.ld .on-dark .ldgroup__h { border-bottom-color: var(--gold); }

/* .ldgal__jump a is navy text by default, close to invisible on slate. Gold
   matches every other on-dark link on the site. Gold on slate is 5.78:1, and
   the gold at 70 percent on the border measures 3.69:1, past the 3:1 a
   meaningful line needs. */
.ld .on-dark .ldgal__jump a { color: var(--gold); border-color: rgba(212,193,120,.7); }
.ld .on-dark .ldgal__jump a:hover { border-color: var(--gold); }

/* .who__role is var(--on-cream-body), which is literally the slate hex, so on a
   dark band it is the ground colour written on the ground. */
.ld .on-dark .who__role { color: var(--on-dark-body); }
.ld .on-dark .who__frame {
  border-color: rgba(212,193,120,.6);
  background: var(--navy-deep);
}

/* --on-dark-mute, 55 percent cream, is the site default for .form-note on any
   dark ground. It measures 3.61:1 on slate and about 4.29:1 on navy, both under
   the 4.5:1 floor normal text needs. The licence line and the firm line under
   every name are .form-note, so this has to be overridden whichever dark tone
   the contacts band sits on. --on-dark-body, 72 percent, is 5.00:1 on slate and
   about 6.2:1 on navy. */
.ld .on-dark .ldwho .form-note { color: var(--on-dark-body); }

/* gold-line on cream measures 2.11:1, under the 3:1 a focus ring needs */
.ld a[href^="tel:"], .dlg a[href^="tel:"] { white-space: nowrap; }

.ld :focus-visible, .dlg :focus-visible { outline-color: var(--navy); }
.ld .on-dark :focus-visible, .dlg--photo :focus-visible { outline-color: var(--gold); }

/* --- the hero photo: one photograph, no scrim, nothing laid over it ------- */
/* tall enough to see the whole site: the full 4:3 frame on a phone, and up to
   68 percent of the screen on a desk (Phil, 2026-09-15: "one main picture so
   people can see") */
.ldphoto {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  min-height: 280px; max-height: min(68vh, 680px);
  background: var(--cream-deep); overflow: hidden;
}
.ldphoto__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
}
/* the photo opens the lightbox at its own place in the gallery. The button
   borrows .ldgal__btn for the markup only: it fills the band out of flow, so
   the band keeps its height, and it drops the thumbnail frame and hover zoom
   so the top of the page still reads as a plain photograph */
.ldphoto button {
  position: absolute; inset: 0; aspect-ratio: auto;
  border: 0; background: none; cursor: pointer;
}
.ldphoto button:hover img { transform: none; }
/* the band clips overflow, so the focus ring sits inside the photo */
.ldphoto button:focus-visible { outline-offset: -6px; }

/* --- the title, inside the overview band on cream -------------------------- */
.ld .crumb + .kicker { margin-top: var(--s5); }
.ldtitle__h {
  font-family: var(--display); font-weight: 400; color: var(--navy);
  font-size: clamp(34px, 5.2vw, 60px); line-height: 1.08;
  margin-top: 10px; max-width: 22ch; text-wrap: balance;
}
/* 34 to 60px, large text: gold-text on cream at 3.26:1 passes the 3:1 floor */
.ldtitle__h2 { color: var(--gold-text); }
.ldtitle__h + .lede { margin-top: var(--s3); }
.ldtitle__h ~ .coord { margin-top: var(--s4); }

/* --- section tabs: a plain row of links, never a second sticky bar ---------
   The main nav is the only thing on this site that follows the visitor down,
   and two stacked sticky bars is the app feeling Phil turned down twice on
   2026-09-10. These scroll away with the rest of the page. Each href is an id
   the page already has, so every one of them works with JavaScript off. */
.ldtabs {
  margin-top: var(--s5);
  padding: var(--s2) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.ldtabs__list {
  display: flex; gap: var(--s4);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
/* On a phone the row is wider than the screen and CONTACTS sits off the right
   edge with nothing saying so. The fade lets the row run off the edge instead
   of stopping dead, which is what invites the swipe. It is scoped to the widths
   where the row really does overflow, so a wide screen never fades its last
   tab, and the padding lets that last tab scroll clear of the fade. */
@media (max-width: 599px) {
  .ldtabs__list {
    /* the wide gap put the fifth tab fully off the screen, where a fade has
       nothing to fade. One step down the same scale brings part of it into
       view, and the fade takes it off the edge. */
    gap: var(--s3);
    padding-right: 28px;
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
  }
}
.ldtabs__list li { flex: none; }
/* Phil, 2026-09-16: "it's a little small and hard for me to read with just the
   font there". 12px to 13px, no weight to 700, and the tracking eased from .14em
   to .1em so the heavier label does not crowd the row. The hover underline moved
   off gold-line, which measures 2.11:1 on cream and fails the 3:1 a meaningful
   line needs, onto navy at 10.52:1. Nothing marks a current tab: no script here
   tracks which section is on screen, so there is no current state to paint. */
.ldtabs a {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 2px; white-space: nowrap;
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
/* written long enough to beat the cream link colour rule at the top of this file */
.ld .band:not(.on-dark) .ldtabs a { color: var(--slate); text-decoration: none; }
.ld .band:not(.on-dark) .ldtabs a:hover,
.ld .band:not(.on-dark) .ldtabs a:focus-visible { color: var(--navy); border-bottom-color: var(--navy); }
/* the sticky main nav clears the heading the tab strip jumped to. 90px is the
   same figure .ldgroup and .ldroom already use. */
#overview-h, #photos-h, #map-h, #broker-h { scroll-margin-top: 90px; }

/* --- overview: copy left, the spec card right ----------------------------- */
.ld .ldover { margin-top: var(--s5); }
.ldover__h { font-size: clamp(26px, 3.4vw, 38px); margin-top: 10px; text-wrap: balance; max-width: 26ch; }
.ldover__lede { margin-top: var(--s3); max-width: 60ch; }
/* the price and the numbers come first on a phone */
@media (max-width: 939px) { .ldover .spec { order: -1; } }
/* three buttons in a card this narrow wrap into a ragged block, so they stack
   and run the full width of the card at every size */
.ld .ldover__cta { flex-direction: column; align-items: stretch; }

/* --- gallery: every photo the same size, the rule Phil set for closed deals */
.ldgal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); margin-top: var(--s4); }
@media (min-width: 1000px) { .ldgal { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ldgal__btn {
  display: block; width: 100%; padding: 0; border: 1px solid var(--hairline);
  background: var(--cream); cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden;
}
.ldgal__btn picture, .ldgal__btn img { display: block; width: 100%; height: 100%; }
.ldgal__btn img { object-fit: cover; transition: transform .45s var(--ease); }
.ldgal__btn:hover img { transform: scale(1.03); }
.on-dark .ldgal__btn { border-color: var(--on-dark-line); background: var(--navy); }

/* --- gallery groups: every photograph public, a jump list, no reveal gate -- */
.ldgal__jump { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 var(--s5); }
.ldgal__jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy); border: 1px solid var(--hairline); text-decoration: none;
}
.ldgal__jump a:hover { border-color: var(--gold-line); }

.ldgroup { margin-top: var(--s6); scroll-margin-top: 90px; }
.ldgroup:first-of-type { margin-top: 0; }
.ldgroup__h {
  display: flex; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--gold-line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--slate);
}
.ldgroup__count { font-variant-numeric: tabular-nums; color: var(--slate); }

/* --- property details: columns pack, so a short group leaves no gap -------- */
.ldfacts { margin-top: var(--s5); }
.ldfacts__group { break-inside: avoid; margin-bottom: var(--s5); }
.ldfacts__group:last-child { margin-bottom: 0; }
@media (min-width: 820px) { .ldfacts { columns: 2; column-gap: var(--s6); } }
.ldfacts__h {
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; color: var(--slate);
  padding-bottom: var(--s2); border-bottom: 2px solid var(--gold-line);
}
.ldfacts__dl { margin: 0; }
.ldfacts__dl > div {
  display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: var(--s2);
  padding: 12px 0; border-bottom: 1px solid var(--hairline-soft);
}
.ldfacts__dl dt { font-size: 14px; color: var(--slate); }
.ldfacts__dl dd { margin: 0; font-size: 15px; color: var(--navy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* --- documents: what anyone may open, then what a signature opens ---------- */
.ldroom { scroll-margin-top: 90px; }
.ldroom:focus { outline: none; }
.ldroom__tier + .ldroom__tier { margin-top: var(--s6); }
.ldroom__table { margin-top: var(--s5); overflow-x: auto; }
/* under a group heading the table sits closer, the same gap renderOpen uses */
.ldroom__tier > .ldroom__table { margin-top: var(--s3); }
.ldroom__signlede { margin-top: var(--s3); }
.ldroom .sheet td { vertical-align: middle; }
.ldroom__cta { margin-top: var(--s5); align-items: center; }
.ldroom__cta .form-note { max-width: 46ch; }
.ldroom__nojs { display: none; margin-top: var(--s3); max-width: 60ch; }
.no-js .ldroom__nojs { display: block; }
.no-js .ldroom__sign { display: none; }
.ldroom__off { margin-top: var(--s3); max-width: 60ch; }

.ldroom__who {
  margin-top: var(--s4); font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
}
.ldroom__note { margin-top: var(--s1); max-width: 60ch; }
.ldroom__sample {
  margin-top: var(--s3); padding: var(--s2) var(--s3); max-width: 70ch;
  border: 1px solid var(--on-dark-line); font-size: 14px; color: var(--on-dark-body);
}
.ldroom__group { margin-top: var(--s5); }
.ldroom__gh {
  font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--gold);
}
.ldroom__group .ldgal { margin-top: var(--s3); }
.ldroom__act {
  display: inline-flex; align-items: center; min-height: 44px; margin-right: var(--s3);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.ldroom__size { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- map: a photograph the page already carries, and the link out ----------
   No tile provider and no coordinate. Nothing here contacts a third party
   until the visitor clicks the link and goes to Google Maps themselves. */
.ldmap { display: grid; gap: var(--s5); margin-top: var(--s4); }
.ldmap picture { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--hairline); }
.ldmap picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ldmap__side .btn { margin-top: var(--s4); }
@media (min-width: 820px) { .ldmap { grid-template-columns: 640px 1fr; align-items: start; } }

/* --- contacts: Phil, Jim and Roman, one row, same level, Phil on the left --
   The About page card with the contact lines added under the name. Whoever has
   no phone and no email on record draws no contact row at all. */
.ldwho { margin-top: var(--s4); }
/* the tag sits under the photograph, not above it, so all three photographs
   start on the same line. Phil asked for one row at the same level. */
.ldwho__tag { margin-top: var(--s3); line-height: 1.5; }
/* The About card pushes the role to the bottom of the card. These three carry
   contact lines of different lengths, so pushing down would drop Roman's name
   below the other two. They top align instead, and two lines of title are
   reserved, because Phil's title runs to two and the other two do not. */
.ldwho__card .who__role { margin-top: var(--s3); padding-top: 0; line-height: 1.6; min-height: 3.2em; }
/* the two cards with no tag reserve its line, 11px at 1.5 plus its own gap, so
   every role and every name across the row still sits level */
.ldwho__card > .who__frame + .who__role { margin-top: calc(var(--s3) * 2 + 1.5em); }
.ldwho__lic, .ldwho__firm { margin-top: var(--s2); }
/* A licence line is one line of .form-note, 13px at 1.6, with a gap either side
   of it. Roman has no licence number to name, so his card has no line at all,
   and without this his phone and email would start 34px above the other two and
   the row would read ragged along the bottom. The card with no licence reserves
   the row instead, the same trick the cards with no tag use above. */
.ldwho__card > .who__name + .ldwho__firm { margin-top: calc(var(--s2) * 2 + 13px * 1.6); }
.ldwho__firm { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.ldwho__contact { flex-direction: column; align-items: stretch; margin-top: var(--s3); }
.ldwho__contact .btn { padding: 15px 18px; }
.ldwho__mail { font-size: 12px; text-transform: none; letter-spacing: .02em; overflow-wrap: anywhere; }

.ldnote { max-width: 92ch; }

/* ==========================================================================
   DIALOGS. Native <dialog>, so the focus trap, the top layer and Escape all
   come from the browser. One chrome for the agreement and for photographs.
   ========================================================================== */
html:has(dialog[open]) { overflow: hidden; }

.dlg {
  width: min(94vw, 720px); max-height: min(92dvh, 920px);
  padding: 0; margin: auto; border: 0; border-top: 4px solid var(--navy); border-radius: 0;
  background: var(--cream); color: var(--navy); box-shadow: none; overflow: hidden;
}
.dlg[open] { display: flex; flex-direction: column; }
.dlg::backdrop { background: rgba(22, 35, 45, .8); }
@media (max-width: 600px) {
  .dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; }
}

.dlg__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--hairline-soft); flex: none;
}
@media (max-width: 600px) { .dlg__head { padding: var(--s3); } }
.dlg__head .label { color: var(--slate); }
.dlg__title { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 3vw, 28px); line-height: 1.2; margin-top: 6px; }
.dlg__title:focus { outline: none; }
.dlg__close {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy); background: none; border: 1px solid var(--hairline); cursor: pointer; text-decoration: none;
}
.dlg__close:hover { border-color: var(--navy); }

.dlg__body { overflow-y: auto; overscroll-behavior: contain; padding: var(--s4); flex: 1 1 auto; }
@media (max-width: 600px) { .dlg__body { padding: var(--s3); } }

.dlg__flag {
  margin-bottom: var(--s3); padding: var(--s2) var(--s3);
  background: var(--cream-deep); border-left: 4px solid var(--navy);
  font-size: 14px; line-height: 1.6; color: var(--navy);
}
.dlg__intro { font-size: 15px; color: var(--on-cream-body); margin-bottom: var(--s3); }

.dlg__text {
  height: clamp(200px, 36dvh, 340px); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--hairline); background: var(--cream-deep); padding: var(--s3);
  font-size: 14px; line-height: 1.65; color: var(--on-cream-body);
}
.dlg__text h3 { font-family: var(--display); font-size: 19px; color: var(--navy); text-align: center; margin: 4px 0 var(--s3); }
.dlg__text h4 { font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--navy); margin: var(--s3) 0 6px; }
.dlg__text p { margin: 0 0 12px; }
.dlg__pdf { margin: var(--s2) 0 var(--s4); font-size: 14px; }
/* the way back in for a buyer who signed before, 2026-10-05 */
.dlg__signin { margin: calc(-1 * var(--s2)) 0 var(--s3); font-size: 14px; color: var(--on-cream-body); }
.dlg__signin summary { cursor: pointer; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 3px; width: max-content; max-width: 100%; }
.dlg__signin a { color: var(--navy); text-decoration-color: var(--gold-line); }
.dlg__signinform { margin-top: var(--s3); padding: var(--s3); border: 1px solid var(--gold-line); }
.dlg__signinerr { color: #a63e33; font-size: 14px; margin: 0 0 var(--s2); }
.dlg__signinerr:empty { display: none; }
.dlg__signinrow { align-items: center; }
.dlg__pwnote a { color: var(--navy); text-decoration-color: var(--gold-line); }
.dlg__pdf a { color: var(--navy); text-decoration-color: var(--gold-line); }

.dlg__form .field__label { color: var(--slate); }
.dlg__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.dlg__record { font-size: 13px; line-height: 1.6; color: var(--slate); margin: var(--s1) 0 var(--s3); }

.dlg__check { margin-bottom: var(--s2); }
.dlg__check label {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
  min-height: 44px; padding: 6px 0; font-size: 15px; line-height: 1.5; cursor: pointer;
}
.dlg__check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 1px 0 0; width: 22px; height: 22px;
  border: 1px solid var(--navy); border-radius: 0; background-color: var(--cream); cursor: pointer;
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
}
.dlg__check input[type="checkbox"]:checked {
  background-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3.2L12 3.8' fill='none' stroke='%23E4E2D1' stroke-width='2'/%3E%3C/svg%3E");
}
.dlg__check input[type="checkbox"]:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.field--error.dlg__check input[type="checkbox"] { border-color: #a63e33; }
@media (forced-colors: active) {
  .dlg__check input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; }
}

.dlg__sig { margin-top: var(--s3); }
.dlg__sigin {
  display: block; width: 100%; min-height: 56px; padding: 10px 2px;
  font-family: var(--display); font-size: 26px; line-height: 1.3; color: var(--navy);
  background: transparent; border: 0; border-bottom: 1px solid var(--navy); border-radius: 0; outline: none;
}
.dlg__sigin:focus { background: rgba(31, 47, 60, .05); }
.dlg__sigin:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.field--error .dlg__sigin { border-bottom-color: #a63e33; }

.dlg__statement { font-size: 13px; line-height: 1.6; color: var(--slate); margin: var(--s2) 0; }
.dlg__formerror { display: block; margin: var(--s2) 0 0; }
.dlg__formerror:empty { display: none; }
.dlg__submit { width: 100%; margin-top: var(--s2); }
.dlg__submit[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.dlg__paper { margin-top: var(--s2); }

.dlg__done { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.dlg__done:focus { outline: none; }
.dlg__summary { margin-top: var(--s2); font-size: 16px; color: var(--on-cream-body); }
.dlg__sid { margin: var(--s2) 0 var(--s3); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--slate); }
.dlg__donerow { margin: var(--s4) 0 var(--s2); }

/* --- photographs --------------------------------------------------------- */
/* pan-y: a sideways drag stays with listing.js as a swipe, instead of the
   browser taking it as a scroll and cancelling the pointer before pointerup */
.dlg--photo {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0;
  border: 0; background: var(--navy-deep); color: var(--on-dark);
  touch-action: pan-y;
}
.dlg--photo[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.dlg--photo::backdrop { background: var(--navy-deep); }
.dlg__photobar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); }
.dlg__photoactions { display: flex; gap: var(--s1); }
.dlg__count { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--gold); }
.dlg--photo .dlg__close { color: var(--on-dark); border-color: var(--on-dark-line); }
.dlg--photo .dlg__close:hover { border-color: var(--gold); color: var(--cream); }
.dlg__figure { margin: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 0 var(--s3) var(--s3); }
.dlg__img { width: 100%; height: 100%; min-height: 0; object-fit: contain; transition: opacity .18s var(--ease); }
.dlg__img[data-loading] { opacity: .3; }
.dlg__caption { margin: 10px auto 0; max-width: 80ch; text-align: center; font-size: 14px; line-height: 1.5; color: var(--on-dark-body); }
.dlg__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  min-width: 64px; min-height: 64px; padding: 0 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark); background: rgba(22, 35, 45, .6); border: 1px solid var(--on-dark-line); cursor: pointer;
}
.dlg__nav:hover { border-color: var(--gold); color: var(--cream); }
.dlg__nav--prev { left: var(--s2); }
.dlg__nav--next { right: var(--s2); }
@media (max-width: 600px) {
  .dlg__nav { top: auto; bottom: calc(var(--s2) + env(safe-area-inset-bottom)); transform: none; min-height: 48px; }
  .dlg__figure { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 559.98px) {
  .dlg__signinform .vform__row { grid-template-columns: 1fr; }
}