/* Magic Box V1 - family experiences.
   Cream/ivory, charcoal, restrained olive, rust/copper. Editorial serif + clean sans.
   Layered on top of magicbox-design-system.css; introduces no new colour system. */

:root{
  --mbf-cream:#FBF7F0; --mbf-ivory:#FFFDF9; --mbf-ink:#23211E; --mbf-navy:#1F2A33;
  --mbf-olive:#5E6B4F; --mbf-copper:#B0592B; --mbf-rust:#8E4523;
  --mbf-line:#E3DACB; --mbf-mute:#6B6358;
  --mbf-r:14px; --mbf-shadow:0 1px 2px rgba(35,33,30,.05),0 8px 28px rgba(35,33,30,.06);
}

.mbf-page{background:var(--mbf-ivory);color:var(--mbf-ink)}
.mbf-page h1,.mbf-page h2,.mbf-page h3,.mbf-card h2{
  font-family:"Zilla Slab",Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.01em}
.mbf-page h1{font-size:clamp(2rem,5vw,3.25rem);line-height:1.08;margin:0 0 .5rem}
.mbf-page h2{font-size:clamp(1.4rem,3vw,2rem);line-height:1.2;margin:0 0 1rem}
.mbf-page h3{font-size:1.05rem;margin:0 0 .5rem}
.mbf-headline{font-family:"Zilla Slab",Georgia,serif;font-size:clamp(1.15rem,2.4vw,1.5rem);
  line-height:1.35;color:var(--mbf-copper);margin:0 0 .75rem}
.mbf-sub{color:var(--mbf-mute);margin:-.5rem 0 1.5rem}
.mbf-micro{font-size:.85rem;color:var(--mbf-mute);margin:.75rem 0 0}
.mbf-note{font-size:.88rem;color:var(--mbf-mute);border-left:3px solid var(--mbf-line);
  padding:.6rem 0 .6rem 1rem;margin:1.5rem 0 0;max-width:62ch}
.mbf-note-light{color:rgba(255,253,249,.72);border-left-color:rgba(255,253,249,.28)}

/* ---- hero */
.mbf-hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.mbf-hero-media,.mbf-card-media{
  background:
    radial-gradient(120% 90% at 80% 10%,rgba(176,89,43,.14),transparent 60%),
    linear-gradient(140deg,var(--mbf-cream),#F2E9DA);
  border:1px solid var(--mbf-line);border-radius:var(--mbf-r);position:relative}
.mbf-hero-media{aspect-ratio:4/5;min-height:280px}
.mbf-card-media{aspect-ratio:3/2}
.mbf-hero-media::after,.mbf-card-media::after{
  content:"Photography to come";position:absolute;inset:auto 0 .75rem 0;text-align:center;
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(107,99,88,.6)}

/* ---- plan selector */
.mbf-buy{margin:1.5rem 0 .5rem}
.mbf-plans{border:0;padding:0;margin:0}
.mbf-plans legend{font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mbf-mute);margin-bottom:.5rem;padding:0}
.mbf-plan{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border:1px solid var(--mbf-line);border-radius:10px;background:var(--mbf-ivory);
  padding:.85rem 1rem;margin:0 0 .5rem;cursor:pointer;min-height:48px;transition:.16s}
.mbf-plan:hover{border-color:var(--mbf-copper)}
.mbf-plan.is-on{border-color:var(--mbf-copper);background:#FDF4EC;
  box-shadow:inset 0 0 0 1px var(--mbf-copper)}
.mbf-plan input{position:absolute;opacity:0;width:1px;height:1px}
.mbf-plan-label{font-weight:500}
.mbf-plan-price{font-variant-numeric:tabular-nums;font-weight:600;color:var(--mbf-navy)}
.mbf-price-line{display:flex;align-items:baseline;gap:.6rem;margin:1rem 0 .25rem}
.mbf-price{font-family:"Zilla Slab",Georgia,serif;font-size:2rem;color:var(--mbf-navy)}
.mbf-price-lg{font-family:"Zilla Slab",Georgia,serif;font-size:2.25rem;margin:.25rem 0 1rem}
.mbf-prov{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mbf-mute);
  border:1px solid var(--mbf-line);border-radius:999px;padding:.18rem .55rem}
