/* =====================================================================
   VOLUME — app.css
   Extends colors_and_type.css + kit.css + chapter.css with the pieces the
   brief adds: header stamp, tobira-e splash, diferencial, quem-sou,
   colofão, the RTL page-turn + SFX transition, processo band, posfácio,
   and the marked-placeholder token. Tokens only — no new colors.
   ===================================================================== */

/* ---- marked placeholder: clearly "fill me", never mistaken for copy --- */
.ph {
  font-family: var(--font-condensed);
  font-weight: 500;
  font-style: normal;
  color: var(--wash-3);
  background: color-mix(in srgb, var(--wash-1) 60%, transparent);
  border-bottom: 1.5px dashed var(--wash-2);
  padding: 0 .12em;
  letter-spacing: .01em;
  text-transform: none;
}

/* =====================================================================
   [A] HEADER — the seal stamps on load
   ===================================================================== */
.v-nav .v-brand .seal-wrap { display: inline-flex; }
.stamp-in { animation: stamp 460ms cubic-bezier(.2,1.4,.3,1) both; }
@keyframes stamp {
  0%   { transform: scale(2.1) rotate(-9deg); opacity: 0; }
  55%  { transform: scale(.86) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
/* topbar logo: the hanko seal stamps + spins on hover, wordmark inks red */
.v-brand { cursor: pointer; }
.v-brand .seal-wrap { will-change: transform; }
.v-brand:hover .seal-wrap { animation: sealspin 620ms cubic-bezier(.4,0,.2,1); }
@keyframes sealspin {
  0%   { transform: rotate(0) scale(1); }
  45%  { transform: rotate(170deg) scale(1.16); }
  100% { transform: rotate(360deg) scale(1); }
}
.v-brand:active .seal-wrap { transform: scale(.9) rotate(4deg); }
.v-brand .wm { transition: color var(--cut), letter-spacing var(--cut); }
.v-brand:hover .wm { color: var(--vermilion); letter-spacing: .05em; }
@media (prefers-reduced-motion: reduce) {
  .v-brand:hover .seal-wrap { animation: none; }
}
.v-rule { height: var(--ink-stroke-hi); background: var(--ink); }
.v-volline {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 7px var(--gutter);
  font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase;
  letter-spacing: .2em; font-size: 11px; color: var(--fg-2);
  border-bottom: var(--ink-hair) solid var(--ink);
  background: var(--paper);
}
.v-volline .rtl { display: inline-flex; align-items: center; gap: 8px; }

/* =====================================================================
   [B] SPLASH / TOBIRA-E
   ===================================================================== */
/* home reveal: the red cover is pinned; paper content scrolls up over it */
.home-main { position: relative; }
.post-hero { position: relative; z-index: 1; margin-top: 100vh; margin-top: 100svh; background: var(--paper);
  box-shadow: 0 -34px 70px rgba(10,10,10,.22); }

/* THE COVER — full viewport, 100% vermelho, tinta branca */
.splash { position: fixed; inset: 0; z-index: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; place-items: center; text-align: center; padding: var(--ma-5) 0 var(--ma-6);
  background: var(--vermilion); color: var(--paper); }
/* vignette de tinta: centro vivo, bordas escurecem em sumi — quebra o campo
   chapado sem perder a capa vermelha (escolha do Gabriel, 2026-07-10) */
.splash::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 46%, rgba(120,8,4,.38) 100%); }
.splash .shell { position: relative; z-index: 2; }
.splash-center { display: flex; flex-direction: column; align-items: center; gap: var(--ma-3); max-width: 1000px; margin: 0 auto; }
/* deeper-red screentone so the fill reads as ink, not a flat scream */
.splash::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(var(--vermilion-ink) 1.2px, transparent 1.3px); background-size: 9px 9px;
  /* clear the dots out of the central text column for readability */
  -webkit-mask-image: radial-gradient(ellipse 66% 62% at 50% 46%, transparent 42%, #000 90%);
          mask-image: radial-gradient(ellipse 66% 62% at 50% 46%, transparent 42%, #000 90%); }
/* manga 集中線 speed-lines (top-left) + halftone burst (bottom-right) */
.splash .hero-speedlines { position: absolute; z-index: 0; pointer-events: none;
  width: 760px; height: 760px; top: -390px; left: -390px;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(246,243,236,.5) 0 .3deg, transparent .3deg 3deg);
  /* opaque near the corner, fading OUT before reaching the text */
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 54%); mask-image: radial-gradient(circle, #000 0%, transparent 54%);
  opacity: .2; }
.splash .hero-halftone { position: absolute; z-index: 0; pointer-events: none;
  width: 380px; height: 380px; right: -100px; bottom: -100px;
  background-image: radial-gradient(var(--ink) 2px, transparent 2.4px); background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000, transparent 64%); mask-image: radial-gradient(circle at 100% 100%, #000, transparent 64%);
  opacity: .18; }
.splash.lit .hero-speedlines { animation: org-spin 80s linear infinite; }
/* organic black ink dots — morphing, not static circles */
.splash .hf-orb { position: absolute; z-index: 1; }
.splash .hf-orb-a { left: 12%; top: 57%; }
.splash .hf-orb-b { left: 66%; top: 75%; }
.splash .hf-orb-c { left: 84%; top: 24%; }

/* backdrop: dashed ink curves + red dots + × register marks (ref-style) */
.hero-field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-field .hf-path { fill: none; stroke: rgba(246,243,236,.5); stroke-width: 2; stroke-dasharray: 6 9; }
.hero-field .hf-red  { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 5 10; opacity: .3; }
.hero-field .hf-dot  { fill: var(--ink); }
.hero-field .hf-x    { stroke: rgba(246,243,236,.6); stroke-width: 2.4; }
.splash.lit .hero-field { animation: hf-drift 20s ease-in-out infinite alternate; }
@keyframes hf-drift { from { transform: translateY(-12px); } to { transform: translateY(12px); } }
.splash.lit .hf-path, .splash.lit .hf-red { animation: hf-march 9s linear infinite; }
@keyframes hf-march { to { stroke-dashoffset: -120; } }

/* vertical katakana accent (ボリューム = volume) */
.splash-kana { position: absolute; z-index: 1; right: clamp(12px, 3vw, 44px); top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; font-family: var(--font-condensed); letter-spacing: .3em; font-size: 13px;
  color: var(--wash-2); opacity: .85; pointer-events: none; user-select: none; }

.splash-id { display: inline-flex; align-items: center; gap: 9px; justify-content: center;
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .2em;
  font-size: 12.5px; color: var(--fg-2); }
.splash-id i { color: var(--wash-2); font-style: normal; }
.splash-id b { color: var(--vermilion); font-weight: 600; }

/* less brutalist, more modern grotesk ("tokyo") — Hanken heavy, title case */
.splash-h { font-family: var(--font-body); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(2.5rem, 6.4vw, 5.2rem); line-height: 1.0; margin: var(--ma-2) 0 0; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: .08em; }
.splash-h .sh-line { display: inline-flex; align-items: center; gap: .3em; flex-wrap: wrap; justify-content: center; }
.splash-h .sh-ghost { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.splash.lit .splash-h { animation: sh-in 560ms cubic-bezier(.2,.9,.1,1) both; }
@keyframes sh-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* rotating word (vanilla TextRotate) */
.rotw { display: inline-flex; overflow: hidden; vertical-align: bottom; }
.rotw-box { display: inline-flex; background: var(--vermilion); color: var(--paper);
  padding: .02em .34em .1em; overflow: hidden; box-shadow: 4px 4px 0 var(--ink);
  /* pincelada: cantos orgânicos assimétricos, tinta sumi (escolha do Gabriel) */
  border-radius: .85em .35em .9em .3em / .45em .95em .4em 1em; }
.rotw-box { position: relative; }
/* palavra que entra: em repouso já está NO lugar (primeiro frame com texto);
   só a troca é que anima */
.rotw-word { display: inline-flex; }
.rotw-ch { display: inline-block; white-space: pre; }
.rotw-word.anim .rotw-ch { animation: rotw-in .52s cubic-bezier(.22,1.2,.32,1) both; }
@keyframes rotw-in { from { transform: translateY(115%); } to { transform: translateY(0); } }
/* palavra que sai: absoluta, então não alarga a caixa — só mantém ela cheia */
.rotw-out { position: absolute; left: .34em; top: .02em; white-space: pre; pointer-events: none;
  animation: rotw-out .42s cubic-bezier(.72,.02,.28,1) both; }
@keyframes rotw-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-115%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rotw-word.anim .rotw-ch, .rotw-out { animation: none !important; }
  .rotw-out { display: none; }
}

.splash-sub { font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.5; max-width: 46ch; margin: var(--ma-2) auto 0; color: var(--fg); }
.splash-sub .red { color: var(--vermilion); font-weight: 700; }

.splash-cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: var(--ma-3); }

/* scroll cue */
.splash-scroll { position: absolute; z-index: 2; bottom: var(--ma-4); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: var(--fg-2);
  transition: color var(--cut); }
.splash-scroll:hover { color: var(--ink); }
/* terceira chamada do hero: mantida, mas sem competir com o botão primário
   e com o atalho de 2 minutos */
.splash-scroll.quiet { opacity: .5; gap: 7px; transition: opacity var(--cut), color var(--cut); }
.splash-scroll.quiet:hover, .splash-scroll.quiet:focus-visible { opacity: 1; }
.splash-scroll.quiet .ss-mouse { width: 17px; height: 26px; border-width: 1.5px; }
.splash-scroll.quiet .ss-label { font-size: 9.5px; letter-spacing: .24em; }
.ss-mouse { width: 22px; height: 34px; border: 2px solid currentColor; border-radius: 12px; position: relative; }
.ss-wheel { position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; background: var(--vermilion);
  border-radius: 2px; transform: translateX(-50%); animation: ss-wheel 1.5s ease-in-out infinite; }
@keyframes ss-wheel { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 11px); } }

/* ---- custom cursor: ink dot + trailing ring (fine pointer only) ---- */
.cursor-layer { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }
.cursor-dot { position: fixed; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); will-change: transform; }
.cursor-ring { position: fixed; top: 0; left: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--ink); will-change: transform;
  transition: width .28s ease, height .28s ease, border-color .28s ease, background .28s ease; }
.cursor-ring.hover { width: 46px; height: 46px; border-color: var(--vermilion);
  background: color-mix(in srgb, var(--vermilion) 14%, transparent); }
/* over the red cover: flip to cream — literal, the cover ignores modo tinta */
.cursor-layer.on-red .cursor-dot { background: #F6F3EC; }
.cursor-layer.on-red .cursor-ring { border-color: #F6F3EC; }
.cursor-layer.on-red .cursor-ring.hover { border-color: #F6F3EC; background: color-mix(in srgb, #F6F3EC 18%, transparent); }

/* a11y: screen-reader-only text + skip link */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 10000; background: var(--ink); color: var(--paper);
  padding: 11px 18px; border-radius: 6px; font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: 13px; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--vermilion); outline-offset: 2px; }
#conteudo:focus { outline: none; }

/* real company logos (fallback to the [logo] placeholder if missing) */
.co-logo-img { max-width: 82%; max-height: 78%; object-fit: contain; display: block; }
/* logo de marca no card "Projetos por aqui": chip de papel, contido */
.eq-logo { width: 100%; height: 100%; object-fit: contain; padding: 12px; background: var(--paper); display: block; }
.cert-logo { width: 100%; height: 100%; object-fit: contain; padding: 16px; background: var(--paper); display: block; }
html.ink .cert-logo { background: var(--paper); }
html.ink .eq-logo { background: var(--paper); }   /* card de projeto mantém a marca em cor sobre chip claro */

/* real project covers (screenshots) — fill the panel, fallback is MangaPlate */
.rc-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cover-art .cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sol-panel .sol-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; }
@media (hover: hover) and (pointer: fine) {
  body.cursor-none, body.cursor-none a, body.cursor-none button, body.cursor-none [role='button'] { cursor: none; }
}

/* ---- red-cover theme: white ink + recolored controls ----
   The cover is ALWAYS vermilion with cream ink, in both paper and ink
   modes — so these use literal print colors, never the invertible
   --paper/--ink tokens (modo tinta flips those and would set near-black
   type on red). */
