/* ==========================================================================
   Lápis HB — caderno técnico
   As variáveis (--color-*, --font-*, --space-*, .t-*) vêm de tokens/tokens.json,
   geradas em app/tokens.php e impressas no <head>. Aqui só tem composição.
   ========================================================================== */

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--motion-slow) ease, color var(--motion-base) ease;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
code, pre { font-family: var(--font-mono); }
::selection { background: var(--color-accent-text); color: var(--color-accent-contrast); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 1px; }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important; 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: 8px; left: 8px; z-index: 100; padding: 10px 16px;
  background: var(--color-foreground); color: var(--color-background);
  font: 700 0.875rem/1 var(--font-sans); transform: translateY(-150%);
  transition: transform var(--motion-fast) ease;
}
.skip-link:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-gutter);
}
.accent { color: var(--color-accent); }
.accent-text { color: var(--color-accent-text); }
.icon { flex: none; display: inline-block; vertical-align: -0.15em; }

/* ── Papel: grade milimetrada, grão e linha de margem ─────────────────── */
:root { --grid-minor-color: color-mix(in srgb, var(--color-paper-grid) 35%, transparent); }
/* textura de papel no fundo claro: manchas suaves e quentes, como fibra de papel creme (no escuro fica só o grão) */
:root { --paper-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .2 .08 0 0 0 -.03'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06 .11' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .2 .07 0 0 0 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] { --paper-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .88 0 0 0 0 .8 .035 0 0 0 -.012'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06 .11' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .88 0 0 0 0 .8 .03 0 0 0 -.012'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .88 0 0 0 0 .8 .035 0 0 0 -.012'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06 .11' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .88 0 0 0 0 .8 .03 0 0 0 -.012'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"); } }
.paper {
  background-image:
    linear-gradient(var(--color-paper-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-paper-grid) 1px, transparent 1px),
    linear-gradient(var(--grid-minor-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor-color) 1px, transparent 1px),
    var(--paper-fiber);
  background-size: var(--grid-major) var(--grid-major), var(--grid-major) var(--grid-major), var(--grid-minor) var(--grid-minor), var(--grid-minor) var(--grid-minor), 520px 520px;
  background-position: -1px -1px;
}
/* grão de papel em SVG, sem imagem externa */
.paper::after, .tx--grain::after {
  content: ""; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .045; mix-blend-mode: multiply;
}
.paper::after { position: fixed; inset: 0; z-index: 60; }
:root[data-theme="dark"] .paper::after, :root[data-theme="dark"] .tx--grain::after { filter: invert(1); mix-blend-mode: screen; opacity: .025; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .paper::after, :root:not([data-theme="light"]) .tx--grain::after { filter: invert(1); mix-blend-mode: screen; opacity: .025; }
}
/* linha vermelha de margem do caderno */
@media (min-width: 1200px) {
  .paper::before {
    content: ""; position: fixed; top: 0; bottom: 0; left: var(--grid-margin); width: 3px;
    background: var(--color-margin-line); pointer-events: none; z-index: -1;   /* atrás de tudo: o conteúdo passa por cima, como num caderno */
  }
}

/* ── Anotações ───────────────────────────────────────────────────────── */
.annot { display: flex; align-items: center; gap: var(--space-4); color: var(--color-muted-foreground); }
.annot > .t-micro, .annot > h2 { white-space: nowrap; }
@media (max-width: 479px) { .annot > .t-micro, .annot > h2 { white-space: normal; min-width: 0; } .annot__rule { min-width: 16px; } }
.annot__rule { flex: 1; height: 1px; background: var(--color-rule); }

.pencil-rule { position: relative; height: 1.5px; background: var(--color-foreground); opacity: .18; transform: rotate(-0.35deg); border-radius: 2px; }
.pencil-rule .t-micro { position: absolute; right: 0; top: -22px; color: var(--color-muted-foreground); opacity: 1; }
.hero .pencil-rule { opacity: 1; background: transparent; }
.hero .pencil-rule::before {
  content: ""; position: absolute; inset: 0; background: var(--color-foreground); opacity: .18;
  transform-origin: left; animation: draw 1.4s var(--motion-ease) .6s both;
}

.mark-circle { position: relative; display: inline-block; }
.circle-mark {
  position: absolute; left: -14px; right: -14px; top: -9px; bottom: -9px;
  width: calc(100% + 28px); height: calc(100% + 18px); color: var(--color-accent); overflow: visible; pointer-events: none;
}
.circle-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: stroke 1.1s var(--motion-ease) 1s forwards; }
.mark-circle--center { display: block; width: fit-content; margin-inline: auto; }

.stamp {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 4px;
  background: var(--color-muted); color: var(--color-muted-foreground);
  border: 1px solid var(--color-border); border-radius: var(--radius-stamp);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  letter-spacing: .14em; white-space: nowrap;
}
.stamp--accent { background: var(--color-accent-text); color: var(--color-accent-contrast); border-color: transparent; }
.stamp--tilt { transform: rotate(-4deg); }

.frame { border: 1px solid var(--color-border); background: var(--color-muted); overflow: hidden; }
.corner-marks { position: relative; overflow: visible; }
.corner-marks::before, .corner-marks::after { content: "+"; position: absolute; font: 11px/1 var(--font-mono); color: var(--color-accent); }
.corner-marks::before { top: -7px; left: -5px; }
.corner-marks::after { bottom: -7px; right: -5px; }

.live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }

/* ── Links e botões ──────────────────────────────────────────────────── */
.link-quiet { color: var(--color-muted-foreground); transition: color var(--motion-fast) ease; }
.link-quiet:hover { color: var(--color-accent-text); }
.link-accent { display: inline-flex; align-items: center; gap: 8px; color: var(--color-accent-text); padding-block: 4px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1.5px no-repeat; }
.link-accent:hover { background-size: 0 1.5px; background-position: right bottom; transition: background-size var(--motion-base) var(--motion-ease); }
.link-underline { position: relative; color: var(--color-foreground); font-weight: 500; }
.link-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: var(--color-accent); transform: rotate(-.6deg); }

.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  font: 700 var(--type-label-size)/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--color-foreground);
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-foreground); color: var(--color-background); }
.btn--primary:hover { background: var(--color-accent-text); border-color: var(--color-accent-text); color: var(--color-accent-contrast); }
.btn--secondary { color: var(--color-foreground); border-color: var(--color-border); }
.btn--secondary:hover { border-color: var(--color-accent-text); color: var(--color-accent-text); }

/* ── Cabeçalho ───────────────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 72px;
  background: color-mix(in srgb, var(--color-background) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-rule);
}
.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--space-8); }
.site-logo { display: flex; align-items: center; color: var(--color-foreground); margin-right: auto; }
.logo--hb .site-logo__svg { height: 32px; width: auto; }
.logo--caio .site-logo__svg { height: 42px; width: auto; transition: transform .8s var(--motion-ease); }
.logo--caio:hover .site-logo__svg, .logo--caio:focus-visible .site-logo__svg { transform: rotate(180deg); }

.site-nav__list { display: flex; gap: var(--space-10); }
.site-nav__link { position: relative; display: inline-block; padding-block: 8px; color: var(--color-muted-foreground); transition: color var(--motion-fast) ease; }
.site-nav__link:hover { color: var(--color-foreground); }
.site-nav__link[aria-current="page"] { color: var(--color-accent-text); }
.site-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-accent); transform: rotate(-.8deg); }

.site-controls { display: flex; align-items: center; gap: var(--space-2); }
.control { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; color: var(--color-muted-foreground); transition: color var(--motion-fast) ease; }
.control:hover { color: var(--color-accent-text); }
.control--lang { font: 400 var(--type-micro-size)/1 var(--font-mono); letter-spacing: .2em; padding-inline: 6px; }
.control--lang .is-current { color: var(--color-foreground); font-weight: 700; }
.control--theme .icon-sun { display: none; }
.control--motion .icon-play, .motion-off .control--motion .icon-pause { display: none; }
.motion-off .control--motion .icon-play { display: block; }
.no-js .control--motion { display: none; }
@media (prefers-reduced-motion: reduce) { .control--motion { display: none; } }
/* pausado pelo botão do topo: os laços infinitos param e o baralho fica parado */
.motion-off .scroll-cue__tick { animation: none; transform: none; }
.motion-off .live-dot { animation: none; }
.motion-off .recs--deck .rec__timer { display: none; }
:root[data-theme="dark"] .control--theme .icon-sun { display: block; }
:root[data-theme="dark"] .control--theme .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .control--theme .icon-sun { display: block; }
  :root:not([data-theme="light"]) .control--theme .icon-moon { display: none; }
}
.control--menu { display: none; color: var(--color-foreground); }
.control--menu .icon-x { display: none; }
.control--menu[aria-expanded="true"] .icon-x { display: block; }
.control--menu[aria-expanded="true"] .icon-menu { display: none; }

@media (max-width: 767px) {
  .site-header__inner { gap: var(--space-2); }
  .js .control--menu { display: inline-flex; }
  .js .site-nav {
    position: absolute; top: 72px; left: 0; right: 0;
    background: var(--color-background); border-bottom: 1px solid var(--color-border);
    padding: var(--space-8) var(--grid-gutter) var(--space-12);
    display: none;
  }
  .js .site-nav.is-open { display: block; animation: drop var(--motion-base) var(--motion-ease); }
  .js .site-nav__list { flex-direction: column; gap: var(--space-4); }
  .js .site-nav__link { font: 700 2.25rem/1 var(--font-display); letter-spacing: -0.03em; text-transform: uppercase; color: var(--color-foreground); }
  .js .site-nav__link[aria-current="page"] { color: var(--color-accent-text); }
  .no-js .site-nav__list { gap: var(--space-4); }
  .logo--hb .site-logo__svg { height: 28px; }
}

main { display: block; padding-top: 72px; }

