/* ==========================================================================
   Ao Leitor, com Carinho — layout
   Palette lives in the first block; everything else reads these tokens.
   ========================================================================== */
:root{
  /* Paleta (Era de Bronze + identidade atual). Trocar aqui muda o site inteiro. */
  --paper:#EFE2C8;        /* fundo principal, bege */
  --paper-2:#E2D0AC;      /* faixas e cards secundários */
  --paper-3:#F7F0E1;      /* cards claros */
  --ink:#2B1E16;          /* marrom tinta: texto, bordas, rodapé */
  --ink-2:#3B2A1F;
  --muted:#6B5646;
  --accent:#E63946;       /* vermelho atual da editora: destaques e selos */
  --accent-deep:#B8232F;  /* mesmo vermelho, mais fundo: botões e preços (texto claro legível) */
  --gold:#C9A64F;         /* dourado atual: detalhes, números, estrelas */
  --on-accent:#F7F0E1;
  --line:rgba(43,30,22,.18);


  --display:'Archivo Black','Arial Black',sans-serif;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Archivo',system-ui,-apple-system,sans-serif;
  --wrap:1200px;
  --gut:clamp(16px,4vw,32px);
  --shadow:var(--ink);

  /* Retícula */
  --dot-ink:radial-gradient(rgba(43,30,22,.13) 1.1px,transparent 1.5px);
  --dot-light:radial-gradient(rgba(247,240,225,.10) 1.2px,transparent 1.6px);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{font-family:var(--body);font-size:16px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
svg{flex-shrink:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
main{overflow-x:clip}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:calc(820px + var(--gut)*2)}

/* ---------- retícula ---------- */
.dots{background-image:var(--dot-ink);background-size:14px 14px}
/* faixa de pontos que some em degradê, como sombreamento de gibi */
.halftone-edge{position:relative}
.halftone-edge::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;
  background-image:radial-gradient(var(--ink) 1.6px,transparent 1.9px);background-size:10px 10px;opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}

/* ---------- type ---------- */
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.kicker::before{content:"";width:8px;height:8px;background:currentColor;transform:rotate(45deg)}
.title{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,50px);line-height:.98;letter-spacing:-.01em;text-transform:uppercase;margin-top:12px}
.title .hl,.title em{font-style:normal;color:var(--accent)}
.title--sm{font-size:clamp(24px,2.6vw,32px)}
.lead{font-size:17px;color:var(--muted);max-width:56ch;margin-top:14px}
.lead p+p{margin-top:10px}
.empty{padding:40px 0;color:var(--muted)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;
  background:var(--btn-bg,var(--accent-deep));color:var(--btn-fg,var(--on-accent));border:2px solid var(--ink);
  font-family:var(--display);font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap;
  transform:skewX(-10deg);box-shadow:5px 5px 0 var(--shadow);transition:transform .15s ease,box-shadow .15s ease,background .15s}
.btn>*{transform:skewX(10deg);display:inline-flex;align-items:center;gap:10px}
.btn:hover{transform:skewX(-10deg) translate(-2px,-2px);box-shadow:7px 7px 0 var(--shadow)}
.btn:active{transform:skewX(-10deg) translate(3px,3px);box-shadow:2px 2px 0 var(--shadow)}
.btn--light{--btn-bg:var(--paper-3);--btn-fg:var(--ink)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--cond);font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase;border-bottom:3px solid var(--accent);padding-bottom:3px;transition:gap .15s,color .15s}
.link-arrow:hover{gap:14px;color:var(--accent-deep)}

