/* ==========================================================================
   Big Mag — color-block poster design system
   Palette family: teal · Type: Archivo Narrow (display) + Mulish (body)
   Signature: snap (motion) / block-wipe (reveal) / swatch (link) + swatch-strip moment
   Renamed per-site (bm- / --bm-) per PBN footprint rule.
   ========================================================================== */

:root {
  --bm-teal:   #1f4a52;   /* primary background */
  --bm-teal-d: #10262b;   /* ink / text on light */
  --bm-mustard:#e1ad01;
  --bm-rose:   #d68c7e;
  --bm-cream:  #f3f0e8;   /* off-white surface + text on dark */
  --bm-line:   4px;       /* poster border weight */

  /* Motion personality: "snap" — brisk, decisive, no overshoot */
  --bm-motion: cubic-bezier(.7,0,.2,1);
  --bm-fast:   130ms;
  --bm-med:    240ms;

  --bm-maxw: 1440px;
}

/* ---- reset-ish ---- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Mulish", system-ui, sans-serif;
  background: var(--bm-teal);
  color: var(--bm-cream);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---- display type ---- */
.bm-poster {
  font-family: "Archivo Narrow", "Arial Narrow", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
}
h1,h2,h3,h4,h5,h6 { font-family: "Archivo Narrow","Arial Narrow",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:-.01em; line-height:.95; margin:0 0 .5em; }

/* ---- utility surfaces ---- */
.bm-wrap { max-width: var(--bm-maxw); margin: 0 auto; padding: 0 1.5rem; }
.bm-frame { border: 12px solid var(--bm-cream); min-height: 100vh; }
@media (min-width:768px){ .bm-frame{ border-width: 24px; } }

.bm-bg-teal   { background: var(--bm-teal);   color: var(--bm-cream); }
.bm-bg-mustard{ background: var(--bm-mustard); color: var(--bm-teal-d); }
.bm-bg-rose   { background: var(--bm-rose);    color: var(--bm-cream); }
.bm-bg-cream  { background: var(--bm-cream);   color: var(--bm-teal-d); }

/* price-tag notched shape (brand motif, echoed in logo) */
.bm-tag {
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 22%);
  display: inline-block;
  padding: .35rem 1rem .35rem 1.25rem;
  font-family: "Archivo Narrow",sans-serif; font-weight:700; text-transform:uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   Header
   ========================================================================== */
.bm-header { background: var(--bm-teal); border-bottom: var(--bm-line) solid var(--bm-cream); position: sticky; top: 0; z-index: 50; }
.bm-header__top { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding: 1rem 0; }
.bm-brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.bm-brand svg { height: 48px; width:auto; display:block; }
.bm-brand__word { font-family:"Archivo Narrow",sans-serif; font-weight:700; text-transform:uppercase; font-size: clamp(1.9rem,4vw,2.8rem); color:var(--bm-cream); letter-spacing:-.02em; }
.bm-search { display:flex; border:2px solid var(--bm-cream); }
.bm-search input { background:transparent; border:0; color:var(--bm-cream); font-family:"Archivo Narrow",sans-serif; text-transform:uppercase; font-size:1.05rem; padding:.5rem .9rem; width: 14rem; }
.bm-search input::placeholder { color: rgba(243,240,232,.5); }
.bm-search input:focus { outline:2px solid var(--bm-mustard); outline-offset:-2px; }
.bm-search button { background:var(--bm-cream); color:var(--bm-teal); border:0; padding:0 .8rem; cursor:pointer; display:flex; align-items:center; }
.bm-search button svg { width:22px;height:22px; }
@media (max-width: 900px){ .bm-search { display:none; } }

.bm-nav { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; border-top:1px solid rgba(243,240,232,.2); padding:.85rem 0; }
.bm-nav a { font-family:"Archivo Narrow",sans-serif; font-weight:700; text-transform:uppercase; font-size:1.15rem; text-decoration:none; color:var(--bm-cream); }

