/* ==========================================================================
   Design system
   --------------------------------------------------------------------------
   Everything here is derived from three things that are actually at 8510 111
   Street: the tower's sand precast and red-oxide fins, the black steel of the
   High Level Bridge four blocks north, and the fact that Edmonton sits at 53°N
   so the academic year is measured in disappearing daylight.

   Palette
     paper   the tower's own sand precast, cooled a little
     ink     bridge steel — a cold near-black, never a warm brown-black
     oxide   the red fins on the tower, which is also the red-lead primer
             traditionally painted onto steel truss bridges
     steel   cool grey for the truss, rules and secondary text
     moss    river-valley green, links on paper only

   Type
     Archivo   variable, with a width axis. Expanded and heavy for display,
               because the building's own canopy signage is wide caps.
               Condensed for data and labels, the way an engineering drawing
               is lettered. One family, three jobs.
     Literata  built for reading on screens. The body face, because this site
               is mostly rules, prices and answers that must be read.

   Signature
     .truss — a Warren-truss hairline that opens every section, with a
     streetcar that runs it once when the section arrives. The High Level
     Bridge still carries a heritage streetcar every summer.
   ========================================================================== */

:root {
  --paper: #edeae3;
  --paper-2: #e3dfd5;
  --paper-3: #d9d4c8;
  --ink: #1b2a2e;
  --ink-2: #22343a;
  --oxide: #a8412a;
  --oxide-lit: #cf6b45;
  --steel: #54646b;
  --steel-lit: #93a3a9;
  --moss: #2f6b4c;

  --line: rgba(27, 42, 46, 0.16);
  --line-soft: rgba(27, 42, 46, 0.09);
  --line-dark: rgba(237, 234, 227, 0.2);
  --line-dark-soft: rgba(237, 234, 227, 0.11);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Literata", Georgia, "Times New Roman", serif;

  /* Fluid scale. Ratio tightens on small screens so the display face stays
     readable rather than merely large. */
  --t-mega: clamp(2.6rem, 1.1rem + 5vw, 5.25rem);
  --t-xxl: clamp(2.1rem, 1.2rem + 3.6vw, 4rem);
  --t-xl: clamp(1.65rem, 1.15rem + 2vw, 2.6rem);
  --t-lg: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  --t-md: clamp(1.05rem, 1rem + 0.25vw, 1.175rem);
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;
  --t-micro: 0.6875rem;

  --gap: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
  --pad: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --section: clamp(4rem, 2rem + 8vw, 8rem);
  --measure: 34rem;
  --wrap: 78rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-md);
  font-optical-sizing: auto;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--moss);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--oxide);
}

:focus-visible {
  outline: 2px solid var(--oxide);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}

.skip:focus {
  left: 0;
}

/* --------------------------------------------------------------- structure */

.wrap {
  width: min(var(--wrap), 100% - var(--pad) * 2);
  margin-inline: auto;
}

.wrap-narrow {
  width: min(52rem, 100% - var(--pad) * 2);
  margin-inline: auto;
}

.section {
  padding-block: var(--section);
}

.section-tight {
  padding-block: calc(var(--section) * 0.6);
}

.band {
  background: var(--ink);
  color: var(--paper);
}

:is(.band, .hero, .pagehead) a {
  color: var(--oxide-lit);
}

:is(.band, .hero, .pagehead) a:hover {
  color: var(--paper);
}

.band-2 {
  background: var(--paper-2);
}

/* --------------------------------------------------------------- typography */