.arrows{display:flex;gap:10px}
.arrow{width:46px;height:46px;display:grid;place-items:center;background:var(--paper-3);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:background .15s,transform .15s,box-shadow .15s}
.arrow:hover{background:var(--gold);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.arrow:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.arrow[disabled]{opacity:.35;pointer-events:none}

/* The padding gives the covers' shadows room; scroll-padding keeps the first card snapped in line with the titles. */
.track{display:grid;grid-auto-flow:column;gap:var(--gap,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:10px 10px 18px;margin:-10px -10px -18px;scroll-padding-inline:10px}
.track::-webkit-scrollbar{display:none}
.track>*{scroll-snap-align:start}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border:2px solid var(--ink);background:var(--paper-3);font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;transition:background .15s,color .15s}
.chip:hover{background:var(--ink);color:var(--paper)}

/* ---------- top bar + header ---------- */
.topbar{background:var(--ink);color:var(--paper);font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px}
.topbar-promo{display:flex;align-items:center;gap:10px;font-weight:700}
.topbar-promo svg{color:var(--gold)}
.topbar .sep{opacity:.45}
.topbar-contact{display:flex;align-items:center;gap:18px}
.topbar-mail,.topbar-insta{display:inline-flex;align-items:center;gap:8px;text-transform:none;letter-spacing:.02em}
.topbar-insta{font-weight:600}
.topbar-insta strong{font-weight:800;color:var(--gold);letter-spacing:.03em}
.topbar-mail:hover,.topbar-insta:hover,.topbar-insta:hover strong{color:var(--paper-3)}
.topbar-promo,.topbar-contact a{white-space:nowrap}
/* On narrower screens the contact line drops its label, then the address text, instead of wrapping. */
@media (max-width:940px){.topbar-insta .lbl{display:none}}
@media (max-width:780px){.topbar-mail span{display:none}}
.socials{display:flex;gap:4px}
.socials a{width:28px;height:28px;display:grid;place-items:center;border-radius:4px;transition:background .15s,color .15s}
.socials a:hover{background:rgba(247,240,225,.12);color:var(--gold)}

.header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:3px solid var(--ink)}
.admin-bar .header{top:32px}
.header .wrap{display:flex;align-items:center;gap:36px;height:84px}
.logo{flex:none}
.logo img{height:72px;width:auto}
/* Slogan beside the logo, after a thin rule; balance splits it at the comma. */
.header-slogan{flex:none;margin-left:-14px;padding-left:18px;border-left:2px solid var(--line);max-width:13em;font-family:var(--cond);font-weight:700;font-size:13px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);text-wrap:balance}
.nav ul{display:flex;gap:28px}
.nav a{position:relative;font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:8px 0;transition:color .15s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav a:hover{color:var(--accent-deep)}
.nav a[aria-current="page"]::after,.nav .current-menu-item>a::after,.nav a:hover::after{transform:scaleX(1)}
/* "Séries" dropdown in the header bar */
.nav li{position:relative}
.nav .sub{display:none;position:absolute;top:100%;left:-18px;z-index:60;min-width:270px;margin:0;padding:8px;flex-direction:column;gap:0;
  background:var(--paper-3);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--accent)}
.nav .has-sub:hover>.sub,.nav .has-sub:focus-within>.sub{display:flex}
.nav .sub li{border-bottom:2px dashed var(--line)}
.nav .sub li:last-child{border-bottom:0}
.nav .sub a{display:block;padding:11px 12px;font-family:var(--cond);font-weight:800;font-size:17px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.nav .sub a::after{display:none}
.nav .sub a:hover,.nav .sub a:focus-visible{background:var(--ink);color:var(--paper)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.icon-btn{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:6px;transition:background .15s,color .15s}
.icon-btn:hover{background:var(--paper-2);color:var(--accent-deep)}
.badge{position:absolute;top:2px;right:0;min-width:19px;height:19px;padding:0 4px;border-radius:10px;background:var(--accent);color:var(--on-accent);font-family:var(--display);font-size:10px;display:grid;place-items:center;border:2px solid var(--paper)}
.badge.is-empty{display:none}
.burger{display:none}
.mnav{display:none}

/* ---------- hero ---------- */
.hero{position:relative;height:clamp(540px,48vw,700px);background:var(--ink);color:var(--paper);overflow:hidden;isolation:isolate}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.slide.is-active{opacity:1;visibility:visible}
/* Banner art sits on the right (the text covers the left), so narrower screens trim the left side;
   on phones each banner shows the part chosen in "No celular, mostrar" (--focus). */
.slide-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;transform:scale(1.06);transform-origin:100% 50%;transition:transform 8s linear}
.slide.is-active .slide-bg{transform:scale(1)}
.slide--banner::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(43,30,22,.92) 0%,rgba(43,30,22,.72) 32%,rgba(43,30,22,.12) 64%,rgba(43,30,22,0) 80%),
  linear-gradient(0deg,rgba(43,30,22,.95) 0%,rgba(43,30,22,0) 40%)}
