/* ==========================================================================
   O'Hare AeroHaus Hotel — theme styles

   Built to the Chicago hospitality web design specification. Every value below
   that carries a comment is taken directly from that document; the rest follows
   its stated logic.

   Type, spacing and geometry come from the spec. Colours and font families come
   from Hotel → Settings and are injected as custom properties, so nothing here
   hard-codes a brand value.
   ========================================================================== */

:root{
  /* Spacing scale — spec §06 "Source dimensions and spacing" */
  --pad-copy:24px;      /* 24 / 32 / 64 / 96 at base / 640 / 1024 / 1280 */
  --pad-vert:48px;      /* 24-48 / 80 / 112 at base / 1024 / 1280        */
  --gap-section:32px;   /* 32 -> 48 at 1024                              */
  --container:1440px;   /* centred, responsive side padding              */
  --radius:4px;         /* spec §04 — compact, never pill-shaped         */
  --btn-h:48px;         /* spec §04 — 40px only for deliberate compacts  */

  /* Type scale — spec §02 "Exact scale found in the supplied page" */
  --t-hero:36px;   --lh-hero:1.0;
  --t-sec:24px;    --lh-sec:1.05;
  --t-small-sec:24px;
  --t-intro:18px;  --lh-intro:28px;
  --t-body:16px;   --lh-body:1.56;
  --t-nav:13px;    --lh-nav:20px;
  --t-btn:16px;    --lh-btn:28px;
  --t-util:13px;   --lh-util:20px;

  --head-margin:16px;   /* 16px compact, 24px major */
  --book-overlap:56px;  /* how far the booking card rides up over the hero */
  --ease:cubic-bezier(.22,.8,.28,1);
}

@media (min-width:640px){ :root{ --pad-copy:32px } }
@media (min-width:768px){
  :root{ --t-hero:48px; --t-sec:36px; --t-intro:20px; --t-body:18px; --t-nav:14px; --head-margin:24px }
}
@media (min-width:1024px){
  :root{ --pad-copy:64px; --pad-vert:80px; --gap-section:48px }
}
@media (min-width:1280px){
  :root{ --pad-copy:96px; --pad-vert:112px }
}

/* ── reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:#fff;color:var(--text);
  font-family:var(--font-sans);font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.skip-link:focus{
  position:fixed!important;left:16px;top:16px;z-index:999;width:auto;height:auto;
  clip:auto;margin:0;padding:12px 20px;background:var(--primary);color:#fff;border-radius:var(--radius)
}

/* ── layout ────────────────────────────────────────────────── */
.wrap{
  width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:var(--pad-copy);
}
/* --pad-vert is the rhythm BETWEEN sections, so each one contributes half of
   it; two neighbours meeting add back up to the spec figure. Applying it whole
   on both sides doubled every gap and was most of why the page read as long. */
.sec{padding-block:calc(var(--pad-vert) / 2)}
/* A section carrying its own background is a block in its own right, and the
   padding is inside its colour field rather than shared with a neighbour — so
   it keeps the full figure. */
.sec.is-cream,.sec.is-dark,.sec-cta{padding-block:var(--pad-vert)}
/* Two coloured sections in a row are one continuous field: no seam between,
   or the shared padding stacks and opens a hole in the middle of one colour. */
