/* Concept 6: "Mayfair edition" brand pass. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap");

html.mf {
  --background: 40 30% 98%;
  --secondary: 40 18% 95%;
  --border: 38 14% 87%;
  --muted-foreground: 220 8% 42%;
  --mf-brass: #a88f5c;
  --mf-serif: "Cormorant Garamond", "Iowan Old Style", "Times New Roman", serif;
}

/* ---------- Header: slim, logo-led, transparent over the hero ---------- */
html.mf header {
  background: hsl(var(--background) / 0.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border));
  transition: background 0.35s ease, border-color 0.35s ease;
}
html.mf header .h-28 { height: 84px; }
html.mf header img[alt="Brompton Shipping"] { height: 26px !important; width: auto; }
html.mf header nav a {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
html.mf header nav[class*="lg:flex"] { column-gap: 30px; }

html.mf.mf-top header { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.mf.mf-top header nav a { color: hsl(0 0% 100% / 0.72); }
html.mf.mf-top header nav a:hover { color: #fff; }
html.mf.mf-top header button { color: #fff; }

/* ---------- Hero: quieter, serif, one primary + one secondary action ---------- */
html.mf .bf2-hero {
  padding-top: 132px !important;
  background:
    radial-gradient(900px 480px at 85% 0%, hsl(38 35% 45% / 0.10), transparent 65%),
    linear-gradient(180deg, hsl(222 47% 6%) 0%, hsl(222 40% 11%) 100%) !important;
}
html.mf .mf-eyebrow {
  display: flex; align-items: center; gap: 14px; margin: 0 0 30px;
  font: 500 11px/1 "DM Sans", system-ui, sans-serif; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--mf-brass);
}
html.mf .mf-eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; }
html.mf .bf2-hero h1 {
  font-family: var(--mf-serif); font-weight: 500;
  font-size: clamp(46px, 6.6vw, 92px); line-height: 1.0; letter-spacing: -0.012em;
}
html.mf .bf2-hero h1 span { color: hsl(38 16% 70%); }
html.mf .bf2-hero p:not(.mf-eyebrow) { font-size: 18px; font-weight: 300; max-width: 34em; color: hsl(0 0% 100% / 0.68); }
html.mf .bf2-hero a[href="#contact"], html.mf .bf2-hero a[href="#market"] { display: none; }
html.mf .bf2-hero .bf-hero-btn { border-color: hsl(0 0% 100% / 0.3); }

html.mf .bf2-tape { background: hsl(222 47% 4% / 0.75); border-top-color: hsl(0 0% 100% / 0.08); }
html.mf .bf2-tape-label { color: hsl(38 20% 72%); background: linear-gradient(90deg, hsl(222 47% 4%) 72%, transparent); }
html.mf .bf2-tape-label i { width: 20px; height: 1px; border-radius: 0; background: var(--mf-brass); box-shadow: none; animation: none; }
html.mf .bf2-tick { font-size: 12.5px; }

/* ---------- Typography across the site ---------- */
/* Hosted Cormorant only ships old-style figures ("11" reads "I I"), so big counts use a thin sans. */
html.mf { --mf-figures: 200 1em/1 "DM Sans", system-ui, sans-serif; }
html.mf main h1:not(.bf2-hero h1) {
  font-family: var(--mf-serif); font-weight: 500; font-size: clamp(40px, 5vw, 66px); line-height: 1.04; letter-spacing: -0.01em;
}
html.mf main h2 {
  font-family: var(--mf-serif); font-weight: 500; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -0.008em;
}
html.mf #brief h3 { font-family: var(--mf-serif); font-weight: 500; font-size: 32px; }
html.mf #market a > span.tabular-nums { font: var(--mf-figures); font-size: clamp(52px, 5vw, 72px); letter-spacing: -0.03em; }
html.mf #about .text-4xl { font: var(--mf-figures); font-size: 48px; letter-spacing: -0.03em; }
html.mf #market p.uppercase { display: flex; align-items: center; gap: 12px; color: var(--mf-brass); letter-spacing: 0.24em; font-size: 11px; }
html.mf #market p.uppercase::before { content: ""; width: 32px; height: 1px; background: currentColor; }

/* ---------- Drawings: plain ivory, monochrome water ---------- */
html.mf .bf5-art { background-image: none; background-color: hsl(var(--secondary)); }
html.mf svg.bf5 .bf5-wave { stroke: hsl(var(--foreground) / 0.25); }

/* ---------- Finder ---------- */
html.mf .bf-q { font-family: var(--mf-serif); font-weight: 500; font-size: clamp(36px, 4.6vw, 58px); }
html.mf .bf-count { font: var(--mf-figures); font-size: 64px; letter-spacing: -0.03em; }

@media (max-width: 640px) {
  html.mf header .h-28 { height: 68px; }
  html.mf header img[alt="Brompton Shipping"] { height: 21px !important; }
  html.mf .bf2-hero { padding-top: 112px !important; }
  html.mf .mf-eyebrow { margin-bottom: 22px; gap: 10px; font-size: 10px; letter-spacing: 0.16em; white-space: nowrap; }
  html.mf .mf-eyebrow::before { width: 20px; }
  html.mf #about .text-4xl { font-size: 36px; }
}