/* FocoTech — design system: "revista cultural" (cultural magazine)
   Cream paper, tomato red + lilac accents, no black-and-white news look.
   No shadows, no gradients, no divider lines, no emoji. Mobile-first. */

:root{
  --bg:#FBF4EC;
  --ink:#2B1B30;
  --muted:#6E5F70;
  --card:#F3E6DA;
  --accent:#E8492F;          /* tomato — fills, never body text on cream */
  --accent-text:#B8321C;     /* tomato darkened for text on cream (AA 5.48) */
  --lilac:#C9B8F0;
  --on-lilac:#2B1B30;        /* tag text is ALWAYS this, both modes */
  --display:'Instrument Serif',Georgia,serif;
  --label:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --r-card:24px;
  --r-thumb:16px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1E1422;
    --ink:#FBF4EC;
    --muted:#BBAABC;
    --card:#2B1F30;
    --accent-text:#FF8A73;   /* tomato lightened for text on dark (AA 7.75) */
    /* --accent, --lilac and --on-lilac stay fixed: illustrations & tags unchanged */
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:12px;
}
img{max-width:100%;display:block}

.wrap{max-width:1120px;margin:0 auto;padding:0 18px}

/* Skip link */
.skip{
  position:absolute;left:12px;top:-60px;z-index:50;
  background:var(--ink);color:var(--bg);
  font-family:var(--label);font-weight:500;font-size:14px;
  padding:10px 18px;border-radius:999px;transition:top .15s;
}
.skip:focus{top:12px}

/* ---------- header ---------- */
.bar{display:flex;justify-content:space-between;align-items:center;min-height:68px}
/* CNN-style brand mark: white heavy grotesque on tomato-red box, tight tracking
   for the connected-letters feel. Same in both color modes. */
.brand{display:inline-block;line-height:1}
.brand-box{
  display:inline-block;background:var(--accent);color:#fff;
  font-family:var(--label);font-weight:700;font-size:23px;letter-spacing:-.015em;
  padding:8px 14px 9px;border-radius:10px;white-space:nowrap;
}
a.brand:hover .brand-box{filter:brightness(.94)}
.menu-btn{
  background:var(--card);border:0;color:var(--ink);
  font-family:var(--label);font-weight:500;font-size:14px;
  padding:8px 16px;border-radius:999px;cursor:pointer;
}
nav.main{display:none;gap:8px;font-family:var(--label);font-weight:500;font-size:15px}
nav.main a{padding:8px 14px;border-radius:999px}
nav.main a:hover{background:var(--card)}
nav.main a[aria-current="page"]{background:var(--ink);color:var(--bg)}
nav.main.open{display:flex;flex-direction:column;padding:0 0 16px}

/* ---------- filter chips ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;font-family:var(--label);font-weight:500;font-size:14px;
  background:var(--card);color:var(--ink);border:0;cursor:pointer;
  padding:6px 14px;border-radius:999px;
}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
a.chip:hover,button.chip:hover{filter:brightness(.96)}

/* ---------- route bar (capsules) ---------- */
.route{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-family:var(--label);font-weight:500;font-size:13px;margin-bottom:12px;
}
.route b{font-weight:700;background:var(--lilac);color:var(--on-lilac);padding:3px 10px;border-radius:999px}
.route i{font-style:normal;color:var(--accent-text)}
.route .t{color:var(--muted);margin-left:4px}

/* ---------- illustration template: organic blob + circle + dashed arc ----------
   .il > .blob, .dot, .curve (all decorative, aria-hidden in markup).
   6 variants via --il-bg / --il-blob / --il-dot / --il-curve + shape tweaks. */