/* ---- swatch link treatment (signature) ---- */
.bm-swatch { position: relative; display:inline-block; }
.bm-swatch::after {
  content:""; position:absolute; left:0; bottom:-.18em; width:100%; height:.34em;
  background: var(--bm-mustard);
  transform: scaleX(0); transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference){
  .bm-swatch::after { transition: transform var(--bm-fast) var(--bm-motion); }
}
.bm-swatch:hover::after, .bm-swatch:focus-visible::after { transform: scaleX(1); }
.bm-nav a { color: var(--bm-cream); }
.bm-nav a:hover, .bm-nav a:focus-visible { color: var(--bm-mustard); }

/* ==========================================================================
   Hero
   ========================================================================== */
.bm-hero { display:grid; border-bottom: var(--bm-line) solid var(--bm-cream); }
@media (min-width:1000px){ .bm-hero{ grid-template-columns: 1fr 1fr; min-height:70vh; } }
.bm-hero__text { padding: 2rem; display:flex; flex-direction:column; justify-content:center; background:var(--bm-teal); }
@media (min-width:768px){ .bm-hero__text{ padding: 4rem; } }
.bm-hero h1 { font-size: clamp(3rem, 9vw, 7rem); margin-bottom:1.5rem; }
.bm-hero h1 .m { color: var(--bm-mustard); }
.bm-hero__lead { font-family:"Archivo Narrow",sans-serif; font-weight:700; text-transform:uppercase; font-size: clamp(1.05rem,2vw,1.4rem); max-width: 30ch; margin:0 0 2rem; }
.bm-hero__art { position:relative; background:var(--bm-mustard); min-height: 340px; overflow:hidden; }
.bm-hero__art .b1,.bm-hero__art .b2 { position:absolute; border:4px solid var(--bm-teal); }
.bm-hero__art .b1 { width:42%; height:55%; top:8%; left:6%; background:var(--bm-rose); transform:rotate(-4deg); }
.bm-hero__art .b2 { width:46%; height:62%; bottom:8%; right:8%; background:var(--bm-cream); transform:rotate(3deg); overflow:hidden; }
.bm-hero__art .b2 img { width:100%;height:100%;object-fit:cover; filter:grayscale(1); mix-blend-mode:multiply; opacity:.85; }
.bm-hero__art .yr { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:"Archivo Narrow",sans-serif; font-weight:700; font-size: clamp(5rem,14vw,10rem); color: rgba(16,38,43,.10); pointer-events:none; }

/* buttons */
.bm-btn { font-family:"Archivo Narrow",sans-serif; font-weight:700; text-transform:uppercase; font-size:1.4rem; padding:.7rem 1.8rem; text-decoration:none; display:inline-block; border:0; cursor:pointer; }
.bm-btn--primary { background:var(--bm-mustard); color:var(--bm-teal); box-shadow: 8px 8px 0 0 var(--bm-cream); }
.bm-btn--rose { background:var(--bm-rose); color:var(--bm-cream); }
@media (prefers-reduced-motion: no-preference){ .bm-btn{ transition: transform var(--bm-fast) var(--bm-motion), background var(--bm-fast) var(--bm-motion); } }
.bm-btn--primary:hover { background:var(--bm-cream); transform: translate(-2px,-2px); }
.bm-btn--rose:hover { background:var(--bm-cream); color:var(--bm-teal); }
.bm-btns { display:flex; flex-wrap:wrap; gap:1rem; }

/* ==========================================================================
   Category panels + swatch-strip signature moment
   ========================================================================== */
