/* ============================================================================
   desktop.css · the pointer composition
   ----------------------------------------------------------------------------
   This file is written for a mouse on a wide screen. It is NOT the mobile
   layout narrowed. mobile.css loads after this one and re-composes the same
   markup as a different design.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   CURTAIN · chains that invert into arches, then lift
   ------------------------------------------------------------------------- */
.curtain {
  position: fixed; inset: 0;
  z-index: var(--z-curtain);
  background: var(--shadow);
  display: grid; place-items: center;
  pointer-events: none;
}
.curtain__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.curtain__svg path {
  fill: none;
  stroke: color-mix(in oklab, var(--bone) 30%, transparent);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.curtain__svg .curtain__fill {
  fill: color-mix(in oklab, var(--bone) 4%, transparent);
  stroke: none;
}
.curtain__mark {
  position: relative;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.7s var(--ease-settle), transform 0.9s var(--ease-settle);
}
.curtain__word {
  font-size: clamp(2rem, 5vw, 4.4rem);
  color: var(--bone);
  letter-spacing: 0.02em;
}
.curtain.is-marked .curtain__mark { opacity: 1; transform: translateY(0); }

/* Exit is a cross-dissolve, deliberately much faster than the entrance.
   Entering is an event; leaving is instant. */
.curtain.is-lifting {
  opacity: 0;
  transition: opacity var(--dur-out) var(--ease-swing);
}
.curtain.is-done { display: none; }

/* Body is locked while the curtain is up so the reader cannot scroll behind it */
body[data-boot="pending"] { overflow: hidden; }

/* ---------------------------------------------------------------------------
   CURSOR · a small aperture. Never shown on touch, never shown on coarse
   pointers, and it degrades to the system cursor if JS does not run.
   ------------------------------------------------------------------------- */
.cursor { display: none; }

@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  body.has-cursor { cursor: none; }
  body.has-cursor a,
  body.has-cursor button,
  body.has-cursor input,
  body.has-cursor textarea { cursor: none; }

  body.has-cursor .cursor {
    display: block;
    position: fixed; top: 0; left: 0;
    z-index: var(--z-cursor);
    pointer-events: none;
    will-change: transform;
    mix-blend-mode: difference;
  }
  .cursor__ring {
    display: block;
    width: 26px; height: 26px;
    margin: -13px 0 0 -13px;
    border: 1px solid #fff;
    /* an arch, not a circle: flat sill, catenary crown */
    border-radius: 50% 50% 6% 6% / 62% 62% 8% 8%;
    transition: width var(--dur-tap) var(--ease-settle),
                height var(--dur-tap) var(--ease-settle),
                margin var(--dur-tap) var(--ease-settle),
                border-radius var(--dur-tap) var(--ease-settle);
  }
  body.cursor-open .cursor__ring {
    width: 62px; height: 74px;
    margin: -37px 0 0 -31px;
    border-radius: 50% 50% 4% 4% / 46% 46% 5% 5%;
  }
}

/* ---------------------------------------------------------------------------
   NAV
   ------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gutter);
  padding: 1.5rem var(--gutter);
  color: var(--bone);
  mix-blend-mode: difference;
  transition: transform 0.55s var(--ease-settle);
}
.nav.is-hidden { transform: translateY(-110%); }

.nav__arch { width: 42px; height: 20px; overflow: visible; }
.nav__arch path {
  fill: none; stroke: currentColor; stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.nav__mark { display: inline-flex; align-items: center; min-height: 44px; }

.nav__links {
  display: flex; gap: clamp(1.2rem, 2.4vw, 2.6rem);
  justify-content: center;
  font-size: var(--t-label);
  font-variation-settings: "wdth" 112, "wght" 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav__links a { position: relative; padding-block: 0.4rem; }
.nav__links a::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-settle);
}
@media (hover: hover) {
  .nav__links a:hover::after { transform: scaleX(1); }
}
.nav__links a[aria-current="true"]::after { transform: scaleX(1); }

.nav__cta {
  justify-self: end;
  font-size: var(--t-label);
  font-variation-settings: "wdth" 112, "wght" 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 40% 40% 3% 3% / 30% 30% 3% 3%;
  padding: 0.85rem 1.5rem 0.7rem;
  min-height: 44px;
  display: inline-flex; align-items: center;
  transition: background var(--dur-tap) var(--ease-settle),
              color var(--dur-tap) var(--ease-settle);
}
@media (hover: hover) {
  .nav__cta:hover { background: var(--bone); color: var(--shadow); }
}

.nav__toggle { display: none; }

/* ---------------------------------------------------------------------------
   MENU (desktop overlay)
   ------------------------------------------------------------------------- */