.sec.is-cream + .sec.is-cream,.sec.is-dark + .sec.is-dark,
.sec.is-cream + .sec-cta,.sec-cta + .sec.is-cream,.sec-cta + .sec-cta{padding-top:0}
.sec.is-cream{background:var(--cream)}
.sec.is-dark{background:var(--primary);color:#fff}

/* Story split — spec §06: 5/12 copy + 7/12 image from 1024px */
.split-grid{display:grid;gap:var(--gap-section);grid-template-columns:1fr;align-items:center}
@media (min-width:1024px){
  .split-grid{grid-template-columns:5fr 7fr;gap:var(--gap-section)}
  .sec-split.img-left .split-copy{order:2}
  .sec-split.img-left .split-media{order:1}
}
.split-media img,.oah-img-empty{width:100%;border-radius:var(--radius)}
/* Image ratio — spec §06: 16:9 -> 5:4 -> 4:3 */
.split-media img,.split-media .oah-img-empty{aspect-ratio:16/9;object-fit:cover}
@media (min-width:768px){ .split-media img,.split-media .oah-img-empty{aspect-ratio:5/4} }
@media (min-width:1024px){ .split-media img,.split-media .oah-img-empty{aspect-ratio:4/3} }
.oah-img-empty{background:var(--cream);border:1px solid var(--border)}

/* ── typography ────────────────────────────────────────────── */
h1,h2,h3,.sec-title,.hero-title,.card-title,.book-title,.foot-title{
  font-family:var(--font-headline);
  font-weight:700;               /* spec §02 weight note: use the real medium/bold face */
  color:var(--primary);
  margin:0;
  letter-spacing:0;              /* spec §03: no extra tracking */
}
.hero-title{font-size:var(--t-hero);line-height:var(--lh-hero)}
.sec-title{font-size:var(--t-sec);line-height:var(--lh-sec)}
.card-title,.book-title{font-size:var(--t-small-sec);line-height:1.15}
.is-dark h1,.is-dark h2,.is-dark h3,.is-dark .sec-title,.sec-hero .hero-title{color:#fff}

.kicker{
  display:block;font-family:var(--font-sans);font-size:var(--t-util);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px
}
.is-dark .kicker,.sec-hero .kicker{color:rgba(255,255,255,.75)}

.lede{
  font-size:var(--t-intro);line-height:var(--lh-intro);
  max-width:65ch;                /* spec §09: 55-75 characters */
  color:var(--text);text-wrap:pretty
}
.is-dark .lede,.sec-hero .lede{color:rgba(255,255,255,.88)}
.meta{font-size:var(--t-util);line-height:var(--lh-util);color:var(--muted)}
.is-dark .meta{color:rgba(255,255,255,.7)}

.sec-head{margin-bottom:var(--gap-section)}
.sec-head .sec-title{margin-bottom:var(--head-margin)}
.sec-head .lede{margin:0}

.prose{max-width:70ch}
.prose p{margin:0 0 var(--head-margin)}
.prose ul{margin:0 0 var(--head-margin);padding-left:20px}
.prose li{margin-bottom:8px}

/* ── buttons — spec §04 ────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--btn-h);padding:8px 20px;      /* side padding 20px */
  border-radius:var(--radius);border:1px solid transparent;
  font-family:var(--font-sans);font-size:var(--t-btn);line-height:var(--lh-btn);
  font-weight:500;cursor:pointer;text-align:center;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)
}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover,.btn-primary:focus{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.btn-outline:hover,.btn-outline:focus{background:var(--primary);color:#fff}
.btn-secondary{background:var(--cream);color:#000;border-color:var(--cream)}
.is-dark .btn-outline{color:#fff;border-color:rgba(255,255,255,.5)}
.is-dark .btn-outline:hover{background:#fff;color:var(--primary);border-color:#fff}
@media (max-width:639px){ .btn{width:100%} }   /* spec §08: often full width on mobile */

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-util);font-weight:700;color:var(--accent);
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit
}
.link-arrow .arw{transition:transform .2s var(--ease)}
.link-arrow:hover .arw{transform:translateX(4px)}

/* ── header — spec §05 ─────────────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:100;background:#fff;
  border-bottom:1px solid var(--border);
  transition:background .28s var(--ease),border-color .28s var(--ease)
}
.head-inner{display:flex;align-items:center;gap:24px;min-height:72px}
.brand{margin-right:auto;display:flex;flex-direction:column;line-height:1.1}
.brand b{font-family:var(--font-headline);font-size:20px;color:var(--primary)}
.brand span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}

.primary-nav{display:none}
@media (min-width:1024px){ .primary-nav{display:block} }
.nav-list{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav-list a{
  display:block;padding:6px 0;position:relative;
  font-size:var(--t-nav);line-height:var(--lh-nav);font-weight:700;   /* spec: bold 700 */
  letter-spacing:.04em;text-transform:uppercase;color:var(--text)
}
.nav-list a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--primary);transition:width .3s var(--ease)          /* spec: navy underline, never colour alone */
}
.nav-list a:hover::after,.nav-list .current-menu-item>a::after{width:100%}

.head-cta{display:none}
@media (min-width:768px){ .head-cta{display:inline-flex;width:auto} }