/* ── Home: hero ──────────────────────────────────────────────────────── */
.hero { padding-top: var(--space-16); }
.hero__main { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-10); margin-top: var(--space-12); }
.hero__title { color: var(--color-foreground); }
.hero__line { display: block; animation: rise .9s var(--motion-ease) both; }
.hero__line:nth-child(2) { animation-delay: .08s; }
.hero__line:nth-child(3) { animation-delay: .16s; }
.hero__tags { display: none; }
.hero__desc { max-width: 28rem; margin-top: var(--space-16); }
.hero .pencil-rule { margin-top: var(--space-20); }
.hero__tags .t-micro { color: var(--color-accent-text); font-weight: 700; letter-spacing: .22em; }
@media (min-width: 1024px) {
  .hero__tags { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-3) 0 0 var(--space-6); border-left: 1px solid var(--color-rule); }
}
@media (max-width: 1023px) {
  .hero__main { display: block; }
  .hero__tags { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-10); }
}

/* ── Home: trabalhos ─────────────────────────────────────────────────── */
.work { padding-top: var(--space-24); padding-bottom: var(--space-32); }
/* filtros: etiquetas compactas, no mesmo desenho das tags dos cases; a ativa fica preenchida em coral (o tom de texto, que passa no contraste) */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-10); }
.filter {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-3);
  border: 1px solid var(--color-rule); color: var(--color-muted-foreground); letter-spacing: .14em; white-space: nowrap;
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}
.filter__n { font-variant-numeric: tabular-nums; letter-spacing: 0; }   /* sem transparência: o número precisa do mesmo contraste do texto */
.filter:hover { color: var(--color-accent-text); border-color: var(--color-accent); }
.filter[aria-pressed="true"] { background: var(--color-accent-text); border-color: var(--color-accent-text); color: var(--color-accent-contrast); }

.cards { display: grid; gap: var(--space-12) var(--space-10); margin-top: var(--space-12); }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-12) var(--space-8); } }
.card[hidden] { display: none; }
.card { animation: rise .7s var(--motion-ease) both; }
.card__link { display: block; color: inherit; }
.card__media { position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--color-border); background: var(--color-muted); overflow: hidden; transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform var(--motion-slow) var(--motion-ease), filter var(--motion-slow) ease; }
@media (hover: hover) {
  a.card__link:hover .card__media { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent); }
  a.card__link:hover .card__media img { transform: none; }
  a.card__link:hover .card__fig, .card--soon .card__link:hover .card__fig { opacity: 1; transform: none; }   /* em breve também mostra as tags, mesmo sem link */
  a.card__link:hover .card__title { color: var(--color-accent-text); }
  a.card__link:hover .card__rule { background: var(--color-accent); transform: scaleX(1); }
}
/* tags no hover da imagem: todas as tags do projeto, sem o cliente (o cliente já está embaixo do título) */
.card__fig {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px;
  color: #fff; opacity: 0; transform: translateY(4px); transition: all var(--motion-base) var(--motion-ease);
}
.card__fig span { background: rgba(15, 17, 17, .66); border: 1px solid rgba(255, 255, 255, .28); padding: 4px 8px 3px; letter-spacing: .14em; white-space: nowrap; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
a.card__link:focus-visible .card__fig { opacity: 1; transform: none; }
.card--soon .card__media img { filter: grayscale(1); opacity: .85; }   /* em breve: cinza, como desabilitado */
.card__soon { position: absolute; top: 18px; right: 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.card__info { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-5); }
.card__title { transition: color var(--motion-fast) ease; }
.card__meta { margin-top: var(--space-2); color: var(--color-muted-foreground); text-wrap: balance; }
/* tags do projeto: etiquetas leves, diferentes do carimbo do ano (que tem fundo e canto cortado) */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.tag { padding: 4px 8px 3px; border: 1px solid var(--color-rule); color: var(--color-muted-foreground); letter-spacing: .14em; white-space: nowrap; }
.case__meta .tags { margin-top: 0; }
.card__rule { display: block; height: 1px; margin-top: var(--space-5); background: var(--color-rule); transform-origin: left; transition: background var(--motion-slow) ease; }

/* ── Rodapé ──────────────────────────────────────────────────────────── */
.site-footer { padding-top: var(--space-16); }
.page-home .site-footer { padding-top: 0; }
.site-footer__cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-12) var(--space-24); margin: var(--space-16) 0 var(--space-24); }
.footer-mail {
  display: inline-block; margin-top: var(--space-8); font: 500 clamp(1.5rem, 3.4vw, 2.25rem)/1.2 var(--font-sans);
  color: var(--color-accent-text); background: linear-gradient(var(--color-accent), var(--color-accent)) left 100% / 100% 2px no-repeat; padding-bottom: 6px;
  overflow-wrap: anywhere; transition: background-size var(--motion-base) var(--motion-ease);
}
.footer-mail:hover { background-size: 92% 2px; }
.footer-social { display: flex; flex-direction: column; gap: var(--space-4); }
.site-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-10);
  padding-block: var(--space-6) var(--space-8); border-top: 1px solid var(--color-rule); color: var(--color-muted-foreground);
}
.site-footer__bar p { margin-right: auto; }
.back-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* ── Sobre ───────────────────────────────────────────────────────────── */
.about { padding-top: var(--space-16); padding-bottom: var(--space-24); }
.about__intro { display: grid; gap: var(--space-16); align-items: start; }
.about__text .annot { margin-bottom: var(--space-10); }
.about__text .t-lead { margin-top: var(--space-10); max-width: 36rem; }
.about__photo { position: relative; max-width: 420px; transform: rotate(2deg); border: 1px solid var(--color-border); background: var(--color-surface); padding: 10px 10px 34px; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .35); }
.about__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(.4) contrast(1.03); transition: filter var(--motion-slow) ease; }
.about__photo:hover img { filter: none; }
.about__photo figcaption { position: absolute; left: 12px; bottom: 10px; color: var(--color-muted-foreground); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin-top: var(--space-10); color: var(--color-muted-foreground); }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #2F8F5B; box-shadow: 0 0 0 3px color-mix(in srgb, #2F8F5B 25%, transparent); }
@media (min-width: 900px) {
  .about__intro { grid-template-columns: 7fr 5fr; gap: var(--space-24); }
  .about__photo { justify-self: end; margin-top: var(--space-8); }
}
.about__block { display: grid; gap: var(--space-10); margin-top: var(--space-32); }
.about__side .t-micro { color: var(--color-muted-foreground); max-width: 220px; line-height: 1.8; }
.accent-bar { display: block; width: 64px; height: 2px; background: var(--color-accent); margin: var(--space-5) 0 var(--space-8); }
@media (min-width: 900px) {
  .about__block { grid-template-columns: 4fr 8fr; gap: var(--space-24); }
  .about__side { position: sticky; top: 120px; align-self: start; }
}
.timeline { display: grid; gap: var(--space-16); }
.timeline__item { position: relative; padding-bottom: var(--space-12); }
.timeline__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--color-foreground); opacity: .15; transform: rotate(-.3deg); }
.timeline__item .t-heading { margin-top: var(--space-6); }
.timeline__org { margin-top: var(--space-3); color: var(--color-muted-foreground); }
.timeline__desc { margin-top: var(--space-6); max-width: 36rem; }
.skills { display: flex; flex-wrap: wrap; gap: var(--space-4); align-content: flex-start; }
.skill-groups .extras__title + .skills { margin-top: var(--space-4); }
.skill {
  display: inline-block; padding: 14px 20px; border: 1px solid var(--color-border); background: var(--color-surface);
  transform: rotate(var(--tilt, 0deg)); transition: transform var(--motion-base) var(--motion-ease), color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.skill:hover { transform: rotate(0) scale(1.03); color: var(--color-accent-text); border-color: var(--color-accent); }

/* ── Case ────────────────────────────────────────────────────────────── */
.case { padding-top: var(--space-12); padding-bottom: var(--space-24); }
.back-link { display: inline-flex; align-items: center; gap: var(--space-4); min-height: 44px; color: var(--color-muted-foreground); transition: color var(--motion-fast) ease; }
.back-link .icon { transition: transform var(--motion-base) var(--motion-ease); }
.back-link:hover { color: var(--color-accent-text); }
.back-link:hover .icon { transform: translateX(-6px); }
.case__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-10); margin: var(--space-16) 0 var(--space-12); }
.case__titles h1 { margin-top: var(--space-4); max-width: 16ch; text-wrap: balance; }
.case__meta dt { color: var(--color-muted-foreground); margin-bottom: var(--space-3); }
.case__meta dd { display: flex; align-items: center; gap: var(--space-4); }
.case__cover img { width: 100%; height: auto; }
/* a capa vem logo depois do voltar; embaixo dela, o nome do projeto em destaque e a frase como subtítulo */
.back-link + .case__cover { margin-top: var(--space-8); }
.case__cover + .case__header { margin: var(--space-12) 0 0; }
.case__titles > :first-child { margin-top: 0; }
.case__subtitle { margin-top: var(--space-6); max-width: 34rem; text-wrap: pretty; }
.case__narrative { display: grid; gap: var(--space-16); margin-top: var(--space-24); }
.case__narrative .t-lead { margin-top: var(--space-6); }
.case__highlights { display: grid; gap: var(--space-10); }
.highlight { position: relative; padding-bottom: var(--space-10); }
.highlight::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--color-foreground); opacity: .14; transform: rotate(-.3deg); }
.highlight p { margin-top: var(--space-3); color: var(--color-muted-foreground); }
@media (min-width: 900px) { .case__narrative { grid-template-columns: 5fr 6fr; gap: var(--space-24); } }
@media (min-width: 900px) { .case__narrative--solo { grid-template-columns: minmax(0, 52rem); } }   /* case sem destaques: o texto de cada etapa fica junto da figura */
.case__process { margin-top: var(--space-32); }
.process { display: grid; gap: var(--space-16); margin-top: var(--space-16); }
@media (min-width: 900px) { .process { grid-template-columns: 1fr 1fr; align-items: start; } .process__step--wide { grid-column: 1 / -1; } .process__step--wide figcaption { max-width: 60ch; } }
.process__img img { width: 100%; height: auto; }
.process__step figcaption { margin-top: var(--space-6); }
.process__step figcaption .t-micro { color: var(--color-muted-foreground); }
.process__step h3 { margin: var(--space-2) 0 var(--space-3); }
.process__step figcaption p + p { margin-top: var(--space-3); }
/* imagem vertical: na largura toda, com a imagem à esquerda e o texto ao lado */
@media (min-width: 900px) {
  .process__step--side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
  .process__step--side figcaption { margin-top: 0; max-width: 46ch; }
}
/* infográfico em texto no lugar de imagem: número grande em coral e uma barra por linha, proporcional à maior */
.infographic { display: grid; gap: var(--space-12); padding: var(--space-10) var(--space-6); background: var(--color-surface); }
@media (min-width: 720px) { .infographic { grid-template-columns: 1fr 1fr; gap: var(--space-16); padding: var(--space-12) var(--space-10); } }
@media (min-width: 720px) { .infographic--single { grid-template-columns: 1fr; } }   /* um box por grupo de números (ex.: clusters e peças lado a lado) */
/* dois boxes de números lado a lado: mesma altura de box, e as legendas começam na mesma linha */
/* Etapa só de texto (case que ainda não tem imagens): ficha igual à da visão geral, na largura de leitura */
.process__step--text { grid-column: 1 / -1; max-width: 52rem; border: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-6); }
@media (min-width: 768px) { .process__step--text { padding: var(--space-8) var(--space-10); } }
.process__step--text h3 { margin-top: 0; }
.process__step--text p + p { margin-top: var(--space-3); }
/* duas fichas de texto lado a lado ('half' => true), com a mesma altura */
@media (min-width: 900px) { .process__step--half { grid-column: auto; max-width: none; align-self: stretch; } }
/* lista numerada dentro da ficha (ex.: próximos passos) */
.process__list { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.process__list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.process__list li:last-child { padding-bottom: 0; }
.process__list .t-micro { padding-top: .3em; color: var(--color-accent-text); font-weight: 700; }
/* Box com imagem de apoio ('box' => true): a imagem encaixa no topo e o texto fica dentro da mesma ficha */
.process__step--box { border: 1px solid var(--color-border); background: var(--color-surface); }
.process__step--box .process__img { border: 0; border-bottom: 1px solid var(--color-border); }
.process__step--box figcaption { margin-top: 0; padding: var(--space-6); }
@media (min-width: 768px) { .process__step--box figcaption { padding: var(--space-8) var(--space-10); } }
/* box com imagem ao lado (foto vertical): a imagem encosta à esquerda e o texto fica à direita, na mesma ficha */
@media (min-width: 900px) {
  .process__step--box.process__step--side { gap: 0; }
  .process__step--box.process__step--side .process__img { border-bottom: 0; border-right: 1px solid var(--color-border); }
  .process__step--box.process__step--side figcaption { max-width: none; }
}
/* box na largura toda com legenda longa (3+ parágrafos): o texto corre em duas colunas em vez de deixar metade da ficha vazia */
@media (min-width: 900px) {
  .process__step--box.process__step--wide figcaption:has(p:nth-of-type(3)) { max-width: none; columns: 2; column-gap: var(--space-12); }
  .process__step--box.process__step--wide figcaption:has(p:nth-of-type(3)) :is(.t-micro, h3) { column-span: all; }
  .process__step--box.process__step--wide figcaption p { break-inside: avoid; }
}
@media (min-width: 900px) { .process__step--stats:not(.process__step--wide) { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; } }
/* galeria: as imagens correm de lado, uma por vez; com --strip, várias na mesma altura (peças de tamanhos diferentes) */
.gallery__track { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.gallery__item { flex: 0 0 100%; scroll-snap-align: start; }
.gallery--strip .gallery__track { gap: var(--space-4); padding: var(--space-4); scroll-padding-inline: var(--space-4); }
.gallery--strip .gallery__item { flex: 0 0 auto; height: clamp(14rem, 30vw, 22rem); }
.gallery--strip .gallery__item img { width: auto; height: 100%; border: 1px solid var(--color-border); }
/* com 'strip' => N: N peças por vez na tela larga, duas no tablet e uma e um pedaço no celular */
.gallery--per .gallery__item { height: auto; flex-basis: 80%; }
.gallery--per .gallery__item img { width: 100%; height: auto; }
@media (min-width: 600px) { .gallery--per .gallery__item { flex-basis: calc((100% - var(--space-4)) / 2); } }
@media (min-width: 900px) { .gallery--per .gallery__item { flex-basis: calc((100% - (var(--per) - 1) * var(--space-4)) / var(--per)); } }
/* galeria, diagrama ou 'split' => true dentro de box: o título fica à esquerda e o texto à direita, ocupando a ficha */
@media (min-width: 900px) {
  .process__step--split figcaption { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; column-gap: var(--space-12); max-width: none; align-items: start; }
  .process__step--split figcaption > :is(.t-micro, h3) { grid-column: 1; }
  .process__step--split figcaption > h3 { margin-bottom: 0; }
  .process__step--split figcaption > p { grid-column: 2; }
  .process__step--split figcaption > p:first-of-type { grid-row: 1 / span 2; }
}
.gallery__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.gallery__nav[hidden] { display: none; }
.gallery__count { font-variant-numeric: tabular-nums; color: var(--color-muted-foreground); }
.gallery .recs__btn:disabled { opacity: .35; cursor: default; border-color: var(--color-border); color: var(--color-foreground); }

/* Diagramas em HTML nos cases (app/partials/diagrams): leem no celular e acompanham o tema.
   Mesma legenda de cores em todos: cheio = Design System, coral = Team Library, contorno = times. */
.diagram { background: var(--color-surface); padding: var(--space-6) var(--space-4); }
@media (min-width: 768px) { .diagram { padding: var(--space-10); } }

/* Camadas: no celular as camadas são linhas e os estados, colunas; na tela larga, o contrário (--x e --y trocam de eixo) */
.layers { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, 5.75rem); column-gap: var(--space-2); }
.layers > * { grid-row: var(--x); grid-column: var(--y); }
.layers__layer { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-2) var(--space-3) 0; border-top: 1px solid var(--color-rule); }
.layers__name { font: 700 1rem/1.05 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; }
.layers__desc { color: var(--color-muted-foreground); }
.layers__state { align-self: end; padding-bottom: var(--space-3); text-align: center; color: var(--color-muted-foreground); }
.layers__band { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); margin: var(--space-1) 0; padding: var(--space-3) var(--space-2); text-align: center; border: 1.5px solid var(--color-foreground); }
.layers__band .t-label { letter-spacing: .16em; }
.layers__band--ds { background: var(--color-foreground); color: var(--color-background); }
.layers__band--tl { background: var(--color-accent-text); border-color: var(--color-accent-text); color: var(--color-accent-contrast); }
.layers__note { line-height: 1.3; }
@media (max-width: 400px) {   /* celular estreito: colunas de estado mais finas para sobrar espaço ao nome da camada */
  .layers { grid-template-columns: minmax(0, 1fr) repeat(2, 4.5rem); }
  .layers__name { font-size: .875rem; }
  .layers__band { padding-inline: 4px; }
  .layers__band .t-label { letter-spacing: .08em; }
  .layers__desc { font-size: .8125rem; }
}
@media (min-width: 1200px) {   /* abaixo disso, "organismos" não cabe na coluna */
  .layers { grid-template-columns: 8.5rem repeat(7, minmax(0, 1fr)); column-gap: 0; row-gap: var(--space-3); }
  .layers > * { grid-column: var(--x); grid-row: var(--y); }
  .layers__layer { padding: 0 var(--space-3) var(--space-4); border-top: 0; border-left: 1px solid var(--color-rule); }
  .layers__state { align-self: center; padding: 0 var(--space-4) 0 0; text-align: left; }
  .layers__band { flex-direction: row; gap: var(--space-3); margin: 0 var(--space-1); padding: var(--space-4); }
}

