/* ═══════════════════════════════════════════════════════════════════════════
   THE BRAND LOCKUP — ONE DEFINITION, FOR EVERY PAGE ON THE SITE

   This file exists because there were three. platform.css carried the lockup
   for pages that load the design system; public/home.html carried a second,
   private copy with a different ratio; and roughly a dozen internal tool pages
   (finance, team, schedule, permits, expenses, vat, brain, amenities, ...) load
   NEITHER, so they were still drawing /cp-mark.png — the monogram §2c confines
   to favicons and icon-only surfaces — beside the word "CitiHome" typed in the
   page's own font, which §3.5 says is never a mark.

   Splitting the lockup out means a page can have the correct brand without
   taking on the whole design system, which is what kept those pages wrong: the
   fix was previously all-or-nothing and nobody was going to restyle a working
   tool page to fix its logo. platform.css @imports this file, so pages that
   load the design system are unaffected and there is still exactly one place
   the geometry is written down.

   Governed by public/brand/logo-usage-manifest.md.
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-brand-lockup {
  --cp-brand-color: currentColor;
  /* 2026-08-05 — Item A. 58% of the surrounding ink measured 2.51:1 for the
     "Affiliate by Concept Plus" line wherever the lockup sits on a dark panel.
     The line is part of the company's legal identity, not decoration, so it
     needs to be readable rather than merely present. 88% keeps it visibly
     secondary to the wordmark above it and clears the bar. */
  --cp-brand-muted: color-mix(in srgb, currentColor 88%, transparent);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  color: inherit;
  line-height: 1 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════════
   THE AFFILIATE LOCKUP — Concept Plus principal, CitiHome at a quarter of its
   height. The founder's rule, and the dimension is his: these are two logotypes
   of different proportions (Concept Plus 4.291 wide to 1 tall, CitiHome 3.976),
   so matching them on width would make them visibly different sizes while the
   numbers agreed. Height is what the eye reads as "how big is this logo".

   ONE NUMBER GOVERNS BOTH. --cp-lk-h is the Concept Plus height; the CitiHome
   height is calc(var(--cp-lk-h) / 4). Changing the lockup's size means changing
   one value, and the quarter cannot drift out of true because it is not written
   down twice — the same discipline that fixed the discount rate and the
   management fee elsewhere in this codebase.
   ════════════════════════════════════════════════════════════════════════════ */
.cp-brand-lockup {
  --cp-lk-h: 44px;                     /* Concept Plus logotype height */
  --cp-lk-cp-w: calc(var(--cp-lk-h) * 4.291);        /* the asset's own aspect */

  /* ── THE RATIO — SETTLED 2026-09-08 ─────────────────────────────────────
     CitiHome's width as a fraction of Concept Plus's. Two written rules
     disagreed about this and BOTH were in this repository:

       .2317  the quarter-of-HEIGHT rule below — what this file has always
              rendered.
       .50    logo-usage-manifest.md §2a, "CitiHome width = 0.50 x Concept
              Plus width"; public/home.html was deliberately moved onto it in
              b5edd3e5, four hours after c6ab7564 wrote the quarter-height rule
              here. Neither was reconciled with the other, which is why
              home.html's header stopped matching every other header on the
              site on 2026-08-17 and stayed that way.

     The founder settled it by supplying a reference image of the lockup he
     wants everywhere and confirming the measurement: .2317. That decision
     supersedes §2a's 0.50 for the CitiHome x Concept Plus lockup, and the
     manifest records the same thing. DO NOT "restore" 0.50 from the manifest
     without a new ruling — that is the exact round trip this comment exists
     to stop.

     It is one number in one place now, so it cannot drift across files again. */
  --cp-lk-factor: .2317;

  --cp-lk-citi-w: calc(var(--cp-lk-cp-w) * var(--cp-lk-factor));
  --cp-lk-citi-h: calc(var(--cp-lk-citi-w) / 3.976); /* the asset's own aspect */

  /* The manifest's 200px Concept Plus minimum wants --cp-lk-h: 46.6px; this
     file has rendered 44px (188.8px wide) since c6ab7564. Raised with the
     founder and left at 44px by his decision, because changing it moves the
     header on every page of the site. */
}

/* Concept Plus — the principal mark. The SVG is fill="currentColor", so it takes
   the header's own ink and needs no per-theme override. */
.cp-brand-lockup .cp-brand-cp {
  display: block !important;
  flex: 0 0 auto !important;
  height: var(--cp-lk-h) !important;
  width: var(--cp-lk-cp-w) !important;
  background: currentColor !important;
  -webkit-mask: url("/brand/concept-plus-logotype.svg") center / contain no-repeat;
  mask: url("/brand/concept-plus-logotype.svg") center / contain no-repeat;
}

