/* ═══════════════════════════════════════════════════════════════════════════
   MARNJI · PERSONALISED EXPERT LANES
   Design-only. Three themes, one shell.

   THE CONTRACT THAT KEEPS THIS FROM BECOMING THREE WEBSITES:
   a theme may change SIX declared tokens and nothing else.

     1  --accent / --accent-ink / --accent-wash   one warm hue family
     2  --display                                  heading + quote face only
     3  --rhythm                                   one multiplier on block gaps
     4  --quote                                    rule | slab | soft
     5  --cite                                     inline+foot | inline | foot
     6  --r-block                                  block corner radius

   A theme may NOT change: the lane (768px), the sticky head, the composer,
   the booking card, the base spacing unit, the type scale, the breakpoints,
   the DOM structure of any answer block, or any contrast floor.

   That list is not a guideline. All three theme pages render the same blocks
   from the same markup, and the suite asserts their lane geometry, composer
   geometry and block structure are identical — so "restrained" is a fact
   about the build rather than a promise in a deck.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── shipped Marnji system, copied verbatim from marnji.css ── */
  --paper:#F7F3EB; --surface:#FFFFFF; --sunken:#EFE9DE; --cream-2:#F2EEE7;
  --peach:#F4E9DA;
  --ink:#181614; --ink-2:#463F37; --faint:#A99E8F;
  --line:#E7DDCB; --line-2:#EFE7DA;
  --terra:#C2593A; --terra-ink:#9E4325; --terra-wash:#F3E4D6;
  --ok:#2E7D53; --ok-wash:#E4F0E8;
  --sans:"Figtree",-apple-system,system-ui,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --r-sm:12px; --r-md:16px; --r-lg:22px;
  --shadow:0 18px 50px rgba(40,28,14,.10),0 2px 6px rgba(40,28,14,.05);
  --shadow-sm:0 1px 2px rgba(40,28,14,.05);

  /* PROPOSED single-token amendment, used throughout these mocks and flagged
     on the system page: shipped --muted #7A7167 is 4.33:1 on paper and is used
     at 12.5–13px for source pills and the lane subtitle — below AA for body
     text. #736A60 is 4.79:1 and is the smallest change that clears it. */
  --muted:#736A60;

  /* ── theme defaults = Editorial. The house hue is the default hue. ── */
  --accent:var(--terra); --accent-ink:var(--terra-ink); --accent-wash:var(--terra-wash);
  --display:var(--serif);
  --rhythm:1;
  --r-block:var(--r-md);
  --base:24px;                    /* the block gap unit — never themed */
}

/* THE THREE THEMES. Every value below is one of the six permitted tokens.
   Each accent is a PAIR: the accent carries rules and fills, the -ink carries
   text. That is the shipped pattern — terracotta is 3.97:1 on paper and could
   never have carried text, which is exactly why --terra-ink already exists. */
.t-editorial{
  --accent:#C2593A; --accent-ink:#9E4325; --accent-wash:#F3E4D6;
  --display:var(--serif); --rhythm:1; --quote:rule; --cite:inline-foot; --r-block:16px;
}
.t-playbook{
  --accent:#8A6A2F; --accent-ink:#6F5423; --accent-wash:#F2EADA;
  --display:var(--sans); --rhythm:.92; --quote:slab; --cite:inline; --r-block:12px;
}
.t-coach{
  --accent:#6E7F5B; --accent-ink:#57684A; --accent-wash:#E9EDE2;
  --display:var(--serif); --rhythm:1.14; --quote:soft; --cite:foot; --r-block:22px;
}

*{box-sizing:border-box} html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.55}
a{color:inherit;text-decoration:none}

