/* ============================================================
   BITE BACK APPLE — EDITORIAL POSTER LAYER
   One tone: printed-paper ground, red flat fields, film photography.
   Remove the <link> to this file on each page to restore the classic design.

   RULES
   1  One ink per field. Red field -> cream ink only. Paper field -> ink
      black, with red reserved for labels, links and the primary button.
   2  Type has three roles: DISPLAY (Archivo Black, caps),
      LABEL (Murecho 800, caps, wide tracking), TEXT (Murecho 500).
      Buttons and nav are LABEL — never display.
   3  One photographic family: warm, slightly faded film. Nothing crops
      a subject mid-form; nothing bounces.
   ============================================================ */

:root{
  --bba-paper:#FCE4C0;
  --bba-paper-lite:#FDF0DC;
  --bba-red:#E84E3B;
  --bba-ink:#14100E;
}

/* ---------- 1. GROUNDS ---------- */
body{ background:#FCE4C0 !important; }

[style*="background: #FDECC3"],
[style*="background: rgb(253, 236, 195)"]{ background-color:var(--bba-paper) !important; }

[style*="background: #E84D3B"],
[style*="background: rgb(232, 77, 59)"]{ background-color:var(--bba-red) !important; }

[style*="background: #fff"],
[style*="background: rgb(255, 255, 255)"]{ background-color:var(--bba-paper-lite) !important; }


/* ---------- 2. TYPE ---------- */

/* DISPLAY */
h1, h2,
.bba-hero-h1, .bba-prod-name, .bba-h1, .bba-h2, .bba-band-title, .bba-band-h2{
  font-family:'Archivo','Murecho','Noto Sans JP',sans-serif !important;
  font-weight:900 !important;
  font-stretch:78% !important;
  letter-spacing:-.005em !important;
}
.bba-hero-h1{ text-transform:uppercase !important; line-height:.94 !important; }
.bba-prod-name{ text-transform:uppercase !important; line-height:.94 !important; }
@media (min-width:701px){
  .bba-hero-h1{ font-size:68px !important; }
  .bba-prod-name{ font-size:58px !important; }
  .bba-band-h2{ font-size:34px !important; letter-spacing:.04em !important; }
}

/* display ink follows its ground: black on paper, cream on red */
.bba-hero-h1, .bba-prod-name, .bba-h1, .bba-band-title,
h1[style*="color: #E84D3B"], h2[style*="color: #E84D3B"],
h1[style*="color: rgb(232, 77, 59)"], h2[style*="color: rgb(232, 77, 59)"],
.bba-h2[style*="color: #E84D3B"], .bba-h2[style*="color: rgb(232, 77, 59)"]{
  color:var(--bba-ink) !important;
}
.bba-band-h2,
.bba-prodband .bba-h2,
[style*="background: #E84D3B"] h2, [style*="background: rgb(232, 77, 59)"] h2{
  color:var(--bba-paper-lite) !important;
}

/* LABEL — nav, buttons, eyebrows. Never display type. */
button[data-go],
.bba-header a,
.bba-footer nav p,
.bba-area-head p:first-child{
  font-family:'Murecho','Noto Sans JP',sans-serif !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
}
button[data-go]{ font-size:14px !important; }


/* ---------- 3. RED FIELDS: cream ink only ---------- */
/* every white ink in the design becomes the one cream */
[style*="color: #fff"], [style*="color: rgb(255, 255, 255)"],
[style*="color: #ffffff"],
[style*="color: rgba(255,255,255,0.85)"],
[style*="color: rgba(255, 255, 255, 0.85)"]{ color:var(--bba-paper-lite) !important; }
[style*="stroke=\"#fff\""]{ stroke:var(--bba-paper-lite) !important; }
svg[stroke="#fff"]{ stroke:var(--bba-paper-lite) !important; }
svg [fill="#fff"]{ fill:var(--bba-paper-lite) !important; }
.bba-footer p, .bba-footer a, .bba-footer span{ color:var(--bba-paper-lite) !important; }
.bba-header{ background-color:var(--bba-red) !important; }
.bba-header a{ color:var(--bba-paper-lite) !important; }
/* the logo artwork itself is the cream token — no filter */
.bba-header .bba-logo img,
.bba-footer img[src*="logo_bba"]{ filter:none !important; }
.bba-header svg{ stroke:var(--bba-paper-lite) !important; }


/* ---------- 4. BUTTONS: one system, classical square-ish corners ---------- */
/* pills flatten to a 3px corner; only the round icon buttons stay round */
a[class*="btn"], a[style*="background: #E84D3B"][style*="text-decoration: none"],
a[style*="background: rgb(232, 77, 59)"][style*="text-decoration: none"],
button.bba-peek, span[style*="background: #d8d0bd"],
.bba-footer a[href*="instagram"],
span[style*="background: rgb(216, 208, 189)"]{ border-radius:3px !important; }
.bba-footer a[href*="instagram"]{ border-color:rgba(247,238,218,.55) !important; }
button.bba-peek img{ border-radius:2px !important; }
.bba-impact-btn{ border-radius:3px !important; }
.js-prev, .js-next:not(.bba-peek){ border-radius:2px !important; }

/* primary: solid red, cream label */
a[style*="background: #E84D3B"][style*="text-decoration: none"],
a[style*="background: rgb(232, 77, 59)"][style*="text-decoration: none"],
button[style*="background: #E84D3B"],
button[style*="background: rgb(232, 77, 59)"]{
  background-color:var(--bba-red) !important;
  color:var(--bba-paper-lite) !important;
  border:none !important;
  font-family:'Murecho','Noto Sans JP',sans-serif !important;
  font-weight:800 !important; letter-spacing:.1em !important;
  transition:background-color .18s ease !important;
}
a[style*="background: #E84D3B"][style*="text-decoration: none"]:hover,
a[style*="background: rgb(232, 77, 59)"][style*="text-decoration: none"]:hover,
button[style*="background: #E84D3B"]:hover,
button[style*="background: rgb(232, 77, 59)"]:hover{
  background-color:#CE3F2C !important; transform:none !important;
}
/* disabled: warm cream ground, same label treatment */
span[style*="background: #d8d0bd"],
span[style*="background: rgb(216, 208, 189)"],
button[style*="background: #d8d0bd"],
button[style*="background: rgb(216, 208, 189)"]{
  background-color:#DBCDAB !important;
  color:#6F6552 !important;
  border:none !important;
  font-family:'Murecho','Noto Sans JP',sans-serif !important;
  font-weight:800 !important; letter-spacing:.1em !important;
}
/* secondary: hairline outline in ink */
button[style*="border: 1.5px solid #E84D3B"]:not([style*="background: #E84D3B"]),
button[style*="border: 1.5px solid rgb(232, 77, 59)"]:not([style*="background: rgb(232, 77, 59)"]){
  border:1.5px solid var(--bba-ink) !important;
  color:var(--bba-ink) !important;
  font-family:'Murecho','Noto Sans JP',sans-serif !important;
  font-weight:800 !important; letter-spacing:.1em !important;
}


/* ---------- 5. PHOTOGRAPHY ----------
   No global colour filter: the photographs are already graded as artwork,
   and a CSS filter both dulled them and forced a GPU resample of the
   halftone grain, which is what produced the moire on the key visual. */


/* ---------- 6. KEY VISUAL: red plate, whole photograph ---------- */
/* the first view fits the window: photo and headline both complete */
@media (min-width:701px){
  .bba-hero-grid{
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    align-items:stretch !important;
    grid-template-columns:1fr auto !important;
  }
  /* one centred measure inside the left field: equal air left and right */
  .bba-hero-text{
    display:grid !important;
    box-sizing:border-box !important;
    max-width:none !important;
    width:100% !important;
    grid-template-columns:minmax(0, min(660px, 88%)) !important;
    justify-content:center !important;
    justify-items:stretch !important;
    align-content:center !important;
    padding:clamp(44px, 5.5vh, 84px) 48px !important;
  }
  .bba-hero-text > p{ max-width:100% !important; }
  .bba-hero-h1{ max-width:100% !important; }
  .bba-impact-btn{ justify-self:start !important; padding:16px 28px !important; gap:14px !important; }
  .bba-impact-btn span span:first-child{ font-size:12px !important; letter-spacing:.04em !important; }
  .bba-impact-btn span span:last-child{ font-size:18px !important; }
  .bba-impact-btn svg{ width:22px !important; height:22px !important; }
  .bba-hero-h1{ font-size:clamp(48px, 4.2vw, 84px) !important; margin-bottom:26px !important; }
  .bba-hero-text > p{ font-size:19px !important; line-height:1.9 !important; }
  .bba-hero-text > p:first-child{ font-size:17px !important; }
  .bba-hero-text > p:nth-of-type(2), .bba-hero-text > p:nth-of-type(3){ margin-bottom:18px !important; }
  .bba-impact-btn{ margin-top:26px !important; }
  /* the photograph's height, not its column width, decides the KV height:
     it fills the first view without ever being trimmed */
  .bba-kv-arch img{
    width:auto !important;
    max-width:100% !important;
    height:calc(100svh - 56px) !important;
    max-height:calc(100svh - 56px) !important;
    margin-left:auto !important; margin-right:0 !important;
  }
  .bba-kv-arch{ width:100% !important; }
  .bba-kv-field{ padding-right:0 !important; }
}
/* the whole photograph, never trimmed: slightly reduced and set to the right,
   sitting on the page's own paper — no background colour is introduced */
.bba-hero-grid{ background:transparent !important; }
.bba-hero-text{ background:transparent !important; }
.bba-kv-field{
  background:transparent !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
  position:relative !important;
  min-height:0 !important;
  height:auto !important;
  padding:0 !important;
}
.bba-kv-arch{ position:static !important; inset:auto !important; display:block !important; width:auto !important; height:auto !important; }
.bba-kv-arch img{
  width:100%;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  filter:none !important;
}
.bba-kv-caption{ display:none !important; }
@media (max-width:700px){
  .bba-hero-image.bba-kv-field{
    min-height:0 !important; height:auto !important;
    background:transparent !important;
    font-size:0 !important; line-height:0 !important;
  }
  .bba-kv-arch{ height:auto !important; width:100% !important; display:block !important; }
  .bba-kv-arch img{ height:auto !important; width:100% !important; display:block !important; margin-bottom:-1px !important; }
  .bba-kv-caption{ display:none; }
}


/* ---------- 7. MOTION: quiet. Photographs never move. ---------- */
@keyframes bbaRise{ from{ transform:translateY(14px); opacity:.001 } to{ transform:none; opacity:1 } }
.bba-boing, .bba-snap, .bba-drop, .bba-pop{
  animation:bbaRise .5s cubic-bezier(.2,.7,.2,1) both !important;
}
.bba-thud{ animation:none !important; }
.bba-jiggle:hover, .bba-impact-btn:hover{ animation:none !important; }
img.bba-boing, .bba-area-image.bba-boing, #member-boat.bba-boing{ animation:none !important; }
.bba-kv{ animation:none !important; }


/* ---------- 8. LINKS ---------- */
a{ color:var(--bba-red); text-underline-offset:3px; }
a:hover{ color:#CE3F2C; }
.bba-footer a{ color:var(--bba-paper-lite); }
.bba-footer a:hover{ color:var(--bba-paper-lite); opacity:.72; }

/* ---------- 9. HERO INK: English display in red, Japanese label in ink ---------- */
.bba-hero-text > p:first-child{ color:var(--bba-ink) !important; }
.bba-hero-text .bba-hero-h1{ color:var(--bba-red) !important; }

/* ---------- 9. HEADER: identical on every page (SP) ---------- */
@media (max-width:700px){
  .bba-header{ padding:14px 16px !important; }
  .bba-header-links{ gap:10px !important; }
  .bba-shoplink{ font-size:12px !important; }
  .bba-logo img{ height:40px !important; }
}

/* ---------- 10. LINEUP BAND: three products read as one set ---------- */
@media (min-width:1120px){
  .bba-bandgrid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}
@media (min-width:1120px) and (max-width:1320px){
  .bba-bandgrid a{ grid-template-columns:104px minmax(0,1fr) !important; gap:18px !important; }
  .bba-bandgrid a .bba-prod-name, .bba-bandgrid a h3{ font-size:24px !important; }
}
@media (min-width:701px) and (max-width:1119px){
  .bba-bandgrid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}


/* ---------- 11. SP KEY VISUAL ----------
   One poster panel instead of a long photograph: the plate is cropped to the
   first view and the two display lines are overprinted on it, low left, on a
   fade of the page's own paper. Motion is a print being pulled — a slow
   curtain, a settling exposure, lines rising once. Desktop is untouched. */
.bba-kv-sp{ display:none; }
@media (max-width:700px){
  .bba-hero-grid{ gap:0 !important; }

  .bba-hero-image.bba-kv-field{
    position:relative !important;
    display:block !important;
    height:clamp(430px, 122vw, 560px) !important;
    min-height:0 !important;
    overflow:hidden !important;
    background:var(--bba-paper) !important;
  }
  .bba-kv-arch{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    clip-path:inset(0 0 100% 0);
    animation:bbaKvCurtain 1.3s cubic-bezier(.62,.02,.2,1) .12s both;
  }
  .bba-kv-arch img{
    width:100% !important; height:100% !important;
    display:block !important; margin:0 !important;
    object-fit:cover !important; object-position:50% 100% !important;
    animation:none;
  }

  /* the display lines move off the paper below and onto the photograph */
  .bba-hero-text > p:first-child,
  .bba-hero-text .bba-hero-h1{
    position:absolute !important; width:1px !important; height:1px !important;
    margin:0 !important; padding:0 !important; overflow:hidden !important;
    clip-path:inset(50%) !important; white-space:nowrap !important;
  }
  .bba-hero-text{ padding:26px 20px 40px !important; }

  /* the display sets down the left channel of the plate: the jar stays clear */
  .bba-kv-sp{
    display:block; position:absolute; left:20px; top:22px; right:auto; bottom:auto;
    z-index:2; padding:0; background:none; pointer-events:none; will-change:transform;
  }
  .bba-kv-sp-ja{
    margin:0 0 14px; font-family:'Murecho','Noto Sans JP',sans-serif;
    font-weight:800; font-size:14px; letter-spacing:.14em; line-height:1.5;
    color:var(--bba-ink); opacity:0;
    animation:bbaKvFade 1.1s cubic-bezier(.16,1,.3,1) 1.02s both;
  }
  .bba-kv-sp-en{ margin:0; display:block; }
  .bba-kv-sp-en .l{ display:block; overflow:hidden; }
  .bba-kv-sp-en .l i{
    display:block; font-style:normal;
    font-family:'Archivo','Murecho','Noto Sans JP',sans-serif;
    font-weight:900; font-stretch:78%;
    font-size:clamp(42px, 13vw, 56px); line-height:1.06;
    letter-spacing:-.012em; text-transform:uppercase;
    color:var(--bba-red); transform:translateY(106%);
    animation:bbaKvLine 1.05s cubic-bezier(.16,1,.3,1) both;
  }
  .bba-kv-sp-en .l:nth-child(1) i{ animation-delay:1.12s; }
  .bba-kv-sp-en .l:nth-child(2) i{ animation-delay:1.21s; }
  .bba-kv-sp-en .l:nth-child(3) i{ animation-delay:1.30s; }
  .bba-kv-sp-en .l:nth-child(4) i{ animation-delay:1.39s; }
  .bba-kv-sp-en .l:nth-child(5) i{ animation-delay:1.48s; }
}
@keyframes bbaKvCurtain{ from{ clip-path:inset(0 0 100% 0) } to{ clip-path:inset(0 0 0 0) } }
@keyframes bbaKvLine{ from{ transform:translateY(106%) } to{ transform:translateY(0) } }
@keyframes bbaKvFade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@keyframes bbaKvRule{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

@media (prefers-reduced-motion:reduce){
  .bba-kv-arch, .bba-kv-arch img, .bba-kv-sp-ja, .bba-kv-sp-en .l i{
    animation:none !important; clip-path:none !important;
    transform:none !important; opacity:1 !important; filter:none !important;
  }
}