/* ==========================================================================
   Carlos Fachini — styles
   Fixed identity rail + chapters: Quem sou · Como penso · Hoje ·
   O que já fiz · Contato.   Narrow = max-width 1039px.
   ========================================================================== */

/* Fonts served locally (latin subset: covers PT/ES). Instrument Sans is one variable file for 400-600. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url('../fonts/instrument-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-500.woff2') format('woff2'); }

:root {
  /* grafite: dark base, light inverted chapters */
  --bg: #0e0e0c;
  --ink: #f1efe8;
  --muted: #9a988f;
  --muted-2: #cfcdc4;
  --line: rgba(241, 239, 232, 0.16);
  --line-soft: rgba(241, 239, 232, 0.07);
  --panel: #1b1b18;
  --accent: #4a76ff;
  --bg-i: #f1efe8;
  --ink-i: #0e0e0c;
  --muted-i: #5f5d56;
  --muted-2-i: #3b3a35;
  --line-i: rgba(14, 14, 12, 0.16);
  --line-soft-i: rgba(14, 14, 12, 0.07);
  --panel-i: #e2e0d8;
  --accent-i: #0e0e0c;

  --sans: 'Instrument Sans', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --rail-w: 272px;
  --pad-x: clamp(24px, 4vw, 64px);
}