/* ── page chrome for the deliverable itself (not product) ── */
.wrap{max-width:1180px;margin:0 auto;padding:26px 26px 90px}
.hd{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:6px}
.hd b{font-family:var(--display);font-size:19px;letter-spacing:-.01em}
.hd .sp{flex:1}
.chip{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:5px 10px;background:var(--surface)}
.chip.on{color:var(--accent-ink);border-color:var(--accent)}
.nav{display:flex;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--surface);margin:16px 0 26px;flex-wrap:wrap;box-shadow:var(--shadow-sm)}
.nav a{padding:11px 16px;font-size:13px;color:var(--ink-2);border-right:1px solid var(--line);
  flex:1;min-width:150px}
.nav a:last-child{border-right:0}
.nav a b{display:block;font-size:13.5px;color:var(--ink);font-weight:600}
.nav a span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.nav a:hover,.nav a.on{background:var(--cream-2)}
.nav a.on b{color:var(--accent-ink)}
h1{font-family:var(--display);font-size:31px;letter-spacing:-.02em;font-weight:600;
  margin:12px 0 12px;max-width:24ch;line-height:1.16;text-wrap:balance}
h1.wide{max-width:36ch}
.lede{font-size:15px;color:var(--ink-2);line-height:1.7;max-width:74ch;margin:0 0 12px}
.lede b{color:var(--ink);font-weight:600}
h2{font-family:var(--display);font-size:20px;letter-spacing:-.01em;margin:40px 0 6px;font-weight:600}
h2 .q{font-family:var(--sans);font-size:11px;color:var(--accent-ink);margin-right:9px;font-weight:700}
.sub{font-size:12.5px;color:var(--muted);margin:0 0 16px}
p{font-size:14px;color:var(--ink-2);line-height:1.72;max-width:76ch;margin:0 0 12px}
p b,li b,td b{color:var(--ink);font-weight:600}
ul.pl{font-size:14px;color:var(--ink-2);line-height:1.72;max-width:76ch;margin:0 0 12px;padding-left:21px}
ul.pl li{margin-bottom:6px}
.note{border-left:3px solid var(--accent);background:var(--surface);border-radius:0 12px 12px 0;
  padding:14px 17px;margin:0 0 15px;box-shadow:var(--shadow-sm)}
.note p{margin:0;max-width:none}
.note b{color:var(--accent-ink)}
code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--sunken);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--ink-2)}

/* ═══ THE PRODUCT SHELL — structure copied from the shipped marnji.css ═══
   Nothing in this block is themed. It is the constant. */
.frame{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.frame-k{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--surface);
  border-bottom:1px solid var(--line);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.frame-k .sp{flex:1}
.frame-b{padding:0 22px 18px}

.lane{max-width:768px;margin:0 auto;width:100%;display:flex;flex-direction:column}
.lane-head{display:flex;align-items:center;gap:14px;padding:16px 0 14px;
  border-bottom:1px solid var(--line)}
.av{background:var(--sunken);border:1px solid var(--line);
  border-radius:999px 999px 8px 8px;flex:none}          /* the arch motif */
.lane-head .av{width:46px;height:56px}
.lane-head .id{min-width:0;flex:1}
.lane-head .id b{font-family:var(--display);font-size:18px;font-weight:600;display:flex;
  align-items:center;gap:7px}
.lane-head .id b .v{color:#3B6FB0;font-size:14px}
.lane-head .id span{font-size:13px;color:var(--muted);display:block}
.lane-msgs{display:flex;flex-direction:column;gap:calc(var(--base) * var(--rhythm));
  padding:22px 0 10px}
.msg-user{align-self:flex-end;max-width:78%;background:var(--cream-2);
  border-radius:18px 18px 6px 18px;padding:12px 17px;font-size:15px;line-height:1.5}
.msg-brain{align-self:stretch;max-width:100%}
.msg-brain .who{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  color:var(--accent-ink);margin-bottom:9px}
.msg-brain .who .av{width:24px;height:28px}
.msg-brain .txt{font-size:15.5px;line-height:1.7;color:var(--ink)}
.msg-brain .txt p{margin:0 0 13px} .msg-brain .txt p:last-child{margin:0}

/* ═══ THE EIGHT ANSWER BLOCK TYPES ═══════════════════════════════════════
   Same DOM on every theme. Themes change surface, not structure. */

/* 1 · paragraph — .txt p above */
/* 2 · heading */
.b-h{font-family:var(--display);font-size:15.5px;font-weight:600;color:var(--ink);
  margin:calc(18px * var(--rhythm)) 0 8px;letter-spacing:-.01em}
.b-h:first-child{margin-top:0}
.t-playbook .b-h{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink)}

/* 3 · list */
.b-l{margin:0 0 13px;padding-left:0;list-style:none;display:grid;gap:calc(9px * var(--rhythm))}
.b-l li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:15px;
  line-height:1.62;color:var(--ink)}