/* Arquivos e conexões: tracejado = o que é distribuído, pontilhado coral = bibliotecas conversando, × = squads sem conversa */
.sync { --drop: 1.25rem; --sq: 1.75rem; --tl: 2.125rem; --ds: 2.75rem; --line: var(--color-muted-foreground); display: grid; gap: var(--space-12); }
@media (min-width: 1100px) {
  .sync { --sq: 2.25rem; --tl: 2.5rem; --ds: 3rem; grid-template-columns: 1fr 1fr; gap: 0; }
  .sync__panel + .sync__panel { padding-left: var(--space-10); margin-left: var(--space-10); border-left: 1px solid var(--color-rule); }
}
.sync__state { margin-bottom: var(--space-6); color: var(--color-accent-text); }
.sync__doc { position: relative; display: inline-grid; place-items: center; width: var(--sq); }
.sync__doc svg { display: block; width: 100%; height: auto; fill: var(--color-surface); stroke: var(--color-foreground); stroke-width: 2.5; stroke-linejoin: round; overflow: visible; }
.sync__doc svg path + path { fill: none; }
.sync__tag { position: absolute; inset: 22% 0 0; display: grid; place-items: center; font: 700 .625rem/1 var(--font-mono); letter-spacing: .04em; }
.sync__doc--ds { width: var(--ds); }
.sync__doc--ds svg { fill: var(--color-foreground); }
.sync__doc--ds svg path + path, .sync__doc--tl svg path + path { stroke: var(--color-surface); }
.sync__doc--ds .sync__tag { color: var(--color-background); font-size: .75rem; }
.sync__doc--tl { width: var(--tl); }
.sync__doc--tl svg { fill: var(--color-accent-text); stroke: var(--color-accent-text); }
.sync__doc--tl .sync__tag { color: var(--color-accent-contrast); }
.sync__ds { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding-bottom: var(--drop); }
.sync__ds .t-micro { color: var(--color-muted-foreground); }
.sync__ds::after, .sync__cell::before, .sync__row--libs .sync__cell::after { content: ""; position: absolute; left: 50%; height: var(--drop); border-left: 2px dashed var(--line); transform: translateX(-1px); }
.sync__ds::after { bottom: 0; }
.sync__bus { margin-inline: calc(100% / 12); border-top: 2px dashed var(--line); }
.sync__chart--lib .sync__bus { margin-inline: calc(100% / 6); }
.sync__row { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sync__row--libs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sync__cell { position: relative; display: flex; justify-content: center; padding-top: var(--drop); }
.sync__cell::before { top: 0; }
.sync__row--libs .sync__cell { padding-bottom: var(--drop); }
.sync__row--libs .sync__cell::after { bottom: 0; }
.sync__minibus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sync__minibus span { margin-inline: 25%; border-top: 2px dashed var(--line); }
.sync__link, .sync__broken { position: absolute; transform: translateX(-50%); }
.sync__link { top: calc(var(--drop) + var(--tl) * .625); width: calc(100% / 3 - var(--tl) - var(--space-4)); border-top: 2px dotted var(--color-accent-text); }
.sync__link::before, .sync__link::after { content: ""; position: absolute; top: -5px; width: 8px; height: 8px; box-sizing: border-box; border: solid var(--color-accent-text); border-width: 2px 2px 0 0; }
.sync__link::before { left: 0; transform: rotate(-135deg); }
.sync__link::after { right: 0; transform: rotate(45deg); }
.sync__broken { top: calc(var(--drop) + var(--sq) * .625); width: calc(100% / 6 - var(--sq) - var(--space-2)); border-top: 2px dotted var(--line); }
.sync__broken::after, .vers__broken::after { content: "×"; position: absolute; left: 50%; top: -1px; width: 1.125rem; height: 1.125rem; box-sizing: border-box; transform: translate(-50%, -50%); border: 1.5px solid var(--color-accent-text); border-radius: 50%; background: var(--color-surface); color: var(--color-accent-text); font: 700 .8125rem/1 var(--font-sans); display: grid; place-items: center; }
@media (max-width: 400px) { .sync, .vers { --sq: 1.5rem; --tl: 1.875rem; } .sync__broken::after, .vers__broken::after { width: 1rem; height: 1rem; font-size: .75rem; } }
.sync__names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-4); }
.sync__names span { margin-inline: 10%; padding-top: var(--space-2); border-top: 1.5px solid var(--color-foreground); text-align: center; color: var(--color-muted-foreground); }