.invert {
  --bg: var(--bg-i); --ink: var(--ink-i); --muted: var(--muted-i); --muted-2: var(--muted-2-i);
  --line: var(--line-i); --line-soft: var(--line-soft-i); --panel: var(--panel-i); --accent: var(--accent-i);
  background: var(--bg);
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
a { color: inherit; text-decoration: none; cursor: pointer; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
::selection { background: var(--ink); color: var(--bg); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
main:focus { outline: none; }
/* skip link: off-screen until it takes keyboard focus */
.skip { position: fixed; left: 12px; top: -64px; z-index: 300; padding: 10px 16px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 500; }
.skip:focus { top: 12px; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.up { text-transform: uppercase; }
.dim { color: var(--muted); }
/* headings run at line-height ~0.9, so descenders (j, q, g, ç) hang below the line box: the mask needs room under it */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.25em; margin-bottom: -0.25em; }
.line { display: block; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   Rail — the person, always on screen
   -------------------------------------------------------------------------- */
.rail { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); z-index: 50; display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--bg); border-right: 1px solid var(--line); overflow: hidden; }
.rail__home { display: contents; }   /* the photo links home too; the name link stays the keyboard target */
.rail__photo { flex: none; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; filter: grayscale(1); background: var(--panel); }
/* hover: main.js adds an SVG filter that ghosts the photo itself in soft pink / blue (chromatic fringe) */
.rail__photo.has-fringe { filter: grayscale(1) url(#rail-fringe); }
.rail__name { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.rail__role { font-size: 14px; line-height: 1.45; color: var(--muted-2); }
.rail__role span, .rail__where span { display: block; }
.rail__where { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }
.rail__nav { display: flex; flex-direction: column; margin-top: auto; border-top: 1px solid var(--line); }
.rail__nav a { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; font-size: 15px; border-bottom: 1px solid var(--line-soft); color: var(--muted); transition: color 0.3s; }
.rail__nav a span { font-family: var(--mono); font-size: 11px; width: 20px; }
.rail__nav a:hover, .rail__nav a.is-on { color: var(--ink); }
.rail__nav a.is-on span { color: var(--accent); }
/* 2px line covering the rail's 1px divider (x = rail-w − 1) plus 1px to its right, so no sidebar background shows beside it */
/* PT | EN: segmented switch, the thumb slides to the other side on click */
.lang { position: relative; flex: none; align-self: flex-start; margin-top: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; }
.lang + .rail__nav { margin-top: 0; }
.lang a { position: relative; z-index: 1; width: 40px; padding: 6px 0; text-align: center; color: var(--muted); transition: color 0.3s; }
.lang a:hover { color: var(--ink); }
.lang:not(.is-en) a:nth-of-type(1), .lang.is-en a:nth-of-type(2) { color: var(--bg); }   /* the label under the thumb */
.lang__thumb { position: absolute; top: -1px; bottom: -1px; left: -1px; width: 42px; border-radius: 999px; background: var(--ink); transition: transform 0.7s cubic-bezier(0.34, 1.3, 0.64, 1); }   /* overshoot = elastic */
.lang.is-en .lang__thumb { transform: translateX(40px); }
.lang.is-moving .lang__thumb { animation: lang-jelly 0.8s ease-out; }
@keyframes lang-jelly { 0% { scale: 1 1; } 30% { scale: 1.28 0.9; } 55% { scale: 0.94 1.05; } 78% { scale: 1.02 0.99; } 100% { scale: 1 1; } }

.rail__progress { position: fixed; top: 0; bottom: 0; left: calc(var(--rail-w) - 1px); width: 2px; z-index: 55; pointer-events: none; }
.rail__progress i { display: block; height: 100%; background: var(--accent); transform-origin: 50% 0; transform: scaleY(0); }
/* short screens: keep the photo full width of the rail (centred in it), just a shorter crop */
@media (max-height: 860px) { .rail__photo { aspect-ratio: auto; height: clamp(120px, 24vh, 200px); } .rail { gap: 14px; padding: 22px 28px; } }

/* clip (not hidden) keeps position:sticky working; the scattered modules / drifting pages start outside the column */
.main { margin-left: var(--rail-w); overflow-x: clip; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; height: 170vh; }
.hero__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(56px, 12vh, 120px) var(--pad-x) clamp(28px, 6vh, 56px); }
.hero__title { font-weight: 500; font-size: clamp(36px, min(5.4vw, 10.5vh), 104px); line-height: 0.96; letter-spacing: -0.05em; }
.hero__bottom { display: flex; flex-direction: column; gap: clamp(28px, 6vh, 56px); }
.hero__lead { max-width: clamp(380px, 38vw, 520px); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--muted-2); text-wrap: pretty; }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pillar { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 0 0; border-top: 1px solid var(--line); }
.pillar b { font-size: clamp(20px, 2vw, 30px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; transition: opacity 0.3s; }
.pillar span:last-child { font-size: 14px; line-height: 1.4; color: var(--muted); max-width: 24ch; }
.pillar:hover b { opacity: 0.55; }

/* --------------------------------------------------------------------------
   Chapters
   -------------------------------------------------------------------------- */
.ch { padding: clamp(110px, 18vh, 200px) var(--pad-x) 0; }
.ch--dark { margin-top: clamp(110px, 18vh, 200px); padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(100px, 16vh, 180px); }
.ch--last { padding-bottom: 40px; }
.ch__head { display: flex; flex-direction: column; gap: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.ch__title { font-weight: 500; font-size: clamp(60px, 10.5vw, 188px); line-height: 0.9; letter-spacing: -0.06em; margin-top: clamp(12px, 3vh, 40px); }
.ch__title--md { font-size: clamp(44px, 7.4vw, 132px); line-height: 0.95; }
.ch__sub { max-width: 40ch; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.35; letter-spacing: -0.015em; color: var(--muted-2); text-wrap: pretty; }

/* 01 — Quem sou */
.quem { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 96px); margin-top: clamp(48px, 9vh, 104px); align-items: start; }
.quem__lead { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 64px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: pretty; }
.lt { display: inline-block; }
.quem__side { display: flex; flex-direction: column; gap: 22px; padding-top: 10px; }
.quem__side p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: var(--muted-2); text-wrap: pretty; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; border-top: 1px solid var(--line); }
.facts > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts > div:nth-child(odd) { padding-right: 20px; }
.facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.facts dd { font-size: 16px; letter-spacing: -0.01em; }
.facts a { border-bottom: 1px solid var(--line); }

.uni { position: relative; height: 480vh; margin-top: clamp(80px, 14vh, 160px); }
.uni__sticky { position: sticky; top: 0; min-height: 100vh; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 80px); padding: clamp(64px, 10vh, 120px) 0; }
.uni__col { flex: 1 1 300px; display: flex; flex-direction: column; gap: 24px; }
.uni__col h3 { font-weight: 500; font-size: clamp(32px, 3.6vw, 64px); line-height: 1; letter-spacing: -0.045em; }
.uni__col p { max-width: 440px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--muted-2); text-wrap: pretty; }
.uni__beats { display: grid; }
.uni__beats p { grid-area: 1 / 1; max-width: 440px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; color: var(--muted-2); text-wrap: pretty; }
.uni__beats.is-live p { opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.5s; }
.uni__beats.is-live p.is-on { opacity: 1; transform: none; }
.uni__diagram { flex: 1 1 380px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.uni__portrait { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.uni__grid { position: relative; width: min(100%, 520px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px; }
.mod { aspect-ratio: 1 / 1; background: var(--panel); display: flex; flex-direction: column; justify-content: space-between; padding: 14px; }
.mod__n { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.mod__label { font-size: clamp(13px, 1.1vw, 15px); font-weight: 500; }
.core { aspect-ratio: 1 / 1; background: var(--ink); color: var(--bg); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: clamp(16px, 1.6vw, 22px); letter-spacing: -0.02em; }

.marco { margin-top: clamp(60px, 10vh, 120px); display: flex; flex-direction: column; gap: 28px; }
.marco__txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px clamp(24px, 5vw, 80px); border-top: 1px solid var(--line); padding-top: 18px; }
.marco__title { font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -0.025em; }
.marco__txt p { max-width: 68ch; font-size: 16px; line-height: 1.5; color: var(--muted-2); }
.drift-wrap { overflow: hidden; margin: 0 calc(var(--pad-x) * -1); padding-left: var(--pad-x); }
.drift { display: flex; gap: clamp(12px, 1.6vw, 24px); width: 135%; }
.drift figure { flex: 1 1 0; aspect-ratio: 2 / 3; overflow: hidden; background: var(--panel); }
.drift img { width: 100%; height: 100%; object-fit: cover; }

/* 02 — Como penso */
.process { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); margin-top: clamp(40px, 8vh, 96px); }
/* Pin and step boxes are both 100vh and both centre their content, so the dots sit on the same
   line as the step text at the moment the pin engages, throughout, and when it releases. */
.process__side { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.process__pin { position: relative; width: min(100%, 360px, 42vh); }
.process__label { position: absolute; left: 0; top: calc(100% + 18px); white-space: nowrap; }
.dots { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.dot { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--ink); }
.step { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; padding: 40px 0; }
.step__n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.step h3 { font-weight: 500; font-size: clamp(44px, 6vw, 108px); line-height: 0.95; letter-spacing: -0.05em; }
.step p { max-width: 440px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--muted-2); text-wrap: pretty; }
.resp { width: 100%; max-width: 520px; border-bottom: 1px solid var(--line); margin-top: 12px; }
.resp > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.resp dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.skills { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 40px; margin-top: clamp(40px, 8vh, 96px); padding-top: 18px; border-top: 1px solid var(--line); }
.skills span:last-child { max-width: 70ch; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.6; color: var(--muted); }

/* 03 — Hoje */
.ia__lead { max-width: 56ch; margin-top: clamp(32px, 6vh, 64px); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: var(--muted-2); text-wrap: pretty; }
.pipe { display: flex; align-items: center; margin-top: clamp(48px, 9vh, 96px); }
.node { flex: 0 0 auto; width: clamp(104px, 11vw, 150px); display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); background: var(--bg); }
.node--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.node__name { font-family: var(--mono); font-size: 12px; }
.node__ln { height: 1px; background: currentColor; opacity: 0.3; }
.link { flex: 1 1 12px; height: 1px; background: var(--ink); opacity: 0.5; transform-origin: 0 50%; }
.ia__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px clamp(32px, 6vw, 96px); margin-top: clamp(64px, 11vh, 120px); }
.meta-block { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.meta-block__sm { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--muted-2); }
.meta-block__lg { font-size: clamp(24px, 2.4vw, 38px); line-height: 1.15; letter-spacing: -0.03em; }

/* 04 — O que já fiz */
.fizlist { margin-top: clamp(56px, 10vh, 120px); border-bottom: 1px solid var(--line); }
.fiz { position: relative; display: block; padding: clamp(28px, 5vh, 48px) 0; transition: opacity 0.4s; }
.fiz__rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ink); transform-origin: 0 50%; }
.fiz__top { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px 24px; align-items: baseline; }
.fiz__q { font-weight: 500; font-size: clamp(26px, 3.4vw, 60px); line-height: 1.02; letter-spacing: -0.045em; max-width: 20ch; text-wrap: balance; }
.fiz__go { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.fiz__go b { font-weight: 400; display: inline-block; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fiz:hover .fiz__go b { transform: translate(3px, -3px); }
.fiz__sub { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 0 68px; max-width: 560px; }
.papel { display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.5; color: var(--muted-2); text-wrap: pretty; }
.badge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 4px 10px; border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.badge i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink); }
.fizlist.is-hover.has-hot .fiz:not(.is-hot) { opacity: 0.3; }

