/* ============================================================
   PROPERTY LAYER — The HAT at East Village only
   ------------------------------------------------------------
   Loaded AFTER css/site.css. site.css is the shared HAT theme
   and is untouched in this repo; everything East Village needs
   that the theme does not already do lives here instead:

     1. the stacked logo in place of the Giroux ring wordmark
     2. one call-to-action rule: the inverse of its ground
     3. black photo scrims (the theme's scrims are tinted sage)
     4. THE RIVER — East Village's own menu: the names meander
        like the Bow, one bend per page
     5. the course — the menu's river, used
        as a content component on the neighbourhood page
     6. floorplan grid with type filter and variant switch

   Same rule as the theme: no literal colours, fonts or brand
   values here. Everything is a var(--token) from brand.css.
   ============================================================ */

/* ---------- 1. Logo ---------------------------------------- */
.brand-lockup__logo {
  height: var(--logo-size); width: auto; flex: none; display: block;
  transition: transform .6s var(--ease);
}
.brand-lockup:hover .brand-lockup__logo { transform: translateY(-2px); }

.hero__logo { width: clamp(170px, 22vw, 270px); height: auto; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); }
.footer-brand .footer-logo { width: 180px; height: auto; margin: 0 0 1.5rem; }
@media (max-width: 700px) {
  .footer-brand .footer-logo { grid-column: 1 / -1; order: 1; margin: 0 auto 1.75rem; }
}
@media (max-width: 400px) { .footer-brand .footer-logo { grid-column: 1; } }

/* ---------- 2. One call to action: the inverse of its ground ----
   On light grounds every Book a Tour pill is black with white text;
   on black and graphite grounds it is white with black text. Both
   are 19.2:1. Nothing else on the site is a white pill. */
.btn--accent { background: var(--sage); color: var(--white); }
.btn--accent:hover { background: var(--smoke); color: var(--white); }

.hero .btn--accent, .page-hero .btn--accent, .cta-band .btn--accent,
.section--sage .btn--accent, .section--deep .btn--accent, .section--slate .btn--accent,
.btn--cream, .site-header .btn {
  background: var(--accent); color: var(--accent-ink);
}
.hero .btn--accent:hover, .page-hero .btn--accent:hover, .cta-band .btn--accent:hover,
.section--sage .btn--accent:hover, .section--deep .btn--accent:hover, .section--slate .btn--accent:hover,
.btn--cream:hover, .site-header .btn:hover { background: var(--accent-hover); color: var(--accent-ink); }

/* Mobile bar: Call on black, Book a Tour in the white */
.action-bar a + a { background: var(--accent); color: var(--accent-ink); }

/* CTA band: graphite in the theme; black here, with the circles kept as faint rings */
.cta-band { background: var(--sage); border-top: 1px solid var(--rule-inverse); }
.cta-band::before, .cta-band::after { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-inverse); }

/* Eyebrows on dark grounds go full white */
.section--sage .eyebrow, .section--deep .eyebrow, .section--slate .eyebrow,
.page-hero .eyebrow, .hero__eyebrow, .cta-band .script-note { color: var(--white); opacity: 1; }
.breadcrumb { color: var(--white); }

/* Amenity dots: black, graphite and white in turn */
.amenity-list .amenity:nth-child(3n+1) .amenity__dot { background: var(--sage); color: var(--white); }
.amenity-list .amenity:nth-child(3n+2) .amenity__dot { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.amenity-list .amenity:nth-child(3n+3) .amenity__dot { background: var(--smoke); color: var(--white); }
.section--sage .amenity__dot, .section--deep .amenity__dot { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }

/* ---------- 3. Photography under the hero ------------------ */
.hero__scrim {
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(var(--scrim-rgb), .38), rgba(var(--scrim-rgb), .82) 100%),
    linear-gradient(to bottom, rgba(var(--scrim-rgb), .72), rgba(var(--scrim-rgb), .28) 45%, rgba(var(--scrim-rgb), .9));
}
.hero__texture { display: none; }

/* The photo is set inline as background-image on the section (a url() inside a
   custom property would resolve against this stylesheet, not the page). */
.page-hero--photo { background-color: var(--sage); background-position: center; background-size: cover; background-repeat: no-repeat; }
.page-hero--photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--scrim-rgb), .92) 0%, rgba(var(--scrim-rgb), .66) 50%, rgba(var(--scrim-rgb), .3) 100%);
}