.eyebrow {
  font-family: var(--display);
  font-variation-settings: "wdth" 78, "wght" 620;
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

:is(.band, .hero, .pagehead) .eyebrow {
  color: var(--steel-lit);
}

.h-mega,
.h-xxl,
.h-xl,
.h-lg {
  font-family: var(--display);
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

.h-mega {
  font-variation-settings: "wdth" 118, "wght" 760;
  font-size: var(--t-mega);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.h-xxl {
  font-variation-settings: "wdth" 112, "wght" 720;
  font-size: var(--t-xxl);
  line-height: 0.96;
  letter-spacing: -0.015em;
}

.h-xl {
  font-variation-settings: "wdth" 106, "wght" 700;
  font-size: var(--t-xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.h-lg {
  font-variation-settings: "wdth" 100, "wght" 680;
  font-size: var(--t-lg);
  line-height: 1.15;
  letter-spacing: 0;
}

.lede {
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.45rem);
  line-height: 1.48;
  max-width: 30ch;
  margin: 1.5rem 0 0;
}

.prose {
  max-width: var(--measure);
}

.prose p {
  margin: 0 0 1.15em;
}

.prose p:last-child {
  margin-bottom: 0;
}

.small {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--steel);
}

:is(.band, .hero, .pagehead) .small {
  color: var(--steel-lit);
}

.data {
  font-family: var(--display);
  font-variation-settings: "wdth" 80, "wght" 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--t-xs);
}

.num {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------- the signature
   A Warren truss: two hairlines with a zig-zag web between them, which is how
   the High Level Bridge is actually built. The streetcar runs it once when the
   section arrives and then stops, because it is a section marker and not a
   toy. */

.truss {
  position: relative;
  height: 38px;
  overflow: hidden;
}

/* The rail sits at the bottom of the box so the streetcar has room to stand on
   the top chord without being clipped. Top chord lands at y = 38 - 24 + 4.5. */
.truss-rail {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 24px;
}

.truss .truss-web {
  stroke: var(--steel);
  stroke-width: 1;
  fill: none;
  opacity: 0.55;
}

.truss .truss-chord {
  stroke: var(--steel);
  stroke-width: 1;
  opacity: 0.8;
}

:is(.band, .hero, .pagehead) .truss .truss-web,
:is(.band, .hero, .pagehead) .truss .truss-chord {
  stroke: var(--steel-lit);
}

/* The tram box is the full width of the truss and holds the streetcar at its
   left edge, so translateX(38%) is 38% of the SPAN. A percentage in a
   transform resolves against the element's own width, so a 34px-wide tram
   would travel 13px and look broken. */
.tram {
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 13px;
  transform: translateX(-44px);
  will-change: transform;
  pointer-events: none;
}

.tram svg {
  width: 34px;
  height: 13px;
}

.tram .car {
  fill: var(--oxide);
}

.tram .win {
  fill: var(--paper);
}

:is(.band, .hero, .pagehead) .tram .win {
  fill: var(--ink);
}

.truss.is-in .tram {
  transform: translateX(var(--stop, 40%));
  transition: transform 3.4s cubic-bezier(0.16, 0.72, 0.24, 1);
}

/* -------------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.nav-dark {
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  border-bottom-color: var(--line-dark-soft);
  color: var(--paper);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-block: 0.9rem;
}

.brand {
  font-family: var(--display);
  font-variation-settings: "wdth" 116, "wght" 760;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.brand-mark {
  font-variation-settings: "wdth" 78, "wght" 500;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--steel);
}

.nav-dark .brand-mark {
  color: var(--steel-lit);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: var(--display);
  font-variation-settings: "wdth" 88, "wght" 560;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--oxide);
  border-bottom-color: currentColor;
}

.nav-dark .nav-links a:hover,
.nav-dark .nav-links a[aria-current="page"] {
  color: var(--oxide-lit);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: inherit;
  font-family: var(--display);
  font-variation-settings: "wdth" 84, "wght" 600;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}

.nav-dark .nav-toggle {
  border-color: var(--line-dark);
}

@media (max-width: 62rem) {
  .nav-toggle {
    display: block;
  }

  .nav-links {
    position: fixed;
    inset: 0 0 auto;
    top: 3.75rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    padding: var(--pad) var(--pad) calc(var(--pad) * 1.5);
    transform: translateY(-120%);
    transition: transform 0.4s var(--ease);
    max-height: calc(100dvh - 3.75rem);
    overflow-y: auto;
  }

  .nav-links a {
    color: var(--paper);
    font-size: 1rem;
    padding-block: 0.95rem;
    border-bottom: 1px solid var(--line-dark-soft);
  }

  .nav-links.is-open {
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-variation-settings: "wdth" 92, "wght" 620;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.btn:hover {
  background: var(--oxide);
  border-color: var(--oxide);
  color: var(--paper);
}

.btn-ghost {
  background: none;
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

:is(.band, .hero, .pagehead) .btn,
.btn-on-dark {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

:is(.band, .hero, .pagehead) .btn:hover,
.btn-on-dark:hover {
  background: var(--oxide);
  border-color: var(--oxide);
  color: var(--paper);
}

:is(.band, .hero, .pagehead) .btn-ghost {
  background: none;
  color: var(--paper);
  border-color: var(--line-dark);
}

:is(.band, .hero, .pagehead) .btn-ghost:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.link-arrow {
  font-family: var(--display);
  font-variation-settings: "wdth" 88, "wght" 600;
  font-size: var(--t-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
}

.link-arrow::after {
  content: "→";
  transition: transform 0.25s var(--ease);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}

/* A wash at the top edge, not a field of colour. Edmonton is far enough north
   that this happens, but it is weather, not branding — it must never compete
   with the headline sitting on top of it. */
.hero-sky {
  position: absolute;
  inset: 0 0 auto;
  height: 48%;
  width: 100%;
  z-index: 0;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, #000 8%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 8%, transparent 100%);
  /* Static fallback: what a canvas-less browser gets, and what the aurora
     paints over. */
  background: radial-gradient(
      110% 80% at 24% -18%,
      rgba(79, 140, 106, 0.5),
      transparent 64%
    ),
    radial-gradient(80% 62% at 80% -22%, rgba(84, 104, 150, 0.42), transparent 62%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  padding-block: clamp(3.5rem, 2rem + 7vw, 7rem) clamp(2rem, 1rem + 3vw, 3.5rem);
}

.hero-title {
  font-family: var(--display);
  font-variation-settings: "wdth" 118, "wght" 780;
  font-size: var(--t-mega);
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0;
}

.hero-kicker {
  display: block;
  font-variation-settings: "wdth" 82, "wght" 560;
  font-size: clamp(0.8125rem, 0.72rem + 0.4vw, 1rem);
  letter-spacing: 0.16em;
  line-height: 1.3;
  color: var(--steel-lit);
  margin-bottom: 1.1rem;
}

.hero-address {
  font-family: var(--display);
  font-variation-settings: "wdth" 80, "wght" 560;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-lit);
  margin: 0 0 1.5rem;
}

.hero-sub {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.5;
  max-width: 32ch;
  margin: 1.75rem 0 0;
  color: color-mix(in srgb, var(--paper) 88%, var(--ink));
}

.hero-figure {
  position: relative;
  margin: 0;
  align-self: stretch;
  min-height: clamp(18rem, 42vw, 32rem);
}

.hero-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: saturate(0.82) contrast(1.04) brightness(0.92);
}

/* The thesis: this address, measured in minutes on foot. Replaces the usual
   badge row, and is the only number a student actually weighs. */
.hero-walks {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-dark-soft);
}

.hero-walk {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 1.15rem 1.25rem 1.15rem 0;
  border-right: 1px solid var(--line-dark-soft);
}

.hero-walk:last-child {
  border-right: 0;
}

.hero-walk b {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 720;
  font-feature-settings: "tnum" 1;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--oxide-lit);
  letter-spacing: -0.02em;
}