.b-l li .m{color:var(--accent-ink);font-weight:700;font-size:13px;padding-top:2px}
.t-playbook .b-l li .m{background:var(--accent-wash);border-radius:6px;text-align:center;
  height:22px;line-height:22px;padding:0}
.t-coach .b-l li .m{font-weight:600}

/* 4 · quote — the block that carries most of the theme's character */
.b-q{margin:calc(16px * var(--rhythm)) 0;font-family:var(--display);color:var(--ink)}
.b-q .qt{font-size:18px;line-height:1.52;letter-spacing:-.005em}
.b-q .qa{display:block;margin-top:10px;font-family:var(--sans);font-size:12.5px;
  color:var(--muted);font-style:normal}
/* rule — a hairline in the accent, the excerpt set large. Source-led. */
.t-editorial .b-q{border-left:2px solid var(--accent);padding:2px 0 2px 18px}
.t-editorial .b-q .qt{font-style:italic}
/* slab — a filled block. Reads as a pulled-out principle, not a literary quote. */
.t-playbook .b-q{background:var(--accent-wash);border-radius:var(--r-block);padding:16px 18px}
.t-playbook .b-q .qt{font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.5}
/* soft — no rule, no fill, just air and a mark. Reflective rather than cited. */
.t-coach .b-q{padding:4px 0 4px 26px;position:relative}
.t-coach .b-q::before{content:"";position:absolute;left:0;top:6px;width:10px;height:10px;
  border-radius:50%;background:var(--accent-wash);border:1.5px solid var(--accent)}
.t-coach .b-q .qt{font-size:19px;line-height:1.58}

/* 5 · citation — inline marker + source pills. Density is themed. */
.cite{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;
  padding:0 5px;border-radius:6px;font-size:10.5px;font-weight:700;background:var(--accent-wash);
  color:var(--accent-ink);vertical-align:1px;margin:0 1px}
.msg-src{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;
  color:var(--muted);margin-top:calc(12px * var(--rhythm))}
.msg-src .s{display:inline-flex;align-items:center;gap:6px;background:var(--sunken);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--ink-2)}
.msg-src .s b{font-weight:600;color:var(--ink)}
/* playbook shows the marker inline but folds the pills away by default;
   coach hides inline markers and keeps only the footer, so the reflective
   voice is not interrupted mid-sentence. Both still cite. */
.t-playbook .msg-src{font-size:12px}
.t-coach .cite{display:none}
.t-coach .msg-src{margin-top:calc(14px * var(--rhythm))}

/* 6 · image / diagram card */
.b-img{border:1px solid var(--line);border-radius:var(--r-block);background:var(--surface);
  overflow:hidden;margin:calc(14px * var(--rhythm)) 0;box-shadow:var(--shadow-sm)}
.b-img .ph{aspect-ratio:16/9;background:
  repeating-linear-gradient(135deg,var(--sunken) 0 12px,var(--cream-2) 12px 24px);
  display:grid;place-items:center;color:var(--muted);font-size:12px}
.b-img .cap{padding:11px 14px;font-size:12.5px;color:var(--ink-2);line-height:1.55;
  border-top:1px solid var(--line-2);display:flex;gap:9px;align-items:baseline}
