/* ==========================================================================
   Food edition — shared stylesheet for the Food for the Soul spread and its
   article pages (food.html, food-menu-2027.html, iron-chef.html, side-guy.html).
   Starting values per food-tokens.css from the 2026-09-10 build package;
   expanded here with the actual components. Google Fonts are already loaded
   by each page's own @import (same families as the cover) — not repeated here.
   Cover stylesheet (4bq_cover_v1.html) is untouched by this file.
   ========================================================================== */

.food-edition{
  --cream:#FDF9EE; --coal:#030303; --ember:#FE4B0B;
  --paper:var(--cream); --ink:var(--coal);
  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --display-heavy:'Archivo Black',Impact,'Arial Narrow',sans-serif;
  --body:'Archivo',system-ui,sans-serif;
  --body-serif:Georgia,'Times New Roman',serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --rule: rgba(3,3,3,.45);
  --placeholder-fill: rgba(3,3,3,.055);
  --placeholder-border: rgba(3,3,3,.22);
  --fold-shadow: rgba(3,3,3,.10);
  /* Editorial secondary palette — an accent vocabulary for chapter/category
     identity (e.g. this pass's vendor-category panels), not a replacement
     for the core cream/black/orange identity. Use sparingly and only where
     a specific chapter or piece of artwork calls for it. */
  --editorial-teal-900:#052D3E;
  --editorial-teal-700:#01435D;
  --editorial-teal-500:#004D67;
  --editorial-terracotta:#D15F20;
  --editorial-rust:#AE2514;
  --editorial-blush:#E1B2A8;
  --spread-max-width: 1680px;
  --body-size: 18px;
  --body-leading: 1.6;
  --gutter-width: 32px;
  color:var(--ink); background:var(--paper); font-family:var(--body);
  font-size:var(--body-size); line-height:var(--body-leading);
  margin:0; -webkit-font-smoothing:antialiased;
}
.food-edition *{box-sizing:border-box;}
.food-edition a{color:inherit;}
.food-edition img{display:block;max-width:100%;}
.food-edition :focus-visible{outline:2px solid var(--ember);outline-offset:2px;}

/* ---------- nav band ---------- */
.food-nav{
  display:flex;align-items:center;gap:16px;
  background:var(--coal);color:var(--cream);
  padding:10px clamp(14px,2.6vw,28px);
}
.food-nav .fn-mark img{height:26px;width:auto;display:block;}
.food-nav .fn-section{
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember-ink,#C0331A);border-left:1px solid rgba(253,249,238,.3);
  padding-left:14px;margin-left:2px;white-space:nowrap;
}
.food-nav .fn-links{display:flex;align-items:center;gap:clamp(10px,2vw,18px);margin-left:auto;}

