/* ============================================================
   AURUM HOUSE — composition
   A five-property group. The organising idea is a live index:
   filter by city, sort by date, see availability. Editorial
   surface over a directory skeleton.
   ============================================================ */

.skip { position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--paper); color: var(--ink-950); padding: .75rem 1.25rem;
  font-family: var(--mono); font-size: var(--step--1); }
.skip:focus { left: 1rem; top: 1rem; }

/* ============ HEADER ============ */
.site-head {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  padding-block: var(--s-3); border-bottom: 1px solid transparent;
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
}
.site-head.is-stuck {
  background: color-mix(in oklab, var(--ink-950) 90%, transparent);
  backdrop-filter: blur(14px); border-bottom-color: var(--rule-soft);
  padding-block: var(--s-2);
}
.site-head__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-size: var(--step-1); letter-spacing: .04em; }
.brand__mark { width: 1.6em; height: 1.6em; flex: none; color: var(--brass); }
.brand small { font-family: var(--mono); font-size: .52em; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); align-self: center; }
.nav { display: flex; gap: clamp(1.1rem, 2.2vw, 2.2rem); align-items: center; }
.nav a { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-dim); transition: color .35s var(--ease); }
.nav a:hover { color: var(--brass-lt); }
.head-actions { display: flex; align-items: center; gap: var(--s-2); }

.burger { display: none; width: 2.7rem; height: 2.7rem; border: 1px solid var(--rule); background: transparent; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 50%; width: 1.05rem; height: 1px; background: var(--ink); transform: translateX(-50%); transition: transform .45s var(--ease); }
.burger span:nth-child(1) { top: .95rem; }
.burger span:nth-child(2) { bottom: .95rem; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 50%; transform: translate(-50%,-50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { bottom: 50%; transform: translate(-50%,50%) rotate(-45deg); }

.drawer { position: fixed; inset: 0; z-index: 99; background: var(--ink-900); display: grid; align-content: center; padding: var(--gutter); clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease); pointer-events: none; }
.drawer.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.drawer a { font-family: var(--serif); font-size: var(--step-3); padding-block: .2em; border-bottom: 1px solid var(--rule-soft); opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.drawer.is-open a { opacity: 1; transform: none; }
.drawer.is-open a:nth-child(1) { transition-delay: .10s; }
.drawer.is-open a:nth-child(2) { transition-delay: .16s; }
.drawer.is-open a:nth-child(3) { transition-delay: .22s; }
.drawer.is-open a:nth-child(4) { transition-delay: .28s; }
@media (max-width: 64rem) { .nav, .head-actions .btn { display: none; } .burger { display: block; } }

/* ============ HERO — typographic, no photo ============ */
.hero { padding-top: calc(var(--s-7) + 3rem); padding-bottom: var(--s-6); position: relative; }
.hero__title { font-family: var(--serif); font-weight: 300; font-size: var(--step-4); line-height: .96; letter-spacing: -.025em; margin-block: var(--s-3) var(--s-4); max-width: 18ch; }
.hero__title em { font-style: italic; color: var(--brass-lt); }
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span { display: block; transform: translateY(105%); animation: up 1.05s var(--ease) forwards; }
.hero__title .ln:nth-child(1) > span { animation-delay: .12s; }
.hero__title .ln:nth-child(2) > span { animation-delay: .22s; }
.hero__title .ln:nth-child(3) > span { animation-delay: .32s; }
@keyframes up { to { transform: none; } }

.hero__foot { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: end; padding-top: var(--s-4); border-top: 1px solid var(--rule-soft); opacity: 0; animation: fade .9s var(--ease) .8s forwards; }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* live clock strip — the group across timezones */
.clocks { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); }
.clocks div { display: grid; gap: .2rem; }
.clocks .city { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.clocks .time { font-family: var(--serif); font-size: var(--step-1); font-variant-numeric: tabular-nums; }

/* ============ PROPERTY INDEX ============ */
.index-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filters button {
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .12em;
  text-transform: uppercase; padding: .55em 1.1em; background: transparent;
  border: 1px solid var(--rule-soft); color: var(--ink-faint); cursor: pointer;
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.filters button:hover { color: var(--ink); border-color: var(--rule); }
.filters button[aria-pressed="true"] { color: var(--ink-950); background: var(--brass); border-color: var(--brass); }

.props { border-top: 1px solid var(--rule); }
.prop {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1.2fr) minmax(0, 1fr) 9rem 8.5rem;
  gap: var(--s-3);
  align-items: center;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
  transition: background .45s var(--ease), opacity .4s var(--ease);
}
.prop:hover { background: var(--bg-raised); }
.prop[hidden] { display: none; }
.prop__thumb { width: 5.5rem; height: 4rem; object-fit: cover; filter: saturate(.85); transition: filter .6s var(--ease); }
.prop:hover .prop__thumb { filter: saturate(1); }
.prop__name { font-family: var(--serif); font-size: var(--step-1); }
.prop__city { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: .25rem; }
.prop__note { color: var(--ink-dim); font-size: var(--step-0); }
.prop__rooms { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-faint); letter-spacing: .1em; }
.prop__rate { font-family: var(--serif); font-size: var(--step-1); text-align: right; white-space: nowrap; }
.prop__rate small { display: block; font-family: var(--mono); font-size: var(--step--1); color: var(--ink-faint); letter-spacing: .08em; white-space: nowrap; }
.prop__link::after { content: ""; position: absolute; inset: 0; }
.prop__status { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); }
.prop__status--soon { color: var(--brass); }
.prop__status--full { color: var(--grey-500); }
@media (max-width: 68rem) {
  .prop { grid-template-columns: 4.5rem minmax(0,1fr) auto; row-gap: var(--s-1); }
  .prop__note { grid-column: 2 / -1; }
  .prop__rooms { grid-column: 2 / 3; }
  .prop__rate { grid-column: 3 / 4; grid-row: 1; }
}
@media (max-width: 40rem) {
  .prop { grid-template-columns: 1fr auto; }
  .prop__thumb { grid-column: 1 / -1; width: 100%; height: 9rem; }
}

