/* ==========================================================================
   Milefri — site vitrine
   --------------------------------------------------------------------------
   The "Kete" identity, carried over from the app (app/lib/src/core/theme.dart).
   Every colour here has a counterpart there; when one moves, both move, or the
   site stops looking like the product it sells.

   Self-contained on purpose: no CDN, no Google Fonts, no external anything.
   The apex will serve this behind the same `default-src 'self'` CSP the dev
   Caddyfile already applies (deploy/Caddyfile), and a stylesheet that reaches
   off-origin is a stylesheet that renders as unstyled text the day it ships.
   ========================================================================== */

@font-face {
  font-family: "Bricolage";
  src: url("BricolageGrotesque.ttf") format("truetype-variations");
  font-weight: 200 800;
  /* swap, not block: the display font is 400 KB and this site's entire thesis
     is that data costs money. Text must be readable before it arrives. */
  font-display: swap;
}

:root {
  /* Ground and surfaces — warm espresso, never black. */
  --ground: #17110B;
  --ground-2: #211710;
  --surface: #291E16;
  --surface-2: #34271C;
  --line: #3A2C20;

  /* Kente accents. */
  --gold: #F5B02E;
  --gold-soft: #F8C868;
  --clay: #C6402F;
  --green: #2F9E63;
  --indigo: #4664C0;
  --plum: #86325C;

  /* Text. */
  --cream: #F3E7D3;
  --cream-dim: #C4B098;
  --cream-faint: #93826D;

  --measure: 62rem;
  --radius: 16px;
  --radius-lg: 22px;

  /* The woven band. Four colours, hard stops, no blending — a gradient that
     fades is not kente, it is a sunset. Reused as rule, accent and texture. */
  --kente: linear-gradient(90deg,
    var(--gold) 0 25%, var(--clay) 25% 50%,
    var(--green) 50% 75%, var(--indigo) 75% 100%);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--cream);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, .display {
  font-family: "Bricolage", system-ui, sans-serif;
  font-variation-settings: "wght" 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); letter-spacing: -0.02em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-soft); }

strong { font-weight: 650; color: #fff; }

.lede {
  font-size: clamp(1.1rem, 2.1vw, 1.3rem);
  color: var(--cream-dim);
  line-height: 1.6;
  max-width: 40rem;
}

.eyebrow {
  font-family: "Bricolage", system-ui, sans-serif;
  font-variation-settings: "wght" 700;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
/* The eyebrow carries a short woven tick — the motif at its smallest. */
.eyebrow::before {
  content: "";
  width: 28px; height: 3px;
  border-radius: 2px;
  background: var(--kente);
  flex: none;
}

.muted { color: var(--cream-dim); }
.faint { color: var(--cream-faint); font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2rem); }
.wrap-wide { max-width: 76rem; }

section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
section.tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split.reverse > :first-child { order: 2; }
}

/* --------------------------------------------------------------------------
   The woven rule — the site's connective tissue
   -------------------------------------------------------------------------- */

.band { height: 4px; background: var(--kente); border: 0; margin: 0; }
.band-thin { height: 2px; }

/* A wider, softer weave used to close a page. */
.band-wide {
  height: 10px;
  border: 0;
  margin: 0;
  background: repeating-linear-gradient(90deg,
    var(--gold) 0 14px, var(--clay) 14px 28px,
    var(--green) 28px 42px, var(--indigo) 42px 56px);
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .band { height: 3px; }

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--cream);
  font-family: "Bricolage", system-ui, sans-serif;
  font-variation-settings: "wght" 800;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  margin-right: auto;
}
.brand img { width: 30px; height: 30px; display: block; }

.nav-links { display: flex; gap: 1.4rem; align-items: center; }
.nav-links a {
  color: var(--cream-dim);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--cream); }
.nav-links a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--gold); }

/* Below 56rem the links wrap under the brand rather than collapsing into a
   burger: six items fit on two lines, and a menu that needs JavaScript is a
   menu that can break. */
