:root{
      --coal:#151713;
      --coal-2:#1d1f1a;
      --cream:#f2e8d3;
      --paper:#f8f2e5;
      --mustard:#d7a934;
      --muted:#746d61;
      --line:rgba(21,23,19,.18);
      --max:1440px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--paper);
      color:var(--coal);
      font-family:Arial,Helvetica,sans-serif;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%;height:auto}
    .skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:.75rem 1rem;z-index:100}
    .skip:focus{left:1rem;top:1rem}

    /* Header: deliberately self-contained to avoid the duplicate-nav bug. */
    .site-header{
      position:sticky;top:0;z-index:50;
      background:var(--coal);
      color:#fff;
      border-bottom:1px solid rgba(255,255,255,.1);
    }
    .site-header__inner{
      width:min(calc(100% - 40px),var(--max));
      min-height:72px;margin:auto;
      display:flex;align-items:center;justify-content:space-between;gap:24px;
    }
    .brand{display:flex;align-items:baseline;gap:5px;font-weight:900;letter-spacing:-.03em;white-space:nowrap}
    .brand__name{font-size:1.25rem}
    .brand__tag{font-size:.54rem;letter-spacing:.19em;font-weight:700;opacity:.92}
    .nav{display:flex;align-items:center;gap:6px}
    .nav a{
      padding:10px 13px;
      font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
      border:1px solid transparent;
    }
    .nav a:hover,.nav a:focus-visible{border-color:rgba(255,255,255,.35);outline:none}
    .nav a[aria-current="page"]{border-color:var(--mustard);box-shadow:inset 0 -3px 0 var(--mustard)}
    .menu-button{display:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);padding:9px 11px;font-weight:800;letter-spacing:.08em}

    main{overflow:hidden}
    .wrap{width:min(calc(100% - 48px),var(--max));margin-inline:auto}
    .kicker{font-size:.72rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#7d5f14}

    .hero{
      position:relative;
      min-height:640px;
      border-bottom:1px solid var(--line);
      background:linear-gradient(90deg,var(--cream) 0 66%,var(--mustard) 66% 100%);
    }
    .hero__grid{
      min-height:640px;
      display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.72fr);
      align-items:center;gap:6vw;
      padding-block:64px;
    }
    .hero__copy{position:relative;z-index:2}
    .hero h1{
      max-width:12ch;
      margin:16px 0 24px;
      font-size:clamp(3.4rem,6vw,6.8rem);
      line-height:.88;
      letter-spacing:-.065em;
      text-transform:uppercase;
      font-weight:950;
    }
    .hero__lede{max-width:720px;font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.52;margin:0;color:#33342f}
    .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
    .button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:2px solid var(--coal);font-size:.74rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
    .button--dark{background:var(--coal);color:#fff}
    .button--dark:hover,.button--dark:focus-visible{background:#000;outline:none}
    .button--ghost:hover,.button--ghost:focus-visible{background:rgba(21,23,19,.06);outline:none}
    .hero__art{position:relative;z-index:1;justify-self:end;width:min(100%,520px);transform:rotate(.6deg)}
    .hero__art::before{content:"";position:absolute;inset:16px -18px -18px 18px;background:rgba(21,23,19,.14);z-index:-1}
    .hero__art-frame{background:var(--coal);padding:12px;border:2px solid var(--coal)}
    .hero__art-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.92) contrast(1.03)}
    .hero__caption{margin-top:9px;color:#fff;font-size:.63rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}

    .section{padding:90px 0;border-bottom:1px solid var(--line)}
    .section__grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:48px}
    .section__num{font-size:clamp(3.6rem,6vw,7rem);line-height:.8;font-weight:950;letter-spacing:-.07em;color:var(--mustard)}
    .section__content{max-width:900px}
    .section h2{margin:0 0 18px;font-size:clamp(2.1rem,3.7vw,4rem);line-height:.96;letter-spacing:-.05em;text-transform:uppercase}
    .section p{max-width:790px;margin:0 0 18px;font-size:1.05rem;line-height:1.66;color:#30312d}
    .section strong{font-weight:900}
    .staccato{margin:26px 0 0;padding:0;list-style:none;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
    .staccato li{padding:8px 0;border-bottom:1px solid var(--line);font-size:clamp(1.05rem,1.8vw,1.45rem)}
    .source-note{margin-top:28px;font-size:.76rem;color:var(--muted);line-height:1.55}
    .source-note a{text-decoration:underline;text-underline-offset:3px}

    .manifesto{
      background:var(--coal);color:var(--cream);
      min-height:74vh;display:grid;place-items:center;
      border-bottom:10px solid var(--mustard);
    }
    .manifesto__text{
      width:min(calc(100% - 48px),var(--max));
      padding:90px 0;
      font-size:clamp(3.2rem,8vw,8.8rem);
      line-height:.82;letter-spacing:-.065em;font-weight:950;text-transform:uppercase;
      max-width:12ch;
    }
    .manifesto__text em{font-style:normal;color:var(--mustard)}

    .split{padding:0;border-bottom:1px solid var(--line)}
    .split__grid{display:grid;grid-template-columns:1fr 1fr;min-height:680px}
    .split__copy{padding:90px max(48px,6vw);align-self:center}
    .split__copy .section__num{font-size:5rem}
    .split__copy h2{margin:22px 0;font-size:clamp(2.2rem,4vw,4.5rem);line-height:.92;letter-spacing:-.055em;text-transform:uppercase}
    .split__copy p{font-size:1.05rem;line-height:1.65;max-width:690px}
    .split__media{position:relative;background:var(--mustard);display:grid;place-items:center;padding:56px}
    .split__media figure{margin:0;width:min(100%,560px);background:var(--coal);padding:12px;transform:rotate(-.8deg);box-shadow:24px 24px 0 rgba(21,23,19,.14)}
    .split__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
    .split__media figcaption{color:#fff;margin-top:9px;font-size:.63rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}

    .judgement{background:var(--cream)}
    .judgement__lead{font-size:clamp(1.35rem,2vw,1.8rem)!important;line-height:1.4!important;font-weight:850;color:var(--coal)!important}
    .judgement__rules{margin:36px 0 0;padding:0;list-style:none;max-width:900px;border-top:2px solid var(--coal)}
    .judgement__rules li{padding:18px 0;border-bottom:1px solid var(--line);font-size:clamp(1.25rem,2.4vw,2.25rem);line-height:1.08;font-weight:900;letter-spacing:-.025em}
    .judgement__final{margin-top:34px!important;font-size:clamp(1.45rem,2.6vw,2.4rem)!important;font-weight:950;line-height:1.1!important;color:var(--coal)!important}

    .origin{background:var(--mustard)}
    .origin .section__num{color:var(--coal)}
    .origin p{color:#24251f}
    .ingredients{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:34px;max-width:980px}
    .ingredient{min-height:96px;border:2px solid var(--coal);display:flex;align-items:flex-end;padding:14px;font-weight:950;text-transform:uppercase;letter-spacing:-.02em}

    .archive{background:var(--paper)}
    .archive-card{margin-top:30px;max-width:1000px;border:2px solid var(--coal);display:grid;grid-template-columns:170px 1fr}
    .archive-card__stamp{background:var(--coal);color:var(--cream);display:grid;place-items:center;padding:24px;text-align:center}
    .archive-card__stamp strong{font-size:2.2rem;letter-spacing:-.04em}
    .archive-card__body{padding:30px}
    .archive-card__body h3{margin:0 0 12px;font-size:clamp(1.6rem,2.5vw,2.5rem);line-height:1;text-transform:uppercase;letter-spacing:-.04em}
    .archive-card__body p{margin-bottom:20px}

    .closing{background:var(--coal);color:var(--cream);padding:90px 0 0}
    .closing__statement{font-size:clamp(3.6rem,8.8vw,9.8rem);line-height:.78;letter-spacing:-.07em;font-weight:950;text-transform:uppercase;margin:0;max-width:9ch}
    .closing__statement span{color:var(--mustard)}
    .closing__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:54px}
    .closing .button{border-color:var(--cream);color:var(--cream)}
    .closing .button--accent{background:var(--mustard);border-color:var(--mustard);color:var(--coal)}
    .footer{margin-top:90px;border-top:1px solid rgba(255,255,255,.15);padding:24px 0 30px;display:flex;justify-content:space-between;gap:24px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#c9c1af}

    @media (max-width:980px){
      .nav{display:none;position:absolute;left:0;right:0;top:72px;background:var(--coal);padding:14px 20px 20px;flex-direction:column;align-items:stretch;border-top:1px solid rgba(255,255,255,.12)}
      .nav.is-open{display:flex}
      .nav a{padding:12px 8px}
      .menu-button{display:block}
      .hero{background:var(--cream)}
      .hero::after{content:"";position:absolute;right:0;top:0;bottom:0;width:21%;background:var(--mustard)}
      .hero__grid{grid-template-columns:1fr .72fr;gap:34px}
      .section__grid{grid-template-columns:125px 1fr;gap:28px}
      .split__grid{grid-template-columns:1fr}
      .split__media{min-height:560px}
      .ingredients{grid-template-columns:repeat(3,1fr)}
    }
    @media (max-width:720px){
      .site-header__inner{width:min(calc(100% - 28px),var(--max));min-height:64px}
      .nav{top:64px}
      .wrap{width:min(calc(100% - 30px),var(--max))}
      .brand__name{font-size:1.07rem}.brand__tag{font-size:.46rem}
      .hero{min-height:auto;background:var(--cream)}
      .hero::after{display:none}
      .hero__grid{min-height:auto;grid-template-columns:1fr;padding:48px 0 56px}
      .hero h1{font-size:clamp(3rem,15vw,5rem);max-width:10ch}
      .hero__art{justify-self:stretch;width:100%;max-width:540px;margin-top:12px}
      .hero__art-frame img{aspect-ratio:16/12}
      .section{padding:62px 0}
      .section__grid{grid-template-columns:1fr;gap:22px}
      .section__num{font-size:3.8rem}
      .manifesto{min-height:58vh}
      .manifesto__text{width:min(calc(100% - 30px),var(--max));padding:70px 0;font-size:clamp(3rem,15vw,6.2rem)}
      .split__copy{padding:62px 18px}
      .split__media{min-height:auto;padding:42px 20px}
      .ingredients{grid-template-columns:1fr 1fr}
      .archive-card{grid-template-columns:1fr}
      .archive-card__stamp{place-items:start;padding:18px 24px}
      .closing{padding-top:70px}
      .closing__statement{font-size:clamp(3.1rem,16vw,6rem)}
      .footer{flex-direction:column}
    }
    @media (max-width:430px){
      .brand__tag{display:none}
      .actions,.closing__actions{flex-direction:column;align-items:stretch}
      .button{width:100%}
      .ingredients{grid-template-columns:1fr}
    }
    @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* CSP-safe replacements for former inline style attributes. */
.mt-26{margin-top:26px!important}
.mt-30{margin-top:30px!important}

/* Defensive layout guards. */
.hero h1,.section h2,.split__copy h2,.closing__statement{overflow-wrap:break-word}
svg{max-width:100%;height:auto}

/* BRX-SOBRE-FAIXAS-VERTICAIS-INICIO */

/*
 * SOBRE — ritmo editorial vertical
 *
 * Sequência:
 * carvão → creme → areia → carvão → creme
 * → areia → carvão → creme → areia → carvão
 *
 * Mostarda permanece apenas como acento.
 */

:root {
  --sobre-sand: #dfd3b8;
  --sobre-dark-text: #f2e8d3;
  --sobre-dark-muted: #d2c8b5;
}


/* ================================================================
   01 — HERO | CARVÃO
   ================================================================ */

main#conteudo > section:nth-of-type(1),
main#conteudo > .hero {
  background: var(--coal);
  color: var(--sobre-dark-text);
}

main#conteudo > .hero::after {
  background: var(--mustard);
}

main#conteudo > .hero h1 {
  color: var(--sobre-dark-text);
}

main#conteudo > .hero .hero__lede {
  color: var(--sobre-dark-muted);
}


/* ================================================================
   02 — IMPERFEITA. BARULHENTA. NECESSÁRIA. | CREME
   ================================================================ */

main#conteudo > section:nth-of-type(2) {
  background: var(--cream);
  color: var(--coal);
}