/* Versões entre arquivos: cada componente com a versão ao lado; a que ficou para trás vem em coral e com contorno */
.vers { --sq: 1.75rem; --tl: 2.125rem; --drop: 1.25rem; --line: var(--color-muted-foreground); }
.vers__panels { display: grid; gap: var(--space-12); }
@media (min-width: 1100px) {
  .vers { --sq: 2.25rem; --tl: 2.5rem; }
  .vers__panels { grid-template-columns: 1fr 1fr; gap: 0; }
  .vers__panel + .vers__panel { padding-left: var(--space-10); margin-left: var(--space-10); border-left: 1px solid var(--color-rule); }
}
.vers__files { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vers__file, .vers__lib { position: relative; display: flex; flex-direction: column; align-items: center; }
.vers__name { margin-top: var(--space-2); color: var(--color-muted-foreground); text-transform: none; letter-spacing: .02em; }
.vers__list { margin-top: var(--space-3); padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.vers__comp { display: flex; align-items: center; gap: 6px; font: 400 .75rem/1.2 var(--font-mono); white-space: nowrap; }
.vers__comp::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px; border: 1.5px solid currentColor; transform: rotate(45deg); }
.vers__comp--main::before { background: currentColor; }
.vers__v { padding: 1px 4px; border: 1.5px solid transparent; }
.vers__v--old { border-color: var(--color-accent-text); color: var(--color-accent-text); font-weight: 700; }
.vers__chart--lib .vers__lib { padding-bottom: var(--drop); }
.vers__chart--lib .vers__file { padding-top: var(--drop); }
.vers__chart--lib .vers__lib::after, .vers__chart--lib .vers__file::before { content: ""; position: absolute; left: 50%; height: var(--drop); border-left: 2px dashed var(--line); transform: translateX(-1px); }
.vers__chart--lib .vers__lib::after { bottom: 0; }
.vers__chart--lib .vers__file::before { top: 0; }
.vers__bus { margin-inline: calc(100% / 6); border-top: 2px dashed var(--line); }
.vers__broken { position: absolute; top: calc(var(--sq) * .625); width: calc(100% / 3 - var(--sq) - var(--space-6)); border-top: 2px dotted var(--line); transform: translateX(-50%); }
.vers__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-10); padding: var(--space-4) 0 0; list-style: none; border-top: 1px solid var(--color-rule); color: var(--color-muted-foreground); }
.vers__legend > li { display: flex; align-items: center; gap: 6px; }
.vers__legend .vers__comp { font: inherit; }
.vers__legend .vers__v { text-transform: none; }
@media (max-width: 400px) { .vers__comp { gap: 4px; font-size: .6875rem; } .vers__comp::before { margin: 0 1px; } .vers__v { padding-inline: 2px; } }

/* Avisos de memória: um embaixo do outro; na tela larga, em escada, no tamanho em que foram capturados */
.warnings { display: grid; gap: var(--space-4); }
.process__img .warnings img { width: 100%; max-width: 840px; height: auto; }
@media (max-width: 599px) {   /* no celular, só a parte da esquerda (aviso e barra de memória), maior para dar para ler */
  .process__img .warnings img { aspect-ratio: 440 / 150; object-fit: cover; object-position: left center; border-radius: 6px; }
}
@media (min-width: 900px) {
  .warnings { gap: var(--space-3); }
  .process__img .warnings img { width: 66%; }
  .warnings img:last-child { justify-self: end; }
}

/* Papéis: um grupo para o Design Ops e outro para os times, com as mesmas cores dos diagramas */
.roles { display: grid; gap: var(--space-10); }
.roles__team { margin-bottom: var(--space-4); color: var(--color-accent-text); }
.roles__cards { display: grid; gap: var(--space-4); }
.roles__card { padding: var(--space-6); border: 1px solid var(--color-border); background: var(--color-background); }
.roles__badge { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--color-foreground); font: 700 .8125rem/1 var(--font-mono); letter-spacing: .04em; }
.roles__badge--ops { background: var(--color-foreground); color: var(--color-background); }
.roles__badge--tl { background: var(--color-accent-text); border-color: var(--color-accent-text); color: var(--color-accent-contrast); }
.roles__name { margin-top: var(--space-4); font: 700 1.125rem/1.1 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; }
.roles__what { margin-top: var(--space-2); color: var(--color-muted-foreground); }
.roles__list { margin-top: var(--space-4); padding: 0; list-style: none; }
.roles__list li { padding: var(--space-2) 0; border-top: 1px solid var(--color-rule); }
@media (min-width: 600px) { .roles__group:last-child .roles__cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .roles { grid-template-columns: 1fr 2fr; gap: var(--space-6); }
  .roles__group:last-child { padding-left: var(--space-6); border-left: 1px solid var(--color-rule); }
}
/* Rio 2016 · a escala: os três tipos de polo com o símbolo de cada um e a área da cidade com uma régua, como nos mapas */
.scale__list { display: grid; }
.scale__item { display: grid; grid-template-columns: 5.5rem auto minmax(0, 1fr); align-items: center; column-gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-rule); }
.scale__icon { display: flex; align-items: center; justify-content: center; height: 2.75rem; color: var(--color-foreground); }
.scale__sym { width: auto; height: 100%; max-width: 100%; overflow: visible; }
.scale__num { font: 700 2.5rem/.9 var(--font-display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.scale__label { color: var(--color-muted-foreground); line-height: 1.5; }
.scale__area { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6) var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-rule); }
.scale__area p { order: -1; display: flex; flex-direction: column; gap: var(--space-2); }
.scale__num--area { color: var(--color-accent-text); }
.scale__bar { display: grid; grid-template-columns: repeat(4, 2.25rem); grid-template-rows: .625rem auto; row-gap: var(--space-2); padding-bottom: 2px; }
.scale__bar i { border: 1.5px solid var(--color-foreground); }
.scale__bar i + i { border-left: 0; }
.scale__bar i:nth-of-type(odd) { background: var(--color-foreground); }
.scale__bar b { grid-row: 2; font: 400 .6875rem/1 var(--font-mono); color: var(--color-muted-foreground); }
.scale__bar b:first-of-type { grid-column: 1; }
.scale__bar b:last-of-type { grid-column: 4; justify-self: end; }
@media (max-width: 400px) { .scale__item { grid-template-columns: 4.25rem auto minmax(0, 1fr); column-gap: var(--space-3); } .scale__icon { height: 2.25rem; } .scale__num { font-size: 2rem; } }
@media (min-width: 768px) {
  .scale__list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-rule); }
  .scale__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); border-top: 0; text-align: center; }
  .scale__item + .scale__item { border-left: 1px solid var(--color-rule); }
  .scale__icon { height: 4rem; margin-bottom: var(--space-3); }
  .scale__num { font-size: clamp(3rem, 6vw, 4.5rem); }
  .scale__area { padding-top: var(--space-8); }
  .scale__bar { grid-template-columns: repeat(4, 3rem); }
}

/* Rio 2016 · do pedido à instalação como uma linha de metrô. A linha é horizontal na tela larga e vertical no celular;
   cada peça tem as duas posições (--dc/--dr e --mc/--mr), e --dk/--mk dizem por quantas paradas o trecho passa,
   para a linha ir do centro da primeira ao centro da última. Tracejado = produção manual; coral = a automação, um expresso. */