@media (max-width: 56rem) {
  .nav { flex-wrap: wrap; gap: 0.75rem 1.2rem; }
  .brand { margin-right: 0; width: 100%; }
  .nav-links { flex-wrap: wrap; gap: 0.9rem 1.2rem; }
  .nav .btn { display: none; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-family: "Bricolage", system-ui, sans-serif;
  font-variation-settings: "wght" 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(100deg, var(--gold-soft), var(--gold));
  color: #2A1B00;
}
.btn-primary:hover { color: #2A1B00; background: linear-gradient(100deg, #fbd489, var(--gold-soft)); }

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--line);
}
.btn-ghost:hover { color: var(--cream); border-color: var(--cream-faint); background: var(--surface); }

.btn-sm { padding: 0.6rem 1.15rem; font-size: 0.9rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 1.85rem);
}
.card h3 { margin-bottom: 0.55rem; }
.card p { color: var(--cream-dim); font-size: 0.98rem; }

/* A card whose top edge is woven — used for the things that matter most. */
.card-woven { position: relative; overflow: hidden; }
.card-woven::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--kente);
}

.card-quiet { background: var(--ground-2); }

/* Numbered step. */
.step { display: flex; gap: 1rem; align-items: flex-start; }
.step-n {
  flex: none;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: "Bricolage", system-ui, sans-serif;
  font-variation-settings: "wght" 800;
  font-size: 0.95rem;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding: clamp(3rem, 9vw, 6rem) 0 clamp(3rem, 7vw, 5rem); position: relative; overflow: hidden; }

/* A single warm bloom behind the headline. Radial, low opacity — the ground is
   the brand, so this lifts it rather than colouring it. */
.hero::before {
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: min(60rem, 120vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--gold) 13%, transparent) 0%,
    transparent 62%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero h1 .grad {
  background: linear-gradient(96deg, var(--gold-soft), var(--gold) 45%, var(--clay));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-mark { width: 76px; height: 76px; display: block; margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   Phone mockup
   --------------------------------------------------------------------------
   Drawn rather than screenshotted, and the content inside is deliberately
   abstract: no artist is signed yet (PRODUCTION.md A1), so a mockup carrying
   plausible-looking names would be advertising a roster that does not exist.
   The chrome is accurate — the three tabs, the mini-player and the palette are
   the app's real ones. Swap in real captures once there is a real catalogue.
   -------------------------------------------------------------------------- */

.phone {
  width: 100%;
  max-width: 19rem;
  margin: 0 auto;
  aspect-ratio: 9 / 19;
  background: var(--ground);
  border: 8px solid #0d0906;
  border-radius: 34px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.75), 0 0 0 1px var(--line);
  padding: 0.9rem 0.8rem 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 0.8rem;
}

.ph-greet {
  font-family: "Bricolage", system-ui, sans-serif;
  font-variation-settings: "wght" 800;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  margin-bottom: 0.15rem;
}
.ph-sub { color: var(--cream-faint); font-size: 0.68rem; margin-bottom: 0.9rem; }

.ph-label {
  font-family: "Bricolage", system-ui, sans-serif;
  font-variation-settings: "wght" 700;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

/* The featured card: a woven block standing in for cover art. */
.ph-feature {
  height: 6.5rem;
  border-radius: 12px;
  background:
    linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.55) 100%),
    repeating-linear-gradient(135deg,
      var(--clay) 0 12px, var(--gold) 12px 24px,
      var(--green) 24px 36px, var(--indigo) 36px 48px);
  margin-bottom: 0.9rem;
  position: relative;
}
.ph-feature::after {
  content: "";
  position: absolute;
  left: 0.6rem; bottom: 0.6rem;
  width: 55%; height: 7px;
  border-radius: 3px;
  background: rgba(255,255,255,0.82);
}

.ph-row { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; }
.ph-art {
  width: 2.3rem; height: 2.3rem; border-radius: 7px; flex: none;
  background: repeating-linear-gradient(180deg,
    var(--gold) 0 4px, var(--clay) 4px 8px,
    var(--green) 8px 12px, var(--indigo) 12px 16px);
  opacity: 0.85;
}
.ph-lines { flex: 1; min-width: 0; }
.ph-bar { height: 6px; border-radius: 3px; background: var(--surface-2); }
.ph-bar + .ph-bar { margin-top: 5px; background: var(--surface); }