main#conteudo > section:nth-of-type(2) p {
  color: #30312d;
}


/* ================================================================
   03 — UMA IMAGEM CHEGA ANTES... | AREIA
   ================================================================ */

main#conteudo > section:nth-of-type(3) {
  background: var(--sobre-sand);
  color: var(--coal);
}

main#conteudo > section:nth-of-type(3) p {
  color: #30312d;
}


/* ================================================================
   04 — MANIFESTO | CARVÃO
   ================================================================ */

main#conteudo > section:nth-of-type(4),
main#conteudo > .manifesto {
  background: var(--coal);
  color: var(--sobre-dark-text);
}


/* ================================================================
   05 — MEME NÃO É TRATADO... | CREME
   ================================================================ */

main#conteudo > section:nth-of-type(5) {
  background: var(--cream);
  color: var(--coal);
}

main#conteudo > section:nth-of-type(5) p {
  color: #30312d;
}


/* ================================================================
   06 — ÀS VEZES A REALIDADE... | AREIA
   ================================================================ */

main#conteudo > section:nth-of-type(6),
main#conteudo > .split {
  background: var(--sobre-sand);
  color: var(--coal);
}

main#conteudo > .split .split__copy {
  background: transparent;
}

main#conteudo > .split .split__copy p {
  color: #30312d;
}