.hero-walk span {
  font-family: var(--display);
  font-variation-settings: "wdth" 82, "wght" 520;
  font-size: var(--t-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--steel-lit);
  line-height: 1.25;
}

@media (max-width: 54rem) {
  .hero-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .hero-figure {
    min-height: 15rem;
    order: -1;
    margin-bottom: 0.5rem;
  }

  .hero-walk {
    padding-right: 0.75rem;
  }
}

/* --------------------------------------------------------------- page head */

.pagehead {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.pagehead .lede {
  color: color-mix(in srgb, var(--paper) 86%, var(--ink));
  max-width: 38ch;
}

.crumbs {
  font-family: var(--display);
  font-variation-settings: "wdth" 80, "wght" 520;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-lit);
  margin: 0 0 1.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.crumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.crumbs a:hover {
  border-bottom-color: currentColor;
  color: var(--paper);
}

/* ------------------------------------------------------------------- rooms
   The big number on a room card is its floor area, because that is the only
   thing that actually separates the three types. A plate number would have
   been decoration. */

.rooms {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}

.room {
  background: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.75rem) 0;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: background 0.25s var(--ease);
}

.room:hover {
  background: var(--paper-2);
}

.room:hover .room-where {
  display: block;
  font-family: var(--display);
  font-variation-settings: "wdth" 80, "wght" 560;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.5rem;
}

