/* Self-hosted Fraunces + Inter (assets/fonts/), replacing the fonts.googleapis.com
   <link> that used to render-block first paint. Weights and the opsz axis match the old
   request (Fraunces 400/600/700, Inter 400/500/600); font-display: swap matches the old
   &display=swap. Fraunces has no Cyrillic in this version — Google never served one
   either — so uk headings already fell back to Georgia before this change; Inter's
   cyrillic subset is shipped separately so uk body copy still renders in Inter. Each
   weight below points at the same file per subset because Google itself serves that one
   variable-font file for all three pinned weights. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --green: #2f5d3a;
  --green-deep: #24482d;
  --cream: #faf6ef;
  --card: #ffffff;
  --ink: #23271f;
  /* Darkened from #6f7568 (4.41:1 on --cream, failing WCAG AA's 4.5:1 for normal text) to
     5.03:1 on --cream / 5.41:1 on white — passes while staying visibly lighter than --ink. */
  --muted: #666c60;
  --accent: #c9822f;
  --line: #e7e1d6;
  /* Icons are greyscale: neutral greys only, so no icon competes with the green or the
     accent for attention. --icon is the resting tone, --icon-strong for emphasis,
     --icon-quiet for a de-emphasised state. */
  --icon: #6e6e6e;
  --icon-strong: #3c3c3c;
  --icon-quiet: #a3a3a3;
  --radius: 16px;
  --shadow: 0 10px 40px rgba(35, 39, 31, 0.08);
  --wrap: 1120px;
  /* One gutter for every full-width section. --card-pad-x is the condo card's horizontal
     padding; a card is pulled out by exactly that much so its text lines up with the hero's,
     and the clamp keeps it <= --gutter on small screens so the pull never causes overflow. */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --card-pad-x: clamp(15px, 3vw, 2.2rem);
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'PingFang SC',
    'Microsoft YaHei', sans-serif;
  line-height: 1.6;
}

h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; line-height: 1.15; margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
p { margin: 0; }
.muted { color: var(--muted); }

/* ---- icons (Lucide, from the sprite in index.html) ---- */
/* Sized in em so an icon tracks the type beside it, and stroked in currentColor so it
   takes the grey of whatever it sits in. Never given a fill. */