/*
 * A mídia deixa de usar uma grande placa mostarda.
 * O mostarda continua presente nos detalhes do layout.
 */
main#conteudo > .split .split__media {
  background: var(--coal-2);
}


/* ================================================================
   07 — DESCONFIANÇA... | CARVÃO
   ================================================================ */

main#conteudo > section:nth-of-type(7),
main#conteudo > .judgement {
  background: var(--coal);
  color: var(--sobre-dark-text);
}

main#conteudo > .judgement h2,
main#conteudo > .judgement p,
main#conteudo > .judgement .judgement__lead,
main#conteudo > .judgement .judgement__final {
  color: var(--sobre-dark-text) !important;
}

main#conteudo > .judgement .judgement__rules {
  border-top-color: var(--mustard);
}

main#conteudo > .judgement .judgement__rules li {
  border-bottom-color: rgba(242,232,211,.20);
}


/* ================================================================
   08 — ESPAÇO PÚBLICO DIGITAL... | CREME
   ================================================================ */

main#conteudo > section:nth-of-type(8),
main#conteudo > .origin {
  background: var(--cream);
  color: var(--coal);
}

main#conteudo > .origin .section__num {
  color: var(--mustard);
}

main#conteudo > .origin p {
  color: #30312d;
}


/* ================================================================
   09 — O MEME PASSA. O ARQUIVO FICA. | AREIA
   ================================================================ */