.splash-id { color: rgba(246,243,236,.85); }
.splash-id i { color: rgba(246,243,236,.5); }
.splash-id b { color: #F6F3EC; }
.splash-h { color: #F6F3EC; }
.splash-h .sh-ghost { color: transparent; -webkit-text-stroke: 2px #F6F3EC; }
.splash-sub { color: rgba(246,243,236,.92); }
.splash-sub .red { color: #0A0A0A; font-weight: 800; }
.rotw-box { background: #0A0A0A; color: #F6F3EC; box-shadow: 4px 4px 0 rgba(10,10,10,.4); }
.splash-kana { color: rgba(246,243,236,.7); }
.splash-scroll { color: rgba(246,243,236,.8); }
.splash-scroll:hover { color: #F6F3EC; }
.ss-wheel { background: #F6F3EC; }
.splash .btn-primary { background: #F6F3EC; color: var(--vermilion); box-shadow: 5px 5px 0 #0A0A0A; }
.splash .btn-primary:hover { background: #0A0A0A; color: #F6F3EC; transform: translate(2px,2px); box-shadow: 3px 3px 0 #0A0A0A; }
.splash .btn-ghost { background: transparent; color: #F6F3EC; border-bottom-color: #F6F3EC; }
.splash .btn-ghost:hover { color: #F6F3EC; opacity: .75; border-bottom-color: #F6F3EC; }

/* chapter pages have their own top bar — push it clear of the floating pill */
.chapter-main { padding-top: clamp(54px, 8vh, 74px); }

/* ---- header modes: hidden over cover / floating pill past it ---- */
.hd-hidden .v-nav { transform: translateY(-150%); opacity: 0; pointer-events: none; }
.hd-float .v-rule, .hd-float .v-volline { display: none; }
.hd-float .v-nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: auto; max-width: calc(100% - 2 * var(--gutter)); gap: 22px;
  border: var(--ink-stroke) solid var(--ink); border-bottom: var(--ink-stroke) solid var(--ink);
  border-radius: 999px; box-shadow: 0 10px 34px rgba(10,10,10,.18);
  padding: 9px 12px 9px 16px; background: color-mix(in srgb, var(--paper) 94%, transparent);
}
.hd-float .v-navlinks { position: static; transform: none; gap: 22px; }
.hd-float .nav-contact-d { padding: 7px 14px; }
.hd-float.hd-hidden .v-nav { transform: translate(-50%, -170%); opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .hd-float .v-nav { left: var(--gutter); right: var(--gutter); transform: none; max-width: none; width: auto; border-radius: 16px; top: 10px; justify-content: space-between; }
  .hd-float.hd-hidden .v-nav { transform: translateY(-170%); }
  /* restore the dropdown (the desktop pill makes links inline) → just brand + burger */
  .hd-float .v-navlinks { position: absolute; top: 100%; left: 0; right: 0; transform: none; gap: 0; }
}

/* =====================================================================
   [C] DIFERENCIAL — desenho e construo
   ===================================================================== */
.dif { border-top: var(--ink-stroke) solid var(--ink); border-bottom: var(--ink-stroke) solid var(--ink); }
.dif .shell { padding: var(--ma-5) var(--gutter); display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gutter); align-items: center; }
.dif-statement { font-family: var(--font-body); font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.45; max-width: 40ch; color: var(--fg); }
.dif-statement b { font-weight: 800; }
.dif-statement .red { color: var(--vermilion-ink); }

/* category list — click filters the sumário; hover fans manga covers */
.dif-eyebrow {
  font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase;
  letter-spacing: .24em; font-size: 12px; color: var(--fg-2); margin-bottom: var(--ma-2);
}
.dif-tags { display: flex; flex-direction: column; border-top: var(--ink-hair) solid var(--ink); }
.dif-tag {
  -webkit-appearance: none; appearance: none; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-bottom: var(--ink-hair) solid var(--ink);
  display: flex; align-items: center; gap: 16px; padding: 16px 2px;
  position: relative; overflow: visible;
}
.dif-tag:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dt-label {
  font-family: var(--font-display); text-transform: uppercase; line-height: 1;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--ink);
  transition: opacity var(--cut), color var(--cut);
}
.dif-tag:hover .dt-label { opacity: .42; }
.dif-tag.on .dt-label { color: var(--vermilion); opacity: 1; }
.dt-count { font-family: var(--font-editorial); font-weight: 700; font-size: 13px; color: var(--wash-3); margin-left: auto; letter-spacing: .04em; transition: color var(--cut); }
.dif-tag:hover .dt-count, .dif-tag.on .dt-count { color: var(--vermilion); }
.dt-dot { flex: 0 0 auto; width: 10px; height: 10px; background: var(--wash-2); margin-left: 14px; transition: background var(--cut); }
.dif-tag:hover .dt-dot, .dif-tag.on .dt-dot { background: var(--vermilion); }

/* the fanning two-cover reveal (over the dimmed label) */
.dif-reveal { position: absolute; right: 17%; top: 50%; width: 60px; height: 78px; margin-top: -39px; z-index: 20; pointer-events: none; }
.dif-reveal .pic {
  position: absolute; inset: 0; width: 56px; height: 56px; overflow: hidden;
  border: 2.5px solid var(--ink); background: var(--wash-1);
  transform: scale(0); opacity: 0; box-shadow: none;
  transition: transform 500ms var(--cut), opacity 360ms var(--cut), width 500ms var(--cut), height 500ms var(--cut), box-shadow 500ms var(--cut);
}
.dif-reveal .pic-tone { position: absolute; inset: 0; background-image: radial-gradient(var(--ink) 1.1px, transparent 1.2px); background-size: 6px 6px; opacity: .2; }
.dif-reveal .pic-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 5px; background: var(--paper); border-top: 2px solid var(--ink); font-family: var(--font-display); text-transform: uppercase; font-size: 11px; line-height: 1; letter-spacing: .01em; }
.dif-reveal .pic-cap { position: absolute; left: 5px; top: 4px; font-family: var(--font-editorial); font-weight: 700; font-size: 13px; color: var(--wash-3); }
.dif-tag:hover .pic { transform: scale(1); opacity: 1; width: 100%; height: 100%; box-shadow: 5px 5px 0 var(--ink); }
.dif-reveal .pic.back { transition-delay: 120ms; }
.dif-tag:hover .pic.back { transform: scale(1) translate(15px, 16px) rotate(11deg); }
.dif-reveal .pic.front { transition-delay: 60ms; z-index: 2; }

/* =====================================================================
   [D] SUMÁRIO header note + [E] QUEM SOU + reusing .chapgrid from kit.css
   ===================================================================== */
.chap .chap-go { color: var(--ink); }
.quemsou { border-top: var(--ink-stroke) solid var(--ink); }
.quemsou .qk { font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase; letter-spacing: .22em; font-size: 13px; color: var(--fg-2); }
.qs-grid { padding: var(--ma-5) var(--gutter); display: grid; grid-template-columns: 1fr .9fr; gap: var(--gutter); align-items: center; }
.qs-bio { font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.5; max-width: 46ch; margin: var(--ma-2) 0 0; color: var(--fg); }
.qs-left .gl { display: inline-block; margin-top: var(--ma-3); }
.qsc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qsc-k { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--fg-2); }
.qsc-now { color: var(--vermilion-ink); }
.qsc-nav { display: flex; align-items: center; gap: 4px; }
.qsc-arr { -webkit-appearance: none; appearance: none; background: var(--paper); border: var(--ink-hair) solid var(--ink); cursor: pointer; font-family: var(--font-display); font-size: 15px; line-height: 1; color: var(--ink); padding: 5px 11px; transition: background var(--cut), color var(--cut); }
.qsc-arr:hover { background: var(--ink); color: var(--paper); }
.qsc-idx { font-family: var(--font-editorial); font-weight: 700; font-size: 12px; color: var(--fg-2); padding: 0 6px; }
.qsc-idx i { font-style: normal; color: var(--wash-2); }
.qsc-card { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: var(--gutter); align-items: center; background: var(--paper); border: var(--ink-stroke) solid var(--ink); box-shadow: 7px 7px 0 var(--ink); padding: var(--ma-3); transition: transform var(--cut), box-shadow var(--cut); }
.qsc-card:hover { transform: translate(-2px,-2px); box-shadow: 11px 11px 0 var(--ink); }
.qsc-logo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 116px; height: 116px; border: var(--ink-hair) solid var(--ink); background: var(--wash-1); }
.qsc-logo-mark { font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem; line-height: .95; text-align: center; padding: 0 8px; }
.qsc-logo-cap { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .14em; font-size: 9px; color: var(--wash-3); }
.qsc-name { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: .95; }
.qsc-role { display: block; font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--fg-2); margin-top: 6px; }
.qsc-go { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; transition: color var(--cut); }
.qsc-card:hover .qsc-go { color: var(--vermilion); }
.qsc-card:hover .qsc-go .arr { transform: translateX(5px); }
.qsc-go .arr { transition: transform var(--cut); }

/* =====================================================================
   RTL PAGE-TURN + SFX — chapter entry transition
   ===================================================================== */
.pageturn { position: fixed; inset: 0; z-index: 130; pointer-events: none; overflow: hidden; }
.pageturn .sheet {
  position: absolute; inset: 0; background: var(--ink);
  background-image: repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb, var(--paper) 16%, transparent) 7px 8px);
  transform: translateX(102%);
  animation: ptwipe 600ms cubic-bezier(.85,0,.9,.2) both;
}
@keyframes ptwipe {
  0%   { transform: translateX(102%); }
  42%  { transform: translateX(0); }
  56%  { transform: translateX(0); }
  100% { transform: translateX(-102%); }
}
.pageturn .pt-sfx {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sfx); text-transform: uppercase; color: var(--paper);
  font-size: clamp(4rem, 16vw, 13rem); transform: skewX(-6deg); letter-spacing: .01em;
  opacity: 0;
}
.pageturn .pt-sfx em { color: var(--vermilion); font-style: normal; }
.pageturn .pt-sfx { animation: ptsfx 600ms steps(1,end) both; }
/* manga SFX romaji subtitle (small, under the kana) */
.pageturn .pt-sfx { flex-direction: column; gap: 4px; }
.pt-ro, .sfx-ro { display: block; font-family: var(--font-condensed); font-weight: 600; font-style: normal;
  text-transform: uppercase; letter-spacing: .45em; color: var(--vermilion); text-indent: .45em; }
.pageturn .pt-sfx .pt-ro { font-size: clamp(.7rem, 1.8vw, 1.2rem); }
.beat-sfx .word { display: inline-flex; flex-direction: column; align-items: center; line-height: .9; }
.beat-sfx .word .sfx-ro { font-size: .26em; margin-top: .4em; }
/* mangaká-hand JP fonts for the kana (latin romaji stays Oswald) */
.pageturn .pt-sfx [lang="ja"], .beat-sfx .word [lang="ja"] { font-family: 'Reggae One', var(--font-sfx), Impact, sans-serif; }
.splash-kana { font-family: 'Yuji Mai', var(--font-condensed), sans-serif; font-size: 17px; letter-spacing: .12em; }
@keyframes ptsfx {
  0%, 30% { opacity: 0; transform: skewX(-6deg) scale(.8); }
  44% { opacity: 1; transform: skewX(-6deg) scale(1.04); }
  56% { opacity: 1; transform: skewX(-6deg) scale(1.04); }
  60%, 100% { opacity: 0; transform: skewX(-6deg) scale(1.1); }
}

/* institutional cut (processo / posfácio): dry, with ma-hold */
.viewcut { animation: vcut 240ms cubic-bezier(.85,0,.9,.2); }
@keyframes vcut { from { transform: translateY(12px); } to { transform: none; } }

/* =====================================================================
   CHAPTER additions — TL;DR strip, decisões pairs, solução panels
   ===================================================================== */
.tldr { display: grid; grid-template-columns: repeat(2, 1fr); border: var(--ink-stroke) solid var(--ink); margin: var(--ma-5) 0 0; background: var(--paper); }
.tldr .cell { padding: var(--ma-3) var(--ma-3); }
.tldr .cell + .cell { border-left: var(--ink-hair) solid var(--ink); }
.tldr .l { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: var(--vermilion-ink); }
.tldr .v { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.35; margin-top: 8px; color: var(--fg); }

.dec-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.dec {
  grid-column: span 4; border: var(--ink-stroke) solid var(--ink); padding: var(--ma-4) var(--ma-3) var(--ma-3);
  position: relative; background: var(--paper);
  opacity: 0; transform: translateY(22px); transition: opacity var(--cut), transform var(--cut);
}
.beat.in .dec { opacity: 1; transform: none; }
.beat.in .dec:nth-child(2) { transition-delay: 80ms; }
.beat.in .dec:nth-child(3) { transition-delay: 160ms; }
.dec .n { font-family: var(--font-editorial); font-weight: 700; font-size: 1.5rem; color: var(--wash-3); }
.dec .d { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; line-height: 1.1; margin: 10px 0 8px; }
.dec .r { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.5; color: var(--fg-2); }
.dec .r b { color: var(--fg); font-weight: 700; }
/* a seta do canto sugeria clique num card que não clica. No lugar dela,
   o rótulo que explica a estrutura do card: decisão em cima, razão embaixo */
.dec-why { display: flex; align-items: center; gap: 8px; font-family: var(--font-condensed); font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; color: var(--vermilion-ink); margin-bottom: 6px; }
.dec-why::after { content: ""; flex: 1 1 auto; height: 0; border-top: var(--ink-hair) solid var(--wash-1); }

.sol-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
/* Os prints são 1600x1000 (16:10). O painel usa EXATAMENTE essa proporção,
   então nada é cortado. Antes: .small era 4/3 (comia 17% das laterais) e o
   terceiro vinha 21/9 inline (comia 31% de cima e baixo, decepando modais).
   Largura cheia da coluna: um print de interface a 167px não se lê. */
.sol-panel { border: var(--ink-stroke) solid var(--ink); background: var(--wash-1);
  aspect-ratio: 16 / 10; position: relative; overflow: hidden; grid-column: 1 / -1; }
.sol-panel.big, .sol-panel.small, .sol-panel.third { grid-column: 1 / -1; }
/* prints em retrato ocupam meia coluna: em largura cheia um 3:4 vira um
   paredão de 800px de altura e empurra o resto da página pra baixo */
.sol-panel.meia { grid-column: span 6; }
/* Com os painéis em largura cheia a coluna de prints ficou bem mais alta que
   a de texto, e o align-items:center do .beat jogava o texto pro meio da
   página. Só este beat alinha no topo — o :has() já é idioma da casa. */
.beat:has(.sol-grid) { align-items: start; }
.sol-panel image-slot { width: 100%; height: 100%; }
.sol-tone { position: absolute; inset: 0; background-image: radial-gradient(var(--ink) 1.1px, transparent 1.2px); background-size: 7px 7px; opacity: .14; pointer-events: none; }

.ai-note { font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 10px; margin-top: var(--ma-3); }
.ai-note .b { width: 8px; height: 8px; background: var(--vermilion); }

/* =====================================================================
   PROCESSO — horizontal band, read RTL
   ===================================================================== */
/* =====================================================================
   PROCESSO — scroll-driven sticky showcase
   ===================================================================== */
.processo { padding: 0 0 var(--ma-6); }
.proc-intro { padding-top: var(--ma-6); padding-bottom: var(--ma-5); }
.proc-h1 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--t-d1); line-height: 1.06; margin: var(--ma-2) 0 0; max-width: 18ch; }
.proc-scrollhint { display: flex; align-items: center; gap: 10px; font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--fg-2); }
.proc-scrollhint .dn { font-family: var(--font-display); animation: bob 1.6s ease-in-out infinite; }

.proc-scroll { position: relative; }
.proc-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden;
  border-top: var(--ink-stroke) solid var(--ink); border-bottom: var(--ink-stroke) solid var(--ink); background: var(--paper); }
.proc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: center; width: 100%;
  padding-top: clamp(120px, 16vh, 150px); padding-bottom: var(--ma-4); }

.proc-left { position: relative; }
.proc-step-k { font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase; letter-spacing: .22em; font-size: 13px; color: var(--fg-2); }
.proc-step-k b { font-family: var(--font-editorial); font-weight: 700; color: var(--ink); }
.proc-step-k i { font-style: normal; color: var(--wash-2); margin: 0 3px; }
.proc-bars { display: flex; gap: 8px; margin: var(--ma-3) 0 var(--ma-4); }
.proc-bar { -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; height: 5px; width: 28px; background: var(--wash-1); transition: width var(--cut), background var(--cut); }
.proc-bar.done { background: var(--wash-2); }
.proc-bar.on { width: 60px; background: var(--vermilion); }
.proc-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.proc-textwrap { position: relative; min-height: 230px; }
.proc-text { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 420ms var(--cut), transform 420ms var(--cut); }
.proc-text.on { opacity: 1; transform: none; pointer-events: auto; }
.pt-t { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 4rem); line-height: .92; margin: 0 0 var(--ma-3); }
.pt-p { font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.5; color: var(--wash-4); max-width: 34ch; }
.proc-cta-row { margin-top: var(--ma-4); }

.proc-right { display: flex; flex-direction: column; align-items: center; gap: var(--ma-3); }
.proc-visual { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: var(--ma-2); }
.pv-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; border: var(--ink-stroke-hi) solid var(--ink); overflow: hidden; background: var(--wash-1); box-shadow: 10px 10px 0 var(--ink); display: block; }
.pv-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: clamp(7rem, 22vh, 12rem); color: transparent; -webkit-text-stroke: 3px var(--ink); line-height: 1; }
.pv-blob { position: absolute; right: 12%; bottom: 10%; width: 26%; aspect-ratio: 1; background: var(--vermilion); border-radius: 47% 53% 63% 37% / 55% 48% 52% 45%; animation: blobmorph 6s ease-in-out infinite; mix-blend-mode: multiply; }
.pv-sl { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background-image: repeating-conic-gradient(from 0deg at 50% 50%, var(--ink) 0 .32deg, transparent .32deg 2.4deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 40%, #000 72%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 40%, #000 72%);
  animation: pvsl 600ms cubic-bezier(.85,0,.9,.2) both; }
@keyframes pvsl { 0% { opacity: .4; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.2); } }
.pv-cap { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: 13px; color: var(--fg-2); }

.proc-close { padding: var(--ma-6) var(--gutter) var(--ma-4); }
.proc-msg { font-family: var(--font-display); text-transform: uppercase; font-size: var(--t-d2); line-height: 1.06; max-width: 24ch; }
.proc-msg .red { color: var(--vermilion-ink); }
.proc-foot { display: flex; align-items: center; gap: 14px; margin-top: var(--ma-4); font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--fg-2); }

/* =====================================================================
   POSFÁCIO — atogaki author's note
   ===================================================================== */
.posfacio { padding: var(--ma-6) 0 var(--ma-7); }
.pos-col { max-width: 680px; margin: 0 auto; }
.pos-k { font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase; letter-spacing: .24em; font-size: 13px; color: var(--fg-2); }
.pos-title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--t-d1); line-height: .9; margin: var(--ma-2) 0 var(--ma-4); }
.pos-hand { font-family: var(--font-hand); font-weight: 600; font-size: 2rem; line-height: 1.3; color: var(--fg-2); margin: var(--ma-4) 0; }
.pos-block { margin-bottom: var(--ma-4); }
.pos-p { font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.62; margin: 0 0 var(--ma-3); color: var(--fg); text-wrap: pretty; }
.pos-p b { font-weight: 800; }
.pos-lead { font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.5; color: var(--fg); margin-top: 10px; }

/* trajetória: two columns, photo colours on hover (color = interaction) */
.pos-traj { display: grid; grid-template-columns: 1.12fr .88fr; gap: var(--gutter); align-items: start;
  max-width: 980px; margin: var(--ma-5) auto; padding-top: var(--ma-5); border-top: var(--ink-hair) solid var(--ink); }