.nav-toggle{
  width:36px;height:36px;border-radius:50%;                            /* spec §05: 36px round, 1px border */
  border:1px solid var(--border);background:#fff;cursor:pointer;
  display:grid;place-items:center;padding:0
}
@media (min-width:1024px){ .nav-toggle{display:none} }
.nav-toggle-bar,.nav-toggle-bar::before,.nav-toggle-bar::after{
  content:"";display:block;width:16px;height:1.5px;background:var(--text);transition:transform .25s var(--ease)
}
.nav-toggle-bar::before{transform:translateY(-5px)}
.nav-toggle-bar::after{transform:translateY(3.5px)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before{transform:rotate(45deg) translateY(0)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after{transform:rotate(-45deg) translateY(-1px)}

.mobile-nav{border-top:1px solid var(--border);padding:8px var(--pad-copy) 24px}
.mobile-list{list-style:none;margin:0 0 16px;padding:0}
.mobile-list a{
  display:flex;align-items:center;min-height:56px;                     /* spec §05: 56px rows */
  padding:0 24px;font-weight:700;font-size:16px;
  border-bottom:1px solid var(--border);
  transition:padding .3s var(--ease)                                   /* spec: 24px -> 32px on hover */
}
.mobile-list a:hover{padding-left:32px}

/* ── hero ──────────────────────────────────────────────────── */
.sec-hero{
  position:relative;isolation:isolate;background:var(--primary);
  display:flex;align-items:flex-end;
  min-height:min(72vh,620px);
  padding-top:var(--pad-vert);
  /* Reserve the overlap plus a full section gap. max() keeps the normal
     section rhythm when no booking card follows. */
  padding-bottom:max(var(--pad-vert),calc(var(--gap-section) + var(--book-overlap)))
}
.hero-bg{position:absolute;inset:0;z-index:-2;background:var(--primary)}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg .oah-img-empty{width:100%;height:100%;aspect-ratio:auto;border:0;background:var(--primary)}
/* Overlay is only used where there is a calm dark zone — spec §07. The scrim
   guarantees it rather than hoping for it. */
.sec-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 28%),
    linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.45) 100%),
    linear-gradient(96deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.62) 45%,rgba(0,0,0,.3) 74%,rgba(0,0,0,.14) 100%),
    linear-gradient(0deg,rgba(0,0,0,.2),rgba(0,0,0,.2))
}
.sec-hero.scrim-strong::before{filter:brightness(.82)}
.sec-hero.scrim-light::before{opacity:.72}
.hero-inner{position:relative;width:100%}
.hero-title{margin-bottom:var(--head-margin);max-width:22ch;text-wrap:balance}
.hero-points{list-style:none;margin:var(--gap-section) 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.hero-points li{display:flex;align-items:center;gap:12px;font-size:var(--t-util);color:#fff}
.oah-tick{flex:0 0 auto;color:#fff}

/* ── booking bar — spec §05 ────────────────────────────────── */
.sec-booking.is-overlap{margin-top:calc(var(--book-overlap) * -1);position:relative;z-index:20}
.book-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;box-shadow:0 24px 56px -30px rgba(0,0,0,.3)
}
@media (min-width:1024px){ .book-card{padding:32px} }
.book-head{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;
  margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)
}
.vb-form{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:1024px){ .vb-form{grid-template-columns:1.4fr 1.2fr auto;align-items:end} }
.vb-form .vb-label{
  display:block;font-size:var(--t-util);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px
}
.vb-form .vb-trigger{
  width:100%;min-height:var(--btn-h);                                  /* spec: 48px target height */
  text-align:left;font:inherit;font-size:16px;color:var(--muted);
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 16px;cursor:pointer;transition:border-color .18s
}
.vb-form .vb-trigger:hover{border-color:var(--muted)}
.vb-form .vb-trigger.is-set{color:var(--text)}
.vb-form .vb-field:has(.vb-pop.is-open) .vb-trigger{border-color:var(--accent)}
.vb-submit{width:100%}
@media (min-width:1024px){ .vb-submit{width:auto} }
.vb-extra{
  grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;padding-top:16px;border-top:1px solid var(--border)
}
.vb-extra .chev{transition:transform .2s}
[data-vb-promo-wrap].is-open .chev{transform:rotate(180deg)}
[data-vb-promo-wrap] input{
  display:none;font:inherit;font-size:15px;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;
  width:170px;margin-left:12px;color:var(--text)
}
[data-vb-promo-wrap].is-open input{display:inline-block}
.vb-extra a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ── facts ─────────────────────────────────────────────────── */
.facts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
  border-block:1px solid var(--border);padding-block:32px;margin-block:var(--pad-vert)
}
@media (min-width:768px){ .facts{grid-template-columns:repeat(var(--fact-count,4),1fr)} }
.fact b{
  display:block;font-family:var(--font-headline);font-size:28px;line-height:1;
  color:var(--primary);margin-bottom:8px
}
.fact span{font-size:var(--t-util);line-height:var(--lh-util);color:var(--muted)}

