:root {
  color-scheme: light;
  --ink: #171923;
  --muted: #535b6c;
  --paper: #eeeff3;
  --sheet: #fbfbfd;
  --wash: #dbeaff;
  --pine: #175db4;
  --lime: #ffdf16;
  --coral: #ff7628;
  --blue: #155fb5;
  --line: #252935;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --serif: Impact, "Arial Narrow", system-ui, sans-serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand: "Arial Narrow", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  background-color: var(--paper);
  background-image: radial-gradient(#6374512d .8px, transparent .8px), linear-gradient(112deg, transparent 0 72%, #d6c99f35 72.1% 72.3%, transparent 72.4%);
  background-size: 15px 15px, 100% 100%;
}
a { color: #315e45; text-decoration-thickness: .09em; text-underline-offset: .18em; }
a:hover { color: #a64737; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
img, iframe { max-width: 100%; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 20; padding: .7rem 1rem; color: var(--ink); background: var(--lime); }
.skip-link:focus { left: 1rem; top: 1rem; }

.site-header { position: relative; z-index: 2; color: var(--sheet); background: #20372e; border-bottom: 5px solid var(--coral); box-shadow: 0 5px 0 #20372e20; }
.site-header::after { content: ""; position: absolute; right: 0; bottom: -9px; width: 34%; height: 4px; background: repeating-linear-gradient(90deg, var(--lime) 0 9px, transparent 9px 16px); transform: rotate(-.7deg); }
.header-inner, .container { width: min(1160px, calc(100% - 3rem)); margin-inline: auto; }
.header-inner { min-height: 88px; display: flex; gap: 2rem; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; gap: .9rem; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { position: relative; width: 50px; height: 50px; display: grid; place-items: center; color: var(--ink); background: var(--lime); border: 2px solid var(--ink); outline: 2px solid var(--lime); transform: rotate(-4deg); box-shadow: 4px 4px 0 #111e18; }
.brand-mark::before { content: ""; position: absolute; inset: 4px; border: 1px dashed #557146; }
.brand-mark::after { content: "✳"; position: absolute; top: -13px; right: -11px; color: var(--coral); font: 1.2rem var(--serif); transform: rotate(11deg); }
.brand-mark svg { width: 35px; height: 35px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.brand-copy { display: grid; line-height: 1.08; }
.brand-copy strong { font: 700 1.12rem var(--serif); letter-spacing: .02em; }
.brand-copy small { margin-top: .4rem; color: #cfdec8; font: .57rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.primary-nav { display: flex; gap: .5rem; align-items: center; font: .63rem var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.primary-nav a { position: relative; padding: .5rem .66rem; color: var(--sheet); border: 1px solid transparent; text-decoration: none; }
.primary-nav a:hover { color: var(--ink); background: var(--lime); border-color: var(--ink); box-shadow: 3px 3px 0 #111e18; transform: rotate(-1deg); }
.container { padding-block: 3rem 5rem; }
.eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 .85rem; color: #3b6846; font: 700 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow::before { content: "✳"; color: var(--coral); font-size: 1rem; }

/* Portada: un caderno de campo ilustrado abre o arquivo. */
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.03fr .97fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; min-height: 465px; padding: clamp(1.5rem, 4.3vw, 3.8rem); background: #e6edcd; border: 2px solid var(--ink); border-radius: 5px 22px 7px 18px; box-shadow: 9px 10px 0 #20372e;
  transform: rotate(-.25deg);
}
.hero::before { content: ""; position: absolute; z-index: -1; top: -90px; right: 22%; width: 360px; height: 360px; border: 2px dashed #60795255; border-radius: 50%; box-shadow: 0 0 0 18px #fff7df55, 0 0 0 42px #fff7df33; }
.hero::after { content: "ARQUIVO DE CAMPO   /   VOL. 01"; position: absolute; top: 1.15rem; right: 1.2rem; color: #607058; font: .56rem var(--mono); letter-spacing: .09em; transform: rotate(1.5deg); }
.hero-content { position: relative; z-index: 1; }
.hero h1 { max-width: 590px; margin: 0; color: var(--ink); font: 500 clamp(2.7rem, 5.4vw, 5.1rem)/.94 var(--serif); letter-spacing: -.06em; }
.hero h1 em { display: block; margin-top: .12em; color: #416b43; font-style: normal; }
.hero-copy { max-width: 455px; margin: 1.15rem 0 0; color: #455d4e; font-size: .97rem; }
.hero-copy strong { color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 1.5rem; }
.button-primary { display: inline-flex; min-height: 45px; align-items: center; gap: .65rem; padding: .65rem .9rem; color: var(--ink); background: var(--lime); border: 2px solid var(--ink); border-radius: 3px 11px 3px 8px; font: 800 .66rem var(--mono); text-decoration: none; text-transform: uppercase; box-shadow: 4px 4px 0 var(--ink); transition: transform .16s ease, box-shadow .16s ease; }
.button-primary:hover { color: var(--ink); box-shadow: 1px 1px 0 var(--ink); transform: translate(3px, 3px) rotate(-1deg); }
.text-link { color: #315e45; font: .63rem var(--mono); text-decoration-style: wavy; text-transform: uppercase; }
.hero-stats { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: 1.8rem; padding-top: .8rem; border-top: 1px dashed #8e997e; color: #52644f; font: .55rem var(--mono); letter-spacing: .025em; text-transform: uppercase; }
.hero-stats strong { color: #a24a39; font-weight: 800; }
.hero-evidence { position: relative; display: block; min-height: 295px; height: 100%; max-height: 395px; overflow: visible; color: var(--ink); border: 2px solid var(--ink); border-radius: 7px 16px 5px 21px; text-decoration: none; background: var(--sheet); box-shadow: 8px 9px 0 #20372e; transform: rotate(1.4deg); }
.hero-evidence::before { content: ""; position: absolute; z-index: 2; top: -15px; left: 36%; width: 104px; height: 26px; background: #f4c66a; border: 1px solid #715e38; opacity: .92; transform: rotate(-4deg); clip-path: polygon(3% 0,100% 6%,96% 100%,0 92%); }
.hero-evidence::after { content: "EVIDÊNCIA VISUAL  /  001"; position: absolute; z-index: 3; top: .75rem; left: .7rem; padding: .33rem .5rem; color: var(--sheet); background: #20372e; border: 1px solid var(--ink); font: .54rem var(--mono); letter-spacing: .08em; }
.hero-evidence img { display: block; width: 100%; height: 100%; min-height: 295px; max-height: 395px; border-radius: 5px 14px 3px 19px; object-fit: cover; }
.evidence-caption { position: absolute; z-index: 3; left: .65rem; right: .65rem; bottom: .7rem; display: grid; gap: .1rem; padding: .65rem .8rem; color: var(--ink); background: var(--sheet); border: 1px solid var(--ink); box-shadow: 3px 3px 0 #20372e; }
.evidence-caption strong { font: 500 clamp(1.2rem, 2.2vw, 1.8rem)/1.06 var(--serif); }
.evidence-caption small { color: #556654; font: .55rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hero-stamp { position: absolute; z-index: 4; right: 1rem; bottom: .85rem; padding: .34rem .5rem; color: #a74736; border: 2px solid var(--coral); background: #fff4e4e8; font: .56rem var(--mono); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-8deg); }
.section-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin: 3.8rem 0 1.35rem; padding-bottom: .65rem; border-bottom: 2px dashed #84907b; }
.section-heading h2 { margin: 0; color: var(--ink); font: 500 clamp(1.75rem, 3.3vw, 2.45rem)/1.12 var(--serif); letter-spacing: -.03em; }
.section-heading span { color: #60705e; font: .57rem var(--mono); letter-spacing: .07em; text-align: right; text-transform: uppercase; }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
.case-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-card { position: relative; overflow: visible; display: flex; flex-direction: column; min-height: 100%; color: var(--ink); background: var(--sheet); border: 2px solid var(--ink); border-radius: 6px 14px 5px 12px; text-decoration: none; box-shadow: 6px 7px 0 #20372e; transition: transform .18s ease, box-shadow .18s ease; }
.story-card:nth-child(odd) { transform: rotate(-.55deg); }
.story-card:nth-child(even) { transform: rotate(.45deg); }
.story-card:hover { color: var(--ink); box-shadow: 3px 4px 0 #20372e; transform: translateY(-4px) rotate(0); }
.story-card::before { content: ""; position: absolute; z-index: 2; top: -8px; right: 24px; width: 53px; height: 15px; background: #f4c66a; border: 1px solid #715e38; opacity: .92; transform: rotate(4deg); clip-path: polygon(4% 0,100% 7%,94% 100%,0 92%); }
.story-card > img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #dce8ce; border-bottom: 2px solid var(--ink); border-radius: 4px 12px 0 0; }
.story-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1rem 1.05rem 1.1rem; }
.case-number { margin-bottom: .4rem; color: #6b7d65; font: .53rem var(--mono); letter-spacing: .1em; }
.tag { display: inline-block; color: #3d6845; font: 800 .56rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.story-body h3 { margin: .52rem 0 .45rem; color: var(--ink); font: 500 1.4rem/1.16 var(--serif); }
.story-body p { margin: 0; color: #596b5d; font-size: .85rem; line-height: 1.48; }
.story-meta { display: flex; gap: .5rem; align-items: center; margin-top: auto; padding-top: 1.05rem; color: #697663; font: .55rem var(--mono); text-transform: uppercase; }
.story-meta::before { content: "✳"; color: var(--coral); font-size: .8rem; }
.category-strip { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.category-chip { position: relative; padding: .48rem .8rem .48rem 1.85rem; color: var(--ink); background: #fff9e9; border: 1px solid var(--ink); border-radius: 3px 12px 5px 10px; font: .61rem var(--mono); text-decoration: none; box-shadow: 3px 3px 0 #20372e45; transform: rotate(-.7deg); }
.category-chip::before { content: "↗"; position: absolute; left: .68rem; color: #b64d3b; }
.category-chip:nth-child(even) { transform: rotate(.65deg); }
.category-chip:hover { color: var(--ink); background: var(--lime); }
.callout { position: relative; margin: 1.4rem 0; padding: 1rem 1.2rem; color: #344b3d; background: #faefbd; border: 1px solid #a99d70; border-left: 5px solid var(--coral); box-shadow: 4px 5px 0 #20372e22; transform: rotate(-.25deg); }
.callout strong { display: block; margin-bottom: .25rem; color: #a34938; font: 800 .62rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }

/* Pranchas ilustradas dão uma linguagem comum a arquivo, categorias e artigos. */
.page-intro { display: grid; grid-template-columns: 1fr .88fr; gap: .2rem 2.2rem; align-items: center; margin-bottom: 3rem; padding: clamp(1.35rem, 3vw, 2.4rem); background: var(--sheet); border: 2px solid var(--ink); border-radius: 7px 20px 6px 16px; box-shadow: 7px 8px 0 #20372e; transform: rotate(-.22deg); }
.page-intro > .eyebrow, .page-intro > h1, .page-intro > p { grid-column: 1; }
.page-intro h1 { margin: 0; color: var(--ink); font: 500 clamp(2.35rem, 4.5vw, 4.4rem)/.98 var(--serif); letter-spacing: -.05em; }
.page-intro > p:not(.eyebrow) { margin: .8rem 0 0; color: #55685a; font-size: 1rem; }
.page-art { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; padding: .45rem; background: #fffdfa; border: 2px solid var(--ink); box-shadow: 5px 6px 0 #20372e; transform: rotate(1deg); }
.page-art img { display: block; width: 100%; height: auto; }
.page-art figcaption, .article-art figcaption { padding: .4rem .2rem 0; color: #62705d; font: .53rem var(--hand); text-align: right; }
.article-grid:has(> .story-card:only-child) { grid-template-columns: minmax(0, 610px); }
.category-strip + .callout { margin-top: 2rem; }

.article-shell { width: min(1080px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .94fr); column-gap: clamp(1.5rem, 4vw, 3.8rem); align-items: start; margin-inline: auto; padding: clamp(1.2rem, 3.2vw, 2.7rem); background: var(--sheet); border: 2px solid var(--ink); border-radius: 6px 20px 8px 18px; box-shadow: 9px 10px 0 #20372e; }
.breadcrumbs { grid-column: 1 / -1; margin: 0 0 1.2rem; color: #697865; font: .57rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.breadcrumbs a { color: #416b43; }
.article-shell > .eyebrow { grid-column: 1; grid-row: 2; margin-bottom: .55rem; }
.article-title { grid-column: 1; grid-row: 3; margin: 0; color: var(--ink); font: 500 clamp(2.45rem, 4.8vw, 4.4rem)/.98 var(--serif); letter-spacing: -.055em; }
.dek { grid-column: 1; grid-row: 4; margin: 1rem 0; color: #526354; font: 1.14rem/1.47 var(--serif); }
.article-meta { grid-column: 1; grid-row: 5; display: flex; flex-wrap: wrap; gap: .45rem .7rem; align-items: center; padding-top: .85rem; border-top: 1px dashed #9c9c82; color: #6d7967; font: .55rem var(--mono); text-transform: uppercase; }
.draft-flag { padding: .24rem .4rem; color: #873e30; background: #f7d8c7; border: 1px solid #ce7b61; border-radius: 2px 7px 2px 5px; }
.approval-flag { padding: .24rem .4rem; color: #fff; background: #155fb5; border: 2px solid #171923; border-radius: 2px; font-weight: 900; }
.article-art { grid-column: 2; grid-row: 2 / span 4; align-self: center; margin: .25rem 0 0; padding: .45rem; background: #f0e6cb; border: 2px solid var(--ink); border-radius: 3px 12px 5px 10px; box-shadow: 6px 7px 0 #20372e; transform: rotate(1.1deg); }
.article-art img { display: block; width: 100%; height: auto; }
.review-box { grid-column: 1 / -1; width: min(890px, 100%); justify-self: center; position: relative; margin: 2rem 0 .5rem; padding: 1rem 1.2rem 1rem 1.35rem; background: #faefbd; border: 1px solid #aca071; border-left: 5px solid var(--coral); }
.review-box::after { content: "LEITURA HUMANA"; position: absolute; top: -10px; right: 12px; padding: .18rem .35rem; color: #8d4337; background: #faefbd; border: 1px solid var(--coral); font: .49rem var(--mono); transform: rotate(2deg); }
.review-box h2 { margin: 0 0 .55rem; color: #9d4939; font: 600 1.08rem var(--serif); }
.review-box p, .review-box ul { margin: .4rem 0; color: #564f39; font-size: .84rem; }
.review-box ul { padding-left: 1.15rem; }
.article-body { grid-column: 1 / -1; width: min(790px, 100%); justify-self: center; margin-top: 1.8rem; }
.article-body > p, .article-body li { color: #34483c; font-size: 1.045rem; }
.article-body h2 { margin: 2.2rem 0 .55rem; color: var(--ink); font: 500 1.9rem/1.16 var(--serif); letter-spacing: -.025em; }
.article-body h2::before { content: "✳  "; color: var(--coral); font: .64em var(--sans); vertical-align: .12em; }
.article-body h3 { margin: 1.5rem 0 .4rem; color: #365c43; font: 600 1.26rem/1.3 var(--serif); }
.article-body blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.2rem; border-left: 3px solid var(--coral); color: #596957; font: italic 1.2rem/1.48 var(--serif); }
.article-body strong { color: #263f33; }
.article-body a { color: #315e45; }
.article-body > .callout { border-radius: 3px 13px 5px 10px; }
.video-embed { margin: 1.6rem 0; padding: .6rem; background: #e3edce; border: 2px solid var(--ink); box-shadow: 5px 6px 0 #20372e; transform: rotate(-.25deg); }
.video-embed iframe { display: block; width: 100%; aspect-ratio: 16/9; height: auto; border: 1px solid var(--ink); background: #1a2721; }
.video-embed figcaption { padding: .35rem .1rem 0; color: #5b6a5c; font-size: .77rem; }
.source-list { padding-left: 1.15rem; }
.source-list li { margin: .55rem 0; font-size: .9rem; }
.source-list a { overflow-wrap: anywhere; }
.related { margin-top: 3rem; padding-top: 1rem; border-top: 2px dashed #a3a38e; }
.related h2 { color: var(--ink); font: 500 1.6rem var(--serif); }
.related a { display: inline-block; margin: 0 .75rem .5rem 0; }
.protocol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; counter-reset: steps; }
.protocol-card { position: relative; min-height: 146px; padding: 1.15rem 1.3rem 1.2rem 1.4rem; background: var(--sheet); border: 2px solid var(--ink); border-radius: 6px 17px 5px 13px; box-shadow: 4px 5px 0 #20372e; }
.protocol-card:nth-child(odd) { transform: rotate(-.45deg); }
.protocol-card:nth-child(even) { transform: rotate(.5deg); }
.protocol-card strong { display: block; margin-bottom: .45rem; color: #3f6b45; font: 800 .63rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.protocol-card p { margin: 0; color: #536558; font-size: .89rem; }
.site-footer { position: relative; margin-top: 1rem; color: #e8ecd9; background: #20372e; border-top: 5px solid var(--lime); }
.site-footer::before { content: "✳"; position: absolute; top: -1.6rem; left: max(1rem, calc((100vw - 1160px) / 2)); color: var(--coral); font-size: 1.9rem; transform: rotate(-15deg); }
.footer-inner { width: min(1160px, calc(100% - 3rem)); margin: 0 auto; padding: 1.7rem 0 2.2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .78rem; }
.footer-inner p { margin: 0; }
.footer-inner a { color: var(--lime); }
.footer-note { color: #c7d0bb; font: .58rem var(--mono); }

@media (max-width: 820px) {
  .header-inner, .container, .footer-inner { width: min(100% - 2rem, 720px); }
  .header-inner { align-items: flex-start; flex-direction: column; gap: .8rem; padding-block: 1rem; }
  .primary-nav { width: 100%; gap: .25rem; overflow-x: auto; padding: .1rem 0 .4rem; white-space: nowrap; }
  .primary-nav a { padding-inline: .55rem; }
  .hero { grid-template-columns: 1fr; gap: 1.6rem; min-height: auto; padding: 2.25rem 1.25rem 1.4rem; }
  .hero::after { right: .65rem; top: .65rem; font-size: .48rem; }
  .hero h1 { padding-top: .65rem; }
  .hero-evidence { min-height: 0; height: auto; max-height: none; margin: .35rem .35rem .7rem 0; }
  .hero-evidence img { min-height: 0; max-height: none; height: auto; aspect-ratio: 720 / 560; }
  .hero-stamp { right: .75rem; bottom: .7rem; }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-grid:has(> .story-card:only-child) { grid-template-columns: minmax(0, 1fr); }
  .article-shell { grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); column-gap: 1.25rem; }
  .article-title { font-size: clamp(2.3rem, 6vw, 3.7rem); }
  .page-intro { grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); gap: .2rem 1.1rem; }
}
@media (max-width: 600px) {
  .article-grid, .case-pair, .protocol-grid { grid-template-columns: 1fr; }
  .page-intro { grid-template-columns: 1fr; gap: .1rem; }
  .page-art { grid-column: 1; grid-row: auto; width: min(100%, 420px); margin: 1rem auto .25rem; }
  .article-shell { display: block; padding: 1rem .9rem 1.4rem; }
  .article-art { margin: 1.2rem .2rem 1.4rem; }
  .article-title { font-size: clamp(2.3rem, 11vw, 3.6rem); }
  .dek { font-size: 1.08rem; }
  .review-box { margin-top: 2.2rem; }
  .story-card { display: grid; grid-template-columns: minmax(112px, .7fr) 1.3fr; min-height: 160px; }
  .story-card > img { height: 100%; min-height: 160px; aspect-ratio: auto; border: 0; border-right: 2px solid var(--ink); border-radius: 4px 0 0 8px; }
  .story-body { padding: .75rem .8rem; }
  .story-body h3 { font-size: 1.18rem; }
  .story-body p { font-size: .78rem; }
  .story-meta { font-size: .51rem; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: .28rem; margin-top: 2.7rem; }
  .section-heading span { text-align: left; }
}
@media (max-width: 380px) {
  .story-card { grid-template-columns: 100px 1fr; }
  .story-body { padding: .65rem; }
  .story-body h3 { font-size: 1.05rem; }
  .tag { font-size: .51rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Identidade observada nas miniaturas reais do canal Dr. Silvana. */
body {
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(#18223a16 .85px, transparent .85px), linear-gradient(135deg, transparent 0 76%, #165fb30b 76.1% 100%);
  background-size: 13px 13px, 100% 100%;
}
.site-header { background: #151821; color: #fff; border-bottom-color: var(--lime); box-shadow: 0 6px 0 #10131a; }
.site-header::after { background: repeating-linear-gradient(90deg, var(--coral) 0 9px, transparent 9px 16px); }
.brand-mark { width: 54px; height: 54px; overflow: hidden; padding: 0; background: #fff; border: 3px solid #fff; outline: 2px solid var(--lime); border-radius: 50%; box-shadow: 3px 4px 0 #080a10; transform: none; }
.brand-mark::before { inset: -1px; border: 1px solid #171923; border-radius: 50%; z-index: 1; pointer-events: none; }
.brand-mark::after { content: "✦"; top: -9px; right: -7px; color: var(--lime); font-size: 1.35rem; text-shadow: 2px 2px 0 #171923; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.brand-copy small { color: #c5d5ef; }
.primary-nav a:hover { color: var(--ink); background: var(--lime); border-color: #05070b; box-shadow: 3px 3px 0 #05070b; }
.eyebrow { color: #16549b; font-weight: 800; }
.eyebrow::before { content: "✦"; color: var(--coral); }
.hero { min-height: 440px; background: #155fb5; border: 3px solid #11141d; border-radius: 2px; box-shadow: 10px 10px 0 #11141d; transform: none; }
.hero::before { top: auto; right: 31%; bottom: -235px; width: 430px; height: 430px; opacity: .34; border: 10px solid #ffdf16; border-radius: 50%; box-shadow: 0 0 0 17px #ffdf1635, 0 0 0 42px #ffdf1620; }
.hero::after { color: #fff; font-weight: 800; text-shadow: 1px 2px 0 #12141b; }
.hero h1 { color: #fff; font-family: Impact, "Arial Narrow", sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: .015em; text-shadow: 3px 4px 0 #12141b; }
.hero h1 em { color: var(--lime); font-style: normal; text-shadow: 3px 4px 0 #12141b; }
.hero-copy { color: #eef4ff; }
.hero-copy strong { color: var(--lime); }
.hero .eyebrow { color: var(--lime); text-shadow: 1px 1px 0 #11141d; }
.hero .eyebrow::before { color: var(--coral); }
.button-primary { color: #11141d; background: var(--lime); border: 2px solid #11141d; border-radius: 2px; box-shadow: 4px 4px 0 #11141d; }
.button-primary:hover { color: #11141d; }
.text-link { color: #fff; font-weight: 800; text-shadow: 1px 1px 0 #11141d; }
.hero-stats { border-top: 1px solid #ffffff75; color: #eef3ff; }
.hero-stats strong { color: var(--lime); }
.hero-evidence { min-height: 0; height: auto; max-height: none; aspect-ratio: 16 / 9; overflow: visible; background: #11141d; border: 3px solid #11141d; border-radius: 2px; box-shadow: 8px 8px 0 var(--lime); transform: rotate(1deg); }
.hero-evidence::before { content: none; }
.hero-evidence::after { top: -11px; left: auto; right: -7px; padding: .35rem .5rem; color: #11141d; background: var(--lime); border: 2px solid #11141d; font-size: .53rem; font-weight: 900; transform: rotate(2deg); }
.hero-evidence img { width: 100%; height: 100%; min-height: 0; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.evidence-caption { left: .5rem; right: auto; bottom: .55rem; max-width: calc(100% - 1rem); padding: .5rem .65rem; color: #fff; background: #171923eF; border: 2px solid #11141d; box-shadow: 3px 3px 0 var(--lime); }
.evidence-caption strong { color: #fff; font-family: Impact, "Arial Narrow", sans-serif; font-size: clamp(1.1rem, 2vw, 1.55rem); text-transform: uppercase; }
.evidence-caption small { color: var(--lime); }
.hero-stamp { color: #171923; background: var(--lime); border: 2px solid #11141d; transform: rotate(-5deg); }
.section-heading { border-bottom: 3px solid #171923; }
.section-heading h2 { font-family: Impact, "Arial Narrow", sans-serif; font-weight: 700; letter-spacing: .015em; text-transform: uppercase; }
.section-heading span { color: #374052; }
.story-card { background: #fff; border: 2px solid #171923; border-radius: 2px; box-shadow: 6px 7px 0 #171923; }
.story-card:nth-child(odd), .story-card:nth-child(even) { transform: none; }
.story-card:hover { box-shadow: 3px 4px 0 #171923; transform: translateY(-4px); }
.story-card::before { content: "✦"; top: -16px; right: 12px; width: auto; height: auto; padding: 0; color: var(--coral); background: transparent; border: 0; clip-path: none; font-size: 1.5rem; transform: rotate(9deg); }
.story-card > img { aspect-ratio: 16 / 9; border-bottom: 3px solid #171923; border-radius: 0; filter: none; }
.story-body { padding: 1rem 1.1rem 1.15rem; }
.case-number { color: #175db4; font-weight: 800; }
.tag { padding: .22rem .38rem; color: #171923; background: var(--lime); font-weight: 900; letter-spacing: .04em; }
.story-body h3 { color: #171923; font-family: Impact, "Arial Narrow", sans-serif; font-weight: 600; font-size: 1.5rem; letter-spacing: .005em; }
.story-body p { color: #4d5361; }
.story-meta { color: #4f596a; font-weight: 700; }
.story-meta::before { color: var(--coral); }
.category-chip { color: #171923; background: #fff; border: 2px solid #171923; border-radius: 2px; box-shadow: 3px 3px 0 #171923; transform: none; font-weight: 800; }
.category-chip:nth-child(even) { transform: none; }
.category-chip:hover { color: #171923; background: var(--lime); }
.callout { color: #232735; background: #fff2a6; border: 2px solid #171923; border-left: 8px solid var(--coral); box-shadow: 5px 5px 0 #171923; transform: none; }
.callout strong { color: #153d75; }
.page-intro { background: #155fb5; border: 3px solid #171923; border-radius: 2px; box-shadow: 8px 8px 0 #171923; transform: none; }
.page-intro > .eyebrow { color: var(--lime); }
.page-intro h1 { color: #fff; font-family: Impact, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .015em; text-shadow: 2px 3px 0 #171923; }
.page-intro > p:not(.eyebrow) { color: #eef4ff; }
.page-art { background: #fff; border: 3px solid #171923; box-shadow: 6px 6px 0 var(--lime); transform: rotate(1deg); }
.page-art figcaption, .article-art figcaption { color: #354050; font: 800 .55rem var(--mono); text-transform: uppercase; }
.article-shell { background: #fff; border: 3px solid #171923; border-radius: 2px; box-shadow: 9px 10px 0 #171923; }
.breadcrumbs { color: #505a6a; }
.article-title { color: #171923; font-family: Impact, "Arial Narrow", sans-serif; font-weight: 800; letter-spacing: .005em; text-transform: uppercase; }
.dek { color: #394253; font-family: var(--sans); }
.article-meta { color: #565f70; border-top: 2px solid #171923; }
.draft-flag { color: #171923; background: var(--lime); border: 2px solid #171923; border-radius: 2px; font-weight: 900; }
.article-art { background: #171923; border: 3px solid #171923; border-radius: 2px; box-shadow: 6px 7px 0 var(--coral); transform: rotate(1deg); }
.article-art figcaption { padding: .45rem .15rem 0; color: #f0f1f4; }
.review-box { background: #fff2a6; border: 2px solid #171923; border-left: 8px solid var(--coral); }
.review-box::after { color: #171923; background: var(--lime); border: 2px solid #171923; font-weight: 900; }
.review-box h2 { color: #171923; font-family: Impact, "Arial Narrow", sans-serif; text-transform: uppercase; }
.review-box p, .review-box ul { color: #414654; }
.article-body > p, .article-body li { color: #303542; }
.article-body h2 { color: #171923; font-family: Impact, "Arial Narrow", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.article-body h2::before { color: var(--coral); }
.article-body h3 { color: #15529b; font-family: Impact, "Arial Narrow", sans-serif; text-transform: uppercase; }
.article-body blockquote { border-left-color: var(--coral); color: #424b5b; }
.article-body strong { color: #11141d; }
.article-body a { color: #1559a6; }
.video-embed { background: #155fb5; border: 3px solid #171923; box-shadow: 6px 6px 0 var(--lime); transform: none; }
.video-embed iframe { border: 2px solid #171923; }
.video-embed figcaption { color: #fff; }
.protocol-card { background: #fff; border: 2px solid #171923; border-radius: 2px; box-shadow: 5px 5px 0 #171923; }
.protocol-card:nth-child(odd), .protocol-card:nth-child(even) { transform: none; }
.protocol-card strong { color: #171923; background: var(--lime); display: inline-block; padding: .22rem .4rem; }
.protocol-card p { color: #4d5361; }
.process-art { background: #151821; }
.process-art > img { display: block; width: min(63%, 220px); aspect-ratio: 1; margin: .4rem auto .75rem; object-fit: cover; border: 4px solid var(--lime); border-radius: 50%; box-shadow: 5px 5px 0 var(--coral); }
.process-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .24rem; padding: .5rem; color: #171923; background: var(--lime); border: 2px solid #171923; font: 900 .49rem var(--mono); text-align: center; }
.process-flow b { color: #b44724; font-size: .7rem; }
.process-art figcaption { color: #fff; }
.site-footer { color: #fff; background: #151821; border-top: 6px solid var(--lime); }
.site-footer::before { color: var(--coral); }
.footer-note { color: #c5d5ef; }
@media (max-width: 820px) {
  .hero-evidence { min-height: 0; height: auto; max-height: none; aspect-ratio: 16 / 9; }
  .hero-evidence img { min-height: 0; max-height: none; height: 100%; aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .page-art { transform: none; }
  .article-art { transform: none; }
}

/* Sprites autorais do Dr. Silvana encontrados nos chats de vídeo. */
.hero-evidence { isolation: isolate; }
.hero-evidence .hero-thumbnail { position: relative; z-index: 0; }
.hero-evidence .hero-mascot { position: absolute; z-index: 3; right: -.25rem; bottom: -.55rem; width: auto; height: 84%; max-width: 43%; max-height: 242px; aspect-ratio: auto; object-fit: contain; object-position: bottom center; pointer-events: none; filter: drop-shadow(3px 4px 0 #11141d); }
.hero-evidence .evidence-caption { z-index: 4; max-width: 66%; }
.hero-evidence::after { z-index: 5; }

.character-art, .case-illustration { position: relative; display: flex; min-height: 276px; aspect-ratio: 4 / 3; flex-direction: column; justify-content: flex-end; align-items: center; overflow: hidden; padding: 2.25rem .8rem .65rem; background-color: #131a2b; background-image: radial-gradient(circle at 50% 48%, #ffdf1629 0 1px, transparent 1.6px), radial-gradient(circle at 50% 50%, #155fb5 0 4%, transparent 66%); background-size: 14px 14px, 100% 100%; border: 3px solid #11141d; box-shadow: 6px 7px 0 #11141d; transform: none; }
.character-art::before, .case-illustration::before { content: ""; position: absolute; inset: 12px; border: 1px dashed #ffdf1680; pointer-events: none; }
.character-art .mascot-art, .case-illustration .mascot-art { position: relative; z-index: 1; display: block; width: min(82%, 320px); height: 236px; max-height: calc(100% - 3.4rem); margin: auto auto .1rem; object-fit: contain; object-position: center bottom; border: 0; border-radius: 0; background: transparent; box-shadow: none; filter: drop-shadow(2px 5px 0 #080a10); }
.category-index-art { min-height: 306px; grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.category-index-art .mascot-art { height: 254px; }
.character-art--titanoboa, .case-illustration--titanoboa { background-image: radial-gradient(circle at 25% 40%, #31b6aa55, transparent 34%), radial-gradient(circle at 50% 50%, #153e66 0 8%, #0f1729 72%); }
.character-art--lua, .case-illustration--lua { background-image: radial-gradient(circle at 76% 26%, #ffe891 0 2px, transparent 3px), radial-gradient(circle at 34% 38%, #7da6ff70, transparent 32%), radial-gradient(circle at 50% 50%, #20244d, #111523 76%); background-size: 37px 37px, 100% 100%, 100% 100%; }
.character-art--zumbi, .case-illustration--zumbi { background-image: radial-gradient(circle at 78% 33%, #ff76285c, transparent 29%), radial-gradient(circle at 26% 40%, #65426670, transparent 36%), linear-gradient(145deg, #171a2d, #25202c 65%, #11141d); }
.art-label, .art-clue { position: absolute; z-index: 2; max-width: calc(100% - 1.3rem); padding: .3rem .42rem; color: #11141d; background: #ffdf16; border: 2px solid #11141d; box-shadow: 3px 3px 0 #080a10; font: 900 .5rem/1.2 var(--mono); letter-spacing: .035em; text-transform: uppercase; }
.art-label { top: .72rem; left: .72rem; }
.art-clue { right: .72rem; bottom: 2.25rem; background: #ff7628; transform: rotate(2deg); }
.character-art figcaption, .case-illustration figcaption { position: relative; z-index: 2; width: 100%; margin-top: auto; padding: .35rem .25rem 0; color: #fff; font: 800 .52rem var(--mono); letter-spacing: .025em; text-align: right; text-transform: uppercase; }
.case-illustration { grid-column: 2; grid-row: 2 / span 4; min-height: 336px; aspect-ratio: 1 / 1.06; }
.case-illustration .mascot-art { width: min(88%, 350px); height: 278px; }
.case-illustration .art-clue { bottom: 2.35rem; }
.article-video-art .review-thumbnail { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.75); }
.article-video-art .mascot-art { z-index: 1; }
.draft-category-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2.2rem 0 .9rem; padding-bottom: .5rem; color: #171923; border-bottom: 2px solid #171923; font: 700 clamp(1.2rem, 2.6vw, 1.8rem)/1.1 Impact, "Arial Narrow", sans-serif; text-transform: uppercase; }
.draft-category-heading span { color: #4f596a; font: 700 .58rem var(--mono); letter-spacing: .05em; }
.draft-list-link { display: flex; min-height: 64px; align-items: center; padding: .85rem 1rem; color: #171923; background: #fff; border: 2px solid #171923; box-shadow: 4px 4px 0 #171923; font: 600 .9rem/1.3 var(--sans); text-decoration: none; }
.draft-list-link:hover { color: #171923; background: var(--lime); transform: translateY(-2px); }
.archive-grid { margin-bottom: 3rem; }
.process-art { min-height: 352px; aspect-ratio: 4 / 3; justify-content: flex-end; background-image: radial-gradient(circle at 50% 30%, #155fb5 0 4%, transparent 58%), radial-gradient(circle at 50% 50%, #ffdf1620 0 1px, transparent 1.5px); background-size: 100% 100%, 14px 14px; }
.process-art .mascot-art { width: min(70%, 275px); height: 250px; max-height: none; margin: auto auto .05rem; }
.process-art .process-flow { position: relative; z-index: 2; }
.process-art figcaption { color: #fff; }

@media (max-width: 820px) {
  .hero-evidence .hero-mascot { right: -.15rem; bottom: -.4rem; height: 79%; max-width: 40%; }
  .case-illustration { min-height: 310px; aspect-ratio: 1 / 1; }
  .case-illustration .mascot-art { height: 255px; }
}
@media (max-width: 600px) {
  .hero-evidence .hero-mascot { height: 80%; max-width: 38%; }
  .hero-evidence .evidence-caption { max-width: 72%; }
  .category-index-art { grid-column: 1; grid-row: auto; min-height: 280px; }
  .category-index-art .mascot-art { height: 228px; }
  .character-art, .case-illustration { min-height: 286px; aspect-ratio: 1 / .95; }
  .character-art .mascot-art, .case-illustration .mascot-art { height: 232px; }
  .process-art { min-height: 338px; }
}