/* ============================================================
   INGRA BARRETO — sistema de design
   Paper / soft-black / lima elétrico. Editorial, não corporativo.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Kalam:wght@400;700&display=swap');

:root{
  --paper: #FAFAF8;
  --paper-dim: #F1F0EA;
  --ink: #121212;
  --ink-soft: #4A4A45;
  --muted: #8A8A82;
  --line: #DEDCD3;
  --accent: #E6FF02;
  --accent-ink: #1a1e00;
  --dark: #121212;
  --dark-paper: #1B1B18;

  --font-display: 'Geist', -apple-system, sans-serif;
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--accent); color:var(--accent-ink); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:650;
  letter-spacing:-0.02em;
  line-height:1.08;
  margin:0;
}
p{ margin:0; }

.mono{
  font-family:var(--font-mono);
  letter-spacing:0.01em;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:0.5em;
}
.eyebrow::before{
  content:"";
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  flex:none;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ---------- intro splash (home only) ---------- */
.intro-spacer{ height:100vh; position:relative; }
.intro-splash{
  position:fixed; inset:0; z-index:40;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--dark);
  color:var(--paper);
  will-change:opacity, transform;
}
.intro-splash .eyebrow{ margin-bottom:1rem; color:#8f8f88; }
.intro-splash h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.4rem,8.5vw,5.6rem);
  letter-spacing:-0.02em;
  text-align:center;
  color:var(--accent);
}
.intro-emoji{
  display:inline-block;
  margin-left:0.25em;
  opacity:0;
  animation:letterFall .55s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:.78s;
}
.letter-drop{
  display:inline-block;
  opacity:0;
  transform:translateY(-60px) rotate(-8deg);
  animation:letterFall .55s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes letterFall{
  to{ opacity:1; transform:translateY(0) rotate(0deg); }
}
.intro-hint{
  position:absolute; bottom:2.6rem;
  font-family:var(--font-mono); font-size:0.78rem;
  color:#8f8f88;
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
}
.intro-hint span{ animation:hintbounce 1.6s ease-in-out infinite; }
.intro-corner{
  position:absolute; bottom:2.6rem; right:2.6rem;
  font-family:var(--font-mono); font-size:0.78rem;
  color:#8f8f88;
  max-width:20ch; text-align:right;
}
@keyframes hintbounce{
  0%,100%{ transform:translateY(0); opacity:0.5; }
  50%{ transform:translateY(6px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .intro-hint span{ animation:none; }
  .letter-drop, .intro-emoji{ animation:none; opacity:1; transform:none; }
}
@media(max-width:640px){
  .intro-corner{ position:static; margin-top:1.4rem; text-align:center; max-width:none; }
}

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.6rem;
  transition:opacity .35s ease, visibility .35s ease;
}
.loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-bars{ display:flex; align-items:flex-end; gap:6px; height:44px; }
.loader-bars span{
  width:7px; border-radius:2px;
  background:var(--accent);
  animation:barpulse 1s ease-in-out infinite;
}
.loader-bars span:nth-child(1){ height:10px; animation-delay:0s; }
.loader-bars span:nth-child(2){ height:18px; animation-delay:.08s; }
.loader-bars span:nth-child(3){ height:28px; animation-delay:.16s; }
.loader-bars span:nth-child(4){ height:44px; animation-delay:.24s; }
.loader-bars span:nth-child(5){ height:24px; animation-delay:.32s; }
.loader-bars span:nth-child(6){ height:34px; animation-delay:.4s; }
.loader-bars span:nth-child(7){ height:14px; animation-delay:.48s; }
@keyframes barpulse{
  0%, 100%{ transform:scaleY(0.4); opacity:0.55; }
  50%{ transform:scaleY(1); opacity:1; }
}
.loader-msg{
  font-family:var(--font-mono); font-size:0.85rem;
  color:var(--ink-soft);
  display:flex; align-items:center; gap:0.6em;
}
.loader-msg::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
@media (prefers-reduced-motion: reduce){
  .loader-bars span{ animation:none; transform:scaleY(0.7); }
  .loader{ transition:none; }
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,248,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.86rem;
  letter-spacing:0.03em;
  text-decoration:none;
  display:flex; align-items:center; gap:0.6em;
}
.brand span{ color:var(--muted); font-weight:400; }
nav.main-nav{
  display:flex; align-items:center; gap:clamp(0.9rem,2vw,1.9rem);
}
nav.main-nav a{
  text-decoration:none;
  font-size:0.92rem;
  color:var(--ink-soft);
  position:relative;
  padding:4px 0;
  overflow:hidden;
}
nav.main-nav a:hover{ color:var(--ink); }
nav.main-nav a.active{ color:var(--ink); }
nav.main-nav a::before{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:100%; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .18s cubic-bezier(.3,.8,.3,1.4);
}
nav.main-nav a:hover::before{ transform:scaleX(1); }
nav.main-nav a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--accent);
}
.nav-cta{
  font-family:var(--font-mono) !important;
  font-size:0.78rem !important;
  border:1px solid var(--ink);
  padding:8px 14px !important;
  border-radius:100px;
  background:var(--ink);
  color:var(--paper) !important;
  transition:background .1s ease, color .1s ease;
}
.nav-cta:active{ background:var(--accent); color:var(--accent-ink) !important; border-color:var(--accent); }
.nav-toggle{ display:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5em;
  font-family:var(--font-body);
  font-size:0.96rem;
  font-weight:600;
  text-decoration:none;
  padding:13px 26px;
  border-radius:100px;
  border:1px solid var(--ink);
  transition:transform .12s ease, background .1s ease, color .1s ease, box-shadow .1s ease;
}
.btn:active{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:var(--accent-ink) !important;
  transform:translateY(0);
}
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ transform:translateY(-1px); background:#000; }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ transform:translateY(-1px); background:var(--ink); color:var(--paper); }
.btn-accent{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn-accent:hover{ transform:translateY(-1px); background:#d1eb00; }

/* ---------- hero ---------- */
.hero{
  padding:clamp(3rem,8vw,6.5rem) 0 clamp(2.5rem,6vw,4rem);
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.hero-photo{
  width:196px; height:196px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--paper);
  padding:6px;
  flex:none;
}
.hero-photo img{
  width:100%; height:100%; object-fit:cover;
  border-radius:50%;
  filter:grayscale(1) contrast(1.05);
}
.hero-name{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:0.02em;
  display:flex; align-items:center; gap:0.6em;
  margin-bottom:0.9rem;
}
.hero-name::before{
  content:"";
  width:9px; height:9px;
  background:var(--accent);
  flex:none;
}
.hero h1{
  font-size:clamp(2.4rem, 6vw, 4.2rem);
  margin-top:0.5rem;
}
.hero .tagline{
  font-size:clamp(1.15rem,2.4vw,1.55rem);
  color:var(--ink-soft);
  max-width:36ch;
  margin-top:1.1rem;
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-0.01em;
}
.hero .desc{
  margin-top:1.3rem;
  max-width:56ch;
  color:var(--ink-soft);
  font-size:1.02rem;
}
.hero-actions{
  margin-top:2rem;
  display:flex; gap:0.9rem; flex-wrap:wrap;
}

/* ---------- generic section ---------- */
section{ padding:clamp(3rem,7vw,5.5rem) 0; }
section.border-b{ border-bottom:1px solid var(--line); }
section.dark{ background:var(--dark); color:var(--paper); }
section.dark .eyebrow{ color:#8f8f88; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(1.6rem,3.4vw,2.3rem); margin-top:0.5rem; max-width:22ch;}
.section-head .lede{ max-width:38ch; color:var(--ink-soft); font-size:0.98rem; }
section.dark .section-head .lede{ color:#b9b9b2; }

/* ---------- four questions ---------- */
.qgrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.qcard{
  background:var(--paper);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.qcard .num{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--accent-ink);
  background:var(--accent);
  display:inline-block;
  padding:2px 8px;
  border-radius:4px;
  margin-bottom:1rem;
}
.qcard h3{ font-size:1.3rem; margin-bottom:0.7rem; }
.qcard p{ color:var(--ink-soft); font-size:0.97rem; }

/* ---------- principles / como trabalho ---------- */
.pgrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,3vw,2rem);
}
.pcard{ border-top:2px solid var(--ink); padding-top:1.2rem; }
.pcard .mono{ font-size:0.78rem; color:var(--muted); }
.pcard h3{ font-size:1.35rem; margin:0.5rem 0 0.6rem; }
.pcard p{ color:var(--ink-soft); font-size:0.97rem; }

/* ---------- framework strip (6P) ---------- */
.sixp{
  display:flex; flex-wrap:wrap;
  align-items:stretch;
  gap:0;
}
.sixp .step{
  flex:1 1 140px;
  padding:1.5rem 1.3rem;
  border:1px solid var(--line);
  background:var(--paper-dim);
  position:relative;
  margin-right:26px;
  margin-bottom:26px;
  transition:transform .16s cubic-bezier(.3,.8,.3,1.4), background .16s ease;
  cursor:pointer;
}
.sixp .step:hover{
  background:var(--accent);
  transform:translateY(-4px);
}
.sixp .step:hover .tag{ color:var(--accent-ink); opacity:0.7; }
.sixp .step:hover .label{ color:var(--accent-ink); }
.sixp .step .tag{
  font-family:var(--font-mono);
  font-size:0.68rem;
  color:var(--muted);
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.sixp .step .label{ font-family:var(--font-display); font-weight:650; font-size:1.05rem; margin-top:0.35rem; }
.sixp .step .note{ font-size:0.84rem; color:var(--ink-soft); margin-top:0.5rem; display:none; }
.sixp .step.expanded .note{ display:block; }
.sixp .step::after{
  content:"→";
  position:absolute; right:-26px; top:50%;
  transform:translateY(-50%);
  width:26px; text-align:center;
  color:var(--ink); font-weight:800; font-size:1.15rem;
  z-index:2; pointer-events:none;
}
.sixp .step:last-child::after{ display:none; }
@media(max-width:900px){
  .sixp .step{ margin-right:0; }
  .sixp .step::after{ content:"↓"; right:auto; left:50%; top:auto; bottom:-26px; transform:translateX(-50%); width:auto; }
}

/* ---------- project cards ---------- */
.pj-list{ display:flex; flex-direction:column; }
.pj-row{
  display:grid;
  grid-template-columns: 90px 1.3fr 1fr auto;
  gap:1.5rem;
  align-items:center;
  padding:1.7rem 0;
  border-top:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
  transition:background .15s ease, padding-left .15s ease;
}
.pj-list a.pj-row:last-child{ border-bottom:1px solid var(--line); }
.pj-row:hover{ background:var(--paper-dim); padding-left:0.6rem; }
.pj-row .yr{ font-family:var(--font-mono); color:var(--muted); font-size:0.85rem; }
.pj-row h3{ font-size:1.28rem; font-weight:650; }
.pj-row .q{ font-size:0.9rem; color:var(--ink-soft); font-style:italic; }
.pj-row .arrow{ font-size:1.3rem; font-weight:800; color:var(--ink); transition:transform .15s cubic-bezier(.3,.8,.3,1.4); }
.pj-row:hover .arrow{ transform:translateX(8px); color:var(--ink); }
.pj-row .tags{ display:none; }

/* ---------- footer ---------- */
footer{
  background:var(--dark);
  color:var(--paper);
  padding:clamp(2.6rem,6vw,4rem) 0 2rem;
}
.foot-grid{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:2.5rem;
  padding-bottom:2.2rem; border-bottom:1px solid #2c2c28;
}
.foot-prompt{ font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2rem); font-weight:600; letter-spacing:-0.01em; max-width:20ch; }
.foot-links{ display:flex; flex-direction:column; gap:0.6rem; }
.foot-links a.icon-text-link{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; color:#d7d7d0; font-size:0.95rem; }
.foot-links a.icon-text-link svg{ width:18px; height:18px; flex:none; }
.foot-links a.icon-text-link:hover{ color:var(--accent); }
.foot-icons{
  display:flex; gap:1.1rem; padding:1.8rem 0;
  border-bottom:1px solid #2c2c28;
}
.icon-link{
  width:38px; height:38px; border-radius:50%;
  border:1px solid #33332e;
  display:flex; align-items:center; justify-content:center;
  color:#d7d7d0; text-decoration:none;
  transition:border-color .15s ease, color .15s ease;
}
.icon-link svg{ width:17px; height:17px; }
.icon-link:hover{ border-color:var(--accent); color:var(--accent); }
.foot-bottom{
  padding-top:1.6rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
  font-family:var(--font-mono); font-size:0.78rem; color:#78786f;
}

/* ---------- notas de margem (signature element) ---------- */
.note-flag{
  display:flex; align-items:baseline; gap:1rem;
  border-left:2px solid var(--accent);
  padding:0.9rem 0 0.9rem 1.1rem;
  margin:1.4rem 0;
  font-family:var(--font-mono);
  font-size:0.9rem;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:var(--measure);
}
.note-flag.qa{
  display:flex; align-items:baseline; gap:2rem;
  padding:1.3rem 0 1.3rem 1.3rem;
  margin:0;
  font-size:1rem;
  width:100%;
  max-width:100%;
  border-top:1px solid var(--line);
}
.note-flag.qa:first-of-type{ border-top:none; }
.note-flag.qa strong{
  flex:0 0 15em;
  color:var(--ink);
  font-weight:600;
  font-size:1.02rem;
}
.note-flag.qa span.q{ flex:1; max-width:64ch; }
@media(max-width:640px){
  .note-flag.qa{ flex-direction:column; gap:0.4rem; }
  .note-flag.qa strong{ flex:none; width:auto; }
}


/* ---------- generic prose ---------- */
.prose{ max-width:var(--measure); }
.prose h2{ font-size:1.5rem; margin:2.2rem 0 0.9rem; }
.prose p{ margin-bottom:1rem; color:var(--ink-soft); }
.prose ul{ padding-left:1.2rem; color:var(--ink-soft); margin-bottom:1rem;}
.prose li{ margin-bottom:0.4rem; }
.prose strong{ color:var(--ink); }

/* ---------- case study page ---------- */
.case-hero{ padding:2.6rem 0 3rem; border-bottom:1px solid var(--line); }
.case-hero .back{
  font-family:var(--font-mono); font-size:0.8rem; color:var(--muted);
  text-decoration:none; display:inline-block; margin-bottom:1.6rem;
}
.case-hero .back:hover{ color:var(--ink); }
.case-title-row{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.case-logo{ height:80px; width:auto; flex:none; }
@media(max-width:640px){ .case-logo{ height:52px; } }
.case-hero h1{ font-size:clamp(2rem,4.6vw,3rem); max-width:18ch; }
.case-hero .dek{ font-size:1.15rem; color:var(--ink-soft); max-width:52ch; margin-top:1rem; font-family:var(--font-display); }

.case-body{
  display:grid;
  grid-template-columns: minmax(0,var(--measure)) 260px;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.case-meta{
  font-family:var(--font-mono);
  font-size:0.83rem;
  border-left:1px solid var(--line);
  padding-left:1.6rem;
  position:sticky; top:88px;
}
.case-meta dt{ color:var(--muted); margin-top:1.1rem; text-transform:uppercase; letter-spacing:0.06em; font-size:0.72rem;}
.case-meta dt:first-child{ margin-top:0; }
.case-meta dd{ margin:0.3rem 0 0; color:var(--ink); line-height:1.5;}
.case-meta a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px;}

.case-diagram{
  display:flex; flex-wrap:wrap; gap:0.4rem;
  font-family:var(--font-mono); font-size:0.8rem;
  margin:1.6rem 0 2rem;
}
.case-diagram span{
  padding:0.5rem 0.85rem;
  border:1px solid var(--line);
  border-radius:100px;
  background:var(--paper-dim);
  white-space:nowrap;
}
.case-diagram .sep{ border:none; background:none; padding:0.5rem 0; color:var(--muted); }

.case-nav{
  display:flex; justify-content:space-between; padding:2.4rem 0;
  border-top:1px solid var(--line); margin-top:2rem;
  font-family:var(--font-mono); font-size:0.85rem;
}
.case-nav a{ text-decoration:none; color:var(--ink-soft); }
.case-nav a:hover{ color:var(--ink); }

/* ---------- brutalist button + arrow (interaction accent) ---------- */
.btn-brutal{
  border-radius:0;
  border:2px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  font-weight:700;
  transition:transform .12s cubic-bezier(.2,.9,.3,1.3), background .1s ease, color .1s ease, box-shadow .12s ease;
}
.btn-brutal:hover{
  transform:translate(-3px,-3px);
  box-shadow:4px 4px 0 var(--accent);
}
.btn-brutal:active{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
  transform:translate(0,0);
  box-shadow:none;
}
.arrow-brutal{
  display:inline-block;
  font-weight:800;
  transition:transform .15s cubic-bezier(.3,.8,.3,1.4);
}
.btn-brutal:hover .arrow-brutal{ transform:translateX(6px); }

/* ---------- pull quote (uma forma de pensar) ---------- */
.pull{
  font-family:var(--font-display);
  font-weight:650;
  font-size:clamp(1.4rem,3.2vw,2.1rem);
  letter-spacing:-0.01em;
  line-height:1.25;
  max-width:26ch;
  margin:1.2rem 0 1.6rem;
}
.pull .dim{ color:var(--muted); font-weight:500; }

/* ---------- território grid (5 territórios) ---------- */
.terr-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.terr-item{ background:var(--paper); padding:1.6rem 1.3rem; }
.terr-item .mono{ font-size:0.72rem; color:var(--muted); }
.terr-item h3{ font-size:1.05rem; margin:0.6rem 0 0.5rem; }
.terr-item p{ font-size:0.87rem; color:var(--ink-soft); }
@media(max-width:980px){ .terr-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .terr-grid{ grid-template-columns:1fr; } }

/* ---------- 5-step pattern (como trabalho) ---------- */
.steps5{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(1rem,2.5vw,1.6rem);
}
.steps5 .s{ border-top:2px solid var(--ink); padding-top:1rem; }
.steps5 .s .mono{ font-size:0.72rem; color:var(--muted); }
.steps5 .s h4{ font-family:var(--font-display); font-size:1.05rem; font-weight:650; margin:0.4rem 0 0.4rem; }
.steps5 .s p{ font-size:0.86rem; color:var(--ink-soft); margin:0; }
@media(max-width:900px){ .steps5{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .steps5{ grid-template-columns:1fr; } }

/* ---------- princípios (pills) ---------- */
.principles{
  display:flex; flex-wrap:wrap; gap:0.6rem;
}
.principles span{
  font-family:var(--font-mono);
  font-size:0.85rem;
  border:1px solid var(--line);
  background:var(--paper-dim);
  padding:0.55rem 1rem;
  border-radius:100px;
  color:var(--ink-soft);
}

/* ---------- teaser cards (LAB / Falhanços) ---------- */
.teaser-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.teaser{
  background:var(--paper);
  padding:clamp(1.8rem,3vw,2.6rem);
  text-decoration:none;
  color:var(--ink);
  display:block;
  transition:background .15s ease;
}
.teaser:hover{ background:var(--paper-dim); }
.teaser h3{ font-size:1.4rem; margin:0.7rem 0 0.7rem; }
.teaser p{ color:var(--ink-soft); font-size:0.95rem; max-width:40ch; }
.teaser .go{ margin-top:1.2rem; font-family:var(--font-mono); font-size:0.82rem; display:inline-flex; align-items:center; gap:0.4rem; }
@media(max-width:820px){ .teaser-grid{ grid-template-columns:1fr; } }

/* ---------- empty state (falhanços) ---------- */
.empty-state{
  border:1px dashed var(--line);
  padding:clamp(2rem,4vw,3rem);
  text-align:left;
  max-width:var(--measure);
}
.empty-state .mono{ font-size:0.8rem; color:var(--muted); }
.empty-state p{ margin-top:0.9rem; color:var(--ink-soft); }

/* ---------- canais table ---------- */
.chan-table{ width:100%; border-collapse:collapse; font-size:0.92rem; margin-top:0.5rem; }
.chan-table th{
  text-align:left; font-family:var(--font-mono); font-size:0.7rem;
  text-transform:uppercase; letter-spacing:0.07em; color:var(--muted);
  padding:0.9rem 1.1rem; border-bottom:2px solid var(--ink);
}
.chan-table td{
  padding:1.1rem; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--ink-soft); font-size:0.92rem;
}
.chan-table td:first-child{ color:var(--ink); max-width:38ch; }
.chan-table tr:hover td{ background:var(--paper-dim); }
.chan-tags{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.chan-tags a{
  font-family:var(--font-mono); font-size:0.8rem;
  color:var(--ink); text-decoration:none;
  border:1px solid var(--line);
  border-radius:100px;
  padding:0.4rem 0.9rem;
  transition:border-color .12s ease, background .12s ease;
  white-space:nowrap;
}
.chan-tags a:hover{ border-color:var(--accent); background:var(--paper-dim); }
@media(max-width:640px){
  .chan-table thead{ display:none; }
  .chan-table, .chan-table tbody, .chan-table tr, .chan-table td{ display:block; width:100%; }
  .chan-table tr{ margin-bottom:1.3rem; }
  .chan-table td{ border-bottom:none; padding:0.2rem 0; }
  .chan-table td:first-child{ font-weight:600; max-width:none; margin-bottom:0.6rem; padding-top:0; }
  .chan-table tr:hover td{ background:none; }
}

/* ---------- estante (bookshelf) ---------- */
.shelf{ margin-top:0.5rem; }
.shelf-item{
  display:flex; gap:1.3rem; align-items:flex-start;
  padding:1.5rem 0; border-top:1px solid var(--line);
}
.shelf-item:last-child{ border-bottom:1px solid var(--line); }
.shelf-num{ font-family:var(--font-mono); font-size:1rem; color:var(--muted); flex:none; width:2rem; padding-top:0.15rem; }
.shelf-title{ font-family:var(--font-display); font-weight:650; font-size:1.1rem; }
.shelf-author{ font-family:var(--font-mono); font-size:0.78rem; color:var(--muted); margin-top:0.2rem; }
.shelf-note{ color:var(--ink-soft); font-size:0.92rem; margin-top:0.5rem; max-width:56ch; }
.shelf-buy{
  display:inline-block; margin-top:0.6rem;
  font-family:var(--font-mono); font-size:0.78rem;
  color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--line); text-underline-offset:3px;
}
.shelf-buy:hover{ text-decoration-color:var(--accent); }
.shelf-links{ display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap; margin-top:0.6rem; }
.shelf-links .shelf-buy{ margin-top:0; }
.shelf-tag{
  font-family:var(--font-mono); font-size:0.72rem;
  color:var(--muted); border:1px solid var(--line);
  border-radius:100px; padding:0.2rem 0.7rem;
}

.shelf-more{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.shelf-more.open{ max-height:2000px; }
.shelf-toggle{
  display:inline-flex; align-items:center; gap:0.5em;
  margin-top:1.2rem;
  background:none;
  border:1px solid var(--ink);
  border-radius:100px;
  padding:0.6rem 1.2rem;
  font-size:0.82rem;
  cursor:pointer;
  color:var(--ink);
  transition:background .12s ease, color .12s ease;
}
.shelf-toggle:hover{ background:var(--ink); color:var(--paper); }
.shelf-toggle .arrow-brutal{ transition:transform .2s ease; }
.shelf-toggle.open .arrow-brutal{ transform:rotate(180deg); }

/* ---------- case gallery ---------- */
.case-gallery{ display:grid; gap:0.8rem; margin:1.8rem 0 2.2rem; }
.case-gallery.g1{ grid-template-columns:1fr; }
.case-gallery.g2{ grid-template-columns:1fr 1fr; }
.case-gallery.g3{ grid-template-columns:repeat(3,1fr); }
.case-gallery img{
  width:100%; height:auto;
  display:block;
  border:1px solid var(--line);
  border-radius:10px;
  transition:transform .25s ease;
}
.case-gallery a{ overflow:hidden; display:block; border-radius:10px; }
.case-gallery a:hover img{ transform:scale(1.02); }
.case-gallery .cap{
  grid-column:1/-1;
  font-family:var(--font-mono); font-size:0.75rem;
  color:var(--muted); margin-top:-0.6rem;
}
@media(max-width:640px){
  .case-gallery.g3{ grid-template-columns:1fr 1fr; }
  .case-gallery.g2{ grid-template-columns:1fr; }
}

/* ---------- postit (o lado humano do processo) ---------- */
.postit-wrap{
  display:flex; justify-content:flex-end;
  max-width:62ch;
  margin:1.4rem 0;
}
.postit-wrap.left{ justify-content:flex-start; }
.postit{
  background:var(--accent);
  width:180px;
  padding:1.1rem 1.1rem 1.4rem;
  font-family:'Kalam', cursive;
  font-size:1.05rem;
  line-height:1.35;
  color:var(--accent-ink);
  box-shadow:3px 5px 10px rgba(0,0,0,0.18);
  transform:rotate(-3deg);
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative;
  cursor:default;
}
.postit:nth-of-type(2n){ transform:rotate(2.5deg); }
.postit:hover{
  transform:rotate(0deg) translateY(-3px);
  box-shadow:4px 8px 16px rgba(0,0,0,0.22);
}
.postit::before{
  content:"";
  position:absolute; top:-6px; left:50%; translate:-50% 0;
  width:34px; height:12px;
  background:rgba(255,255,255,0.55);
  transform:rotate(-2deg);
}
.postit::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.5) 1px, transparent 1px);
  background-size:14px 14px;
  opacity:0.05;
  pointer-events:none;
}

/* subtle graph-paper texture, used sparingly behind specific sections */
.grid-bg{
  position:relative;
}
.grid-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:32px 32px;
  background-position:-1px -1px;
  opacity:0.35;
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 85%);
  mask-image:linear-gradient(to bottom, black, transparent 85%);
  pointer-events:none;
  z-index:0;
}
.grid-bg > .wrap{ position:relative; z-index:1; }

