/* ==========================================================================
   MAUVIEL SOUTH AFRICA - COPPER ACCENT
   Loaded last. The rose-gold Mauviel1830 uses on its own collection bands,
   brought in as a surface colour and a label colour. Brass keeps its job as
   the hairline and the underline; copper takes the fills and the small caps,
   so the two metals never compete in the same role.

   Contrast, measured, not assumed:
     ink   #231F20 on copper  #A9866A = 4.89:1   AA body
     copper deep #8A6647 on paper     = 5.16:1   AA body
     copper light #C9AC93 on ink      = 7.61:1   AA body, AAA large
   ========================================================================== */

:root{
  --mv-copper-band:#A9866A;
  --mv-copper-deep:#8A6647;
  --mv-copper-light:#C9AC93;
  --mv-copper-tint:#F4EBE3;
  --mv-copper-line:#C7A98F;
}

/* --------------------------------------------------------------------------
   1. THE LABEL. Every small-caps eyebrow on the site moves from brass-text to
      copper. It is the most frequent accent and the one the eye reads first.
   -------------------------------------------------------------------------- */
/* These carry #main-content because the site has a blanket
   `#main-content p,#main-content li,#main-content td{color:ink}` rule, at
   (1,0,1), which quietly outranks any single-class rule. Every component
   colour in this file has to clear that bar or it never reaches the page. */
#main-content .mvhome__eyebrow,
#main-content .mv-eyebrow,
#main-content .mv-sec__eyebrow,
#main-content .mvhome__cap,
#main-content .mvhome__c-eyebrow,
#main-content .mvhome__tile-k,
#main-content .mv-pick__k{color:var(--mv-copper-deep)}

#main-content .mvhome__eyebrow--light,
#main-content .mv-eyebrow--light{color:var(--mv-copper-light)}

/* Numerals in the where-to-start panel read as a set, not as prices. */
#main-content .mv-picks>li .mv-pick__n,
#main-content .mv-pick__n,
#main-content .mvhome__step-n,
#main-content .mvhome__hob-n,
#main-content .mvhome__fact-n{color:var(--mv-copper-deep)}

/* --------------------------------------------------------------------------
   2. THE SURFACE. A full-bleed copper band, ink type on it. Mauviel1830 sets
      white on this colour; at 3.33:1 that is legible only at display sizes, so
      here the body copy is ink and only the heading may go white.
   -------------------------------------------------------------------------- */
.mv-copperband{background:var(--mv-copper-band);color:var(--mv-ink);width:100%}
.mv-copperband__w{max-width:var(--mv-m);margin-inline:auto;padding-inline:var(--mv-p);
  padding-block:clamp(3rem,6vw,5rem)}
.mv-copperband__grid{display:grid;gap:clamp(1.5rem,4vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
.mv-copperband__eyebrow{font-family:var(--mv-font-data);font-size:.6875rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--mv-ink);opacity:.75;margin:0 0 1rem}
.mv-copperband__h{font-family:var(--mv-font-display);font-weight:300;
  font-size:clamp(1.75rem,3.6vw,2.85rem);line-height:1.08;letter-spacing:-.01em;
  color:var(--mv-ink);margin:0;max-width:20ch}
.mv-copperband__body{font-family:var(--mv-font-body);font-size:1.0625rem;
  line-height:1.7;color:var(--mv-ink);margin:0 0 1.1rem;max-width:60ch}
.mv-copperband__body:last-of-type{margin-bottom:1.8rem}
.mv-copperband__more{display:inline-block;font-family:var(--mv-font-data);
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--mv-ink);text-decoration:none;padding-bottom:.35rem;
  border-bottom:1px solid var(--mv-ink)}
.mv-copperband__more:hover{color:var(--mv-ink);border-bottom-color:var(--mv-paper)}
@media (max-width:900px){
  .mv-copperband__grid{grid-template-columns:minmax(0,1fr)}
  .mv-copperband__w{padding-inline:4%}
  .mv-copperband__h{max-width:none}
}

/* --------------------------------------------------------------------------
   3. THE WASH. A tint for alternating editorial sections, warm enough to read
      as copper and light enough to keep ink at 13.8:1.
   -------------------------------------------------------------------------- */
.mv-coppertint{background:var(--mv-copper-tint)}
.mv-copperrule{border:0;border-top:1px solid var(--mv-copper-line);margin:0}


/* Same specificity floor for the band, so the blanket ink rule cannot flatten
   it. Anything added to this file later needs the #main-content prefix too. */
#main-content .mv-copperband__eyebrow{color:var(--mv-ink);opacity:.75}
#main-content .mv-copperband__h,
#main-content .mv-copperband__body,
#main-content .mv-copperband__more{color:var(--mv-ink)}