.il{position:relative;overflow:hidden;background:var(--il-bg);display:block}
.il .blob,.il .dot,.il .curve{position:absolute;display:block}
.il .blob{background:var(--il-blob);border-radius:58% 42% 55% 45%/48% 60% 40% 52%}
.il .dot{background:var(--il-dot);border-radius:50%}
.il .curve{border:2px dashed var(--il-curve);border-color:var(--il-curve) transparent transparent transparent;border-radius:50%}
.il-1{--il-bg:var(--accent);--il-blob:var(--lilac);--il-dot:var(--bg);--il-curve:var(--ink)}
.il-1 .blob{width:62%;aspect-ratio:1;right:-10%;top:-12%}
.il-1 .dot{width:30%;aspect-ratio:1;left:10%;bottom:12%}
.il-1 .curve{left:28%;top:30%;width:44%;height:40%}
.il-2{--il-bg:var(--lilac);--il-blob:var(--accent);--il-dot:var(--ink);--il-curve:var(--bg)}
.il-2 .blob{width:55%;aspect-ratio:1;left:-8%;bottom:-14%;border-radius:42% 58% 45% 55%/55% 45% 60% 40%}
.il-2 .dot{width:24%;aspect-ratio:1;right:12%;top:10%}
.il-2 .curve{right:20%;top:38%;width:40%;height:36%;transform:rotate(160deg)}
.il-3{--il-bg:var(--ink);--il-blob:var(--accent);--il-dot:var(--lilac);--il-curve:var(--bg)}
.il-3 .blob{width:70%;aspect-ratio:1;right:-18%;bottom:-20%;border-radius:50% 50% 42% 58%/60% 40% 55% 45%}
.il-3 .dot{width:20%;aspect-ratio:1;left:14%;top:14%}
.il-3 .curve{left:10%;top:44%;width:48%;height:40%;transform:rotate(-24deg)}
.il-4{--il-bg:var(--lilac);--il-blob:var(--ink);--il-dot:var(--accent);--il-curve:var(--ink)}
.il-4 .blob{width:58%;aspect-ratio:1;left:22%;top:-16%;border-radius:45% 55% 60% 40%/50% 50% 45% 55%}
.il-4 .dot{width:28%;aspect-ratio:1;right:8%;bottom:10%}
.il-4 .curve{left:6%;top:52%;width:44%;height:36%;transform:rotate(12deg)}
.il-5{--il-bg:var(--accent);--il-blob:var(--ink);--il-dot:var(--lilac);--il-curve:var(--bg)}
.il-5 .blob{width:52%;aspect-ratio:1;left:-10%;top:22%;border-radius:60% 40% 45% 55%/45% 55% 50% 50%}
.il-5 .dot{width:26%;aspect-ratio:1;right:14%;top:12%}
.il-5 .curve{right:8%;top:56%;width:42%;height:34%;transform:rotate(-140deg)}
.il-6{--il-bg:var(--ink);--il-blob:var(--lilac);--il-dot:var(--bg);--il-curve:var(--accent)}
.il-6 .blob{width:64%;aspect-ratio:1;left:-14%;bottom:-16%;border-radius:48% 52% 55% 45%/55% 45% 52% 48%}
.il-6 .dot{width:22%;aspect-ratio:1;right:16%;top:16%}
.il-6 .curve{left:34%;top:16%;width:46%;height:38%;transform:rotate(28deg)}

/* ---------- home: lead story ---------- */
.lead{margin-bottom:8px}
.lead a{display:block;background:var(--card);border-radius:var(--r-card);overflow:hidden}
.lead .cover{aspect-ratio:4/3}
.lead .txt{padding:20px 20px 24px}
.lead h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(34px,8vw,60px);line-height:1.02;letter-spacing:-.01em;
}
.lead h1 em{color:var(--accent-text)}
.dek{font-size:16px;color:var(--muted);margin-top:10px;max-width:52ch}

/* ---------- section titles & card lists ---------- */
.sec{font-family:var(--display);font-style:italic;font-weight:400;font-size:28px;padding:32px 0 12px}
.list{list-style:none;display:grid;gap:14px}
.item a{display:flex;gap:14px;align-items:center;background:var(--card);border-radius:20px;padding:12px}
.thumb{width:84px;height:84px;flex-shrink:0;border-radius:var(--r-thumb)}
.thumb .il{width:100%;height:100%;border-radius:inherit}
.kicker{font-family:var(--label);font-weight:500;font-size:13px;color:var(--accent-text);margin-bottom:4px}
.kicker span{color:var(--muted)}
.item h2{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.12}
.item a:hover h2,.lead a:hover h1{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---------- footer ---------- */
footer{
  padding:40px 0 56px;font-family:var(--label);font-weight:500;font-size:14px;
  color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
}
footer a:hover{color:var(--ink)}

/* ---------- text pages (Sobre, Correções) ---------- */
.page{max-width:65ch;padding:8px 0 24px}
.page h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,7vw,56px);line-height:1.05;margin:8px 0 20px}
.page h1 em{color:var(--accent-text)}
.page h2{font-family:var(--display);font-weight:400;font-size:28px;margin:32px 0 12px}
.page p{font-size:17px;margin-bottom:16px;color:var(--ink)}
.page p.lede{font-size:20px;color:var(--muted)}
.page ul{margin:0 0 16px 20px;font-size:17px}
.page li{margin-bottom:8px}
.page a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;color:var(--accent-text)}