.metro { --sq: 1.75rem; --tl: 2rem; --lane: 2.5rem; --w: 3px; position: relative; display: grid; grid-template-columns: var(--lane) var(--lane) minmax(0, 1fr); grid-auto-rows: 1fr; }
.metro > * { grid-column: var(--mc); grid-row: var(--mr); }
.metro__line, .metro__express { position: relative; pointer-events: none; }
.metro__line::before, .metro__express::before { content: ""; position: absolute; }
.metro__line::before { left: calc(50% - var(--w) / 2); top: calc(100% / (2 * var(--mk))); bottom: calc(100% / (2 * var(--mk))); border-left: var(--w) solid var(--color-foreground); }
.metro__line--manual::before { border-left-style: dashed; border-color: var(--color-muted-foreground); }
.metro__express::before { top: calc(100% / (2 * var(--mk)) - var(--w) / 2); bottom: calc(100% / (2 * var(--mk)) - var(--w) / 2); left: calc(var(--lane) / 2); right: calc(var(--lane) / 2 - var(--w) / 2); border: var(--w) solid var(--color-accent-text); border-left: 0; border-radius: 0 1rem 1rem 0; }
.metro__dot { position: relative; z-index: 1; align-self: center; justify-self: center; width: 1rem; height: 1rem; border: var(--w) solid var(--color-foreground); border-radius: 50%; background: var(--color-surface); }
.metro__dot--end { width: 1.375rem; height: 1.375rem; background: var(--color-foreground); box-shadow: inset 0 0 0 3px var(--color-surface); }
.metro__dot--manual { border-width: 2px; border-style: dashed; border-color: var(--color-muted-foreground); }
.metro__dot--auto { border-color: var(--color-accent-text); background: var(--color-accent-text); box-shadow: inset 0 0 0 3px var(--color-surface); }
.metro__label { display: grid; grid-template-columns: var(--tl) minmax(0, 1fr); align-items: center; column-gap: var(--space-3); padding: var(--space-2) 0 var(--space-2) var(--space-3); }
.metro__label .sync__doc { grid-column: 1; justify-self: center; }
.metro__name { grid-column: 2; font: 700 .875rem/1.1 var(--font-display); letter-spacing: -0.005em; text-transform: uppercase; overflow-wrap: break-word; hyphens: auto; }
.metro__name small { display: block; margin-top: 3px; font: 400 .6875rem/1.3 var(--font-mono); letter-spacing: .02em; text-transform: none; color: var(--color-muted-foreground); }
.metro__label--manual .metro__name { color: var(--color-muted-foreground); }
.metro__label--auto .metro__name { color: var(--color-accent-text); }
.metro__label .sync__doc--tl { width: var(--tl); }
.metro__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-rule); color: var(--color-muted-foreground); }
.metro__legend > li { display: flex; align-items: center; gap: var(--space-2); }
.metro__key { flex: none; width: 2rem; border-top: 3px solid; }
.metro__key--manual { border-top-style: dashed; border-color: var(--color-muted-foreground); }
.metro__key--auto { border-color: var(--color-accent-text); }
@media (min-width: 1100px) {
  .metro { --sq: 2rem; --tl: 2.25rem; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: auto var(--lane) var(--lane) auto; grid-auto-rows: auto; }
  .metro > * { grid-column: var(--dc); grid-row: var(--dr); }
  .metro__line::before { left: calc(100% / (2 * var(--dk))); right: calc(100% / (2 * var(--dk))); top: calc(50% - var(--w) / 2); bottom: auto; border-left: 0; border-top: var(--w) solid var(--color-foreground); }
  .metro__line--manual::before { border-top-style: dashed; border-color: var(--color-muted-foreground); }
  .metro__express::before { left: calc(100% / (2 * var(--dk)) - var(--w) / 2); right: calc(100% / (2 * var(--dk)) - var(--w) / 2); top: calc(var(--lane) / 2); bottom: calc(var(--lane) / 2 - var(--w) / 2); border: var(--w) solid var(--color-accent-text); border-top: 0; border-radius: 0 0 1rem 1rem; }
  .metro__label { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--space-1) var(--space-3); text-align: center; }
  .metro__label--auto { justify-content: flex-start; padding: var(--space-3) var(--space-1) 0; }
  .metro__name { font-size: .8125rem; }
}

/* Rio 2016 · a automação passo a passo; a volta dos ajustes rápidos sai da revisão e entra de novo na automação */
.auto { --sq: 1.75rem; --tl: 2rem; --rail: 4.5rem; }
.auto__step { position: relative; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--space-4); padding-bottom: var(--space-8); }
.auto__step:not(:last-child)::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--rail) / 2 - 1px); border-left: 2px solid var(--color-foreground); }
.auto__docs { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 4px; padding-block: var(--space-1) var(--space-2); background: var(--color-surface); align-self: start; }
.auto__docs--stack .sync__doc + .sync__doc { margin-left: calc(var(--sq) * -.62); margin-top: 6px; }
.auto__docs--stack .sync__doc + .sync__doc + .sync__doc { margin-top: 12px; }
.auto__docs--stack .sync__doc:not(:last-child) .sync__tag { visibility: hidden; }
.auto__back { display: none; }
.auto__place { width: auto; height: calc(var(--sq) * 1.25); overflow: visible; }
.auto__sign, .auto__head { fill: var(--color-foreground); }
.auto__ink { fill: none; stroke: var(--color-surface); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auto__ground { stroke: var(--color-foreground); stroke-width: 2; stroke-linecap: round; }
.auto__walker { fill: none; stroke: var(--color-foreground); stroke-width: 3.25; stroke-linecap: round; stroke-linejoin: round; }
.auto__walker--body { stroke-width: 5; }
.auto__text { padding-top: var(--space-3); border-top: 1px solid var(--color-rule); }
.auto__title { display: flex; align-items: baseline; gap: var(--space-2); font: 700 1.0625rem/1.1 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; }
.auto__title .t-micro { color: var(--color-accent-text); font-weight: 700; letter-spacing: .16em; }
.auto__desc { margin-top: var(--space-2); font-size: .875rem; line-height: 1.5; color: var(--color-muted-foreground); }
.auto__step--auto .auto__text { border-top: 3px solid var(--color-accent-text); }
.auto__step--auto .auto__title { color: var(--color-accent-text); }
.auto__cmds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.auto__cmds code { display: block; padding: 4px 7px; border: 1px solid var(--color-accent-text); color: var(--color-accent-text); font-size: .6875rem; line-height: 1.2; white-space: nowrap; }
.auto__loop { margin-left: calc(var(--rail) + var(--space-4)); padding: var(--space-5); border: 1.5px dashed var(--color-accent-text); }
.auto__loop .auto__title { color: var(--color-accent-text); }
.auto__cycle { font: 700 1.25rem/1 var(--font-sans); }
.auto__causes { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.auto__causes li { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); background: var(--color-background); font-size: .875rem; line-height: 1.4; }
.auto__causes strong { display: block; font: 700 .8125rem/1.2 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.auto__causes span { color: var(--color-muted-foreground); }
@media (min-width: 600px) { .auto__causes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .auto { --rail: 4rem; } .auto__step { column-gap: var(--space-3); } .auto__loop { margin-left: 0; } }
@media (min-width: 1100px) {
  .auto { --sq: 2rem; --tl: 2.25rem; --gap: var(--space-8); }
  .auto__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .auto__step { display: flex; flex-direction: column; gap: var(--space-4); padding: 0; }
  .auto__step:not(:last-child)::before { top: calc(var(--space-1) + var(--sq) * .625); bottom: auto; left: 0; right: calc(var(--gap) * -1 + 6px); border-left: 0; border-top: 2px solid var(--color-foreground); }
  .auto__step:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--space-1) + var(--sq) * .625 - 4px); right: calc(var(--gap) * -1 + 5px); width: 9px; height: 9px; border: solid var(--color-foreground); border-width: 2px 2px 0 0; transform: rotate(45deg); }
  .auto__docs { justify-content: flex-start; height: calc(var(--sq) * 1.25 + 12px + var(--space-3)); padding: var(--space-1) var(--space-2) 0 0; }
  .auto__back { display: block; position: relative; flex: 1 0 2rem; align-self: center; margin-top: var(--space-2); border-left: 2px dashed var(--color-accent-text); }
  .auto__back--in::before { content: ""; position: absolute; top: 0; left: -6.5px; width: 11px; height: 11px; border: solid var(--color-accent-text); border-width: 2px 0 0 2px; transform: rotate(45deg); }
  .auto__loopwrap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }
  .auto__loop { --x: calc((100% - 2 * var(--gap)) / 6 - 1px); position: relative; grid-column: 2 / 5; margin: 0; padding: calc(1.5rem + var(--space-6)) var(--space-4) 0; border: 0; text-align: center; }
  .auto__loop::before { content: ""; position: absolute; top: 0; left: var(--x); right: var(--x); height: 1.5rem; border: 2px dashed var(--color-accent-text); border-top: 0; border-radius: 0 0 1rem 1rem; }
  .auto__loop .auto__title { justify-content: center; }
  .auto__loop .auto__desc { max-width: 40ch; margin-inline: auto; }
  .auto__causes { text-align: left; }
}
.stat__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); }
.stat__num { color: var(--color-accent); line-height: .9; font-variant-numeric: tabular-nums; }
.stat__unit { color: var(--color-foreground); }
.stat__note { margin-top: var(--space-3); color: var(--color-muted-foreground); }
.stat__rows { display: grid; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-rule); list-style: none; }
.stat__row { display: grid; grid-template-columns: minmax(7rem, 9.5rem) 1fr 3ch; align-items: center; gap: var(--space-4); }
.stat__bar { height: 8px; background: var(--color-muted); }
.stat__bar i { display: block; height: 100%; background: var(--color-accent); }
.stat__val { text-align: right; font-variant-numeric: tabular-nums; }
/* marcador numerado: liga uma linha do infográfico à peça na imagem logo abaixo */
.pin { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: var(--space-3); border-radius: 50%; background: var(--color-accent-text); color: var(--color-accent-contrast); font: 700 12px/1 var(--font-mono); vertical-align: 1px; }
.has-pins { position: relative; }
.pin--on-img { position: absolute; width: clamp(20px, 2.4vw, 30px); height: clamp(20px, 2.4vw, 30px); margin: 0; font-size: clamp(11px, 1vw, 14px); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--color-surface); }
/* Impacto: uma coluna só; a frase vai até três quartos da largura e os materiais, quando há, ficam embaixo */
.case__impact { display: grid; gap: var(--space-12); margin-top: var(--space-32); padding-block: var(--space-24); border-block: 1px solid var(--color-rule); }
.case__impact .t-display-m { margin-top: var(--space-6); text-wrap: balance; }
@media (min-width: 900px) { .case__impact > div { width: 75%; } .case__impact .materials { grid-template-columns: 1fr 1fr; } }
.materials { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.material { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); background: var(--color-surface); transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease; }
.material span { display: inline-flex; align-items: center; gap: var(--space-3); }
.material:hover { color: var(--color-accent-text); border-color: var(--color-accent); }
.material .icon:last-child { transition: transform var(--motion-base) var(--motion-ease); }
.material:hover .icon:last-child { transform: translateX(4px); }
.case__credits { display: grid; gap: var(--space-8); padding-block: var(--space-16); border-bottom: 1px solid var(--color-rule); }
.case__credits dl { display: grid; gap: var(--space-6); }
.case__credits dt { color: var(--color-muted-foreground); margin-bottom: var(--space-2); }
@media (min-width: 900px) { .case__credits { grid-template-columns: 5fr 6fr; gap: var(--space-24); } .case__impact:has(+ .case__credits) { border-bottom: 0; } }
.case__next { padding-top: var(--space-24); text-align: center; }
.case__next > .t-micro { color: var(--color-muted-foreground); margin-bottom: var(--space-6); }
.case__next a:hover { color: var(--color-accent-text); }
/* Próximo projeto: uma seta de cada lado do nome. Os nomes ficam empilhados na mesma célula,
   então a altura é a do nome mais longo e nada pula ao trocar */