/* Contents menu — native <details>, no JS, same pattern as the FAQ accordion */
.food-nav .fn-contents{position:relative;}
.food-nav .fn-contents summary{
  cursor:pointer;list-style:none;font-family:var(--mono);font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cream);
  display:flex;align-items:center;gap:6px;padding:6px 2px;
}
.food-nav .fn-contents summary::-webkit-details-marker{display:none;}
.food-nav .fn-contents summary::after{content:"\25BE";color:var(--ember-ink,#C0331A);font-size:10px;}
.food-nav .fn-contents[open] summary::after{content:"\25B4";}
.food-nav .fn-menu{
  position:absolute;top:calc(100% + 10px);left:0;z-index:20;
  display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:2px 18px;
  background:var(--coal);border:1px solid rgba(253,249,238,.2);border-radius:3px;
  padding:14px 18px;min-width:280px;
}
.food-nav .fn-menu a{
  font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--cream);opacity:.8;
  padding:6px 0;white-space:nowrap;
}
.food-nav .fn-menu a:hover{opacity:1;color:var(--ember-ink,#C0331A);}
.food-nav .fn-menu a[aria-current="page"]{opacity:1;color:var(--ember-ink,#C0331A);}
.food-nav .fn-cta{
  font-family:var(--display-heavy);text-transform:uppercase;font-size:12px;
  letter-spacing:.01em;text-decoration:none;background:var(--ember);color:var(--coal);
  padding:8px 14px;border-radius:3px;white-space:nowrap;
}
@media (max-width:560px){
  .food-nav .fn-section{display:none;}
  .food-nav .fn-menu{grid-template-columns:1fr;min-width:220px;}
}

/* ---------- dev notice ---------- */
.food-devnotice{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink);
  opacity:.55;text-align:center;padding:8px 14px;
}

/* ---------- shell / spread ---------- */
.food-shell{max-width:var(--spread-max-width);margin:0 auto;padding:0 clamp(16px,3vw,48px) 40px;}

.food-section-title{
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember-ink,#C0331A);margin:28px 0 4px;
}
.food-section-h1{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(30px,4.2vw,46px);line-height:.95;margin:0 0 18px;text-wrap:balance;
}

.food-spread{display:flex;gap:0;align-items:stretch;}
.fp-page{flex:1 1 0;min-width:0;padding-top:6px;}

/* Facing pages close together through balanced CONTENT (comparable copy
   length and photo proportions on both sides), not by stretching one
   element to absorb leftover height — the lead photo stays ~16:9. */
.fp-gutter{
  width:var(--gutter-width);flex:0 0 var(--gutter-width);position:relative;
}
.fp-gutter::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:22px;margin-left:-11px;
  background:linear-gradient(90deg, transparent, var(--fold-shadow) 32%, var(--fold-shadow) 68%, transparent);
}
/* A crisp center spine on top of the soft shadow — makes the page boundary
   readable at a glance, not just implied by whitespace. */
.fp-gutter::after{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;
  background:var(--rule);
}

.running-head{
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);opacity:.7;text-align:left;
  border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:22px;
}
.fp-page:last-child .running-head{text-align:right;}

/* ---------- article blocks ---------- */
.article{margin-bottom:26px;}
.article-eyebrow{
  font-family:var(--display-heavy);color:var(--ember-ink,#C0331A);font-size:clamp(18px,2.2vw,28px);
  letter-spacing:.02em;margin-bottom:4px;
}
.article-head{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  line-height:.98;margin:0 0 6px;text-wrap:balance;
}
.article--lead .article-head{font-size:clamp(34px,5.6vw,64px);}
.article--minor .article-head{font-size:clamp(24px,3.4vw,38px);}
.article-head .head-accent{color:var(--ember-ink,#C0331A);}
.article-subtitle{
  font-family:var(--display-heavy);color:var(--ember-ink,#C0331A);text-transform:uppercase;
  font-size:clamp(14px,1.6vw,18px);letter-spacing:.01em;margin:0 0 8px;
}
.article-byline{
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);opacity:.6;margin:0 0 14px;
}
.article-byline::before{content:"By ";opacity:.7;}

/* A recurring section's current featured subject — identifies who's up
   this cycle without implying a byline or a second subtitle. */
.spotlight-subject{
  font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);opacity:.75;margin:0 0 10px;
}
.spotlight-subject strong{color:var(--ember-ink,#C0331A);opacity:1;font-weight:700;}

.article-para{font-family:var(--body-serif);font-size:18px;line-height:1.5;margin:0 0 14px;max-width:62ch;}
.article-para:last-of-type{margin-bottom:16px;}

.article-link{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ember-ink,#C0331A);text-decoration:underline;text-underline-offset:3px;
}

.rule{border:none;border-top:1px solid var(--rule);margin:22px 0;}

/* A real spoken quote inside a magazine-spread article (.fp-page context),
   where .ap-prose blockquote isn't in scope — same ember/serif/italic
   treatment as the article-page template's blockquote, under the
   .article-* naming used throughout the spread components. */
.article-quote{
  margin:2px 0 16px;padding:2px 0 2px 20px;border-left:3px solid var(--ember);
  font-family:var(--body-serif);font-style:italic;font-size:17px;line-height:1.5;
  color:var(--ink);max-width:62ch;
}

/* Tara's microphone illustration — a transparent cutout portrait, not a
   fixed-aspect photo. object-fit:contain + a max-height (not .img-slot's
   forced aspect-ratio box) so it sits at a supporting scale beside the
   quote rather than stretching or cropping to fill a landscape frame. */
.vend-portrait{
  display:block;width:auto;height:auto;max-width:100%;max-height:340px;
  object-fit:contain;margin:0 auto;
}
@media (max-width:700px){
  .vend-portrait{max-height:280px;}
}

/* ---------- image slots (coded placeholders — no photography yet) ---------- */
.img-slot{
  position:relative;width:100%;aspect-ratio:var(--ar,16/9);
  background:var(--placeholder-fill);border:1px dashed var(--placeholder-border);
  border-radius:2px;overflow:hidden;margin-bottom:14px;
}
.img-slot img,.img-slot video{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);display:block;}
.img-slot .is-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:10px;font-family:var(--mono);font-weight:700;
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);opacity:.5;
}
.img-slot--lead{--ar:16/9;}
.img-slot--wide{--ar:16/9;}
.img-slot--classic{--ar:3/2;}
.img-slot--tight{--ar:4/3;}
.img-slot--portrait{--ar:3/4;max-width:380px;}
.img-caption{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink);
  opacity:.55;margin:-8px 0 18px;
}

/* ---------- two-up (image beside text) for right-page minor articles ---------- */
.article-duo{display:grid;grid-template-columns:0.85fr 1.15fr;gap:22px;align-items:start;}
.article-duo .img-slot{margin-bottom:0;}
@media (max-width:1099.98px){
  .article-duo{grid-template-columns:1fr;}
}

/* ---------- editorial box ---------- */
.editorial-box{
  border:1px solid var(--rule);border-left:4px solid var(--ember);border-radius:2px;
  padding:18px 20px;margin:22px 0 0;
}
.editorial-box .eb-label{
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember-ink,#C0331A);display:block;margin-bottom:6px;
}
.editorial-box h3{
  font-family:var(--display-heavy);text-transform:uppercase;font-weight:400;
  font-size:clamp(16px,2vw,20px);margin:0 0 8px;line-height:1.1;
}
.editorial-box p{font-family:var(--body-serif);font-size:16px;line-height:1.5;margin:0;max-width:60ch;}

/* ---------- folio bar ---------- */
/* The line beneath each spread; doubles as the reader's "you are on pages
   X-Y" cue, so it needs real weight — not a quiet footer. */
.folio-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:2px solid var(--ink);margin-top:18px;padding-top:14px;padding-bottom:4px;
  font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.06em;
  color:var(--ink);opacity:.85;
}
.folio-bar .fb-edition{font-size:11px;letter-spacing:.1em;opacity:.7;}

/* ---------- mobile / intermediate stacked layout ---------- */
@media (max-width:1099.98px){
  .food-spread{display:block;}
  .fp-gutter{display:none;}
  .fp-page{padding-top:0;}
  .fp-page + .fp-page{margin-top:8px;}
  .running-head{display:none;}
  .article-para{max-width:none;}
}

/* ---------- single article page (full-article template) ---------- */
.article-page{padding-top:8px;}
/* Keeps the hero image, headline, and body copy all within one consistent
   editorial column instead of a full-bleed hero giving way to a much
   narrower (66ch) text block with an abandoned gap beside it. Opt-in via
   this class rather than changing .article-page itself, so other pages
   using the same template aren't affected until they adopt it too. */
.ap-column{max-width:980px;margin:0 auto;}
/* A section's opening paragraph paired with the artist's own photo —
   deliberate, not forced into every paragraph; quotes and later paragraphs
   continue at full column width below. */
.ap-figure-duo{display:grid;grid-template-columns:0.9fr 1.1fr;gap:26px;align-items:start;margin:18px 0;}
.ap-figure-duo .img-slot{margin-bottom:0;}
@media (max-width:700px){
  .ap-figure-duo{grid-template-columns:1fr;}
}
.ap-title{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  line-height:.96;font-size:clamp(36px,6.6vw,68px);margin:6px 0 8px;text-wrap:balance;
}
.ap-subtitle{
  font-family:var(--display-heavy);color:var(--ember-ink,#C0331A);text-transform:uppercase;
  font-size:clamp(15px,2vw,19px);margin:0 0 12px;
}
.ap-byline{
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);opacity:.6;margin:0 0 22px;
}
.ap-byline::before{content:"By ";opacity:.7;}
.ap-dek{
  font-family:var(--body-serif);font-weight:400;font-size:clamp(16px,1.8vw,19px);
  line-height:1.5;color:var(--ink);opacity:.82;max-width:60ch;margin:0 0 14px;
}
.ap-emphasis{color:var(--ember-ink,#C0331A);font-weight:700;}
.ap-signoff{
  font-family:var(--body);font-style:italic;font-weight:600;
  margin:24px 0 0;color:var(--ink);
}
/* .ap-prose p already sets margin on every <p>, including one carrying
   .ap-signoff, at higher specificity than .ap-signoff alone — restoring
   the breathing room here rather than fighting it inline per-page. */
.ap-prose p.ap-signoff{margin:28px 0 0;}
.pull-quote{
  font-family:var(--display-heavy);font-weight:400;text-transform:none;
  font-size:clamp(24px,3.2vw,36px);line-height:1.22;color:var(--ink);
  border-left:4px solid var(--ember);padding-left:22px;margin:28px 0;max-width:34ch;
}
.pull-quote::before{content:"\201C";color:var(--ember-ink,#C0331A);}
.pull-quote::after{content:"\201D";color:var(--ember-ink,#C0331A);}
.pull-quote cite{
  display:block;font-style:normal;font-family:var(--mono);font-weight:700;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember-ink,#C0331A);margin-top:10px;
}
.ap-prose{max-width:66ch;}
.ap-prose p{font-family:var(--body-serif);margin:0 0 16px;font-size:18px;line-height:1.5;}
.ap-prose h3{
  font-family:var(--display-heavy);text-transform:uppercase;font-weight:400;
  font-size:clamp(17px,2.2vw,22px);margin:32px 0 10px;line-height:1.15;color:var(--ink);
}
.ap-prose blockquote{
  margin:18px 0;padding:2px 0 2px 20px;border-left:3px solid var(--ember);
  font-family:var(--body-serif);font-style:italic;font-size:clamp(16px,1.8vw,19px);line-height:1.5;color:var(--ink);
}
.ap-prose blockquote p{margin:0;}
.ap-links{display:flex;flex-wrap:wrap;gap:16px 26px;margin:34px 0 10px;}

/* ---------- reading-flow orientation cues (multi-page articles) ---------- */
/* "Continue on the right / Continue below" — sits at the end of a page's
   content and tells the reader exactly where the story goes next, since
   the facing-page reading order isn't the default scroll direction. */
.page-cue{
  display:flex;align-items:center;gap:6px;margin-top:24px;padding-top:14px;
  border-top:1px dashed var(--rule);font-family:var(--mono);font-weight:700;
  font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--ember-ink,#C0331A);
  text-decoration:none;
}
.page-cue:hover{text-decoration:underline;}
/* "Continued from Page N" — sits at the top of a page that picks up an
   article already in progress, so a reader landing there mid-scroll knows
   this isn't a new story. */
.continued-from{
  display:inline-block;margin:0 0 16px;font-family:var(--mono);font-weight:700;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  opacity:.6;text-decoration:none;border-bottom:1px dotted currentColor;
}
.continued-from:hover{opacity:.9;}
@media (max-width:1099.98px){
  /* Mobile already reads as one uninterrupted column — these cues describe
     facing-page navigation that doesn't exist there. */
  .page-cue,.continued-from{display:none;}
}

/* Copy beside a sidebar (e.g. the draft editorial next to the paragraph
   it relates to) within a single spread page. Collapses to one column
   with the section spread's own breakpoint. */
.copy-duo{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:start;}
.copy-duo .ap-body-col{min-width:0;}
.copy-duo .editorial-box{margin:0;}
/* The story column here is narrower than a full page (squeezed by the
   sidebar), so an image-beside-text duo leaves too little room for the
   text; stack instead, full width, regardless of viewport. */
.ap-body-col .article-duo{grid-template-columns:1fr;}
@media (max-width:1099.98px){
  .copy-duo{grid-template-columns:1fr;}
}

/* A closing eyebrow label, used to mark the last passage of an article. */
.ap-closing-label{
  font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember-ink,#C0331A);display:block;margin:0 0 10px;
}

.pending-note{
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink);
  opacity:.65;border-left:3px solid var(--ember);padding:4px 0 4px 12px;margin:18px 0 26px;
  max-width:60ch;
}

.competition-block{
  border:1px solid var(--rule);border-radius:2px;padding:20px 22px;margin:30px 0 10px;
  background:rgba(3,3,3,.03);
}
.competition-block .cb-label{
  font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember-ink,#C0331A);display:block;margin-bottom:8px;
}
.competition-block p{margin:0;max-width:58ch;}

/* ---------- feedback demo form ---------- */
.feedback{border-top:3px solid var(--ink);margin-top:40px;padding-top:26px;}
.feedback-heading{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(24px,3.2vw,34px);margin:0 0 8px;
}
.feedback-intro{max-width:60ch;margin:0 0 6px;}
.feedback-notice{
  display:inline-block;font-family:var(--mono);font-weight:700;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ember-ink,#C0331A);
  border:1px solid var(--ember);border-radius:2px;padding:4px 10px;margin:6px 0 22px;
}
.feedback-form fieldset{border:none;padding:0;margin:0 0 22px;}
.feedback-form legend{
  font-family:var(--display-heavy);text-transform:uppercase;font-size:14px;
  padding:0 0 10px;width:100%;border-bottom:1px solid var(--rule);margin-bottom:12px;
}
.feedback-form .field-note{
  font-family:var(--body);font-size:13.5px;color:var(--ink);opacity:.82;margin:-4px 0 10px;
}
.option-row{display:flex;align-items:flex-start;gap:8px;margin:0 0 8px;font-size:15.5px;}
.option-row input{margin-top:4px;width:17px;height:17px;accent-color:var(--ember);}
.option-row label{cursor:pointer;}
.feedback-form textarea{
  width:100%;max-width:60ch;min-height:88px;font-family:var(--body);font-size:15px;
  color:var(--ink);background:var(--cream);border:1px solid var(--rule);border-radius:2px;
  padding:10px 12px;resize:vertical;
}
.feedback-form .text-field{margin:0 0 22px;}
.feedback-form .text-field > label{
  display:block;font-family:var(--display-heavy);text-transform:uppercase;font-size:13px;
  margin:0 0 8px;
}
.feedback-form .char-note{font-family:var(--mono);font-size:10.5px;opacity:.5;margin-top:4px;}
.feedback-submit{
  font-family:var(--display-heavy);text-transform:uppercase;letter-spacing:.01em;
  font-size:14px;background:var(--ember);color:var(--coal);border:none;border-radius:3px;
  padding:13px 22px;cursor:pointer;min-height:44px;
}
.feedback-submit:hover{filter:brightness(1.05);}
.form-status{
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.03em;
  margin-top:12px;min-height:1.2em;
}
.form-status.is-error{color:#B3211A;}
.response-summary{
  margin-top:20px;border:1px solid var(--ink);border-radius:2px;padding:18px 20px;
  background:var(--cream);
}
.response-summary .rs-flag{
  display:block;font-family:var(--mono);font-weight:700;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ember-ink,#C0331A);margin-bottom:10px;
}
.response-summary dl{margin:0;}
.response-summary dt{
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;opacity:.6;margin-top:12px;
}
.response-summary dt:first-child{margin-top:0;}
.response-summary dd{margin:3px 0 0;font-size:15px;}
[hidden]{display:none !important;}

/* ---------- entry form (grouped columns) — Spades team registration,
   ICOHH 2027 entry, and any future multi-field application form share this ---------- */
.entry-form{max-width:760px;}
.entry-form-groups{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;}
.entry-form-groups fieldset{border:none;padding:0;margin:0 0 22px;}
.entry-form fieldset{border:none;padding:0;margin:0 0 26px;}
.entry-form fieldset > legend{
  font-family:var(--display-heavy);text-transform:uppercase;font-size:14px;
  padding:0 0 10px;width:100%;border-bottom:1px solid var(--rule);margin-bottom:14px;
}
.entry-form .text-field{margin:0 0 16px;}
.entry-form .text-field > label{margin:0 0 6px;}
.entry-form .text-field--nested{margin:-6px 0 14px 25px;}
.entry-form input[type="text"],
.entry-form input[type="email"],
.entry-form input[type="tel"],
.entry-form input[type="number"],
.entry-form input[type="url"]{
  display:block;width:100%;height:48px;
  font-family:var(--body);font-size:15px;color:var(--ink);
  background:var(--cream);border:1px solid var(--rule);border-radius:2px;
  padding:0 14px;
}
.entry-form textarea{max-width:none;width:100%;}
.entry-form input[type="file"]{
  display:block;width:100%;font-family:var(--body);font-size:14px;color:var(--ink);
}
.entry-form input[type="text"]:focus-visible,
.entry-form input[type="email"]:focus-visible,
.entry-form input[type="tel"]:focus-visible,
.entry-form input[type="number"]:focus-visible,
.entry-form input[type="url"]:focus-visible{border-color:var(--ember);}
.entry-form .option-list{margin:0 0 16px;}
@media (max-width:700px){
  .entry-form-groups{grid-template-columns:1fr;gap:0;}
}
.entry-form-response{max-width:760px;}

/* ---------- form-part pacing (long applications) — a restrained divider
   between logical groups of fieldsets, so the form reads with some rhythm
   instead of one flat run of identical fieldsets. Reuses the same kicker +
   rule vocabulary already used for running-heads/eyebrows elsewhere;
   doesn't touch individual field styling. ---------- */
.form-part-head{
  display:flex;align-items:baseline;gap:12px;margin:40px 0 20px;padding-top:22px;
  border-top:1px solid var(--rule);
}
.form-part-head:first-child{margin-top:0;padding-top:0;border-top:none;}
.form-part-kicker{
  font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember-ink,#C0331A);white-space:nowrap;
}
.form-part-title{
  font-family:var(--display-heavy);text-transform:uppercase;font-size:14px;
  letter-spacing:.01em;color:var(--ink);opacity:.85;
}

/* ---------- Legacy Builder pass benefits (confirmed, not a tier card) ---------- */
.benefits-block{
  border:1px solid var(--rule);border-left:4px solid var(--ember);border-radius:2px;
  background:rgba(3,3,3,.03);padding:20px 24px;margin:4px 0 30px;max-width:640px;
}
.benefits-heading{
  font-family:var(--display-heavy);text-transform:uppercase;font-size:15px;
  letter-spacing:.01em;margin:0 0 12px;
}
.benefits-list{margin:0 0 14px;padding-left:20px;}
.benefits-list li{font-family:var(--body);font-size:15.5px;line-height:1.45;margin:0 0 8px;}
.benefits-list li:last-child{margin-bottom:0;}
.benefits-block .field-note{margin:0;opacity:.85;}

/* ---------- amount selector (Legacy Builder contribution) ---------- */
.amount-select{max-width:none;}
.amount-presets{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px;}
.amount-preset{
  font-family:var(--display-heavy);font-size:15px;letter-spacing:.01em;
  background:var(--cream);color:var(--ink);border:1px solid var(--rule);border-radius:3px;
  padding:11px 18px;cursor:pointer;min-height:44px;
}
.amount-preset:hover{border-color:var(--ember);}
.amount-preset.is-active{background:var(--ember);color:var(--coal);border-color:var(--ember);}
.amount-caption{
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.65;margin:0 0 4px;
}
.amount-display{
  display:flex;align-items:baseline;gap:4px;
  font-family:var(--display);font-size:clamp(38px,6vw,56px);line-height:1;color:var(--ink);
  margin:0 0 6px;
}
.amount-display-currency{font-size:.55em;opacity:.7;}
.amount-includes{
  font-family:var(--body);font-size:14px;color:var(--ink);opacity:.85;margin:0 0 8px;max-width:48ch;
}
.amount-frequency{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;opacity:.7;margin:0 0 20px;
}
.amount-select input[type="range"]{
  display:block;width:100%;margin:0 0 6px;accent-color:var(--ember);height:28px;cursor:pointer;
}
.amount-slider-endpoints{
  display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;
  opacity:.6;margin:0 0 20px;
}
.amount-custom-field{max-width:260px;}
.amount-custom-field label{
  display:block;font-family:var(--display-heavy);text-transform:uppercase;font-size:13px;
  margin:0 0 6px;
}
.amount-custom-field input[type="number"]{
  display:block;width:100%;height:48px;font-family:var(--body);font-size:15px;color:var(--ink);
  background:var(--cream);border:1px solid var(--rule);border-radius:2px;padding:0 14px;
}
.amount-custom-field input[type="number"]:focus-visible{border-color:var(--ember);}
.amount-custom-field .form-status{margin-top:6px;}
.optional-tag{text-transform:none;font-weight:400;letter-spacing:normal;}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- review summary (aligned rows, one emphasized total) ---------- */
.review-summary{margin:0 0 6px;}
.review-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--rule);
}
.review-row:last-child{border-bottom:none;}
.review-row .rr-label{font-family:var(--body);font-size:15px;color:var(--ink);opacity:.8;}
.review-row .rr-amount{font-family:var(--display-heavy);font-size:16px;white-space:nowrap;}
.review-row--total{padding-top:14px;}
.review-row--total .rr-label{
  font-family:var(--display-heavy);text-transform:uppercase;font-size:13px;
  letter-spacing:.02em;opacity:1;
}
.review-row--total .rr-amount{font-size:28px;}

/* ---------- payment option (pay-in-full only, for now) ---------- */
.payment-option{
  display:flex;align-items:center;gap:10px;margin:16px 0 18px;padding:10px 14px;
  border:1px solid var(--rule);border-radius:2px;background:var(--placeholder-fill);
}
.payment-option .po-label{
  font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ember-ink,#C0331A);
}
.payment-option .po-value{font-family:var(--display-heavy);font-size:14px;text-transform:uppercase;}

/* ==========================================================================
   Site-foundation components — shared across every department beyond Food
   (Breaking, Competitions, The Pillar, Bars, History, Build With Us, Shop,
   Tickets, Schedule, FAQ). Same tokens, same nav, same spread/article
   system above; this block adds the few extra pieces those pages need.
   ========================================================================== */

/* ---------- department hero (section intro atop a spread) ---------- */
.dept-hero{padding-top:8px;margin-bottom:4px;}
.dept-dek{font-size:16px;max-width:64ch;color:var(--ink);opacity:.82;margin:0 0 6px;}

/* ---------- pending / info notice ---------- */
.info-pending{
  border:1px solid var(--rule);border-left:4px solid var(--ember);border-radius:2px;
  background:var(--placeholder-fill);padding:16px 20px;margin:18px 0 30px;max-width:64ch;
}
.info-pending .ip-label{
  font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember-ink,#C0331A);display:block;margin-bottom:6px;
}
.info-pending p{margin:0;font-size:14.5px;opacity:.85;}

/* ---------- placeholder tile grid (generic photo-to-come strip) ---------- */
.placeholder-tiles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--placeholder-border);
  border:1px solid var(--placeholder-border);margin:0 0 30px;
}
.placeholder-tiles .pt-tile{
  aspect-ratio:4/3;background:var(--placeholder-fill);display:flex;align-items:center;justify-content:center;
}
.placeholder-tiles svg{width:38%;opacity:.3;}
@media (max-width:560px){
  .placeholder-tiles{grid-template-columns:repeat(2,1fr);}
}

/* ---------- news box (e.g. Beatfreaqs — an updateable callout) ---------- */
.news-box{
  border:1px solid var(--rule);border-left:4px solid var(--ember);border-radius:2px;
  padding:18px 20px;margin:18px 0 28px;background:rgba(3,3,3,.03);max-width:64ch;
}
.news-box .nb-label{
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember-ink,#C0331A);display:block;margin-bottom:6px;
}
.news-box h3{
  font-family:var(--display-heavy);text-transform:uppercase;font-weight:400;
  font-size:clamp(15px,1.8vw,18px);margin:0 0 6px;line-height:1.15;
}
.news-box p{margin:0;font-size:14.5px;}

/* ---------- cross-link callout (department-to-department CTA) ---------- */
.cross-link{
  display:inline-flex;align-items:center;gap:8px;margin:8px 0 22px;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ember2);border:1px solid var(--ember);border-radius:2px;padding:9px 14px;text-decoration:none;
}
.cross-link:hover{background:var(--ember);color:var(--coal);}

/* ---------- merch / product grid (Shop) ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;margin:14px 0 34px;}
.shop-card{border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:rgba(3,3,3,.02);}
.shop-card .img-slot{margin-bottom:0;border-radius:0;border-width:0 0 1px;}
.shop-card-body{padding:14px 16px 18px;}

/* ---------- print: fix defects a browser print introduces on its own —
   these are not screen-layout changes. Chromium print rendering drops
   backgrounds/lightens borders by default and can break a label away
   from its field across a page boundary; this section only corrects that,
   it does not alter on-screen appearance. ---------- */
@media print{
  .food-edition{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .entry-form input[type="text"],
  .entry-form input[type="email"],
  .entry-form input[type="tel"],
  .entry-form input[type="number"],
  .entry-form input[type="url"],
  .entry-form textarea,
  .amount-custom-field input[type="number"],
  .amount-preset{
    border:1px solid var(--ink) !important;
  }
  .text-field,
  .text-field--nested,
  .amount-custom-field,
  .option-row,
  .review-row,
  fieldset{
    break-inside:avoid;page-break-inside:avoid;
  }
  .text-field > label,
  .amount-custom-field label{
    break-after:avoid;page-break-after:avoid;
  }
}

/* ==========================================================================
   Vendors — marketplace/classified-ad editorial treatment (numbered
   sections, category panels, application form). Built on the same
   .ap-column / .entry-form / .feedback-form components used elsewhere;
   this block adds only what's new for this page.
   ========================================================================== */

/* ---------- small corner stamp (hero) — an editorial mark, not a logo ---------- */
.vend-stamp{
  position:absolute;top:16px;right:16px;background:var(--cream);
  border:1px solid var(--ink);border-radius:2px;padding:7px 12px;
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);transform:rotate(-2deg);
  box-shadow:2px 2px 0 rgba(3,3,3,.12);
}
.vend-hero-figure{position:relative;}

/* ---------- oversized numbered section head ---------- */
.vend-section{margin:54px 0;}
.vend-section-head{display:flex;align-items:flex-end;gap:18px;margin:0 0 16px;border-bottom:2px solid var(--ink);padding-bottom:10px;}
.vend-num{
  font-family:var(--display);font-weight:400;line-height:.78;
  font-size:clamp(52px,9vw,96px);color:var(--ember-ink,#C0331A);white-space:nowrap;
}
.vend-section-title{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(24px,4vw,44px);line-height:1.02;margin:0 0 6px;
}
.vend-section-lede{font-family:var(--body-serif);font-size:17px;line-height:1.5;max-width:66ch;margin:0 0 16px;}

/* ---------- vendor category index (02) — a magazine contents/index page,
   not a row of cards: three tall photographic panels at rest, one of the
   page's major visual moments. Hovering/focusing a panel expands its
   territory and reveals its blurb + CTA; neighbors contract but stay fully
   visible. Restrained, no bounce/flash — flex-basis and opacity only.
   Requires :has() (current Chrome/Edge/Safari); browsers without it just
   keep the three panels at equal width, which still reads fine. Below
   ~900px this stops depending on hover entirely and stacks as full-width,
   always-expanded image-led entries.

   Each panel carries editorial art (not documentary event photography) —
   a purpose-made still life per category. Legibility comes from a small
   corner vignette behind the type, not a full gradient wash across the
   whole image, so the artwork itself stays the composition rather than a
   card background. Each category gets its own accent color drawn from its
   own artwork's palette (see the editorial color tokens on .food-edition),
   so the three panels read as related but distinct chapters. ---------- */
.hustle-index{display:flex;gap:4px;align-items:stretch;margin:10px 0 4px;}
a.hustle-panel{
  position:relative;display:block;flex:1 1 0;min-width:0;min-height:560px;
  overflow:hidden;border-radius:2px;color:var(--cream);text-decoration:none;
  background:var(--coal);
  transition:flex-grow .45s cubic-bezier(.4,0,.2,1);
}
.hustle-index:has(.hustle-panel:hover) .hustle-panel:not(:hover):not(:focus-visible),
.hustle-index:has(.hustle-panel:focus-visible) .hustle-panel:not(:focus-visible):not(:hover){
  flex-grow:.6;
}
.hustle-panel:hover,
.hustle-panel:focus-visible{
  flex-grow:2.4;
  outline:none;
}
.hustle-panel--marketplace{--panel-accent:var(--editorial-teal-700);}
.hustle-panel--food{--panel-accent:var(--ember);}
.hustle-panel--brand{--panel-accent:var(--editorial-terracotta);}
.hustle-panel-media{
  position:absolute;inset:0;
  background-image:var(--panel-image);background-size:cover;background-position:center;
}
.hustle-panel-vignette{
  position:absolute;top:0;left:0;width:72%;height:40%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at top left, rgba(3,3,3,.68) 0%, rgba(3,3,3,.34) 48%, rgba(3,3,3,0) 76%);
  transition:width .4s ease, height .4s ease;
}
.hustle-panel:hover .hustle-panel-vignette,
.hustle-panel:focus-visible .hustle-panel-vignette{
  width:92%;height:64%;
}
.hustle-panel-index{
  position:absolute;top:18px;left:20px;z-index:2;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;
  color:var(--panel-accent,var(--ember));
}
.hustle-panel-body{
  position:absolute;left:20px;right:20px;top:40px;z-index:2;
}
.hustle-panel-name{
  display:block;font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(21px,2.5vw,31px);line-height:1.02;
  text-shadow:0 2px 10px rgba(3,3,3,.5), 0 1px 3px rgba(3,3,3,.6);
}
.hustle-panel-desc{
  display:block;font-family:var(--body-serif);font-style:italic;font-size:13.5px;line-height:1.5;
  max-width:30ch;color:var(--cream);opacity:0;max-height:0;overflow:hidden;
  text-shadow:0 1px 6px rgba(3,3,3,.6);
  transition:opacity .3s ease, max-height .4s ease, margin-top .4s ease;
}
.hustle-panel-cta{
  display:inline-block;font-family:var(--display-heavy);font-size:11.5px;letter-spacing:.02em;
  text-transform:uppercase;border-bottom:1px solid var(--panel-accent,currentColor);
  color:var(--cream);text-shadow:0 1px 6px rgba(3,3,3,.6);
  opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease, max-height .4s ease, margin-top .4s ease;
}
.hustle-panel:hover .hustle-panel-desc,
.hustle-panel:focus-visible .hustle-panel-desc{
  opacity:1;max-height:140px;margin-top:9px;
}
.hustle-panel:hover .hustle-panel-cta,
.hustle-panel:focus-visible .hustle-panel-cta{
  opacity:1;max-height:30px;margin-top:12px;
}
@media (max-width:900px){
  .hustle-index{flex-direction:column;gap:14px;}
  .hustle-panel{flex-grow:1 !important;min-height:340px;}
  .hustle-panel-vignette{width:88%;height:60%;}
  .hustle-panel-desc,
  .hustle-panel-cta{
    opacity:1;max-height:none;overflow:visible;margin-top:8px;
  }
}
@media (prefers-reduced-motion:reduce){
  .hustle-panel,
  .hustle-panel-vignette,
  .hustle-panel-desc,
  .hustle-panel-cta{
    transition:none;
  }
}

/* ---------- "what you get" editorial callouts (03) — a two-column flowing
   list separated by hairline rules, not boxed checklist items. Reuses the
   same CSS-column technique as the guidelines accordion below. ---------- */
.benefit-editorial{columns:2;column-gap:36px;margin:6px 0 8px;}
.benefit-editorial .be-row{
  break-inside:avoid;display:flex;gap:10px;align-items:baseline;
  padding:11px 0;border-top:1px solid var(--rule);
  font-family:var(--body-serif);font-size:16px;line-height:1.4;
}
.benefit-editorial .be-row:first-child{border-top:none;}
.be-mark{color:var(--ember-ink,#C0331A);font-family:var(--display-heavy);flex:none;font-size:13px;}
@media (max-width:700px){
  .benefit-editorial{columns:1;}
}

/* ---------- vendor photo feature (optional, unnumbered) — one dominant
   photo with supporting images beside it, an asymmetric editorial spread
   rather than a thumbnail gallery. ---------- */
.photo-feature-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;margin:0 0 8px;}
.photo-feature-grid .img-slot{margin-bottom:0;}
.photo-feature-support{display:grid;grid-template-rows:1fr 1fr;gap:12px;}
.img-slot--feature{--ar:4/3;}
@media (max-width:800px){
  .photo-feature-grid{grid-template-columns:1fr;}
  .photo-feature-support{grid-template-columns:1fr 1fr;grid-template-rows:none;}
}

/* ---------- vendor guidelines accordion (04) — reuses <details>, no JS ---------- */
.guidelines-details{border:1px solid var(--rule);border-radius:2px;margin:16px 0 0;max-width:70ch;}
.guidelines-details summary{
  cursor:pointer;list-style:none;padding:14px 18px;
  font-family:var(--display-heavy);text-transform:uppercase;font-size:13px;
  letter-spacing:.02em;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.guidelines-details summary::-webkit-details-marker{display:none;}
.guidelines-details summary::after{content:"\25BE";color:var(--ember-ink,#C0331A);font-size:12px;}
.guidelines-details[open] summary::after{content:"\25B4";}
.guidelines-details summary:hover{background:var(--placeholder-fill);}
.guidelines-body{padding:0 18px 18px;border-top:1px solid var(--rule);}
.guidelines-body p{font-size:14px;opacity:.8;margin:14px 0 10px;}
.guidelines-body ul{margin:0 0 4px;padding-left:20px;columns:2;column-gap:24px;}
.guidelines-body li{font-size:13.5px;line-height:1.6;break-inside:avoid;}
@media (max-width:600px){
  .guidelines-body ul{columns:1;}
}

/* ---------- vendor category choice — radio "cards", not a dropdown ---------- */
.category-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 8px;}
.category-choice-option{position:relative;}
.category-choice-option input{position:absolute;top:14px;left:14px;width:18px;height:18px;accent-color:var(--ember);margin:0;}
.category-choice-option label{
  display:block;border:1px solid var(--rule);border-radius:2px;background:var(--cream);
  padding:14px 14px 14px 40px;cursor:pointer;font-family:var(--display-heavy);
  text-transform:uppercase;font-size:13.5px;line-height:1.3;min-height:64px;
  display:flex;align-items:center;
}
.category-choice-option input:checked + label{border-color:var(--ember);background:rgba(254,75,11,.06);}
.category-choice-option input:focus-visible + label{outline:2px solid var(--ember);outline-offset:2px;}
@media (max-width:700px){
  .category-choice{grid-template-columns:1fr;}
}

/* ---------- file upload (photos) ---------- */
.file-upload input[type="file"]{
  display:block;width:100%;font-family:var(--body);font-size:14px;color:var(--ink);
  background:var(--cream);border:1px dashed var(--placeholder-border);border-radius:2px;
  padding:14px;
}
.file-upload-list{margin:10px 0 0;padding:0;list-style:none;}
.file-upload-list li{
  font-family:var(--mono);font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:10px;
}
.file-upload-list li:first-child{border-top:1px solid var(--rule);}

/* ---------- already approved (footer callout) ---------- */
.already-approved{
  border:1px solid var(--rule);border-radius:2px;background:rgba(3,3,3,.03);
  padding:22px 26px;margin:50px 0 10px;max-width:70ch;
}
.already-approved h3{
  font-family:var(--display-heavy);text-transform:uppercase;font-size:16px;margin:0 0 8px;
}

/* ==========================================================================
   Breaking page — left-page art composition. Reconstructed from the
   approved Photoshop reference using the supplied transparent PNG layers
   (Website/PS Page Architecture) rather than a generated/approximated
   substitute. Each layer is absolutely positioned as a percentage of one
   aspect-ratio-locked canvas so the whole composition scales as one unit
   on desktop; a separate, simpler recomposition takes over at the
   tablet/mobile breakpoints (see below) rather than just shrinking this.
   ========================================================================== */
.breaking-art-canvas{
  position:relative;width:100%;aspect-ratio:990/1550;margin:6px 0 0;
  overflow:visible;
}
.ba-layer{
  position:absolute;display:block;max-width:none;width:auto;height:auto;
  pointer-events:none;user-select:none;
}
.ba-wordmark{left:1%;top:1%;width:29%;z-index:3;}
.ba-teal-stroke{left:35%;top:7%;width:32%;z-index:1;}
.ba-halftone-top{left:50%;top:10%;width:35%;z-index:1;opacity:.9;}
.ba-orange-circle{left:38%;top:19%;width:33%;z-index:2;}
.ba-splatter-tl{left:-4%;top:17%;width:27%;z-index:1;}
/* Hero is deliberately oversized and allowed to cross the gutter — see
   .breaking-left-page/.breaking-right-page below for the stacking-context
   pairing that lets the extended leg visually clear the fold without
   painting over the right page's actual text. No drop-shadow/glow — the
   approved reference doesn't show one. */
.ba-hero-figure{left:11%;top:1%;width:96%;z-index:5;}
.ba-crown{left:56%;top:31%;width:20%;z-index:6;}
.ba-squiggle{left:-1%;top:57%;width:18%;z-index:6;}
.ba-halftone-bottom{left:6%;top:81%;width:26%;z-index:1;opacity:.9;}
.ba-blotch-left{left:-3%;top:85%;width:23%;z-index:1;}

/* .fp-left/.fp-right get a scoped stacking context (not the shared
   .fp-left/.fp-right classes) so the hero figure's overflow can visually
   clear the gutter and paint above it, while the right page's own text
   still stacks above that overflow if the two ever geometrically overlap. */
.breaking-left-page{position:relative;z-index:2;}
.breaking-right-page{position:relative;z-index:3;}

/* The right-side paint cluster bleeds off the outer edge of the RIGHT
   page near Dancer Spotlight, per the approved reference — it is not part
   of the left-page canvas. */
.ba-blotch-right-page{
  position:absolute;right:-9%;top:46%;width:19%;z-index:0;
  display:block;max-width:none;pointer-events:none;user-select:none;
}

/* Desktop-only: 01/02/03 shift together as one aligned system, opening
   breathing room after the hero's gutter-crossing leg before Section 02's
   type begins. Positional nudge only — widths/typography untouched. Scoped
   to desktop so tablet/mobile (which drops the spread/gutter entirely)
   is unaffected. */
@media (min-width:1100px){
  .breaking-editorial-grid{transform:translateX(20px);}
}

/* Article 01's headline is the one supplied hand-textured graphic (not
   reproducible with web type); real text lives in the alt attribute. */
.breaking-headline-art{display:block;width:100%;max-width:520px;height:auto;margin:0 0 16px;}

/* Article 02 — a transparent cutout portrait interacting with the copy,
   not a photo boxed in .img-slot. */
.breaking-spotlight{display:grid;grid-template-columns:0.7fr 1.3fr;gap:18px;align-items:end;}
.breaking-spotlight-portrait{display:block;width:100%;height:auto;max-height:360px;object-fit:contain;object-position:bottom;margin:0 auto;}
.breaking-spotlight-copy{padding-bottom:4px;}
@media (max-width:1099.98px){
  .breaking-spotlight{grid-template-columns:0.55fr 1.45fr;}
}
@media (max-width:700px){
  .breaking-spotlight{grid-template-columns:1fr;}
  .breaking-spotlight-portrait{max-height:320px;margin:0 0 12px;}
}

/* ---------- tablet: simplified but still two-element hero ---------- */
@media (max-width:1099.98px){
  .breaking-art-canvas{
    aspect-ratio:auto;height:clamp(420px,58vw,620px);max-width:640px;margin:0 auto 8px;
  }
  img.ba-teal-stroke,img.ba-halftone-top,img.ba-halftone-bottom,img.ba-splatter-tl,
  img.ba-blotch-left,img.ba-blotch-right,img.ba-squiggle,img.ba-blotch-right-page{display:none;}
  .ba-wordmark{left:0;top:0;width:auto;height:100%;}
  .ba-orange-circle{left:34%;top:16%;width:auto;height:62%;}
  .ba-hero-figure{left:15%;top:4%;width:auto;height:92%;}
  .ba-crown{left:62%;top:24%;width:auto;height:26%;}
}

/* ---------- mobile: single vertical editorial story. The tall vertical
   wordmark asset doesn't reflow to a horizontal lockup (it's one fixed
   graphic, not editable type), so it steps aside here in favor of the
   page's own real "Breaking" H1 already at the top of the page; the art
   canvas keeps just the figure + a couple of paint marks. ---------- */
@media (max-width:700px){
  .breaking-art-canvas{
    aspect-ratio:auto;height:auto;max-width:420px;margin:6px auto 0;
  }
  img.ba-wordmark{display:none;}
  .ba-orange-circle{position:absolute;left:10%;top:6%;width:78%;z-index:1;}
  .ba-hero-figure{position:relative;display:block;left:auto;top:auto;width:96%;margin:0 auto;z-index:5;}
  .ba-crown{position:absolute;left:62%;top:14%;width:26%;z-index:6;}
  img.ba-teal-stroke,img.ba-halftone-top,img.ba-halftone-bottom,img.ba-splatter-tl,
  img.ba-blotch-left,img.ba-blotch-right,img.ba-squiggle,img.ba-blotch-right-page{display:none;}
}
.already-approved p{margin:0 0 14px;font-size:14.5px;opacity:.85;}
.aa-coming-soon{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--display-heavy);
  text-transform:uppercase;font-size:13px;letter-spacing:.02em;color:var(--ink);
  border:1px solid var(--rule);border-radius:2px;padding:11px 18px;text-decoration:none;
}
.aa-coming-soon:hover{border-color:var(--ember);}
.aa-coming-soon .aa-tag{
  font-family:var(--mono);font-weight:700;font-size:9.5px;letter-spacing:.1em;
  background:var(--ink);color:var(--cream);padding:2px 6px;border-radius:2px;
}
.shop-card-eyebrow{
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ember-ink,#C0331A);margin:0 0 4px;
}
.shop-card h3{
  font-family:var(--display-heavy);text-transform:uppercase;font-weight:400;
  font-size:17px;margin:0 0 8px;line-height:1.1;
}
.shop-card p{margin:0 0 12px;font-size:14px;opacity:.8;}
.shop-badge{
  display:inline-block;font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ember-ink,#C0331A);
  border:1px solid var(--ember);border-radius:2px;padding:4px 9px;
}

/* ---------- status examples (illustrative only — not live data) ---------- */
.status-example{border:1px solid var(--rule);border-radius:2px;padding:16px 20px;margin:14px 0;max-width:64ch;}
.status-example .se-label{
  font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:8px;
}
.status-example--pending{border-left:4px solid var(--ember);background:var(--placeholder-fill);}
.status-example--pending .se-label{color:var(--ember-ink,#C0331A);}
.status-example--confirmed{border-left:4px solid #1a7a3c;background:rgba(26,122,60,.06);}
.status-example--confirmed .se-label{color:#1a7a3c;}
.status-example ul{margin:8px 0 0;padding-left:20px;}
.status-example li{margin:0 0 4px;font-size:14.5px;}

/* ---------- FAQ accordion (native details/summary — no JS needed) ---------- */
.faq-list{max-width:74ch;margin:14px 0 30px;}
.faq-item{border-bottom:1px solid var(--rule);padding:16px 0;}
.faq-item summary{
  cursor:pointer;list-style:none;font-family:var(--display-heavy);text-transform:uppercase;
  font-weight:400;font-size:15.5px;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-family:var(--mono);color:var(--ember-ink,#C0331A);font-size:18px;flex:0 0 auto;}
.faq-item[open] summary::after{content:"\2212";}
.faq-item p{margin:10px 0 0;max-width:64ch;font-size:15px;opacity:.85;}

/* ==========================================================================
   B-Boy Juice — magazine spreads (breaking-the-circle-never-closes.html)
   Two facing-page spreads using the site's own .food-spread/.fp-page/
   .fp-gutter/.folio-bar system (the same architecture as breaking.html)
   instead of a bespoke single-column layout, so page breaks, numbering,
   and the spine are the real shared components, not reinvented ones.

   Spread 1 (01/02): intro + a real photo (left) facing the first section
   (right). Spread 2 (03/04): the animated centerpiece — Juice's video
   lives in the LEFT page and is allowed to overflow across that spread's
   own gutter into the right page (the same escape-the-flex-sibling
   technique breaking.html's own hero figure uses: .juice-video-left/
   .juice-video-right get their own scoped z-index so the video (z-index:2)
   can paint above .fp-right's background while .fp-right's real text —
   no z-index needed — still stacks above the overflow wherever they
   actually overlap). Each page reserves its own half of the video's
   footprint via an invisible floated spacer using CSS Shapes
   (shape-outside), sized from the real alpha bounding box measured across
   the whole ~9.4s clip (content spans x 2%-87%, y 17.5%-88.5% of the
   1080x1920 canvas) — a FIXED safe zone, not something that tracks his
   silhouette frame-by-frame. ========================== */

.juice-intro{max-width:66ch;margin:0 0 20px;}

/* Larger, stacked headline — the deliberate line breaks are live text
   (<br>), not an image. */
.juice-title{font-size:clamp(56px,10vw,132px);line-height:.92;}

/* A compact, roughly square crop for the opening photo — enough presence
   to balance the intro paragraphs without growing taller than the text
   beside it or carrying extra sky (the site's other ratios are all
   landscape). Capped to a modest max-width so it reads as a supporting
   photo, not a second headline. */
.img-slot--square{--ar:1/1;}
.juice-opening-photo{max-width:320px;margin:0 auto;}

.juice-video-wrap{
  position:absolute;right:calc(-1 * var(--gutter-width) / 2);top:0;
  transform:translateX(50%);
  width:440px;aspect-ratio:1080/1920;z-index:2;
}
.juice-video,.juice-still{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:contain;background:transparent;pointer-events:none;
}
/* Discreet, keyboard-focusable pause/play control — a real <button>, not a
   div, so it's reachable and activatable without extra JS. */
.juice-toggle{
  position:absolute;right:10px;bottom:10px;z-index:3;pointer-events:auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(3,3,3,.55);color:var(--cream);border:1px solid rgba(253,249,238,.4);
  font-family:var(--mono);font-size:14px;line-height:1;cursor:pointer;
}
.juice-toggle:hover{background:rgba(3,3,3,.8);}
.juice-toggle:focus-visible{outline:2px solid var(--ember);outline-offset:2px;}

/* .juice-video-left/.juice-video-right get a scoped stacking context (not
   the shared .fp-left/.fp-right classes) so the video's overflow across
   this spread's own gutter can paint above .fp-right's background, while
   its real text still stacks above the overflow wherever they overlap. */
.juice-video-left{position:relative;z-index:2;}
.juice-video-right{position:relative;z-index:3;}

.juice-exclude{
  display:block;width:220px;height:782px;shape-margin:22px;
  shape-outside:inset(17% 0 11% 0 round 8%);
}
.juice-exclude-left{float:right;}
.juice-exclude-right{float:left;}
.juice-video-left .ap-prose,.juice-video-right .ap-prose{max-width:none;}
/* A blockquote sitting beside the floated exclusion spacer is still a
   normal block box spanning the page's full width behind the float — only
   its line boxes (the text) actually wrap clear of it. That left the
   border-left painted at the page's edge while the italic text started
   well to its right. display:flow-root gives the blockquote its own
   block-formatting context so its whole box (border included) narrows to
   sit flush beside the float, same as the wrapped text. */
.juice-video-left .ap-prose blockquote,.juice-video-right .ap-prose blockquote{display:flow-root;}

/* Visible gap between this article's two spreads (each .food-spread +
   .folio-bar pair is otherwise identical to how a single-spread page like
   breaking.html uses them). */
.food-spread + .folio-bar{margin-bottom:40px;}

/* The candid closing photo now lives at the bottom of spread 2's own left
   page (with the article's closing lines at the bottom of the right page)
   instead of a separate trailing section below the spreads — the article
   ends where the spreads end.

   Two float gotchas were found and removed here, not papered over:
   (1) clear:both forces a jump all the way to the float's bottom whenever
   the preceding text is shorter than the float, producing a large
   accidental gap — removed. (2) Without it, the <figure> box itself
   started right after the text (correct), but the plain <img> inside it —
   a block-level replaced element in the SAME block-formatting context as
   the float — independently avoided the float and jumped to its bottom
   anyway, leaving the exact same-looking blank gap *inside* the figure,
   above the image. display:flow-root gives the figure its own block
   formatting context, so the float question is answered once for the
   figure as a whole (it fits in the available width beside the float, so
   it renders immediately) instead of being re-asked for the image inside
   it. */
/* The figure is wider than the photo itself — the caption uses that extra
   room so its long quoted text wraps into a handful of comfortable lines
   instead of many short ones squeezed to the photo's own 260px. Capped at
   400px rather than the column's full width: this figure is a flow-root
   (see above), and a flow-root/BFC box that's WIDER than the space beside
   the video's floated exclusion (roughly 411px here) gets pushed below the
   float entirely, same as the plain <img> did before — 400px keeps it
   just inside that available width so it still renders immediately beside
   the float instead of jumping down. */
.juice-candid{display:flow-root;width:min(100%,400px);margin:24px auto 0;}
.juice-candid img{display:block;width:100%;max-width:260px;height:auto;border-radius:2px;margin:0 auto;}
.juice-candid .img-caption{margin-top:8px;}

/* The shared .food-spread breakpoint (elsewhere on the site) already
   collapses to a single column and hides .fp-gutter/.running-head at this
   width — these rules just adapt the Juice-specific pieces to match. */
@media (max-width:1099.98px){
  .juice-title{font-size:clamp(40px,13vw,64px);}
  .juice-opening-photo{margin:18px auto 0;max-width:260px;}
  .juice-video-wrap{
    position:relative;right:auto;top:auto;transform:none;
    width:min(100%,320px);margin:0 auto 18px;
  }
  .juice-exclude{display:none;}
  .food-spread + .folio-bar{margin-bottom:28px;}
}

/* ==========================================================================
   RAW9 SPOTLIGHT — notebook interview (breaking-bboy-spotlight-raw9.html)
   ========================================================================== */
/* The real handwritten page beside a live, selectable reading version —
   neither replaces the other. The photo is the actual artifact; the pad
   below is a styled digital transcript, never presented as the original. */
.raw9-notebook{display:grid;grid-template-columns:0.9fr 1.1fr;gap:28px;align-items:start;margin:26px 0;}
.raw9-notebook-photo img{
  display:block;width:100%;height:auto;border-radius:2px;
  box-shadow:0 2px 10px rgba(3,3,3,.18);
}
.raw9-notebook-photo figcaption{margin-top:8px;}
.raw9-notebook-photo .article-link{margin-top:6px;}

.raw9-legal-pad{
  position:relative;background-color:#f9efc4;
  background-image:repeating-linear-gradient(
    to bottom, transparent, transparent 30px,
    rgba(48,74,168,.35) 30px, rgba(48,74,168,.35) 31px
  );
  border-radius:2px;padding:22px 22px 22px 36px;
  box-shadow:0 1px 4px rgba(3,3,3,.15);
}
.raw9-legal-pad::before{
  content:"";position:absolute;left:24px;top:0;bottom:0;width:1px;
  background:rgba(190,45,45,.55);
}
.raw9-legal-pad .raw9-smiley{
  position:absolute;top:14px;right:18px;font-size:18px;color:rgba(3,3,3,.35);
}
.raw9-legal-pad p{
  font-family:var(--body-serif);font-size:17px;line-height:1.7;
  margin:0 0 22px;position:relative;z-index:1;
}
.raw9-legal-pad p:last-child{margin-bottom:0;}
.raw9-legal-pad strong{font-weight:700;}
.raw9-legal-pad em{font-style:italic;display:block;margin-top:2px;}
.raw9-transcript-note{
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink);
  opacity:.65;margin:12px 0 0;max-width:60ch;
}
@media (max-width:900px){
  .raw9-notebook{grid-template-columns:1fr;}
}

/* ===== Public launch (2026-10-11): internal Pass 1 material is never shown to visitors.
   It stays in the files and shows only in dev view (html[data-mode="dev"]). ===== */
html:not([data-mode="dev"]) .p1-note,
html:not([data-mode="dev"]) .p1-tbd,
html:not([data-mode="dev"]) .food-devnotice,
html:not([data-mode="dev"]) .p1-off,
html:not([data-mode="dev"]) [data-pass1]{display:none !important;}
/* Departments not open yet: shown as a quiet "Soon" label, never a link. */
.fn-menu .fn-soon{display:block;opacity:.55;cursor:default;}
.fn-menu .fn-soon small{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-left:6px;}


/* ==========================================================================
   HISTORY FEATURE — "How We Got Here" (history-how-we-got-here.html)
   ========================================================================== */
.hy-byline{
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);opacity:.6;margin:0 0 22px;
}
/* closing notice for the documentary: a quiet rule-and-type block, not a card */
.hy-doc{margin:56px 0 12px;padding-top:26px;border-top:2px solid var(--coal);max-width:66ch;}
.hy-doc-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,3.6vw,40px);line-height:1;margin:0 0 8px;
}
.hy-doc p{font-family:var(--body-serif);font-size:18px;line-height:1.5;margin:0 0 14px;}
.hy-doc .hy-doc-tag{font-style:italic;font-size:19px;}
.hy-doc .hy-doc-status{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-ink,#C0331A);margin:18px 0;
}

/* ==========================================================================
   BARS ARTIST STORY (bars-road-to-beats-and-bars.html)
   ========================================================================== */
.ap-featuring{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 22px;}
.ap-featuring p{
  margin:0;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);opacity:.6;
}
.ap-featuring img{height:104px;width:auto;max-width:none;margin:-8px 0;}
/* 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. */
.food-nav,.fn-menu,.hustle-panel,.amb-ad--full-page{--ember-ink:#FE4B0B;}

/* G009 accessibility: `.food-edition a{color:inherit}` out-ranked the button rules, so orange buttons
   showed cream text (3.2:1). Restore each button's intended text colour. */
.food-edition a.tk-btn{color:var(--coal);}
.food-edition a.tk-btn--ghost{color:var(--cream);}
.food-edition a.ct-chip--primary{color:var(--coal);}
.food-edition a.ct-chip--primary:hover{color:var(--cream);}
.food-edition a.amb-cta{color:var(--amb-coal,#030303);}
.food-edition .amb-ad--classified a.amb-cta{color:var(--amb-cream,#FDF9EE);}
.food-edition .amb-ad--classified a.amb-cta:hover{color:var(--amb-coal,#030303);}
.food-edition a.ct-action--primary{color:var(--coal);}