/* ============================================================
   HARMONY — the visual system that sits over style.css

   WHY THIS FILE
   The site grew page by page, so each page invented its own
   picture shapes (4:3 here, 16:10 there, 21:9 somewhere else),
   its own spacing between sections, its own caption style and
   its own accent colour. Individually each page looked fine;
   together they never felt like one hand had made them.

   This file sets the rules that apply everywhere, in one place:

     RATIOS      Every picture is one of three shapes:
                 3:2 landscape, 4:5 portrait, 21:9 band.
                 Three shapes, repeating, read as intentional.
                 Twelve shapes read as accidental.

     RHYTHM      One spacing scale for the gap between sections,
                 so scrolling has a steady beat instead of
                 speeding up and slowing down.

     ACCENT      Gold is for editorial labels (eyebrows, numbers,
                 captions' rules). Blue is for things you can act
                 on: buttons, links, the current page. Before this,
                 both colours were used for both jobs.

     FRAME       Every contained picture sits in the same hairline
                 frame, on the same dark backing, with the same
                 image treatment. Full-bleed pictures have no
                 frame, by design.

     CAPTION     One caption style: small, quiet, under the image.

   Loaded after style.css and rtl.css, so it wins on equal
   specificity without needing !important.
   ============================================================ */

:root{
  --ratio-land: 3 / 2;
  --ratio-port: 4 / 5;
  --ratio-band: 21 / 9;
  --space-section: clamp(104px, 11vw, 168px);
  --space-block: clamp(56px, 6vw, 88px);
  --hairline-soft: 1px solid rgba(255,255,255,0.07);
}

/* ---- ACCENT ------------------------------------------------ */
/* Editorial labels are gold everywhere. Blue stays for action. */
.eyebrow{ color:var(--c-gold); }
.eyebrow::before{ background:var(--c-gold); }
.tenant-group-title, .fac-head .eyebrow{ color:var(--c-gold); }

/* ---- RATIOS ------------------------------------------------ */
.teaser-media,
.anchor-media,
.tl-shot,
.hn-media,
.element-media,
.dn-shot.md-a .dn-frame,
.about-pair-grid .ap-a{ aspect-ratio:var(--ratio-land); }

.dn-shot.md-b .dn-frame,
.about-pair-grid .ap-b{ aspect-ratio:var(--ratio-port); }

.about-photo-band,
.about-lux-image .about-hero-shot{ aspect-ratio:var(--ratio-band); }

/* The location map is the one picture that may NOT be re-cropped: its
   pins are positioned as percentages of the map image, so changing the
   frame's shape moves every pin off its city. */

/* ---- FRAME ------------------------------------------------- */
.teaser-media,
.anchor-media,
.tl-shot,
.hn-media,
.element-media,
.dn-frame,
.about-pair-grid .about-photo-band,
.fac-shot img,
.tenant-cell{ border:var(--hairline-soft); background:var(--c-black); }

/* Full-bleed pictures carry the page, so they take no frame. */
.about-lux-image .about-hero-shot,
.final-cta-media,
.photo-hero-media,
.hero-media{ border:0; }

.element-media img,
.dn-frame img,
.about-pair-grid img,
.about-lux-image img{ filter:var(--img-fx); }

/* ---- RHYTHM ------------------------------------------------ */
.life-chapter{ padding-top:var(--space-section); }
.life-chapter:last-of-type{ padding-bottom:var(--space-section); }
.about-lux-statements{ padding-top:var(--space-section); }
.about-lux-vision,
.about-lux-values,
.facilities-section,
.regional,
.stats{ padding-top:var(--space-section); padding-bottom:var(--space-section); }
.elements-list{ gap:var(--space-section); }
.about-statement + .about-statement{ margin-top:var(--space-block); }
.life-pair{ margin-bottom:var(--space-block); }

/* ---- CAPTION ----------------------------------------------- */
.dn-shot figcaption,
.ahs-caption,
.tenant-more,
.element-text .el-cap{
  font-family:var(--f-body, inherit);
  font-size:13px; line-height:1.6; letter-spacing:0; text-transform:none;
  color:var(--c-text-muted);
}
.dn-shot figcaption{ margin-top:14px; }

/* ---- TYPE -------------------------------------------------- */
/* Section headings share one size on every page; only the page's
   opening line is larger. */
.h-section{ font-size:clamp(32px, 4vw, 56px); line-height:1.05; font-weight:500; }
.life-intro .h-section,
.about-lux-title{ font-size:clamp(42px, 5.6vw, 78px); line-height:1.02; font-weight:500; }
.lede{ line-height:1.75; }
.chapter-head .lede,
.eco-head .lede,
.life-intro .lede{ max-width:600px; }

/* ---- LINKS ------------------------------------------------- */
.dropdown a.active .dd-title,
.footer-links a:hover,
.chapter-nav a:hover{ color:var(--c-blue); }

/* ---- SMALL SCREENS ----------------------------------------- */
@media (max-width:760px){
  :root{ --space-section:clamp(72px, 14vw, 104px); --space-block:48px; }
  .dn-shot.md-b .dn-frame,
  .about-pair-grid .ap-b{ aspect-ratio:var(--ratio-land); }
  /* Wide bands become squarer on a phone, or they turn into slivers. */
  .about-photo-band,
  .about-lux-image .about-hero-shot{ aspect-ratio:4 / 3; }
}

/* ---- FIXES FOUND IN THE PRE-LAUNCH CHECK -------------------- */
/* A wide table must scroll inside itself, not widen the page. */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll table{ min-width:520px; }
/* The location map never wider than the screen. */
.map-stage{ max-width:100%; }
.map-stage, .map-stage-photo{ overflow:hidden; }

/* Keyboard access: the header dropdowns opened on hover only, so a visitor
   using Tab could reach "Destination", "News" and "About Us" but never the
   pages inside them. :focus-within opens the panel while focus is in it. */
.has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.has-dropdown:focus-within .caret{ transform:rotate(180deg); }

/* Form failure message (js/form-copy.js → skywalkFormFailed). Same quiet
   type as the success line, in a muted warm tone rather than alarm red. */
.form-status.form-error{ color:#f0a39a; line-height:1.6; }
.form-status.form-error bdi{ direction:ltr; unicode-bidi:isolate; }