/* ============================================================
   4. THE RIVER — the East Village menu
   ------------------------------------------------------------
   East Village is flanked by the Bow River and the RiverWalk, so
   the menu meanders: each page is a bend in the river, and its
   name swings left or right to follow the water. Home sits at
   the foot; the river lights from Home up to the page you are
   on. Same trigger and same body.nav-open state as the
   template's dial, so js/site.js is unchanged.

   Geometry: every row is exactly --stop-h tall. A row's swing
   is --k (0–1, set per row by tools/build_pages.py) × --meander.
   The river is one SVG stretched over the list (viewBox 100 ×
   rows·100, preserveAspectRatio none), so x = k·100 lands on the
   dot of every row with no measuring in JS.
   ============================================================ */
.river-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--sage); color: var(--white);
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--header-h) + 2vh) var(--gutter) 6vh;
  display: grid; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
}
body.nav-open .river-menu { opacity: 1; visibility: visible; }

.river-menu__grid {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .river-menu__grid { grid-template-columns: minmax(0, 1fr) auto; padding-inline: clamp(0rem, 4vw, 5rem); }
}
.river-tag {
  display: inline-flex; align-items: center; gap: .7em; margin-bottom: clamp(1.25rem, 3vh, 2rem);
  font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--white);
}
.river-tag::before {   /* a short ripple */
  content: ""; width: 1.6em; height: .5em;
  border-top: 1px solid currentColor; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* --- the water --- */
.river { position: relative; }
.river__line {
  position: absolute; z-index: 0; top: 0; height: 100%;
  left: calc(var(--bend-dot) / 2); width: var(--meander);
  overflow: visible; pointer-events: none;
}
.river__line path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.river__water { stroke: var(--rule-inverse); stroke-width: var(--river-w); }
.river__lit {
  stroke: var(--white); stroke-width: var(--river-w);
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease) .2s;
}
body.nav-open .river__lit { stroke-dashoffset: 0; }