.menu {
  position: fixed; inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--shadow);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease-swing), visibility 0.5s;
}
.menu[hidden] { display: grid; }          /* we animate it, so never display:none */
.menu.is-open { opacity: 1; visibility: visible; }

.menu__arches { position: absolute; inset: 0; width: 100%; height: 100%; }
.menu__arches path {
  fill: none;
  stroke: color-mix(in oklab, var(--bone) 16%, transparent);
  stroke-width: 1; vector-effect: non-scaling-stroke;
}

.menu__inner { position: relative; text-align: center; color: var(--bone); }
.menu__list { display: grid; gap: clamp(0.5rem, 1.4vh, 1.1rem); }
.menu__list a {
  display: inline-flex; align-items: baseline; gap: 1.2rem;
  padding: 0.4rem 1rem;
}
.menu__list .num {
  font-size: var(--t-label); letter-spacing: 0.2em;
  color: color-mix(in oklab, var(--bone) 45%, var(--shadow));
  font-style: normal;
}
.menu__list .display {
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  transition: opacity 0.4s var(--ease-settle);
}
@media (hover: hover) {
  /* hovering one item recedes the others — the reference's move, and a good one */
  .menu__list:hover a .display { opacity: 0.32; }
  .menu__list a:hover .display { opacity: 1; }
}
/* An address, not a label. Uppercase at 0.22em tracking is right for two words
   and unreadable at forty characters - the third time that pattern bit. */
.menu__foot {
  margin-top: 3rem;
  color: color-mix(in oklab, var(--bone) 62%, var(--shadow));
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  isolation: isolate;
}
.hero__plate { position: absolute; inset: 0; z-index: -1; }
.hero__img { position: absolute; inset: 0; }
.hero__img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
}
.hero__img--sunset { opacity: 0; will-change: opacity; }

/* Opaque enough that the headline sits on a colour we chose, not on whatever
   the photograph happens to be doing at that pixel. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      color-mix(in oklab, var(--shadow) 66%, transparent) 0%,
      color-mix(in oklab, var(--shadow) 40%, transparent) 18%,
      color-mix(in oklab, var(--shadow) 62%, transparent) 42%,
      color-mix(in oklab, var(--shadow) 60%, transparent) 62%,
      color-mix(in oklab, var(--shadow) 82%, transparent) 100%);
}

.hero__type {
  align-self: center;
  text-align: center;
  color: var(--bone);
  padding-inline: var(--gutter);
  padding-top: 6vh;
}
.hero__eyebrow {
  color: var(--bone);
  margin-bottom: clamp(1.4rem, 3vh, 2.6rem);
}
.hero__word {
  font-size: var(--t-hero);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero__gloss {
  margin-top: clamp(1rem, 2.4vh, 2rem);
  font-size: var(--t-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 106, "wght" 400;
  color: color-mix(in oklab, var(--bone) 92%, transparent);
  display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap;
}
.hero__phon { font-style: italic; text-transform: none; letter-spacing: 0.08em; }

.hero__cue {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(1.5rem, 4vh, 3rem);
  display: grid; justify-items: center; gap: 0.7rem;
  color: color-mix(in oklab, var(--bone) 90%, transparent);
  min-height: 44px; padding: 0.4rem 1rem;
}
.hero__cue-arch { width: 40px; height: 26px; overflow: visible; }
.hero__cue-arch path {
  fill: none; stroke: currentColor; stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__cue-arch { animation: cue 2.6s var(--ease-swing) infinite; }
  @keyframes cue {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(5px); opacity: 1; }
  }
}

.hero__price {
  position: absolute;
  right: var(--gutter); bottom: clamp(1.5rem, 4vh, 3rem);
  color: color-mix(in oklab, var(--bone) 82%, transparent);
}

/* ---------------------------------------------------------------------------
   shared section furniture
   ------------------------------------------------------------------------- */