@media(max-width:640px){
  .postit{ width:150px; font-size:0.95rem; }
}

/* ---------- caça-palavras (Sobre) ---------- */
.sobre-split{
  display:grid;
  grid-template-columns:minmax(0,62ch) 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.ws-widget{ justify-self:center; }
.ws-grid{
  display:flex; flex-direction:column; gap:2px;
  background:var(--line); border:1px solid var(--line);
  margin-top:0.8rem; width:max-content;
}
.ws-row{ display:flex; gap:2px; }
.ws-cell{
  width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  background:var(--paper); font-family:var(--font-mono); font-size:0.78rem; font-weight:600;
  color:var(--ink-soft); cursor:pointer; user-select:none;
  transition:background .1s ease, color .1s ease;
}
.ws-cell:hover{ background:var(--paper-dim); }
.ws-cell.on{ background:var(--accent); color:var(--accent-ink); }
.ws-clue{ font-size:0.78rem; color:var(--muted); margin-top:0.9rem; }
.ws-answer{ font-size:0.78rem; color:var(--ink); margin-top:0.4rem; max-width:22ch; opacity:0; transition:opacity .3s ease; }
.ws-answer.show{ opacity:1; }
@media(max-width:900px){
  .sobre-split{ grid-template-columns:1fr; }
  .ws-widget{ justify-self:start; }
}
@media(max-width:400px){
  .ws-cell{ width:22px; height:22px; font-size:0.7rem; }
}

/* ---------- lab ---------- */
.lab-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.lab-item{ background:var(--paper); padding:1.8rem; }
.lab-item .cat{ font-family:var(--font-mono); font-size:0.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; }
.lab-item h3{ font-size:1.15rem; margin:0.5rem 0 0.5rem; }
.lab-item p{ font-size:0.92rem; color:var(--ink-soft); }

/* ---------- responsive ---------- */
@media(max-width:820px){
  nav.main-nav{ display:none; }
  .nav-toggle{
    display:flex; background:none; border:1px solid var(--ink);
    border-radius:100px; padding:8px 14px; font-family:var(--font-mono);
    font-size:0.78rem; cursor:pointer;
  }
  .site-header.open nav.main-nav{
    display:flex; flex-direction:column; position:absolute;
    top:64px; left:0; right:0; background:var(--paper);
    padding:1.2rem var(--gutter); border-bottom:1px solid var(--line);
    gap:1rem;
  }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo{ width:150px; height:150px; order:-1; }
  .qgrid{ grid-template-columns:1fr; }
  .pgrid{ grid-template-columns:1fr; }
  .pj-row{ grid-template-columns:1fr; gap:0.4rem; }
  .pj-row .arrow{ display:none; }
  .case-body{ grid-template-columns:1fr; }
  .case-meta{ position:static; border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:1.4rem; }
  .lab-grid{ grid-template-columns:1fr; }
  .foot-grid{ flex-direction:column; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px;
}