.next__stage { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: var(--space-4); }
.next__list { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
.next__item a { overflow-wrap: break-word; }
/* no celular o nome encolhe para a palavra mais longa (DESTRINCHANDO, ~7,4em) caber entre as setas, com folga */
@media (max-width: 599px) {
  .next__stage { gap: var(--space-2); }
  .next__item a { font-size: clamp(1.5rem, calc((100vw - 8.5rem) / 8), 2.75rem); }
}
.next__btn[data-next-prev] { grid-column: 1; }
.next__btn[data-next-next] { grid-column: 3; }
.next__item { grid-area: 1 / 1; align-self: center; }
.next--live .next__item:not(.is-current) { visibility: hidden; }
.next__item.is-in-fwd { animation: next-in-fwd .45s var(--motion-ease) both; }
.next__item.is-in-back { animation: next-in-back .45s var(--motion-ease) both; }
@keyframes next-in-fwd { from { opacity: 0; transform: translateX(24px); } }
@keyframes next-in-back { from { opacity: 0; transform: translateX(-24px); } }
.next__timer { display: none; }
/* a linha do tempo vai dentro do nome da vez (o JS a move), colada nele */
.next--live .next__timer { display: block; width: min(12rem, 60%); height: 2px; margin: var(--space-4) auto 0; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
.next--live .next__timer.is-running { animation: rec-timer 6s linear forwards; }
.next--live.is-still .next__timer, .motion-off .next--live .next__timer { visibility: hidden; }
.next--live.is-paused .next__timer.is-running { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .next__item.is-in-fwd, .next__item.is-in-back { animation: none; } }

/* ── 404 ─────────────────────────────────────────────────────────────── */
.page-404 main { min-height: 100vh; display: flex; align-items: center; }
.notfound { text-align: center; padding-block: var(--space-16); display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.notfound__num { position: relative; display: inline-block; }
.notfound__num .t-display-xl { font-size: clamp(8rem, 26vw, 18rem); }
.notfound__scribble {
  position: absolute; left: -4%; right: -4%; top: 48%; height: clamp(10px, 2.4vw, 26px);
  background: var(--color-accent); opacity: .55; transform: skewY(-2deg) scaleX(0); transform-origin: left;
  animation: scribble 1.2s var(--motion-ease) .6s forwards; border-radius: 3px;
}
.notfound__stamp { position: absolute; top: 8%; right: -12%; transform: rotate(10deg); }
.notfound .t-lead { max-width: 30rem; color: var(--color-muted-foreground); }
.notfound .btn { margin-top: var(--space-6); }
.notfound__coords { margin-top: var(--space-10); color: var(--color-muted-foreground); }

/* ── Styleguide ──────────────────────────────────────────────────────── */
.sg { padding-top: var(--space-12); padding-bottom: var(--space-24); }
.sg-intro { margin-top: var(--space-12); padding-bottom: var(--space-16); border-bottom: 1px solid var(--color-rule); }
.sg-intro__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-8); margin-top: var(--space-8); }
.sg-intro__row .t-lead { max-width: 40rem; }
.sg-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Índice das seções: no celular fica no topo; no desktop vira uma coluna fixa à direita que marca a seção em leitura */
.sg-toc { margin-top: var(--space-10); }
.sg-toc__title { color: var(--color-muted-foreground); }
.sg-toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 var(--space-6); margin-top: var(--space-3); }
.sg-toc a { position: relative; display: inline-flex; align-items: baseline; gap: var(--space-3); min-height: 32px; padding-block: 6px; font-size: 14px; line-height: 1.4; color: var(--color-muted-foreground); }
.sg-toc a:hover, .sg-toc a[aria-current="true"] { color: var(--color-foreground); }
.sg-toc__n { color: var(--color-accent-text); }
@media (min-width: 1100px) {
  .sg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--space-12); align-items: start; }
  .sg-body { grid-column: 1; grid-row: 1; min-width: 0; }
  .sg-toc { grid-column: 2; grid-row: 1; position: sticky; top: 120px; margin-top: var(--space-16); padding-left: var(--space-5); border-left: 1px solid var(--color-rule); }
  .sg-toc ol { grid-template-columns: 1fr; margin-top: var(--space-4); }
  .sg-toc a { display: flex; }
  .sg-toc a[aria-current="true"]::before { content: ""; position: absolute; left: calc(var(--space-5) * -1 - 2px); top: 6px; bottom: 6px; width: 3px; background: var(--color-accent); }
}
.sg-sec { padding-top: var(--space-24); }
.sg-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-8); color: var(--color-muted-foreground); }
.sg-head > .t-micro { white-space: nowrap; }
.sg-head h2 { min-width: 0; }
.sg-head__dash { width: 40px; height: 1.5px; background: var(--color-accent); }
.sg-desc { max-width: 44rem; margin-bottom: var(--space-10); color: var(--color-muted-foreground); }
.sg-note, .sg-sub { margin-top: var(--space-6); color: var(--color-muted-foreground); }
.sg-sub { margin-top: var(--space-10); margin-bottom: var(--space-4); }
.sg-tile { border: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-6); }
.sg-tile figcaption, .sg-cap { margin-top: var(--space-5); color: var(--color-muted-foreground); line-height: 1.7; }
.sg-tile--paper { background: var(--color-background); }
.sg-tile--ink { background: #1A1A1A; color: #F6F6F6; border-color: #1A1A1A; }
.sg-tile--ink figcaption { color: #A1A1AA; }
:root[data-theme="dark"] .sg-tile--ink { background: #F6F6F6; color: #1A1A1A; }
:root[data-theme="dark"] .sg-tile--ink figcaption { color: #5F5F6B; }

.sg-brand { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .sg-brand { grid-template-columns: 3fr 2fr; } }
.sg-brand__logo { display: flex; align-items: center; justify-content: center; min-height: 220px; }
.sg-logo-h { width: min(100%, 420px); }
.sg-logo-c { width: min(100%, 220px); }
.clearspace { outline: 1px dashed var(--color-accent); outline-offset: 0; padding: 22px; background: color-mix(in srgb, var(--color-accent) 6%, transparent); min-height: 0; margin: 40px auto; width: fit-content; }
.ambigram { display: inline-block; cursor: pointer; transition: transform 1s var(--motion-ease); }
.ambigram:hover, .ambigram:focus-visible, .ambigram.is-turned { transform: rotate(180deg); }

.sg-colors { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.sg-color { border: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-4); display: flex; flex-direction: column; }
.sg-color__swatch { display: grid; grid-template-columns: 1fr 1fr; height: 84px; border: 1px solid var(--color-rule); margin-bottom: var(--space-4);
  background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.sg-color code { color: var(--color-muted-foreground); margin-top: 4px; text-transform: none; letter-spacing: .04em; }
.sg-color__desc { font-size: var(--type-small-size); color: var(--color-muted-foreground); margin-top: var(--space-3); flex: 1; }
.sg-color__vals { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-rule); }
.sg-color__vals > div { display: grid; grid-template-columns: 52px 1fr; align-items: start; gap: var(--space-2); }
.sg-color__vals dt { color: var(--color-muted-foreground); padding-top: 4px; }
.sg-color__vals dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.copy { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; letter-spacing: .06em; text-transform: none; color: var(--color-foreground); }
.copy:hover { color: var(--color-accent-text); }
.copy.is-copied { color: var(--color-accent-text); }
.ratio { color: var(--color-muted-foreground); letter-spacing: .08em; }
.is-fail { color: var(--color-destructive) !important; font-weight: 700; }
.sg-was { margin-top: var(--space-2); color: var(--color-muted-foreground); letter-spacing: .08em; }

.sg-texture { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tx { position: relative; height: 200px; border: 1px solid var(--color-rule); background-color: var(--color-background); overflow: hidden; }
.tx--grid { background-image: linear-gradient(var(--color-paper-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-paper-grid) 1px, transparent 1px), linear-gradient(var(--grid-minor-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor-color) 1px, transparent 1px); background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px; }
.tx--grain { background-image: var(--paper-fiber); background-size: 520px 520px; }
.tx--grain::after { position: absolute; inset: 0; opacity: .22; }
.tx--margin::before { content: ""; position: absolute; top: 0; bottom: 0; left: 36px; width: 3px; background: var(--color-margin-line); }
.tx--margin { background-image: repeating-linear-gradient(transparent 0 23px, var(--color-paper-grid) 23px 24px); }
.code { margin-top: var(--space-6); padding: var(--space-5); overflow-x: auto; background: var(--color-muted); border: 1px solid var(--color-rule); font-size: 0.8125rem; line-height: 1.7; }

.sg-families { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: var(--space-16); }
.sg-family__aa { display: block; font-size: 4.5rem; line-height: 1; letter-spacing: -0.03em; margin-bottom: var(--space-4); }
.sg-family .t-micro { color: var(--color-muted-foreground); margin-top: var(--space-2); }
.sg-family__desc { font-size: var(--type-small-size); margin-top: var(--space-3); color: var(--color-muted-foreground); }
.sg-scale li { padding-block: var(--space-6); border-top: 1px solid var(--color-rule); overflow: hidden; }
.sg-scale__spec { display: flex; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); color: var(--color-muted-foreground); }
.sg-scale__sample { overflow-wrap: anywhere; }

.sg-table { width: 100%; border-collapse: collapse; }
.sg-table th { text-align: left; font-weight: 400; color: var(--color-muted-foreground); padding: 0 var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.sg-table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-rule); vertical-align: middle; }
.sg-table code { text-transform: none; letter-spacing: .04em; }
.sg-space td:last-child { width: 70%; }
.space-bar { display: block; height: 12px; background: var(--color-accent); transform-origin: left; animation: draw .9s var(--motion-ease) both; }
.table-scroll { overflow-x: auto; }
.sg-a11y td:first-child { display: flex; align-items: center; gap: var(--space-4); min-width: 280px; }
.pair { display: inline-grid; place-items: center; width: 44px; height: 32px; background: var(--bg); color: var(--fg); border: 1px solid var(--color-rule); font: 700 1rem/1 var(--font-display); }
.pair--ui i { width: 18px; height: 18px; border: 3px solid var(--fg); border-radius: 50%; }

.sg-griddemo { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; height: 160px; padding: 0 24px 0 72px; border: 1px solid var(--color-border); background: var(--color-surface); }
.sg-griddemo__col { background: color-mix(in srgb, var(--color-accent) 14%, transparent); border-inline: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); }
.sg-griddemo__margin { position: absolute; top: 0; bottom: 0; left: 40px; width: 1px; background: var(--color-accent); }

.sg-borders { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sg-bx { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-4); height: 120px; padding: var(--space-4); color: var(--color-muted-foreground); }
.sg-bx--plain { border: 1px solid transparent; justify-content: center; }
.ruler { height: 14px; background: repeating-linear-gradient(90deg, var(--color-foreground) 0 1px, transparent 1px 8px) bottom / 100% 6px no-repeat, repeating-linear-gradient(90deg, var(--color-foreground) 0 1px, transparent 1px 40px) bottom / 100% 14px no-repeat; opacity: .45; transform-origin: left; animation: draw 1.4s var(--motion-ease) both; }

.sg-ui { display: grid; gap: var(--space-8); }
.sg-ui__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }

.sg-marks { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sg-marks .sg-tile { display: flex; flex-direction: column; justify-content: space-between; min-height: 170px; }
.sg-marks .stamp, .sg-marks .mark-circle { align-self: center; margin-top: var(--space-8); }
.sg-fig { position: relative; height: 90px; background: color-mix(in srgb, var(--color-foreground) 70%, transparent); }

.sg-icons { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sg-icons li { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-2); border: 1px solid var(--color-rule); background: var(--color-surface); }
.sg-icons .t-micro { color: var(--color-muted-foreground); letter-spacing: .08em; text-transform: none; }

/* ── Movimento ───────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stroke { to { stroke-dashoffset: 0; } }
@keyframes scribble { to { transform: skewY(-2deg) scaleX(1); } }
@keyframes drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .circle-mark path { stroke-dashoffset: 0; }
}

@media print {
  .site-header, .site-footer, .paper::after, .paper::before { display: none !important; }
  .paper { background: #fff; }
  main { padding-top: 0; }
}
.sg-marks .annot { flex-wrap: wrap; row-gap: var(--space-2); }
.sg-marks .annot__rule { min-width: 24px; }
.card__soon-label { flex: none; color: var(--color-muted-foreground); letter-spacing: .16em; margin-right: -.16em; white-space: nowrap; }   /* a margem compensa o espaçamento depois da última letra, alinhando à direita do ano */

/* Cards: o ano em cima e o "em breve" embaixo, alinhados à direita */
.card__stamps { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }

/* Cases confidenciais: capa borrada no card e tela de senha */
.stamp--lock { background: var(--color-foreground); color: var(--color-background); border-color: transparent; }
.card__lock { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; }
.card--locked .card__media img.is-blurred { transform: scale(1.12); }
@media (hover: hover) { .card--locked a.card__link:hover .card__media img.is-blurred { transform: scale(1.08); } }
.lock { position: relative; display: grid; place-items: center; min-height: min(70vh, 640px); padding: var(--space-10) var(--gutter, 16px); overflow: hidden; }
.lock__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
.lock__panel { position: relative; width: min(100%, 480px); padding: var(--space-10); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 18px 48px rgba(0,0,0,.18); }
.lock__panel .stamp { margin-bottom: var(--space-6); }
.lock__text { margin-top: var(--space-4); color: var(--color-muted-foreground); }
.lock__form { display: grid; gap: var(--space-3); margin-top: var(--space-8); }
.lock__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.lock__input { flex: 1 1 180px; min-height: 48px; padding: 0 var(--space-4); font: inherit; color: var(--color-foreground); background: var(--color-background); border: 1px solid var(--color-border); border-radius: 0; }
.lock__input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lock__input[aria-invalid="true"] { border-color: var(--color-destructive); }
.lock__error { color: var(--color-destructive); }
.lock__ask { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-rule); color: var(--color-muted-foreground); }
.lock__ask a { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }

a.card__link:focus-visible { outline: none; }
a.card__link:focus-visible .card__media { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }

/* Sobre: currículo detalhado */
.summary .t-lead + .t-lead { margin-top: var(--space-6); }
.summary .t-lead { max-width: 40rem; }
/* Marcas em box próprio, abaixo do resumo, como etiquetas soltas (mesmo papel das tags de Expertise, menores) */
.summary-stack { display: grid; gap: var(--space-6); }
.clients { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.skill--sm { padding: 10px 14px; background: var(--color-background); }
.alloc { display: grid; gap: var(--space-8); margin-top: var(--space-8); padding-left: var(--space-6); border-left: 1.5px solid var(--color-rule); }
.alloc__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.alloc__period { color: var(--color-muted-foreground); }
.alloc__list { display: grid; gap: var(--space-2); margin-top: var(--space-3); max-width: 38rem; color: var(--color-muted-foreground); }
.alloc__list li { position: relative; padding-left: var(--space-5); }
.alloc__list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1.5px; background: var(--color-accent); }
.timeline__list { margin-top: var(--space-5); }
/* nome do projeto com case publicado: sublinhado de lápis e seta, como os outros links do site */
.alloc__case { background: linear-gradient(var(--color-accent), var(--color-accent)) left bottom / 100% 1.5px no-repeat; padding-bottom: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color var(--motion-fast) ease; }
.alloc__case:hover { color: var(--color-accent-text); }
.alloc__case svg { display: inline-block; margin-left: 8px; vertical-align: -1px; color: var(--color-accent-text); transition: transform var(--motion-fast) ease; }
.alloc__case:hover svg { transform: translateX(3px); }
.timeline__outro { margin-top: var(--space-5); }
/* Marcas como links para a experiência na Trajetória: mesma etiqueta, o foco pelo teclado ganha o mesmo destaque do hover */
.clients > li { display: flex; }
.clients a.skill:focus-visible { transform: rotate(0) scale(1.03); color: var(--color-accent-text); border-color: var(--color-accent); }
/* ao chegar pela etiqueta, a experiência pisca um contorno de destaque (com movimento reduzido, o contorno fica parado) */
.timeline__item:target, .alloc__item:target { outline: 2px solid transparent; outline-offset: 8px; animation: xp-flash 2.8s ease-out; }
.alloc__item:target { outline-offset: 12px; }
@keyframes xp-flash { 0%, 45% { outline-color: var(--color-accent); } 100% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .timeline__item:target, .alloc__item:target { outline-color: var(--color-accent); } }
/* Cursos e idiomas: cada curso é uma ficha com área, onde foi feito e onde virou trabalho de verdade;
   idiomas com o nível em texto e em traços de lápis */
.extras { display: grid; gap: var(--space-5); }
.extras__title { color: var(--color-muted-foreground); }
.extras__title:not(:first-child) { margin-top: var(--space-8); }
.courses, .langs { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .courses, .langs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.course { display: flex; flex-direction: column; transition: border-color var(--motion-fast) ease, transform var(--motion-base) var(--motion-ease); }
.course:hover { border-color: var(--color-accent); transform: rotate(-.4deg); }
.course__head { display: flex; align-items: center; gap: var(--space-3); color: var(--color-accent-text); }
.course__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-border); background: var(--color-muted); }
.course__n { margin-left: auto; color: var(--color-muted-foreground); }
.course__title { margin-top: var(--space-5); }
.course__school { margin-top: var(--space-2); color: var(--color-muted-foreground); font-size: 14px; }
.course__used { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px dashed var(--color-rule); font-size: 15px; line-height: 1.55; }
.course__used .t-micro { display: block; margin-bottom: var(--space-2); color: var(--color-muted-foreground); }
/* o nome em cima e o nível embaixo: nas fichas de meia largura o nome, os traços e o nível não cabem numa linha só */
.lang { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.lang__rate { display: flex; align-items: center; gap: var(--space-4); }
.lang__meter { width: 74px; height: 22px; flex: none; }
.lang__meter path { fill: none; stroke: var(--color-rule); stroke-width: 2.4; stroke-linecap: round; }
.lang__meter path.is-on { stroke: var(--color-accent); }
.lang__level { color: var(--color-muted-foreground); }
.recs { display: grid; gap: var(--space-12); }
.rec blockquote p { font-size: var(--type-lead-size); line-height: 1.5; max-width: 40rem; }
.rec__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.rec__by .t-micro { color: var(--color-muted-foreground); }
.recs__note { margin-top: var(--space-10); color: var(--color-muted-foreground); }

/* Textos corridos em fichas, no mesmo padrão dos boxes de Marca e Cores do styleguide:
   a grade do fundo não passa por trás das letras. */
.summary, .clients-box, .timeline__item, .rec, .course, .lang, .case__narrative > div:first-child, .highlight {
  border: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-6);
}
@media (min-width: 768px) { .summary, .clients-box, .timeline__item, .rec, .case__narrative > div:first-child { padding: var(--space-8) var(--space-10); } }
.timeline { gap: var(--space-6); }
.timeline__item::after, .highlight::after { content: none; }
.timeline__item .t-heading { margin-top: var(--space-5); }
.case__highlights { display: grid; gap: var(--space-4); }
.recs { gap: var(--space-6); }
.rec blockquote { margin: 0; }