/* ============ FEATURE (one property, large) ============ */
.feature { position: relative; min-height: 80svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.feature__media { position: absolute; inset: 0; z-index: -2; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink-950) 5%, color-mix(in oklab, var(--ink-950) 50%, transparent) 40%, transparent 70%),
    linear-gradient(to right, color-mix(in oklab, var(--ink-950) 70%, transparent), transparent 65%);
}
.feature__inner { padding-block: var(--s-6); }
.feature__body { max-width: 46ch; }

/* ============ EDITORIAL / JOURNAL ============ */
.journal { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.post { display: grid; gap: var(--s-2); align-content: start; }
.post__fig { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-card); }
.post__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.post:hover .post__fig img { transform: scale(1.04); }
.post__k { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.post__t { font-family: var(--serif); font-size: var(--step-1); }
.post__d { color: var(--ink-dim); font-size: var(--step-0); }

/* ============ MEMBERSHIP ============ */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0; border: 1px solid var(--rule-soft); margin-top: var(--s-5); }
.tier { padding: var(--s-4); border-right: 1px solid var(--rule-soft); display: grid; gap: var(--s-2); align-content: start; }
.tier:last-child { border-right: 0; }
.tier--mid { background: var(--bg-raised); }
.tier__n { font-family: var(--serif); font-size: var(--step-2); }
.tier__p { font-family: var(--mono); font-size: var(--step--1); color: var(--brass); letter-spacing: .1em; }
.tier ul { list-style: none; padding: 0; display: grid; gap: .55rem; margin-top: var(--s-2); }
.tier li { color: var(--ink-dim); font-size: var(--step-0); padding-left: 1.1rem; position: relative; }
.tier li::before { content: "—"; position: absolute; left: 0; color: var(--ink-faint); }
@media (max-width: 52rem) { .tier { border-right: 0; border-bottom: 1px solid var(--rule-soft); } .tier:last-child { border-bottom: 0; } }

/* ============ FOOTER ============ */
.site-foot { border-top: 1px solid var(--rule-soft); padding-block: var(--s-6) var(--s-4); margin-top: var(--s-7); }
.foot-grid { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,.7fr)); gap: var(--s-5) var(--s-4); }
.foot-grid h4 { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-3); }
.foot-grid ul { list-style: none; padding: 0; display: grid; gap: .65rem; }
.foot-grid a { color: var(--ink-dim); }
.foot-grid a:hover { color: var(--brass-lt); }
.foot-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--rule-soft); font-family: var(--mono); font-size: var(--step--1); color: var(--ink-faint); }
@media (max-width: 62rem) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .foot-grid { grid-template-columns: 1fr; } }

.demo-tag {
  position: fixed; right: 0; bottom: 0; z-index: 120;
  background: color-mix(in oklab, var(--ink-900) 92%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--rule-soft); border-right: 0; border-bottom: 0;
  padding: .6rem 1rem; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint);
  transition: color .4s var(--ease), transform .5s var(--ease), opacity .4s var(--ease);
}
.demo-tag.is-idle { transform: translateY(85%); opacity: .55; }
.demo-tag:hover { color: var(--ink); transform: translateY(0); opacity: 1; }
.demo-tag b { color: var(--brass); font-weight: 400; }
@media (max-width: 42rem) { .demo-tag { font-size: .6rem; padding: .5rem .75rem; } }