/* CitiHome — one quarter of the Concept Plus height, by the rule. */
.cp-brand-lockup .cp-brand-citi {
  display: block !important;
  flex: 0 0 auto !important;
  height: var(--cp-lk-citi-h) !important;
  width: var(--cp-lk-citi-w) !important;
  background: var(--cp-brand-color) !important;
  /* Shape source is the official white CitiHome asset (exact artwork alpha),
     replacing the unofficial cp-word-v2 raster. On dark headers currentColor
     is white, so this renders the white variant literally; on light it takes
     the header's dark ink per colourway law. */
  -webkit-mask: url("/brand/citihome-logotype-white.png") center / contain no-repeat;
  mask: url("/brand/citihome-logotype-white.png") center / contain no-repeat;
}

.cp-brand-lockup .cp-brand-symbol {
  display: grid !important;
  place-items: center;
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

.cp-brand-lockup .cp-brand-symbol img {
  display: block !important;
  width: 42px !important;
  height: 46px !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 5px 13px rgba(184, 95, 61, .22)) !important;
}

.cp-brand-lockup .cp-brand-copy {
  display: flex !important;
  min-width: 0;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit;
  line-height: 1 !important;
}

.cp-brand-lockup .cp-brand-wordmark {
  display: block !important;
  width: 142px !important;
  height: 36px !important;
  margin: 0 !important;
  background: var(--cp-brand-color) !important;
  -webkit-mask: url("/brand/citihome-logotype-white.png") center / contain no-repeat;
  mask: url("/brand/citihome-logotype-white.png") center / contain no-repeat;
}

/* The connector. It carries the whole meaning of the lockup — without it the two
   marks are just two logos sharing a bar — so it is never the thing that gets
   dropped to save room. See the narrow rule below. */
.cp-brand-lockup .cp-brand-affiliate {
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  color: var(--cp-brand-muted) !important;
  font-family: var(--cp-font-display) !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* Two words, two boxes — stacked here, side by side in the narrow rule. What
   stood here was one string broken by a <br> that the narrow rule then hid,
   which joined the words into "AFFILIATEBY" on every phone. */
.cp-brand-lockup .cp-brand-affiliate i {
  display: block !important;
  font-style: normal !important;
}

/* ── NARROW: STACK, DO NOT DROP ──────────────────────────────────────────────
   Below 560px the connector used to be hidden, which left a CitiHome mark beside
   an unexplained Concept Plus mark — two unrelated logos, on the width where most
   guests actually arrive. The founder's instruction is to put them under each
   other instead. The lockup turns vertical, the connector stays, and the quarter
   ratio is untouched because both heights still derive from --cp-lk-h. */
@media (max-width: 560px) {
  .cp-brand-lockup {
    --cp-lk-h: 34px;                 /* smaller, still one number for both marks */
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    white-space: normal;
  }
  .cp-brand-lockup .cp-brand-affiliate {
    font-size: 7px !important;
    letter-spacing: .14em !important;
    text-align: left !important;
  }
  /* "Affiliate by" is two lines only when it sits between the marks; stacked, it
     reads on one — and as two inline boxes it keeps the space between the words
     that hiding a <br> silently deleted. */
  .cp-brand-lockup .cp-brand-affiliate i { display: inline !important; }
  .cp-brand-lockup .cp-brand-affiliate i + i::before { content: "\00a0"; }
  /* Stacked, the label sits under the marks rather than beside them, so the
     vertical hairline it carries in a row would be pointing at nothing. */
  .cp-brand-lockup .cp-brand-label {
    padding-left: 0 !important;
    border-left: 0 !important;
    max-width: 100%;
  }
}

/* ── THE ROLE LABEL ──────────────────────────────────────────────────────────
   The one thing a page's own brand keeps when the runtime rebuilds it: the
   sublabel §2a allows — "DRIVERS", "MY STAY", "HOLIDAY HOMES · DUBAI",
   "Statements & Accounting". It is a label and must never read as a third mark,
   so it is set in the UI font at label size behind a hairline rule, and it is
   the first thing to give way when the header runs out of room — the marks
   themselves never shrink or truncate. */
.cp-brand-lockup .cp-brand-label {
  display: block !important;
  flex: 0 1 auto !important;
  min-width: 0;
  margin: 0 !important;
  padding-left: 11px !important;
  border-left: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  color: var(--cp-brand-muted) !important;
  font-family: var(--cp-font-display) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── COMPACT: MOBILE BARS AND TITLES ─────────────────────────────────────────
   `.cp-brand-compact` is set for `.mobile-brand` / `.mobile-title`, where a
   44px logotype does not fit a phone's title bar. It used to size
   `.cp-brand-symbol` and `.cp-brand-wordmark` — neither of which the runtime
   has ever emitted — so it changed nothing but the connector's font size, and
   mobile bars carried the full-height lockup regardless. It now moves the one
   number the marks derive from, which is the only way to scale them without
   breaking either asset's aspect. */
.cp-brand-lockup.cp-brand-compact {
  --cp-lk-h: 30px;
  gap: 8px !important;
}

.cp-brand-lockup.cp-brand-compact .cp-brand-affiliate {
  font-size: 6px !important;
  letter-spacing: .15em !important;
}

.cp-brand-lockup.cp-brand-compact .cp-brand-label {
  padding-left: 8px !important;
  font-size: 8.5px !important;
  letter-spacing: .12em !important;
}