.ic {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--icon);
}
/* Inline beside text: nudge onto the type's optical centre. */
.condo-address .ic,
.fact-value .ic,
.map-link .ic,
.btn .ic { vertical-align: -0.145em; }
.small { font-size: 0.85rem; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

/* ---- nav ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* The bar keeps a full-bleed background; its contents line up with the condo cards'
     outer border, which sits (card-pad-x + 1px border) outside the text column. Below
     ~1200px that edge is wider than the gutter, so the padding goes to zero rather than
     negative. */
  padding: 0.7rem max(0px, calc(var(--gutter) - var(--card-pad-x) - 1px));
  background: rgba(250, 246, 239, 0.9);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 600px) {
  /* On a phone the card runs edge to edge, so that border is only a few pixels from the
     screen and the brand would sit on the very edge. Fall back to the gutter, which is
     exactly where the card's own text starts. */
  .nav { padding-inline: var(--gutter); }
}
.nav-inner {
  max-width: calc(var(--wrap) + 2 * (var(--card-pad-x) + 1px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 600; }
.brand-mark { display: inline-flex; }
/* The mark carries its own stroke weight on its 48x48 grid; only size and colour here. */
.ic-brand { width: 1.5rem; height: 1.5rem; color: var(--icon-strong); }
.footer .ic-brand { color: rgba(255, 255, 255, 0.82); }
.brand-name { font-family: 'Fraunces', serif; font-size: 1.25rem; }
.nav-links { display: flex; gap: 1.2rem; margin-left: auto; flex-wrap: wrap; }
@media (max-width: 600px) {
  /* Brand + condo links + three language buttons cannot share one row on a phone. Give the
     links their own line and keep the switcher in the top-right corner beside the brand,
     which is where people reach for it. The breakpoint matches .nav's padding one above:
     one "phone header" width rather than two that disagree. Measured natural wrapping puts
     all three on one row only from ~540px, and iOS Safari's wider text metrics push that
     higher still, so 600px leaves margin rather than trusting a hairline. */
  .nav-links { order: 3; width: 100%; margin-left: 0; justify-content: flex-start; }
  /* .nav-links gives up its auto margin above, so nothing else pushes the switcher right. */
  .lang { margin-left: auto; }
}
.nav-links a { text-decoration: none; font-size: 0.95rem; color: var(--ink); opacity: 0.8; }
.nav-links a:hover { opacity: 1; color: var(--green); }
.lang { display: flex; gap: 0.25rem; }
.lang button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.lang button.active { background: var(--green); color: #fff; border-color: var(--green); }

/* ---- buttons ---- */
.btn {
  display: inline-block;
  text-decoration: none;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn.sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-deep); }
.btn-ghost { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.btn-ghost:hover { background: var(--green); color: #fff; }

/* ---- hero ---- */
.hero {
  padding: clamp(1.8rem, 3.6vw, 2.6rem) var(--gutter);
  background:
    radial-gradient(1200px 500px at 70% -10%, rgba(47, 93, 58, 0.10), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--cream) 100%);
}
.hero-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.433fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.hero-copy { min-width: 0; }
/* Same card treatment as a condo block, and pulled right by the same amount a condo card
   is, so the two right edges land on one line. */
.hero-figure {
  --fig-pad: 15px;
  position: relative;
  margin: 0 calc(-1 * (var(--card-pad-x) + 1px)) 0 0;
  padding: var(--fig-pad);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  /* cookie.webp is 1400x1400: reserve the square box before it loads so nothing shifts
     when it does. */
  aspect-ratio: 1;
  border-radius: calc(var(--radius) - 8px);
}
@media (max-width: 820px) {
  /* Stacked: the photo follows the copy rather than squeezing beside it. It still runs out
     to the condo cards' edge, and is cropped to a letterbox so a square photo does not
     take over the screen. */
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-figure img { aspect-ratio: 3 / 2; object-fit: cover; }
}
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 600; max-width: 14ch; }
.hero .lead { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--muted); max-width: 46ch; margin: 0.8rem 0 1.2rem; }
.hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* ---- section heads ---- */
/* Both are nav targets, and the header is sticky — without this the heading you jumped
   to lands underneath it. .condo carries the same offset for the per-condo anchors. */
.portfolio,
.invest { scroll-margin-top: 80px; }
/* No top padding: the hero's bottom padding already sets the gap under the buttons, and
   doubling up made the space below the hero nearly twice the space above it. */
.portfolio { padding: 0 var(--gutter) clamp(1.4rem, 2.6vw, 1.9rem); }

/* ---- condos ---- */
.condos { max-width: var(--wrap); margin: 0 auto; display: grid; gap: 2.5rem; }
.condo {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 3vw, 2.2rem) var(--card-pad-x);
  /* Hang the card's padding outside the content column so its text aligns with the hero.
     The 1px is the card's own border, which sits inside the margin. */
  margin-inline: calc(-1 * (var(--card-pad-x) + 1px));
  scroll-margin-top: 80px;
}
.condo-head { margin-bottom: 0.2rem; }
/* This margin and .condo-strap's margin-top collapse against each other, so the gap is the
   larger of the two, not their sum — set it here and match the Neighbourhood heading. */
.condo-title { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.condo-head h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin: 0; }
/* Tagline and address share one line, so the address reads as part of the same strap
   rather than a third stacked row. They wrap independently when the card gets narrow. */