:is(.band, .hero, .pagehead) .room-where {
  color: var(--steel-lit);
}

.room-name {
  color: var(--oxide);
}

.room-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-3);
}

.room-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.room:hover .room-media img {
  transform: scale(1.035);
}

.room-area {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.55rem 0.9rem 0.45rem;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.room-area b {
  font-family: var(--display);
  font-variation-settings: "wdth" 110, "wght" 740;
  font-feature-settings: "tnum" 1;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.room-area span {
  font-family: var(--display);
  font-variation-settings: "wdth" 78, "wght" 520;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-lit);
}

.room-body {
  min-width: 0;
}

.room-name {
  font-family: var(--display);
  font-variation-settings: "wdth" 110, "wght" 720;
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  transition: color 0.25s var(--ease);
}

.room-lede {
  margin: 0 0 1.25rem;
  max-width: 42ch;
}

.room-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}

.room-go {
  font-family: var(--display);
  font-variation-settings: "wdth" 84, "wght" 600;
  font-size: var(--t-micro);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--steel);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.25s var(--ease);
}

.room-go::after {
  content: "→";
  transition: transform 0.25s var(--ease);
}

.room:hover .room-go {
  color: var(--oxide);
}

.room:hover .room-go::after {
  transform: translateX(4px);
}

.price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.price b {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 740;
  font-feature-settings: "tnum" 1;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.025em;
}

.price span {
  font-family: var(--display);
  font-variation-settings: "wdth" 80, "wght" 520;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}

@media (max-width: 46rem) {
  .room {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------- building picker
   Two large cards, one per building, on the homepage. Bigger than a room card
   because choosing the building comes first. */

.picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

@media (max-width: 46rem) {
  .picks {
    grid-template-columns: 1fr;
  }
}

.pick {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--line);
  padding-top: 1.15rem;
}

.pick-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-3);
  margin-bottom: 1.15rem;
}

.pick-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.pick:hover .pick-media img {
  transform: scale(1.035);
}

.pick:hover .h-lg {
  color: var(--oxide);
}

.pick:hover .room-go {
  color: var(--oxide);
}

.pick .h-lg {
  transition: color 0.25s var(--ease);
}

.pick-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

:is(.band, .hero, .pagehead) .pick {
  border-top-color: var(--line-dark);
}

/* ------------------------------------------------------------------- specs */

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.spec th,
.spec td {
  text-align: left;
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: baseline;
}

.spec th {
  font-family: var(--display);
  font-variation-settings: "wdth" 80, "wght" 580;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  width: 42%;
  font-weight: normal;
}

.spec tr:last-child th,
.spec tr:last-child td {
  border-bottom: 0;
}

