/* ─── Tokens ──────────────────────────────────────────────────────────────────
   As 5 tintas começam em cinza e "voltam a ter cor" conforme a rolagem
   (classes i1–i4 no <html>, aplicadas em js/main.js). */
@property --ink-indigo { syntax: '<color>'; inherits: true; initial-value: #4a4c55 }
@property --ink-violet { syntax: '<color>'; inherits: true; initial-value: #7b7d84 }
@property --ink-ochre  { syntax: '<color>'; inherits: true; initial-value: #c9c5bb }
@property --ink-peach  { syntax: '<color>'; inherits: true; initial-value: #d9d4ca }
@property --ink-teal   { syntax: '<color>'; inherits: true; initial-value: #a9aaab }
@property --paper      { syntax: '<color>'; inherits: true; initial-value: #f3efe6 }
@property --sheet      { syntax: '<color>'; inherits: true; initial-value: #faf7f0 }
@property --graphite   { syntax: '<color>'; inherits: true; initial-value: #25272d }
@property --muted      { syntax: '<color>'; inherits: true; initial-value: #565962 }
@property --rule       { syntax: '<color>'; inherits: true; initial-value: #d3cdc1 }

html {
  --paper: #f3efe6; --sheet: #faf7f0; --graphite: #25272d; --muted: #565962; --rule: #d3cdc1;
  --on-ink: #1f2026; --blend: multiply; --blob-o: .55; --grain-o: .2; --focus: #3B3F8F;
  --ink-indigo: #4a4c55; --ink-violet: #7b7d84; --ink-ochre: #c9c5bb; --ink-peach: #d9d4ca; --ink-teal: #a9aaab;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Karla', system-ui, sans-serif;
  --gut: clamp(20px, 4vw, 56px);
  transition: --ink-indigo 1.6s ease, --ink-violet 1.6s ease, --ink-ochre 1.6s ease, --ink-peach 1.6s ease, --ink-teal 1.6s ease,
              --paper .6s, --sheet .6s, --graphite .6s, --muted .6s, --rule .6s;
  background: var(--paper);
  scroll-behavior: smooth;
}
html[data-theme="night"] {
  --paper: #121829; --sheet: #19213a; --graphite: #ece7db; --muted: #aab0c0; --rule: #2f3956;
  --on-ink: #121829; --blend: screen; --blob-o: .42; --grain-o: .1; --focus: #B3A2EA;
  --ink-indigo: #8e92a3; --ink-violet: #737789; --ink-ochre: #5c6072; --ink-peach: #4b5064; --ink-teal: #666b7d;
}
html.i1 { --ink-indigo: #3B3F8F; --ink-violet: #6B5CA5 }
html.i2 { --ink-ochre: #E8B931 }
html.i3 { --ink-peach: #F2B5A7 }
html.i4 { --ink-teal: #6FB7B7 }
html[data-theme="night"].i1 { --ink-indigo: #8C91F0; --ink-violet: #B3A2EA }
html[data-theme="night"].i2 { --ink-ochre: #F2C94C }
html[data-theme="night"].i3 { --ink-peach: #F6BFB1 }
html[data-theme="night"].i4 { --ink-teal: #7FD1D1 }
html:has(#drawer[data-open="true"]) { overflow: hidden }

/* ─── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
body { margin: 0; background: var(--paper); color: var(--graphite); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden }
a { color: var(--graphite); text-decoration-color: var(--ink-indigo); text-decoration-thickness: 1px; text-underline-offset: .22em }
a:hover { color: var(--ink-indigo); text-decoration-thickness: 2px }
button { font-family: var(--sans) }
::selection { background: var(--ink-ochre); color: var(--on-ink) }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 7px 3px 8px 4px }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.label { margin: 0 0 12px; font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }

@keyframes jlPaint   { from { opacity: 0; filter: blur(10px); transform: translateY(.06em) } }
@keyframes jlRise    { from { opacity: 0; transform: translateY(36px) } }
@keyframes jlDraw    { from { stroke-dashoffset: 1 } }
@keyframes jlThread  { from { transform: scaleY(0) } }
@keyframes jlFill    { from { background: transparent; transform: scale(.5) rotate(-20deg) } }
@keyframes jlBreathe { from { transform: scale(.94) rotate(-4deg) } to { transform: scale(1.05) rotate(4deg) } }
@keyframes jlSpread  { from { clip-path: circle(6% at 18% 10%) } to { clip-path: circle(150% at 18% 10%) } }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s }
::view-transition-new(jl-open) { animation: jlSpread .8s cubic-bezier(.2,.7,.2,1) both }
::view-transition-old(jl-open) { animation: none; opacity: 0 }

/* ─── Camadas globais ─────────────────────────────────────────────────────── */
.grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: var(--grain-o); mix-blend-mode: var(--blend) }
.drops { position: fixed; inset: 0; z-index: 60; pointer-events: none; mix-blend-mode: var(--blend) }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--graphite); color: var(--paper); font: 700 15px var(--sans); text-decoration: none; border-radius: 6px 3px 7px 4px }
.skip:focus { top: 12px; color: var(--paper) }

.blob { position: absolute; z-index: 0; opacity: var(--blob-o); mix-blend-mode: var(--blend); animation: jlBreathe var(--dur, 20s) ease-in-out infinite var(--dir, alternate) }
.blob > div { width: 100%; height: 100%; background: var(--ink); border-radius: var(--br); filter: url(#jl-bleed) }

/* ─── Nav ─────────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--paper) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
.nav__in { max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px }
.nav__logo { font: italic 500 26px/1 var(--serif); text-decoration: none; white-space: nowrap }
.nav__links { margin: 0; padding: 0; list-style: none; display: flex; gap: clamp(14px, 2vw, 30px) }
.nav__links a { font: 500 15px var(--sans); color: var(--muted); text-decoration: none; text-decoration-style: wavy; text-decoration-color: var(--ink-indigo); text-decoration-thickness: 1.5px; text-underline-offset: .4em }
.nav__links a[aria-current="true"] { color: var(--graphite); text-decoration-line: underline }
.nav__tools { display: flex; align-items: center; gap: 10px }
.palette { display: flex; gap: 4px; margin-right: 6px }
.palette span { width: 11px; height: 11px }
.tool { height: 40px; min-width: 44px; padding: 0 10px; background: none; border: 1px solid var(--rule); color: var(--graphite); font: 700 13px var(--sans); cursor: pointer }
.tool:hover { border-color: var(--graphite) }
.tool span { color: var(--muted); font-weight: 500 }
.tool span.is-on { color: var(--graphite); font-weight: 700 }
.tool span[aria-hidden] { margin: 0 3px; opacity: .5 }
.tool--sq { width: 44px; padding: 0; display: grid; place-items: center }
.moon { width: 14px; height: 14px; border-radius: 50%; background: var(--graphite); box-shadow: inset -5px -2px 0 0 var(--paper) }
.menu-btn { display: none; height: 40px; padding: 0 14px; background: var(--graphite); border: 0; border-radius: 8px 14px 9px 16px; color: var(--paper); font: 700 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer }
@media (max-width: 899px) {
  .nav__links { display: none }
  .menu-btn { display: block }
}
@media (max-width: 420px) { .palette { display: none } }

.drawer { position: fixed; inset: 0; z-index: 45; background: var(--paper); padding: 96px 28px 32px; display: flex; flex-direction: column; justify-content: space-between; overflow: auto;
  transition: clip-path .6s cubic-bezier(.7,0,.2,1), visibility .6s; clip-path: circle(0% at calc(100% - 50px) 33px); visibility: hidden }
.drawer[data-open="true"] { clip-path: circle(150% at calc(100% - 50px) 33px); visibility: visible }
.drawer ol { list-style: none; margin: 0; padding: 0 }
.drawer li { border-bottom: 1px solid var(--rule) }
.drawer li a { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; font: 300 clamp(40px, 12vw, 60px)/1.05 var(--serif); text-decoration: none }
.drawer li a span { font: italic 500 18px var(--serif); color: var(--ink-indigo) }
.drawer__foot { margin: 24px 0 0; font: 500 15px var(--sans) }

main { position: relative; z-index: 1 }

/* ─── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow-x: clip }
#dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0 }
.hero__in { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: clamp(24px,5vh,56px) var(--gut) clamp(48px,8vh,88px); min-height: calc(100svh - 66px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px }
.hero__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.hero__mid { display: flex; flex-wrap: wrap; align-items: center; gap: 40px clamp(32px,5vw,80px) }
.hero__name { flex: 3 1 520px; min-width: 0; margin: 0; font: 300 clamp(4.2rem,12.5vw,12.5rem)/.82 var(--serif); letter-spacing: -.03em }
.hero__line { display: block }
.hero__line > span { display: inline-block; animation: jlPaint 1.3s cubic-bezier(.2,.7,.2,1) var(--d) both }
.hero__line--ink { font-style: italic; color: var(--ink-indigo) }
.hero__photo { flex: 1 1 240px; max-width: 360px; min-width: 0; margin: 0; position: relative }
.hero__photo svg { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.03); transition: filter .9s ease }
.hero__photo svg:hover { filter: grayscale(0) }
.hero__badge { position: absolute; left: -18px; bottom: 22px; margin: 0; padding: 10px 16px; border: 1.5px solid var(--graphite); border-radius: 22px 12px 26px 14px; background: var(--paper); transform: rotate(-5deg); font: 700 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 8px }
.hero__badge span[aria-hidden] { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-teal); box-shadow: 0 0 0 2px var(--graphite) }
.hero__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 56px }
.hero__lead { flex: 1 1 320px; max-width: 600px; margin: 0; font: 400 clamp(20px,1.8vw,25px)/1.45 var(--sans); text-wrap: pretty }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px; font: 700 15px var(--sans); text-decoration: none; transition: transform .3s }
.btn--solid { background: var(--graphite); color: var(--paper); border-radius: 20px 10px 24px 12px }
.btn--solid:hover { transform: translateY(-2px) rotate(-1deg); color: var(--paper) }
.btn--line { border: 1.5px solid var(--graphite); border-radius: 10px 22px 12px 24px }
.btn--line:hover { transform: translateY(-2px) rotate(1deg) }

/* ─── Seções ──────────────────────────────────────────────────────────────── */
.sec { position: relative; overflow-x: clip; scroll-margin-top: 66px }
.sec__in { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: clamp(80px,14vh,160px) var(--gut) }
.sec__in--tight { padding: clamp(64px,10vh,120px) var(--gut) }
.sec__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 48px; margin-bottom: 56px }
.sec__title { display: flex; align-items: baseline; gap: 16px }
.sec__title h2 { margin: 0; font: 300 clamp(56px,7vw,104px)/.9 var(--serif); letter-spacing: -.02em }
.sec__num { font: italic 500 24px var(--serif); color: var(--ink-indigo); letter-spacing: 0 }
.sec__hint { margin: 0; max-width: 440px; font: 400 16px/1.55 var(--sans); color: var(--muted) }
.stroke { display: block; width: 100%; height: 14px; margin-top: 18px; overflow: visible }
.stroke path { fill: none; stroke-linecap: round; stroke-dasharray: 1 }

/* Animações ligadas à rolagem (onde houver suporte) */
@supports (animation-timeline: view()) {
  .rise        { animation: jlRise linear both; animation-timeline: view(); animation-range: entry 0% cover 25% }
  .note        { animation: jlRise linear both; animation-timeline: view(); animation-range: entry 0% cover 22% }
  .stroke path { animation: jlDraw linear both; animation-timeline: view(); animation-range: entry 10% cover 35% }
  .tl__thread  { animation: jlThread linear both; animation-timeline: view(); animation-range: entry 15% cover 75% }
  .tl__node--fill { animation: jlFill linear both; animation-timeline: view(); animation-range: entry 40% cover 35% }
  .contact__title { animation-range: entry 0% cover 30% }
}

/* ─── 01 Sobre ────────────────────────────────────────────────────────────── */
.about { display: flex; flex-wrap: wrap; gap: 48px clamp(40px,6vw,110px) }
.about__head { flex: 0 1 300px; min-width: 0 }
.about__notes { margin: 20px 0 0; font: italic 400 20px/1.4 var(--serif); color: var(--muted) }
.notes { flex: 1 1 520px; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: 40px 48px; align-items: start }
.note { position: relative; margin-top: var(--mt); padding: 28px 26px 26px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px 8px 5px 9px; transform: rotate(var(--rot));
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in oklab, var(--rule) 60%, transparent) 31px 32px) }
.note__n { display: block; margin-bottom: 8px; font: italic 500 34px/1 var(--serif); color: var(--ink-indigo) }
.note p { margin: 0; font: 400 17px/1.88 var(--sans); text-wrap: pretty }
.brush { padding: 0 1px; background: linear-gradient(100deg, transparent 1%, color-mix(in oklab, var(--ink-ochre) 42%, transparent) 3% 96%, transparent 99%) 0 88% / 100% 52% no-repeat }

/* ─── 02 Stack ────────────────────────────────────────────────────────────── */
.stack { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start }
.stack__map { position: relative; flex: 2 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,220px),1fr)); gap: 44px 32px }
.stack__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0 }
.stack__lines path { fill: none; stroke: var(--ink-ochre); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; shape-rendering: geometricPrecision; stroke-dasharray: 1; animation: jlDraw .9s cubic-bezier(.2,.7,.2,1) both }
.domain { position: relative; z-index: 1 }
.domain__label { margin: 0 0 14px; font: italic 400 24px/1 var(--serif); color: var(--muted) }
.domain__pills { display: flex; flex-wrap: wrap; gap: 10px }
.pill { min-height: 44px; padding: 8px 16px; cursor: pointer; font: 500 16px var(--sans); background: var(--sheet); color: var(--graphite); border: 1.5px solid var(--rule); border-radius: var(--r); transition: background .3s, border-color .3s, transform .3s }
.pill:hover { transform: rotate(-2deg) scale(1.04) }
.pill.is-rel { background: color-mix(in oklab, var(--ink-ochre) 18%, var(--sheet)); border-color: var(--ink-ochre) }
.pill.is-on { background: var(--ink-ochre); color: var(--on-ink); border-color: var(--ink-ochre); transform: rotate(-2deg) scale(1.06) }
.pill sup { margin-left: 4px; font: 700 10px var(--sans); opacity: .7 }
.skill-note { flex: 1 1 300px; min-width: 0; position: sticky; top: 96px; padding: 36px 28px 28px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 5px 9px 4px 8px; transform: rotate(.6deg) }
.skill-note::before { content: ''; position: absolute; top: -12px; left: 40%; width: 100px; height: 24px; background: var(--ink-ochre); opacity: .7; transform: rotate(-3deg) }
.skill-note h3 { margin: 8px 0 6px; font: italic 400 clamp(44px,4.4vw,64px)/1 var(--serif); letter-spacing: -.01em }
.skill-note__count { margin: 0 0 22px; font: 500 14px var(--sans); color: var(--muted) }
.skill-note__ctx { margin-bottom: 18px }
.skill-note__ctx p:last-child { margin: 0; font: 400 23px/1.3 var(--serif) }
.skill-note__empty { margin: 0 0 18px; font: 400 16px/1.55 var(--sans) }
.rel { display: flex; flex-wrap: wrap; gap: 6px }
.rel button { min-height: 36px; padding: 4px 12px; background: none; border: 1px solid var(--rule); border-radius: 12px 7px 14px 8px; color: var(--graphite); font: 500 14px var(--sans); cursor: pointer }
.rel button:hover { border-color: var(--graphite) }

/* ─── 03 Projetos ─────────────────────────────────────────────────────────── */
.work__count { margin: 0; font: italic 300 clamp(64px,9vw,140px)/.8 var(--serif); color: var(--rule) }
.projects { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px 44px }
.proj { position: relative; flex: var(--flex); min-width: 0; margin-top: var(--mt); container-type: inline-size; padding: clamp(26px,4vw,48px) clamp(22px,4vw,48px);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 4px 7px 5px 8px; transform: rotate(var(--rot)); transition: transform .5s cubic-bezier(.2,.7,.2,1);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in oklab, var(--rule) 45%, transparent) 31px 32px) }
.proj:hover { transform: rotate(0deg) translateY(-4px) }
.proj.is-open { view-transition-name: jl-open }
.proj__tape { position: absolute; top: -12px; left: var(--tape); width: 104px; height: 24px; background: var(--ink-peach); opacity: .8; transform: rotate(-4deg) }
.proj__meta { margin: 0 0 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.proj h3 { margin: 0 0 18px; font: 300 clamp(32px,9cqi,84px)/.95 var(--serif); letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere }
.proj__desc { margin: 0 0 18px; max-width: 68ch; font: 400 17px/1.6 var(--sans); text-wrap: pretty }
.proj__tags { margin: 0 0 22px; font: italic 400 19px/1.4 var(--serif); color: var(--muted) }
.proj__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px }
.proj__actions a { font: 700 15px var(--sans) }
.btn-sm { height: 46px; padding: 0 20px; background: var(--graphite); border: 0; border-radius: 18px 9px 20px 10px; color: var(--paper); font: 700 14px var(--sans); cursor: pointer; transition: transform .25s }
.btn-sm:hover { transform: rotate(-1.5deg) }
.case { display: flex; flex-wrap: wrap; gap: 32px 48px; margin: 10px 0 28px; padding-top: 28px; border-top: 1px dashed var(--rule) }
.case__shot { flex: 1.4 1 360px; min-width: 0; aspect-ratio: 16/10; border-radius: 6px 3px 8px 4px; overflow: hidden; background: color-mix(in oklab, var(--rule) 35%, var(--sheet)); display: grid; place-items: center }
.case__shot img { width: 100%; height: 100%; object-fit: contain }
.case__shot img.is-small { width: 40%; height: auto; image-rendering: pixelated }
.case__body { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px }
.case dl { margin: 0; display: flex; flex-direction: column; gap: 14px }
.case dt { font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.case dd { margin: 4px 0 0; font: 500 15px/1.5 var(--sans); color: var(--ink-indigo) }
.case ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px }
.case li { display: flex; gap: 12px; font: 400 16px/1.45 var(--sans) }
.case li span { flex: 0 0 22px; font: italic 500 19px/1.1 var(--serif); color: var(--ink-indigo) }

/* ─── 04 Trajetória ───────────────────────────────────────────────────────── */
.tl { position: relative; padding-left: clamp(40px,6vw,72px); --node-x: calc(-1 * clamp(40px,6vw,72px) + clamp(1px,2vw,11px)) }
.tl__thread { position: absolute; left: clamp(11px,2vw,21px); top: 0; bottom: 0; width: 3px; border-radius: 3px 1px 4px 2px; background: var(--ink-teal); transform-origin: top; filter: url(#jl-wobble) }
.tl__jobs { margin: 0; padding: 0; list-style: none }
.job { position: relative; padding: 0 0 72px }
.tl__node { position: absolute; left: var(--node-x); top: 8px; width: 22px; height: 22px; border: 2px solid var(--ink-teal); background: var(--ink-teal); border-radius: 55% 45% 62% 38% / 48% 58% 42% 52% }
.tl__node--hollow { top: 10px; background: var(--paper) }
.job__period { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.job__now { padding: 3px 10px; border: 1.5px solid var(--graphite); border-radius: 12px 6px 14px 7px; color: var(--graphite) }
.job h3 { margin: 0; font: 400 clamp(34px,4.4vw,60px)/1 var(--serif); letter-spacing: -.015em; text-wrap: balance }
.job__role { margin: 8px 0 0; font: italic 400 24px/1.3 var(--serif); color: var(--ink-indigo) }
.job__summary { margin: 18px 0 0; max-width: 70ch; font: 500 18px/1.55 var(--sans); text-wrap: pretty }
.job ul { margin: 18px 0 0; padding: 0; list-style: none; max-width: 72ch; display: flex; flex-direction: column; gap: 12px }
.job li { display: flex; gap: 14px; font: 400 16px/1.65 var(--sans); text-wrap: pretty }
.job li::before { content: ''; flex: none; margin-top: .7em; width: 7px; height: 7px; border-radius: 50% 40% 60% 45%; background: var(--ink-teal) }
.job__tags { margin: 18px 0 0; max-width: 72ch; font: italic 400 18px/1.5 var(--serif); color: var(--muted) }
.tl__block { position: relative }
.tl__h { margin: 0 0 20px; font: italic 300 clamp(40px,4.6vw,64px)/1 var(--serif) }
.rows { margin: 0; padding: 0; list-style: none }
.rows li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--rule) }
.rows__y { flex: 0 0 72px; font: italic 400 30px/1 var(--serif); color: var(--ink-indigo) }
.rows h4 { flex: 1 1 280px; min-width: 0; margin: 0; font: 500 19px/1.35 var(--sans); text-wrap: pretty }
.rows__meta { font: 400 14px var(--sans); color: var(--muted) }

/* ─── 05 GitHub ───────────────────────────────────────────────────────────── */
.gh__title { font-size: clamp(48px,6vw,88px) !important }
.gh__status { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 14px var(--sans); color: var(--muted) }
#gh-dot { width: 10px; height: 10px; border-radius: 50% 40% 60% 45%; background: var(--rule) }
.gh__error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; padding: 20px 24px; border: 1.5px dashed var(--graphite); border-radius: 10px 5px 12px 6px }
.gh__error[hidden] { display: none }
.gh__error p { margin: 0; font: 500 16px/1.5 var(--sans) }
.gh__error div { display: flex; flex-wrap: wrap; align-items: center; gap: 16px }
.gh__error .btn-sm { height: 44px }
.gh__error a { font: 700 15px var(--sans) }
.gh__stats { margin: 0 0 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr)); gap: 24px 40px }
.gh__stats > div { display: flex; flex-direction: column-reverse; gap: 6px; padding-top: 14px; border-top: 1px solid var(--rule) }
.gh__stats dt { font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.gh__stats dd { margin: 0; font: 300 clamp(64px,7vw,112px)/.9 var(--serif); font-variant-numeric: lining-nums; color: var(--muted) }
.gh__stats.is-ok dd { color: var(--graphite) }
.gh__cols { display: flex; flex-wrap: wrap; gap: 48px clamp(40px,5vw,88px) }
.gh__act { flex: 1.4 1 420px; min-width: 0 }
.gh__note { color: var(--graphite) }
.drops-grid { display: grid; grid-template-columns: repeat(18, minmax(0,1fr)); gap: 6px }
.drops-grid > span { aspect-ratio: 1; display: grid; place-items: center }
.drops-grid > span > span { width: var(--s); aspect-ratio: 1; background: var(--c); border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%; transition: width .8s cubic-bezier(.2,.7,.2,1) }
.gh__axis { margin: 10px 0 0; display: flex; justify-content: space-between; font: 400 13px var(--sans); color: var(--muted) }
.gh__side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 36px }
.gh__langs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px }
.gh__langs li { display: flex; align-items: center; gap: 8px; font: 500 15px var(--sans) }
.gh__langs li span:first-child { width: 12px; height: 12px; border-radius: 55% 45% 60% 40% }
.gh__langs li span:last-child { color: var(--muted) }
.gh__recent { margin: 0; padding: 0; list-style: none }
.gh__recent li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule) }
.gh__recent a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 22px var(--serif) }
.gh__recent li > span { margin-left: auto; flex: none; font: 400 13px var(--sans); color: var(--muted) }

/* ─── 06 Contato ──────────────────────────────────────────────────────────── */
.contact { padding-bottom: 40px; padding-top: clamp(96px,16vh,180px) }
.contact__kicker { margin: 0 0 28px; display: flex; align-items: baseline; gap: 16px; font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase }
.contact__title { margin: 0; font: 300 clamp(4rem,12.5vw,12.5rem)/.84 var(--serif); letter-spacing: -.03em }
.contact__title em { color: var(--ink-indigo) }
.contact__row { display: flex; flex-wrap: wrap; gap: 40px clamp(40px,6vw,120px); margin-top: 72px; align-items: flex-start }
.contact__sub { flex: 1 1 300px; max-width: 440px; margin: 0; font: 500 21px/1.5 var(--sans); text-wrap: pretty }
.contact__links { flex: 1.5 1 420px; min-width: 0; margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--graphite) }
.contact__links li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 18px 0; border-bottom: 1.5px solid var(--graphite) }
.contact__links li > span { flex: 0 0 96px; font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.contact__links a { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; font: 400 clamp(24px,2.6vw,36px)/1.15 var(--serif) }
.contact__links button { height: 44px; padding: 0 16px; background: var(--graphite); border: 0; border-radius: 16px 8px 18px 9px; color: var(--paper); font: 700 14px var(--sans); cursor: pointer; transition: transform .25s }
.contact__links button:hover { transform: rotate(-2deg) }
.footer { margin-top: clamp(80px,14vh,160px); padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 400 14px var(--sans); color: var(--muted) }

/* ─── Movimento reduzido ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-new(*), ::view-transition-old(*) { animation: none !important; transition-duration: .001ms !important }
}