.pt-kicker { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: 14px; color: var(--ink); margin-bottom: var(--ma-3); }
.pt-kicker i { font-style: normal; color: var(--wash-2); margin: 0 7px; font-family: var(--font-display); }
.pt-photo { position: sticky; top: 130px; }
.about-photo { position: relative; aspect-ratio: 3 / 4; border: var(--ink-stroke-hi) solid var(--ink); overflow: hidden; background: var(--wash-1); cursor: pointer; outline: none; box-shadow: 9px 9px 0 var(--ink); transition: border-color var(--cut), box-shadow var(--cut); }
.about-photo .ap-label { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: var(--wash-3); }
.about-photo .ap-wash { position: absolute; inset: 0; z-index: 1; background: var(--vermilion); mix-blend-mode: multiply; opacity: 0; transition: opacity var(--cut); }
.about-photo:hover, .about-photo:focus-visible { border-color: var(--vermilion); box-shadow: 9px 9px 0 var(--vermilion-ink); }
.about-photo:hover .ap-wash, .about-photo:focus-visible .ap-wash { opacity: .5; }
.ap-cap { margin-top: 12px; font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--fg-2); display: flex; align-items: center; gap: 7px; }
.ap-cap .dn { font-family: var(--font-display); }

.pos-next { margin: var(--ma-5) 0; }
.pos-sign { display: flex; align-items: center; gap: 16px; margin-top: var(--ma-5); padding-top: var(--ma-4); border-top: var(--ink-hair) solid var(--ink); flex-wrap: wrap; }
.pos-sign .nm { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; }
.pos-sign .nm small { display: block; font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: var(--fg-2); margin-top: 4px; }
.pos-sign-cta { margin-left: auto; }

/* trajetória de empresas — timeline, atual = painel invertido + selo */
.pos-companies { max-width: 980px; margin: var(--ma-6) auto 0; }
.pos-companies .pos-k { margin-bottom: var(--ma-3); }
.comp-track { display: flex; align-items: stretch; gap: 0; }
.comp { flex: 1 1 0; min-width: 0; border: var(--ink-stroke) solid var(--ink); background: var(--paper); padding: var(--ma-3); -webkit-appearance: none; appearance: none; text-align: left; cursor: pointer; transition: transform var(--cut); }
.comp:hover { transform: translateY(-3px); }
.comp-go { margin-top: 10px; font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--vermilion-ink); }
.comp.atual .comp-go { color: var(--paper); }
.comp-arrow { display: flex; align-items: center; padding: 0 12px; font-family: var(--font-display); font-size: 1.6rem; color: var(--wash-2); }
.comp-step { font-family: var(--font-editorial); font-weight: 700; font-size: 14px; color: var(--wash-3); }
.comp.atual .comp-step { color: var(--wash-1); }
.comp-now { display: inline-block; font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; background: var(--vermilion-ink); color: var(--paper); padding: 4px 9px; }
.comp-name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: .95; margin: 11px 0 6px; }
.comp-role { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--fg-2); }
.comp-note { font-family: var(--font-body); font-size: var(--t-small); color: var(--wash-4); margin-top: 7px; line-height: 1.4; }
.comp.atual { background: var(--ink); }
.comp.atual .comp-name { color: var(--paper); }
.comp.atual .comp-role { color: var(--wash-2); }
.comp.atual .comp-note { color: var(--wash-1); }

/* certificados — grid de painéis */
.pos-certs { max-width: 980px; margin: var(--ma-6) auto var(--ma-5); }
.pos-certs .pos-k { margin-bottom: var(--ma-3); }
.certs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.cert { border: var(--ink-stroke) solid var(--ink); background: var(--paper); display: flex; flex-direction: column; transition: transform var(--cut); }
.cert:hover { transform: translateY(-3px); }
.cert-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--wash-1); border-bottom: var(--ink-hair) solid var(--ink); overflow: hidden; }
.cert-meta { padding: 12px 12px 4px; flex: 1; }
.cert-title { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 14px; line-height: 1.12; }
.cert-issuer { font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--fg-2); margin-top: 6px; }
.cert-link { display: inline-flex; align-items: center; gap: 6px; margin: 8px 12px 12px; font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; border-bottom: 2px solid var(--ink); width: fit-content; transition: color var(--cut), border-color var(--cut); }
.cert-link:hover { color: var(--vermilion); border-color: var(--vermilion); }
.cert-link.is-ph { color: var(--wash-3); border-color: var(--wash-2); cursor: default; }

/* =====================================================================
   EMPRESA — dedicated company story page
   ===================================================================== */