/* The mini-player, pinned above the tabs exactly as the app pins it. */
.ph-mini {
  margin-top: auto;
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.4rem 0.5rem;
}
.ph-mini .ph-art { width: 1.8rem; height: 1.8rem; border-radius: 5px; }
.ph-play {
  width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: none;
  background: var(--gold);
  display: grid; place-items: center;
}
.ph-play::after {
  content: "";
  border-left: 6px solid #2A1B00;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-left: 2px;
}

.ph-tabs {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--line);
  margin: 0.5rem -0.8rem 0;
  padding: 0.5rem 0 0.7rem;
  font-size: 0.6rem;
  color: var(--cream-faint);
}
.ph-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ph-tab.on { color: var(--gold); }
.ph-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.price-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.price {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price.featured { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: var(--surface-2); }
.price.featured::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--kente);
}

.price-name {
  font-family: "Bricolage", system-ui, sans-serif;
  font-variation-settings: "wght" 700;
  font-size: 1rem;
  color: var(--cream);
  margin-bottom: 0.6rem;
}
.price-amount {
  font-family: "Bricolage", system-ui, sans-serif;
  font-variation-settings: "wght" 800;
  font-size: 2.3rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--gold);
}
.price-amount .cur { font-size: 0.95rem; color: var(--cream-dim); letter-spacing: 0; margin-left: 0.25rem; }
.price-note { color: var(--cream-dim); font-size: 0.92rem; margin-top: 0.6rem; }

.tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.ticks li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--cream-dim); }
.ticks li::before {
  content: "";
  flex: none;
  width: 1.1rem; height: 1.1rem;
  margin-top: 0.28rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 55%, transparent);
  /* the tick itself */
  background-image: linear-gradient(45deg, transparent 45%, var(--green) 45% 55%, transparent 55%);
}

.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.facts li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.facts li:last-child { border-bottom: 0; }
.facts dt, .facts .k { color: var(--cream-dim); }
.facts .v { text-align: right; font-weight: 600; }

/* --------------------------------------------------------------------------
   Notice / callout
   -------------------------------------------------------------------------- */

.notice {
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
  background: color-mix(in srgb, var(--gold) 7%, var(--ground-2));
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  font-size: 0.95rem;
  color: var(--cream-dim);
}
.notice strong { color: var(--gold); font-weight: 700; }

/* A placeholder the operator still has to fill. Loud on purpose — see the
   TODO list in deploy/site/README.md. */
.todo {
  border: 1px dashed color-mix(in srgb, var(--clay) 60%, var(--line));
  background: color-mix(in srgb, var(--clay) 9%, var(--ground-2));
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  font-size: 0.95rem;
  color: var(--cream-dim);
}
.todo strong { color: var(--clay); font-weight: 700; }

/* --------------------------------------------------------------------------
   Forms (contact)
   -------------------------------------------------------------------------- */

.field { display: grid; gap: 0.4rem; margin-bottom: 1rem; }
.field label { font-size: 0.9rem; color: var(--cream-dim); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--ground-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  outline-offset: 1px;
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--ground-2); border-top: 1px solid var(--line); }
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem;
}
.footer-grid h4 {
  font-family: "Bricolage", system-ui, sans-serif;
  font-variation-settings: "wght" 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin: 0 0 0.9rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-grid a { color: var(--cream-dim); text-decoration: none; font-size: 0.95rem; }
.footer-grid a:hover { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding: 1.25rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  color: var(--cream-faint);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Legal pages — long-form prose, narrower measure
   -------------------------------------------------------------------------- */

.prose { max-width: 44rem; }
/* The legal pages open with an h1 straight into a "last updated" line, and the
   global rule zeroes heading margins — without this they collide. */
.prose h1 { margin-bottom: 0.6rem; }
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 2.5rem 0 0.9rem; }
.prose h3 { margin: 1.8rem 0 0.6rem; }
.prose ul, .prose ol { color: var(--cream-dim); padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 0.94rem; }
.prose th, .prose td { text-align: left; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--cream); font-weight: 700; background: var(--surface); }
.prose td { color: var(--cream-dim); }
/* Wide tables scroll inside their own box rather than the page. */
.table-scroll { overflow-x: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--gold); color: #2A1B00; padding: 0.7rem 1.1rem; border-radius: 0 0 8px 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

/* `code` appears in the legal prose and nowhere else; it was styled in those
   pages' own stylesheet before they moved onto this one. */
code {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0.1em 0.4em;
  border-radius: 5px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}