/* Hotel Ops Market look: upscale hotel ownership marketplace.
   Midnight navy, champagne gold, ivory. Real photographs, serif headlines, restrained shadows. */
:root {
  --navy: #11263B; --ink: #172C3F; --gold: #C49A5A; --gold-ink: #8A6420; --ivory: #F7F5F0; --slate: #647383;
  --bg: #F7F5F0; --surface: #ffffff; --paper: #ffffff; --muted: #56667a; --line: #e0dacd;
  --accent: #11263B; --accent-ink: #ffffff; --accent-soft: #efe9dc;
  --ok: #11263B; --ok-soft: #f1e6d1; --warn: #8A6420; --bad: #a3262a; --band: #efebe2;
  --brass: #C49A5A;
  --wall-opacity: 0;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --shadow: 0 12px 32px rgba(17, 38, 59, .09);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1a29; --surface: #11263B; --paper: #11263B; --ink: #F7F5F0; --muted: #b5c0cc; --line: #27415a;
    --accent: #C49A5A; --accent-ink: #11263B; --accent-soft: #17324a; --gold-ink: #d9b87e;
    --ok: #e3c68f; --ok-soft: #1d3a52; --warn: #d9b87e; --bad: #ff8f8f; --band: #0f2133;
    --shadow: 0 12px 32px rgba(0, 0, 0, .35);
  }
}

/* type */
h1, h2, .big { font-family: var(--serif); }
h1 { font-weight: 700; letter-spacing: -.01em; line-height: 1.12; }
h2 { font-weight: 600; letter-spacing: -.005em; margin-top: 34px; }
.big { font-weight: 600; }
a { text-decoration-color: var(--gold); text-underline-offset: 3px; }
.eyebrow, .label { color: var(--gold-ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* top bar */
.topbar { background: var(--navy); border-bottom: 1px solid rgba(196, 154, 90, .45); }
.brand { color: #F7F5F0; font-family: var(--serif); font-weight: 700; letter-spacing: .01em; }
.brand__mark { background: var(--gold); color: var(--navy); font-family: var(--serif); border-radius: 8px; }
.nav a { color: #F7F5F0; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }

/* buttons */
.btn { background: var(--gold); border-color: var(--gold); color: var(--navy); border-radius: 10px; letter-spacing: .01em; }
.btn:hover { filter: none; background: #d3ad70; border-color: #d3ad70; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn--danger:hover { background: var(--bad); color: #fff; }

/* hero with the exterior photograph */
.hero { background: linear-gradient(160deg, #11263B 0%, #1a3a57 100%); color: #F7F5F0; }
.hero h1, .hero .lede, .hero .eyebrow { color: #F7F5F0; }
.hero .eyebrow { color: #e3c68f; }
.hero .lede { color: #dbe2ea; }
.hero .lede--lead { color: #fff; }
.hero h1 em { color: var(--gold); font-style: italic; }
.hero .fine { color: #c3ceda; }
.hero .btn--ghost { color: #F7F5F0; border-color: #F7F5F0; }
.hero .btn--ghost:hover { background: #F7F5F0; color: var(--navy); }
.hero--photo { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 11vw, 140px) 0 clamp(56px, 8vw, 96px); background: var(--navy); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; z-index: -2; }
.hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(17, 38, 59, .93) 0%, rgba(17, 38, 59, .8) 45%, rgba(17, 38, 59, .5) 100%), linear-gradient(0deg, rgba(17, 38, 59, .5), transparent 55%); }
.hero--photo h1 { font-size: clamp(2.2rem, 5.4vw, 3.7rem); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
@media (max-width: 860px) {
  .hero__bg { object-position: 66% 50%; }
  .hero--photo::after { background: linear-gradient(180deg, rgba(17, 38, 59, .86) 0%, rgba(17, 38, 59, .92) 100%); }
}

/* folio card in the hero */
.receipt { border-radius: 14px; border-top: 4px solid var(--gold); box-shadow: 0 18px 44px rgba(0, 0, 0, .28); }
.receipt .stamp { border-color: var(--gold-ink); color: var(--gold-ink); }
.hero .receipt, .hero .receipt h2, .hero .receipt dt, .hero .receipt dd { color: var(--ink); }
.hero .receipt dt { color: var(--muted); }
.hero .receipt .fine { color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero .receipt .stamp { color: var(--gold); border-color: var(--gold); } }

/* sections: ivory, white and one navy */
.band { background: var(--band); padding: clamp(48px, 7vw, 76px) 0; margin-top: 0; }
.band--alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps { padding-top: 56px; padding-bottom: 32px; }
#cover { background: var(--navy); color: #F7F5F0; }
#cover h2 { color: #fff; }
#cover a { color: #e3c68f; }
#cover .card { color: var(--ink); }
#cover .card a { color: var(--accent); }
#cover .card .label { color: var(--gold-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #cover .card a { color: var(--gold); } }

/* cards */
.card, .grid3 li, .levels li, .bid, .offer, .facts div, .ct-form { border-radius: 14px; box-shadow: var(--shadow); border-color: var(--line); }
.card--cta { background: var(--accent-soft); }
.offer { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.offer:hover { transform: translateY(-3px); border-color: var(--gold); }
.num { background: var(--navy); color: var(--gold); font-family: var(--serif); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .num { background: var(--gold); color: var(--navy); } }
.pill--ok { background: var(--ok-soft); color: var(--ok); }
.familiar li { border-left-color: var(--gold); }
.quote { border-left-color: var(--gold); }

/* order tickets, now calm cards */
.ticket { font-family: var(--font-body); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 12px; padding: 16px 18px 20px; box-shadow: var(--shadow); }
.ticket::after { display: none; }
.ticket__no { font-size: .68rem; border-bottom: 1px solid var(--line); }
.ticket__row { display: block; }
.ticket h3 { text-transform: none; letter-spacing: 0; font-size: 1.1rem; }

/* photographs */
.photo { display: block; width: min(100%, var(--nat, 100%)); height: auto; border-radius: 14px; box-shadow: var(--shadow); background: var(--band); }
.photo--flush { margin: 4px 0 18px; }
.stack { display: grid; gap: 20px; justify-items: start; align-content: start; }
.stack > .card { justify-self: stretch; }
.feature { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 788; max-height: 460px; object-fit: cover; border-radius: 16px; margin: 18px 0 28px; box-shadow: var(--shadow); background: var(--band); }
.strip { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.strip li { margin: 0; }
.strip figure { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.strip .photo { width: 100%; aspect-ratio: 318 / 183; object-fit: cover; border-radius: 0; box-shadow: none; }
.strip figcaption { padding: 11px 14px 13px; font: 600 .95rem/1.3 var(--font-body); }
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; }
.mosaic .photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; }
@media (max-width: 860px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 270px)); }
}
@media (max-width: 480px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .strip figcaption { padding: 9px 10px 11px; font-size: .88rem; }
}

/* footer: navy, left-aligned, gold rule */
.foot { margin-top: clamp(48px, 7vw, 80px); background: var(--navy); color: #c9d2dc; border-top: 3px solid var(--gold); padding: 30px 0 38px; text-align: left; }
.foot .tag, .foot .tag a { color: #e8dfcc; }
.foot .giftpop { color: #F7F5F0; }
.foot .giftpop .box { fill: var(--gold); }