/* retícula sobre a arte, como impressão antiga */
.slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(rgba(43,30,22,.32) 1px,transparent 1.5px);background-size:5px 5px;mix-blend-mode:multiply}
.slide--cover{background:var(--ink)}
.slide--cover::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(201,166,79,.28) 2px,transparent 2.4px);background-size:16px 16px;
  -webkit-mask-image:radial-gradient(circle at 75% 45%,#000 0,transparent 62%);mask-image:radial-gradient(circle at 75% 45%,#000 0,transparent 62%)}
.slide-body{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;padding-bottom:120px}
.slide-body .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.slide-body .inner{max-width:640px}
/* Banner slides: text centred in the height above the tabs bar. */
.slide--banner .slide-body{align-items:center;padding:0 0 68px}
.slide--cover .slide-body{align-items:center;padding-bottom:70px}
.slide--cover .slide-body .wrap{align-items:center}
.slide-kicker{display:inline-block;font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
/* One size for every headline; only an unusually long one (100+ characters) steps down. */
.slide h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.7vw,50px);line-height:.96;letter-spacing:-.01em;text-transform:uppercase;text-shadow:4px 4px 0 rgba(0,0,0,.55);text-wrap:balance}
.slide h2 em{font-style:normal;color:var(--accent)}
.slide--xlong h2{font-size:clamp(26px,3vw,40px)}
.slide p{margin-top:16px;font-size:16px;color:rgba(247,240,225,.88);max-width:46ch;text-wrap:pretty}
.slide .actions{display:flex;flex-wrap:wrap;gap:22px 26px;align-items:center;margin-top:30px}
.slide .btn{--shadow:#000}
.slide .link-arrow{color:var(--paper)}
.slide-cover{flex-shrink:0;width:min(330px,32vw);transform:rotate(4deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.slide-cover img{width:100%;aspect-ratio:2/2.9;object-fit:cover;border:3px solid var(--paper);box-shadow:14px 14px 0 var(--accent)}
.slide-cover:hover{transform:rotate(1deg) translateY(-6px)}

.hero-tabs{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid rgba(247,240,225,.14);background:rgba(43,30,22,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero-tabs .wrap{display:flex;overflow-x:auto;scrollbar-width:none}
.hero-tabs .wrap::-webkit-scrollbar{display:none}
.hero-tab{position:relative;flex:1 0 180px;display:flex;align-items:center;gap:12px;padding:20px 18px 20px 0;text-align:left;color:rgba(247,240,225,.5);transition:color .2s}
.hero-tab+.hero-tab{padding-left:20px;border-left:1px solid rgba(247,240,225,.1)}
.hero-tab b{font-family:var(--display);font-weight:400;font-size:13px;color:var(--gold);opacity:.6}
.hero-tab span{font-family:var(--cond);font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-tab:hover,.hero-tab.is-active{color:var(--paper)}
.hero-tab.is-active b{opacity:1}
.hero-tab::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:rgba(247,240,225,.12)}
.hero-tab::after{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.hero-tab.is-active::after{animation:progress var(--dur,7s) linear forwards}
.hero.is-paused .hero-tab.is-active::after{animation-play-state:paused}
@keyframes progress{to{transform:scaleX(1)}}

/* ---------- perks (layout approved in the first prototype) ---------- */
/* Last band of the home, right above the footer: same ink, split from it by the footer's thin rule. */
.perks-sec{background:var(--ink);color:var(--paper);background-image:var(--dot-light);background-size:18px 18px;padding:64px 0 72px;border-bottom:1px solid rgba(247,240,225,.12)}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 36px}
.perk{display:flex;gap:16px;align-items:flex-start}
.perk-ico{width:48px;height:48px;flex-shrink:0;display:grid;place-items:center;background:var(--accent-deep);color:var(--on-accent);transform:skewX(-10deg);box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.perk-ico svg{transform:skewX(10deg)}
.perk h3{font-family:var(--cond);font-weight:800;font-size:18px;letter-spacing:.08em;text-transform:uppercase;line-height:1.1}
.perk p{margin-top:4px;font-size:14px;color:rgba(247,240,225,.66)}

/* ---------- sections ---------- */
.sec{position:relative;padding:96px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:36px}
.sec-tools{display:flex;align-items:center;gap:26px;flex-shrink:0}

/* ---------- product cards ---------- */
.products{--gap:22px;grid-auto-columns:calc((100% - 3*var(--gap))/4)}
/* Grid of the same cards as the home's Lançamentos (series, author, shop and related products). */
.grid-min{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 36px}

/* ---------- séries ---------- */
.sec-series{background:var(--ink);color:var(--paper);background-image:var(--dot-light);background-size:14px 14px}
.sec-series .kicker{color:var(--gold)}
.sec-series .lead{color:rgba(247,240,225,.75)}
.sec-series .link-arrow{color:var(--paper)}
.sec-series .arrow{background:var(--paper);border-color:var(--paper);box-shadow:3px 3px 0 var(--accent)}
.series-track{--gap:26px;grid-auto-columns:calc((100% - 3*var(--gap))/4)}
.series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:30px 26px}
.serie{display:block;color:var(--paper)}
/* frame proportion fits a whole cover (≈ 2:2.9) inside the paper border */
.serie-frame{display:block;position:relative;aspect-ratio:20/27;background:var(--paper);padding:12px 16px;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);transition:transform .25s}
.serie-frame img{width:100%;height:100%;object-fit:cover;object-position:center top;clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.serie:hover .serie-frame{transform:translateY(-6px)}
.serie:hover .serie-frame img{transform:scale(1.06)}
.serie-name{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding:0 6px}
.serie-name strong{display:block;font-family:var(--cond);font-weight:800;font-size:22px;letter-spacing:.05em;text-transform:uppercase;line-height:1}
.serie-name small{display:block;margin-top:5px;font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.serie-name svg{color:var(--accent);transition:transform .2s}
.serie:hover .serie-name svg{transform:translateX(5px)}
.sec-series--page{background:var(--ink)}

/* ---------- editora ---------- */
.sec-editora{text-align:center;background:var(--paper)}
.editora{display:flex;flex-direction:column;align-items:center;max-width:calc(860px + var(--gut)*2)}
.editora .kicker{justify-content:center}
.editora-text{margin-top:22px;font-size:18px;color:var(--ink-2);max-width:62ch}
.editora-text p+p{margin-top:12px}
.editora-text strong{color:var(--accent-deep)}
/* Numbers straight on the page, split by thin rules (no boxes). */
.stats{display:flex;justify-content:center;width:100%;margin:44px 0 40px}
.stat{display:flex;flex-direction:column-reverse;align-items:center;gap:10px;padding:6px clamp(24px,4.5vw,56px)}
.stat+.stat{border-left:2px solid var(--line)}
.stat dd{font-family:var(--display);font-size:clamp(34px,4.2vw,54px);line-height:1;color:var(--accent)}
.stat dt{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- autores ---------- */
/* Gold tape across the border between the perks and the authors.
   Negative margins make it overlap both sections, so no page background shows around the tilt. */
.marquee{position:relative;z-index:2;overflow:hidden;margin:-34px -60px;transform:rotate(-1.6deg);
  background-color:var(--gold);background-image:radial-gradient(rgba(43,30,22,.18) 1.2px,transparent 1.6px);background-size:7px 7px;
  color:var(--ink);border-block:3px solid var(--ink);box-shadow:0 7px 0 rgba(0,0,0,.28)}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track{display:flex;width:max-content;animation:marquee 55s linear infinite}
.marquee-track span{display:flex;align-items:center;gap:24px;padding:15px 12px;font-family:var(--display);font-size:clamp(17px,2vw,24px);line-height:1;text-transform:uppercase;white-space:nowrap;text-shadow:2px 2px 0 rgba(247,240,225,.45)}
.marquee-track span::after{content:"★";color:var(--accent-deep);font-size:.8em;text-shadow:none}
.sec-series .marquee{margin:72px -20px 0}
.marquee-track a{color:inherit;transition:color .15s}
.marquee-track a:hover,.marquee-track a:focus-visible{color:var(--accent-deep)}
@keyframes marquee{to{transform:translateX(-50%)}}
.sec-autores{background-color:var(--paper-2)}
/* Author cards sit straight on the dotted background: photo, name and number of publications. */
.autores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 36px}
.autor{display:flex;align-items:center;gap:clamp(18px,2vw,26px);min-width:0}
.autor-foto{display:block;position:relative;flex:0 0 clamp(96px,11vw,150px);aspect-ratio:1/1;overflow:hidden}
.autor-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.autor:hover .autor-img,.autor:focus-visible .autor-img{transform:scale(1.04)}
.autor-info{display:flex;flex-direction:column;min-width:0}
.autor-name{display:block;font-family:var(--cond);font-weight:800;font-size:22px;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);transition:color .15s}
.autor:hover .autor-name,.autor:focus-visible .autor-name{color:var(--accent-deep)}
/* Authors without a photo: initials on the same sepia as the photos, not a coloured box. */
.autor-ini,.autor-big{display:grid;place-items:center;font-family:var(--display);color:var(--paper-3);text-shadow:2px 2px 0 rgba(43,30,22,.6);
  background-color:#8a7764;background-image:radial-gradient(rgba(43,30,22,.3) 1.3px,transparent 1.7px);background-size:7px 7px}
.autor-ini{width:100%;height:100%;font-size:48px}
.autor-big{flex-shrink:0}
.autor-big--foto{background:none;overflow:hidden}
.autor-big--foto img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- page headers (série, autor, páginas) ---------- */
.page-hero{position:relative;background:var(--paper-2);border-bottom:3px solid var(--ink);padding:56px 0 52px;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:420px;height:420px;pointer-events:none;
  background-image:radial-gradient(var(--accent) 2.2px,transparent 2.6px);background-size:14px 14px;opacity:.35;
  -webkit-mask-image:radial-gradient(circle,#000 10%,transparent 68%);mask-image:radial-gradient(circle,#000 10%,transparent 68%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero-in{display:flex;align-items:center;justify-content:space-between;gap:48px}
.page-hero-text{min-width:0;max-width:720px}
.page-hero .title{font-size:clamp(34px,5vw,64px)}
.page-hero-count{margin-top:16px;font-family:var(--cond);font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)}
.page-hero-role{margin-top:12px;font-size:19px;color:var(--ink-2)}
.page-hero-art{flex-shrink:0;width:min(280px,30vw)}
.page-hero-art img{width:100%;aspect-ratio:2/2.9;object-fit:cover;box-shadow:12px 14px 22px -6px rgba(43,30,22,.42)}
.page-hero--autor .page-hero-in{justify-content:flex-start;gap:34px}
/* Series header: the series' own cover, enlarged and faded, under a halftone screen and paper
   grain, with comic-style rays behind the cover; bigger type. */
.page-hero--serie{padding:72px 0 68px;isolation:isolate;
  background-color:var(--paper-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .12 0 0 0 0 .09 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.page-hero-bg{position:absolute;top:0;bottom:0;right:0;width:68%;z-index:0;pointer-events:none;
  background-size:cover;background-position:center 30%;filter:grayscale(1) sepia(.55) contrast(1.15);opacity:.24;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);mask-image:linear-gradient(90deg,transparent 0,#000 55%)}
.page-hero--serie::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(43,30,22,.22) 1.3px,transparent 1.7px);background-size:8px 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent 25%,#000 85%);mask-image:linear-gradient(90deg,transparent 25%,#000 85%)}
.page-hero--serie::after{z-index:0}
.page-hero--serie .title{font-size:clamp(44px,7.4vw,104px);line-height:.92;text-shadow:4px 4px 0 rgba(230,57,70,.18)}
.page-hero--serie .lead{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--ink-2);max-width:40ch;margin-top:20px}
.page-hero--serie .page-hero-count{font-size:18px;margin-top:22px}
.page-hero--serie .chip{height:38px;padding:0 16px;font-size:16px;box-shadow:3px 3px 0 var(--ink)}
.page-hero--serie .chip:hover{box-shadow:3px 3px 0 var(--accent)}
.page-hero--serie .page-hero-art{position:relative;width:min(340px,32vw)}
.page-hero--serie .page-hero-art::before{content:"";position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(230,57,70,.16) 0 6deg,transparent 6deg 15deg);
  -webkit-mask-image:radial-gradient(circle,#000 22%,transparent 64%);mask-image:radial-gradient(circle,#000 22%,transparent 64%)}
.page-hero--serie .page-hero-art img{border:3px solid var(--ink);transform:rotate(2deg);box-shadow:12px 12px 0 var(--accent),0 24px 40px -14px rgba(43,30,22,.5)}

.autor-big{width:150px;height:150px;font-size:54px;box-shadow:12px 14px 22px -6px rgba(43,30,22,.42)}
.woocommerce-breadcrumb{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.woocommerce-breadcrumb a:hover{color:var(--accent-deep)}
.woocommerce-breadcrumb .sep{margin:0 8px;opacity:.5}
.sec-colecao,.sec-bio{background-color:var(--paper)}
.sec-bio{padding-bottom:0}
.bio{max-width:760px}
.sec-historia{background-color:var(--paper-3);border-top:3px solid var(--ink)}
.sec-historia .bio{margin:0 auto}
.sec-historia .entry ul{margin:0 0 1.2em;padding-left:1.2em}
.sec-historia .entry li{margin:0 0 .6em;line-height:1.6}
.bio .entry{margin-top:16px}
/* long texts (series history, author bio, pages such as Sobre nós): justified, with hyphenation so the gaps stay even */
.bio .entry p,.sec-page .entry p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* biography: facts box, images in rows of one height, main works as tags */
.bio-facts{display:grid;grid-template-columns:auto 1fr;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin-bottom:34px}
.bio-facts>div{display:contents}
.bio-facts dt,.bio-facts dd{padding:12px 0;border-bottom:1px solid var(--line)}
.bio-facts>div:last-child dt,.bio-facts>div:last-child dd{border-bottom:0}
.bio-facts dt{padding-right:22px;font-family:var(--cond);font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);white-space:nowrap}
.bio-facts dd{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
.entry .bio-fig{margin:34px 0}
.bio-row{display:flex;justify-content:center;align-items:flex-end;gap:12px}
.entry .bio-row img{flex:0 1 auto;min-width:0;width:auto;max-width:100%;height:auto;box-shadow:5px 5px 0 rgba(43,30,22,.16)}
.entry .bio-row img:only-child{max-height:480px}
.bio-fig figcaption,.entry .wp-caption-text{margin-top:12px;text-align:center;font-size:14px;line-height:1.45;color:var(--muted)}
/* images added later in the editor: one with a caption, or a gallery of several side by side */
.entry .wp-caption{max-width:100%!important;margin:34px auto}
.entry .wp-caption img,.entry img.aligncenter{margin-inline:auto}
.entry .gallery{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:12px;margin:34px 0}
.entry .gallery-item{flex:0 1 auto;margin:0;max-width:100%}
.entry .gallery-item img{width:auto;max-width:100%;height:clamp(180px,24vw,260px);object-fit:contain;box-shadow:5px 5px 0 rgba(43,30,22,.16)}
.entry .gallery-caption{max-width:220px;margin-inline:auto}
.bio-works{margin-top:44px;padding-top:28px;border-top:2px dashed var(--line)}
.entry .bio-works h3{margin-top:0;font-size:20px}
.entry .bio-works ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding:0;list-style:none}
.bio-works li{padding:6px 12px;border:2px solid var(--ink);background:var(--paper-3);font-family:var(--cond);font-weight:700;font-size:15px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}

/* ---------- entry (page content, bios) ---------- */
.entry{font-size:17px;line-height:1.75;color:var(--ink-2)}
.sec-page .entry{max-width:72ch}
/* Contact channels on the Contato page, styled like the perks */
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px 40px;max-width:900px;margin-bottom:48px}
.channel{display:flex;align-items:center;gap:18px}
.channel .perk-ico{width:56px;height:56px;box-shadow:4px 4px 0 var(--ink)}
.channel strong{display:block;font-family:var(--cond);font-weight:800;font-size:20px;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;transition:color .15s}
.channel-sub{display:block;margin-top:4px;color:var(--muted);font-size:15px}
.channel:hover strong,.channel:focus-visible strong{color:var(--accent-deep)}
/* contact form (from the Ao Leitor plugin), under the channels */
.contact-form{max-width:760px;margin-top:56px;padding-top:44px;border-top:2px dashed var(--line);scroll-margin-top:110px}
.contact-form h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,32px);line-height:1.05;text-transform:uppercase}
.cf-lead{margin-top:8px;color:var(--muted)}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;margin-top:26px}
.cf-row{display:flex;flex-direction:column;gap:7px}
.cf-row--full{grid-column:1/-1}
.cf-row label{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.cf-row input,.cf-row textarea{width:100%;padding:12px 13px;border:2px solid var(--ink);background:var(--paper-3);color:var(--ink);font:inherit;font-size:16px;line-height:1.4}
.cf-row textarea{min-height:170px;resize:vertical}
.cf-row [aria-invalid=true]{border-color:var(--accent)}
.cf-error{color:var(--accent-deep);font-size:14px;font-weight:600}
.contact-form .btn{margin-top:26px}
.cf-notice{margin-top:22px;padding:14px 18px;border:2px solid var(--ink);border-left-width:8px;background:var(--paper-3);font-weight:600}
.cf-notice--ok{border-left-color:var(--gold)}
.cf-notice--error{border-left-color:var(--accent)}
.read-more{color:var(--accent-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.entry>*+*{margin-top:1em}
.entry h2,.entry h3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1.1;color:var(--ink);margin-top:1.6em}
.entry a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
.entry ul,.entry ol{padding-left:1.3em}
.entry ul{list-style:disc}
.entry img{border:2px solid var(--ink)}
.post-row{padding:22px 0;border-bottom:1px solid var(--line)}
.post-row h2{font-family:var(--cond);font-weight:800;font-size:26px;text-transform:uppercase}
.post-date{font-size:13px;color:var(--muted)}

/* ---------- 404 ---------- */
.sec-404{text-align:center}
.sec-404 .lead{margin-inline:auto}
.sec-404 .btn{margin-top:30px}
.balloon-404{display:inline-block;position:relative;padding:18px 34px;background:var(--paper-3);border:3px solid var(--ink);border-radius:50%;font-family:var(--display);font-size:46px;color:var(--accent);box-shadow:6px 6px 0 var(--ink);margin-bottom:20px}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:rgba(247,240,225,.72);padding:76px 0 0;font-size:15px;background-image:var(--dot-light);background-size:16px 16px}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px}
.footer-brand img{height:124px;width:auto}
/* Slogan under the footer logo; balance splits it at the comma. */
.footer-brand .slogan{display:block;margin-top:14px;max-width:17em;font-family:var(--cond);font-weight:700;font-size:14px;line-height:1.15;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-wrap:balance}
.footer-brand p{margin-top:16px;max-width:28ch}
.footer-title{font-family:var(--cond);font-weight:800;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.footer ul{display:grid;gap:10px}
.footer ul a{display:inline-flex;align-items:center;gap:10px;transition:color .15s}
.footer ul a:hover{color:var(--paper)}
.pay{display:flex;flex-wrap:wrap;gap:6px}
.pay span{font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border:1px solid rgba(247,240,225,.25);border-radius:3px;color:var(--paper)}
.secure{display:flex;align-items:center;gap:8px;margin-top:16px}
.legal{margin-top:64px;border-top:1px solid rgba(247,240,225,.12)}
.legal .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px 32px;padding-block:22px;font-size:13px;color:rgba(247,240,225,.5)}
.legal-company{display:flex;flex-direction:column;gap:6px;line-height:1.5}
.legal-name{color:rgba(247,240,225,.68)}
.legal-meta{display:flex;flex-wrap:wrap;font-size:12px;color:rgba(247,240,225,.42)}
.legal-meta span+span::before{content:"·";margin:0 10px}
/* credit: the Andrade Lab wordmark, as on andradelab.com (Geist, "andrade" bold, blue degree sign) */
.credit{display:inline-flex;align-items:baseline;gap:8px;flex-shrink:0;color:rgba(247,240,225,.5);letter-spacing:.02em;transition:color .15s}
.credit-logo{font-family:'Geist',var(--body);font-size:17px;font-weight:400;letter-spacing:-.03em;color:rgba(247,240,225,.72);white-space:nowrap;transition:color .15s}
.credit-logo b{font-weight:700;color:var(--paper-3)}
.credit-logo i{display:inline-block;font-style:normal;font-weight:700;color:#a3bbea;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.credit:hover,.credit:focus-visible{color:rgba(247,240,225,.75)}
.credit:hover .credit-logo,.credit:focus-visible .credit-logo{color:var(--paper-3)}
.credit:hover .credit-logo i,.credit:focus-visible .credit-logo i{transform:rotate(360deg)}

/* ---------- accessibility ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed!important;left:12px;top:12px;z-index:100;width:auto;height:auto;clip:auto;padding:10px 16px;background:var(--paper-3);border:2px solid var(--ink)}

/* ---------- lançamentos: capa, nome, preço e Comprar (centralizado, sem quadro) ---------- */
/* extra room so the soft shadow to the right and below is not clipped by the track */
.products--min{padding:14px 30px 52px;margin:-14px -30px -52px;scroll-padding-inline:30px}
.card-min{display:flex;flex-direction:column;align-items:center;text-align:center}
.card-min-cover{display:block;width:100%;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.card-min-cover img{display:block;width:100%;height:auto;aspect-ratio:2/2.9;object-fit:cover;box-shadow:12px 14px 22px -6px rgba(43,30,22,.42);transition:box-shadow .3s}
.card-min:hover .card-min-cover{transform:translate(-3px,-4px)}
.card-min:hover .card-min-cover img{box-shadow:16px 20px 28px -6px rgba(43,30,22,.5)}
.card-min-title{margin-top:22px;font-family:var(--cond);font-weight:800;font-size:19px;line-height:1.1;letter-spacing:.02em;text-transform:uppercase}
.card-min-title a{transition:color .15s}
.card-min-title a:hover{color:var(--accent-deep)}
.card-min-price{margin-top:6px;font-family:var(--display);font-size:16px;color:var(--accent-deep)}
.card-min-price del{opacity:.55;font-size:.8em;margin-right:4px}
.card-min-price ins{text-decoration:none}
.card-min .btn{margin-top:16px}
.card-min .added_to_cart{display:none}
/* Pre-sale seal: over the cover on cards, above the title on the product page. */
.card-min-cover{position:relative}
.presale-badge{display:inline-block;padding:6px 11px 5px;background:var(--accent);color:var(--on-accent,#fff);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--cond);font-weight:800;font-size:14px;line-height:1;letter-spacing:.08em;text-transform:uppercase}
.presale-badge--card{position:absolute;top:12px;left:-8px;transform:rotate(-4deg);z-index:1}
.summary .presale-badge{margin-bottom:12px}
.presale-note{margin:-6px 0 18px;padding:12px 14px;background:var(--paper-3);border:2px dashed var(--accent-deep);font-size:15px;line-height:1.5;color:var(--ink-2)}
.presale-note strong{color:var(--accent-deep)}
.btn--sm{padding:11px 22px;font-size:12px;box-shadow:3px 3px 0 var(--shadow)}

/* home series: every series visible at once in a wrapping grid (7 per row on desktop) */
.series-grid--home{grid-template-columns:repeat(var(--cols,7),minmax(0,1fr));gap:34px 22px}
@media (max-width:1024px){.series-grid--home{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.series-grid--home{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}}
.series-grid--home .serie-frame{aspect-ratio:2/2.9;padding:8px 10px}
.series-grid--home .serie-frame img{object-position:center top}
.series-grid--home .serie-name{margin-top:14px;padding:0 2px}
.series-grid--home .serie-name strong{font-size:17px;line-height:1.1}
.series-grid--home .serie-name small{font-size:13px}
.series-grid--home .serie-name svg{width:18px;height:18px}

/* ---------- responsive ---------- */
/* Small laptops: the menu tightens so logo, slogan, menu and icons fit on one line. */
@media (max-width:1240px) and (min-width:1101px){
  .header .wrap{gap:28px}
  .nav ul{gap:20px}
}
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:grid}
  .mnav{position:fixed;left:0;right:0;top:122px;z-index:49;background:var(--paper);border-bottom:3px solid var(--ink);padding:8px var(--gut) 22px;transform:translateY(-12px);opacity:0;visibility:hidden;transition:.2s}
  .mnav.is-open{display:block;transform:none;opacity:1;visibility:visible}
  .mnav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:16px;letter-spacing:.04em;text-transform:uppercase}
  .mnav .sub{display:block;margin:0 0 8px;padding:0 0 0 14px;border-left:3px solid var(--gold)}
  .mnav .sub li{border:0}
  .mnav .sub a{display:block;padding:9px 0;border:0;font-family:var(--cond);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
  .products{grid-auto-columns:calc((100% - 2*var(--gap))/3)}
  .grid-min{grid-template-columns:repeat(3,minmax(0,1fr))}
  .series-track{grid-auto-columns:calc((100% - 2*var(--gap))/3)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:860px){
  .sec{padding:72px 0}
  .sec-head{flex-direction:column;align-items:flex-start}
  .sec-tools{width:100%;justify-content:space-between}
  /* Tablets and phones: the art is a band at the top and the text sits below it on ink, so the headline
     never covers the drawing. The slides share one grid cell, so the banner is as tall as its longest
     text and every headline starts at the same height. */
  .hero{--art-h:clamp(220px,72vw,340px);height:auto;display:grid}
  .slide{position:relative;inset:auto;grid-area:1/1}
  .slide-bg{height:var(--art-h);object-position:var(--focus,100%) 50%;transform-origin:var(--focus,100%) 50%}
  .slide--banner::before{background:linear-gradient(180deg,rgba(43,30,22,0) 0,rgba(43,30,22,0) calc(var(--art-h) - 80px),var(--ink) calc(var(--art-h) - 4px))}
  .slide-body,.slide--banner .slide-body,.slide--cover .slide-body{position:relative;inset:auto;display:block;padding:var(--art-h) 0 84px}
  .slide--cover .slide-body .wrap{display:block}
  .slide-cover{position:absolute;top:24px;left:50%;width:calc((var(--art-h) - 64px)/1.45);transform:translateX(-50%) rotate(4deg)}
  .slide-cover:hover{transform:translateX(-50%) rotate(1deg)}
  .slide-cover img{border-width:2px;box-shadow:7px 7px 0 var(--accent)}
  /* Six numbered steps across the width; the names stay for screen readers. */
  .hero-tab{flex:1 1 0;justify-content:center;padding:15px 0}
  .hero-tab+.hero-tab{padding-left:0}
  .hero-tab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .perks{grid-template-columns:repeat(2,1fr)}
  .page-hero-in{flex-direction:column-reverse;align-items:flex-start}
  .page-hero--autor .page-hero-in{flex-direction:column;align-items:flex-start}
  .page-hero-art{width:180px}
  .page-hero--serie{padding:44px 0 48px}
  .page-hero--serie .page-hero-art{width:200px;margin:8px 0 6px 6px}
  .page-hero-bg{width:100%;opacity:.16;-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 70%);mask-image:linear-gradient(180deg,#000 0,transparent 70%)}
  .autor-big{width:110px;height:110px;font-size:40px}
}
@media (max-width:640px){
  .topbar-promo span:not(:first-of-type),.topbar .sep{display:none}
  .header .wrap{height:70px;gap:10px}
  .logo img{height:56px}
  /* Phones: smaller slogan and slimmer icon buttons, so the slogan still fits beside the logo. */
  .header-slogan{flex:0 1 auto;min-width:0;max-width:none;margin-left:0;padding-left:10px;font-size:clamp(9.5px,2.75vw,11px);letter-spacing:.04em}
  .header-actions{gap:0}
  .header-actions .icon-btn{width:40px}
  .admin-bar .header{top:0}
  .hero{--art-h:clamp(220px,72vw,300px)}
  .slide h2{font-size:27px}
  .slide--xlong h2{font-size:24px}
  .slide p{margin-top:12px;font-size:15px}
  .slide .actions{margin-top:24px}
  .perks{grid-template-columns:1fr;gap:26px}
  .perks-sec{padding:52px 0 56px}
  .products{--gap:14px;grid-auto-columns:calc((100% - var(--gap))/1.7)}
  .grid-min{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 18px}
  .card-min-title{margin-top:16px;font-size:16px}
  .series-track{--gap:18px;grid-auto-columns:calc((100% - var(--gap))/1.35)}
  .stats{flex-direction:column;align-items:center;margin:36px 0 32px}
  .stat{width:min(260px,100%);padding:16px 0}
  .stat+.stat{border-left:0;border-top:2px solid var(--line)}
  .stat dd{font-size:38px}
  .cf-grid{grid-template-columns:1fr}
  .contact-form{margin-top:44px;padding-top:36px}
  .bio-facts{grid-template-columns:1fr}
  .bio-facts dt{padding:12px 0 0;border-bottom:0}
  .bio-facts dd{padding-top:2px}
  /* rows of pictures scroll sideways at one height; a picture on its own fills the width */
  .bio-row,.entry .gallery{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 10px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
  .entry .bio-row img,.entry .gallery-item{flex:0 0 auto;scroll-snap-align:start}
  .entry .bio-row img{height:230px;width:auto;max-width:none}
  .entry .bio-row img:first-child,.entry .gallery-item:first-child{margin-left:auto}
  .entry .bio-row img:last-child,.entry .gallery-item:last-child{margin-right:auto}
  .entry .bio-row img:only-child{height:auto;max-height:none;width:100%;max-width:100%}
  .entry .gallery-item img{height:230px}
  .autores{gap:34px 14px}
  .autor{flex-direction:column;align-items:stretch;gap:0}
  .autor-foto{flex:none}
  .autor-info{margin-top:12px}
  .autor-name{font-size:16px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px 20px}
  .legal .wrap{flex-direction:column;align-items:flex-start}
  .legal-meta{flex-direction:column;gap:2px}
  .legal-meta span+span::before{content:none}
}
@media (max-width:349px){.header-slogan{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none}
}