.empresa { padding-bottom: var(--ma-6); }
.emp-cover { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
.emp-cover-shell { position: relative; z-index: 2; padding-top: var(--ma-6); padding-bottom: var(--ma-6); display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--gutter); align-items: center; }
.emp-k { display: flex; align-items: center; gap: 12px; font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: var(--wash-2); }
.emp-now { background: var(--vermilion); color: var(--paper); padding: 4px 9px; }
.emp-period { color: var(--wash-2); }
.emp-title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--t-splash); line-height: 1.06; margin: 14px 0 8px; color: var(--paper); }
.emp-role { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; color: var(--wash-2); }
.emp-blurb { font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.45; max-width: 38ch; margin: var(--ma-3) 0 0; color: var(--paper); opacity: .92; }
.emp-cover-sl { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .1;
  background-image: repeating-conic-gradient(from 0deg at 82% 30%, var(--paper) 0 .3deg, transparent .3deg 2.6deg);
  -webkit-mask-image: radial-gradient(circle at 82% 30%, #000 0%, transparent 55%);
          mask-image: radial-gradient(circle at 82% 30%, #000 0%, transparent 55%); }
.emp-logo { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 4 / 3; border: var(--ink-stroke-hi) solid var(--paper); background: var(--wash-4); }
.emp-logo-mark { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: .95; text-align: center; padding: 0 12px; color: var(--paper); }
.emp-logo-cap { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .16em; font-size: 10px; color: var(--wash-2); }
.emp-meta { position: relative; z-index: 2; display: flex; gap: 0; border-top: var(--ink-hair) solid var(--wash-4); padding: 0 var(--gutter); margin-top: var(--ma-4); }
.emp-meta .m { flex: 1; padding: var(--ma-3) var(--ma-3) 0 0; }
.emp-cover { padding-bottom: var(--ma-4); }
.emp-meta .m + .m { border-left: var(--ink-hair) solid var(--wash-4); padding-left: var(--ma-3); }
.emp-meta .l { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: var(--wash-2); }
.emp-meta .v { font-family: var(--font-condensed); font-weight: 600; font-size: 16px; color: var(--paper); margin-top: 4px; }

.emp-body { padding-top: var(--ma-6); }
.emp-story { margin-bottom: var(--ma-6); border-top: var(--ink-stroke) solid var(--ink); }
.es-beat { display: grid; grid-template-columns: clamp(72px, 12vw, 128px) 1fr; gap: var(--gutter); align-items: start; padding: var(--ma-4) 0; border-bottom: var(--ink-hair) solid var(--ink); animation: empin 460ms cubic-bezier(.2,.9,.1,1) both; }
@keyframes empin { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.es-n { font-family: var(--font-display); font-size: clamp(2.6rem, 7vw, 5rem); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--wash-3); }
.es-k { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: 13px; color: var(--vermilion-ink); }
.es-p { font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.55; color: var(--wash-4); margin-top: 12px; max-width: 52ch; text-wrap: pretty; }

.emp-quick { margin-bottom: var(--ma-6); }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.eq-card { -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left; display: flex; gap: 14px; align-items: stretch; background: var(--paper); border: var(--ink-stroke) solid var(--ink); padding: 0; overflow: hidden; transition: transform var(--cut); }
.eq-card:hover { transform: translateY(-3px); }
.eq-art { position: relative; flex: 0 0 84px; background: var(--wash-1); overflow: hidden; border-right: var(--ink-hair) solid var(--ink); }
.eq-meta { display: flex; flex-direction: column; justify-content: center; padding: 12px 14px 12px 0; }
.eq-cat { font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--fg-2); }
.eq-title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; line-height: .95; margin: 4px 0 8px; }
.eq-go { display: flex; align-items: center; gap: 7px; font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; transition: color var(--cut); }
.eq-card:hover .eq-go { color: var(--vermilion); }
.eq-card:hover .eq-go .arr { transform: translateX(5px); }
.eq-go .arr { transition: transform var(--cut); }

.emp-switch { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; border-top: var(--ink-stroke) solid var(--ink); padding-top: var(--ma-4); }
.emp-switch-side { display: flex; }
.emp-switch-side.right { justify-content: flex-end; }
.emp-navbtn { -webkit-appearance: none; appearance: none; background: transparent; border: 0; cursor: pointer; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.emp-navbtn.al-r { text-align: right; align-items: flex-end; }
.ens-k { font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; color: var(--fg-2); }
.ens-n { font-family: var(--font-display); text-transform: uppercase; font-size: 1.4rem; line-height: 1; transition: color var(--cut); }
.emp-navbtn:hover .ens-n { color: var(--vermilion); }

/* =====================================================================
   TWEAK-DRIVEN OVERRIDES (vars/classes set from the Tweaks panel)
   ===================================================================== */
.chap-tone { opacity: var(--tone-op, .16); }
.sol-tone, .panel-tone, .cover-tone { opacity: var(--tone-op, .14); }
/* cover-tone is on ink, keep it faint */
.cover-tone { opacity: calc(var(--tone-op, .14) * .5); }

/* summary layout: uniform 2×2 */
.sum-uniform .chapgrid .chap { grid-column: span 3 !important; }
.sum-uniform .chap.feature .chap-art { min-height: 150px; }
.sum-uniform .chap.feature .chap-t { font-size: 1.75rem; }

/* RTL gesture off: drop the directional cues, keep the reading */
.rtl-off .dec::after { display: none; }
.rtl-off .proc-foot { display: none; }
.rtl-off .v-volline .rtl { display: none; }
.rtl-off .pn { }

/* =====================================================================
   reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .stamp-in, .splash.lit .splash-title .ln, .splash.lit .splash-title .trail,
  .pageturn .sheet, .pageturn .pt-sfx, .viewcut, .beat .panel, .beat .dec, .beat-sfx .word, .cover-scroll .dn {
    animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important;
  }
  .splash-title .ln, .splash-title .trail { opacity: 1 !important; transform: none !important; }
  .splash.lit .hero-field, .splash.lit .hf-path, .splash.lit .hf-red, .splash.lit .splash-h,
  .splash.lit .hero-speedlines, .rotw-ch, .ss-wheel { animation: none !important; }
  .rotw-ch { transform: none !important; }
  .pageturn { display: none !important; }
}

@media (max-width: 880px) {
  .dif .shell { grid-template-columns: 1fr; }
  .tldr { grid-template-columns: 1fr; }
  .tldr .cell + .cell { border-left: 0; border-top: var(--ink-hair) solid var(--ink); }
  .dec { grid-column: 1 / -1; }
  .sol-panel, .sol-panel.big, .sol-panel.small, .sol-panel.third, .sol-panel.meia { grid-column: 1 / -1; }
/* Com os painéis em largura cheia a coluna de prints ficou bem mais alta que
   a de texto, e o align-items:center do .beat jogava o texto pro meio da
   página. Só este beat alinha no topo — o :has() já é idioma da casa. */
.beat:has(.sol-grid) { align-items: start; }
  .quemsou .qs-grid { grid-template-columns: 1fr; }
  .proc-grid { grid-template-columns: 1fr; gap: var(--ma-4); padding-top: clamp(110px, 15vh, 140px); }
  .proc-right { order: -1; }
  .proc-visual { max-width: 200px; }
  .proc-textwrap { min-height: 200px; }
}

/* =====================================================================
   v2 — INK MOTION · CONTRAST · FILTER · VOLUME COVERS · PROTOTYPE LINKS
   ===================================================================== */

/* ---- BRUSH: titles ink themselves on (soft-edged wipe, crisp at rest) */
/* flow-root: impede a margem negativa do span de colapsar com a do título
   e continua sem recortar o transbordo (ao contrário de overflow:hidden) */
.brush-host { display: flow-root; }
.brush {
  display: block;
  /* folga em cima E embaixo: com line-height .88 o Anton transborda a caixa
     em .237em no topo (acento do Ó, 1.101em acima da baseline) e .292em
     embaixo (cedilha do Ç, -0.308em). A margem devolve a mesma medida nos
     dois lados, então nada se desloca. */
  padding-top: .28em;  margin-top: -.28em;
  padding-bottom: .34em; margin-bottom: -.34em;
  -webkit-mask-image: linear-gradient(90deg, #000 0 58%, rgba(0,0,0,.35) 80%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0 58%, rgba(0,0,0,.35) 80%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  -webkit-mask-size: 0% 300%; mask-size: 0% 300%;
}
.brush.inked {
  -webkit-mask-size: 235% 300%; mask-size: 235% 300%;
  transition: -webkit-mask-size 560ms cubic-bezier(.72,.02,.28,1),
                      mask-size 560ms cubic-bezier(.72,.02,.28,1);
}

/* ---- MORPH WORD: gooey ink word-cycle in the hero ---- */
.splash-morph {
  display: flex; align-items: baseline; gap: .4em; margin-top: var(--ma-3);
  font-family: var(--font-display); text-transform: uppercase; line-height: 1;
}
.splash-morph .sm-pre {
  font-family: var(--font-condensed); font-weight: 500; letter-spacing: .14em;
  font-size: clamp(1rem, 1.8vw, 1.4rem); color: var(--fg-2);
}
.goo-wrap {
  display: inline-flex;
  font-size: clamp(2.2rem, 5vw, 4rem); color: var(--ink);
  min-width: 4.5ch; height: 1.05em; align-items: center;
}
.goo-word {
  display: inline-block;
  -webkit-mask-image: linear-gradient(90deg, #000 58%, rgba(0,0,0,.3) 80%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 58%, rgba(0,0,0,.3) 80%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: left center; mask-position: left center;
  animation: inkwipe 480ms cubic-bezier(.72,.02,.28,1) both;
}
@keyframes inkwipe {
  from { -webkit-mask-size: 0% 300%; mask-size: 0% 300%; opacity: .35; }
  to   { -webkit-mask-size: 240% 300%; mask-size: 240% 300%; opacity: 1; }
}

/* ---- MANGA PLATE: static inked panel that replaces image-slots ---- */
.plate { position: absolute; inset: 0; display: block; overflow: hidden; }
.plate::before {
  content: ""; position: absolute; inset: 0; opacity: var(--tone-op, .17);
  background-image: radial-gradient(var(--ink) 1.15px, transparent 1.25px);
  background-size: 7px 7px;
}
.plate::after {
  content: ""; position: absolute; inset: 0; opacity: .2;
  background-image: radial-gradient(var(--ink) 1px, transparent 1.2px);
  background-size: 6px 6px;
  -webkit-mask-image: linear-gradient(142deg, #000, transparent 58%);
          mask-image: linear-gradient(142deg, #000, transparent 58%);
}
.plate.on-ink::before { background-image: radial-gradient(var(--paper) 1.1px, transparent 1.2px); opacity: .16; }
.plate.on-ink::after  { background-image: radial-gradient(var(--paper) 1px, transparent 1.2px); opacity: .2; }

/* ---- INK BLOB: a living drip of ink (organic-loader homage) ---- */
.ink-blob {
  display: block; background: var(--ink); pointer-events: none;
  border-radius: 47% 53% 63% 37% / 55% 48% 52% 45%;
  animation: blobmorph 7.5s ease-in-out infinite;
}
@keyframes blobmorph {
  0%,100% { border-radius: 47% 53% 63% 37% / 55% 48% 52% 45%; transform: rotate(0deg) scale(1); }
  33%     { border-radius: 62% 38% 41% 59% / 44% 62% 38% 56%; transform: rotate(7deg)  scale(1.045); }
  66%     { border-radius: 37% 63% 57% 43% / 61% 39% 61% 39%; transform: rotate(-6deg) scale(.975); }
}
.splash-blob { position: absolute; z-index: 1; top: -26px; right: 6.5%; }
.splash-char { display: none; }
.splash-charpanel { display: none; }
.splash .shell { position: relative; }
.splash-copy { position: relative; z-index: 2; }
@media (min-width: 900px) {
  .splash { overflow: hidden; }
  .splash .shell { min-height: 540px; display: flex; flex-direction: column; justify-content: center; }
  .splash-copy { max-width: 56%; }
  .splash-charpanel {
    display: block; position: absolute; right: 0; bottom: 0; z-index: 1;
    width: clamp(320px, 30vw, 420px); height: 84%; max-height: 560px;
    border: var(--ink-stroke-hi) solid var(--ink); background: var(--paper);
    box-shadow: 11px 11px 0 var(--ink); overflow: hidden;
  }
  .splash-charpanel .splash-char {
    display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    height: 102%; width: auto; pointer-events: none; user-select: none; mix-blend-mode: multiply;
  }
  .splash-charpanel .scp-tone {
    position: absolute; inset: 0; pointer-events: none; opacity: .12;
    background-image: radial-gradient(var(--ink) 1.1px, transparent 1.2px); background-size: 7px 7px;
    -webkit-mask-image: linear-gradient(135deg, #000, transparent 55%);
            mask-image: linear-gradient(135deg, #000, transparent 55%);
  }
  .splash.lit .splash-charpanel { animation: charin 640ms cubic-bezier(.2,.9,.1,1) both; animation-delay: 220ms; }
  @keyframes charin { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
  .splash-blob { top: -20px; right: 2px; width: 84px !important; height: 84px !important; }
}
@media (prefers-reduced-motion: reduce) { .splash.lit .splash-charpanel { animation: none; } }
.splash-blob::after { /* a drip that detaches and falls */
  content: ""; position: absolute; left: 40%; top: 84%;
  width: 15%; aspect-ratio: 1 / 1.7; background: var(--ink);
  border-radius: 55% 55% 50% 50% / 70% 70% 40% 40%; transform-origin: top center;
  animation: inkdrip 5s ease-in infinite;
}
@keyframes inkdrip {
  0%, 55% { transform: scaleY(.35) translateY(0); opacity: 0; }
  72%     { transform: scaleY(1)   translateY(10px); opacity: 1; }
  100%    { transform: scaleY(1.4) translateY(46px); opacity: 0; }
}

/* ---- page-turn ink bloom under the SFX ---- */

/* =====================================================================
   CONTRAST FIXES
   ===================================================================== */
/* placeholders: clearer on paper, legible on the inked cover */
.ph { color: var(--wash-4); }
.cover .ph, .cover-lead .ph, .cover-meta .ph {
  color: var(--paper);
  background: color-mix(in srgb, var(--paper) 18%, transparent);
  border-bottom-color: var(--wash-2);
}
/* secondary reading text — darken from mid-wash to near-ink */
.dec .r { color: var(--wash-4); }
.dec .r b { color: var(--ink); }
.proc-step .pp { color: var(--wash-4); }
.next-chap .nc-k { color: var(--wash-4); }

/* =====================================================================
   DIFERENCIAL — alignment
   ===================================================================== */
.dif .shell { align-items: start; }
.dif-right { display: flex; flex-direction: column; }
.dif-hint {
  font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; color: var(--fg-2); margin-top: var(--ma-3);
  display: flex; align-items: center; gap: 8px;
}
.dif-hint .arr { font-family: var(--font-display); }

/* =====================================================================
   SUMÁRIO — the volume shelf: filter bar + tankōbon covers
   ===================================================================== */
.vol-filter {
  display: flex; flex-wrap: wrap; gap: 0;
  border: var(--ink-stroke) solid var(--ink); margin-bottom: var(--ma-4); width: fit-content;
}
.vf-tab {
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; font-size: 13px; padding: 12px 22px;
  transition: background var(--cut), color var(--cut), box-shadow var(--cut);
}
.vf-tab + .vf-tab { border-left: var(--ink-hair) solid var(--ink); }
.vf-tab:hover { background: var(--wash-1); }
.vf-tab.on { background: var(--ink); color: var(--paper); box-shadow: inset 0 -4px 0 var(--vermilion); }
.vf-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px; }

/* ---- COVERFLOW RAIL ---- */
.rail { position: relative; outline: none; }
.rail-stage { position: relative; transform-style: preserve-3d; perspective: 1400px; margin: var(--ma-2) 0 var(--ma-4); touch-action: pan-y; }
.rail-cover {
  position: absolute; left: 50%; top: 50%;
  -webkit-appearance: none; appearance: none; padding: 0; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; overflow: hidden;
  border: var(--ink-stroke) solid var(--ink); background: var(--paper);
  transition: transform 480ms var(--cut), opacity 360ms var(--cut), filter 360ms var(--cut), box-shadow var(--cut);
}
.rail-cover.side { filter: grayscale(1); box-shadow: 4px 4px 0 var(--ink); }
.rail-cover.focus { box-shadow: 9px 9px 0 var(--ink); }
.rail-cover.side:hover { box-shadow: 7px 7px 0 var(--ink); }
.rc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: var(--ink-hair) solid var(--ink);
  font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .16em;
  font-size: 10.5px; color: var(--fg-2);
}
.rc-vol { font-family: var(--font-editorial); font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.rc-art { position: relative; flex: 1; min-height: 0; background: var(--wash-1); overflow: hidden; }
.rc-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--ink); z-index: 3; }
.rc-sl {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--cut);
  background-image: repeating-conic-gradient(from 0deg at 60% 36%, var(--ink) 0 .3deg, transparent .3deg 2.4deg);
  -webkit-mask-image: radial-gradient(circle at 60% 36%, transparent 34%, #000 70%);
          mask-image: radial-gradient(circle at 60% 36%, transparent 34%, #000 70%);
}
.rail-cover.focus .rc-sl { opacity: .3; }
.rail-cover.focus .rc-vol { color: var(--vermilion-ink); }
/* favorite stamp — ink at rest, reddens on the focused (alive) cover */
.rc-fav { position: absolute; top: 0; left: 0; z-index: 4; font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 9.5px; background: var(--ink); color: var(--paper); padding: 5px 9px; }
.rail-cover.focus .rc-fav { background: var(--vermilion-ink); }
.ri-fav { display: inline-block; font-family: var(--font-condensed); font-weight: 600; letter-spacing: .1em; font-size: 11px; color: var(--vermilion); margin-right: 12px; }
.rail-cover.hot .rc-sl { opacity: .22; }
.rail-cover.hot { box-shadow: 8px 8px 0 var(--ink); }
.rail-cover.hot .rc-vol { color: var(--vermilion); }
.rc-obi { padding: 12px 14px 14px; border-top: var(--ink-stroke) solid var(--ink); background: var(--paper); }
.rc-cap { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: var(--fg-2); }
.rail-cover.focus .rc-cap { color: var(--vermilion); }
.rc-title { display: block; font-family: var(--font-display); text-transform: uppercase; line-height: .95; margin-top: 4px; font-size: clamp(1.35rem, 3.2vw, 2rem); }

.rail-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gutter); flex-wrap: wrap; border-top: var(--ink-stroke) solid var(--ink); padding-top: var(--ma-3); }
.rail-info { min-width: 0; animation: riin 320ms var(--cut) both; }
@keyframes riin { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.ri-cat { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: var(--vermilion-ink); }
.ri-title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--t-d2); line-height: .92; margin: 6px 0 4px; }
.ri-desc { font-family: var(--font-body); font-size: var(--t-body); color: var(--wash-4); }
.ri-desc.dim { color: var(--wash-3); font-style: italic; font-size: var(--t-small); }
.rail-ctrls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rail-nav { display: flex; align-items: center; gap: 4px; border: var(--ink-stroke) solid var(--ink); }
.rail-arr { -webkit-appearance: none; appearance: none; background: var(--paper); border: 0; cursor: pointer; font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--ink); padding: 8px 17px; transition: background var(--cut), color var(--cut); }
.rail-arr:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.rail-arr:disabled { color: var(--wash-2); cursor: default; }
.rail-idx { font-family: var(--font-editorial); font-weight: 700; font-size: 14px; letter-spacing: .08em; color: var(--fg-2); padding: 0 8px; white-space: nowrap; }
.rail-idx i { font-style: normal; color: var(--wash-2); margin: 0 1px; }
.rail-open { padding: 11px 20px; font-size: 14px; }

/* =====================================================================
   PROTOTYPE LINKS — live (Vercel, primary red) + Figma (secondary)
   ===================================================================== */
.proto-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: var(--ma-4); }
.proto-live, .proto-figma { padding: 12px 20px; font-size: 14px; }
.proto-live .ext, .proto-figma .ext { font-size: .92em; }
.proto-figma { background: transparent; }
.proto-figma:hover { background: var(--ink); color: var(--paper); }
.ph-tag {
  font-family: var(--font-condensed); font-weight: 600; letter-spacing: .03em;
  font-size: .82em; opacity: .9; margin-left: 2px;
}
.is-ph { cursor: default; }
.proto-live.is-ph:hover { transform: none; }

/* prototype links sit on the dark chapter cover — invert the secondary */
.cover .proto-figma { color: var(--paper); border-color: var(--paper); }
.cover .proto-figma:hover { background: var(--paper); color: var(--ink); }
.cover .btn-primary { box-shadow: 5px 5px 0 var(--paper); }
.cover .btn-primary:hover { box-shadow: 3px 3px 0 var(--paper); }
.cover .proto-live.is-ph:hover { box-shadow: 5px 5px 0 var(--paper); }

/* =====================================================================
   v2 reduced motion + responsive
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .brush { -webkit-mask-image: none !important; mask-image: none !important; }
  .ink-blob, .splash-blob::after { animation: none !important; }
  .goo-word { animation: none !important; -webkit-mask-image: none !important; mask-image: none !important; opacity: 1 !important; }
  .rail-cover { transition: opacity 1ms linear !important; }
  .rail-info { animation: none !important; }
  .proc-text { transition: none !important; }
  .pv-sl, .pv-blob, .proc-scrollhint .dn { animation: none !important; }
  .es-beat { animation: none !important; opacity: 1 !important; transform: none !important; }
  .emp-cover-sl { display: none; }
}
@media (max-width: 880px) {
  .dif-right { margin-top: var(--ma-4); }
  .splash-blob { width: 110px !important; height: 110px !important; right: 4%; }
  .rail-foot { flex-direction: column; align-items: stretch; }
  .rail-ctrls { justify-content: space-between; }
}

/* ---- responsive nav (hamburger) ---- */
.v-burger { display: none; }
@media (max-width: 760px) {
  .v-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 38px; background: transparent; border: 0; cursor: pointer; padding: 0;
  }
  .v-burger span { display: block; height: 3px; width: 26px; background: var(--ink); transition: transform var(--cut), opacity var(--cut); }
  .v-burger.x span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .v-burger.x span:nth-child(2) { opacity: 0; }
  .v-burger.x span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .v-navlinks {
    position: absolute; top: 100%; left: 0; right: 0; transform: none;
    flex-direction: column; align-items: stretch; gap: 0; padding: 0;
    background: var(--paper); border-bottom: var(--ink-stroke) solid var(--ink);
    max-height: 0; overflow: hidden; transition: max-height 260ms var(--cut);
  }
  .v-navlinks.open { max-height: 75vh; }
  .v-nav .nav-contact-d { display: none; }   /* desktop contact hidden; lives in burger */
  .v-nav .nav-contact-m { display: flex; }
  .v-navlinks a { padding: 17px var(--gutter); border-top: var(--ink-hair) solid var(--ink); font-size: 15px; letter-spacing: .16em; }
  .v-navlinks a.active::after { display: none; }
  .v-navlinks a.active { color: var(--vermilion-ink); }
  .v-navlinks .nav-contact { margin: 14px var(--gutter); justify-content: center; }
}

/* ---- rail: clip off-screen covers so they never cause horizontal scroll ---- */
.rail-stage { overflow: hidden; }
/* keep the coverflow draggable on mobile (as Gabriel prefers); allow vertical
   page scroll to win when the finger moves mostly vertically */
@media (max-width: 760px) {
  .rail-stage { touch-action: pan-y; }
  /* center the rail footer (project info + nav + CTA) on mobile */
  .rail-foot { align-items: center; text-align: center; }
  .rail-info { text-align: center; width: 100%; }
  .rail-ctrls { width: 100%; flex-direction: column; align-items: center; gap: 12px; }
  .rail-nav { justify-content: center; }
  .rail-arr { min-width: 44px; min-height: 44px; }
  .rail-open { width: 100%; justify-content: center; }
}

/* mobile project list — vertical cards, scrolls with the page (a11y-friendly) */
.proj-list { list-style: none; margin: var(--ma-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.proj-card { display: flex; width: 100%; gap: 0; align-items: stretch; text-align: left; background: var(--paper);
  border: var(--ink-stroke) solid var(--ink); padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  box-shadow: 6px 6px 0 var(--ink); transition: transform var(--cut), box-shadow var(--cut); overflow: hidden; }
.proj-card:active { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--ink); }
.pc-art { position: relative; flex: 0 0 38%; min-height: 128px; background: var(--wash-1);
  border-right: var(--ink-hair) solid var(--ink); overflow: hidden; }
.pc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pc-fav { position: absolute; top: 0; left: 0; z-index: 2; font-family: var(--font-condensed); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; font-size: 9px; background: var(--vermilion-ink); color: var(--paper); padding: 4px 8px; }
.pc-meta { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px; flex: 1; min-width: 0; }
.pc-tag { font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--fg-2); }
.pc-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.4rem, 6vw, 1.9rem); line-height: .95; color: var(--ink); }
.pc-go { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px;
  color: var(--vermilion-ink); display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; }