.spec-strong td {
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 660;
  font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------------- grids */

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--gap);
}

/* Exactly three across on desktop, two on tablet, one on phone. auto-fit
   would drop a three-item row to 2 + 1 and leave a hole. */
.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

@media (max-width: 60rem) {
  .cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .cols-3 {
    grid-template-columns: 1fr;
  }
}

.cols-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
}

@media (max-width: 54rem) {
  .split {
    grid-template-columns: 1fr;
  }
}

.card {
  border-top: 1px solid var(--line);
  padding-top: 1.15rem;
}

.card h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 96, "wght" 660;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.card p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* Photograph over a caption, in an equal-width row. Used where the picture is
   the point and the text explains it — the three shared spaces in a suite.
   The aspect-ratio is fixed so a row of tiles keeps one baseline whatever the
   source photographs are. */
.tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tile-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-3);
  margin-bottom: 1rem;
}

.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 96, "wght" 660;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 0.55rem;
}

.tile p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--steel);
}

:is(.band, .hero, .pagehead) .tile p {
  color: var(--steel-lit);
}

:is(.band, .hero, .pagehead) .tile-media {
  background: var(--ink-2);
}

.figure {
  margin: 0;
  background: var(--paper-3);
  overflow: hidden;
}

.figure img {
  width: 100%;
  height: auto;
}

.figure-caption {
  font-family: var(--display);
  font-variation-settings: "wdth" 80, "wght" 520;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  padding-top: 0.7rem;
}

/* ------------------------------------------------------------------ lists */

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.ticks li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.55rem;
  font-size: var(--t-sm);
  line-height: 1.5;
  align-items: baseline;
}

.ticks li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--oxide);
  transform: translateY(-0.15em) rotate(45deg);
}

:is(.band, .hero, .pagehead) .ticks li::before {
  background: var(--oxide-lit);
}

/* Walk list — the recurring structural device across the site. */
.walks {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.walk {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.walk-min {
  font-family: var(--display);
  font-variation-settings: "wdth" 108, "wght" 720;
  font-feature-settings: "tnum" 1;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--oxide);
}

.walk-min sup {
  font-variation-settings: "wdth" 78, "wght" 520;
  font-size: 0.5em;
  letter-spacing: 0.08em;
  margin-left: 0.15em;
  color: var(--steel);
  top: -0.7em;
}

.walk-name {
  font-family: var(--display);
  font-variation-settings: "wdth" 92, "wght" 580;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.walk-note {
  font-size: var(--t-xs);
  color: var(--steel);
  text-align: right;
  line-height: 1.35;
}

@media (max-width: 40rem) {
  .walk {
    grid-template-columns: 3rem 1fr;
  }

  .walk-note {
    grid-column: 2;
    text-align: left;
  }
}

/* -------------------------------------------------------------------- map */

.map {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: clamp(1rem, 2vw, 1.75rem);
}

.map svg {
  width: 100%;
  height: auto;
  display: block;
}

.map .grid-line {
  stroke: var(--line);
  stroke-width: 1;
}

.map .grid-major {
  stroke: rgba(27, 42, 46, 0.28);
  stroke-width: 1.5;
}

.map .grid-label {
  font-family: var(--display);
  font-size: 9.5px;
  font-variation-settings: "wdth" 76, "wght" 560;
  letter-spacing: 0.08em;
  fill: var(--steel);
  text-transform: uppercase;
}

.map .pin-label {
  font-family: var(--display);
  font-size: 12px;
  font-variation-settings: "wdth" 88, "wght" 640;
  letter-spacing: 0.02em;
  fill: var(--ink);
}

.map .pin-home-label {
  font-variation-settings: "wdth" 92, "wght" 720;
  font-size: 11px;
}

.map .pin-min {
  font-family: var(--display);
  font-size: 11px;
  font-variation-settings: "wdth" 100, "wght" 700;
  fill: var(--oxide);
  font-feature-settings: "tnum" 1;
}

.map .pin-dot {
  fill: var(--steel);
}

.map .pin-lrt {
  fill: var(--oxide);
}

.map .pin-home {
  fill: var(--ink);
}

.map .home-ring {
  fill: none;
  stroke: var(--oxide);
  stroke-width: 1.5;
}

/* ------------------------------------------------------------------ pledge
   A quiet, high-contrast statement block. Used once per page at most. */

.pledge {
  border-left: 2px solid var(--oxide);
  padding-left: clamp(1rem, 2.5vw, 2rem);
  max-width: 44rem;
}

.pledge p {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height: 1.42;
  margin: 0;
}

/* -------------------------------------------------------------------- faq */

.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line-soft);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-family: var(--display);
  font-variation-settings: "wdth" 94, "wght" 600;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 1.6rem;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--steel);
  border-bottom: 1.5px solid var(--steel);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
  border-color: var(--oxide);
}

