/* Published by brand/design/port-css.py from brand/design/03-pages/assets/reskin.css. Don't edit. */
/* ==========================================================================
   Ubuntu Legacy™ — RE-SKIN layer (loads after ul.css)
   The old prospectus-identity layout, kept section for section, with only
   fonts, colours and marks changed to Brand Vol. 01.
   slate → charcoal · terracotta → crimson (light) · brass → gold (on charcoal)
   parchment → ivory/white · Cormorant/Karla → Playfair/Mulish
   crest + typed name → brand-team horizontal lockup · seal/pennant/pines → removed
   ========================================================================== */
/* Charcoal context: the old slate bands. Gold carries actions here (4.60:1); crimson never sits on charcoal. */
.on-charcoal{background:var(--ul-charcoal);color:var(--ul-ivory);
  --bg:var(--ul-charcoal);--text:var(--ul-ivory);--heading:var(--ul-ivory);--muted:#C9C4BB;--label:var(--ul-gold);--accent:var(--ul-gold);
  --action:var(--ul-gold);--action-hover:#D9B86E;--on-action:#2A2A2B;--action-soft:#444446;--line:#55555A;--control:#908C85}
.on-charcoal :focus-visible,.on-charcoal .is-focus{outline-color:var(--ul-gold)}
/* Small tracked uppercase, as the old Karla labels (Mulish now) */
.tracked{font:700 .75rem/1.4 var(--ul-font-body);letter-spacing:.16em;text-transform:uppercase}

/* ---------- Header: the old dark bar, now charcoal ---------- */
.oh{position:sticky;top:0;z-index:50;background:#2A2A2B;--bg:#2A2A2B}  /* deeper than charcoal: the emblem's figures are #3A3A3B */
/* Horizontal lockup from the brand team (white wordmark for the dark bar). Clear space: the bar's padding. */
.oh__logo{height:58px;width:auto;flex:none;display:block}
@media (max-width:520px){.oh__logo{height:48px}}
.oh .wrap{display:flex;align-items:center;gap:var(--s-5);min-height:84px}
.oh__brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;color:var(--ul-ivory)}
.oh nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-6)}
.oh nav a:not(.btn){color:var(--ul-ivory);text-decoration:none;padding:var(--s-2) 0;border-bottom:2px solid transparent}
.oh nav a:not(.btn):hover{border-bottom-color:var(--ul-gold)}
.oh .menu-btn{display:none;margin-left:auto}
@media (max-width:1023px){.oh nav{display:none}.oh .menu-btn{display:inline-flex}.oh__name small{display:none}
  .oh nav.is-open{display:flex;position:absolute;inset:84px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--ul-charcoal);padding:var(--s-2) var(--gutter) var(--s-5);border-top:1px solid #55555A}
  .oh nav.is-open a:not(.btn){padding:var(--s-4) 0;border-bottom:1px solid #55555A}.oh nav.is-open .btn{margin-top:var(--s-4)}}

/* ---------- Hero: the white card over the drone photo ---------- */
.hero{position:relative;background:var(--ul-charcoal)}
.hero__photo{position:absolute;inset:0 0 56px 38%;margin:0}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero > .wrap{position:relative;padding-block:var(--s-8) calc(56px + var(--s-8))}
.card{background:var(--ul-white);color:var(--ul-charcoal);width:min(560px,100%);padding:clamp(28px,4vw,56px);display:grid;gap:var(--s-5);justify-items:start;
  --text:var(--ul-charcoal);--heading:var(--ul-charcoal);--muted:#5F5E5C;--label:var(--ul-crimson);--accent:var(--ul-crimson);--action:var(--ul-crimson);--action-hover:var(--ul-crimson-700);--on-action:#fff;--action-soft:var(--ul-ivory);--bg:#fff;--line:#E3DED5}
.card .logo{margin:calc(clamp(28px,4vw,56px) * -1) 0 0 calc(var(--logo-w) * -.15)} /* artwork aligned to the card's text edge */
.card .rule{background:var(--ul-crimson);width:64px}
@media (min-width:521px){.card .btn-row .btn{flex:1}}
.card__sig{display:flex;justify-content:flex-end;width:100%;padding-bottom:var(--s-4);border-bottom:1px solid var(--ul-crimson)}
.card__sig p{font:italic 400 1.375rem/1.3 var(--ul-font-display);color:var(--ul-crimson);text-align:right;max-width:16ch}
.strip{position:absolute;left:0;right:0;bottom:0;min-height:56px;background:rgb(42 42 43 / .92);border-top:1px solid #55555A}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);min-height:56px;padding-block:0}
.strip ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.strip li+li{border-left:1px solid #6A6763;margin-left:var(--s-5);padding-left:var(--s-5)}
.strip em{font:italic 400 1.125rem/1 var(--ul-font-display);color:var(--ul-gold)}
@media (max-width:899px){
  .hero__photo{position:relative;inset:auto;height:300px}
  .hero > .wrap{padding-block:0 var(--s-6);margin-top:-80px}
  .strip{position:static}.strip .wrap{padding-block:var(--s-4)}.strip em{display:none}
  .strip ul{gap:8px 20px}.strip li+li{border-left:0;margin-left:0;padding-left:0}
}

/* ---------- The house: ivory band, list with dotted leaders ---------- */
.house{display:grid;gap:var(--s-7)}
@media (min-width:900px){.house{grid-template-columns:5fr 7fr;gap:var(--s-9);align-items:start}}
.leaders{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.leaders li{display:flex;align-items:baseline;gap:var(--s-3)}
.leaders .k{font:400 1.375rem/1.3 var(--ul-font-display);color:var(--heading)}
.leaders .dots{flex:1;border-bottom:2px dotted var(--accent);opacity:.45;transform:translateY(-4px);min-width:24px}
.leaders .v{font-size:.9375rem;color:var(--muted);text-align:right}
.tlink{font:700 .8125rem/1.4 var(--ul-font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--heading);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:3px}
.tlink:hover{color:var(--accent)}

/* ---------- The setting: charcoal band fading into the photo ---------- */
.setting{position:relative;min-height:640px;display:grid;align-items:center;overflow:hidden}
.setting__photo{position:absolute;inset:0 0 0 48%;margin:0}
.setting__photo img{width:100%;height:100%;object-fit:cover}
.setting__photo::before{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--ul-charcoal),rgb(58 58 59 / 0) 35%)}
.setting .wrap{position:relative;padding-block:var(--s-9);width:100%}
.setting__text{max-width:520px;display:grid;gap:var(--s-5);justify-items:start}
@media (max-width:899px){.setting{display:block}.setting__photo{position:relative;inset:auto;height:280px}.setting__photo::before{background:linear-gradient(to bottom,rgb(58 58 59 / 0) 60%,var(--ul-charcoal))}.setting .wrap{padding-block:var(--s-7) var(--s-8)}}

/* ---------- The rooms: charcoal band, framed "plates" ---------- */
.plates{display:grid;gap:var(--s-7) var(--s-6);grid-template-columns:1fr}
@media (min-width:600px){.plates{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.plates{grid-template-columns:repeat(3,1fr)}}
.plate{margin:0}
.plate__mat{background:var(--ul-ivory);padding:14px;position:relative}
.plate__mat::before,.plate__mat::after{content:"";position:absolute;pointer-events:none;border:1px solid var(--ul-gold)}
.plate__mat::before{inset:5px}.plate__mat::after{inset:9px;opacity:.6}
.plate img{aspect-ratio:1;width:100%;height:auto;object-fit:cover;position:relative;z-index:1}
.plate h3{margin-top:var(--s-5);font-size:1.625rem;color:var(--heading)}
.plate p{color:var(--muted);margin-top:var(--s-2);font-size:1.0625rem}

/* ---------- Closing call to action: charcoal with the old soft glow ---------- */
.close{background:radial-gradient(ellipse at 50% 0%,#4A4A4C 0%,var(--ul-charcoal) 55%);text-align:center}
.close .wrap{padding-block:clamp(80px,10vw,140px);display:grid;justify-items:center;gap:var(--s-6)}
.close__icons{display:flex;gap:var(--s-3);flex-wrap:wrap;justify-content:center}
.close__icons figure{margin:0;display:grid;gap:var(--s-2);justify-items:center}
.close__icons span{width:64px;height:64px;background:var(--ul-ivory);display:grid;place-items:center}
.close__icons img{width:38px;height:38px;object-fit:contain}
.close__icons figcaption{color:var(--ul-gold)}
.close h2{font-size:clamp(3rem,1.8rem + 5vw,6rem);line-height:1.02;color:var(--ul-ivory)}
.close p.lede{max-width:34rem;color:var(--ul-ivory)}

/* ---------- Footer: the old ivory footer, logo instead of the typed name and pines ---------- */
.of{background:var(--ul-white);color:var(--ul-charcoal);border-top:1px solid #E3DED5;--text:var(--ul-charcoal);--muted:#5F5E5C;--label:var(--ul-crimson);--action:var(--ul-crimson)}
.of .wrap{padding-block:var(--s-8) var(--s-6)}
.of__grid{display:grid;gap:var(--s-7)}
@media (min-width:860px){.of__grid{grid-template-columns:1fr 2fr;align-items:start}}
.of__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2) var(--s-5)}
@media (min-width:600px){.of__cols{grid-template-columns:repeat(3,1fr)}}
.of__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.of__cols a{display:inline-block;padding:6px 0;color:var(--ul-charcoal);text-decoration:none}
.of__cols a:hover{color:var(--ul-crimson);text-decoration:underline}
.of__fine{margin-top:var(--s-7);padding-top:var(--s-5);border-top:2px dotted rgb(135 44 39 / .45);display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-content:space-between;align-items:center;color:#5F5E5C}



.of picture{display:block}

/* ==========================================================================
   Header, theme-adaptive (overrides the dark-only bar above)
   Light: white bar, charcoal lockup, crimson actions. Dark: #2A2A2B bar, white lockup, gold actions.
   ========================================================================== */
.oh{--bg:var(--ul-white);background:var(--bg);color:var(--text);border-bottom:1px solid var(--line)}
.oh nav a:not(.btn){color:var(--text)}
.oh nav a:not(.btn):hover,.oh nav a[aria-current=page]{border-bottom-color:var(--action)}
@media (max-width:1023px){.oh nav.is-open{background:var(--bg);border-top-color:var(--line)}.oh nav.is-open a:not(.btn){border-bottom-color:var(--line)}}
.oh__actions .btn--text{color:var(--action)}
/* Logo pairs: one file per ground, swapped by theme (works for prefers-color-scheme AND data-theme) */
.lk-dark{display:none!important}
.rule--accent{background:var(--accent);width:64px}
.close{background-color:var(--ul-charcoal)}

/* ==========================================================================
   Shared pieces for the other pages (prospectus, tour, help, wishlist)
   ========================================================================== */
.oh--slim{position:relative}
.oh--slim .wrap{min-height:72px}
.oh--slim .oh__logo{height:50px}
@media (max-width:520px){.oh--slim .oh__logo{height:42px}}
.oh__actions{margin-left:auto;display:flex;align-items:center;gap:var(--s-4)}
@media (max-width:520px){.oh__actions .hide-sm{display:none}}
.on-charcoal .btn--secondary{background:transparent}

/* Page head on ivory: label → Playfair title → italic standfirst */
.pagehead{padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px)}
.pagehead .display{margin-top:var(--s-4)}
.standfirst{font:italic 400 clamp(1.25rem,1.1rem + .6vw,1.625rem)/1.4 var(--ul-font-display);color:var(--muted);margin:0}

/* Numeral in a ring (parts 01–08) */
.ring{width:48px;height:48px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;font:700 .75rem/1 var(--ul-font-body);letter-spacing:.12em;flex:none}

/* Drop cap */
.dropcap::first-letter{float:left;font:400 4.5rem/.82 var(--ul-font-display);color:var(--accent);margin:.08em .12em 0 0}

/* Thin-line leaders with italic values (prospectus feature lists) */
.lines{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.lines li{display:flex;align-items:baseline;gap:var(--s-3)}
.lines .k{font-size:1.0625rem;color:var(--heading)}
.lines .rl{flex:1;height:1px;background:var(--accent);opacity:.35;min-width:24px;transform:translateY(-4px)}
.lines .v{font:italic 400 1rem/1.3 var(--ul-font-display);color:var(--muted);text-align:right}

/* Pipe-separated tags (Studio | One bed …) */
.pipes{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:var(--s-4) 0 0;border-top:1px solid var(--accent)}
.pipes li+li{border-left:1px solid var(--accent);margin-left:var(--s-4);padding-left:var(--s-4)}
@media (max-width:520px){.frame figcaption{white-space:normal;text-align:center;width:max-content}.pipes{gap:8px 20px}.pipes li+li{border-left:0;margin-left:0;padding-left:0}}

/* Framed photo: charcoal mat, gold double hairline, caption tag */
.frame{margin:0;background:var(--ul-charcoal);padding:16px 16px 52px;position:relative;box-shadow:0 18px 40px rgb(42 42 43 / .18)}
.frame::before,.frame::after{content:"";position:absolute;pointer-events:none;border:1px solid var(--ul-gold)}
.frame::before{inset:6px}.frame::after{inset:10px;opacity:.5}
.frame img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;position:relative;z-index:1}
.frame figcaption{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:1;background:var(--ul-gold);color:#2A2A2B;padding:6px 14px;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;font:700 .6875rem/1.3 var(--ul-font-body);letter-spacing:.16em;text-transform:uppercase}
.frame--tall img{aspect-ratio:4/5}

/* Form / summary card (tour, confirmation, wishlist) */
.pcard{background:var(--ul-white);color:var(--ul-charcoal);padding:clamp(28px,4vw,56px);box-shadow:0 24px 60px rgb(42 42 43 / .14);
  --bg:#fff;--field-bg:#fff;--text:var(--ul-charcoal);--heading:var(--ul-charcoal);--muted:#5F5E5C;--label:var(--ul-crimson);--accent:var(--ul-crimson);
  --action:var(--ul-crimson);--action-hover:var(--ul-crimson-700);--on-action:#fff;--action-soft:var(--ul-ivory);--line:#E3DED5;--control:#8A867F;--focus-color:var(--ul-crimson);--error:var(--ul-crimson);--on-error:#fff}
.pcard .rule{background:var(--ul-crimson);width:64px}

/* Dotted-leader link list with arrow (help) */
.dlinks{list-style:none;margin:0;padding:0;display:grid}
.dlinks a{display:flex;align-items:baseline;gap:var(--s-3);min-height:48px;padding:var(--s-3) 0;color:var(--heading);text-decoration:none;font:400 1.1875rem/1.3 var(--ul-font-display)}
.dlinks a::after{content:"→";color:var(--accent);font-family:var(--ul-font-body);transition:transform var(--dur-fast) var(--ease)}
.dlinks .dots{flex:1;border-bottom:2px dotted var(--accent);opacity:.4;transform:translateY(-4px);min-width:24px}
.dlinks a:hover{color:var(--accent)}
.dlinks a:hover::after{transform:translateX(4px)}

/* Tracked quiet link (gold on charcoal, crimson on light) */
.on-charcoal .tlink{color:var(--ul-ivory)}

/* ==========================================================================
   DARK THEME for the fixed-light pieces (card, footer, pcard, frame)
   DK = applied twice by the build: under prefers-color-scheme and [data-theme="dark"]
   ========================================================================== */

@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .of{background:#2A2A2B;color:var(--ul-ivory);border-top-color:#47474A}
:root:not([data-theme="light"]) .of__cols a{color:var(--ul-ivory)}
:root:not([data-theme="light"]) .of__cols a:hover{color:var(--ul-gold)}
:root:not([data-theme="light"]) .of .tracked{color:var(--ul-gold)!important}
:root:not([data-theme="light"]) .of__fine{color:#B8B3AA;border-top-color:rgb(200 159 69 / .45)}
:root:not([data-theme="light"]) .of__logo{background:transparent;margin-left:-27px}
:root:not([data-theme="light"]) .card,:root:not([data-theme="light"]) .pcard{background:#2A2A2B;color:var(--ul-ivory);outline:1px solid #47474A;box-shadow:none;
  --bg:#2A2A2B;--field-bg:#232324;--text:var(--ul-ivory);--heading:var(--ul-ivory);--muted:#B8B3AA;--label:var(--ul-gold);--accent:var(--ul-gold);
  --action:var(--ul-gold);--action-hover:#D9B86E;--on-action:#2A2A2B;--action-soft:#333334;--line:#47474A;--control:#908C85;--focus-color:var(--ul-gold);
  --selected-bg:#403A2F;--surface-2:#47474A;--disabled-bg:#47474A;--disabled-fg:#B8B3AA;--error:#F2A69D;--on-error:#2A2A2B}
:root:not([data-theme="light"]) .card .tracked{color:#B8B3AA!important}
:root:not([data-theme="light"]) .card .rule,:root:not([data-theme="light"]) .pcard .rule{background:var(--ul-gold)}
:root:not([data-theme="light"]) .card__sig{border-bottom-color:var(--ul-gold)}
:root:not([data-theme="light"]) .card__sig p{color:var(--ul-gold)}
:root:not([data-theme="light"]) .frame{box-shadow:none;outline:1px solid #55555A}
:root:not([data-theme="light"]) .pipes,:root:not([data-theme="light"]) .pipes li+li{border-color:var(--ul-gold)}
:root:not([data-theme="light"]) .lk-light{display:none!important}
:root:not([data-theme="light"]) .lk-dark{display:block!important}
:root:not([data-theme="light"]) .oh{--bg:#2A2A2B;border-bottom-color:#47474A}
}
[data-theme="dark"] .of{background:#2A2A2B;color:var(--ul-ivory);border-top-color:#47474A}
[data-theme="dark"] .of__cols a{color:var(--ul-ivory)}
[data-theme="dark"] .of__cols a:hover{color:var(--ul-gold)}
[data-theme="dark"] .of .tracked{color:var(--ul-gold)!important}
[data-theme="dark"] .of__fine{color:#B8B3AA;border-top-color:rgb(200 159 69 / .45)}
[data-theme="dark"] .of__logo{background:transparent;margin-left:-27px}
[data-theme="dark"] .card,[data-theme="dark"] .pcard{background:#2A2A2B;color:var(--ul-ivory);outline:1px solid #47474A;box-shadow:none;
  --bg:#2A2A2B;--field-bg:#232324;--text:var(--ul-ivory);--heading:var(--ul-ivory);--muted:#B8B3AA;--label:var(--ul-gold);--accent:var(--ul-gold);
  --action:var(--ul-gold);--action-hover:#D9B86E;--on-action:#2A2A2B;--action-soft:#333334;--line:#47474A;--control:#908C85;--focus-color:var(--ul-gold);
  --selected-bg:#403A2F;--surface-2:#47474A;--disabled-bg:#47474A;--disabled-fg:#B8B3AA;--error:#F2A69D;--on-error:#2A2A2B}
[data-theme="dark"] .card .tracked{color:#B8B3AA!important}
[data-theme="dark"] .card .rule,[data-theme="dark"] .pcard .rule{background:var(--ul-gold)}
[data-theme="dark"] .card__sig{border-bottom-color:var(--ul-gold)}
[data-theme="dark"] .card__sig p{color:var(--ul-gold)}
[data-theme="dark"] .frame{box-shadow:none;outline:1px solid #55555A}
[data-theme="dark"] .pipes,[data-theme="dark"] .pipes li+li{border-color:var(--ul-gold)}
[data-theme="dark"] .lk-light{display:none!important}
[data-theme="dark"] .lk-dark{display:block!important}
[data-theme="dark"] .oh{--bg:#2A2A2B;border-bottom-color:#47474A}