/* ---- filter bar: scroll horizontally instead of wrapping on small screens ---- */
@media (max-width: 760px) {
  .vol-filter {
    width: auto; max-width: 100%; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .vol-filter::-webkit-scrollbar { display: none; }
  .vf-tab { flex: 0 0 auto; padding: 11px 16px; font-size: 12px; letter-spacing: .1em; }
}

/* ---- ≤640 fine tuning, screen by screen ---- */
@media (max-width: 640px) {
  .v-volline { font-size: 10px; letter-spacing: .12em; gap: 10px; }
  .v-volline .rtl { text-align: right; }
  .splash { padding-top: var(--ma-5); }
  .splash-blob { top: -8px; }
  .splash-cta { gap: 12px; width: 100%; }
  .splash-cta .btn { flex: 1 1 auto; justify-content: center; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: var(--ma-3); }
  .dif .shell { padding: var(--ma-4) var(--gutter); }
  .rail-open { width: 100%; justify-content: center; }
  .chapter-body { padding-top: var(--ma-5); }
  .cover .shell { padding-top: var(--ma-5); padding-bottom: var(--ma-5); }
  .cover-meta { gap: 18px; flex-wrap: wrap; }
  .proto-links { width: 100%; }
  .proto-live, .proto-figma { flex: 1 1 auto; justify-content: center; }
  .foot-cta { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .pos-sign { flex-wrap: wrap; gap: 12px; }
  .pos-sign > div[style] { margin-left: 0 !important; width: 100%; }
  .pos-traj { grid-template-columns: 1fr; gap: var(--ma-4); }
  .pt-photo { position: static; max-width: 280px; }
  .pos-sign-cta { margin-left: 0; width: 100%; }
  .pos-sign-cta .btn { width: 100%; justify-content: center; }
  .comp-track { flex-direction: column; }
  .comp-arrow { justify-content: center; padding: 8px 0; transform: rotate(90deg); }
  .qs-grid { grid-template-columns: 1fr; gap: var(--ma-4); }
  .emp-cover-shell { grid-template-columns: 1fr; }
  .emp-blocks { grid-template-columns: 1fr; }
  .emp-meta { flex-wrap: wrap; }
  .emp-meta .m { flex: 1 1 40%; }
  .es-beat { grid-template-columns: 1fr; gap: 6px; }
  .es-n { font-size: 2.4rem; }
  .emp-switch { grid-template-columns: 1fr; }
  .emp-switch-side, .emp-switch-side.right { justify-content: flex-start; }
  .emp-navbtn.al-r { text-align: left; align-items: flex-start; }
  .emp-switch .btn { justify-content: center; order: -1; }
  /* polish: processo + posfácio on phones */
  .proc-cta-row .btn { width: 100%; justify-content: center; }
  .proc-visual { max-width: 200px; }
  .pt-photo { margin-inline: auto; }
  .pos-companies, .pos-certs, .pos-traj { margin-top: var(--ma-5); }
  .pos-org { margin: var(--ma-4) 0; }
  /* hero cover on phones */
  .splash { min-height: 82vh; }
  .splash-kana { display: none; }
  .splash-center { width: 100%; max-width: 100%; }
  /* bigger, readable headline on phones (WCAG 1.4.4); rotate box gets its own
     smaller size so the longest phrase still fits the screen */
  .splash-h { font-size: clamp(2rem, 9vw, 2.9rem); line-height: 1.04; }
  .splash-h .sh-line { gap: .25em; }
  .splash-h .rotw-box { font-size: .62em; max-width: 100%; }
  .splash-id { display: flex; flex-wrap: wrap; justify-content: center; font-size: 11px; letter-spacing: .12em; line-height: 1.7; }
  .splash-sub { font-size: 1.02rem; }
}

/* ---- manga reading progress: thin vermilion rule at the very top ---- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 120; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--vermilion);
  transform: scaleX(0); transform-origin: left; will-change: transform; }

/* =====================================================================
   MODO TINTA — o volume lido de noite. Os dois polos do mundo trocam:
   tinta clara sobre papel-sumi. A escala de washes inverte junto pra
   manter a hierarquia; o vermelho-selo continua o único acento.
   ===================================================================== */
html.ink {
  --ink:   #F2EFE7;
  --paper: #161310;
  --wash-1:#3B372F;   /* faintest: hairlines               */
  --wash-2:#6E6759;   /* light wash                         */
  --wash-3:#ABA495;   /* mid wash: secondary text (AA)      */
  --wash-4:#DFDACD;   /* deep wash: near-"ink"              */
  --vermilion-ink:#F4695C;   /* pressed red, legível no escuro */
  --vermilion-tint:#5A1511;  /* focus halo, invertido          */
}
html.ink .rc-cover, html.ink .sol-img, html.ink .pc-art img, html.ink .cover-img { opacity: .9; }
html.ink .splash { color: #F6F3EC; }   /* a capa continua vermelha: texto papel de verdade */

/* toggle 墨 no nav */
.ink-toggle { width: 38px; height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border: var(--ink-hair) solid var(--ink); background: transparent; color: var(--ink);
  font-size: 17px; line-height: 1; cursor: pointer; transition: background var(--cut), color var(--cut), transform var(--cut); }
.ink-toggle [lang="ja"] { font-family: 'Reggae One', var(--font-sfx), sans-serif; }
.ink-toggle:hover { background: var(--ink); color: var(--paper); transform: translate(1px,1px); }
.ink-toggle.on { background: var(--ink); color: var(--paper); }

/* =====================================================================
   HANKO PRESS — o selo carimba a tela no "Fale comigo"
   ===================================================================== */
.seal-stamp { position: fixed; left: 50%; top: 50%; z-index: 125; pointer-events: none;
  transform: translate(-50%, -50%); animation: hanko 820ms cubic-bezier(.2,1.3,.3,1) both; }
.seal-stamp img { display: block; filter: drop-shadow(6px 6px 0 rgba(10,10,10,.35)); }
@keyframes hanko {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(2.3) rotate(-7deg); }
  28%  { opacity: 1; transform: translate(-50%,-50%) scale(.92) rotate(1.5deg); }
  42%  { transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  68%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .seal-stamp { display: none; } }

/* =====================================================================
   404 — página em branco do volume
   ===================================================================== */
.nf-shell { min-height: 72vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: var(--ma-2); padding-top: var(--ma-6); padding-bottom: var(--ma-6); }
.nf-sfx { font-family: var(--font-sfx); font-size: clamp(4rem, 11vw, 9rem); line-height: .9; color: var(--wash-1);
  display: inline-flex; flex-direction: column; }
.nf-sfx [lang="ja"] { font-family: 'Reggae One', var(--font-sfx), Impact, sans-serif; }
.nf-sfx .sfx-ro { font-size: .16em; margin-top: .5em; color: var(--wash-2); }
.nf-k { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .2em;
  font-size: 12px; color: var(--vermilion-ink); }
.nf-t { font-family: var(--font-display); text-transform: uppercase; font-size: var(--t-d1); line-height: 1.06; margin: 0; }
.nf-p { font-family: var(--font-body); font-size: var(--t-lead); color: var(--fg-2); max-width: 44ch; margin: 0 0 var(--ma-2); }

/* =====================================================================
   v3 — EXPERIÊNCIA PREMIUM · impact panel · thumb do próximo capítulo ·
   sistema do volume · marcador de página · virada de tinta · scrollbar ·
   respingo · recap do processo · assinatura
   ===================================================================== */

/* ---- TL;DR: célula "Ao vivo" quando o projeto tem deploy ---- */
.tldr.has-live { grid-template-columns: 1.2fr 1.2fr .8fr; }
.tldr-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: 13px; color: var(--vermilion-ink);
  border-bottom: 2px solid var(--vermilion-ink); padding-bottom: 2px;
  transition: color var(--cut), border-color var(--cut);
}
.tldr-live:hover { color: var(--vermilion); border-color: var(--vermilion); }
@media (max-width: 880px) { .tldr.has-live { grid-template-columns: 1fr; } }

/* ---- RESULTADO: painel de impacto (o fato no palco, não placa vazia) --- */
/* o painel de impacto é literal: preto de tinta nos DOIS modos (é um palco,
   como a capa). Kicker no vermelho claro: 7:1 sobre o preto. */
.beat .panel.art.impact { background: #0A0A0A; border-color: #0A0A0A;
  display: flex; align-items: center; }
.impact-inner { position: relative; z-index: 2; width: 100%; padding: var(--ma-4); }
.impact-kana {
  position: absolute; right: 4%; top: 50%; transform: translateY(-50%) skewX(-5deg);
  font-family: 'Reggae One', var(--font-sfx), Impact, sans-serif;
  font-size: clamp(5.5rem, 13vw, 10rem); line-height: 1; z-index: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(246,243,236,.2);
  pointer-events: none; user-select: none;
}
.impact-k { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .2em; font-size: 12px; color: #F4695C; }
.impact-t { position: relative; z-index: 2; font-family: var(--font-display); text-transform: uppercase;
  color: #F6F3EC; font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.02;
  margin-top: 12px; max-width: 22ch; }
.impact-live { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--ma-3);
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: 12px; color: #F6F3EC;
  border-bottom: 2px solid var(--vermilion); padding-bottom: 2px; transition: color var(--cut); }
.impact-live:hover { color: #F4695C; }

/* ---- PRÓXIMO CAPÍTULO: thumb de tankōbon (P&B; colore no hover) ---- */
.next-chap { align-items: center; }
.nc-thumb { position: relative; flex: 0 0 92px; width: 92px; aspect-ratio: 3 / 4;
  border: var(--ink-stroke) solid var(--ink); overflow: hidden; background: var(--wash-1); }
.nc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; filter: grayscale(1); transition: filter var(--cut); }
.next-chap:hover .nc-thumb img { filter: none; }
.nc-copy { flex: 1; min-width: 0; }
@media (max-width: 640px) { .nc-thumb { flex-basis: 68px; width: 68px; } }

/* ---- O SISTEMA POR TRÁS DO VOLUME (CAP. 05) ---- */
.sis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.sis { border: var(--ink-stroke) solid var(--ink); background: var(--paper);
  padding: var(--ma-3); display: flex; flex-direction: column; gap: 14px; }
.sis-k { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; font-size: 12px; color: var(--vermilion-ink); }
.sis-p { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.55;
  color: var(--wash-4); margin: auto 0 0; }
.sis-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.sw-chip { width: 34px; height: 34px; border: var(--ink-hair) solid var(--ink); display: block; }
.sw-red { background: var(--vermilion); }
.sw-n { font-family: var(--font-condensed); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--fg-2); }
.sis-type { display: flex; flex-direction: column; gap: 6px; }
.st-display { font-family: var(--font-display); font-size: 2.2rem; text-transform: uppercase; line-height: .95; }
.st-cond { font-family: var(--font-condensed); font-weight: 600; letter-spacing: .14em; font-size: 12px; text-transform: uppercase; }
.st-body { font-family: var(--font-body); font-size: var(--t-body); }
.st-kana { font-family: 'Reggae One', var(--font-sfx), sans-serif; font-size: 1.3rem; }
.sis-ma { display: flex; flex-direction: column; gap: 7px; }
.ma-row { display: flex; align-items: center; gap: 10px; }
.ma-bar { height: 8px; background: var(--ink); display: block; flex: 0 0 auto; }
.ma-n { font-family: var(--font-editorial); font-weight: 700; font-size: 11px; color: var(--wash-3); }
.sis-motion { height: 56px; display: flex; align-items: center; }
.sm-box { width: 22px; height: 22px; background: var(--vermilion); }
.sis:hover .sm-box { animation: sm-cut 2.2s cubic-bezier(.2,.9,.1,1) infinite; }
@keyframes sm-cut {
  0%, 16% { transform: translateX(0); }
  26%, 62% { transform: translateX(118px); }
  72%, 100% { transform: translateX(0); }
}
.sis-big { font-family: var(--font-display); font-size: 4rem; line-height: .9;
  display: flex; align-items: baseline; gap: 12px; }
.sis-big .sb-s { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .14em; font-size: 12px; color: var(--fg-2); }
.sis-modes { display: flex; gap: 10px; }
.md { width: 52px; height: 52px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.6rem; border: var(--ink-stroke) solid var(--ink); }
.md-paper { background: #F6F3EC; color: #0A0A0A; }
.md-ink { background: #161310; color: #F2EFE7; }
@media (max-width: 880px) { .sis-grid { grid-template-columns: 1fr; } }

/* ---- MARCADOR DE PÁGINA: a fita que fica presa no volume ---- */
.bookmark { position: fixed; top: 0; right: clamp(14px, 6vw, 72px); z-index: 60;
  display: flex; align-items: flex-start;
  filter: drop-shadow(4px 6px 0 rgba(10,10,10,.28));
  animation: bm-drop 520ms cubic-bezier(.2,1.1,.3,1) both; }
@keyframes bm-drop { from { transform: translateY(-102%); } to { transform: none; } }
.bm-go { -webkit-appearance: none; appearance: none; cursor: pointer; border: 0; text-align: left;
  background: var(--ink); color: var(--paper); padding: 44px 18px 24px; max-width: 210px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px));
  display: flex; flex-direction: column; gap: 6px; }
.bm-k { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; font-size: 10px; color: color-mix(in srgb, var(--paper) 62%, transparent); }
.bm-t { font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem; line-height: .95; }
.bm-c { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: 10.5px; color: var(--vermilion); margin-top: 4px;
  display: inline-flex; align-items: center; gap: 7px; transition: color var(--cut); }
.bm-c .arr { transition: transform var(--cut); }
.bm-go:hover .bm-c { color: var(--paper); }
.bm-go:hover .bm-c .arr { transform: translateX(4px); }
.bm-x { -webkit-appearance: none; appearance: none; cursor: pointer; border: 0;
  background: var(--ink); color: color-mix(in srgb, var(--paper) 75%, transparent);
  width: 26px; height: 26px; font-size: 15px; line-height: 1; margin-left: 2px;
  transition: background var(--cut), color var(--cut); }
.bm-x:hover { color: var(--paper); background: var(--vermilion-ink); }
html.ink .bookmark { filter: drop-shadow(4px 6px 0 rgba(0,0,0,.5)); }
@media (max-width: 640px) {
  .bookmark { right: 10px; }
  .bm-go { max-width: 46vw; padding: 32px 14px 20px; }
  .bm-t { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .bookmark { animation: none; } }

/* ---- VIRADA DE TINTA (view transition do modo 墨): o clip-path anima
   via WAAPI; as animações default do UA saem do caminho ---- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---- SCROLLBAR DE TINTA (só ponteiro fino; touch fica nativo) ---- */
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: var(--wash-2) transparent; }
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--ink); border: 3px solid var(--paper); }
  ::-webkit-scrollbar-thumb:hover { background: var(--vermilion-ink); }
}

/* ---- RESPINGO DE TINTA no clique (decorativo, some num beat) ---- */
.ink-splat { position: fixed; z-index: 9997; pointer-events: none;
  width: 36px; height: 36px; margin: -18px 0 0 -18px; color: var(--ink); }
.ink-splat::before { content: ""; position: absolute; inset: 10px;
  border-radius: 47% 53% 63% 37% / 55% 48% 52% 45%; background: currentColor;
  animation: splat-core .5s ease-out forwards; }
.ink-splat::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 15px -7px 0 -13px currentColor, -13px -11px 0 -13px currentColor,
              9px 13px 0 -13px currentColor, -11px 10px 0 -14px currentColor;
  animation: splat-drops .58s ease-out forwards; }
.ink-splat.on-red { color: #F6F3EC; }
@keyframes splat-core { from { transform: scale(.25); opacity: .4; } to { transform: scale(1.3); opacity: 0; } }
@keyframes splat-drops { from { transform: scale(.35); opacity: .45; } to { transform: scale(1.65); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ink-splat { display: none; } }

/* ---- PROCESSO: recap "de relance" ---- */
.recap-grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); border: var(--ink-stroke) solid var(--ink); }
.recap { padding: var(--ma-3); display: flex; flex-direction: column; gap: 8px;
  border-right: var(--ink-hair) solid var(--ink); border-bottom: var(--ink-hair) solid var(--ink); }
.recap:nth-child(3n) { border-right: 0; }
.recap:nth-child(n+4) { border-bottom: 0; }
.rec-n { font-family: var(--font-editorial); font-weight: 700; font-size: 13px; color: var(--vermilion-ink); }
.rec-t { font-family: var(--font-display); text-transform: uppercase; font-size: 1.3rem; line-height: .95; }
.rec-p { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5; color: var(--wash-4); }
@media (max-width: 880px) {
  .recap-grid { grid-template-columns: 1fr; }
  .recap, .recap:nth-child(3n), .recap:nth-child(n+4) { border-right: 0; border-bottom: var(--ink-hair) solid var(--ink); }
  .recap:last-child { border-bottom: 0; }
}

/* ---- ASSINATURA (Posfácio): o traço se desenha, a tinta assenta ---- */
.sig-wrap { height: 92px; margin-top: var(--ma-4); }
.sig-svg { width: 300px; max-width: 100%; height: 100%; overflow: visible; }
.sig-text { font-family: var(--font-hand); font-weight: 600; font-size: 84px;
  fill: transparent; stroke: var(--ink); stroke-width: 1.2;
  stroke-dasharray: 620; stroke-dashoffset: 620; }
.sig-wrap.in .sig-text {
  animation: sig-draw 1.7s cubic-bezier(.5,0,.3,1) .15s forwards,
             sig-fill .45s ease 1.8s forwards; }
@keyframes sig-draw { to { stroke-dashoffset: 0; } }
@keyframes sig-fill { to { fill: var(--ink); } }
@media (prefers-reduced-motion: reduce) {
  .sig-text { fill: var(--ink); stroke-dashoffset: 0; }
  .sig-wrap.in .sig-text { animation: none; }
}

/* ---- LANG TOGGLE (PT/EN), par do 墨 no nav ---- */
.lang-toggle { height: 38px; min-width: 38px; padding: 0 8px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--ink-hair) solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--font-condensed); font-weight: 600; letter-spacing: .12em; font-size: 12px;
  line-height: 1; cursor: pointer; transition: background var(--cut), color var(--cut), transform var(--cut); }
.lang-toggle:hover { background: var(--ink); color: var(--paper); transform: translate(1px,1px); }

