/* ==========================================================================
   Beat Freaq — section identity inside The Pillar (2026-10-07, reopened Pass 1).
   Loaded after food-edition.css by beat-freaq.html and its feature pages.
   Same locked 4BQ system (cream / coal / ember, Anton + Archivo + Space Mono);
   Beat Freaq gets its own room through a deep "after-dark" band in the
   editorial teal, a faint speaker-cloth weave, and track-style numbering.
   No equalizers, no fake equipment, nothing that moves or makes sound.
   ========================================================================== */

.food-edition{
  --bf-night:#06222F;            /* editorial teal-900, a shade deeper */
  --bf-night-2:var(--editorial-teal-900);
  --bf-cloth:rgba(253,249,238,.045);
}

/* ---------- section band (landing masthead + article headers) ---------- */
.bf-band{
  position:relative;color:var(--cream);
  background-color:var(--bf-night);
  /* speaker-cloth weave: two fine crossed hatchings, barely there */
  background-image:
    repeating-linear-gradient(45deg, var(--bf-cloth) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, var(--bf-cloth) 0 1px, transparent 1px 7px),
    linear-gradient(160deg, var(--bf-night-2), var(--bf-night) 60%, #030303);
  border-bottom:4px solid var(--ember);
  margin:0 calc(-1 * clamp(16px,3vw,48px)) 0;
  padding:clamp(26px,4.2vw,54px) clamp(16px,3vw,48px) clamp(24px,3.6vw,44px);
}
.bf-band a{color:var(--cream);}
.bf-kicker{
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember-ink,#C0331A);margin:0 0 10px;
}
.bf-kicker a{color:var(--ember-ink,#C0331A);text-decoration:none;}
.bf-kicker a:hover{text-decoration:underline;}
.bf-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(56px,11vw,150px);line-height:.86;letter-spacing:.005em;margin:0 0 14px;
}
.bf-title .bf-q{color:var(--ember-ink,#C0331A);}
.bf-dek{
  font-family:var(--body-serif);font-size:clamp(17px,1.9vw,21px);line-height:1.5;
  max-width:58ch;margin:0;opacity:.92;
}

/* ---------- landing: hero photo ---------- */
.bf-hero{margin:0 0 6px;}
.bf-hero img{width:100%;max-height:640px;object-fit:cover;object-position:50% 75%;}
.bf-credit{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink);
  opacity:.68;margin:6px 0 0;
}

/* ---------- landing: track-numbered feature blocks ---------- */
.bf-feature{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3vw,44px);
  align-items:center;padding:clamp(28px,4vw,52px) 0;border-bottom:1px solid var(--rule);
}
.bf-feature--flip .bf-feature-media{order:2;}
.bf-feature-media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;}
.bf-feature--wide .bf-feature-media img{aspect-ratio:3/2;object-position:50% 45%;}
.bf-track{
  display:flex;align-items:baseline;gap:12px;margin:0 0 8px;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}
.bf-track b{font-family:var(--display);font-weight:400;font-size:44px;line-height:1;color:var(--ember-ink,#C0331A);letter-spacing:0;}
.bf-subject{
  font-family:var(--display-heavy);font-weight:400;text-transform:uppercase;
  font-size:clamp(16px,1.8vw,20px);letter-spacing:.04em;margin:0 0 2px;color:var(--ember-ink,#C0331A);
}
.bf-headline{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(40px,5.6vw,76px);line-height:.95;margin:0 0 14px;text-wrap:balance;
}
.bf-headline a{text-decoration:none;}
.bf-headline a:hover{color:var(--ember-ink,#C0331A);}
.bf-teaser{font-family:var(--body-serif);font-size:18px;line-height:1.55;max-width:52ch;margin:0 0 18px;}
.bf-cta{
  display:inline-block;font-family:var(--display-heavy);text-transform:uppercase;font-size:14px;
  letter-spacing:.02em;text-decoration:none;background:var(--coal);color:var(--cream) !important;
  padding:12px 18px;border-radius:3px;
}
.bf-cta:hover{background:var(--ember);color:var(--coal) !important;}

/* ---------- landing: about the section ---------- */
.bf-about{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,3vw,44px);
  padding:clamp(28px,4vw,48px) 0;border-bottom:1px solid var(--rule);
}
.bf-about h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,46px);line-height:.95;margin:0;
}
.bf-about p{font-family:var(--body-serif);font-size:18px;line-height:1.55;margin:0 0 12px;max-width:60ch;}

/* ---------- landing: archive ---------- */
.bf-archive{padding:clamp(28px,4vw,48px) 0 10px;}
.bf-archive h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,46px);line-height:.95;margin:0 0 6px;
}
.bf-archive-list{list-style:none;padding:0;margin:14px 0 0;border-top:2px solid var(--coal);}
.bf-archive-list li{border-bottom:1px solid var(--rule);}
.bf-archive-list a{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:16px 0;text-decoration:none;
}
.bf-archive-list a:hover .bf-arc-head{color:var(--ember-ink,#C0331A);}
.bf-arc-no{font-family:var(--display);font-size:34px;line-height:1;color:var(--ember-ink,#C0331A);}
.bf-arc-meta{display:block;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;}
.bf-arc-head{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.6vw,32px);line-height:1;margin:4px 0;}
.bf-arc-teaser{display:block;font-family:var(--body-serif);font-size:16px;line-height:1.45;opacity:.85;}
.bf-arc-go{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}

/* ---------- article pages ---------- */
.bf-article-head .bf-title{font-size:clamp(46px,8.4vw,112px);}
.bf-article-head .bf-standfirst{
  font-family:var(--display-heavy);text-transform:uppercase;color:var(--ember-ink,#C0331A);
  font-size:clamp(15px,1.8vw,19px);line-height:1.3;margin:0 0 16px;max-width:52ch;
}
.bf-article-body{max-width:980px;margin:0 auto;padding-top:clamp(22px,3vw,36px);}
.bf-article-body .ap-prose{max-width:68ch;margin-inline:auto;}
.bf-article-body .ap-prose p{line-height:1.7;}
.bf-article-body .ap-prose h3{margin-top:44px;padding-top:14px;border-top:1px solid var(--rule);}
.bf-article-body .ap-prose h3 .bf-sec-no{color:var(--ember-ink,#C0331A);margin-right:10px;}
.bf-article-body .pull-quote{max-width:30ch;}
/* Interview question: the 4BQ voice, set apart from Jah's answers */
.bf-article-body .ap-prose p.bf-ask{
  font-family:var(--mono);font-weight:700;font-size:13.5px;line-height:1.5;letter-spacing:.03em;
  text-transform:uppercase;color:var(--editorial-teal-700);margin:26px 0 10px;
}
.bf-article-body .ap-prose p.bf-ask::before{content:"4BQ \2014\00A0";color:var(--ember-ink,#C0331A);}
.bf-intro{
  font-family:var(--body-serif);font-size:clamp(18px,2vw,21px) !important;line-height:1.6 !important;
}
.bf-figure{margin:30px 0;}
.bf-figure img{width:100%;}
.bf-figure--portrait{max-width:520px;margin-inline:auto;}
.bf-figure--portrait img{aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;}
.bf-figure figcaption{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;line-height:1.5;opacity:.75;margin-top:8px;
}
.bf-thanks{background:rgba(5,45,62,.06);border-left:4px solid var(--editorial-teal-700);padding:6px 22px 10px;margin:40px 0 0;}
.bf-thanks h3{border-top:0 !important;margin-top:18px !important;padding-top:0 !important;}

/* related feature + returns */
.bf-next{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:20px;align-items:center;
  margin:48px 0 0;padding:20px;background:var(--bf-night);color:var(--cream);
  border-bottom:4px solid var(--ember);text-decoration:none;
}
.food-edition a.bf-next{color:var(--cream);}  /* beats the shared a{color:inherit} */
.bf-next img{width:100%;aspect-ratio:3/2;object-fit:cover;}
.bf-next .bf-kicker{margin-bottom:6px;}
.bf-next .bf-next-head{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(28px,3.4vw,42px);line-height:.95;margin:0 0 6px;}
.bf-next .bf-next-sub{font-family:var(--body-serif);font-size:16px;line-height:1.45;margin:0 0 10px;opacity:.9;}
.bf-next .bf-next-go{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember-ink,#C0331A);}
.bf-next:hover .bf-next-head{color:var(--ember-ink,#C0331A);}
.bf-returns{
  display:flex;flex-wrap:wrap;gap:12px 28px;margin:26px 0 10px;padding-top:16px;border-top:2px solid var(--coal);
}

@media (max-width:760px){
  .bf-feature,.bf-about{grid-template-columns:1fr;}
  .bf-feature--flip .bf-feature-media{order:0;}
  .bf-feature-media img{aspect-ratio:4/3;}
  .bf-next{grid-template-columns:1fr;}
  .bf-archive-list a{grid-template-columns:44px minmax(0,1fr);}
  .bf-arc-go{grid-column:2;}
}

/* Pull quotes inside .ap-prose: keep the display face (the shared
   .ap-prose blockquote rule would otherwise set them as small italics),
   and close the quote mark after the words, not after the attribution. */
.bf-article-body .ap-prose blockquote.pull-quote{
  font-family:var(--display-heavy);font-style:normal;font-size:clamp(22px,2.8vw,32px);line-height:1.22;
  border-left:4px solid var(--ember);padding:2px 0 2px 22px;margin:30px 0;max-width:30ch;
}
.bf-article-body .ap-prose blockquote.pull-quote::after{content:none;}
.bf-pq::after{content:"\201D";color:var(--ember-ink,#C0331A);}
/* G009 accessibility (WCAG 1.4.3): orange TEXT on light backgrounds uses the darker brand red-orange
   (--ember-ink, #C0331A, ~5.4:1 on cream; #FE4B0B was 3.2:1). Dark sections keep the original orange
   (~6:1 on coal). Backgrounds, borders and buttons are unchanged. */
.bf-band,.bf-next{--ember-ink:#FE4B0B;}