.faq summary:hover {
  color: var(--oxide);
}

.faq-body {
  padding: 0 2.5rem 1.5rem 0;
  max-width: 60ch;
  font-size: var(--t-sm);
  line-height: 1.65;
}

.faq-body p {
  margin: 0;
}

/* ---------------------------------------------------------------- gallery */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 2px;
}

.shot {
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--paper-3);
  cursor: zoom-in;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  display: block;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.shot:hover img {
  transform: scale(1.04);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(15, 24, 27, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--pad);
}

.lightbox[open],
.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-width: min(100%, 72rem);
  max-height: 86dvh;
  width: auto;
  object-fit: contain;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: none;
  border: 1px solid var(--line-dark);
  color: var(--paper);
  font-family: var(--display);
  font-variation-settings: "wdth" 84, "wght" 600;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 0.95rem;
  cursor: pointer;
}

.lightbox-close {
  top: var(--pad);
  right: var(--pad);
}

.lightbox-nav:hover,
.lightbox-close:hover {
  background: var(--paper);
  color: var(--ink);
}

.lightbox-prev {
  left: var(--pad);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
}

/* ------------------------------------------------------------------ video
   Facade first: nothing loads from YouTube until the poster is clicked. */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
  width: 100%;
  display: block;
}

.video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.68;
  transition: opacity 0.3s var(--ease);
}

.video:hover img {
  opacity: 0.8;
}

.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.video-play span {
  font-family: var(--display);
  font-variation-settings: "wdth" 88, "wght" 620;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid var(--paper);
  padding: 0.75rem 1.4rem;
  background: rgba(27, 42, 46, 0.5);
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------------- forms */

.form {
  display: grid;
  gap: 1.15rem;
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field label {
  font-family: var(--display);
  font-variation-settings: "wdth" 80, "wght" 580;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
}

.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink);
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 1.15rem;
}

.field-hint {
  font-size: var(--t-xs);
  color: var(--steel);
  line-height: 1.45;
}

/* Honeypot. Positioned off-screen rather than display:none, because a fair
   number of bots skip hidden fields but fill positioned ones. */
.hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  font-size: var(--t-sm);
  padding: 0.9rem 1rem;
  border-left: 2px solid var(--oxide);
  background: var(--paper-2);
  display: none;
}

.form-status.is-shown {
  display: block;
}

/* Both delivery paths failed. The oxide rule reads as an accent everywhere
   else on the site, so a failure needs more than the default border to be
   read as one. */
.form-status.is-error {
  border-left-width: 3px;
  background: color-mix(in srgb, var(--oxide) 8%, var(--paper-2));
  color: var(--ink);
}

.form-panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}