/* ---- BRAND STRIP: marcas reais sob o statement do diferencial ---- */
.brand-strip { margin-top: var(--ma-4); }  /* legado: mantido p/ EmpresaPage */
.bs-k { font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase;
  letter-spacing: .2em; font-size: 11px; color: var(--fg-2); margin-bottom: 12px; }
.bs-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.bs-chip { display: inline-flex; align-items: center; gap: 12px;
  background: #F6F3EC; border: var(--ink-hair) solid var(--ink); padding: 9px 16px; }
.bs-logo { height: 30px; width: auto; max-width: 72px; object-fit: contain;
  filter: grayscale(1); opacity: .85; transition: filter var(--cut), opacity var(--cut); }
.bs-name { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: 12px; color: #38362F; }
.bs-chip:hover .bs-logo { filter: none; opacity: 1; }

/* ---- SPLASH: atalho da leitura rápida ---- */
.splash-rapido { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--ma-3);
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; font-size: 11.5px; color: rgba(246,243,236,.75);
  border-bottom: 1.5px solid rgba(246,243,236,.4); padding-bottom: 3px;
  transition: color var(--cut), border-color var(--cut); }
.splash-rapido:hover { color: #F6F3EC; border-color: #F6F3EC; }
.splash-rapido .arr { transition: transform var(--cut); }
.splash-rapido:hover .arr { transform: translateX(4px); }

/* ---- LEITURA RÁPIDA (#/rapido) ---- */
.rapido { padding: calc(clamp(54px, 8vh, 74px) + var(--ma-5)) 0 var(--ma-6); }
.rap-title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--t-d1);
  line-height: .9; margin: var(--ma-2) 0 var(--ma-3); }
.rap-lead { font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.5;
  color: var(--fg); max-width: 52ch; margin: 0 0 var(--ma-5); }
.rap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ma-3); }
.rap-item { border: var(--ink-stroke) solid var(--ink); background: var(--paper); padding: var(--ma-3); }
.rap-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: var(--ma-2); }
.rap-cap { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; font-size: 11px; color: var(--vermilion-ink); }
.rap-t { font-family: var(--font-display); text-transform: uppercase; font-size: 1.9rem; line-height: .95; margin: 0; }
.rap-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ma-3); }
.rap-cells .rc .l { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .18em; font-size: 10.5px; color: var(--fg-2); }
.rap-cells .rc .v { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5;
  color: var(--fg); margin-top: 6px; }
.rap-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: var(--ma-3); }
.rap-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-condensed);
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 12px;
  color: var(--vermilion-ink); border-bottom: 2px solid var(--vermilion-ink); padding-bottom: 2px;
  transition: color var(--cut), border-color var(--cut); }
.rap-live:hover { color: var(--vermilion); border-color: var(--vermilion); }
.rap-cta { margin-top: var(--ma-5); display: flex; align-items: center; gap: var(--ma-3); flex-wrap: wrap; }
.rap-cta .rap-lead { margin: 0; }
@media (max-width: 760px) {
  .rap-cells { grid-template-columns: 1fr; gap: var(--ma-2); }
  .rap-cta { flex-direction: column; align-items: flex-start; }
}

/* ---- VARREDURA FINAL · contraste (axe) + foco nunca invisível ---- */
/* kickers vermelhos em texto pequeno sobre papel: usar o vermelho prensado */
.beat-k { color: var(--vermilion-ink); }
.beat-sfx .word .sfx-ro { color: var(--vermilion-ink); }
/* selo "Empresa atual" da capa de empresa: papel sobre vermelho prensado */
.emp-now { background: var(--vermilion-ink); }
/* 404: o eco de silêncio precisa passar AA-large sem perder o sussurro */
.nf-sfx { color: var(--wash-3); }
.nf-sfx .sfx-ro { color: var(--wash-3); }
/* nav escondida (hide-on-scroll / sobre a capa) sai da ordem de Tab:
   foco nunca pousa em controle invisível */
.hd-hidden .v-nav { visibility: hidden; transition-property: transform, box-shadow, visibility; }

/* =====================================================================
   v4 — O VOLUME COMPLETO · kanji do método · 目次 · número de página ·
   painel do problema · lift das decisões · marca d'água da empresa
   ===================================================================== */

/* ---- PROCESSO: o método escrito em kanji vertical ---- */
.pv-frame { background: var(--paper); }
.pv-tone { position: absolute; right: 0; top: 0; width: 46%; height: 40%; pointer-events: none; opacity: .16;
  background-image: radial-gradient(var(--ink) 1.1px, transparent 1.2px); background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(215deg, #000, transparent 62%);
          mask-image: linear-gradient(215deg, #000, transparent 62%); }
.pv-step { position: absolute; left: 14px; top: 12px; font-family: var(--font-editorial);
  font-weight: 700; font-size: 15px; letter-spacing: .1em; color: var(--vermilion-ink); }
.pv-kanji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; font-family: 'Reggae One', var(--font-sfx), sans-serif;
  font-size: clamp(5.5rem, 19vh, 9rem); line-height: 1; letter-spacing: .08em;
  color: transparent; -webkit-text-stroke: 3px var(--ink);
  animation: pvk-in 260ms cubic-bezier(.2,.9,.1,1) both; }
@keyframes pvk-in { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.pv-ro { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .4em; text-indent: .4em; font-size: 12px; color: var(--vermilion-ink); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .pv-kanji { animation: none; } }

/* ---- 目次 · índice do volume (desktop, sob o coverflow) ---- */
.mokuji { margin-top: var(--ma-5); border-top: var(--ink-stroke) solid var(--ink); padding-top: var(--ma-4); }
.mo-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: var(--ma-3); }
.mo-kanji { font-family: 'Reggae One', var(--font-sfx), sans-serif; font-size: 1.7rem; line-height: 1; color: var(--ink); }
.mo-list { list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: calc(var(--gutter) * 1.6); }
.mo-item { break-inside: avoid; }
.mo-row { -webkit-appearance: none; appearance: none; background: transparent; border: 0; cursor: pointer;
  width: 100%; display: flex; align-items: baseline; gap: 12px; padding: 9px 2px; text-align: left; }
.mo-cap { flex: 0 0 auto; font-family: var(--font-editorial); font-weight: 700; font-size: 11px;
  letter-spacing: .06em; color: var(--wash-3); min-width: 58px; }
.mo-title { flex: 0 0 auto; font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.15rem; line-height: 1; color: var(--ink); transition: color var(--cut); }
.mo-dots { flex: 1 1 auto; border-bottom: 2px dotted var(--wash-2); transform: translateY(-4px);
  transition: border-color var(--cut); min-width: 24px; }
.mo-page { flex: 0 0 auto; font-family: var(--font-editorial); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; color: var(--wash-3); transition: color var(--cut); }
.mo-row:hover .mo-title { color: var(--vermilion); }
.mo-row:hover .mo-dots { border-color: var(--vermilion); }
.mo-row:hover .mo-page { color: var(--vermilion-ink); }
.mo-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 1024px) { .mo-list { columns: 1; } }

/* ---- NÚMERO DE PÁGINA na margem (views de leitura) ---- */
/* wash-3 sobre papel = AA; em página escura o número mergulha na tinta,
   como a numeração some nas páginas full-bleed de um volume real */
.page-num { position: fixed; right: 14px; bottom: 12px; z-index: 90; pointer-events: none;
  font-family: var(--font-editorial); font-weight: 700; font-size: 11px; letter-spacing: .18em;
  color: var(--wash-3); }
@media (max-width: 640px) { .page-num { right: 10px; bottom: 8px; font-size: 10px; } }

/* ---- PROBLEMA: painel de abertura de arco (tipográfico) ---- */
.beat .panel.art.prob { background: var(--paper); border: var(--ink-stroke-hi) solid var(--ink);
  display: flex; align-items: flex-end; padding: var(--ma-4); }
.prob-tone { position: absolute; right: 0; top: 0; width: 52%; height: 46%; pointer-events: none; opacity: .18;
  background-image: radial-gradient(var(--ink) 1.15px, transparent 1.25px); background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(215deg, #000, transparent 60%);
          mask-image: linear-gradient(215deg, #000, transparent 60%); }
.prob-kanji { position: absolute; right: 6%; top: 8%; writing-mode: vertical-rl;
  font-family: 'Reggae One', var(--font-sfx), sans-serif;
  font-size: clamp(4rem, 9vw, 7.5rem); line-height: 1; letter-spacing: .06em;
  color: transparent; -webkit-text-stroke: 2px var(--wash-1); pointer-events: none; user-select: none; }
.prob-t { position: relative; z-index: 2; font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.9rem, 3.8vw, 3.2rem); line-height: 1.06; margin: 0; max-width: 14ch; color: var(--ink); }
@media (max-width: 880px) { .beat .panel.art.prob { aspect-ratio: auto; min-height: 260px; } }

/* ---- DECISÕES: os cards acordam no hover como o resto do mundo ---- */
.dec { transition: opacity var(--cut), transform var(--cut), box-shadow var(--cut); }
.beat.in .dec:hover { transform: translateY(-4px); box-shadow: 7px 7px 0 var(--ink); }

/* ---- EMPRESA: logo como marca d'água halftone na capa escura ---- */
.emp-wm { position: absolute; right: -4%; bottom: -14%; width: 52%; max-width: 640px; z-index: 1;
  opacity: .08; filter: grayscale(1) brightness(2.6); pointer-events: none; user-select: none;
  -webkit-mask-image: radial-gradient(#000 1.3px, transparent 1.5px);
          mask-image: radial-gradient(#000 1.3px, transparent 1.5px);
  -webkit-mask-size: 7px 7px; mask-size: 7px 7px; }
.emp-wm-txt { position: absolute; right: -2%; bottom: 2%; z-index: 1; pointer-events: none; user-select: none;
  font-family: var(--font-display); text-transform: uppercase; line-height: .8;
  font-size: clamp(6rem, 16vw, 13rem); color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--paper) 10%, transparent); }

/* =====================================================================
   v3 — HOME REESTRUTURADA
   Capa · frase + faixa de marcas · 4 capítulos em lista · outras peças
   ===================================================================== */

/* ---- FAIXA DE MARCAS (substitui "Minhas frentes" na coluna direita) ----
   16 marcas nunca cabem em duas linhas arrumadas em toda largura, então a
   faixa corre devagar e em loop. A trilha é duplicada pro loop não ter
   emenda; hover pausa pra dar tempo de ler um nome. Tudo monocromático:
   cor no volume é intenção, e essas marcas são contexto, não ação. */
.mkstrip { width: 100%; min-width: 0; }
.mk-k {
  font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--tr-kicker); font-size: var(--t-kicker); color: var(--fg-2);
  margin-bottom: var(--ma-2);
}
.mk-viewport {
  overflow: hidden; border-top: var(--ink-hair) solid var(--ink); border-bottom: var(--ink-hair) solid var(--ink);
  padding: var(--ma-2) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.mk-track { display: flex; align-items: center; gap: 10px; width: max-content; animation: mk-run 52s linear infinite; }
.mk-dup { display: flex; align-items: center; gap: 10px; }
.mk-viewport:hover .mk-track { animation-play-state: paused; }
@keyframes mk-run { to { transform: translateX(-50%); } }

.mk {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 14px; border: var(--ink-hair) solid var(--wash-2); background: var(--paper);
  transition: border-color var(--cut);
}
.mk:hover { border-color: var(--ink); }
.mk-logo {
  height: 26px; width: auto; max-width: 96px; object-fit: contain; display: block;
  /* nenhum filtro e nenhum blend: os arquivos em marcas/mono/ já são a marca
     em tinta sobre transparente. Não existe fundo pra esconder — nem com
     multiply, que aqui pioraria (os PNGs originais são gravados em #F6F3EC,
     não em branco, então multiplicar papel por papel escurece o retângulo
     em vez de sumir com ele). */
  opacity: .72; transition: opacity var(--cut);
}
.mk:hover .mk-logo { opacity: 1; }
/* sem arquivo de logo: wordmark, mesma altura óptica, mesma temperatura */
.mk-word {
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: 13px; color: var(--wash-3); white-space: nowrap;
  transition: color var(--cut);
}
.mk:hover .mk-word { color: var(--ink); }
html.ink .mk { background: var(--paper); }
html.ink .mk-word { color: var(--wash-4); }

/* ---- 4 CAPÍTULOS EM LISTA (o coverflow saiu) ------------------------
   Perspectiva + blur nas laterais escondia três quartos do que devia
   vender. Um bloco largo por capítulo: capa grande, contexto, resultado. */
.chaplist { list-style: none; margin: var(--ma-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--ma-4); }
.chapline { display: block; }
.cl-btn {
  -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  background: var(--paper); border: var(--ink-stroke) solid var(--ink); padding: 0;
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform var(--cut), box-shadow var(--cut);
}
.cl-btn:hover { transform: translate(-3px, -3px); box-shadow: 13px 13px 0 var(--ink); }
.cl-btn:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 4px; }

.cl-art { position: relative; display: block; background: var(--wash-1); aspect-ratio: 16 / 10; overflow: hidden;
  border-right: var(--ink-stroke) solid var(--ink); }
.cl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  filter: grayscale(1); transition: filter var(--cut), transform 420ms var(--cut); }
.cl-btn:hover .cl-img { filter: none; transform: scale(1.02); }
.cl-cap {
  position: absolute; top: 0; left: 0; z-index: 3;
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
  font-size: 11px; background: var(--ink); color: var(--paper); padding: 7px 12px;
}
.cl-btn:hover .cl-cap { background: var(--vermilion-ink); }

.cl-copy { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: var(--ma-4) var(--ma-3); min-width: 0; }
.cl-dom { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: var(--fg-2); }
.cl-t { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.06; }
.cl-ctx { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.5; color: var(--wash-4); }
.cl-res {
  font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5; color: var(--fg-2);
  border-top: var(--ink-hair) solid var(--wash-1); padding-top: 10px;
}
.cl-res i {
  display: block; font-style: normal; font-family: var(--font-condensed); font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; font-size: 10.5px; color: var(--vermilion-ink); margin-bottom: 4px;
}
.cl-go {
  display: flex; align-items: center; gap: 10px; margin-top: 4px;
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 12px;
  transition: color var(--cut);
}
.cl-btn:hover .cl-go { color: var(--vermilion); }
.cl-btn:hover .cl-go .arr { transform: translateX(5px); }
.cl-go .arr { transition: transform var(--cut); }


/* ---- OUTRAS PEÇAS: filtro por categoria + índice pontilhado --------- */
.outras { margin-top: var(--ma-6); }
.catnav {
  display: flex; flex-wrap: wrap; gap: 0;
  border: var(--ink-stroke) solid var(--ink); margin-bottom: var(--ma-4);
}
.cat-tag {
  -webkit-appearance: none; appearance: none; cursor: pointer; position: relative;
  flex: 1 1 auto; display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 0; padding: 13px 16px;
  transition: background var(--cut), color var(--cut);
}
.cat-tag + .cat-tag { border-left: var(--ink-hair) solid var(--ink); }
.cat-tag:hover:not(:disabled) { background: var(--wash-1); }
.cat-tag.on { background: var(--ink); color: var(--paper); box-shadow: inset 0 -4px 0 var(--vermilion); }
.cat-tag:disabled { opacity: .38; cursor: default; }
.cat-tag:focus-visible { outline: 2px solid var(--vermilion); outline-offset: -5px; }
.ct-label { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; }
.ct-count { font-family: var(--font-editorial); font-weight: 700; font-size: 12px; color: var(--wash-3); margin-left: auto; letter-spacing: .04em; }
.cat-tag.on .ct-count { color: var(--paper); }
.ct-dot { flex: 0 0 auto; width: 8px; height: 8px; background: var(--wash-2); transition: background var(--cut); }
.cat-tag:hover .ct-dot, .cat-tag.on .ct-dot { background: var(--vermilion); }

/* a prévia que a lista antiga já tinha: duas capinhas espiando no hover */
.cat-reveal { position: absolute; right: 12%; top: 50%; width: 54px; height: 70px; margin-top: -35px; z-index: 20; pointer-events: none; }
.cat-reveal .pic {
  position: absolute; inset: 0; background: var(--wash-1); border: var(--ink-stroke) solid var(--ink);
  transform: scale(.6); opacity: 0; transition: transform var(--cut), opacity var(--cut), box-shadow var(--cut);
}
.cat-reveal .pic-tone { position: absolute; inset: 0; background-image: radial-gradient(var(--ink) 1.1px, transparent 1.2px); background-size: 6px 6px; opacity: .2; }
.cat-reveal .pic-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 5px; background: var(--paper); border-top: 2px solid var(--ink); color: var(--ink); font-family: var(--font-display); text-transform: uppercase; font-size: 10px; line-height: 1; }
.cat-tag:hover .pic { transform: scale(1); opacity: 1; box-shadow: 4px 4px 0 var(--ink); }
.cat-reveal .pic.back { transition-delay: 120ms; }
.cat-tag:hover .pic.back { transform: scale(1) translate(13px, 14px) rotate(11deg); }
.cat-reveal .pic.front { transition-delay: 60ms; z-index: 2; }