/* --- a bend --- */
.river__stops { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; }
.bend { height: var(--stop-h); }
.bend a {
  height: 100%; display: grid; align-items: center;
  grid-template-columns: var(--bend-dot) minmax(0, 1fr);
  column-gap: clamp(1rem, 2.2vw, 1.75rem);
  padding-left: calc(var(--k, 0) * var(--meander));
  opacity: 0; transform: translateX(calc((var(--k, 0) - .5) * -40px));
  transition: opacity .55s var(--ease), transform .7s var(--ease);
}
body.nav-open .bend a {
  opacity: 1; transform: none;
  transition-delay: calc(.12s + var(--j) * .06s);
}
.bend__dot {
  width: var(--bend-dot); height: var(--bend-dot); border-radius: 50%;
  background: var(--sage); box-shadow: inset 0 0 0 var(--river-w) var(--rule-inverse);
  transition: background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.bend--passed .bend__dot { box-shadow: inset 0 0 0 var(--river-w) var(--white); }
.bend__label { display: flex; align-items: baseline; flex-wrap: nowrap; gap: .2rem 1.1rem; min-width: 0; white-space: nowrap; }
.bend__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.55rem, 4.3vh + 1vw, 3rem); line-height: 1;
  transition: transform .45s var(--ease);
}
.bend__note { font-size: var(--fs-small); color: var(--text-on-sage-muted); transition: color .3s var(--ease); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bend__name { flex: none; }
.bend a:hover .bend__name, .bend a:focus-visible .bend__name { transform: translateX(.35rem); }
.bend a:hover .bend__dot, .bend a:focus-visible .bend__dot { background: var(--white); box-shadow: inset 0 0 0 var(--river-w) var(--white); transform: scale(1.2); }
.bend a:hover .bend__note { color: var(--white); }

/* Current page: a filled dot with a halo and the name in italics */
.bend a[aria-current="page"] .bend__dot {
  background: var(--white); box-shadow: 0 0 0 6px rgba(255,255,255,.1), 0 0 18px rgba(255,255,255,.25);
}
.bend a[aria-current="page"] .bend__name { font-style: italic; }

@media (max-width: 600px) {
  .bend__note { display: none; }
  .bend__name { font-size: clamp(1.45rem, 7vw, 2.1rem); }
}

/* --- the right-hand column --- */
.river-menu__aside {
  border-top: 1px solid var(--rule-inverse); padding-top: clamp(1.75rem, 3vh, 2.5rem);
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease) .45s, transform .5s var(--ease) .45s;
}
body.nav-open .river-menu__aside { opacity: 1; transform: none; }
@media (min-width: 960px) {
  .river-menu__aside { border-top: 0; padding-top: 0; border-left: 1px solid var(--rule-inverse); padding-left: clamp(2rem, 4vw, 3.5rem); }
}
.river-menu__aside .eyebrow { color: var(--white); }
.river-menu__aside .h3 { margin-bottom: 1.5rem; max-width: 18ch; line-height: 1.15; }
.river-menu__tour {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05em 2.8em; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: var(--tracking-btn); text-indent: var(--tracking-btn); text-transform: uppercase;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.river-menu__tour:hover { background: var(--accent-hover); transform: translateY(-2px); }
.river-menu__meta { margin-top: clamp(1.75rem, 4vh, 2.5rem); display: grid; gap: 1.1rem; font-size: var(--fs-small); color: var(--text-on-sage-muted); }
.river-menu__meta address { font-style: normal; line-height: 1.7; }
.river-menu__meta a { color: var(--white); border-bottom: 1px solid var(--rule-inverse); transition: border-color .3s var(--ease); justify-self: start; }
.river-menu__meta a:hover { border-color: var(--white); }

@media (max-width: 959px) {
  .river-menu { align-items: start; }
  .river-menu__aside .h3 { display: none; }
}

/* ============================================================
   5. THE COURSE — the menu's river, as a content component
   On the neighbourhood page: one bend per nearby place, the
   building first with its dot lit. Same water, same dots and
   same --k swing as the menu. Rows are forced to equal height
   (grid-auto-rows: 1fr) so the stretched SVG lands on every dot.
   ============================================================ */
.course { position: relative; }
.course .river__line { left: calc(var(--bend-dot) / 2); width: var(--meander); }
.course__stops {
  position: relative; z-index: 1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-rows: 1fr;
}
.course__row {
  --course-gap: clamp(1rem, 2.5vw, 2rem);
  --swing: calc(var(--k, 0) * var(--meander));
  position: relative;
  display: grid; align-items: baseline; column-gap: var(--course-gap); row-gap: .15rem;
  grid-template-columns: calc(var(--meander) + var(--bend-dot)) minmax(0, 1fr);
  padding-block: clamp(1rem, 2vw, 1.4rem);
}
@media (min-width: 760px) {
  .course__row { grid-template-columns: calc(var(--meander) + var(--bend-dot)) minmax(12rem, .8fr) 1.2fr; }
}
/* Only the dot and the place name follow the river; the notes stay in a straight column */
.course__dot { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin-left: var(--swing); }
.course__name { grid-column: 2; transform: translateX(var(--swing)); }
.course__note { grid-column: 2; }
@media (min-width: 760px) { .course__note { grid-column: 3; grid-row: 1; } }
/* A hairline under each place, starting after the river so the water runs clear */
.course__row::after {
  content: ""; position: absolute; right: 0; bottom: 0; height: 1px; background: var(--rule-inverse);
  left: calc(var(--meander) + var(--bend-dot) + var(--course-gap));
}
.course__dot {
  width: var(--bend-dot); height: var(--bend-dot); border-radius: 50%;
  background: var(--sage); box-shadow: inset 0 0 0 var(--river-w) var(--rule-inverse);
}
.course__row--home .course__dot { background: var(--white); box-shadow: 0 0 0 6px rgba(255,255,255,.1), 0 0 18px rgba(255,255,255,.25); }
.course__dot { transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.course__name { transform-origin: left center; transition: transform .35s var(--ease); }
/* Desktop hover: the light moves to the place you point at, and its name grows
   slightly. While any row is hovered, the building's dot goes back to unlit. */
@media (hover: hover) and (pointer: fine) {
  .course__row { cursor: default; }
  .course__stops:has(.course__row:hover) .course__row--home:not(:hover) .course__dot {
    background: var(--sage); box-shadow: inset 0 0 0 var(--river-w) var(--rule-inverse);
  }
  .course__row:hover .course__dot {
    background: var(--white); box-shadow: 0 0 0 6px rgba(255,255,255,.1), 0 0 18px rgba(255,255,255,.25);
  }
  .course__row:hover .course__name { transform: translateX(var(--swing)) scale(1.06); }
  .course__row:hover .course__note { color: var(--white); }
}
.course__note { transition: color .35s var(--ease); }
.course__name { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.15; margin: 0; }
.course__note { font-size: var(--fs-small); color: var(--text-on-sage-muted); margin: 0; }

/* ============================================================
   6. FLOORPLANS
   ============================================================ */
.plan__media--drawing, .card__media--drawing, .plan-card__media { background: var(--plan-ground); }
.card__media--drawing { aspect-ratio: 1; padding: clamp(.75rem, 1.5vw, 1.25rem); }
.card__media--drawing img { object-fit: contain; }

/* Type groups — the theme's filter chips hide and show [data-beds] */
.plan-type { scroll-margin-top: calc(var(--header-h) + 1rem); }
.plan-type + .plan-type { margin-top: clamp(4rem, 8vw, 6.5rem); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--rule); }
.plan-type[hidden] { display: none; }
.plan-type + .plan-type[hidden] + .plan-type, .chips + .plan-type { border-top: 0; padding-top: 0; margin-top: 0; }
.plan-type__intro p { color: var(--text-muted); max-width: 70ch; }

.plan-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.plan-card {
  display: flex; flex-direction: column; scroll-margin-top: calc(var(--header-h) + 5rem);
  background: var(--white); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.plan-card__media { aspect-ratio: 1; padding: clamp(.75rem, 1.5vw, 1.25rem); }
.plan-card__media img { width: 100%; height: 100%; object-fit: contain; }
.plan-card__body { padding: clamp(1.25rem, 2vw, 1.75rem); display: flex; flex-direction: column; gap: .9rem; flex: 1; }
.plan-card__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; margin: 0; }
.plan-card__showing { font-size: var(--fs-small); color: var(--text-muted); margin: -.5rem 0 0; }
.plan-card .plan__stats { margin: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: .25rem 1rem; }
.plan-card .plan__stat { min-width: 0; }
.plan-card .btn-row { margin-top: auto; padding-top: .25rem; }

.plan__mirror { display: flex; flex-wrap: wrap; gap: .45rem; }
.plan__mirror button {
  font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  min-width: 2.6rem; padding: .5em 1em; border-radius: var(--radius-pill); border: 0;
  background: transparent; color: var(--text-body); box-shadow: inset 0 0 0 1px var(--rule);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.plan__mirror button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.plan__mirror button[aria-pressed="true"] { background: var(--sage); color: var(--white); box-shadow: none; }

/* Suite-type teaser cards on the home page */
.type-card .card__media { aspect-ratio: 1; }
.type-card .card__media img { object-fit: contain; padding: clamp(.75rem, 1.5vw, 1.25rem); }

/* Photo figure used in split blocks */
.photo { margin: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--cream); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo--square { aspect-ratio: 1; }

/* Suite photography is shown uncropped at every width (playbook §10). */
.photo--natural { aspect-ratio: auto; }
.photo--natural img { height: auto; object-fit: initial; }

/* Gallery images are photography now, not placeholders */
.gallery figure { cursor: zoom-in; }

/* Lightbox (js/property.js) */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(var(--scrim-rgb), .95);
  display: grid; place-items: center; padding: 4vh 4vw;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 86vh; border-radius: var(--radius-sm); }
.lightbox button {
  position: absolute; border: 0; background: transparent; color: var(--white);
  width: 56px; height: 56px; display: grid; place-items: center; font-size: 1.6rem; border-radius: 50%;
}
.lightbox button:hover { box-shadow: inset 0 0 0 1px var(--white); }
.lightbox__close { top: 2vh; right: 2vw; }
.lightbox__prev { left: 1vw; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1vw; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 3vh; left: 0; right: 0; text-align: center; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); color: var(--text-on-sage-muted); }