/* case preview: inline on touch / narrow / reduced motion, floating card on desktop hover */
.fiz__pv { position: relative; width: min(100%, 380px); aspect-ratio: 16 / 10; margin: 22px 0 0 68px; overflow: hidden; background: var(--panel); }
.fizlist.is-hover .fiz__pv { display: none; }
.pv--fc img, .pv--lg img, .pv--in img, .pv--cb img, .pv--xb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }

.hovercard { position: fixed; left: 0; top: 0; z-index: 70; width: 380px; height: 238px; pointer-events: none; opacity: 0; background: #e4e3df; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); will-change: transform; }
.hovercard__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; }
.hovercard__layer.is-on { opacity: 1; }

/* 05 — Contato */
.contact { margin-top: clamp(40px, 8vh, 80px); }
.contact-link { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: clamp(14px, 2.4vh, 28px) 0; border-top: 1px solid var(--line); font-size: clamp(44px, 8vw, 150px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; transition: padding 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.contact-link:last-of-type { border-bottom: 1px solid var(--line); }
.contact-link:hover { padding-left: clamp(12px, 2vw, 32px); }
.contact-link span:last-child { font-weight: 400; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: clamp(64px, 12vh, 140px); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.site-footer .strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   Narrow (< 1040px): rail becomes a top bar; no pinned panels.
   -------------------------------------------------------------------------- */
@media (max-width: 1039px) {
  /* top bar (92px): small photo, name over role; the mono location joins on the right from 640px */
  .rail { top: 0; bottom: auto; left: 0; right: 0; width: auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "photo name lang" "photo role role" "nav nav nav"; align-items: center; gap: 0 12px; padding: 12px 20px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .rail__photo { grid-area: photo; width: 44px; height: 44px; aspect-ratio: 1; }
  .rail__name { grid-area: name; font-size: 17px; }
  .rail__role { grid-area: role; display: flex; gap: 0 8px; font-size: 12px; white-space: nowrap; min-width: 0; overflow: hidden; color: var(--muted); }   /* each span on its own line on desktop, one row here */
  .rail__role span + span::before { content: "·"; margin-right: 8px; }
  .rail__where { display: none; }
  .rail__nav { grid-area: nav; flex-direction: row; gap: 18px; margin: 0; border: 0; overflow-x: auto; scrollbar-width: none; }
  .rail__nav::-webkit-scrollbar { display: none; }
  .rail__nav a { border: 0; padding: 8px 0; white-space: nowrap; }
  .rail__nav a span { display: none; }
  .lang { grid-area: lang; margin: 0; justify-self: end; font-size: 10px; }   /* compact: sits in the name row, the role keeps the full width below */
  .lang a { width: 30px; padding: 4px 0; }
  .lang__thumb { width: 32px; }
  .lang.is-en .lang__thumb { transform: translateX(30px); }
  .rail__progress { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 2px; }
  .rail__progress i { transform-origin: 0 50%; transform: scaleX(0); }
  .main { margin-left: 0; padding-top: 92px; }

  .hero { height: 140vh; }
  .hero__sticky { height: calc(100vh - 92px); top: 92px; }
  .hero__inner { padding-top: 32px; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  
  .quem { grid-template-columns: 1fr; }
  .uni { height: 380vh; }
  .uni__sticky { top: 92px; min-height: calc(100vh - 92px); padding: 24px 0; align-content: center; }
  .process { grid-template-columns: 1fr; gap: 0; }
  .process__side { top: 92px; height: auto; flex-direction: row; align-items: center; padding: 12px 0; background: var(--bg); z-index: 2; border-bottom: 1px solid var(--line); }
  .process__pin { width: auto; display: flex; align-items: center; gap: 16px; }
  .process__label { position: static; white-space: normal; }
  .dots { width: 120px; flex: 0 0 120px; }
  .step { min-height: 56vh; }
  .pipe { flex-direction: column; align-items: flex-start; }
  .node { width: 180px; }
  .link { flex: 0 0 24px; width: 1px; height: 24px; margin-left: 24px; transform-origin: 50% 0; }
  .fiz__top { grid-template-columns: 36px minmax(0, 1fr); }
  .fiz__go { grid-column: 2; }
  .fiz__sub, .fiz__pv { margin-left: 60px; }
  .fiz__pv { width: auto; max-width: 560px; aspect-ratio: 3 / 2; } /* margin eats the 100% width → was overflowing; 3/2 = image ratio, no crop */
}

@media (min-width: 640px) and (max-width: 1039px) {
  .rail { grid-template-columns: 44px minmax(0, 1fr) auto auto; grid-template-areas: "photo name where lang" "photo role where lang" "nav nav nav nav"; }
  .rail__where { display: block; grid-area: where; font-size: 10px; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .drift-wrap { overflow-x: auto; }
  .drift { width: 160%; }
}

/* ==========================================================================
   Páginas de projeto (cases/*.html) — mesma faixa lateral e tokens da home
   ========================================================================== */
.case-head { padding: clamp(96px, 16vh, 160px) var(--pad-x) 0; }
.case__back { display: inline-flex; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); transition: gap 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.3s; }
.case__back:hover { gap: 16px; color: var(--ink); }
.case__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: clamp(40px, 7vh, 80px); padding-top: 18px; border-top: 1px solid var(--line); }
.case__title { margin-top: clamp(24px, 4vh, 48px); max-width: 18ch; font-weight: 500; font-size: clamp(38px, 5.6vw, 100px); line-height: 0.98; letter-spacing: -0.05em; text-wrap: balance; }

.case__visual { position: relative; margin: clamp(48px, 8vh, 96px) var(--pad-x) 0; overflow: hidden; background: var(--panel); }
.case__visual img { display: block; width: 100%; height: auto; }
.case__visual[data-pvfit] { aspect-ratio: 16 / 10; }
/* reconstructions are drawn at 380x238 and scaled up to the column (see scaleVisuals in main.js) */
.case__visual .fiz__pv { position: absolute; left: 0; top: 0; width: 380px; height: 238px; aspect-ratio: auto; margin: 0; transform-origin: 0 0; }
.case__scroll { margin: clamp(48px, 8vh, 96px) var(--pad-x) 0; max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; background: var(--panel); }
.case__scroll img { display: block; width: 100%; height: auto; }
/* scrollbar in the page's own palette: thin, square, no arrows (standard props, ::-webkit fallback for older Safari) */
.case__scroll { scrollbar-width: thin; scrollbar-color: var(--muted) var(--line-soft); }
.case__scroll:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
@supports not (scrollbar-color: auto) {
  .case__scroll::-webkit-scrollbar { width: 8px; }
  .case__scroll::-webkit-scrollbar-track { background: var(--line-soft); }
  .case__scroll::-webkit-scrollbar-thumb { background: var(--muted); }
  .case__scroll::-webkit-scrollbar-thumb:hover { background: var(--ink); }
}
.case__note { margin: 14px var(--pad-x) 0; }
.case__disclaimer { display: flex; flex-direction: column; gap: 12px; max-width: 78ch; margin: 28px var(--pad-x) 0; padding: 20px 24px; border: 1px solid var(--line); }
.case__disclaimer .mono { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.case__disclaimer svg { width: 14px; height: 14px; flex: none; }
.case__disclaimer p { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; color: var(--muted-2); text-wrap: pretty; }
/* Coffee Bar: real app visuals (icon + menu) on the panel, install code, repo links */
.case__visual--app { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 72px); padding: clamp(32px, 6vw, 88px) clamp(20px, 4vw, 64px); }
.case__visual--app img { width: auto; max-width: 100%; }
.case__visual--app .cb-icon { width: clamp(120px, 16vw, 220px); border-radius: 22%; }
.case__visual--app .cb-app { width: min(100%, 346px); }
.case-block__body { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; flex: 1 1 420px; min-width: 0; }
.case-block .case-block__body p { flex: none; }
.case__code { display: block; width: fit-content; max-width: 100%; padding: 14px 16px; overflow-x: auto; background: var(--panel); font-family: var(--mono); font-size: 13px; line-height: 1.5; letter-spacing: 0; color: var(--ink); white-space: nowrap; }
.case-block__links { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; flex: 1 1 420px; }
.case__list { display: flex; flex-direction: column; gap: clamp(18px, 2.4vh, 26px); margin: 0; padding: 0; list-style: none; width: 100%; max-width: 52ch; }
.case__list li { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; color: var(--muted-2); }
.case__list b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--ink); }
.case__link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -0.02em; transition: gap 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.case__link:hover { gap: 16px; }
.case__ico { flex: none; }

.case-block { display: flex; flex-wrap: wrap; gap: 16px clamp(24px, 6vw, 96px); padding: clamp(28px, 5vh, 52px) 0; border-top: 1px solid var(--line); }
.case-block__label { flex: 0 0 200px; }
.case-block p { flex: 1 1 420px; max-width: 34ch; font-size: clamp(22px, 2.1vw, 34px); line-height: 1.25; letter-spacing: -0.02em; text-wrap: pretty; }

.case__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 28px); margin: clamp(48px, 8vh, 96px) var(--pad-x) 0; }
.case__grid figure { overflow: hidden; background: var(--panel); aspect-ratio: 16 / 10; }
.case__grid img { width: 100%; height: 100%; object-fit: cover; }