/* Revisão de UX: alvos de toque com no mínimo 24px (44px em tela de toque) e nada vazando para os lados */
html, body { overflow-x: clip; }
.copy { min-height: 24px; display: inline-flex; align-items: center; }
.site-footer a, .lock__ask a { display: inline-flex; align-items: center; min-height: 24px; }
@media (pointer: coarse) { .site-footer a, .lock__ask a, .link-accent { min-height: 44px; } }
.table-scroll:focus-visible, pre.code:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.about__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* Home: abertura. A folha aparece, o logo é "escrito", o lápis risca a linha e a folha sobe revelando o conteúdo.
   Só na primeira visita da sessão; some sozinha mesmo sem JS; desligada com "reduzir movimento". */
.intro {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer;
  background-color: var(--color-background);
  background-image: linear-gradient(var(--color-paper-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-paper-grid) 1px, transparent 1px);
  background-size: var(--grid-major) var(--grid-major);
  animation: intro-out .8s cubic-bezier(.7, 0, .2, 1) 1.6s forwards;
}
.intro__inner { display: grid; justify-items: center; gap: var(--space-5); }
.intro__svg { display: block; height: 56px; width: auto; color: var(--color-foreground); }
.intro__logo { clip-path: inset(0 100% 0 0); animation: intro-write .9s var(--motion-ease) .15s forwards; }
.intro__line { width: 180px; height: 1.5px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; animation: draw 1s var(--motion-ease) .35s forwards; }
.intro__note { color: var(--color-muted-foreground); opacity: 0; animation: intro-fade .5s ease .5s forwards; }
.intro.intro--skip { animation: intro-out .45s cubic-bezier(.7, 0, .2, 1) forwards; }
.intro-seen .intro { display: none; }
@keyframes intro-write { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-fade { to { opacity: 1; } }
@keyframes intro-out { to { transform: translateY(-100%); visibility: hidden; } }
/* o conteúdo entra logo depois que a folha sobe */
html:not(.intro-seen) .page-home .hero__line { animation-delay: 1.85s; }
html:not(.intro-seen) .page-home .hero__line:nth-child(2) { animation-delay: 1.95s; }
html:not(.intro-seen) .page-home .hero__line:nth-child(3) { animation-delay: 2.05s; }
html:not(.intro-seen) .page-home .hero .pencil-rule::before { animation-delay: 2.2s; }

/* Home: o hero ocupa a primeira tela e o indicador leva para Trabalhos */
.page-home .hero { min-height: calc(100svh - 72px); display: flex; flex-direction: column; padding-bottom: var(--space-10); }
.page-home .hero .pencil-rule { margin-top: var(--space-10); }
.hero__center { margin-block: auto; padding-block: var(--space-10); }
.page-home .hero__main { margin-top: 0; }
.page-home .hero__desc { margin-top: var(--space-10); }
.hero__foot { display: flex; }
.scroll-cue { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; color: var(--color-muted-foreground); opacity: 0; animation: intro-fade .6s ease 1s forwards; }
html:not(.intro-seen) .page-home .scroll-cue { animation-delay: 2.6s; }
.scroll-cue:hover, .scroll-cue:focus-visible { color: var(--color-accent-text); }
.scroll-cue__track { position: relative; width: 1.5px; height: 48px; background: var(--color-rule); overflow: hidden; }
.scroll-cue__tick { position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--color-accent); animation: tick 1.8s var(--motion-ease) infinite; }
@keyframes tick { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .scroll-cue { opacity: 1; }
  .scroll-cue__tick { animation: none; transform: none; }
}