.sec-label { color: var(--ink-faint); margin-bottom: clamp(1.4rem, 3vh, 2.4rem); }
.sec-head  { font-size: var(--t-xl); margin-bottom: 1.2rem; text-wrap: balance; }
.sec-lede  { color: var(--ink-soft); }

/* The per-character rise. Chars are clipped by their line box and never drop
   to opacity 0, so the text is readable even if JS never runs.

   The clip is what eats descenders. At line-height 0.92 the line box is
   SHORTER than the glyphs, so overflow:hidden cut the tails off g, j, p, q and
   y - measured at 13-24px depending on size. The fix is to grow the clip box
   downward and pull the same distance back out of the layout, so there is room
   for the ink and nothing moves. Do not remove one half of this pair. */
[data-rise] .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.24em;
  margin-bottom: -0.24em;
}
[data-rise] .char { display: inline-block; will-change: transform; }

/* ---------------------------------------------------------------------------
   STATEMENT
   ------------------------------------------------------------------------- */
.statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 7rem) clamp(2rem, 7vw, 9rem);
  align-items: start;
}
.statement__head {
  font-size: clamp(3rem, 7.2vw, 7.2rem);
  grid-row: span 2;
  position: sticky; top: 22vh;
}
.statement__body { color: var(--ink-soft); }
.statement__facts {
  grid-column: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.statement__facts dt { margin-bottom: 0.6rem; color: var(--ink-faint); }
.statement__facts dd { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2.3rem); }

/* ---------------------------------------------------------------------------
   MARQUEE · direction reverses with scroll direction
   ------------------------------------------------------------------------- */
.marquee { overflow: hidden; user-select: none; padding-block: clamp(1rem, 3vh, 2.4rem); }
.marquee__track {
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 4rem);
  width: max-content;
  will-change: transform;
}
.marquee__item {
  font-size: clamp(3rem, 9vw, 9rem);
  white-space: nowrap;
  color: var(--ink);
}
.marquee__sep {
  font-size: clamp(0.8rem, 1.6vw, 1.4rem);
  color: var(--amber);
  transform: translateY(-0.35em);
}

/* ---------------------------------------------------------------------------
   APERTURE · image arrives through an arch, the arch opens to full bleed
   ------------------------------------------------------------------------- */