/* Incentive strip under the home hero */
.notice { background: var(--smoke); color: var(--white); padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.notice__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.notice .notice__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--white); margin: 0 0 .3rem; }
.notice p { margin: 0; color: var(--text-on-sage-muted); font-size: var(--fs-small); max-width: 70ch; }
.notice .btn { background: var(--accent); color: var(--accent-ink); }
.notice .btn:hover { background: var(--accent-hover); }

/* Map */
.map-frame--wide { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .map-frame--wide { aspect-ratio: 4 / 3; } }
.info-block--center { text-align: center; }
.contact-grid > * { min-width: 0; }

/* ---------- Motif swap ---------------------------------------
   The rosette is Giroux's decal and stays there. East Village's
   divider is a short stretch of river with one stop on it, between
   two hairlines. Interior page heroes drop the rosette watermark. */
.page-hero::after { display: none; }
.river-divider {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.river-divider::before, .river-divider::after {
  content: ""; width: clamp(50px, 8vw, 110px); height: 1px; background: var(--rule-inverse);
}
.river-divider svg { width: clamp(110px, 12vw, 160px); height: auto; overflow: visible; }
.river-divider path { fill: none; stroke: var(--white); stroke-width: var(--river-w); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.river-divider circle { fill: var(--white); }

/* Map fallback: the live Google embed sits on top; if it is blocked or slow,
   the skyline photo and a directions button underneath show instead. */
.map-frame--fallback { position: relative; background: var(--sage) url("../assets/img/skyline-day.jpg") center / cover no-repeat; }
.map-frame__fallback { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(var(--scrim-rgb), .45); }
.map-frame__fallback .btn { background: var(--accent); color: var(--accent-ink); }
.map-frame--fallback iframe { position: relative; z-index: 1; }

/* Family strip: each lockup gets its city beneath it (playbook §12). */
.family-logo { grid-template-rows: var(--fam-cap-h) auto auto; }
.family-logo .family-logo__city {
  grid-row: 3; align-self: start; margin-top: calc(var(--fam-cap-gap) * .6);
  font-size: .62rem; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--stone);
}