.bm-cats { display:grid; grid-template-columns: repeat(2,1fr); border-bottom: var(--bm-line) solid var(--bm-cream); }
@media (min-width:768px){ .bm-cats{ grid-template-columns: repeat(5,1fr); } }
.bm-cat { padding:2rem 1.5rem; text-decoration:none; border-right: var(--bm-line) solid var(--bm-cream); border-bottom: var(--bm-line) solid var(--bm-cream); position:relative; }
@media (min-width:768px){ .bm-cat{ border-bottom:0; } }
.bm-cat h3 { font-size: clamp(1.8rem,3vw,2.4rem); margin:0 0 .35rem; }
.bm-cat span { font-family:"Mulish",sans-serif; font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
@media (prefers-reduced-motion: no-preference){ .bm-cat{ transition: background var(--bm-med) var(--bm-motion); } }

/* the swatch-strip: a row of season color chips under each panel title */
.bm-strip { display:flex; gap:.35rem; margin-top:1rem; }
.bm-strip i { width:1.15rem; height:1.15rem; display:block; border:2px solid var(--bm-teal-d); }
@media (prefers-reduced-motion: no-preference){
  .js-on .bm-cat .bm-strip i { transform: scale(0); transform-origin:center; }
  .js-on .bm-cat.is-in .bm-strip i { transform: scale(1); transition: transform var(--bm-med) var(--bm-motion); }
  .js-on .bm-cat.is-in .bm-strip i:nth-child(2){ transition-delay:60ms; }
  .js-on .bm-cat.is-in .bm-strip i:nth-child(3){ transition-delay:120ms; }
  .js-on .bm-cat.is-in .bm-strip i:nth-child(4){ transition-delay:180ms; }
}

/* ==========================================================================
   Section headers + product posters
   ========================================================================== */
.bm-section { padding: 2.5rem 1.5rem; }
@media (min-width:768px){ .bm-section{ padding: 4rem; } }
.bm-section__head { display:flex; flex-direction:column; gap:1rem; margin-bottom: 3rem; }
@media (min-width:768px){ .bm-section__head{ flex-direction:row; align-items:flex-end; justify-content:space-between; } }
.bm-section__head h2 { font-size: clamp(2.6rem,6vw,5rem); }

.bm-grid { display:grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width:640px){ .bm-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1000px){ .bm-grid{ grid-template-columns: repeat(3,1fr); } }

/* product poster card */
.bm-card { padding: 1.5rem; position:relative; background:var(--bm-cream); color:var(--bm-teal-d); }
.bm-card--rose { background:var(--bm-rose); color:var(--bm-cream); box-shadow: 12px 12px 0 0 var(--bm-mustard); }
.bm-card--mustard { background:var(--bm-mustard); color:var(--bm-teal-d); }
.bm-card__media { display:block; aspect-ratio: 4/5; margin-bottom:1.25rem; overflow:hidden; border:4px solid var(--bm-teal); position:relative; background:var(--bm-mustard); }
.bm-card__media img { width:100%;height:100%;object-fit:cover; filter:grayscale(1); mix-blend-mode:multiply; }
@media (prefers-reduced-motion: no-preference){ .bm-card__media img{ transition: filter var(--bm-med) var(--bm-motion), transform var(--bm-med) var(--bm-motion); } }
.bm-card:hover .bm-card__media img { filter:grayscale(0); transform: scale(1.03); }
.bm-card__badge { position:absolute; top:0; right:0; background:var(--bm-teal); color:var(--bm-cream); font-family:"Archivo Narrow",sans-serif; font-weight:700; text-transform:uppercase; font-size:1.1rem; padding:.35rem .8rem; }
.bm-card__row { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; }
.bm-card h3 { font-size: clamp(1.6rem,3vw,2.1rem); margin:0 0 .2rem; }
.bm-card__merchant { font-family:"Mulish",sans-serif; font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; opacity:.7; }
.bm-card__price { background:var(--bm-mustard); color:var(--bm-teal-d); }
.bm-card--mustard .bm-card__price { background:var(--bm-cream); }
.bm-card__cta { margin-top:1.5rem; display:block; text-align:center; background:var(--bm-teal); color:var(--bm-cream); font-family:"Archivo Narrow",sans-serif; font-weight:700; text-transform:uppercase; font-size:1.35rem; padding:.6rem; text-decoration:none; }
@media (prefers-reduced-motion: no-preference){ .bm-card__cta{ transition: background var(--bm-fast) var(--bm-motion); } }
.bm-card__cta:hover { background: var(--bm-rose); }

/* ==========================================================================
   Comparison table (poster style — brand-specific, NOT the checkmark slop table)
   ========================================================================== */
.bm-compare { background:var(--bm-cream); color:var(--bm-teal-d); padding: 2.5rem 1.5rem; border-top: var(--bm-line) solid var(--bm-teal); }
@media (min-width:768px){ .bm-compare{ padding:4rem; } }
.bm-compare__inner { max-width: 60rem; margin:0 auto; }
.bm-compare h2 { text-align:center; font-size: clamp(2.6rem,6vw,5rem); color:var(--bm-teal); margin-bottom:3rem; }
.bm-ctable { border:4px solid var(--bm-teal); }
.bm-ctable__head, .bm-ctable__row { display:grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; align-items:center; }
.bm-ctable__head { background:var(--bm-teal); color:var(--bm-cream); font-family:"Archivo Narrow",sans-serif; font-weight:700; text-transform:uppercase; padding:1rem; font-size:1.15rem; }
.bm-ctable__row { padding:1.25rem 1rem; border-bottom:4px solid var(--bm-teal); }
.bm-ctable__row:last-child { border-bottom:0; }
.bm-ctable__row .r-name { font-family:"Archivo Narrow",sans-serif; font-weight:700; text-transform:uppercase; font-size:1.6rem; }
.bm-ctable__row .r-c { text-align:center; font-weight:800; }
.bm-ctable__row .r-price { text-align:right; font-family:"Archivo Narrow",sans-serif; font-weight:700; font-size:1.9rem; }

/* ==========================================================================
   Editorial / article content (prose)
   ========================================================================== */
.bm-prose { max-width: 46rem; margin: 0 auto; }
.bm-prose h2 { font-size: clamp(2rem,4vw,3rem); color: var(--bm-mustard); margin-top:2.5rem; }
.bm-prose h3 { font-size: clamp(1.5rem,3vw,2rem); margin-top:2rem; }
.bm-prose p, .bm-prose li { font-family:"Mulish",sans-serif; text-transform:none; }
.bm-prose a { color: var(--bm-mustard); text-decoration: underline; text-underline-offset: 3px; }
.bm-prose img { border:4px solid var(--bm-cream); margin: 2rem 0; }
.bm-prose ul, .bm-prose ol { padding-left: 1.2rem; }
.bm-prose blockquote { border-left: 6px solid var(--bm-rose); margin: 2rem 0; padding: .5rem 0 .5rem 1.5rem; font-family:"Archivo Narrow",sans-serif; text-transform:uppercase; font-size:1.4rem; }

/* editorial guides section on homepage */
.bm-guides { display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:768px){ .bm-guides{ grid-template-columns: repeat(3,1fr); } }
.bm-guide { background:var(--bm-teal); border:4px solid var(--bm-cream); text-decoration:none; color:var(--bm-cream); display:flex; flex-direction:column; }
.bm-guide__media { display:block; aspect-ratio:16/10; overflow:hidden; border-bottom:4px solid var(--bm-cream); }
.bm-guide__media img { width:100%;height:100%;object-fit:cover; filter:grayscale(1); mix-blend-mode:screen; }
.bm-guide__body { padding:1.25rem; }
.bm-guide h3 { font-size:1.6rem; margin:0 0 .5rem; }
.bm-guide p { font-family:"Mulish",sans-serif; text-transform:none; font-size:.95rem; margin:0; }

/* trust strip */
.bm-trust { display:grid; grid-template-columns: repeat(2,1fr); gap:0; background:var(--bm-mustard); color:var(--bm-teal-d); border-bottom: var(--bm-line) solid var(--bm-cream); }
@media (min-width:768px){ .bm-trust{ grid-template-columns: repeat(4,1fr); } }
.bm-trust > div { padding:2rem 1.5rem; border-right:4px solid var(--bm-teal); }
.bm-trust h4 { font-size:1.4rem; margin:0 0 .3rem; display:flex; gap:.5rem; align-items:center; }
.bm-trust svg { width:26px;height:26px; flex:none; }
.bm-trust p { font-family:"Mulish",sans-serif; text-transform:none; font-size:.85rem; margin:0; font-weight:700; }

/* ==========================================================================
   Footer
   ========================================================================== */
.bm-footer { background:var(--bm-teal); border-top: var(--bm-line) solid var(--bm-cream); padding: 4rem 0 2rem; }
.bm-footer__grid { display:grid; grid-template-columns:1fr; gap:3rem; margin-bottom:3rem; }
@media (min-width:768px){ .bm-footer__grid{ grid-template-columns: 2fr 1fr 1fr; } }
.bm-footer h5 { font-size: clamp(2.4rem,5vw,3.4rem); margin:0 0 1rem; }
.bm-footer__blurb { font-family:"Archivo Narrow",sans-serif; text-transform:uppercase; color:var(--bm-mustard); font-size:1.15rem; max-width:34ch; }
.bm-footer h6 { font-size:1.5rem; color:var(--bm-mustard); }
.bm-footer ul { list-style:none; padding:0; margin:0; }
.bm-footer li { margin:.4rem 0; }
.bm-footer li a { font-family:"Mulish",sans-serif; font-weight:800; text-transform:uppercase; font-size:.85rem; text-decoration:none; }
.bm-social { display:flex; gap:1rem; margin-top:1.5rem; }
.bm-social a svg { width:30px;height:30px; }
.bm-footer__bottom { border-top:2px solid rgba(243,240,232,.2); padding-top:2rem; display:flex; flex-direction:column; gap:1rem; justify-content:space-between; }
@media (min-width:768px){ .bm-footer__bottom{ flex-direction:row; align-items:center; } }
.bm-footer__bottom p, .bm-footer__bottom a { font-family:"Archivo Narrow",sans-serif; text-transform:uppercase; color:rgba(243,240,232,.6); font-size:1rem; text-decoration:none; }
.bm-footer__legal { display:flex; gap:1.5rem; }

/* ==========================================================================
   Reveal (block-wipe) — content always present; overlay panel wipes away
   ========================================================================== */
.bm-reveal { position: relative; }
@media (prefers-reduced-motion: no-preference){
  .js-on .bm-reveal::before{
    content:""; position:absolute; inset:0; z-index:2; background:var(--bm-teal);
    transform-origin: right center;
  }
  .js-on .bm-reveal.is-in::before{
    transform: scaleX(0);
    transition: transform var(--bm-med) var(--bm-motion);
  }
}

/* ---- Layer 0 cheap wins ---- */
::selection { background: var(--bm-mustard); color: var(--bm-teal-d); }
:focus-visible { outline: 3px solid var(--bm-mustard); outline-offset: 2px; }
html { scrollbar-color: var(--bm-mustard) var(--bm-teal); }
hr { border:0; border-top: 4px solid var(--bm-cream); margin: 2rem 0; }

/* breadcrumbs / misc woo */
.bm-crumbs { padding: 1rem 1.5rem; font-family:"Archivo Narrow",sans-serif; text-transform:uppercase; font-size:1rem; }
.bm-crumbs a { text-decoration:none; }
.bm-skip { position:absolute; left:-9999px; }
.bm-skip:focus { left:1rem; top:1rem; background:var(--bm-mustard); color:var(--bm-teal-d); padding:.5rem 1rem; z-index:100; }