/* Styleguide: cada seção vira uma ficha, como os boxes de texto do resto do site */
.sg-sec { margin-top: var(--space-16); padding: var(--space-8) var(--space-5); border: 1px solid var(--color-border); background: var(--color-surface); }
@media (min-width: 768px) { .sg-sec { padding: var(--space-10) var(--space-10) var(--space-12); } }
.sg-sec .sg-desc { color: var(--color-foreground); }
.sg-rule { display: flex; gap: var(--space-3); align-items: flex-start; max-width: 44rem; margin: calc(var(--space-4) * -1) 0 var(--space-10); padding: var(--space-4) var(--space-5); border-left: 2px solid var(--color-accent); background: var(--color-background); }
.sg-rule svg { flex: none; margin-top: 3px; color: var(--color-accent-text); }
.sg-note { line-height: 1.6; }

/* Revisão de fontes: frases em Inter; mono em caixa alta só para rótulos curtos */
.about__side .t-small { color: var(--color-muted-foreground); max-width: 240px; margin-top: var(--space-4); }
.rec { position: relative; }
.rec__mark { display: block; height: .55em; font: 700 64px/1 var(--font-display); color: var(--color-accent); }
.rec blockquote p { font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.65; font-weight: 400; letter-spacing: 0; max-width: 40rem; color: var(--color-foreground); }
@media (min-width: 768px) { .rec blockquote p { font-size: 1.25rem; } }
.rec__by { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-rule); }
.rec__name { font: 700 15px/1.4 var(--font-sans); color: var(--color-foreground); }
.rec__ctx { font: 400 14px/1.5 var(--font-sans); color: var(--color-muted-foreground); }

/* Ambigrama do guia: caixa do tamanho do desenho, para girar em torno do próprio centro sem empurrar nada */
.sg-brand__logo { overflow: hidden; }
.sg-brand__logo .ambigram { display: block; width: min(100%, 200px); line-height: 0; transform-origin: 50% 50%; }
.sg-brand__logo .ambigram .sg-logo-c { display: block; width: 100%; height: auto; }

/* Recomendações em baralho (com JS): as fichas ficam na mesma célula, uma sobre a outra.
   A de cima fica reta para leitura; as de baixo aparecem tortas pelas bordas, como papel empilhado. */
.recs--deck { display: grid; padding: 0 14px 16px 0; }
.recs--deck .rec {
  grid-area: 1 / 1; display: flex; flex-direction: column;
  box-shadow: 0 14px 30px -24px rgba(0, 0, 0, .45);
  transition: transform .55s var(--motion-ease), opacity .4s ease;
}
.recs--deck .rec blockquote { flex: 1; }
.recs--deck .rec[data-depth="0"] { z-index: 4; transform: none; }
.recs--deck .rec[data-depth="1"] { z-index: 3; transform: translate(7px, 8px) rotate(var(--tilt)); }
.recs--deck .rec[data-depth="2"] { z-index: 2; transform: translate(13px, 15px) rotate(var(--tilt)); }
.recs--deck .rec[data-depth="3"] { z-index: 1; transform: translate(13px, 15px) rotate(var(--tilt)); opacity: 0; }
.recs--deck .rec.is-dealt { z-index: 5; animation: rec-deal .7s var(--motion-ease) both; }
.recs--deck .rec.is-undealt { z-index: 5; animation: rec-undeal .45s ease-in both; }
@keyframes rec-deal { from { transform: translate(32%, -12%) rotate(7deg) scale(1.03); opacity: 0; } 35% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes rec-undeal { from { transform: none; opacity: 1; } to { transform: translate(32%, -12%) rotate(7deg) scale(1.03); opacity: 0; } }

.recs__controls { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.recs__controls[hidden] { display: none; }
.recs__btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-foreground); cursor: pointer;
  transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.recs__btn:hover { border-color: var(--color-accent); color: var(--color-accent-text); }
.recs__btn svg { width: 16px; height: 16px; }
.recs__count { min-width: 7ch; text-align: center; font-variant-numeric: tabular-nums; color: var(--color-muted-foreground); }
/* tempo da ficha: uma linha que corre por cima da borda de baixo da ficha da frente */
.rec__timer { display: none; }
.recs--deck .rec__timer { display: block; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.recs--deck .rec__timer.is-running { animation: rec-timer 10s linear forwards; }
.recs--deck.is-still .rec__timer { display: none; }
.is-paused .recs--deck .rec__timer.is-running { animation-play-state: paused; }
@keyframes rec-timer { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .recs--deck .rec.is-dealt, .recs--deck .rec.is-undealt { animation: none; }
}

/* Home: o círculo passeia pelas etapas. Só o item marcado mostra o traço; o que sai é apagado no mesmo sentido do lápis */
.hero__tags li:not(.is-marked):not(.is-unmarking) .circle-mark path { animation: none; stroke-dashoffset: 1; }
.hero__tags li.is-marking .circle-mark path { animation: stroke .9s var(--motion-ease) forwards; }
.hero__tags li.is-unmarking .circle-mark path { animation: unstroke .55s ease-in forwards; }
.hero__tags .circle-mark { transition: none; }
@keyframes unstroke { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
html:not(.intro-seen) .page-home .hero__tags li.is-marked:not(.is-marking) .circle-mark path { animation-delay: 2.4s; }

/* Home: "Ver trabalhos" na linha do subtítulo, à direita (no celular desce para baixo do texto) */
.hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-8) var(--space-10); margin-top: var(--space-10); }
.page-home .hero__row .hero__desc { margin-top: 0; }
@media (min-width: 768px) { .hero__row .scroll-cue { align-items: flex-end; text-align: right; } }

/* Home: linha das etapas à direita; "Ver trabalhos" ao lado da própria linha, que fica alinhada à das etapas */
@media (min-width: 1024px) {
  .hero__tags { align-items: flex-end; text-align: right; padding: var(--space-3) var(--space-6) 0 0; border-left: 0; border-right: 1px solid var(--color-rule); }
}
.hero__row .scroll-cue { flex-direction: row; align-items: center; gap: var(--space-4); }
.hero__row .scroll-cue__track { width: 3px; border-radius: 2px; }
@media (min-width: 768px) { .hero__row .scroll-cue { align-items: center; text-align: right; } }

/* Home: rabiscos de brainstorm no fundo da pág. 01 (desenhados e apagados pelo JS) */
.page-home .hero { position: relative; }
.page-home .hero > :not(.sketches) { position: relative; z-index: 1; }
.sketches { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); z-index: 0; pointer-events: none; overflow: visible; color: var(--color-foreground); }
.sketches path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
/* intensidade do grafite: no escuro o traço claro já aparece mais, então pesa menos */
.sketches { --sk: 1; }
:root[data-theme="dark"] .sketches { --sk: .75; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sketches { --sk: .75; } }
.sketches .sk-g { stroke-opacity: calc(.16 * var(--sk)); }
.sketches .sk-l { stroke-opacity: calc(.36 * var(--sk)); }
.sketches .sk-b { stroke-opacity: calc(.44 * var(--sk)); }
.sketches .sk-a { stroke-opacity: calc(.6 * var(--sk)); }
.sketches .is-accent { color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .sketches { display: none; } }