/* Self-hosted fonts (CSP: font-src self). OFL licenses in /static/fonts/. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-display: swap; font-weight: 500; src: url("/static/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-display: swap; font-weight: 600; src: url("/static/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-display: swap; font-weight: 700; src: url("/static/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/static/fonts/geist-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/static/fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations"); }

/* Layout: editorial single column; brand-green bands carry the identity (header, hero, fuel,
   StreetTea); everything informational is set as ledgers on warm paper, hairlines instead of boxes.
   Brand: circle green #229059, wordmark green #0F674E, script "Millwood" + condensed "MARKET". */
:root {
  --green: #229059;        /* the circle */
  --forest: #0f674e;       /* the wordmark */
  --forest-deep: #0a4a38;
  --paper: #f6f4ec;
  --paper-2: #ebe8dc;
  --ink: #10241c;
  --ink-2: #4d5f56;
  --mint: #bfe8cf;         /* numerals and accents on green */
  --sun: #f2c14e;          /* live / highlight, fills only */
  --rule: rgba(16, 36, 28, 0.16);
  --brand-ink: #0f674e;     /* brand green used as text on paper */
  --brand-pop: #229059;
  --on-green: #ffffff;
  --on-green-2: rgba(255, 255, 255, 0.72);
  --on-green-rule: rgba(255, 255, 255, 0.24);
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --green: #1f7f50; --forest: #0d4f3c; --forest-deep: #08392b;
    --paper: #0c1612; --paper-2: #13211b; --ink: #e8efe9; --ink-2: #9db3a7;
    --mint: #a9e3c1; --sun: #f2c14e; --rule: rgba(232, 239, 233, 0.16); --brand-ink: #a9e3c1; --brand-pop: #5cc98d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --green: #1f7f50; --forest: #0d4f3c; --forest-deep: #08392b;
  --paper: #0c1612; --paper-2: #13211b; --ink: #e8efe9; --ink-2: #9db3a7;
  --mint: #a9e3c1; --sun: #f2c14e; --rule: rgba(232, 239, 233, 0.16); --brand-ink: #a9e3c1; --brand-pop: #5cc98d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type: condensed display echoes MARKET ---------- */
.display, h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
h1 { font-size: clamp(3.4rem, 11vw, 9.5rem); line-height: 0.86; font-weight: 700; letter-spacing: -0.015em; text-transform: uppercase; }
h2 { font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 0.9; font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; }
h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; }
p { margin: 0; max-width: 62ch; }
.lede { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45; max-width: 46ch; }
.label {
  font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand-ink);
}
.muted { color: var(--ink-2); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* green surfaces flip text colors */
.on-green { background: var(--green); color: var(--on-green); }
.on-forest { background: var(--forest); color: var(--on-green); }
.on-green .label, .on-forest .label { color: var(--mint); }
.on-green .muted, .on-forest .muted { color: var(--on-green-2); }

/* ---------- header: brand green, white wordmark ---------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: var(--green); color: var(--on-green);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.mark { display: block; text-decoration: none; flex: none; }
.mark img { height: 44px; width: auto; }
.nav { display: flex; gap: clamp(14px, 2.4vw, 32px); flex-wrap: wrap; justify-content: flex-end; }
.nav a { text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-green-2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--on-green); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--sun); }
@media (max-width: 560px) { .nav a.opt { display: none; } .mark img { height: 36px; } }

/* ---------- sections ---------- */
section { padding-block: clamp(64px, 10vw, 140px); }
.rule-top { border-top: 1px solid var(--rule); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
@media (min-width: 900px) { .sec-head { grid-template-columns: 4fr 8fr; align-items: end; } }
.band { background: var(--paper-2); }

/* full-bleed photo */
.bleed { width: 100%; overflow: hidden; }
.bleed img { width: 100%; height: clamp(320px, 62vw, 760px); object-fit: cover; }
.caption { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 12px; border-bottom: 1px solid var(--rule); }

/* ---------- ledger rows ---------- */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--brand-ink); }
.ledger li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding-block: 14px; border-bottom: 1px solid var(--rule);
}
.ledger .what { min-width: 0; }
.ledger .what small { display: block; color: var(--ink-2); font-size: 0.86rem; margin-top: 2px; }
.ledger .val { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.95rem; color: var(--brand-ink); }

/* live state */
.live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: var(--sun); padding: 2px 9px 1px; border-radius: 99px; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .live::before { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.25; } }
}

/* ---------- fuel numerals ---------- */
.price { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 0.88; white-space: nowrap; }
.price sup { font-size: 0.48em; vertical-align: 0; position: relative; top: -0.8em; margin-left: 0.04em; }

/* ---------- columns ---------- */
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); }
@media (min-width: 900px) { .cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols.split { grid-template-columns: 5fr 7fr; } }

/* verification stamp */
.stamp {
  display: inline-grid; grid-template-columns: auto auto; gap: 2px 14px; align-items: baseline;
  border: 1.5px solid currentColor; border-radius: 6px; padding: 12px 16px; text-decoration: none; max-width: 100%;
}
.stamp b { font-family: var(--display); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.stamp .num { font-size: 0.8rem; opacity: 0.75; }
.stamp:hover { background: var(--on-green); color: var(--forest); }

/* footer */
footer { background: var(--forest-deep); color: var(--on-green-2); padding-block: 56px 64px; font-size: 0.92rem; }
footer .wrap { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start; }
footer strong { color: var(--on-green); font-weight: 600; }
footer a { color: var(--on-green); }
footer .seal { width: 96px; height: 96px; }

/* ---------- served by StreetTea ---------- */
.preview-bar { background: var(--sun); color: #10241c; font-family: var(--mono); font-size: 0.8rem; text-align: center; padding: 6px 12px; }
.ledger .what, .deals .d, .facts li > span { overflow-wrap: anywhere; }
a.num { text-decoration: none; }