.aperture { margin: clamp(2rem, 6vh, 5rem) 0 0; }
.aperture__frame {
  position: relative;
  height: clamp(420px, 78vh, 900px);
  overflow: hidden;
  /* clip-path is set from JS and scrubbed. This static fallback is a real
     arch too, so a no-JS reader still gets the composition, not a rectangle. */
  clip-path: inset(0 22% 0 22% round 46% 46% 0 0 / 34% 34% 0 0);
}
.aperture__frame img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%;
}
.filigree {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.filigree path {
  fill: none;
  stroke: color-mix(in oklab, var(--bone) 62%, transparent);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.aperture__cap {
  margin-top: 1.2rem;
  padding-inline: var(--gutter);
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   NOTES
   ------------------------------------------------------------------------- */
.notes { margin-top: clamp(3rem, 9vh, 7rem); }
.notes__list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
}
.note { padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.note__n { color: var(--amber); margin-bottom: 1rem; }
.note__h { font-size: var(--t-md); margin-bottom: 0.8rem; line-height: 1.15; }
.note__p { color: var(--ink-soft); font-size: var(--t-small); line-height: 1.62; }

/* ---------------------------------------------------------------------------
   RESIDENCES / BAYS
   ------------------------------------------------------------------------- */
.bays { margin-top: clamp(2.5rem, 7vh, 5rem); }
.bays__plate { position: relative; }
.bays__plate img {
  width: 100%; height: clamp(360px, 62vh, 760px);
  object-fit: cover; object-position: 50% 58%;
}
.bays__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.bays__overlay path {
  fill: color-mix(in oklab, var(--shadow) 62%, transparent);
  stroke: none;
  transition: fill 0.45s var(--ease-settle);
}
.bays__overlay path.is-lit { fill: transparent; }

.bays__list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
}
.bay + .bay { border-left: 1px solid var(--rule); }
.bay button {
  width: 100%;
  display: grid; gap: 0.7rem;
  padding: clamp(1.2rem, 3vh, 2.2rem) clamp(1rem, 2vw, 1.8rem);
  min-height: 44px;
  text-align: left;
  transition: background var(--dur-tap) var(--ease-settle);
}
@media (hover: hover) {
  .bay button:hover { background: color-mix(in oklab, var(--amber) 12%, transparent); }
}
.bay.is-active button { background: color-mix(in oklab, var(--amber) 18%, transparent); }
.bay__n { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; }
.bay__meta { display: grid; gap: 0.25rem; }
.bay__addr { color: var(--ink-faint); }
.bay__stat { font-size: var(--t-small); color: var(--ink-soft); }
.bay__price { font-size: var(--t-small); letter-spacing: 0.04em; }
.bays__note {
  margin-top: 1.2rem; padding-inline: var(--gutter);
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
   INSIDE · plates
   ------------------------------------------------------------------------- */
.plates {
  margin-top: clamp(2.5rem, 7vh, 5rem);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.6rem);
  align-items: end;
}
.plate { position: relative; }
/* THE ARCH IS A RULE, NOT A DECORATION.
   Exterior and architectural images are arch-topped, because that is what you
   see of the building from outside. Interiors are cut square, because once you
   are inside you are UNDER the arch rather than looking at it. Applying the
   same rounded top to all of them made four different sections read as one
   repeated shape. */
.plate img {
  width: 100%; height: clamp(220px, 34vh, 400px);
  object-fit: cover;
  border-radius: 2px;
}
.plate--tall img { height: clamp(300px, 48vh, 560px); }
.plate figcaption {
  margin-top: 0.9rem;
  display: grid; gap: 0.2rem;
}
.plate figcaption .label { color: var(--ink-faint); }
.plate__note { font-size: var(--t-small); color: var(--ink-soft); }

/* Second plate row. Deliberately a DIFFERENT column rhythm from the first so
   the two rows read as one contact sheet rather than two identical grids
   stacked on each other. */
.plates--second {
  margin-top: clamp(0.8rem, 1.6vw, 1.6rem);
  grid-template-columns: 1.15fr 1fr 1.15fr;
  align-items: start;
}

/* A legal paragraph is READ, not scanned. The label style (uppercase, 0.22em
   tracking) is right for a two-word caption and actively hostile at 45 words,
   so this one keeps sentence case and normal tracking. */
.disclaimer {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  color: var(--ink-faint);
  max-width: 66ch;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  line-height: 1.72;
  text-transform: none;
}

/* ---------------------------------------------------------------------------
   LINEAGE
   ------------------------------------------------------------------------- */
.lineage__list {
  margin-top: clamp(2.5rem, 7vh, 5rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
}
.lin figure { margin-bottom: 1.4rem; }
.lin img {
  width: 100%; height: clamp(260px, 38vh, 460px);
  object-fit: cover;
  /* architecture: arched */
  border-radius: 48% 48% 2px 2px / 20% 20% 2px 2px;
}
.lin h3 { font-size: var(--t-lg); margin-bottom: 0.35rem; }
.lin__meta { color: var(--amber-deep); margin-bottom: 0.9rem; }
.lin__p { color: var(--ink-soft); font-size: var(--t-small); line-height: 1.62; }

/* ---------------------------------------------------------------------------
   ADDRESS
   ------------------------------------------------------------------------- */
.address__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.address__near {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  border-top: 1px solid var(--rule);
}
.address__near li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.address__near .label { color: var(--ink-faint); }
.address__caveat { margin-top: 1rem; color: var(--ink-faint); }
.address__plate img {
  width: 100%; height: clamp(340px, 58vh, 660px);
  object-fit: cover;
  /* architecture: arched */
  border-radius: 48% 48% 2px 2px / 22% 22% 2px 2px;
}

/* ---------------------------------------------------------------------------
   ENQUIRE
   ------------------------------------------------------------------------- */
.enquire__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.enquire__card {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  font-style: normal;
  display: grid; gap: 0.35rem;
}
.enquire__name { font-size: var(--t-lg); margin-bottom: 0.3rem; }
.enquire__card a { border-bottom: 1px solid var(--rule); }
.enquire__cred { color: var(--ink-faint); font-size: var(--t-small); margin-bottom: 0.4rem; }

.form { display: grid; gap: 1.6rem; }
.field { display: grid; gap: 0.55rem; }
.field label { color: var(--ink-faint); }
.field__opt { text-transform: none; letter-spacing: 0.04em; opacity: 0.7; }
.field input, .field textarea {
  font: inherit; color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  padding: 0.85rem 0.2rem;
  min-height: 44px;
  border-radius: 0;
  transition: border-color var(--dur-tap) var(--ease-settle);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 1px 0 0 var(--amber);
}
.field__err { color: #A33A22; font-size: var(--t-small); }
.field.is-bad input, .field.is-bad textarea { border-color: #A33A22; }

.btn {
  justify-self: start;
  min-height: 52px;
  padding: 0.95rem 2.2rem;
  background: var(--shadow); color: var(--bone);
  border-radius: 44% 44% 4px 4px / 34% 34% 4px 4px;
  font-size: var(--t-label);
  font-variation-settings: "wdth" 114, "wght" 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  transition: background var(--dur-tap) var(--ease-settle),
              transform var(--dur-tap) var(--ease-settle);
}
@media (hover: hover) {
  .btn:hover { background: var(--umber); transform: translateY(-2px); }
}
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

.form__status { min-height: 1.4em; font-size: var(--t-small); color: var(--amber-deep); }
/* Sentence case, normal tracking. The label treatment (uppercase, 0.22em) is
   right for two words and actively hard to read at twenty - the same defect
   the disclaimer had. */
.form__fine {
  color: var(--ink-faint);
  max-width: 52ch;
  font-size: var(--t-small);
  line-height: 1.65;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* ---------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.foot {
  background: var(--shadow);
  color: var(--bone);
  --ink-faint: color-mix(in oklab, var(--bone) 58%, var(--shadow));
  --rule: color-mix(in oklab, var(--bone) 18%, transparent);
  padding-top: clamp(3rem, 9vh, 7rem);
  overflow: hidden;
}
.foot__word {
  text-align: center;
  line-height: 0.8;
  padding-inline: 2vw;
}
.foot__word .display {
  font-size: clamp(3.5rem, 17vw, 19rem);
  color: color-mix(in oklab, var(--bone) 92%, transparent);
  letter-spacing: -0.03em;
}
.foot__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-top: clamp(2.5rem, 7vh, 5rem);
  padding-bottom: 2.5rem;
}
.foot__grid .label { color: var(--ink-faint); margin-bottom: 0.7rem; }
.foot__grid a { border-bottom: 1px solid var(--rule); }
.foot__legal {
  border-top: 1px solid var(--rule);
  padding-block: 1.8rem 3rem;
  display: flex; justify-content: space-between; gap: 2rem; align-items: end;
  color: var(--ink-faint);
  font-size: var(--t-small);
  line-height: 1.65;
}
.foot__legal p:first-child { max-width: 72ch; }
.foot__name { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   AMBIENT BAND
   ------------------------------------------------------------------------- */
.ambient {
  position: relative;
  height: clamp(420px, 78vh, 860px);
  overflow: hidden;
  background: var(--shadow);
  display: grid; place-items: end start;
  isolation: isolate;
}
.ambient__v {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
  z-index: -1;
}
.ambient__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    color-mix(in oklab, var(--shadow) 88%, transparent) 0%,
    color-mix(in oklab, var(--shadow) 34%, transparent) 46%,
    color-mix(in oklab, var(--shadow) 22%, transparent) 100%);
}
.ambient__line {
  color: var(--bone);
  font-size: clamp(1.8rem, 4.4vw, 4.2rem);
  padding: var(--gutter);
  max-width: 18ch;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   THE CHAIN · the site's thesis, drawn
   The copy next to this says Gaudi hung a chain and turned the photograph over.
   Rather than assert that, the page performs it: the curve inverts under the
   reader's own scroll, solved by the same catenary code as every other arch.
   ------------------------------------------------------------------------- */
.chain {
  grid-column: 2;
  margin: clamp(1.5rem, 4vh, 3rem) 0 0;
  display: grid;
  gap: 0.9rem;
}
.chain__svg { width: 100%; height: auto; overflow: visible; }
.chain__axis {
  stroke: var(--rule);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}
.chain__curve {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.75;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
/* the position it came from, left faint so the inversion is legible */
.chain__ghost {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}
.chain__pin { fill: var(--amber); }
.chain__cap { display: grid; gap: 0.2rem; }
.chain__t { color: var(--ink); }
.chain__d { font-size: var(--t-small); color: var(--ink-faint); }

/* ---------------------------------------------------------------------------
   BAY DETAIL · desktop keeps the four columns and reveals below them
   ------------------------------------------------------------------------- */
/* One disclosure mechanism at every width. The panel is never removed from the
   DOM - it is collapsed with grid-template-rows and marked inert, so it leaves
   the tab order and the accessibility tree without a display:none jump.

   The padding lives on the OUTER box, not the inner one. A collapsed 0fr row
   still honours its child's padding, which left 20px of the copy bleeding out
   of every closed card. */
.bay__detail {
  display: grid;
  grid-template-rows: 0fr;
  padding-inline: clamp(1rem, 2vw, 1.8rem);
  padding-bottom: 0;
  transition: grid-template-rows 0.42s var(--ease-settle),
              padding-bottom 0.42s var(--ease-settle);
}
.bay.is-open .bay__detail {
  grid-template-rows: 1fr;
  padding-bottom: clamp(1.2rem, 3vh, 2rem);
}
.bay__inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: 0.9rem;
}
.bay__arch { width: 100%; height: auto; }
.bay__arch path {
  fill: none; stroke: var(--amber); stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.bay__copy { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.6; }
.bay__spec {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem 1rem; margin: 0;
  padding-top: 0.8rem; border-top: 1px solid var(--rule);
}
.bay__spec dt { color: var(--ink-faint); margin-bottom: 0.2rem; }
.bay__spec dd { margin: 0; font-size: 0.98rem; }
.bay__cta {
  justify-self: start;
  min-height: 44px; display: inline-flex; align-items: center;
  font-size: var(--t-label);
  font-variation-settings: "wdth" 112, "wght" 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  padding-block: 0.4rem;
}
@media (hover: hover) { .bay__cta:hover { border-bottom-color: var(--amber); } }