/* o índice: as peças não abrem case — quando estão no ar, linkam pro ar */
.mo-row.is-flat { cursor: default; }
.mo-row.is-live { text-decoration: none; }
.mo-live {
  flex: 0 0 auto; font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: 10px; color: var(--vermilion-ink); margin-right: 12px;
}
.mo-row.is-flat .mo-title { color: var(--wash-4); }
.mo-empty { font-family: var(--font-body); font-size: var(--t-small); color: var(--fg-2); font-style: italic; }

/* ---- PLACEHOLDERS HONESTOS (o screentone puro lia como imagem quebrada) */
.plate-tag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .22em;
  font-size: 10px; color: var(--wash-3); white-space: nowrap; padding: 6px 12px;
  border: var(--ink-hair) solid var(--wash-2); background: var(--paper);
}
.plate.on-ink .plate-tag { color: var(--wash-2); background: var(--wash-4); border-color: var(--wash-3); }
.cert-plate {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 12px; background: var(--paper); text-align: center;
}
.cp-mark { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; line-height: 1.08; color: var(--ink); }
.cp-cap { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .16em; font-size: 9px; color: var(--wash-3); }

/* ---- A FOTO DO POSFÁCIO ---------------------------------------------
   Ilustração de corpo inteiro: `contain` sobre papel, senão cabeça e pé
   saem no corte. P&B em repouso, colore no hover — como a legenda promete. */
.about-photo.has-photo { background: var(--paper); }
.ap-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  filter: grayscale(1) contrast(1.06); transition: filter 420ms var(--cut);
}
/* O .ap-wash é uma chapa de vermilion em multiply sobre a foto inteira:
   servia pro estado sem foto, mas com foto pintava tudo de vermelho no
   hover. Some quando existe foto de verdade. */
.about-photo.has-photo .ap-wash { display: none; }

/* Hover: a cor volta, mas sem chapa por cima. A camiseta já é #C81414 no
   arquivo e a roupa é neutra (saturação 0), então saturate() só morde o
   vermelho e deixa o preto quieto; quem escurece a roupa é o par
   brightness/contrast. Resultado: camiseta vermelha, roupa mais densa. */
.about-photo.has-photo:hover .ap-img,
.about-photo.has-photo:focus-visible .ap-img {
  filter: saturate(1.22) contrast(1.1) brightness(.94);
}
html.ink .about-photo.has-photo { background: var(--wash-1); }

/* ---- responsivo ---------------------------------------------------- */
@media (max-width: 980px) {
  .cl-btn { grid-template-columns: 1fr; }
  .cl-art { border-right: 0; border-bottom: var(--ink-stroke) solid var(--ink); aspect-ratio: 16 / 9; }
  .cat-tag { flex: 1 1 40%; }
  .cat-reveal { display: none; }
}
@media (max-width: 640px) {
  .cl-copy { padding: var(--ma-3); }
  .catnav { flex-direction: column; }
  .cat-tag + .cat-tag { border-left: 0; border-top: var(--ink-hair) solid var(--ink); }
  .mk { height: 40px; padding: 0 11px; }
  .mk-logo { height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  /* a faixa para e vira grade: nenhuma marca some */
  .mk-track { animation: none !important; width: 100%; flex-wrap: wrap; }
  .mk-dup { display: none; }
  .mk-viewport { -webkit-mask-image: none; mask-image: none; }
  .cl-btn, .cl-img { transition: none !important; }
}

/* a coluna direita do diferencial hospeda uma trilha max-content: sem
   min-width:0 o grid item se recusa a encolher e estoura a linha */
.dif-right { min-width: 0; }
.eq-card.is-flat { cursor: default; opacity: .72; }

/* índice: o cap agora é a categoria (o que o filtro acima controla), então
   ganha largura fixa pra os títulos alinharem numa coluna só */
.outras .sec-head { margin-top: 0; }
.outras .mo-cap { min-width: 96px; text-transform: uppercase; font-size: 10px; letter-spacing: .1em; }
/* hover só onde há para onde ir */
.mo-row.is-flat:hover .mo-title { color: var(--wash-4); }
.mo-row.is-flat:hover .mo-dots { border-color: var(--wash-2); }
.mo-row.is-flat:hover .mo-page { color: var(--wash-3); }

/* =====================================================================
   v3.1 — correções de acabamento
   ===================================================================== */

/* ---- o rodapé é o último filho de cada view: o padding-bottom da própria
   view virava uma faixa de papel logo abaixo da tinta (160px no posfácio,
   104px nas demais). O respiro antes do rodapé já vem do .v-foot. ---- */
.posfacio, .processo, .rapido, .empresa { padding-bottom: 0; }

/* ---- LOGO DE EMPRESA: tinta sobre papel, papel sobre tinta -----------
   Os arquivos agora são transparentes, então não existe mais chapa clara
   recortada por trás da marca em nenhum dos dois fundos. */
.co-logo-img { opacity: .88; }
.co-logo-img.on-ink { opacity: .95; }
.emp-logo .co-logo-img { max-width: 66%; max-height: 56%; }
.emp-wm { filter: none; }   /* já é papel: brightness() só lavava a marca */

/* a logo entra no card da trajetória, monocromática e discreta */
.comp-logo { display: flex; align-items: center; height: 30px; margin-top: 12px; }
.comp-logo .co-logo-img { max-height: 30px; max-width: 118px; width: auto; object-fit: contain; }
.comp-logo .comp-logo-mark {
  font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; font-size: 13px; color: var(--wash-3);
}
.comp.atual .comp-logo .comp-logo-mark { color: var(--wash-2); }
.comp-name { margin-top: 8px; }

/* wordmark de fallback nos outros slots (TT&T não tem arquivo) */
.qsc-logo-mark, .emp-logo-mark { display: block; }

/* ---- ficha do capítulo: subtítulo + metadado, uma linha cada -------- */
.cover-sub { font-family: var(--font-body); font-size: var(--t-body); color: var(--wash-2); margin-top: 6px; }
.cover-ficha { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: var(--ma-3);
  font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase;
  letter-spacing: .14em; font-size: 11px; color: var(--wash-2); }
.cover-ficha span + span::before { content: "·"; margin-right: 18px; color: var(--wash-3); }

/* ---- COMO INVESTIGUEI: o painel dos achados ------------------------- */
.beat .panel.art.inv { background: var(--paper); border: var(--ink-stroke-hi) solid var(--ink);
  display: flex; flex-direction: column; justify-content: center; padding: var(--ma-4); position: relative; overflow: hidden; }
.inv-kanji { position: absolute; right: -2%; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl;
  font-family: 'Reggae One', var(--font-sfx), sans-serif; font-size: clamp(5rem, 12vw, 9rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px var(--wash-1); pointer-events: none; user-select: none; }
.inv-k { position: relative; z-index: 2; font-family: var(--font-condensed); font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: var(--vermilion-ink); margin-bottom: var(--ma-3); }
.inv-list { position: relative; z-index: 2; list-style: none; counter-reset: inv; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--ma-3); }
.inv-list li { counter-increment: inv; position: relative; padding-left: 42px;
  font-family: var(--font-body); font-size: var(--t-body); line-height: 1.5; color: var(--wash-4); }
.inv-list li::before { content: counter(inv, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-family: var(--font-editorial); font-weight: 700; font-size: 15px; color: var(--wash-3); letter-spacing: .06em; }

/* ---- RESULTADO: o que ainda vai ser medido -------------------------- */
.res-lista { margin-top: var(--ma-3); border-top: var(--ink-hair) solid var(--wash-1); padding-top: var(--ma-3); }
.rl-k { font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
  font-size: 10.5px; color: var(--vermilion-ink); margin-bottom: 10px; }
.res-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.res-lista li { position: relative; padding-left: 18px; font-family: var(--font-body);
  font-size: var(--t-small); line-height: 1.45; color: var(--wash-4); }
.res-lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 2px; background: var(--wash-3); }

/* ---- O QUE APRENDI: o fecho, em coluna de leitura ------------------- */
.aprendi { border-top: var(--ink-stroke) solid var(--ink); padding-top: var(--ma-4); margin-top: var(--ma-4); }
.apr-p { font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.55; max-width: 62ch; color: var(--fg); }
.apr-p + .apr-p { margin-top: var(--ma-3); }

/* ---- ÍNDICE: destino explícito + descrição curta -------------------- */
.mo-row { flex-direction: column; align-items: stretch; gap: 4px; padding: 13px 2px; }
.mo-top { display: flex; align-items: baseline; gap: 12px; width: 100%; }
.mo-desc { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.4; color: var(--wash-3); padding-left: 96px; }
.mo-destino { flex: 0 0 auto; font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: 10px; margin-right: 10px; }
.mo-destino.is-ar { color: var(--vermilion-ink); }
.mo-destino.is-proto { color: var(--wash-3); }
.mo-destino.is-figma { color: var(--wash-3); }
.mo-row:hover .mo-destino { color: var(--vermilion); }
@media (max-width: 640px) { .mo-desc { padding-left: 0; } }

/* ---- ATOGAKI: seções da nota do autor ------------------------------- */
.pos-sec { margin-top: var(--ma-5); }
.pos-sec .pos-k { margin-bottom: var(--ma-2); }
/* link dentro do corpo do texto: sublinhado de tinta que vira selo no hover */
.pos-link { border-bottom: 2px solid var(--vermilion); transition: color var(--cut), border-color var(--cut); }
.pos-link:hover { color: var(--vermilion); }
.pos-link .ext { font-size: .8em; margin-left: 2px; }

/* =====================================================================
   ANTES E DEPOIS — a cortina arrastável
   O beat de um redesign: a mesma dobra nos dois estados, a divisa na mão
   de quem lê. A imagem de baixo é dimensionada por altura (width:auto),
   então ela ocupa a largura da caixa mesmo dentro do recorte parcial.
   ===================================================================== */
.ad-wrap { margin: 0; }
.ad-box {
  --ad-pos: 100%;
  position: relative; overflow: hidden; cursor: ew-resize; touch-action: pan-y;
  border: var(--ink-stroke) solid var(--ink); background: var(--wash-1);
  box-shadow: 10px 10px 0 var(--ink); user-select: none;
}
.ad-img { display: block; width: 100%; }
.ad-clip { position: absolute; inset: 0; width: var(--ad-pos); overflow: hidden; will-change: width; }
.ad-clip .ad-antes { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; }
/* sem arraste, a cortina corre uma vez; durante o arraste ela acompanha o dedo */
.ad-box:not(.arrastando) .ad-clip { transition: width 620ms cubic-bezier(.72,.02,.28,1); }

.ad-linha {
  position: absolute; top: 0; bottom: 0; left: var(--ad-pos); width: var(--ink-stroke);
  background: var(--vermilion); transform: translateX(-50%); pointer-events: none; z-index: 4;
}
.ad-box:not(.arrastando) .ad-linha { transition: left 620ms cubic-bezier(.72,.02,.28,1); }
.ad-punho {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--vermilion); color: var(--paper); border: var(--ink-stroke) solid var(--ink);
  font-family: var(--font-display); font-size: 19px; line-height: 1;
  box-shadow: 3px 3px 0 var(--ink);
}
.ad-tag {
  position: absolute; top: 0; z-index: 5; pointer-events: none; transition: opacity var(--cut);
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; padding: 7px 13px; background: var(--ink); color: var(--paper);
}
.ad-tag-a { left: 0; }
.ad-tag-d { right: 0; background: var(--vermilion-ink); }

/* o range é o controle real (teclado + leitor de tela); a divisa é a pele dele */
.ad-range {
  position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.ad-range:focus-visible { opacity: 0; }
.ad-box:has(.ad-range:focus-visible) { outline: 3px solid var(--vermilion); outline-offset: 4px; }

.ad-legenda {
  font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5;
  color: var(--fg-2); margin-top: var(--ma-3); max-width: 62ch;
}
html.ink .ad-tag { background: var(--paper); color: var(--ink); }
html.ink .ad-tag-d { background: var(--vermilion); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .ad-box .ad-clip, .ad-box .ad-linha { transition: none !important; }
}
@media (max-width: 640px) {
  .ad-punho { width: 38px; height: 38px; font-size: 16px; }
  .ad-tag { font-size: 9.5px; padding: 5px 9px; }
}

/* =====================================================================
   AS DECISÕES — sequência de beats, não grade de cards
   A grade de 3 colunas fazia toda decisão pesar igual e lia como lista de
   features. Em sequência, o número conduz e a razão tem espaço de leitura.
   ===================================================================== */
.dec-seq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dec-beat {
  position: relative; display: grid; grid-template-columns: 132px 1fr; gap: var(--gutter);
  align-items: start; padding: var(--ma-4) 0;
  border-top: var(--ink-hair) solid var(--wash-1);
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--cut), transform var(--cut);
}
.dec-beat.in { opacity: 1; transform: none; }
.dec-beat:first-child { border-top: var(--ink-stroke) solid var(--ink); }
.dec-beat:last-child { border-bottom: var(--ink-stroke) solid var(--ink); }
/* alternância: nos pares o número vai pra direita e o texto encosta à esquerda */
.dec-beat.par { grid-template-columns: 1fr 132px; }
.dec-beat.par .db-n { grid-column: 2; grid-row: 1; text-align: right; }
.dec-beat.par .db-copy { grid-column: 1; grid-row: 1; }

