/* Miss Meatless Muscle, Brand Guidelines Edition 01, applied as a layer.
   This file changes presentation only. No markup, no structure, no copy and
   no behavior on the underlying page is altered by it. It loads after the
   page's own <style> block and restates that block's tokens in brand terms,
   so every existing rule inherits the brand without being rewritten.
   Approved by Brooke and her marketing lead 2026-09-23; loaded by every
   public page. brand-preview/ (the review mock) was retired on approval. */

:root{
  /* Edition 01 palette */
  --jungle:#154741;
  --jungle-deep:#0E332F;
  --sage:#8DA98D;
  --mist:#EFF2EC;
  --gold:#D99A22;
  --gold-deep:#B67F14;
  --ink:#22262A;
  --bone:#F2F1ED;
  --steel:#8A8F94;
  --hairline:#D9DED6;
  /* Accessibility correction: the book's steel (#8A8F94) as meta text on mist
     measures 2.9:1, under the AA floor. This is the nearest tone that passes
     at 5.2:1 on mist and 5.9:1 on white. */
  --meta:#5F6569;

  --brand-display:"Archivo",-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --brand-text:"Manrope",-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --brand-accent:"Instrument Serif",Georgia,serif;

  /* Restate the site's own tokens in brand terms. Every existing rule that
     references these picks up the brand with no change to that rule. */
  --green-900:var(--jungle-deep);
  --green-700:var(--jungle);
  --green-600:var(--sage);
  --green-50:var(--mist);
  --text:var(--ink);
  --text-muted:var(--meta);
  --border:var(--hairline);
}

/* Typography: Archivo for display, Manrope for text, Instrument Serif Italic
   as the single accent face. */
body{font-family:var(--brand-text);}
h1,h2,h3,h4,h5,.brand,.btn,.btn-outline,.eyebrow,.eyebrow2,.v-item,nav.links a{
  font-family:var(--brand-display);
}
h1,h2,h3,h4{letter-spacing:-0.012em;font-weight:600;}
h1{font-weight:600;}
.eyebrow,.eyebrow2{letter-spacing:0.14em;font-weight:600;}

/* Actions: square, no rounding. Gold carries an ink label at 6.2:1.
   White on gold is 2.4:1 and is never used. */
.btn{background:var(--gold);color:var(--ink);border-radius:0;font-weight:600;letter-spacing:0.01em;}
.btn:hover{background:var(--gold-deep);color:var(--ink);}
.cta-band .btn{background:var(--gold);color:var(--ink);}
.cta-band .btn:hover{background:var(--gold-deep);color:var(--ink);}
.btn-outline{border-radius:0;border:2px solid var(--jungle);color:var(--jungle);font-weight:600;}
.btn-outline:hover{background:var(--jungle);color:var(--bone);text-decoration:none;}

/* Links: jungle at 10.5:1, underlined in gold deep. Gold deep as link text
   itself is 3.5:1 and is not used at text size. */
a{text-decoration-color:var(--gold-deep);}

/* The gold 3px rule. The most repeated device in the system: it caps a card
   or a column and is what makes a page read as Meatless Muscle at a glance. */
.card,.tc-card,.t-card{border-radius:0;border-top:3px solid var(--gold);}

/* Sage sits behind quotes as a block or a rule, never as type at text size
   (2.6:1 on white). */
.tc-quote-icon{font-family:var(--brand-accent);font-style:italic;color:var(--sage);opacity:1;}

/* Square the remaining soft corners so the geometry is consistent. Avatars
   and the live dot stay circular by intent. */
.hero-img,.hero-video,.v-player,.videos iframe,.hamburger-btn,
.ebook-popup,.ebook-popup input,.ebook-flipcard-front,.ebook-flipcard-back,
nav.side a,.v-item{border-radius:0;}

/* Playlist: the active row is marked in gold. */
.v-item.active{border-left-color:var(--gold);}
.v-item.active,.v-item:hover{background:var(--white);color:var(--jungle-deep);}
.v-item:hover{background:rgba(21,71,65,0.06);}

/* Surfaces */
.hero{background:var(--mist);}
.testimonials{background:var(--mist);}
.cta-band{background:var(--jungle);}
footer{background:var(--jungle-deep);}
.promo-bar{background:var(--jungle);}

/* Pre-existing live-site defect, closed here so the site is usable on a
   small phone. meatlessmuscle.com currently scrolls sideways 31px at 320px
   because a grid item defaults to min-width:auto, so a 1fr track can never
   shrink below its widest child's min-content width and one nowrap card
   heading sets the floor for the whole column. minmax(0,1fr) plus min-width:0
   lets the track shrink and the heading wrap. Presentation only: no markup,
   no content and no behavior changes, and nothing moves above 860px. */
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.t-grid-6,.t-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.card,.tc-card,.t-card{min-width:0;}
@media (max-width:860px){
  .grid-4,.videos{grid-template-columns:repeat(2,minmax(0,1fr));}
  .t-grid-6,.t-grid{grid-template-columns:minmax(0,1fr);}
}