/* ---------- article page ---------- */
.article{max-width:65ch;margin:0 auto;padding:8px 0 24px}
.article .cover{border-radius:var(--r-card);aspect-ratio:16/9;margin:4px 0 24px}
.article h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(36px,7vw,58px);line-height:1.04;letter-spacing:-.01em;margin-bottom:14px;
}
.article h1 em{color:var(--accent-text)}
.meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
  font-family:var(--label);font-weight:500;font-size:14px;color:var(--muted);margin-bottom:24px;
}
.meta .cat{background:var(--lilac);color:var(--on-lilac);padding:3px 12px;border-radius:999px}

/* "Em 30 segundos" summary card */
.resumo{background:var(--lilac);color:var(--on-lilac);border-radius:20px;padding:20px 22px;margin-bottom:32px}
.resumo h2{font-family:var(--label);font-weight:700;font-size:15px;margin-bottom:10px;letter-spacing:.01em}
.resumo ul{list-style:none}
.resumo li{font-size:16px;margin-bottom:8px;padding-left:20px;position:relative}
.resumo li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--accent)}

.prose{font-size:18px;line-height:1.6}
.prose p{margin-bottom:1.4em}
.prose h2{font-family:var(--display);font-weight:400;font-size:30px;margin:1.6em 0 .6em}
.prose strong{font-weight:700}

/* inline data chart — tomato / lilac / plum only */
.chart{background:var(--card);border-radius:20px;padding:22px;margin:2em 0}
.chart figcaption{font-family:var(--label);font-weight:500;font-size:14px;color:var(--muted);margin-bottom:16px}
.bars{display:flex;align-items:flex-end;gap:14px;height:180px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bar-col .v{font-family:var(--label);font-weight:700;font-size:14px;color:var(--ink)}
.bar-col .bar{width:100%;max-width:72px;border-radius:10px 10px 6px 6px;min-height:8px}
.bar-col .bar.b1{background:var(--accent)}
.bar-col .bar.b2{background:var(--lilac)}
.bar-col .bar.b3{background:var(--ink)}
.bar-col .l{font-family:var(--label);font-weight:500;font-size:13px;color:var(--muted)}

/* voice-track chart — one waveform lane per language; the flat lane is the story.
   Ticks are decorative (aria-hidden); the data lives in the visually-hidden table. */
.tracks{background:var(--card);border-radius:20px;padding:22px;margin:2em 0}
.tracks figcaption{font-family:var(--label);font-weight:500;font-size:14px;color:var(--muted);margin-bottom:14px}
.tracks figcaption strong{display:block;font-family:var(--display);font-weight:400;font-size:25px;color:var(--ink);margin-bottom:2px}
.track{display:grid;grid-template-columns:138px 1fr 36px;align-items:center;gap:6px 16px;padding:9px 0}
.t-name{display:block;font-family:var(--label);font-weight:700;font-size:16px;line-height:1.15}
.t-voices{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.3}
.t-wave{display:flex;align-items:center;gap:3px;height:40px;min-width:0}
.t-wave i{flex:0 0 auto;width:5px;border-radius:3px;background:var(--ink)}
.t-wave i.l{background:var(--lilac)}
.t-wave .gap{flex:0 0 16px}
.t-flat{flex:1;height:5px;border-radius:3px;background:var(--accent)}
.t-num{font-family:var(--label);font-weight:700;font-size:26px;text-align:right}
.track.zero .t-name,.track.zero .t-voices{color:var(--accent-text)}
.track.zero .t-num{color:var(--accent-text)}
@media (max-width:560px){
  .track{grid-template-columns:1fr 36px}
  .t-wave{grid-column:1/-1}
}

/* pull quote — no border lines, serif voice in tomato */
.prose blockquote{margin:2em 0;padding:0}
.prose blockquote p{
  font-family:var(--display);font-style:italic;font-size:27px;line-height:1.25;
  color:var(--accent-text);margin-bottom:.4em;
}
.prose blockquote cite{font-family:var(--label);font-style:normal;font-weight:500;font-size:14px;color:var(--muted)}

/* sources */
.fontes{margin-top:48px}
.fontes h2{font-family:var(--display);font-weight:400;font-style:italic;font-size:26px;margin-bottom:14px}
.fontes ol{margin-left:20px;font-size:15px;color:var(--muted)}
.fontes li{margin-bottom:8px}
.fontes a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

/* utility */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (min-width:860px){
  .menu-btn{display:none}
  nav.main,nav.main.open{display:flex;flex-direction:row;padding:0}
  .lead a{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch}
  .lead .cover{aspect-ratio:auto;min-height:420px;height:100%}
  .lead .txt{padding:40px;display:flex;flex-direction:column;justify-content:center}
  .list{grid-template-columns:1fr 1fr}
  .thumb{width:96px;height:96px}
  .article .cover{aspect-ratio:21/9}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}