main#conteudo > section:nth-of-type(9),
main#conteudo > .archive {
  background: var(--sobre-sand);
  color: var(--coal);
}

main#conteudo > .archive p {
  color: #30312d;
}

/*
 * O card do arquivo ganha contraste próprio
 * sem competir com a faixa de fundo.
 */
main#conteudo > .archive .archive-card {
  background: var(--paper);
}


/* ================================================================
   10 — FECHAMENTO | CARVÃO
   ================================================================ */

main#conteudo > section:nth-of-type(10),
main#conteudo > .closing {
  background: var(--coal);
  color: var(--sobre-dark-text);
}


/* ================================================================
   ACENTOS
   ================================================================ */

main#conteudo .section__num,
main#conteudo .manifesto__text em,
main#conteudo .closing__statement span {
  color: var(--mustard);
}


/* Separação muito discreta entre faixas claras. */
main#conteudo > section {
  border-bottom-color: rgba(21,23,19,.14);
}


/* Nas faixas escuras, a divisão acompanha o fundo. */
main#conteudo > .hero,
main#conteudo > .manifesto,
main#conteudo > .judgement,
main#conteudo > .closing {
  border-bottom-color: rgba(242,232,211,.10);
}


/* BRX-SOBRE-FAIXAS-VERTICAIS-FIM */