/* ── cards — spec §07 ──────────────────────────────────────── */
.cards{display:grid;gap:var(--gap-section);grid-template-columns:1fr}
@media (min-width:768px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .cards{grid-template-columns:repeat(var(--card-count,3),1fr)} }
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column
}
.card-img{aspect-ratio:16/10;overflow:hidden;background:var(--cream)}
.card-img img,.card-img .oah-img-empty{width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto}
.card:hover .card-img img{transform:scale(1.03)}
.card-img img{transition:transform .8s var(--ease)}
.card-body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.card-text{font-size:var(--t-util);line-height:1.6;color:var(--text)}
.card-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--border)}

/* ── ticks ─────────────────────────────────────────────────── */
.ticks{list-style:none;margin:24px 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-util);line-height:1.6}
.ticks .oah-tick{margin-top:4px;color:var(--accent)}
.is-dark .ticks .oah-tick{color:#fff}

/* ── steps ─────────────────────────────────────────────────── */
.steps{list-style:none;margin:0;padding-left:32px;position:relative}
.steps::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.25)}
.steps li{position:relative;padding-bottom:28px}
.steps li:last-child{padding-bottom:0}
.steps li::before{
  content:"";position:absolute;left:-32px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--primary);border:1px solid rgba(255,255,255,.6)
}
.steps li.is-first::before{background:#fff;border-color:#fff}
.steps b{display:block;font-weight:700;font-size:15px;margin-bottom:4px;color:#fff}
.steps span{font-size:var(--t-util);line-height:1.6;color:rgba(255,255,255,.78)}

/* ── disclosure ────────────────────────────────────────────── */
.disclosure{border-top:1px solid var(--border)}
.disclosure details{border-bottom:1px solid var(--border)}
.disclosure summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;
  padding-block:20px;min-height:44px                                  /* spec §05: 44px touch target */
}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure .idx{font-size:var(--t-util);font-weight:700;color:var(--muted);min-width:24px}
.disclosure .d-title{font-family:var(--font-headline);font-size:18px;color:var(--primary)}
.disclosure summary:hover .d-title{color:var(--accent)}
.disclosure .sign{margin-left:auto;position:relative;width:13px;height:13px;flex:0 0 auto}
.disclosure .sign::before,.disclosure .sign::after{
  content:"";position:absolute;background:var(--muted);transition:transform .25s var(--ease)
}
.disclosure .sign::before{left:0;top:6px;width:13px;height:1.5px}
.disclosure .sign::after{left:6px;top:0;width:1.5px;height:13px}
.disclosure details[open] .sign::after{transform:rotate(90deg)}
.disclosure .d-body{padding:0 0 20px 44px;max-width:70ch;font-size:var(--t-util);line-height:1.65}
.disclosure .d-body ul{margin:12px 0 0;padding-left:18px}
.disclosure .d-body li{margin-bottom:6px}
@media (max-width:639px){ .disclosure .d-body{padding-left:0} }

/* ── distances ─────────────────────────────────────────────── */
.distances{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.distances li{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding-block:16px;border-bottom:1px solid var(--border);font-size:var(--t-util)
}
.distances b{font-weight:500}
.distances span{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── closing CTA ───────────────────────────────────────────── */
.sec-cta{background:var(--cream);text-align:center}
.cta-inner{display:flex;flex-direction:column;align-items:center;gap:16px}
.cta-inner .sec-title{max-width:26ch;text-wrap:balance}
.cta-inner .btn{margin-top:8px}
@media (max-width:639px){ .cta-inner .btn{width:100%} }

/* ── footer ────────────────────────────────────────────────── */
.site-foot{background:var(--primary);color:rgba(255,255,255,.8);padding-top:var(--pad-vert)}
.foot-grid{display:grid;gap:var(--gap-section);grid-template-columns:1fr}
@media (min-width:1024px){ .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr} }
.foot-brand b{display:block;font-family:var(--font-headline);font-size:20px;color:#fff}
/* Direct child only. As a bare descendant selector this also caught every span
   nested deeper in the brand column and small-capped it by accident. */
.foot-brand > span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:6px 0 20px}
.foot-brand p{margin-bottom:12px;font-size:var(--t-util);line-height:1.7}
.foot-brand a:hover{color:#fff;text-decoration:underline}
/* The address block is one link, so the whole thing is the target rather than
   a separate line the eye has to find (Common Region: the tap area is the group). */
.foot-addr{font-style:normal;margin-bottom:12px;font-size:var(--t-util);line-height:1.7}
.foot-dir{display:inline-block;text-decoration:none}
.foot-dir-cue{display:inline-block;margin-top:4px;font-weight:500;color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-dir:hover .foot-dir-cue{text-decoration-thickness:2px}
.foot-title{font-size:var(--t-util);font-family:var(--font-sans);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.foot-list{list-style:none;margin:0;padding:0}
.foot-list a{display:block;padding:6px 0;font-size:var(--t-util)}
.foot-list a:hover{color:#fff}
.foot-col summary{list-style:none;cursor:pointer}
.foot-col summary::-webkit-details-marker{display:none}
@media (max-width:1023px){
  .foot-col summary{
    display:flex;justify-content:space-between;align-items:center;min-height:44px;
    border-bottom:1px solid rgba(255,255,255,.15)
  }
  .foot-col summary::after{content:"+";color:#fff;font-size:18px}
  .foot-col details[open] summary::after{content:"–"}
  .foot-col .foot-title{margin:0}
  .foot-list{padding-block:12px 20px}
  .foot-grid{gap:0}
  .foot-brand{margin-bottom:24px}
}
.foot-bottom{
  /* Section rhythm, not section padding — the legal line belongs to the footer,
     so a full --pad-vert here just opened a hole above the rule. */
  margin-top:var(--gap-section);padding-block:24px;
  border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  font-size:12px;color:rgba(255,255,255,.6)
}

/* ── posts ─────────────────────────────────────────────────── */
.post-list{display:grid;gap:var(--gap-section)}
.post-item{padding-bottom:var(--gap-section);border-bottom:1px solid var(--border)}

/* ── reveal ────────────────────────────────────────────────── */
/* Scoped to .has-js, set by an inline script in <head>. Unscoped, a page whose
   JavaScript did not run — blocked, errored, an old browser — rendered the hero
   and nothing else, because nothing was left to add .is-in. */
.has-js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.has-js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .card-img img{transition:none}
}

/* ── GALLERY ────────────────────────────────────────────────────
   SIMILARITY: every tile gets one identical treatment, so the grid
   reads as a single set rather than a collection of individual
   pictures. PROXIMITY: one gap value throughout — tiles sit closer
   to each other than the grid does to anything around it.
   CLOSURE: tiles crop their photographs; the mind completes each
   scene, which is also what makes a uniform grid possible.
   ──────────────────────────────────────────────────────────── */
.gallery{
  list-style:none;margin:0;padding:0;
  display:grid;gap:var(--gap-section);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ .gallery{grid-template-columns:repeat(var(--gal-cols,3),1fr)} }

.gal-tile{
  display:block;width:100%;padding:0;cursor:pointer;position:relative;
  background:var(--cream);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;aspect-ratio:4/3;
}
.gal-tile img,.gal-tile .oah-img-empty{
  width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto;
  transition:transform .7s var(--ease);
}
.gal-tile:hover img{transform:scale(1.04)}
.gal-tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* FIGURE–GROUND: the affordance appears on hover only, over a scrim
   strong enough that the icon is legible on any photograph. */
.gal-zoom{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.35);opacity:0;transition:opacity .25s var(--ease);
}
.gal-tile:hover .gal-zoom,.gal-tile:focus-visible .gal-zoom{opacity:1}
.gal-zoom::before{
  content:"";width:40px;height:40px;border-radius:50%;
  border:1.5px solid #fff;background:
    linear-gradient(#fff,#fff) center/14px 1.5px no-repeat,
    linear-gradient(#fff,#fff) center/1.5px 14px no-repeat;
}

/* ── LIGHTBOX ───────────────────────────────────────────────── */
.gal-box{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(10,14,20,.94);
  padding:var(--pad-copy);
}
.gal-box[open],.gal-box.is-open{display:grid;grid-template-rows:1fr auto;gap:16px}
.gal-box img{
  max-width:100%;max-height:100%;margin:auto;object-fit:contain;
  border-radius:var(--radius);
}
.gal-box figcaption{
  text-align:center;color:rgba(255,255,255,.85);
  font-size:var(--t-util);line-height:var(--lh-util);
}
.gal-box .gal-count{display:block;color:rgba(255,255,255,.5);margin-top:4px}
/* display:grid below is an author rule and outranks the user-agent
   [hidden]{display:none}, so theme.js setting .hidden on a single-image gallery
   left two visible arrows that did nothing — and that the focus trap correctly
   skipped, so a keyboard user could never reach them. */
[hidden]{display:none !important}
.gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;                    /* 48px, per the button spec */
  border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.4);
  color:#fff;cursor:pointer;display:grid;place-items:center;font-size:20px;line-height:1;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.gal-nav:hover{background:rgba(255,255,255,.15);border-color:#fff}
.gal-prev{left:var(--pad-copy)} .gal-next{right:var(--pad-copy)}
.gal-close{
  position:absolute;top:var(--pad-copy);right:var(--pad-copy);
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.4);
  color:#fff;cursor:pointer;font-size:22px;line-height:1;
}
.gal-close:hover{background:rgba(255,255,255,.15)}
.gal-nav:focus-visible,.gal-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:639px){
  .gal-nav{width:44px;height:44px}
  .gal-prev{left:8px} .gal-next{right:8px}
}
body.gal-locked{overflow:hidden}

/* ── PLACEHOLDER ART ────────────────────────────────────────────
   Bundled SVGs that stand in until real photography arrives. They
   fill their slot exactly like a photograph would, so the layout
   is judged on its real proportions rather than on empty boxes.
   ──────────────────────────────────────────────────────────── */
.oah-ph{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.hero-bg .oah-ph{aspect-ratio:auto}
.split-media .oah-ph{aspect-ratio:16/9}
@media (min-width:768px){ .split-media .oah-ph{aspect-ratio:5/4} }
@media (min-width:1024px){ .split-media .oah-ph{aspect-ratio:4/3} }
.card-img .oah-ph,.gal-tile .oah-ph{aspect-ratio:auto}

/* An empty gallery slot is shown but not interactive — there is nothing
   to open, so it must not look or behave like a button. */
.gal-tile.is-empty{cursor:default;position:relative}
.gal-tile.is-empty:hover img{transform:none}
.gal-slot{
  position:absolute;left:12px;bottom:12px;
  background:rgba(13,31,60,.82);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--radius);
}

/* ── HERO SLIDESHOW ─────────────────────────────────────────────
   COMMON FATE: slides crossfade as one — the group moves together,
   which is what makes a sequence of unrelated photographs read as
   a single element rather than four competing pictures.
   FIGURE–GROUND: the scrim is fixed and sits above every slide, so
   the headline's contrast never depends on which photo is showing.
   ──────────────────────────────────────────────────────────── */
.hero-bg.is-slider{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.1s var(--ease);
  will-change:opacity;
}
.hero-slide.is-active{opacity:1}
.hero-slide img,.hero-slide .oah-ph{width:100%;height:100%;object-fit:cover}

/* Controls sit inside the content column, on the page's left axis —
   CONTINUITY, rather than floating over the picture. */
.hero-controls{
  display:flex;align-items:center;gap:20px;
  margin-top:var(--gap-section);
}
.hero-dots{display:flex;gap:10px}
.hero-dot{
  width:32px;height:4px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.35);
  transition:background .3s var(--ease),width .3s var(--ease);
}
.hero-dot:hover{background:rgba(255,255,255,.6)}
.hero-dot.is-active{background:#fff;width:44px}
/* the tap target is larger than the mark — 44px minimum, per the spec */
.hero-dot::before{content:"";position:absolute;inset:-20px -6px;}
.hero-dot{position:relative}
.hero-dot:focus-visible{outline:2px solid #fff;outline-offset:6px}

.hero-pause{
  width:32px;height:32px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.4);background:transparent;
  display:grid;place-items:center;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.hero-pause:hover{background:rgba(255,255,255,.15);border-color:#fff}
.hero-pause:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-pause-icon{
  width:8px;height:10px;
  border-left:2px solid #fff;border-right:2px solid #fff;
}
.hero-pause[aria-pressed="true"] .hero-pause-icon{
  width:0;height:0;border:0;
  border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;
  margin-left:2px;
}

/* COMMON FATE has to be opt-out: with reduced motion the slideshow
   holds on the first frame and the dots still work manually. */
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:none}
}