.condo-strap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.55rem; margin-top: 0.3rem; }
.condo-tagline, .condo-address { margin: 0; }
.condo-tagline, .condo-address { color: var(--green); font-style: italic; }
/* Separates the two halves of the strap. It hangs off the address rather than leading the
   tagline so that when the strap wraps it trails the first line instead of stranding at the
   head of the second. Two things make the dot stick to the address's own last line, tested
   at 320-1024px against all three real addresses (some wrap to two lines inside the link,
   most don't):
   1. The pseudo's content opens with a no-break space (U+00A0), not a plain margin, so the
      browser can never break the line between the address's last word and the dot.
   2. .condo-address a below is display:inline, not inline-flex. inline-flex would make the
      link an atomic inline box — despite (1), Chrome still measured an atomic inline box as
      a unit separate from the pseudo's text flow and put the dot on a line of its own the
      moment the address itself wrapped inside that box (verified: it reproduced at 320px
      and 360px). Plain inline content shares one continuous text flow with the ::after
      content, so the NBSP rule applies where it actually matters — after the address's real
      last character, wherever that lands.
   The dot's own padding replaces the old margin-left for the gap on that side; .condo-strap's
   column-gap (0.55rem) still supplies the matching gap on the dot's right, toward the
   tagline, which remains free to wrap to its own line. */
.condo-address:has(+ .condo-tagline)::after { content: '\00a0\00b7'; padding-left: 0.4rem; }
/* Reads as the address, not as a link, until you point at it. display:inline (not
   inline-flex — see the comment above) so it shares one text flow with the trailing dot;
   the icon's alignment comes from .condo-address .ic's vertical-align below. */