/* ------------------------------------------------------------------ modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(15, 24, 27, 0.72);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--pad);
  overflow-y: auto;
}

.modal.is-open {
  display: flex;
}

.modal-box {
  background: var(--paper);
  width: min(38rem, 100%);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  margin-block: auto;
  position: relative;
  border-top: 3px solid var(--oxide);
}

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--steel);
  cursor: pointer;
  padding: 0.35rem 0.5rem;
}

.modal-close:hover {
  color: var(--oxide);
}

/* ------------------------------------------------------------------ footer */

.footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--gap);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-dark-soft);
}

.footer h4 {
  font-family: var(--display);
  font-variation-settings: "wdth" 80, "wght" 580;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-lit);
  margin: 0 0 0.9rem;
  font-weight: normal;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.footer a {
  color: var(--paper);
  text-decoration: none;
  font-size: var(--t-sm);
  border-bottom: 1px solid transparent;
}

.footer a:hover {
  color: var(--oxide-lit);
  border-bottom-color: currentColor;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1.75rem;
  font-size: var(--t-xs);
  color: var(--steel-lit);
}

.footer-bottom a {
  font-size: var(--t-xs);
  color: var(--steel-lit);
}

/* --------------------------------------------------------------- whatsapp */

.wa {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 22px rgba(15, 24, 27, 0.28);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.wa:hover {
  background: var(--oxide);
  transform: translateY(-2px);
  color: var(--paper);
}

.wa svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}

/* ------------------------------------------------- dark-context overrides
   Every hairline in the system is a dark line at low alpha, which vanishes on
   an ink background. These are the same components with the light equivalent.
   Kept together rather than beside each component so there is one place to
   look when something disappears on a band. */

:is(.band, .hero, .pagehead) :is(.walks, .card, .faq) {
  border-top-color: var(--line-dark);
}

:is(.band, .hero, .pagehead) .walk {
  border-bottom-color: var(--line-dark-soft);
}

:is(.band, .hero, .pagehead) .walk-min {
  color: var(--oxide-lit);
}

:is(.band, .hero, .pagehead) :is(.walk-min sup, .walk-note, .figure-caption) {
  color: var(--steel-lit);
}

:is(.band, .hero, .pagehead) :is(.spec th, .spec td) {
  border-bottom-color: var(--line-dark-soft);
}

:is(.band, .hero, .pagehead) .spec th {
  color: var(--steel-lit);
}

:is(.band, .hero, .pagehead) .rooms {
  background: var(--line-dark-soft);
  border-block-color: var(--line-dark);
}

:is(.band, .hero, .pagehead) .room {
  background: var(--ink);
}

:is(.band, .hero, .pagehead) .room:hover {
  background: var(--ink-2);
}

:is(.band, .hero, .pagehead) .room-facts {
  border-top-color: var(--line-dark-soft);
}

:is(.band, .hero, .pagehead) .room-area {
  background: var(--paper);
  color: var(--ink);
}

:is(.band, .hero, .pagehead) .room-area span,
:is(.band, .hero, .pagehead) .price span,
:is(.band, .hero, .pagehead) .room-go {
  color: var(--steel);
}

:is(.band, .hero, .pagehead) .room-go {
  color: var(--steel-lit);
}

:is(.band, .hero, .pagehead) .room:hover :is(.room-name, .room-go) {
  color: var(--oxide-lit);
}

:is(.band, .hero, .pagehead) .figure,
:is(.band, .hero, .pagehead) .shot {
  background: var(--ink-2);
}

/* ------------------------------------------------------------------ reveal */

.reveal {
  opacity: 0;
  transform: translateY(14px);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* ------------------------------------------------------------------ misc */

.stack-sm > * + * {
  margin-top: 1rem;
}

.stack > * + * {
  margin-top: 2rem;
}

.stack-lg > * + * {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.mt-0 {
  margin-top: 0;
}

.center {
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .truss .tram {
    transform: translateX(var(--stop, 40%));
  }
}

@media print {
  .nav,
  .wa,
  .modal,
  .lightbox,
  .truss {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}