/* ============================================================================ PINHEIRO R&D — main.css Restraint is the brief: the attractor is the only rich thing on the page and everything around it holds still. Type, hairlines, whitespace. No cards, no boxes, no shadows, no gradients. Every theme-able value is a :root custom property, because the studio's #edit panel lists exactly those — hard-code a colour and it drops out. ⚠️ Small type has a hard floor of 4.5:1. Measured on --paper: --ink-faint is 4.58:1, --ochre 5.03:1, --turquoise 5.77:1. --ink-ghost (2.0:1) is ONLY for aria-hidden decoration. Compute the ratio before putting a colour on text. ========================================================================= */ :root{ /* ---- palette, from the swatch supplied 2026-09-07 ----------------------- --fig-* are FIGURE colours: they are drawn on the canvas and never put on text, which is why they are allowed below the 4.5:1 floor. The contrast checker exempts the prefix for exactly that reason — do not use one of these on type. ⚠️ Read off the image, not from hex values — correct these four lines if they are a shade out and everything downstream follows. C01 41% ink · C02 16% red · C03 15% brown · C04 9% tan C05 7% sky · C06 7% brick · C07 4% yellow · C08 0% paper */ --fig-ink: #140B08; --fig-red: #E5230F; --fig-brown: #3A2A19; --fig-tan: #6D4E2A; --fig-sky: #6BD3ED; --fig-brick: #A81D11; --fig-yellow: #F7EC00; --fig-paper: #E7E7EF; /* ---- what the page actually uses -------------------------------------- The swatch's near-white is a cool lavender; used flat it turns the page grey, so the paper is lightened from it and the ink is the swatch's C01. Every value here is measured: see the contrast note at the top. */ --paper: #F7F7FA; --ink: #140B08; /* 17.8:1 */ --ink-soft: rgba(20,11,8,.60); /* 4.6:1 */ --ink-faint: rgba(20,11,8,.60); --ink-ghost: rgba(20,11,8,.32); /* decoration only */ /* The accent that carries links, numbers and the active state. C06 umber from the colour graph, 6.37:1 — the only warm tone in the palette that clears the 4.5:1 floor for small text. The oranges measure 2.5–3.4:1 and are therefore FIGURE colours: marks, bars, ribbons, the canvas. Never type. */ --accent: #8A4A20; --fig-lit: #F08000; /* C01, 2.52:1 — marks, never type */ /* One colour per research route. All three share a border with the hub in the colour graph, so they are a licensed family — and they separate by temperature as well as hue: bright warm, dark warm, cool. */ --fig-r1: #F08000; /* C01 orange */ --fig-r2: #8A4A20; /* C06 umber */ --fig-r3: #7C86AE; /* C03 periwinkle, deepened to read as a fill */ --fig-warm: #C0622A; /* C04, 3.91:1 — marks, never type */ --ochre: #6D4E2A; --turquoise: #1F6E67; --hairline: rgba(20,11,8,.16); --rule: rgba(20,11,8,.10); --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-h1: clamp(2.5rem, 5.2vw, 4.4rem); --fs-h2: clamp(1.6rem, 2.9vw, 2.4rem); --fs-body: clamp(.97rem, 1.1vw, 1.04rem); --fs-label: 11px; --gutter: clamp(22px, 5.4vw, 96px); --maxw: 1360px; --band: clamp(52px, 7.5vh, 104px); } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} } body{ background:var(--paper);color:var(--ink); font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6; -webkit-font-smoothing:antialiased; } .mono,.eyebrow,.navlink,.wordmark,.cta,.caption,.tag,.field-label{ font-family:var(--font-mono);font-size:var(--fs-label); letter-spacing:.18em;text-transform:uppercase;font-weight:400; } .eyebrow{display:block;color:var(--ink-faint)} h1,h2,h3{font-family:var(--font-display);font-weight:400;font-optical-sizing:auto} h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.018em} h2{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.012em} h3{font-size:1.12rem;line-height:1.3} p{max-width:58ch} a{color:inherit} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px} .soft{color:var(--ink-soft)} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .cta{ display:inline-block;color:var(--ink);text-decoration:none; border-bottom:1px solid var(--ink);padding-bottom:5px; transition:color .18s ease,border-color .18s ease; } .cta:hover,.cta:focus-visible{color:var(--accent);border-color:var(--accent)} /* ---------------------------------------------------------------- reveal Content rises as it is reached — the page assembles rather than sitting there finished. Small distances only: a big translate is a vestibular trigger and reads as a slideshow. Anything that has not been observed yet stays visible, so a failed observer can never hide the page. */ .rise{opacity:0;transform:translateY(12px); transition:opacity .65s cubic-bezier(.2,.7,.2,1) var(--d,0s), transform .65s cubic-bezier(.2,.7,.2,1) var(--d,0s)} .rise.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .rise{opacity:1;transform:none;transition:none} } /* ---------------------------------------------------------------- header */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:20; display:flex;justify-content:space-between;align-items:baseline;gap:24px; padding:24px var(--gutter); /* ⚠️ O SEGUNDO STOP TEM DE SER O MESMO PAPEL, A ZERO. Estava escrito rgba(251,250,247,0) — o papel de duas paletas atrás. Um stop transparente de OUTRA cor não é invisível: o Chrome interpola em premultiplicado e a faixa ganha um véu com a cor errada. Com `transparent` o navegador usa rgba(0,0,0,0) e o degradê escurece pelo meio. Daí a função. */ background:linear-gradient(var(--paper) 62%, rgb(from var(--paper) r g b / 0)); transition:background .3s ease; } .wordmark{font-weight:500;text-decoration:none;letter-spacing:.2em;white-space:nowrap} .site-nav{display:flex;gap:clamp(16px,2.4vw,34px);align-items:baseline} .navlink{color:var(--ink-soft);text-decoration:none;transition:color .18s ease;white-space:nowrap} .navlink:hover,.navlink[aria-current="page"]{color:var(--ink)} .navlink[aria-current="page"]::before{ content:"";display:inline-block;width:4px;height:4px;margin-right:7px; vertical-align:middle;background:var(--accent); } .nav-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--ink-soft)} /* ---------------------------------------------------------------- hero */ .hero{position:relative;min-height:100svh;display:flex;align-items:center; padding:clamp(96px,14vh,140px) var(--gutter) clamp(56px,9vh,96px)} /* One fixed plate behind the whole document; every section scrolls over it. Sections must stay transparent or they hide it — do not give .band a background. */ /* ⚠️ THE BACKGROUND IS BAKED, NOT LIVE — AND THAT WAS A MEASUREMENT, NOT A PREFERENCE. The Physarum network that draws it (js/mold.js, still used by lab/) costs **42 ms per step** at the resolution this composition needs (467×300 cells, 22k particles, measured in headless Chrome on this machine). At 15fps that is six times a whole second of CPU per second: it cannot run, and trying would peg a core for something no visitor watches. This project has already shipped one main-thread freeze from exactly that reasoning. So it is rendered once, offline — `lab/_bake.html`, ~1100 steps at grid 900×522 — and stored as an alpha WebP. The simulation is toroidal, so the image is seamless; #field is fixed and covers exactly one viewport, so it never repeats and never scrolls against the type. The gradient mask quiets the left two-fifths, where every page's type sits. It replaces the per-frame text-safe masking the live version did. */ #field{position:fixed;inset:0;width:100%;height:100%;display:block; /* ⚠️ A BAKED LAYER CANNOT DODGE THE TYPE, so it has to be quiet enough not to need to. The live version ran at .55 because it re-measured every [data-field-safe] rectangle each frame and erased itself there; at that strength a static image puts filaments straight through the right-hand column of the Client R&D section. */ z-index:0;pointer-events:none;opacity:.07; background:url(../assets/mold-bg.webp) center center/cover no-repeat; /* ⚠️ NO DIRECTIONAL MASK. Quieting one side was tried and is wrong here: the Client R&D section puts type on the LEFT and the RIGHT, so whichever side the gradient favours is a side with words on it. A uniform, genuinely faint layer is the only version that cannot pick a fight — and .1 is set by the contrast floor, not by taste (see the note above --ink-soft). A soft vignette keeps the corners from reading as a rectangle. */ -webkit-mask-image:radial-gradient(120% 130% at 50% 45%,#000 55%,rgba(0,0,0,.55) 100%); mask-image:radial-gradient(120% 130% at 50% 45%,#000 55%,rgba(0,0,0,.55) 100%)} @media (max-width:760px){ /* one column of type and no margin to spare */ #field{opacity:.05} } .site-header,main,.site-footer{position:relative;z-index:1} /* THE PLATE — the ink figure from the social card (og-pinheiro-v2.png), reused as the hero's only image. It is stored as an ALPHA MASK, not as the card: the card carries type, and the crop that avoids the type also cuts the figure. As a mask the figure takes a palette colour instead of the card's grey, its left edge is feathered so the crop seam cannot show, and it costs one channel instead of three. It sits behind everything and reads at about a fifth strength — the hero's weight is the sentence, not this. */ .plate{position:absolute;top:0;bottom:0;right:min(-4vw,-40px); width:min(56vw,720px);pointer-events:none;z-index:0; background:linear-gradient(155deg,var(--fig-warm),var(--accent) 52%,var(--fig-r3)); -webkit-mask:url(../assets/plate-mask.png) right center/contain no-repeat; mask:url(../assets/plate-mask.png) right center/contain no-repeat; opacity:.30} @media (max-width:760px){ /* one column of type and no margin to spare: the plate drops back to a stain */ .plate{width:88vw;right:-26vw;opacity:.11} } .hero-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;width:100%} /* NOT ch: this container's font is the body face, so a ch measure here sizes the column against 1rem and squeezes the display type into a sixth of the width it needs. */ .hero-text{max-width:min(50vw,600px)} .hero h1{margin:20px 0 22px} .hero-note{margin-top:clamp(34px,6vh,60px);color:var(--ink-faint);letter-spacing:.14em; line-height:1.8;max-width:38ch} .hero .sub{max-width:34ch;color:var(--ink-soft);margin-bottom:34px} html:not([data-js="on"]) .hero-fallback{position:absolute;inset:auto var(--gutter) 50% auto;z-index:0} /* ---------------------------------------------------------------- bands */ .band{padding:var(--band) var(--gutter);border-top:1px solid var(--rule)} .band-inner{max-width:var(--maxw);margin:0 auto} .band-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:clamp(30px,5vh,54px)} .band-head .eyebrow{flex:0 0 auto} /* ---------------------------------------------------------------- the cycle Research → Development → Test → Learn, drawn as a circle because the model returns: what a test sends back is evidence, and evidence starts the next question. A row of four columns with an arrow after each says "then, then, then"; a ring says "again", which is the whole point. The four stages are an ORDERED LIST placed into a 3×3 grid — north, east, south, west — so the sequence survives with CSS off and reads correctly to a screen reader. The ring and the rosette are decoration, absolutely positioned, and marked aria-hidden. The rosette inside is a quasiperiodic tiling (docs/make-rosette.py): a pattern with fivefold symmetry that comes back around without ever repeating itself. That is the same statement as the ring, made in a figure. ------------------------------------------------------------------------- */ .cycle{position:relative;display:flex;justify-content:center; padding:clamp(8px,2vh,26px) 0} .cycle-ring,.cycle-rosette{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); pointer-events:none; } .cycle-ring{width:min(46vw,430px);aspect-ratio:1;color:var(--ink-ghost)} .cycle-rosette{width:min(31vw,290px);opacity:.6; /* the rosette is a figure, so it may take a figure colour */ filter:sepia(.5) saturate(1.5) hue-rotate(-8deg)} .cycle-stages{ list-style:none;display:grid;width:min(100%,1060px); grid-template-columns:minmax(0,1fr) min(46vw,430px) minmax(0,1fr); grid-template-rows:auto min(46vw,430px) auto; align-items:center;justify-items:center;gap:clamp(10px,1.6vw,22px); } .stage{max-width:30ch} .stage--n{grid-area:1/2;text-align:center} .stage--e{grid-area:2/3;text-align:left} .stage--s{grid-area:3/2;text-align:center} .stage--w{grid-area:2/1;text-align:right} .stage-i{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em; color:var(--accent);display:block;margin-bottom:8px} .stage-name{font-family:var(--font-display);font-size:clamp(1.25rem,2vw,1.6rem); display:block;margin-bottom:6px} .stage-say{color:var(--ink-soft);display:block;font-size:.96rem} .model-loop{margin-top:clamp(20px,3vh,34px);color:var(--ink-faint); letter-spacing:.14em;text-align:center} /* Below the point where a ring has room for text on four sides, the stages become the ordered list they already are, and the ring steps aside. A circle squeezed into one column is a decoration pretending to be a diagram. */ @media (max-width:900px){ .cycle-ring,.cycle-rosette{display:none} .cycle-stages{grid-template-columns:1fr;grid-template-rows:none; gap:clamp(20px,3.4vh,32px);justify-items:start} .stage{max-width:36ch} .stage--n,.stage--e,.stage--s,.stage--w{grid-area:auto;text-align:left} .stage{border-top:1px solid var(--rule);padding-top:14px} .model-loop{text-align:left} } /* -------------------------------------------------------- two origins, one loop The loop is the structure; the origins are annotations beside it. They are NOT a second product column — the strategy is explicit that audience work and applied work are not two symmetrical menus, and the applied path forks because an applied question may need investigating first or may already have enough behind it to start building. ------------------------------------------------------------------------- */ .cycle-wrap{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.5fr); gap:clamp(24px,4vw,72px);align-items:center} /* ⚠️ The figure runs the FULL width of its column so its arrowheads finish at the column edge, a gutter away from the ring — they read as entering it. Squeezed into a narrow side column beside the labels they became a squiggle too small to see the fork in, and the fork is the only thing this drawing has to say. */ .origins-label{color:var(--ink-faint);letter-spacing:.2em;text-transform:uppercase; font-size:10px;margin:0 0 14px} .or-svg{width:100%;height:auto;display:block;color:var(--ink);margin-bottom:20px} .or-path{fill:none;stroke:currentColor;stroke-opacity:.34;stroke-width:1.3} .or-path--b{stroke:var(--accent);stroke-opacity:.55;stroke-dasharray:4 3.5} .or-head{fill:none;stroke:currentColor;stroke-opacity:.5;stroke-width:1.3; stroke-linecap:round;stroke-linejoin:round} .or-head--b{stroke:var(--accent);stroke-opacity:.75} .or-dot{fill:var(--ink);fill-opacity:.5} .or-fork{fill:var(--accent)} .origin-list{list-style:none;margin:0;padding:0;display:grid;gap:18px} .origin{border-left:2px solid var(--rule);padding-left:14px} .origin--b{border-left-color:var(--accent)} .o-name{display:block;font-family:var(--font-display);font-size:1.06rem; line-height:1.2;margin-bottom:4px} .o-say{display:block;color:var(--ink-soft);font-size:.9rem;line-height:1.45} .o-to{display:block;margin-top:6px;color:var(--ink-faint);letter-spacing:.12em; text-transform:uppercase;font-size:10px} /* ------------------------------------------------------------ client R&D bridge ⚠️ THIS REPLACED A SANKEY, ON PURPOSE. The ribbon widths in that diagram were real counts, but the picture still read as a claim about flow and implied that every research module continues into development. It does not: a research-only engagement is legitimate, and which module leads to which family is not something anyone here can honestly route. So the middle is one CONDITIONAL GATE — three modules in, one labelled rail, four families out, every line dashed because it is a possibility and not a pipeline. The old diagram and its generator are archived in versions/. ------------------------------------------------------------------------- */ .bridge{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.42fr) minmax(0,1fr); gap:clamp(18px,2.4vw,40px);align-items:stretch} .col{list-style:none;margin:0;padding:0;display:grid} /* ⚠️ Equal rows, because the bridge's end points are generated at (i+0.5)/3 and (i+0.5)/4 of its height. Change the row count in one and the other must change with it or every curve lands between two cells. */ .col--research{grid-template-rows:repeat(3,1fr)} .col--dev{grid-template-rows:repeat(4,1fr)} .cell{padding:14px 0;border-top:1px solid var(--rule);align-self:stretch} .col--dev .cell{text-align:right} .cell-i{display:block;font-size:10px;letter-spacing:.16em;color:var(--accent); margin-bottom:6px} .cell h3{margin:0 0 6px;font-size:clamp(1.02rem,1.5vw,1.22rem)} .cell p{margin:0;color:var(--ink-soft);font-size:.88rem;line-height:1.45} .cell-eg{margin-top:8px !important;color:var(--ink-faint) !important; opacity:.5;transition:opacity .3s ease} .cell:hover .cell-eg,.cell:focus-within .cell-eg{opacity:1} .cell-eg .mono{font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin-right:6px} .bridge-mid{position:relative;display:flex;flex-direction:column; align-items:center;justify-content:center} .br-svg{width:100%;height:100%;max-height:420px;display:block;color:var(--ink)} .br-in,.br-out{fill:none;stroke:currentColor;stroke-opacity:.34;stroke-width:1.1; stroke-dasharray:4 4} .br-rail{stroke:var(--accent);stroke-opacity:.55;stroke-width:1.6;fill:none} .br-gate{fill:none;stroke:var(--accent);stroke-width:1.6} /* Knocked out of the paper, not floated on top of the curves — without the background the dashed lines run straight through the words and read as a strikethrough. */ .bridge-label{position:absolute;left:50%;top:50%;transform:translate(-50%,24px); text-align:center;color:var(--accent);letter-spacing:.12em; text-transform:uppercase;font-size:10px;line-height:1.7; white-space:nowrap;background:var(--paper);padding:5px 8px} .band-say{color:var(--ink-soft);max-width:44ch;margin:10px 0 0} .band-note{margin-top:clamp(22px,3vh,36px);color:var(--ink-faint); letter-spacing:.12em;text-transform:uppercase;font-size:var(--fs-label)} .band-head-block{margin-bottom:clamp(28px,4.5vh,52px)} .band-head-block .band-head{margin-bottom:0} /* ------------------------------------------------------------------------ lab ⚠️ NO PLACEHOLDER PROJECT CARDS. The brief is explicit — only real projects, and `Lab` stays out of the nav until one exists. The section says what the Lab is and shows the shape a project takes; the empty state is the content. ------------------------------------------------------------------------- */ .lab-shape{border-top:1px solid var(--rule);padding-top:22px; display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr); gap:clamp(20px,3vw,52px);align-items:start} .lab-trace{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap; gap:6px 0;color:var(--ink-faint);letter-spacing:.14em; text-transform:uppercase;font-size:10px;align-items:center} .lab-trace li + li::before{content:"→";margin:0 8px;color:var(--ink-ghost)} .lab-empty{margin:0;color:var(--ink-soft);max-width:46ch} /* -------------------------------------------------------------- method teaser */ .teaser .band-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,4vw,72px);align-items:center} .teaser-fig{display:grid;justify-items:center} .in-svg{width:100%;max-width:220px;height:auto;display:block;color:var(--ink)} .in-ring{fill:none;stroke:currentColor;stroke-opacity:.14;stroke-width:1} .in-spoke{stroke:currentColor;stroke-opacity:.3;stroke-width:1.2;fill:none} .in-spoke--built{stroke:var(--accent);stroke-opacity:.7;stroke-dasharray:3.5 3} .in-end{fill:var(--ink);fill-opacity:.4} .in-end--built{fill:none;stroke:var(--accent);stroke-width:1.5} .in-core{fill:var(--ink)} .teaser-cap{margin-top:16px;text-align:center;color:var(--ink-faint); letter-spacing:.1em;font-size:10px;line-height:1.8} .cta--quiet{border-bottom-color:var(--hairline)} .hero-cta{margin-top:clamp(28px,4vh,46px)} .closing-say{color:var(--ink-soft);max-width:40ch;margin:0 0 26px} @media (max-width:1000px){ /* Stacked inputs above a compact loop — the brief's own recomposition. A three-column bridge at phone width is a smear, so the gate drops out and the two columns become two lists with the condition stated between them. */ .cycle-wrap{grid-template-columns:1fr;gap:clamp(24px,4vh,44px)} .or-svg{max-width:210px} .bridge{grid-template-columns:1fr;gap:clamp(20px,3vh,34px)} .br-svg{display:none} .bridge-mid{order:2;min-height:0;padding:6px 0} .bridge-label{position:static;transform:none;white-space:normal;text-align:left; border-left:2px solid var(--accent);padding-left:14px} .col--research{order:1} .col--dev{order:3} .col--research,.col--dev{grid-template-rows:none;gap:0} .col--dev .cell{text-align:left} .lab-shape,.teaser .band-inner{grid-template-columns:1fr} .teaser-fig{justify-items:start} .teaser-cap{text-align:left} } @media (hover:none){ .cell-eg{opacity:1} } /* ---------------------------------------------------------------- founder + cta */ .founder{max-width:52ch} .founder .who{font-family:var(--font-display);font-size:1.2rem;margin-bottom:.35em} .founder .who .mono{margin-left:.9em;white-space:nowrap} .founder p + p{margin-top:.2em} .closing h2{max-width:16ch;margin-bottom:24px} .closing .founder{margin-bottom:clamp(44px,7vh,84px)} /* ---------------------------------------------------------------- footer */ .site-footer{ border-top:1px solid var(--rule); padding:clamp(34px,5vh,56px) var(--gutter) clamp(30px,4vh,46px); display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;color:var(--ink-faint); } .site-footer a{color:var(--ink-soft);text-decoration:none} .site-footer a:hover{color:var(--ink)} /* 2026-09-11 — A ASSINATURA DO FOUNDER. Saiu da secção final da homepage e é agora um colofão em todas as páginas: linha inteira por cima da fila mono, o nome na serifa do site e a bio pequena a seguir — uma assinatura, não uma segunda apresentação. (O rodapé é igual byte a byte em todas as páginas: mudar aqui é mudar em todas, e o texto está escrito à mão em cada