.b-img .cap .src{margin-left:auto;color:var(--muted);font-size:11.5px;white-space:nowrap}

/* 7 · video card */
.b-vid{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-block);background:var(--surface);
  padding:12px;margin:calc(14px * var(--rhythm)) 0;box-shadow:var(--shadow-sm)}
.b-vid .th{aspect-ratio:16/9;border-radius:calc(var(--r-block) - 6px);background:
  repeating-linear-gradient(135deg,var(--sunken) 0 12px,var(--cream-2) 12px 24px);
  display:grid;place-items:center;position:relative}
.b-vid .th .pl{width:30px;height:30px;border-radius:50%;background:var(--surface);
  border:1px solid var(--line);display:grid;place-items:center;font-size:11px;
  color:var(--accent-ink);padding-left:2px}
.b-vid .vt{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4}
.b-vid .vm{font-size:12px;color:var(--muted);margin-top:4px}

/* 8 · action / booking block — structure fixed, surface themed */
.b-act{border:1px solid var(--line);border-radius:var(--r-block);background:var(--peach);
  padding:16px 18px;margin:calc(14px * var(--rhythm)) 0;box-shadow:var(--shadow-sm)}
.t-playbook .b-act{background:var(--accent-wash)}
.t-coach .b-act{background:var(--accent-wash)}
.b-act h4{margin:0;font-family:var(--display);font-size:16.5px;font-weight:600}
.t-playbook .b-act h4{font-size:15px}
.b-act p{margin:6px 0 13px;font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:none}
.b-act .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.b-act .price{font-family:var(--display);font-size:21px;font-weight:600}
.b-act .price small{font-size:12.5px;color:var(--muted);font-family:var(--sans)}
.btn{font:inherit;font-size:13.5px;font-weight:600;border-radius:999px;padding:10px 18px;
  border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;margin-left:auto}
.btn:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}

/* fallback — the honest empty state when an expert has thin material */
.b-fall{border:1px dashed var(--line);border-radius:var(--r-block);padding:14px 16px;
  margin:calc(14px * var(--rhythm)) 0;font-size:13px;color:var(--ink-2);line-height:1.6}
.b-fall b{color:var(--ink)}

/* composer + chips — never themed */
.lane-foot{padding:14px 0 4px;margin-top:14px}
.lane-chips{display:flex;gap:10px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.lane-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;box-shadow:var(--shadow-sm)}
.composer{display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:999px;padding:8px 8px 8px 18px;
  box-shadow:var(--shadow-sm)}
.composer .ph{flex:1;color:var(--faint);font-size:15px}
.composer .go{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:17px;flex:none}

/* ── side-by-side desktop + mobile presentation ── */
.pair{display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:22px;align-items:start;
  margin-bottom:30px}
.mob{width:390px;border:1px solid var(--line);border-radius:26px;background:var(--paper);
  overflow:hidden;box-shadow:var(--shadow)}
.mob .frame-k{border-radius:0}
.mob .frame-b{padding:0 16px 16px}
.mob .lane-head .av{width:38px;height:46px}
.mob .lane-head .id b{font-size:16px}
.mob .msg-brain .txt{font-size:15px}
.mob .b-vid{grid-template-columns:1fr;gap:10px}
.mob .b-vid .th{aspect-ratio:16/9}
.mob .b-act .row{gap:10px}
.mob .b-act .btn{margin-left:0;width:100%;text-align:center}
.mob .msg-user{max-width:88%}
.state{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:0 0 9px;font-weight:600}

@media(max-width:1100px){ .pair{grid-template-columns:1fr} .mob{width:100%;max-width:390px} }
@media(max-width:700px){ .wrap{padding:20px 15px 70px} h1{font-size:24px} }
@media (prefers-reduced-motion: reduce){ *{transition-duration:.01ms !important} }