.db-n {
  font-family: var(--font-editorial); font-weight: 700; line-height: .82;
  font-size: clamp(3rem, 6vw, 5.2rem); color: var(--wash-2);
  transition: color var(--cut);
}
.dec-beat:hover .db-n { color: var(--vermilion); }
.db-copy { min-width: 0; max-width: 68ch; }
.db-d {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.1; margin: 0 0 12px;
}
.db-r { font-family: var(--font-body); font-size: var(--t-lead); line-height: 1.55; color: var(--wash-4); margin: 0; }
.db-k {
  display: block; font-style: normal; font-family: var(--font-condensed); font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px;
  color: var(--vermilion-ink); margin-bottom: 6px;
}
/* um respiro de screentone atrás do número, para o beat não ser só texto */
.db-tone {
  position: absolute; top: var(--ma-3); left: 0; width: 108px; height: 108px; z-index: -1;
  opacity: .13; pointer-events: none;
  background-image: radial-gradient(var(--ink) 1.1px, transparent 1.2px); background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(circle at 30% 30%, #000, transparent 72%);
          mask-image: radial-gradient(circle at 30% 30%, #000, transparent 72%);
}
.dec-beat.par .db-tone { left: auto; right: 0; }

@media (max-width: 760px) {
  .dec-beat, .dec-beat.par { grid-template-columns: 1fr; gap: 8px; }
  .dec-beat.par .db-n, .dec-beat.par .db-copy { grid-column: 1; }
  .dec-beat.par .db-n { grid-row: 1; text-align: left; }
  .dec-beat.par .db-copy { grid-row: 2; }
  .db-n { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dec-beat { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =====================================================================
   VOCABULÁRIO — o léxico do produto como prova
   Quando a decisão do case é fixar uma linguagem, o vocabulário na tela
   vale mais que um print da tabela. Cada linha acende em sequência.
   ===================================================================== */
.voc { }
.voc-list { list-style: none; margin: 0; padding: 0; border-top: var(--ink-stroke) solid var(--ink); }
.voc-row {
  display: grid; grid-template-columns: 18px minmax(0, 15ch) 1fr; align-items: baseline; gap: 0 18px;
  padding: 17px 4px; border-bottom: var(--ink-hair) solid var(--wash-1);
  opacity: .28; transform: translateX(-8px);
  transition: opacity var(--cut), transform var(--cut);
}
.voc-row.on { opacity: 1; transform: none; }
.voc-marca {
  width: 12px; height: 12px; background: var(--wash-2); align-self: center;
  transition: background var(--cut), transform var(--cut);
}
.voc-row.on .voc-marca { background: var(--vermilion); }
.voc-row:hover .voc-marca { transform: rotate(45deg); }
.voc-nome {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem); line-height: 1.1;
}
.voc-sep { display: none; }
.voc-def { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.5; color: var(--wash-4); }
.voc-nota {
  font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5;
  color: var(--fg-2); margin-top: var(--ma-3); max-width: 64ch;
}
/* sem prints, a coluna de texto da solução ocupa a largura inteira */
.sol-vazio { display: none; }
.beat > .c5.text-col:only-child, .beat .c5.text-col:has(+ .sol-vazio) { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .voc-row { grid-template-columns: 14px 1fr; gap: 4px 14px; }
  .voc-def { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .voc-row { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =====================================================================
   REVEAL MASK — 見開き · o quadro que se entinta
   Os capítulos da home em tela cheia. A máscara é a mesma ideia do
   .brush (gradiente + transition no mask-size), girada pro eixo Y:
   a tinta assenta de baixo pra cima sobre a arte.

   Os quadros ALTERNAM de lado (.flip nos ímpares) — página dupla de
   mangá vira a leitura a cada virada; cinco quadros do mesmo lado viram
   parede. O vão entre arte e texto é largo de propósito: o texto respira
   longe da imagem em vez de encostar nela.

   As transições moram no estado BASE, não no .in — assim o capítulo
   anima na ida E na volta, re-entintando toda vez que entra em cena.
   ===================================================================== */
.rvm-list { list-style: none; margin: var(--ma-5) 0 var(--ma-6); padding: 0; }

.rvm { display: block; border-top: var(--ink-hair) solid var(--wash-1); }
.rvm:first-child { border-top: 0; }

.rvm-btn {
  -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left;
  width: 100%; background: transparent; border: 0;
  padding: var(--ma-5) var(--gutter);
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 132px); align-items: center;
  max-width: 1500px; margin: 0 auto;
}
.rvm-btn:focus-visible { outline: 3px solid var(--vermilion); outline-offset: -6px; }

/* a virada: nos ímpares a arte vai pra direita e o texto pra esquerda */
.rvm.flip .rvm-art  { grid-column: 2; grid-row: 1; }
.rvm.flip .rvm-copy { grid-column: 1; grid-row: 1; }

/* ---- o quadro ---- */
.rvm-art { position: relative; display: flex; align-items: center; justify-content: center; }
/* a ALTURA manda: o quadro nunca passa da viewport, então o selo CAP. no
   topo e a sombra embaixo cabem sempre. A largura sai da proporção 4:5. */
.rvm-frame {
  position: relative; display: block; overflow: hidden; z-index: 1;
  aspect-ratio: 4 / 5; height: min(72svh, 720px); width: auto; max-width: 100%;
  background: var(--wash-1);
  border: var(--ink-stroke) solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
  transition: transform var(--cut), box-shadow var(--cut);
}
/* O hover tem que vir do ELEMENTO, não da seção: .rvm-btn ocupa 100vh,
   então .rvm-btn:hover fica ligado o tempo todo e o quadro vivia levantado
   e o botão vivia vermelho. Agora só reage sob o mouse de verdade. */
.rvm-art:hover .rvm-frame { transform: translate(-5px, -5px); box-shadow: 19px 19px 0 var(--ink); }

/* a máscara: fechada embaixo, abre pra cima quando o quadro entra em cena */
.rvm-mask {
  position: absolute; inset: 0; display: block;
  -webkit-mask-image: linear-gradient(0deg, #000 0 58%, rgba(0,0,0,.35) 80%, transparent 100%);
          mask-image: linear-gradient(0deg, #000 0 58%, rgba(0,0,0,.35) 80%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center bottom; mask-position: center bottom;
  -webkit-mask-size: 300% 0%; mask-size: 300% 0%;
  transition: -webkit-mask-size 760ms cubic-bezier(.72,.02,.28,1),
                      mask-size 760ms cubic-bezier(.72,.02,.28,1);
}
.rvm.in .rvm-mask { -webkit-mask-size: 300% 235%; mask-size: 300% 235%; }

/* a arte assenta junto: levemente adiantada -> no lugar. Colorida sempre:
   é o trabalho, não a lembrança dele. */
.rvm-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transform: scale(1.06); transition: transform 900ms var(--cut);
}
.rvm.in .rvm-img { transform: scale(1); }
.rvm-art:hover .rvm-img { transform: scale(1.03); }
.rvm-plate { position: absolute; inset: 0; }

/* ---- BrandPlate: a marca sobre a cor dela ----
   Um só desenho em três lugares: capa do capítulo na home (.bp-rvm),
   miniatura do próximo capítulo (.bp-thumb) e card de empresa (.bp-qsc).
   A retícula impede que vire bloco chapado de cor num volume que é tinta
   sobre papel. */
.brandplate {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bp-tone {
  position: absolute; inset: -12%;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.7px);
  background-size: 13px 13px; opacity: .3; transform: rotate(-12deg);
}
.bp-logo {
  position: relative; z-index: 1;
  width: min(52%, 260px); height: auto; object-fit: contain;
  transform: scale(.94); transition: transform 900ms var(--cut);
}
.rvm.in .bp-logo { transform: scale(1); }
.rvm-art:hover .bp-logo { transform: scale(1.04); }

/* miniatura do próximo capítulo: caixa pequena, retícula mais fina.
   Especificidade: .nc-thumb img (width/height 100% + object-fit:cover) pega
   qualquer <img> dentro do thumb e esticava a marca até cortá-la. Precisa
   do seletor com o pai pra ganhar. */
.nc-thumb .bp-logo, .bp-thumb .bp-logo {
  width: 72%; height: auto; inset: auto; object-fit: contain; transform: none;
}
.bp-thumb .bp-tone { background-size: 7px 7px; opacity: .26; }

/* card de empresa: a marca preenche mais, sem animação de entrada */
.qsc-logo .bp-logo, .bp-qsc .bp-logo {
  width: 66%; height: auto; inset: auto; object-fit: contain; transform: none;
}
.bp-qsc .bp-tone { background-size: 9px 9px; opacity: .24; }

.rvm-cap {
  position: absolute; top: 0; left: 0; z-index: 3;
  font-family: var(--font-condensed); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; font-size: 12px;
  background: var(--ink); color: var(--paper); padding: 9px 15px;
}
.rvm-art:hover .rvm-cap { background: var(--vermilion-ink); }

/* A onomatopeia. Sai por trás da quina de baixo, no vão entre quadro e
   texto — som escapando do painel. Atrás do quadro (z-index 0 contra o 1
   do frame), nunca negativo: o .post-hero é contexto de empilhamento com
   fundo próprio e engoliria. Troca de lado junto com o quadro. */
.rvm-sfx {
  position: absolute; z-index: 0; pointer-events: none; white-space: nowrap;
  left: 100%; bottom: 0; margin-left: -.42em;
  font-family: var(--font-sfx); font-size: clamp(3.4rem, 7.5vw, 8rem);
  line-height: .78; color: var(--wash-2); opacity: 0;
  transform: translate(-14px, 24px) rotate(-5deg);
  transition: opacity 900ms var(--cut) 240ms, transform 900ms var(--cut) 240ms;
}
.rvm.in .rvm-sfx { opacity: .9; transform: translate(0, 0) rotate(-5deg); }
.rvm.flip .rvm-sfx {
  left: auto; right: 100%; margin-left: 0; margin-right: -.42em;
  transform: translate(14px, 24px) rotate(5deg);
}
.rvm.flip.in .rvm-sfx { transform: translate(0, 0) rotate(5deg); }

/* ---- a cópia ---- */
.rvm-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }
/* entra deslizando do lado em que ela está: da esquerda no par, da
   direita no ímpar. Transição no estado base -> anima na volta também. */
.rvm-copy > * {
  opacity: 0; transform: translate(26px, 10px);
  transition: opacity 620ms var(--cut), transform 620ms var(--cut);
}
.rvm.flip .rvm-copy > * { transform: translate(-26px, 10px); }
.rvm.in .rvm-copy > * { opacity: 1; transform: translate(0, 0); }
.rvm.in .rvm-copy > *:nth-child(1) { transition-delay: 240ms; }
.rvm.in .rvm-copy > *:nth-child(2) { transition-delay: 330ms; }
.rvm.in .rvm-copy > *:nth-child(3) { transition-delay: 420ms; }
.rvm.in .rvm-copy > *:nth-child(4) { transition-delay: 510ms; }
.rvm.in .rvm-copy > *:nth-child(5) { transition-delay: 600ms; }

/* número e domínio na mesma linha, o número grande como carimbo */
.rvm-head { display: flex; align-items: baseline; gap: 18px; }
.rvm-num {
  font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: .8; color: var(--wash-2); letter-spacing: -.02em;
}
.rvm-dom {
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .22em; font-size: 13px; color: var(--fg-2);
  border-left: var(--ink-hair) solid var(--wash-2); padding-left: 18px;
}
.rvm-t {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(3rem, 6.6vw, 6.2rem); line-height: .98; letter-spacing: -.01em;
}
.rvm-ctx {
  font-family: var(--font-body); font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1.42; color: var(--wash-4); max-width: 30ch;
}
.rvm-res {
  font-family: var(--font-body); font-size: clamp(1rem, 1.1vw, 1.12rem); line-height: 1.5;
  color: var(--fg-2); border-top: var(--ink-hair) solid var(--wash-2);
  padding-top: 16px; max-width: 38ch;
}
.rvm-res i { font-style: normal; font-family: var(--font-condensed); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: var(--vermilion-ink);
  display: block; margin-bottom: 6px; }

/* botão de verdade, com a moldura de tinta da casa — não um link solto */
.rvm-go {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 8px;
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; font-size: 14px; color: var(--ink);
  background: var(--paper); border: var(--ink-stroke) solid var(--ink);
  padding: 15px 26px; box-shadow: 5px 5px 0 var(--ink);
  transition: transform var(--cut), box-shadow var(--cut), background var(--cut), color var(--cut);
}
.rvm-go .arr { display: inline-block; transition: transform var(--cut); }
/* teclado: quem chega por Tab não tem mouse, então o foco no botão pinta o
   .rvm-go do mesmo jeito que o hover pintaria */
.rvm-btn:focus-visible .rvm-go,
.rvm-go:hover {
  background: var(--vermilion-ink); color: var(--paper); border-color: var(--vermilion-ink);
  transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink);
}
.rvm-go:hover .arr { transform: translateX(7px); }

/* ---- empilha no estreito: o quadro por cima, a cópia embaixo ---- */
@media (max-width: 900px) {
  .rvm-btn {
    grid-template-columns: 1fr; min-height: auto;
    padding: var(--ma-5) var(--gutter); gap: var(--ma-4);
  }
  /* sem alternância no estreito: uma coluna só, a virada não existe */
  .rvm.flip .rvm-art, .rvm.flip .rvm-copy { grid-column: 1; grid-row: auto; }
  /* no estreito quem manda é a LARGURA. Sem zerar a altura do desktop,
     a proporção 16/10 calculava 971px de largura numa tela de 390 e
     abria scroll horizontal na página inteira. */
  .rvm-frame { aspect-ratio: 16 / 10; height: auto; width: 100%; }
  .rvm-sfx { display: none; }
  .rvm-copy > *, .rvm.flip .rvm-copy > * { transform: translate(0, 14px); }
  .rvm-num { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .rvm-t { font-size: clamp(2.4rem, 10vw, 3.6rem); }
  .rvm-go { width: 100%; justify-content: center; }
}

/* ---- reduced motion: a máscara já nasce aberta, nada anima ---- */
@media (prefers-reduced-motion: reduce) {
  .rvm-mask, .rvm.in .rvm-mask {
    -webkit-mask-image: none !important; mask-image: none !important;
    -webkit-mask-size: auto !important; mask-size: auto !important;
    transition: none !important;
  }
  .rvm-img, .rvm.in .rvm-img,
  .bp-logo, .rvm.in .bp-logo,
  .rvm-sfx, .rvm.in .rvm-sfx, .rvm.flip .rvm-sfx, .rvm.flip.in .rvm-sfx,
  .rvm-copy > *, .rvm.in .rvm-copy > *, .rvm.flip .rvm-copy > * {
    opacity: 1 !important; transform: none !important;
    transition: none !important; transition-delay: 0s !important;
  }
  .rvm-frame, .rvm-art:hover .rvm-frame, .rvm-go { transition: none !important; }
}

/* =====================================================================
   O QUE DESENVOLVI AQUI — as habilidades da página de empresa
   Cada habilidade é um painel de mangá numerado. A aba do número sangra
   pra fora da moldura, como a numeração de quadro; a retícula fica na
   quina de baixo. Grade fluida: cabe 4, 5 ou 6 sem regra nova.
   ===================================================================== */
.emp-skills { margin: var(--ma-6) 0 0; }
.esk-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: var(--ma-3);
}
.esk {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 9px;
  background: var(--paper); border: var(--ink-stroke) solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: var(--ma-3) var(--ma-3) calc(var(--ma-3) + 4px);
  transition: transform var(--cut), box-shadow var(--cut);
}
.esk:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--ink); }

/* o número, carimbado no canto como numeração de quadro */
.esk-n {
  position: absolute; top: 0; right: 0; z-index: 2;
  font-family: var(--font-display); font-size: 13px; letter-spacing: .08em;
  background: var(--ink); color: var(--paper); padding: 5px 10px;
}
.esk:hover .esk-n { background: var(--vermilion-ink); }

/* retícula na quina de baixo, girada, cortada pela moldura */
.esk-tone {
  position: absolute; right: -22px; bottom: -22px; width: 118px; height: 118px;
  background-image: radial-gradient(var(--wash-2) 1.5px, transparent 1.6px);
  background-size: 9px 9px; transform: rotate(-14deg); opacity: .55;
  pointer-events: none;
}
.esk-k {
  position: relative; z-index: 1;
  font-family: var(--font-condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; font-size: 15px; line-height: 1.2; padding-right: 42px;
}
.esk-p {
  position: relative; z-index: 1;
  font-family: var(--font-body); font-size: var(--t-small); line-height: 1.5;
  color: var(--wash-4);
}
.esk-k::after {
  content: ""; display: block; width: 34px; height: var(--ink-stroke);
  background: var(--vermilion-ink); margin-top: 10px;
}

@media (max-width: 720px) {
  .esk-grid { grid-template-columns: 1fr; gap: var(--ma-2, 14px); }
  .esk { box-shadow: 4px 4px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .esk, .esk:hover { transition: none !important; transform: none !important; }
}

/* a grade de habilidades vem logo antes: sem folga, o Brush do próximo
   título caía por cima dos cards da última linha */
.emp-skills + .emp-quick { margin-top: var(--ma-6); }
.emp-skills { margin-bottom: var(--ma-5); }

/* capa do capítulo: a marca ocupa mais espaço que na miniatura, e o painel
   já tem 4:5 próprio (.cover-art), então basta a logo respirar no centro */
.cover-art .bp-logo, .bp-cover .bp-logo {
  width: 58%; height: auto; inset: auto; object-fit: contain; transform: none;
}
.bp-cover .bp-tone { background-size: 15px 15px; opacity: .32; }