.condo-address a {
  display: inline;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.condo-address a:hover,
.condo-address a:focus-visible { color: var(--green-deep); border-bottom-color: currentColor; }
.condo-address .ic { margin-right: 0.35rem; }
.status {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}
.status.available { background: #e7f3ea; color: #1f7a3d; border: 1px solid #b9e0c4; }
/* color darkened from #8a8577 (3.20:1 on this pill's background, failing 4.5:1) to
   4.84:1 on #f1efe9. */
.status.leased { background: #f1efe9; color: #6c685d; border: 1px solid var(--line); }

/* ---- facts ---- */
.facts {
  display: grid;
  /* 146px is the widest fact ("STORAGE LOCKER") plus a little slack, so all seven sit on
     one row from ~1225px up and wrap below it. */
  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
  gap: 0.8rem 0.55rem;
  margin: 1.6rem 0;
  padding: 1.2rem;
  background: var(--cream);
  border-radius: 12px;
}
.fact { display: flex; gap: 0.45rem; align-items: flex-start; }
/* Top-aligned with the label's text, not centred against the whole two-line block. The
   nudge puts the glyph's optical centre on the label's cap height. */
.fact-ic { width: 1.25rem; height: 1.25rem; margin-top: -0.1rem; }
.fact-body { display: flex; flex-direction: column; }
.fact-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.fact-value { font-weight: 600; font-size: 0.82rem; }
.fact-value { display: flex; align-items: center; gap: 0.3rem; }
/* Greyscale, so included/not-included is told by the glyph — a tick or a cross — and by
   weight, rather than by a green/red pair that colour-blind readers cannot separate. */
.fact-value.no { color: var(--muted); font-weight: 500; }
.fact-value .ic-mark { width: 1.05em; height: 1.05em; stroke-width: 2.5; color: var(--icon-strong); }
.fact-value.no .ic-mark { stroke-width: 2; color: var(--icon-quiet); }

/* ---- sheet prose: description + amenity chips ---- */
.condo-desc { margin-top: 1.1rem; }
.condo-desc p { color: var(--muted); line-height: 1.7; }
.condo-desc p + p { margin-top: 0.7rem; }

.amenities { margin: 0 0 1.6rem; }
.amenities h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li {
  font-size: 0.82rem;
  color: var(--green-deep);
  background: #eef3ea;
  border: 1px solid #d8e4d4;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
}
/* Last chip is a link out, so it is outlined rather than filled — an action, not a fact. */
.chips .chip-link { background: transparent; border-color: var(--green); padding: 0; }
.chips .chip-link a {
  display: inline-flex;
  align-items: center;
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}
.chips .chip-link a:hover,
.chips .chip-link a:focus-visible { background: var(--green); color: #fff; }

/* ---- media: map + gallery ---- */
.condo-media { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 1.6rem; }
/* A grid item defaults to min-width:auto, so it refuses to shrink below its content's
   min-content width. The gallery track is one long non-wrapping row of images (~4600px),
   which pushed the whole card wider than a phone screen. Letting these items shrink to 0
   keeps the card at viewport width and leaves the track to scroll inside it, as intended. */
.condos > *,
.condo-media > *,
.gallery-wrap,
.gallery { min-width: 0; }
@media (max-width: 820px) { .condo-media { grid-template-columns: 1fr; } }
.map-wrap { display: flex; flex-direction: column; }
.map-wrap iframe { width: 100%; height: 320px; border: 0; border-radius: 12px; }
.map-link { margin-top: 0.5rem; font-size: 0.85rem; color: var(--green); text-decoration: none; font-weight: 600; }
/* The arrow belongs to the link, so it inherits the link's colour rather than the icon grey. */
.ic-ext { width: 0.85em; height: 0.85em; margin-left: 0.3rem; color: inherit; }
.media-title { font-size: 1.05rem; margin-bottom: 0.6rem; }
.gallery { position: relative; }
.gal-track {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 12px;
  height: 320px;
  scrollbar-width: thin;
}
.gal-track img { height: 320px; width: auto; object-fit: cover; border-radius: 12px; scroll-snap-align: start; flex: 0 0 auto; }
.gal-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--icon-strong);
}
.gal-btn .ic { width: 1.1rem; height: 1.1rem; stroke-width: 2; }
.gal-btn.prev { left: 8px; }
.gal-btn.next { right: 8px; }
.gallery-empty { height: 320px; display: flex; align-items: center; justify-content: center; background: var(--cream); border-radius: 12px; }

/* ---- neighborhood ---- */
.neighborhood { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.neighborhood h3 { font-size: 1.3rem; margin-bottom: 0.85rem; }
.nb-summary { color: var(--muted); max-width: 70ch; margin-bottom: 1.2rem; }
.nb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.6rem; }
@media (max-width: 720px) { .nb-grid { grid-template-columns: 1fr; } }
.nb-row { display: flex; gap: 0.7rem; }
.nb-ic { width: 1.15rem; height: 1.15rem; margin-top: 0.05rem; }
.nb-row h4 { font-size: 0.95rem; font-family: 'Inter', sans-serif; font-weight: 600; margin-bottom: 0.15rem; }
.nb-row p { font-size: 0.92rem; color: var(--muted); }
.nb-list { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; color: var(--muted); }
.nb-list li + li { margin-top: 0.45rem; }
/* The dash is inline, not a hanging marker, so the list keeps no left padding: the rule
   starts at the block's left edge and wrapped lines run back to that same edge. */
.nb-list li::before {
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 1.75px;
  margin-right: 0.45rem;
  vertical-align: 0.28em;
  background: var(--icon-quiet);
}

/* ---- invest ---- */
.invest { background: var(--green); color: #fff; margin-top: 3rem; padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem); }
.invest-inner { max-width: var(--wrap); margin: 0 auto; }
.invest .eyebrow { color: #d7b487; }
.invest h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); max-width: 18ch; }
/* Two stacked paragraphs: even spacing between them, the 2rem breathing room only
   before the button. */
.invest .lead { color: rgba(255,255,255,0.86); max-width: 60ch; margin: 1rem 0 0; }
.invest .lead:last-of-type { margin-bottom: 2rem; }
.invest .btn-primary { background: #fff; color: var(--green-deep); }
.invest .btn-primary:hover { background: var(--cream); }

/* ---- footer ---- */
.footer { background: var(--green-deep); color: rgba(255,255,255,0.85); padding: 3rem clamp(1rem, 4vw, 2.5rem); }
.footer-inner { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.footer .brand-name { color: #fff; }
.footer a { color: #fff; }
.footer .small { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1rem; }
/* .muted (color: var(--muted), a dark grey) overrides the footer's own light inherited
   color for the two <p class="muted"> inside it. rgb(102,108,96) on the footer's
   rgb(36,72,45) is 1.90:1 — fails WCAG AA. Restore the footer's light text here so it
   stays at ~7.96:1 (rgba(255,255,255,0.85) over rgb(36,72,45)). */
.footer .muted { color: rgba(255, 255, 255, 0.85); }