.mbf-atc{margin:.5rem 0 0}
.mbf-atc-btn{min-height:52px;padding-inline:2rem;font-size:1rem}

/* ---- lists */
.mbf-ticks{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;max-width:68ch}
.mbf-ticks li{position:relative;padding-left:1.6rem;line-height:1.55}
.mbf-ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:.55rem;
  border-radius:50%;background:var(--mbf-olive)}
.mbf-why{margin:0;max-width:72ch}
.mbf-why dt{font-weight:600;color:var(--mbf-navy);margin:1.1rem 0 .2rem}
.mbf-why dt:first-child{margin-top:0}
.mbf-why dd{margin:0;color:var(--mbf-mute);line-height:1.55}
.mbf-meals{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.mbf-meals li{background:var(--mbf-cream);border:1px solid var(--mbf-line);
  border-radius:10px;padding:.85rem 1rem;line-height:1.4}

/* ---- contents */
.mbf-contents{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.mbf-cgroup{background:var(--mbf-cream);border:1px solid var(--mbf-line);
  border-radius:var(--mbf-r);padding:1.25rem}
.mbf-cgroup h3{color:var(--mbf-olive);font-size:.8rem;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:.9rem}
.mbf-cgroup ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.mbf-cgroup li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;line-height:1.4}
.mbf-qty{font-variant-numeric:tabular-nums;font-weight:600;color:var(--mbf-navy);
  min-width:1.6rem}
.mbf-item em{font-style:normal;color:var(--mbf-mute);font-size:.88rem}
.mbf-tag{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  background:#EDF0E7;color:var(--mbf-olive);border-radius:999px;padding:.12rem .5rem}
.mbf-tag-seasonal{background:#FBEDE2;color:var(--mbf-rust)}

/* ---- your magic week */
.mbf-week{background:var(--mbf-navy);color:var(--mbf-ivory)}
.mbf-week h2,.mbf-week h3{color:var(--mbf-ivory)}
.mbf-week .mb-eyebrow{color:#D9A47C}
.mbf-week-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  margin-top:1.5rem}
.mbf-week-card{background:rgba(255,253,249,.06);border:1px solid rgba(255,253,249,.14);
  border-radius:12px;padding:1.1rem}
.mbf-week-card h3{font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  color:#D9A47C;margin-bottom:.7rem}
.mbf-week-card ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.mbf-week-card li{font-size:.93rem;line-height:1.45;color:rgba(255,253,249,.88)}
.mbf-week-card p{font-size:.93rem;line-height:1.5;color:rgba(255,253,249,.88);margin:0}
.mbf-week-preserve{grid-column:1/-1;background:rgba(176,89,43,.16);
  border-color:rgba(217,164,124,.35)}

/* ---- boxes grid */
.mbf-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.mbf-card{background:var(--mbf-ivory);border:1px solid var(--mbf-line);
  border-radius:var(--mbf-r);overflow:hidden;box-shadow:var(--mbf-shadow);
  display:flex;flex-direction:column;transition:.18s}
.mbf-card:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(35,33,30,.06),0 16px 40px rgba(35,33,30,.1)}
.mbf-card-body{padding:1.35rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.mbf-card h2{font-size:1.5rem;margin:0}
.mbf-card-line{color:var(--mbf-copper);font-family:"Zilla Slab",Georgia,serif;
  font-size:1.02rem;line-height:1.35;margin:0}
.mbf-variants{list-style:none;padding:0;margin:.35rem 0 0;display:grid;gap:.35rem}
.mbf-variants li{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;
  color:var(--mbf-mute);border-bottom:1px dotted var(--mbf-line);padding-bottom:.35rem}
.mbf-variants strong{color:var(--mbf-navy);font-variant-numeric:tabular-nums}
.mbf-from{margin:.5rem 0 0;display:flex;align-items:baseline;gap:.5rem}
.mbf-card .mb-btn{margin-top:auto;min-height:48px;display:inline-flex;
  align-items:center;justify-content:center}

/* ---- finder */
.mbf-needs{list-style:none;padding:0;margin:0;display:grid;gap:.85rem;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.mbf-needs a{display:flex;align-items:center;min-height:76px;padding:1.1rem 1.35rem;
  background:var(--mbf-cream);border:1px solid var(--mbf-line);border-radius:12px;
  font-family:"Zilla Slab",Georgia,serif;font-size:1.12rem;color:var(--mbf-ink);
  text-decoration:none;transition:.16s}
.mbf-needs a:hover,.mbf-needs a:focus-visible{border-color:var(--mbf-copper);
  background:#FDF4EC;color:var(--mbf-rust)}
.mbf-answer{color:var(--mbf-mute);margin:0 0 1.25rem}
.mbf-result{background:var(--mbf-cream);border:1px solid var(--mbf-line);
  border-radius:var(--mbf-r);padding:1.75rem}
.mbf-pickers{list-style:none;padding:0;margin:.75rem 0 0;display:grid;gap:.6rem}
.mbf-pickers a{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  min-height:56px;padding:.9rem 1.2rem;background:var(--mbf-ivory);
  border:1px solid var(--mbf-line);border-radius:10px;text-decoration:none;
  color:var(--mbf-ink);transition:.16s}
.mbf-pickers a:hover{border-color:var(--mbf-copper);background:#FDF4EC}
.mbf-pickers strong{font-variant-numeric:tabular-nums;color:var(--mbf-navy)}

.mbf-final{background:var(--mbf-navy);color:var(--mbf-ivory);text-align:center}
.mbf-final h2{color:var(--mbf-ivory)}
.mb-link-light{color:#D9A47C}

/* ---- tone accents, one per family */
.mbf-tone-save   .mb-eyebrow,.mbf-tone-save   .mbf-headline{color:var(--mbf-olive)}
.mbf-tone-strong .mb-eyebrow,.mbf-tone-strong .mbf-headline{color:var(--mbf-rust)}
.mbf-tone-fit    .mb-eyebrow,.mbf-tone-fit    .mbf-headline{color:#4B6B63}
.mbf-tone-chemistry .mb-eyebrow,.mbf-tone-chemistry .mbf-headline{color:#A24A3C}
.mbf-tone-family .mb-eyebrow,.mbf-tone-family .mbf-headline{color:var(--mbf-copper)}
.mbf-tone-fruit  .mb-eyebrow,.mbf-tone-fruit  .mbf-headline{color:#C2703A}
.mbf-tone-supreme .mb-eyebrow,.mbf-tone-supreme .mbf-headline{color:var(--mbf-navy)}
.mbf-tone-balance .mb-eyebrow,.mbf-tone-balance .mbf-headline{color:#5E6B4F}

/* ---- responsive: 375 / 430 / tablet / desktop */
@media (max-width:480px){
  .mbf-page h1{font-size:1.85rem}
  .mbf-hero-media{aspect-ratio:3/2;min-height:200px}
  .mbf-contents,.mbf-week-grid,.mbf-grid,.mbf-meals,.mbf-needs{grid-template-columns:1fr}
  .mbf-plan{padding:.8rem .9rem}
  .mbf-price{font-size:1.7rem}
  .mbf-atc-btn{width:100%}
  .mbf-cgroup{padding:1rem}
  .mbf-note{padding-left:.8rem}
}
@media (min-width:768px){
  .mbf-week-preserve{grid-column:span 2}
}
@media (min-width:1024px){
  .mbf-hero-grid{grid-template-columns:1.15fr .85fr;gap:3rem}
  .mbf-hero-media{aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){
  .mbf-card,.mbf-plan,.mbf-needs a,.mbf-pickers a{transition:none}
  .mbf-card:hover{transform:none}
}
.mbf-qty{white-space:nowrap}