.case__next { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: clamp(100px, 16vh, 200px) var(--pad-x) 0; padding-top: 28px; border-top: 1px solid var(--line); transition: padding 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.case__next:hover { padding-left: clamp(12px, 2vw, 32px); }
.case__next-label { display: flex; flex-direction: column; gap: 16px; }
.case__next-name { font-size: clamp(40px, 7vw, 128px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; }
.case__next-arrow { font-size: clamp(40px, 7vw, 128px); font-weight: 400; line-height: 0.95; }
.case-foot { margin: clamp(80px, 14vh, 160px) var(--pad-x) 0; padding-bottom: 40px; }

/* ==========================================================================
   Loader (home) e cursor personalizado
   ========================================================================== */
html.is-loading { overflow: hidden; }
.loader {
  position: fixed; inset: 0; z-index: 100; padding: clamp(24px, 4vw, 56px); background: var(--bg); color: var(--ink);
  transition: opacity 1s ease 0.3s;
  animation: loader-safety 0.01s 9s forwards;                 /* if the script never runs, get out of the way */
}
.loader__px { position: absolute; inset: 0; display: block; }
.loader .mono { position: relative; color: var(--muted); transition: opacity 0.3s; }
.loader.is-done { opacity: 0; pointer-events: none; }
.loader.is-done .mono { opacity: 0; }
@keyframes loader-safety { to { visibility: hidden; pointer-events: none; } }

html.has-cursor, html.has-cursor * { cursor: none !important; }
.cursor {
  position: fixed; left: 0; top: 0; z-index: 90; width: 10px; height: 10px; margin: -5px 0 0 -5px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0;
  transition: width 0.25s, height 0.25s, margin 0.25s, background-color 0.25s, border-color 0.25s, opacity 0.25s;
}
.cursor.is-on { opacity: 1; }
.cursor.is-link { width: 46px; height: 46px; margin: -23px 0 0 -23px; background-color: transparent; border-color: #fff; }
.cursor.is-down { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.cursor.is-link.is-down { width: 38px; height: 38px; margin: -19px 0 0 -19px; }