/* THE GUIDE'S TWO FAMILIES ARE SERVED FROM THIS SITE. Added 2026-09-22. Until now the stylesheet named Nunito and Nunito Sans and did not carry them: there was no @font-face rule anywhere, so on every machine that does not happen to have them installed the browser fell through to Trebuchet MS and system-ui. The guide names the two families on guia p. 13 and the page was serving neither, which the UX review found on 2026-09-22 in both passes. This is not a substitution and not a new typeface: it is the same family the guide names, put in the page. Both are the variable cuts, so one file per family covers every weight the site uses rather than one file per weight. The `latin` subset is the whole range a pt-BR page needs: the Portuguese vowels all sit inside U+0000-00FF. Nunito 39128 bytes sha256 ba344451eab25b217a165363b1982048a5e5830a0daf36577973955a04cac793 Nunito Sans 31076 bytes sha256 29e3890496844a9ea81975c52771c587c872b4eb317026422d1995b88d21b57d Both SIL Open Font License 1.1, fetched from fonts.gstatic.com on 2026-09-21. */ @font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito-latin-var.woff2") format("woff2-variations"); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans"; src: url("/assets/fonts/nunito-sans-latin-var.woff2") format("woff2-variations"); font-weight: 200 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* THE FALLBACK TAKES THE SPACE THE WEBFONT WILL TAKE (issue #28). Until the webfont arrives, `font-display: swap` shows a local font, and the swap moved the text. On a phone the local sans on Linux is DejaVu Sans, wider than Nunito Sans: a line of /curadoria/ went from three lines to two at 1.25 s, the footer moved up in view, and the page read CLS 0.116 against 0.1. With the webfonts blocked it read 0. Each face below is a local Arial -- or Liberation Sans, built with Arial's widths -- scaled to the webfont's measure. size-adjust is the ratio of the average advance widths, weighted by the character frequency of the site's own text; the three overrides are the webfont's hhea ascent, descent and line gap, divided by size-adjust. Read with fontTools from the two woff2 files above and LiberationSans-Regular/Bold.ttf, at wght 400 and 700 (the two weights the site sets). Once the webfont loads, these faces are not used: what a reader sees then does not change. A device with neither Arial nor Liberation Sans skips them and falls back as before. PROJECT, not a brand choice. THE SAME unicode-range AS THE WEBFONT, on purpose. The arrow "→" (U+2192) is not in the webfont's subset, so it was always drawn by the next font in the stack. Without the range these faces drew it instead, thinner and smaller, on every arrow the site had (her rule of 2026-09-24; the arrows left on 2026-09-29, ADR-0056, and the range stays so no other character changes). With it, a character the webfont does not cover falls through exactly as before. */ @font-face { font-family: "Nunito fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); font-weight: 400; size-adjust: 99.81%; ascent-override: 101.29%; descent-override: 35.37%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 700; size-adjust: 96.83%; ascent-override: 104.41%; descent-override: 36.46%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); font-weight: 400; size-adjust: 99.78%; ascent-override: 101.32%; descent-override: 35.38%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); font-weight: 700; size-adjust: 96.79%; ascent-override: 104.45%; descent-override: 36.47%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Project styles for myrella-designer. The brand values live in tokens.css, and every one of them cites a page of the guide (ADR-0005). This file adds nothing to the guide's palette or typography -- it now DELIVERS the guide's typography, above, and adds nothing to it: it holds layout, and the two scales the guide does not define. Each of those is marked PROJECT below, so no reader mistakes one for a brand decision. Contrast, measured on the guide's own colours (WCAG relative luminance): Jeans #194a61 on Papiro #fdf6f3 ....... 8.96:1 body text, AA and AAA Papiro #fdf6f3 on Jeans #194a61 ....... 8.96:1 inverted text, AA and AAA Jeans #194a61 on Mostarda #e7aa5f ..... 4.70:1 body text, AA Papiro #fdf6f3 on Pistache #8c906c .... 3.11:1 large text and artwork only Jeans #194a61 on Pistache #8c906c .... 2.88:1 fails at any size Tangerina #e78343 on Papiro #fdf6f3 ... 2.54:1 decoration only, never text Cafe com leite on Papiro .............. 2.42:1 decoration only, never text Mostarda #e7aa5f on Papiro #fdf6f3 .... 1.91:1 a field, never a mark on paper So each of the guide's six colours has one legal job, and this file uses it for that job and no other: Papiro the page ground Jeans text and actions, on Papiro or on Mostarda Mostarda the one field that carries body text, because it is the only colour that clears 4.5:1 against Jeans Pistache large text and artwork only, which is the guide's own colourway: guia p. 11 shows the lockup as Papiro on Pistache Tangerina rules and borders, never a word Cafe com leite rules and borders, never a word No colour outside the guide's six is used anywhere in this file. */ /* PROJECT: type scale. The guide names two families and three styles and gives no size at all (guia p. 13). This scale is ours: a 1.25 ratio, fluid between 360 px and 1200 px, so a heading is readable on a telephone and does not shout on a monitor. The top two steps are compressed at the small end on purpose. At 2.44rem a heading like "Vamos conversar sobre o seu espaço" took four lines on a 360 px telephone and pushed the whole page below the fold; at 1.85rem it takes three and the headline, the lead and the start of the portrait are all in the first screen. Found by measuring the rendered page, not by reading this file. */ :root { --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.90rem); --step-0: clamp(1.00rem, 0.96rem + 0.19vw, 1.09rem); --step-1: clamp(1.25rem, 1.17rem + 0.35vw, 1.44rem); --step-2: clamp(1.50rem, 1.40rem + 0.44vw, 1.90rem); --step-3: clamp(1.66rem, 1.50rem + 0.70vw, 2.51rem); --step-4: clamp(1.85rem, 1.55rem + 1.30vw, 3.32rem); } /* PROJECT: spacing scale. The guide defines no spacing, grid, margin or padding scale (searched guia pp. 1-24). This is ours: a 4 px base with a 1.5 ratio, plus a fluid section gap. */ :root { --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.25rem; --space-xl: 3.375rem; --space-2xl: clamp(3rem, 2rem + 4vw, 5rem); /* HER WORD OF 2026-09-24 AT 18:09:01: "Estou vendo o site agora do computador." THE MEASURE WAS 68ch AND THE PAGE WAS 72rem, AND ON HER SCREEN THAT LEFT A VOID. She marked the empty band to the right of "Design além da estética", of the manifesto, and of the Apartamento Ingleses photograph, and when it was read back to her as a rule for the whole site and not those blocks she answered at 18:10:52, `3BB0AB812CD4909E9E3D`: "Isso ajjusta no site todo." Her rule, read back and not corrected: on the computer, text and image fill the page, with nothing left empty at the side, and the proportion of an image is kept -- no crop, no stretch. On a telephone nothing changes. MEASURED ON THE DEPLOYED SITE AT A 1585 px VIEWPORT, before this: every section was 1152 px of a 1585 px page, its text stopped at 711 px inside a 1120 px content box, and 55 per cent of the page was empty. Her own page shows the target width and always did: the three-column block under "Design além da estética", `.card-list` and `.conceito` already ran the full 1120, and her mark is on the paragraphs beside them that did not. THE MEASURE IS NOW THE WIDTH THE BLOCK HAS, so the 20 rules that wrote `max-width: var(--measure)` still say what they meant -- "a column of text" -- and that column is the page. One value, one place, and a later reader who greps `--measure` finds this paragraph instead of nineteen edits. 100% and not `none`, because `none` is only a width and 100% is also a number a later rule can do arithmetic with. THE TRADE, STATED SO IT IS A CHOICE AND NOT A SURPRISE. Filled to 1474 px at her viewport, a line of body text at `--step-0` (17.4 px) runs about 140 characters. That is long: prose is easiest at 60 to 80, and this file's own hero comment used to defend the narrower column. She is a designer who has now asked for the width twice, in her own words, looking at her own page, so the width is hers. The lever if she wants the line shorter is the TYPE SIZE and not the measure -- raising `--step-0` brings the line back toward 100 characters while the page stays filled -- and that is deliberately not spent here, because she asked for one thing and a slice that changes two is a slice she cannot answer cleanly. */ --measure: 100%; /* THE COLUMN IS THE PAGE TOO. A fixed 72rem left 217 px of paper on each side of a 1585 px screen and 384 on a 1920 one, which is the same void at a larger size. The gutter is what remains: it scales with the viewport and stops at 3rem, and the column stops at 104rem so that a 2560 px monitor does not get a 220-character line. At her 1585 px viewport the page now fills to 1506 px with 40 px of margin. THE OLD 72rem IS THE FLOOR, AND THAT IS WHAT KEEPS THE TELEPHONE STILL. She was told at 18:10:02 that nothing changes on a telephone and she did not correct it, so the telephone has to be provably untouched. A plain `min(100% - 2 * gutter, 104rem)` double-counts the margin: `.section` already carries its own 16 px of horizontal padding, and below 1184 px the old cap never bound, so the section was the full viewport and that padding was the whole margin. The new gutter on top of it took 32 px of text width off a 345 px screen -- measured, 313 px of content became 281. Wrapping the new value in `max(72rem, ...)` makes the rule monotone: the column can widen and can never narrow. Measured after: at 345 px the section is 345 and its content 313, exactly what it was; at 1200 px it is 1152 and 1120, exactly what it was; at 1585 px it is 1506 and 1474, against 1152 and 1120 before. */ --page-gutter: clamp(1rem, 2.5vw, 3rem); --wrap: max(72rem, min(100% - 2 * var(--page-gutter), 104rem)); } /* AN IMAGE NEVER PRINTS WIDER THAN ITS OWN FILE. Her rule for the width and her rule against distortion are one rule here, and this is where they meet: the figures below take the measure, and an image whose file is smaller than the measure stops at its own file instead. `--natural` is emitted by the image shortcode (eleventy.config.js) as the width of the widest derivative that image has, and the build never makes a derivative wider than the source (bin/build-images.py, `usable`). So this value is the file's own pixel count, and printing past it is the browser inventing pixels -- which is what "esticada" means to her even when the proportion is kept. IT IS SCOPED TO THE FIVE FIGURES THAT ASKED FOR THE MEASURE ON 2026-09-24, and not written as a bare `img` rule, because a bare rule would also shrink the images that are deliberately served larger than their file today. Those are a different decision and she has not asked for it. MEASURED, so this is a floor and not a guess: of the 48 curated plates, 43 had source pixels above their widest derivative (the Ale plates by 1471 px, the A.C. by 323), and the ladder was raised for them (bin/build-images.py). Seven are genuinely small and stay capped here: apto-ingleses-02/03/04 at 480, sala09-10 at 564, apto-ingleses-05 at 640, sala09-12 at 768 and sala09-07 at 820. */ .hero__figura img, .abertura__figura img, .galeria__figura img, .post__lead img, .prancha img { max-width: var(--natural, 100%); } /* PROJECT: font stacks. The guide names "Nunito" and "Nunito Sans" (guia p. 13) and the two families are served from this site by the @font-face rules at the top of this file. The two generic keywords at the end are a rendering fallback, not a brand choice: without them a browser that has not yet received the webfont would have nothing to fall back to, and the fallback is what a reader sees for the first line before `font-display: swap` replaces it. The "fallback" faces before them are sized to the webfont (issue #28, above), so the swap does not move the text. */ :root { --stack-heading: var(--font-heading), "Nunito fallback", "Trebuchet MS", system-ui, sans-serif; --stack-body: var(--font-body), "Nunito Sans fallback", system-ui, -apple-system, "Segoe UI", sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-papiro); color: var(--color-jeans); font-family: var(--stack-body); font-size: var(--step-0); line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } /* PROJECT: the link affordance. A phrase link is bold, and it is underlined when the pointer is on it. It carries no arrow. THE HISTORY, SO THE NEXT READER DOES NOT RE-ADD THE ARROW. On 2026-09-21 she asked for a mark that says "this is clickable" without a rule under the words ("eu nao gosto muito de linhas sublinhadas", 11:56:02) and the site drew an arrow after the phrase. On 2026-09-24 at 14:45:51 she moved the arrow in front of the phrase and asked for bold. On 2026-09-29 at 18:39:43 and 18:40:16 she took the arrow away everywhere: "todos que tiverem a setinha na frente da frase, em todos os lugares que isso acontecer, pode retirar essa setinha, eu não estou gostando. Só faz ela em negrito ... para que as pessoas saibam que a hora que passar o mouse ela fica em destaque, que ela é para clicar. Pode até fazer dessa forma que está na parte de projetos, onde eu passo, por exemplo, no Sobrado Ingleses, ele fica grifado". ADR-0056 records it. The underline she dislikes is the one at rest (2026-09-21); the one on hover is the one she asked for, and it is the Projetos card's own (`.obra__link:hover .obra__nome`). The guide defines no link treatment at all (guia pp. 1-24, read at its source), so the treatment is ours. Bold and the hover underline are a change of SHAPE and not of colour, so the mark does not rely on colour alone (WCAG 1.4.1). The keyboard gets the same underline on focus, beside the focus ring below. */ a { color: var(--color-jeans); text-decoration: none; font-weight: var(--font-weight-strong); } a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; } /* Where the whole block is the target, there is no phrase to mark: the target says "click me" about a thing the reader has already decided to click, or about a card whose every pixel is the link. These keep their own hover (a card underlines its title, the menu draws its rule) and the weight they inherit. Listed here rather than by narrowing the rule above, so a new phrase link anywhere on the site gets the mark without anyone remembering to add it. The same list is named in bin/check-arrows.py, which does not ask these for bold or for the hover underline. A button is on it: its shape says "click", and it keeps its own hover below. */ .site-nav a, .site-header__home, .skip-link, .cartao__link, .post-list a, .drops__cores a, .escritos__link, .obra__link, .site-footer__links a { font-weight: inherit; } .site-nav a:hover, .site-nav a:focus-visible, .site-header__home:hover, .site-header__home:focus-visible, .skip-link:hover, .skip-link:focus-visible, .button:hover, .button:focus-visible, .cartao__link:hover, .cartao__link:focus-visible, .escritos__link:hover, .escritos__link:focus-visible, .obra__link:hover, .obra__link:focus-visible, .site-footer__links a:hover, .site-footer__links a:focus-visible, .linha-contato a:hover, .linha-contato a:focus-visible, .redes a:hover, .redes a:focus-visible { text-decoration: none; } /* THE FOCUS RING IS JEANS. It was Tangerina, which measures 1.22:1 on Pistache and 2.54:1 on Papiro — under the 3:1 that WCAG 1.4.11 asks of a non-text indicator, and this is the one indicator a keyboard user has. Jeans is already in her palette and clears 3:1 on every surface the ring meets: Papiro 10.05, Café 4.06, Café com Leite 5.32, Tangerina 3.95, Mostarda 4.88, Pistache 3.23. The one surface Jeans cannot mark is the Jeans footer, where it sits on itself — that band gets Papiro instead. `outline-offset` keeps the ring outside the element, so a Jeans button on a Papiro page is marked by a Jeans ring on Papiro. No palette change; the guide's Lar palette is intact. */ :focus-visible { outline: 3px solid var(--color-jeans); outline-offset: 2px; } .site-footer :focus-visible { outline-color: var(--color-papiro); } h1, h2, h3 { font-family: var(--stack-heading); font-weight: var(--font-weight-strong); line-height: 1.2; } h1 { font-size: var(--step-4); margin: 0 0 var(--space-s); } h2 { font-size: var(--step-2); margin: var(--space-xl) 0 var(--space-xs); } h3 { font-size: var(--step-1); margin: var(--space-l) 0 var(--space-2xs); } p { margin: 0 0 var(--space-s); max-width: var(--measure); } ul, ol { max-width: var(--measure); padding-left: 1.2em; } li { margin-bottom: var(--space-3xs); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-jeans); color: var(--color-papiro); padding: var(--space-2xs) var(--space-s); z-index: 10; } .skip-link:focus { left: var(--space-s); top: var(--space-2xs); } /* A heading a screen reader and a search engine can use, and the page does not show. /blog/ had no h1 at all: 45 cards and no heading landmark, so heading navigation — the standard way through a long list — gave nothing. Myrella took the visible labels off this page herself ("Isso, tire o indice", 23:40:29), so the heading is here rather than on the screen. It is text, not decoration: it says what the page is, in the words her own description already uses. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Header. She settled this on 2026-09-21 from a screenshot of her own: "a logo na esquerda e a linha com as abas a direita" (11:37:30), with the logo larger (11:35:38). So the two used to be two bars - the Pistache field carrying only the lockup, and a separate Papiro strip carrying the nav - and they are one band now: logo on the left, tabs in one line on the right, both on the guide's Pistache field. The lockup is Papiro art on transparent, drawn for exactly that field (guia p. 11), and the nav sits on the same field in Papiro. Papiro on Pistache is 3.11:1. That clears AA for large text and fails for anything smaller, so the nav letters are 1.17rem - 18.72 px - and bold, which is the WCAG large-text threshold. The size is not taste: at the --step--1 the nav used to use (0.90rem at most) the same light letters would be body-size and would fail. Bold also keeps the strokes from filling in against a mid-tone green. The lockup keeps the guide's arrangement - symbol above wordmark - because guia p. 18 forbids reconfiguring it. Only its size changes. */ .site-header { background: var(--color-pistache); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-m); /* The band bleeds to both edges; the content inside it keeps the page's own gutter, so the logo's left edge lines up with the first heading below. */ padding: var(--space-2xs) max(var(--space-s), calc((100vw - var(--wrap)) / 2)); } .site-header__brand { flex: 0 0 auto; } .site-header__home { display: block; } /* Her own vector mark. One file serves both bands, because the mark is Papiro #FDF6F3 (guia p. 8) and both bands are darker than it -- Pistache on the header, Jeans on the footer. Width in CSS px only; the SVG scales to any display, which is what the raster derivative could not do. */ /* ONE WIDTH FOR BOTH BANDS, on her word of 2026-09-24 at 14:48:11: "Você pode aumentar a logo que está na tarja verde? Eu gostaria que tanto a da tarja verde quanto a da tarja azul fossem do mesmo tamanho." The two bands carried two different clamps -- 168 to 264 px in the header, 240 to 332 px in the footer -- so the same mark was two sizes on one page. There is one rule now and it is the footer's, because the direction she asked for is the green mark GROWING to meet the blue one, not the other way round. The cost, stated rather than hidden: on a 360 px telephone the header mark goes from 168 px to 240 px, which is about 42 px more header, and the footer clamp's own note already records the trade that ceiling was chosen for. */ .site-header__logo, .site-footer__logo { width: clamp(240px, 82vw, 332px); height: auto; display: block; } /* BOTH MARKS CENTRE ON A TELEPHONE AND NEITHER MOVES ON A DESKTOP. Her word of 2026-09-23 at 19:25:52: "No celular, as logos podem ficar centralizadas? Tanto a que está na faixa verde, quanto a que está na faixa azul?" The green band is the header and the blue band is the footer, and she named the mark in each and nothing else in either. So the address and the links under the footer mark keep the left edge they had, and the nav keeps its own line under the header mark. The brand is alone on its flex line at these widths, so an auto margin centres it without touching the nav that wraps beneath. */ @media (max-width: 47.99em) { .site-header__brand { margin-inline: auto; } } /* The nav is one scrolling row on a telephone and one line at the right above 48em. Measured: eight items at a 44 px touch height need about 620 px, and a 360 px telephone offers 328 px of content width, so no wrapped arrangement fits two rows. Wrapping to three rows cost 123 px of header and pushed the headline out of the first screen, and shrinking the targets below 44 px would make every link harder to hit with a thumb. One row keeps every item in the DOM, in order, and every target 44 px tall. The cost, stated plainly: an item past the right edge needs a sideways swipe to reach. */ /* THE NAV WRAPS. It used to be one nowrap row with `overflow-x: auto` and the scrollbar hidden, which at 390 px put Início, Serviços and Curadoria on screen and left Projetos, Blog and Contato 245 px off the right edge with nothing to say so — no bar, no fade, no cut tile. Measured: scrollWidth 603 against clientWidth 358. Two rows cost 44 px of height and show all six destinations. */ /* AND ON THE PHONE IT IS ONE LINE, on her word of 2026-09-23 at 16:59:23: "Quero que seja uma linha só", over a screenshot with Contato dropped to a second row. The two rows above were a fix for a sideways scroll, and she does not want them either. BOTH ARE SATISFIED, and it took two changes rather than one. Measured at 390 px after Curadoria left the menu: five items at 18.72 px sum to 347 px and the row offers 358 px, so with the 24 px gaps the row needs 443 px and wraps by 85. Shrinking the type alone would leave the row rail-to-rail with nothing between items, so the type comes down AND the items spread: - the face is fluid below 48em and reaches its designed 1.17rem by 440 px, so a wider phone shows the size it always showed; - `space-between` puts every leftover pixel BETWEEN items instead of at the end, which also means a one-pixel rounding error cannot wrap the row; - the gap drops to the smallest step, because `space-between` is what sets the real spacing and a 24 px minimum would undo it. `flex-wrap` stays `wrap`. It is not the layout any more -- it is the floor: a viewport narrow enough to defeat the clamp wraps to a second row instead of pushing the page sideways, which is the defect this rule was written for. */ .site-nav { flex: 1 1 100%; min-width: 0; } .site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-3xs); justify-content: space-between; } .site-nav li { margin: 0; } /* SEVEN LABELS ON ONE LINE, which is her word twice over -- the six she had at 16:59, "Quero que seja uma linha só", plus "Sobre", asked for at 18:26. Seven labels do not fit at the size six fitted, so three things give a little and none of them is content: the type takes the clamp from 3.8vw to 3.55vw, the tracking goes to zero below the desktop breakpoint, and the GAP becomes 2 px here. The gap is the one that matters: `space-between` already spreads whatever is left over, so the gap is only a floor, and a 4 px floor is what wrapped the row at 360 -- the spread there is 3.5 px per gap. Set the floor below the spread and the row holds. Above 48em there is room for all seven at the full size and every one of these relaxes back. THE COST IS REAL AND IS TOLD TO HER: the phone labels are 13.8 px at 390 and 12.8 px at 360, against 16.6 px and 15.3 px when there were six. */ @media (max-width: 47.999em) { .site-nav ul { gap: 0 0.125rem; } } .site-nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; text-decoration: none; color: var(--color-papiro); font-family: var(--stack-heading); font-weight: var(--font-weight-strong); font-size: clamp(0.79rem, 3.55vw, 1.17rem); letter-spacing: 0; } .site-nav a:hover, .site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-papiro); } @media (min-width: 48em) { .site-header { flex-wrap: nowrap; justify-content: space-between; padding-top: var(--space-xs); padding-bottom: var(--space-xs); } .site-nav { flex: 0 1 auto; overflow-x: visible; } .site-nav ul { gap: 0 var(--space-m); justify-content: flex-end; } .site-nav a { font-size: 1.17rem; letter-spacing: 0.02em; } } main { display: block; } .section { max-width: var(--wrap); margin: 0 auto; padding: var(--space-2xl) var(--space-s); } /* A heading is the first thing in its section, so its own top margin stacks on the section's padding: measured, that put 134 px of nothing above every section heading instead of 80. The first child contributes no top margin anywhere; the space above a heading is the section's job. The last child is the same fault mirrored. Measured on the Mostarda panel, the list's own bottom margin made the field 117 px deep below its last line against 85 px above its heading, and that asymmetry is visible on a colour field. No element contributes an outside margin at either end of a section. */ .section > :first-child, .section > div > :first-child { margin-top: 0; } .section > :last-child, .section > div > :last-child { margin-bottom: 0; } /* The gaps between the sections of the three service pages (her audios of 2026-09-29, 18:09 to 18:20). Until then every boundary was the padding of the section above plus the padding of the section below: 160 px at 1440 and 96 px at 390, on all of them. She said which of those gaps are too big and which she likes, and she praised the gaps BETWEEN two headings inside one section (54 px, --space-xl), so those do not move. Only the boundary between two sections changes, and only on these pages: a service page is marked `.section--servico`, and the home, the project pages and the rest keep `.section` as it was. /habitar/ joined on 2026-09-30 (her 20:56:42, "revisse os respiros da aba Habitar"): she named no gap, so all four of its boundaries take `--menor`, and no class was added for it. The boundary is owned by the section BELOW it. A service section has no bottom padding (the closing section, `--fim`, keeps it, for the room above the footer) and takes its top padding from `--servico-acima`. Two sizes, because she asked for two: `--menor` ("too big, smaller") is 96 px at 1440 and 72 px at 390, which is 0.60 and 0.75 of what it was; `--pouco` ("a little smaller") is 120 px and 80 px, 0.75 and 0.83. Both stay above the 54 px between two headings, so a new section still reads as a new section. Amounts are mine: she gave none, only "um pouco". The fluid sizes are the straight line through the two measured widths and clamp at both ends. bin/check-service-spacing.py measures the result in Chrome at both widths. */ .section--servico { padding-top: var(--servico-acima, var(--space-2xl)); padding-bottom: 0; } .section--servico-fim { padding-bottom: var(--space-2xl); } .section--servico-menor { --servico-acima: clamp(4.5rem, 3.94rem + 2.286vw, 6rem); } .section--servico-pouco { --servico-acima: clamp(5rem, 4.07rem + 3.81vw, 7.5rem); } /* "Formato de atendimento" to "Investimento" was too small: 54 px, the same as every heading pair, and she asked for a little more air there. One heading, 64 px. */ h2.h2--respiro-maior { margin-top: 4rem; } /* THE GAP BETWEEN TWO SECTIONS ON A PROJECT PAGE, SHORTENED WHERE SHE NAMED IT. Her audios of 2026-09-29, 18:27 to 18:36, on six project pages, say the same thing: the breath between the opening image and Contexto, between Contexto and the next section, and between Decisões and Galeria "está muito grande". She liked the rest, so the gap around Estratégia and Decisões is not touched. Measured on the deployed site before this: every section side is --space-2xl (48 px on a phone, 80 px from 1100 px up), so two sections stand 96 to 160 px apart. A gap is the section above's bottom padding plus the section below's top padding, so one class shortens both sides: `.section--perto` on the section BELOW the gap, and the rule reaches up to the section above it with :has(). --respiro-projeto is the shared value: 28 to 36 px a side, 56 to 72 px a gap. --respiro-suave is for the one page where she said only "um pouco menor" (A.C. Dormitório): 36 to 52 px a side, 72 to 104 px a gap. */ :root { --respiro-projeto: clamp(1.75rem, 1rem + 2vw, 2.25rem); --respiro-suave: clamp(2.25rem, 1.25rem + 2vw, 3.25rem); } .section.section--perto { padding-top: var(--respiro-projeto); } .section:has(+ .section--perto) { padding-bottom: var(--respiro-projeto); } .section.section--perto-suave { padding-top: var(--respiro-suave); } .section:has(+ .section--perto-suave) { padding-bottom: var(--respiro-suave); } /* A Mostarda panel. Mostarda is the sixth colour of the guide's palette and the only one that can carry body text: Jeans on Mostarda is 4.70:1, which clears AA at body size, where Papiro on Pistache (3.11:1) and Jeans on Pistache (2.88:1) do not. So this is the one place on the site where a paragraph sits on colour instead of on paper, and it carries the credentials - the block that says who she is and what she is qualified to do. The panel shows paper around it at wide widths, the same way the title chip does: colour is applied to a surface here, it is not a wall-to-wall banner. */ .section--band { background: var(--color-mostarda); color: var(--color-jeans); } .section--band h2 { color: var(--color-jeans); } /* Her qualifications, as a timeline. She drew the form herself on 2026-09-21 at 11:25: the year, a dot, a rule, then the formation. The dot-and-rule is the same mark here and on a telephone; only the direction turns. The year is set in the heading face and the formation in the body face, so the column of years reads as the spine of the block rather than as part of each line. */ .formacao__sub { font-size: var(--step--1); margin: 0 0 var(--space-m); opacity: 0.85; } /* 46rem until 2026-09-24, and it is the same void: a timeline that stopped 735 px short of the measure. It is a list of years and names, and nothing about it is a column of prose, so it takes the measure with everything else. */ .formacao { list-style: none; padding: 0; margin: 0; } .formacao li { display: grid; /* The middle column is the rule, and its width is the rule's length. It was 1.5rem, which left an 8px stub once the mark's own 0.5rem margins were taken off each end: the dot was drawn and the dash beside it was not, so the block read as a bulleted list and not as the timeline she drew at 11:25:16 -- "2006 (dot)-------- Nome". Found by measuring the rendered block, not by reading the rule. 4.25rem leaves a 52px dash, which is the run her sketch shows. */ grid-template-columns: 4.75rem 4.25rem minmax(0, 1fr); align-items: center; margin: 0 0 var(--space-2xs); } .formacao__ano { font-family: var(--stack-heading); font-weight: var(--font-weight-strong); } /* The rule between the year and the formation, with the dot at the end that touches the year. `currentColor` because the block sits on the Mostarda band and the text there is Jeans: one rule for whichever ground it lands on. */ .formacao__marca { position: relative; height: 1px; background: currentColor; margin: 0 var(--space-2xs); } .formacao__marca::before { content: ""; position: absolute; left: -3px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: currentColor; transform: translateY(-50%); } .formacao__nome { min-width: 0; } .formacao__fecho { margin-top: var(--space-m); } /* Her phone form, dictated at 11:28:44: the dot and the year on one line, the formation under it, and the rule running down between the entries. The rule is the same element turned on its side, so there is one mark to keep and not two. */ @media (max-width: 47.99em) { .formacao li { grid-template-columns: 1.5rem minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; margin-bottom: var(--space-s); } .formacao__marca { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; width: 1px; height: auto; margin: var(--space-2xs) 0 0 0.3rem; } .formacao__marca::before { left: 50%; top: 0; transform: translateX(-50%); } .formacao__ano { grid-column: 2; grid-row: 1; } .formacao__nome { grid-column: 2; grid-row: 2; } /* The last entry closes the timeline, so its rule stops at the dot. */ .formacao li:last-child .formacao__marca { background: none; } } /* The one bold move, spent once: the page title sits on a Pistache field. Three reasons, and none of them decoration. It is the guide's own colourway, which shows the lockup as Papiro on Pistache (guia p. 11). Pistache is the only field in the palette that can hold type this large - Papiro on Pistache is 3.11:1, which clears AA for large text and fails for anything smaller - so the field is on the h1 and on nothing else, and no body text ever lands on it. And a solid colour chip behind the title is the material language of her own trade: a designer reads a rectangle of colour as a swatch, not as a banner. The negative left margin pulls the chip out so the title's text keeps the same left edge as the paragraph under it; the chip bleeds, the words do not. */ main > section.section:first-of-type h1 { background: var(--color-pistache); color: var(--color-papiro); width: fit-content; max-width: calc(100% + var(--space-s)); padding: var(--space-2xs) var(--space-s); margin-left: calc(var(--space-s) * -1); } .lead { font-size: var(--step-1); max-width: var(--measure); } /* A kicker is a line that tells you where you are, in the same voice as the body text. It used to be an eyebrow: tracked-out capitals with a tangerine rule under it, on every page. That was ornament - a label above a heading that repeated the nav item you had just followed - and it is one of the commonest tells of a generated page. The treatment is gone. The line stays only where it says something the nav cannot: on the home page it is the positioning, on the consultoria page it is the format, and on a post it is the section the post belongs to. */ .kicker { font-size: var(--step--1); color: var(--color-jeans); /* Measured at 8 px the line sat almost on the title chip and the two read as one crowded block. A full step gives the chip the air its weight needs. */ margin: 0 0 var(--space-s); } /* The home page's opening. It used to be a two-column split with the portrait beside the copy. Myrella asked on 2026-09-20 for the portrait smaller and centred between the title and the button, so the split is gone and the words keep the left edge while the portrait sits in the middle of them. The asymmetry is the point: the column stays left-aligned and one element is centred inside it, which is what she asked for and is not the same as centring the greeting. min(), not a bare width: 320 px is wider than a 360 px telephone's content box, and the old 384 px was already too wide. Measured, not read. */ /* The portrait sits IN her text, not between two halves of it. Centred in the column it was a full-width band: the reader met the welcome, then a photograph across the measure, then the paragraphs - the text divided in two, which is what she asked to be rid of on 2026-09-20. Floated, the same photograph is something the text runs around. 13rem is two thirds of the 20rem it used to be, measured against her own screenshot. It is a third of the 68ch measure, so the line beside it never falls below about 45 characters and the paragraph stays readable. */ .hero__retrato { float: right; width: min(13rem, 38%); margin: var(--space-3xs) 0 var(--space-s) var(--space-m); } .hero__retrato img { width: 100%; height: auto; border-radius: 2px; } /* Round, on her word of 2026-09-20, from the page of the old site she sent as the reference. A circle is a square with a 50% radius and nothing else: the width is fixed by the float above, the aspect-ratio makes the box square at every width, and object-fit crops the portrait into it instead of squashing it. Without the aspect-ratio the same rule draws an ellipse, because the source is 800x1000. */ .hero__retrato--redondo img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 22%; border-radius: 50%; } /* Her portrait, larger on a desktop, on her word of 2026-09-21 at 18:37:15: "Gostaria da foto maior no site. No celular ficou bom." So the growth lives in `min-width` queries only, and the telephone block below is not touched at all - the phone keeps the face it already has, which is the half of the request she settled. 13rem becomes 15rem from 48em and 17rem from 62em, 208 px to 272 px. THE `74ch` THAT USED TO RIDE ALONG ON THIS QUERY CAME OFF ON 2026-09-24, with the measure it was raised above. It existed because the float steals from the line and a 74ch column kept the paragraphs at 43 characters beside the portrait; against a base measure of 68ch that was wider, and against a base of 100% it is narrower, so it would now be the thing putting the void back beside the hero's own text. The float still shortens the line boxes it overlaps, which is the effect the old number was imitating. */ @media (min-width: 48em) { .hero__retrato { width: min(15rem, 34%); } } @media (min-width: 62em) { .hero__retrato { width: min(17rem, 40%); } } /* The float is contained so it cannot reach into the band below. */ .hero > div::after { content: ""; display: block; clear: both; } /* A telephone has no "beside": at this width the column is the photograph's own width, so a float would leave a two-word gutter beside it. It goes above her text, never wider than the text, and capped so one photograph cannot take the screen. */ @media (max-width: 47.99em) { .hero__retrato { float: none; width: 100%; margin: var(--space-s) 0; } .hero__retrato img { max-height: 45vh; width: auto; max-width: 100%; } /* The rule above frees the height so a tall photograph cannot take the screen, and a freed height is an ellipse once the corners are rounded. A circle keeps its square box here and is held to a size a thumb can pass: 14rem, centred, which is about the same share of a 390 px screen as 13rem is of the measure on a monitor. */ .hero__retrato--redondo { width: 14rem; max-width: 60%; margin-inline: auto; } .hero__retrato--redondo img { width: 100%; max-height: none; } } .card-list { list-style: none; padding: 0; margin: var(--space-m) 0; max-width: none; display: grid; gap: var(--space-m); } @media (min-width: 48em) { .card-list { grid-template-columns: repeat(2, 1fr); } } /* One hairline, no colour stripe. The stripe was decoration on a card whose heading already carries the hierarchy, and two identical stripes read as a component kit rather than as two things she actually offers. */ .card { border: 1px solid var(--color-cafe-com-leite); padding: var(--space-m); } /* The heading level and the heading SIZE are two different decisions, and this rule keeps them apart. The two cards on /servicos/ are the page's top-level sections under its h1, so they became h2 on 2026-09-22 — they were h3 and the page had no h2 at all, which is a broken outline. An h2 carries a larger size and a larger margin than the card was drawn for, and the card is not what changed. Sized and spaced here as it was, at whatever level the document needs. */ .card :is(h2, h3) { font-size: var(--step-1); margin: 0 0 var(--space-2xs); } .card p { margin-bottom: 0; } .steps { list-style: none; padding: 0; max-width: var(--measure); } .steps > li { border-left: 3px solid var(--color-pistache); padding: 0 0 var(--space-m) var(--space-m); margin: 0 0 var(--space-m); } .steps > li:last-child { padding-bottom: 0; margin-bottom: 0; } /* Same as the card above: "Entrevista com o cliente" and "Entrega" are the two top-level stages of /consultoria/ under its h1, so they are h2 now and are drawn at the size they had as h3. */ .steps > li > :is(h2, h3) { font-size: var(--step-1); margin: 0 0 var(--space-2xs); } .steps ul { margin-top: var(--space-2xs); } .button { display: inline-block; background: var(--color-jeans); color: var(--color-papiro); border: 2px solid var(--color-jeans); padding: var(--space-xs) var(--space-m); text-decoration: none; font-weight: var(--font-weight-strong); } .button:hover { text-decoration: none; background: var(--color-papiro); color: var(--color-jeans); } /* The blue box and the room above it. She asked on 2026-09-21 at 11:21:37 -- "dá um espaço entre a tabela e o quadro azul 'Falar sobre o meu projeto'" -- and at 11:22:15 for the same gap "nas outras páginas que aparece esse quadro", which is five places: the list of shopping, the project page, the consultoria page, the home page and the contact page. One class carries the gap so the five cannot drift apart. A named class and not a positional selector such as `.section > p:last-child`, because the sections already own that ground a few rules up and a positional rule there collides with them. var(--space-xl) is 54 px, the sixth step of the scale this file already declares. The step above it is the section gap, and at that size the box reads as the start of a new section instead of the close of this one. */ .chamada { margin-top: var(--space-xl); } .note { border-left: 4px solid var(--color-tangerina); padding: var(--space-s) var(--space-m); max-width: var(--measure); } /* The optional stages, as one orange-ruled block. She drew this on 2026-09-21 at 11:00:49, on a screenshot of the page, with the rule marked down the whole length of the block: "aumentar a linha laranja na lateral até o final do último parágrafo, como eu sinalizei". So the Tangerina rule stops being the border of a single note and becomes the border of everything the note introduces - the notice, both stage headings and their lists, down to the last line. The last child contributes no bottom margin, or the rule would run past the last line by a paragraph's worth of nothing. */ .escopo { border-left: 4px solid var(--color-tangerina); padding-left: var(--space-m); max-width: var(--measure); } /* Inside the block the notice keeps its words and gives up its own rule: two rules a few pixels apart is the fault this replaces, and the outer one is the one she drew. Its left padding goes too, so the notice's first word lines up with the headings below it, which is where her screenshot puts it. */ .escopo > .note { border-left: 0; padding: 0; } .escopo > :last-child { margin-bottom: 0; } /* Jeans, not Pistache: footer text is body size, and Papiro on Pistache is only 3.15:1, which fails AA below large text. */ /* Post pages and the blog list (issue #7). The layout of a post is the same for all 90 pages, because one template renders them all. */ .post { max-width: var(--wrap); } .post h1 { max-width: var(--measure); } .post__meta { font-size: var(--step--1); color: var(--color-jeans); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); margin-bottom: var(--space-m); } .post__meta span { opacity: 0.85; } .post__lead { margin: 0 0 var(--space-l); } /* 45rem until 2026-09-24, and it left a 550 px void beside the one image a post leads with. The lead is an image and not a column, so it takes the measure now. Its file sets the ceiling: a 1200 px source is the widest derivative built. */ .post__lead img { width: 100%; height: auto; max-width: none; } /* Two tiles on a telephone, three on a large screen. A tile never reaches 360 CSS pixels, which is what lets the gallery image stop at 480 and keeps a post with 61 images inside the 1.5 MB budget. */ .gallery { list-style: none; padding: 0; margin: var(--space-m) 0; max-width: none; display: grid; gap: var(--space-2xs); grid-template-columns: repeat(2, 1fr); } @media (min-width: 48em) { .gallery { grid-template-columns: repeat(3, 1fr); } } .gallery li { margin: 0; } .gallery img { width: 100%; height: auto; } .post__sources { list-style: none; padding: 0; font-size: var(--step--1); } .post__sources li { margin-bottom: var(--space-3xs); overflow-wrap: anywhere; } .post__back { margin-top: var(--space-xl); } .post-list { list-style: none; padding: 0; max-width: var(--measure); } .post-list li { border-bottom: 1px solid var(--color-cafe-com-leite); padding: var(--space-2xs) 0; display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-s); justify-content: space-between; } .post-list a { text-decoration: none; } .post-list a:hover { text-decoration: underline; } .post-list__date { font-size: var(--step--1); white-space: nowrap; } /* The blog index. Myrella asked for "algo mais de livro, ou um índice": an index of the 90 texts, in publication order, with no date printed on a line. A book's table of contents is set in columns, so this one is: two on anything wider than a telephone, one on a telephone. The rule under each entry is what makes a column of titles read as a list of things rather than as a paragraph of links, and it is the only rule on the page. Rows are 49 px tall, measured: a link that is 41 px is under the 44 px this site keeps for a thumb, and an index is the one page a reader scrolls with a thumb. */ /* The blog index. The list of titles came off the page on 2026-09-20 and the covers came back as cards, in the format of the screenshot she sent of the old site. A grid and not columns, unlike /projetos/: there the tile IS the photograph and a ragged bottom edge reads as a panel, here the tile is a text block under a photograph and a ragged edge reads as a mistake. So every cover is cropped to one ratio and every card is the same width. 4/3 is the ratio most of her covers already are, so the crop takes the least from the most of them. No shadow and no rounded corner. The card is bounded by the colour it sits on, the way her own screenshot bounds it, and a shadow under forty-four tiles is forty-four pieces of chrome. */ .cartoes { list-style: none; padding: 0; max-width: none; margin: var(--space-l) 0 0; display: grid; gap: var(--space-m); grid-template-columns: 1fr; } @media (min-width: 40em) { .cartoes { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62em) { .cartoes { grid-template-columns: repeat(3, 1fr); } } .cartoes li { margin: 0; } .cartao__link { display: flex; flex-direction: column; height: 100%; background: var(--color-mostarda); color: var(--color-jeans); text-decoration: none; } .cartao__link:hover .cartao__titulo { text-decoration: underline; } .cartao__capa { display: block; } .cartao__capa img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .cartao__corpo { display: flex; flex-direction: column; padding: var(--space-s); } .cartao__titulo { font-family: var(--stack-heading); font-weight: var(--font-weight-strong); font-size: var(--step-1); line-height: 1.2; /* Three lines and then the cut. Her own cards cut the title mid-word with an ellipsis, and a title that runs to six lines makes one card twice its neighbour. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .cartao__data { font-size: var(--step--1); margin-top: var(--space-2xs); } .cartao__resumo { margin-top: var(--space-2xs); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* The line between the texts and Habitar on /blog/, her word of 2026-09-28 at 13:30:39: "separe com uma linha". It is the rule the Habitar block already draws above itself (Café com Leite, 1 px), so where the two meet the block gives up its own and the page shows one line, not two. Not a band or a block. */ .divisor { border: 0; border-top: 1px solid var(--color-cafe-com-leite); margin: var(--space-xl) 0 var(--space-m); } .divisor + .habitar-destaque { border-top: 0; margin-top: 0; padding-top: 0; } /* HABITAR, her section for the articles she publishes on LinkedIn. Named by her on 2026-09-23 at 16:51:41, held to the three she sent at 16:57:15. WHY IT IS NOT THE BLOG'S CARD. A card on /blog/ is a cover, a title and the opening of a text -- it exists to show what a text looks like before it is read. These three have no cover on this site, because the text is not on this site: there is nothing to show and nothing to summarise without copying another publisher's page. So the section is TYPE ONLY, which is also what makes it unmistakably a different section from the blog rather than a second row of the same cards. WHY THE ROWS ARE RULED. Three texts in a single column with nothing between them read as one paragraph of three titles. The hairline is a separator and not decoration: it is the same hairline the title blocks on /projetos/ use, and it says where one text ends and the next begins. The rule is on the item and not on the link, so the whole row is the target and the line runs the full measure. 68ch and not the full wrap: these are long titles in one column, and a title that runs the width of a desktop is a line nobody finishes. THE NAME IS THE SHAPE AND NOT THE PAGE. It was `.habitar` while /habitar/ was the only place it appeared. The home's Editorial section is the same object -- a stack of ruled rows, a title and a date, the whole row the target -- so the name became the shape's and both sections use it. Two rules for one object is how a site grows a seam between two places that should look the same. */ .escritos { list-style: none; padding: 0; margin: var(--space-l) 0 0; max-width: var(--measure); } .escritos__item { margin: 0; border-top: 1px solid var(--color-cafe-com-leite); } .escritos__item:last-child { border-bottom: 1px solid var(--color-cafe-com-leite); } .escritos__link { display: block; padding: var(--space-m) 0; text-decoration: none; color: inherit; } .escritos__link:hover .escritos__titulo, .escritos__link:focus-visible .escritos__titulo { text-decoration: underline; } /* The title is the heading face at the third step, so the three read as a stack of titles and not as body copy with a date under it. Line-height is looser than a heading's, because these are two and three lines long each. */ .escritos__titulo { display: block; font-family: var(--stack-heading); font-weight: var(--font-weight-strong); font-size: var(--step-2); line-height: 1.25; } .escritos__data { display: block; margin-top: var(--space-2xs); font-size: var(--step--1); opacity: 0.85; } /* The work on /projetos/. She sent the photographs on 2026-09-20 and the page had none before. Each project is a prancha, and the register is hers: a drawing sheet with a legend block, not a card. There is no border around a photograph and no shadow under one - the photograph is the work, and a frame around it is chrome. */ /* 64rem until 2026-09-24. The prancha is the drawing she delivers, and its own title block carries type a reader has to be able to read: at 1024 px inside a 1474 px measure the sheet stopped 450 px short of the page and the small type paid for it. It takes the measure now, and the plate's own file is the ceiling -- the sources run from 1091 to 2373 px, so every one of them supports the width. */ .prancha { margin-top: var(--space-2xl); } .prancha--first { margin-top: var(--space-l); } .prancha__nome { margin-top: 0; margin-bottom: 0; } /* The service is the heading and the case is the line under it, which is the order she named them in. It is set as a caption, not as a second heading: one work has one title, and the place is how you tell two of the same service apart. Since 2026-09-22 the caption is a span INSIDE that heading rather than a paragraph under it, so the heading itself carries the distinction. The three lines below are what a heading does to its contents -- heading family, strong weight, 1.2 line-height -- undone, so the caption looks exactly as it did and the document still has one title per work. */ .prancha__caso { display: block; font-family: var(--stack-body); font-weight: normal; line-height: 1.6; max-width: var(--measure); font-size: var(--step-0); color: var(--color-jeans); margin: var(--space-3xs) 0 var(--space-s); } .prancha__legenda { font-size: var(--step--1); margin-top: var(--space-2xs); color: var(--color-jeans); } /* The settled panel: columns, not a grid. A grid row is as tall as its tallest tile, so a portrait photograph beside a landscape one leaves a hole the size of the difference - measured on Sala 09, a hole the full height of a photograph on four of thirteen tiles. Columns fill the short column first and pack the rest. break-inside stops a photograph from being cut across two columns. Two columns on a telephone: at 360 px a three-column tile is 100 px wide, which is smaller than the print she would show a client. */ .prancha__painel { list-style: none; padding: 0; max-width: none; margin: var(--space-m) 0 0; columns: 3; column-gap: var(--space-2xs); } .prancha__painel li { break-inside: avoid; margin: 0 0 var(--space-2xs); } .prancha__painel img { width: 100%; height: auto; display: block; } @media (max-width: 47.99em) { .prancha__painel { columns: 2; } } /* PHONE ONLY: one drawing per row, the whole width of the screen, named underneath. Her request of 2026-09-23, in two steps. She sent the Escandinavo drawings at 16:08:11 -- "essas imagens, somente no celular, elas conseguem ficar maiores e uma embaixo da outra?" -- and the same for the Sobrado at 16:08:27. The first arrangement was rejected at 16:10:12 ("eu não gostei dessa configuração, pode sugerir outra"), the proposal was one per row at full width with a short caption under each, and she answered "Sim" at 16:24:26. Why one per row when the two-column grid is not broken. These are DRAWINGS, not photographs. At two columns on a 390 px phone each sheet renders about 175 px wide, and every measurement and label burned into the sheet is unreadable at that size -- which is the defect she circled. Full width is roughly 350 px, and the caption underneath says in words what the sheet says in small type. ONLY THE TWO CASES SHE NAMED carry the modifier, from `painel_mobile` in projetos.json. The Condoconta and Apartamento Ingleses panels are photographs and stay panels, because she did not speak about them (she said so at 16:09:11 through the route, and did not correct it). DESKTOP IS UNTOUCHED: three columns as before, and the caption is not rendered there at all, because the drawings are legible at that size and a caption under each tile would break the row rhythm. */ .prancha__painel--coluna .prancha__tile-legenda { display: none; } @media (max-width: 47.99em) { .prancha__painel--coluna { columns: 1; } .prancha__painel--coluna li { margin: 0 0 var(--space-m); } .prancha__painel--coluna .prancha__tile-legenda { display: block; font-size: var(--step--1); line-height: 1.35; color: var(--color-jeans); margin-top: var(--space-3xs); } } /* THE SAME SHEETS IN A GRID, because a set of six of them cannot go in columns. Consultoria on-line V.B. is the first case on /projetos/ with more than three tiles of one size, and the settled panel balances columns by height, so six equal sheets land two to a column and a reader scanning row by row meets them in the order hall, suggestions, bedroom, living room, kitchen, suggestions again -- measured on the rendered page. The order in projetos.json is the deck's order and a grid keeps it. A grid is only safe because every sheet here has the same proportion, which is the hole the settled panel exists to avoid. One sheet per row on a telephone, with its caption, which is the treatment she approved for the Escandinavo and Sobrado drawings at 16:24:26 and the right one for the same reason: a 16:9 sheet of small type is unreadable at two columns. Nothing appears under a tile on a desktop. */ .prancha__painel--aberto { columns: auto; display: grid; } .prancha__painel--aberto li { margin: 0; } .prancha__painel--aberto img { width: 100%; height: auto; display: block; } .prancha__painel--aberto .prancha__tile-legenda { display: none; } @media (min-width: 48em) { .prancha__painel--aberto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); } } @media (max-width: 47.99em) { .prancha__painel--aberto { grid-template-columns: 1fr; gap: var(--space-m); } .prancha__painel--aberto .prancha__tile-legenda { display: block; font-size: var(--step--1); line-height: 1.35; color: var(--color-jeans); margin-top: var(--space-3xs); } } /* The justified plate, for the one case Myrella asked for it on: "umas fotos maiores, outras menores" (2026-09-21 11:02:30), and the first not much larger than the rest (11:05:51). Every row runs flush from margin to margin, every tile in a row is the same height, and each tile's width follows its own photograph. The whole mechanism is one identity. A tile's basis is its proportion times the unit, and its growth factor is its proportion. Free space in a row is shared in proportion to the growth factors, so the tile lands at width = proportion x K; with `aspect-ratio` on the same element its height is that width over its proportion, which is K. Every tile in the row computes the same K, so the row is one height and nothing can leave a hole. The basis only decides where the row BREAKS. Nothing is cropped. Because the height falls out of the same proportion, each photograph meets its box exactly; `object-fit` only absorbs sub-pixel rounding. Measured on the rendered page: every tile's box proportion equals its file's proportion to three decimals, and no tile is cropped. It is a modifier and not the base rule. Justified rows fill whatever the last row holds, so a case whose tiles do not divide into equal rows ends with one lone tile stretched the full measure -- Sobrado Ingleses, three tiles, came out 508, 508, 1024, which is the "imagem grandona e as outras menores" she rejected on 2026-09-20. Three of the four cases keep the settled panel. Which case carries this one is read from projetos.json and not decided here. --panel-unit is the basis of a tile whose proportion is 1, and it is the one dial: higher, fewer and larger tiles. A telephone has to hold two photographs where a desktop holds three, so it has its own value. */ .prancha__painel--mosaico { --panel-unit: 15rem; display: flex; flex-wrap: wrap; gap: var(--space-2xs); } /* `margin: 0` is load-bearing and not tidiness. A global `li` rule further up this file sets a 4 px bottom margin, and `gap` cannot override a margin. Left in, every row gains 4 px under its photographs and the gutter measures 12 px between rows against 8 px between columns -- two gutters, where the panel promises one small one. Measured on the rendered page: rows at 735, 1045 and 1314 with tiles 298, 257 and 302 tall. Every other list that uses `gap` in this file zeroes its own margin for the same reason. */ .prancha__painel--mosaico li { margin: 0; flex: var(--aspect) 1 calc(var(--aspect) * var(--panel-unit)); aspect-ratio: var(--aspect); min-width: 0; } .prancha__painel--mosaico img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 47.99em) { .prancha__painel--mosaico { --panel-unit: 9rem; } } /* ONE PHOTOGRAPH REACHES THE SCREEN EDGE, on a telephone only. Her word of 2026-09-23 at 19:24:16 -- "Essa foto pode ficar maior? Chegando até a ponta como demostrei?" -- over a screenshot of this plate with a mark drawn from the coffee corner photograph out to the edge of the screen. On a desktop the plate is what she approved and this changes nothing. WHY 100vw AND NOT 100%. The tile has to leave the page's own gutter, and the gutter is a padding on the section, not a width the tile can see. The basis is the viewport and the two margins are the gutter it cancels, so the row's outer width comes back to exactly the container's and the tile still holds a row of its own. No scrollbar exists at these widths, so 100vw is the screen and not more than it. `margin: 0` on the rule above is load-bearing and this rule has to out-specify it and not merely follow it: `.prancha__painel--mosaico li` is two classes and a type, so it is named here at the same weight, later in the file. The photograph is not cropped to fill the band. It is a portrait file at 0.75 and it keeps its own proportion, which is what the plate promises and what makes the tile taller as well as wider. */ @media (max-width: 47.99em) { .prancha__painel--mosaico .prancha__tile--ponta { flex: 0 0 100vw; margin-inline: calc(-1 * var(--space-s)); } } /* THE EVEN GRID, and only the Apartamento Ingleses carries it. Her word of 2026-09-23 at 17:11:28: "Consegue organizar melhor as fotos? De uma forma que fique mais organizada as imagens." Over a screenshot of that panel. The route proposed two rows of three, all the same size, and named the cost in the same breath -- "para ficarem iguais, as fotos verticais perdem um pouquinho em cima e em baixo" -- and she answered "Isso" at 17:15:23 and "Combinado" at 17:15:33. WHY IT IS NOT THE PANEL ABOVE. The panel is a multi-column flow, so every tile keeps its own proportion and six photographs of different shapes end in a ragged last row -- which is exactly the untidiness she circled. This is a grid of equal cells, and equal cells mean the photographs are cropped rather than reshaped. She approved that crop, so it is taken from the centre and not from the top: a room photograph holds its subject near the middle. SIX TILES IS THE COUNT THAT MAKES IT WORK. Six divides into two rows of three with nothing left over, which is what she asked for and what the count now gives. A case whose count does not divide carries the plain panel instead, so no case can end with a lone stretched tile. THE CELL IS SQUARE, and that is read from the six files rather than picked. Four of them are portrait at 0.750 and two are landscape at 1.333 and 1.339. A square cell crops 25 per cent of one side of EVERY one of the six; a 4:3 cell would crop 43.7 per cent off the height of the four portrait files, and a 3:4 cell 43.8 per cent off the width of the two landscape ones. Square is the shape with the smallest worst case, so it is the one that loses the least. THE ARRANGEMENT IS HERS AT EVERY WIDTH and is not adapted for the phone. She was looking at a desktop screenshot and said two rows of three; three across a 390 px telephone is a 111 px tile, which is small, and the alternative was to answer her instruction with a different arrangement without saying so. It is named to her in the round's message instead, so she can ask for two across on the phone if she prefers it. */ .prancha__painel--grade { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); } /* Load-bearing, for the reason the mosaico rule above states: `gap` cannot override the global `li` bottom margin, and left in it makes the row gutter 4 px larger than the column gutter. */ .prancha__painel--grade li { margin: 0; } .prancha__painel--grade img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } /* The legend block. Its form is copied from the corner of her own pranchas, where she writes "Designer Myrella Masseli, agosto 2020": a ruled stack of label and value. It is not a card - no box, no fill - so it reads as the sheet describing itself. One per project, and nothing else on the page uses this form. */ .bloco { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; margin: var(--space-s) 0 0; /* 42rem until 2026-09-24. It sits under a prancha that now runs the measure, so a 672 px table under a 1474 px sheet was the void made more visible, not less. The values are short by construction -- the longest on the site is 78 characters and the column widths are `max-content` and `1fr`, so the measure costs no legibility here: a dt/dd row is a short value on a long line, not a long line of prose. */ border-top: 2px solid var(--color-cafe-com-leite); font-size: var(--step--1); } .bloco dt, .bloco dd { margin: 0; padding: var(--space-2xs) var(--space-s) var(--space-2xs) 0; border-bottom: 1px solid var(--color-cafe-com-leite); } .bloco dt { font-weight: var(--font-weight-strong); padding-right: var(--space-s); } .bloco dt:last-of-type, .bloco dd:last-of-type { border-bottom: 0; } /* The shopping list, inside the consulting prancha. It is set apart because she asked for it beside the consulting example, and because it is the one artefact on the page that a reader is meant to recognise rather than to read in full. */ .lista { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--color-cafe-com-leite); } .lista h3 { margin-top: 0; } .lista__figura { margin: var(--space-s) 0 0; } .lista__figura img { width: 100%; height: auto; border: 1px solid var(--color-cafe-com-leite); } /* "A lista de compras ficou muito grande... nao precisa ser daquele tamanho" (2026-09-20). It was the full width of the prancha, 1024 px, which made a document nobody can read on a screen the largest thing on the page. Held to a column now: it shows what the client receives without pretending to be readable here. */ /* 2026-09-30, her audio of 2026-09-29 at 18:27:18 on the Sobrado Ingleses page: "acho que a lista de compras ficou muito pequenininha, eu não gostei dela assim, ficou esquisito." 22rem printed a 1373 px document at a quarter of its size, so its 28 px table text was 7 px. The figure is now 42 rem (672 px), which sets that text at 13.7 px, and on a screen narrower than that the figure scrolls sideways instead of shrinking the document again: the list is not cropped and not edited. The 2026-09-20 word that 1024 px was too big for the page still holds; 672 px is the middle between that and what she sees now. */ .lista__figura--amostra { max-width: 42rem; overflow-x: auto; } .lista__figura--amostra img { min-width: 42rem; } /* The merged #designdrops text. Myrella asked for the 46 posts of the 2016 series in one text, grouped by colour, so the page's whole structure is the grouping and the index at the top is the grouping made visible. */ .drops { max-width: var(--wrap); } /* The index. Her nine colour words plus the group that has no colour, as jump links. Not a nav bar and not a set of pills: the count beside each word is the reason the list is worth reading, because it says the series spent nine posts on rosa and one on branco. flex-wrap, so it reflows to two or three lines on a telephone rather than scrolling sideways. */ .drops__cores { list-style: none; padding: 0; max-width: none; margin: var(--space-l) 0 var(--space-2xl); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); } .drops__cores li { margin: 0; } .drops__cores a { display: inline-flex; align-items: baseline; gap: var(--space-3xs); min-height: 44px; padding: var(--space-2xs) var(--space-s); border: 1px solid var(--color-cafe-com-leite); text-decoration: none; font-family: var(--stack-heading); } .drops__cores a:hover { text-decoration: underline; background: var(--color-papiro); } .drops__cores span { font-size: var(--step--1); opacity: 0.75; } /* Every id here is a published address: 46 retired post URLs redirect to this page at their own colour. Without scroll-margin the sticky-free header still leaves the heading flush against the top edge, so a reader arriving from an old link cannot see which group they landed in. */ .drops__grupo { scroll-margin-top: var(--space-m); } .drops__periodo { font-size: var(--step--1); opacity: 0.85; } /* One row per post, not one per photograph, and the photographs sit beside the text. Myrella on 2026-09-20: "não quero essa divisão no texto. Quero como estava antes, mas não quero que a foto passe o tamanho do texto." The first draft of this page put each photograph above its own slice of her text and flowed the slices down two columns, so a post with three photographs became three tiles in two columns and her text was read in pieces. That is the division. Now a post is one row: her text runs whole on the right, its photographs stack on the left. HER SIZE RULE IS WIDTH, and it is read from her own site (ADR-0005). On her Wix post the photograph is 350 px inside a 614 px column of text - comfortably narrower - while being 274 px tall against about 60 px of text. So "não quero que a foto passe o tamanho do texto" is the photograph not filling the width of the text block. The first draft made photo and text the same 533 px and let the photograph run to 1057 px tall, which is the thing she is looking at. The photo column is 30% of the row against the text's 70%, so the photograph can never be as wide as the text. Enforced by the grid, not by a number to keep true. Height is capped, not clamped to the text. Clamping the photograph to the height of its own caption was built and measured first: a two-line caption gave a 336x90 box, the photograph rendered about 70 px wide inside it, and a series of colour references became postage stamps beside empty space. Her own site never did that. The cap is 18rem, which lands where her own photographs sat. Both cells of the row stretch to the same height, so the photograph is never taller than the text block beside it either. */ .drops__lista { list-style: none; padding: 0; max-width: none; margin: var(--space-m) 0 0; } .drops__item { display: grid; grid-template-columns: minmax(0, 30%) 1fr; gap: var(--space-m); margin: 0 0 var(--space-l); } .drops__fotos-in { display: flex; flex-direction: column; gap: var(--space-3xs); } .drops__fotos-in img { width: 100%; height: auto; max-height: 18rem; object-fit: contain; object-position: left top; } .drops__texto > :last-child { margin-bottom: 0; } .drops__texto p { margin-bottom: var(--space-2xs); } /* A telephone has no "beside". The photograph goes above its text, as wide as the text column and never wider, and capped so one reference cannot fill the screen and push her words off it. */ @media (max-width: 47.99em) { .drops__item { grid-template-columns: 1fr; gap: var(--space-2xs); } .drops__fotos-in { display: block; } .drops__fotos-in img { width: 100%; height: auto; max-height: 45vh; object-fit: contain; object-position: left top; margin-bottom: var(--space-3xs); } } /* The 13 posts that carry no text. There is no text for the photograph to exceed, so the rule has nothing to measure against and they are a plate of photographs. */ .drops__placa { list-style: none; padding: 0; max-width: none; margin: var(--space-m) 0 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .drops__placa li { margin: 0; } .drops__placa figure { margin: 0; } .drops__placa img { width: 100%; height: auto; } .drops__placa figcaption { font-size: var(--step--1); opacity: 0.85; margin-top: var(--space-3xs); } /* Her own line heading a run: "TETO VERDE", "PAREDE BRANCA". She wrote it in capitals in 2016 and it stays as she wrote it (ADR-0005). It is kept because it names the surface, which is the one thing the colour group does not already say. */ .drops__super { font-family: var(--stack-heading); font-weight: var(--font-weight-strong); } .drops__meta { font-size: var(--step--1); opacity: 0.85; } .drops__credito { font-size: var(--step--1); opacity: 0.85; overflow-wrap: anywhere; } .site-footer { background: var(--color-jeans); color: var(--color-papiro); margin-top: var(--space-2xl); } .site-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: var(--space-l) var(--space-s); } .site-footer a { color: var(--color-papiro); } .site-footer__links { list-style: none; padding: 0; max-width: none; display: flex; flex-wrap: wrap; gap: 0 var(--space-m); } .site-footer__links li { margin: 0; } /* THE ROW IS SIX MARKS since her word of 2026-10-01 at 19:22:23 removed X (MD-171) from the WhatsApp, Instagram, Facebook, LinkedIn, Pinterest and TikTok marks of 18:31:08. Six 44 px targets are 264 px, so a wide phone holds them on one row with the desktop gap and a 360 px phone wraps to two rows, which flex-wrap already allows. */ /* 44 px targets, and a string that cannot push the page sideways. The footer used to print the whole URL as the link text, which measured 425 px wide on a 360 px telephone and made every page scroll sideways. The link now says what it is. */ .site-footer__links a { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; overflow-wrap: anywhere; } /* The e-mail line above the marks. The address prints, because an e-mail is read and not a mark, and it is one 44 px target that cannot push the page sideways. Its envelope mark and the breathing room below are hers of 2026-10-01 (MD-171, 19:22:37 and 19:23:26): the envelope before the address, and the social marks lower with more space under the e-mail. */ .site-footer__email { margin: 0 0 var(--space-m); } .site-footer__email a { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; font-weight: var(--font-weight-strong); overflow-wrap: anywhere; } /* PROJECT: the brand marks, on her word of 2026-09-23. She asked for them twice in one afternoon and changed her mind between the two. At 15:38:12 she wanted the marks kept BESIDE the words Instagram and Facebook; at 15:52:31 she replaced that — "na verdade, onde está escrito instagram e facebook, só coloque o símbolo deles" — and at 15:52:40 added LinkedIn. The later word wins. The glyphs are single-path SVG from simple-icons (CC0), drawn in `currentColor`, so the same mark is Jeans on the Papiro card and Papiro on the Jeans footer and no second file is needed for either ground. AN ICON-ONLY LINK HAS NO NAME ON SCREEN, so it carries one that is not on screen: every mark link holds a `visually-hidden` span with the network's name. Without it the three would be three unlabelled controls, which is the defect the UX review of 2026-09-22 was watching for and this round would otherwise have introduced. */ .ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; } .ico-link { min-width: 44px; justify-content: center; } /* The contact page's two lines. Same shape as the footer row: 44 px targets, the mark and its word held together by a gap rather than by a margin on either. */ .linha-contato { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-m); } .linha-contato a { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; font-weight: var(--font-weight-strong); overflow-wrap: anywhere; } /* The e-mail on /contato/ is a phrase link (ADR-0056): bold and underlined on hover, unlike the telephone line, whose WhatsApp mark already names the action. It keeps the 44 px target of the contact rows, and it is not in the arrow-check exceptions, so the guard reads it as the phrase it is. The envelope before the address is hers of 2026-10-01 at 19:22:37 (MD-171). */ .contato-email a { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; font-weight: var(--font-weight-strong); overflow-wrap: anywhere; } /* The "Redes sociais" box on /contato/, on her word of 2026-09-23 at 17:19:35: each network keeps its mark AND its name, "dentro desse retangulo de uma forma organizada". It replaces the icon-only row that the 15:52:31 word asked for. The mark came back beside the word rather than instead of it, so this is the shape `.linha-contato` already has, one list deeper. WHAT "ORGANIZADA" DECIDES. The three are one flex row on a single baseline, evenly spread inside the rectangle, each a 44 px target wherever it lands. MEASURED, because the three names are wider than the three marks were: the items sum to 286 px and the card's inner measure is 310 px at a 390 px viewport, so the 24 px gap the rows above use needs 334 and pushes LinkedIn onto a line of its own. `space-between` with the smallest gap keeps the three on one line and spreads what is left evenly, and the row falls back to two lines only where it truly cannot fit. */ .redes { list-style: none; padding: 0; margin: 0; max-width: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-3xs); } .redes li { margin: 0; } .redes a { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; font-weight: var(--font-weight-strong); } /* Her lockup in the footer, on her word of 2026-09-23 at 15:49:36: "aqui falta colocar a minha logo". It replaces the written name, and at 17:17:49 it also replaced the written tagline -- "mantenha somente a da logo. Pode aumentar um pouco a logo para conseguirem ler a frase?" -- so it is bigger than it was, and the size is set by the line inside it rather than by taste. THE TARGET IS THE LINE, and the line is what sets the size. Measured from the file's own geometry, not estimated: the phrase is path 3 of 3 and its box is 10.72 units tall in a 234-unit viewBox, so at a rendered width of W px the line is about 10.72 x W / 395, or 0.0271 W px tall. At the 176 px it was before, that is 4.8 px -- which is why she could not read it. About 9 px is the floor for a line this size, and 9 / 0.0271 is 332 px. 332 px on a 390 px telephone is 93 per cent of the measure, so the mark is set as large as a 390 px screen carries and stops: `82vw` reaches 320 px there and the ceiling holds it at 332 on anything wider. The trade is stated rather than hidden -- on the narrowest phones the line lands near 8,7 px, which is small, and the alternative was a mark filling the whole footer. */ .site-footer__logo { margin: 0 0 var(--space-3xs); } /* The other half of her 19:25:52 word. Only the mark moves; the address and the three links under it keep the left edge, which is why this is a margin on the image and not an alignment on the block that holds it. */ @media (max-width: 47.99em) { .site-footer__logo { margin-inline: auto; } } /* =================================================================================== THE HOME PAGE, rebuilt 2026-09-23 from the brief she sent at 17:37:57. Twelve sections in a row is what makes a page read as a template, so the rhythm is the design here and not an afterthought. Mostarda carries body text and is the one colour of the guide that can, and it is used exactly three times: the concept, the single line that turns the page, and the close. Every other section sits on paper and is told apart by its SHAPE -- prose, a definition list, bordered cards, a photograph row, a ruled list, a bare pair. Nothing repeats an object. The heading size is raised once, here, rather than per section: the brief asks for "títulos maiores", and a size set on the section heading is a size that cannot drift between twelve places. =================================================================================== */ /* THE MANIFESTO SITS UNDER THE HERO LEAD, where the two hero actions were (her word of 2026-09-29 at 18:01:57: "Vamos subir esse texto do Mais do que projetar espaços ali para baixo, mais ou menos onde está o Fale comigo hoje"), and "Projetos e histórias" comes up after it with "só um respiro pequeno" between the two. The sections keep their own padding everywhere else; these three rules are the only place the home's top is tightened. */ .hero:has(+ .section--manifesto) { padding-bottom: 0; } .section--manifesto { padding-top: var(--space-l); padding-bottom: var(--space-m); } .section--manifesto + .section { padding-top: var(--space-m); } /* THE HERO LEAD IS SMALLER than the other leads, on her word of 2026-09-28 at 17:31:42, so "vida" is not left alone. MEASURED in Chrome on the served home before the change: the sentence set on one line is 1336 px wide at 23.04 px, so it fits the 1169 px column at 1280 only below about 20.1 px. This size gives 19.1 px at 1280 and 19.8 px at 1440, one line at both with room for a fallback face; below that the sentence wraps, and `balance` plus the no-break space in the page keep the last line from being one word. On a phone it is 18 px, still above the body text. */ .hero__lead { font-size: clamp(1.125rem, 0.875rem + 0.4vw, 1.25rem); text-wrap: balance; } /* The three terms, as a definition list. No border and no panel: the card below it is a bordered box already, and two bordered things in a row is one component used twice for two different jobs. The separation is space and a hairline above each term. */ .conceito { margin: var(--space-l) 0 0; display: grid; gap: var(--space-m) var(--space-l); } /* EACH PAIR IS WRAPPED IN ITS OWN BOX, and the wrapper is not tidiness. A `dl` whose `dt` and `dd` are grid children puts each of them in a cell of its own, so three terms and three definitions flow across the columns as six separate items and the definitions detach from their terms. Measured on the rendered page before the wrapper: "Pessoas" sat above "Layout, circulação", which belongs to Espaços. The wrapper is valid inside a `dl` and it makes the pair one grid item. */ @media (min-width: 48em) { .conceito { grid-template-columns: repeat(3, 1fr); } } .conceito dt { font-family: var(--stack-heading); font-weight: var(--font-weight-strong); font-size: var(--step-1); padding-top: var(--space-2xs); border-top: 2px solid currentColor; } .conceito dd { margin: var(--space-2xs) 0 0; } @media (min-width: 62em) { .card-list--tres { grid-template-columns: repeat(3, 1fr); } } /* The turn. Nothing else is on this panel, so the line carries the whole section and is set at the largest step the scale has. THE 24ch CAP CAME OFF ON 2026-09-24 WITH THE REST OF THE MEASURE, and the argument that put it there is answered rather than deleted. It read: "a sentence set large and run wide is a sentence nobody finishes." The arithmetic that made that true has changed. 24ch was short because the sentence used to sit in a 68ch column; now that the line fills a 1474 px content box at `--step-3` (40 px), it runs about 61 characters -- the upper end of what a pull-quote is normally set at, and shorter than the body lines beside it. The cap would be the one text block on the site that still stopped in the middle of the page, which is the fault she marked. */ .section--respiro { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } .respiro { font-family: var(--stack-heading); font-weight: var(--font-weight-strong); font-size: var(--step-3); line-height: 1.15; max-width: none; margin: 0; /* NO STRANDED WORD. `wrap` is the initial value and it leaves the last word of a statement alone on a line: at 1440 the Sala 09 sentence ended "…pela / equipe.", and at 1585 the home's ended with a 79 px line carrying one word. `pretty` is the value that exists for exactly this and it does nothing else: it pulls a word down only when the last line would carry one. Measured on every page that has a respiro, before and after, at 1440, 1585 and 360: it changes the Sala 09 block at 1440 (115 px -> 192 px) and the home, editorial and privacidade blocks at 1585 (79 px -> 196 px), and it changes nothing at 360 on any page, which the phone reading keeps. It degrades to the old behaviour on a browser that does not know the value. */ text-wrap: pretty; } /* Her two sentences, one under the other (2026-09-28, 13:19:12): the gap is a line of the band's own rhythm, not a paragraph break of body text. */ .respiro + .respiro { margin-top: var(--space-s); } /* The three works. The photograph is the tile and the words sit under it, which is the brief's own direction for this section. One link per tile, no border, no card. */ .obras { list-style: none; padding: 0; margin: var(--space-l) 0 0; display: grid; gap: var(--space-l) var(--space-m); } @media (min-width: 40em) { .obras { grid-template-columns: repeat(2, 1fr); } } /* TWO ACROSS AND NOT THREE, since 2026-09-24. §12 of her briefing puts FOUR projects on the home, and three columns over four tiles leaves a hole in the second row that reads as a missing project. Two columns make a square of four and each photograph is half again as wide, which is what §27 asks of the images. */ @media (min-width: 62em) { .obras { grid-template-columns: repeat(2, 1fr); } } .obra { margin: 0; } .obra__link { display: block; text-decoration: none; color: inherit; } .obra__capa { display: block; overflow: hidden; } .obra__link img { width: 100%; height: auto; display: block; } .obra__nome { display: block; margin-top: var(--space-2xs); font-family: var(--stack-heading); font-weight: var(--font-weight-strong); font-size: var(--step-0); } .obra__tipo { display: block; margin-top: 0.15em; font-size: var(--step--1); opacity: 0.85; } .obra__link:hover .obra__nome, .obra__link:focus-visible .obra__nome { text-decoration: underline; } /* THE SECONDARY GRID ON /projetos/, since 2026-09-24. §6 of "Ajustes de Refinamento" asks the index to stop giving every work the same visual weight: four in destaque, and "os demais" in a secondary grid that is "mais compacta e discreta". It is a MODIFIER and not a second tile, because the home's project tile is already the object this needs: one link around a whole card, a photograph, a name and a type, no border and no arrow. Every difference from the home is one line here -- three across instead of two, and tighter gutters. That is the whole of "more compact": the photographs get smaller and nothing else about the tile changes. THREE ACROSS AND NOT FOUR. Six works at four across make a row and a half, so the second row would run two tiles and two holes; at three they make two full rows. The same arithmetic on the home's four tiles is why that grid is two across and not three, and it was measured there rather than assumed. NO CROP. The home's tiles keep each photograph's own proportion and so do these, so a row can end unevenly. That is the home's existing reading and the reason the tile was taken rather than rebuilt: the alternative is a fixed box with `object-fit: cover`, which crops, and the compact leads run from 1.33 to 2.04 so no single box is crop-free. The uncropped photograph and its plate are one tap away on the case page, which is where the case is actually read. */ .obras--curtas { gap: var(--space-m) var(--space-s); } @media (min-width: 40em) { .obras--curtas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 62em) { .obras--curtas { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* The name is the heading here, so it arrives with a heading's bottom margin and has to give it back. The tile's own `margin-top` on the same rule stays. */ .obras--curtas .obra__nome { margin-bottom: 0; } /* Her qualifications as four lines and not as the timeline. The timeline is the long form and it lives on /sobre/ now, which is what her brief asks for: the short form here, the chronology there. Each line leads with the area in the heading face, so the four areas read down the margin and the sentences follow. */ .repertorio { list-style: none; padding: 0; margin: var(--space-m) 0 0; max-width: var(--measure); } .repertorio li { margin: 0 0 var(--space-2xs); padding-left: 1.1em; text-indent: -1.1em; } .repertorio__nome { font-weight: var(--font-weight-strong); } .repertorio__linha { margin-top: var(--space-m); font-family: var(--stack-heading); font-weight: var(--font-weight-strong); font-size: var(--step-0); } /* The two ways she is reached, as a definition list. It is the same shape as the terms in the concept section and that is deliberate: both are a name and the sentence that says what it is. They are four screens apart on a telephone and never on screen at once, so the repeat is a rhyme and not a stutter. */ .atendimento { margin: var(--space-m) 0 0; max-width: var(--measure); display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-m); } .atendimento dt { font-weight: var(--font-weight-strong); } .atendimento dd { margin: 0; } @media (max-width: 33.99em) { .atendimento { grid-template-columns: 1fr; gap: 0; } .atendimento dd { margin: 0 0 var(--space-2xs); } } .contato-extra { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); margin-top: var(--space-s); } /* --------------------------------------------------------------------------- /consultoria-neuroambiental/ — her third service, on its own page. She asked for the page on 2026-09-24 at 00:13:16. The page is built from her own brief and from her page in development, read at their source (ADR-0005), and the running text is hers. What the rules below do is give that text a shape that is not the shape of anything else on the site: the home's cards, the home's banded rhythm and the project plates all stay where they are, and none of them is copied here. WHERE THE COLOUR GOES. Mostarda appears on this page exactly once, on the block that carries her own claim about what the service is. It is the only field in this palette that carries a paragraph at body size (Jeans on Mostarda, 4.70:1), so it is spent where there is a paragraph worth carrying and nowhere else. The page's close stays on Papiro: a service page that ends with a colour panel ends like a campaign, and this one has to end like a designer. --------------------------------------------------------------------------- */ /* The six things clients have said to her. A list with no mark on purpose: a bullet would turn six sentences a reader recognises into a checklist. It is the only unmarked list of its kind, so it cannot be read as one of the sequences. */ .falas { list-style: none; padding: 0; margin: var(--space-m) 0 0; max-width: var(--measure); } .falas li { margin: 0 0 var(--space-xs); } /* The stage number. She numbered the stages herself in the brief — "01 — Questionário de rotina" — so the number is information and not decoration. It is small and in the body face, because it orders the stage and is not the stage. */ .step__numero { display: block; font-size: var(--step--1); font-weight: var(--font-weight-strong); opacity: 0.8; margin-bottom: var(--space-3xs); } /* The complementary module, marked by the colour the whole site already uses for "this part is optional": the Tangerina rule on `.note` and on `.escopo`. Her brief is explicit that the Curadoria must not read as an obligatory stage, and the spine says it without a second heading or a badge. */ .steps > li.step--opcional { border-left-color: var(--color-tangerina); } .step__marca { font-size: var(--step--1); opacity: 0.85; margin: var(--space-2xs) 0 0; } /* The six axes, as a glossary: the word in one column, the explanation in the other, one hairline per pair. This block runs wider than the reading measure because a glossary wants the width; it is the page's only two-column block, so it cannot be confused with the sequence above it or the lists below it. A `dl` whose `dt` and `dd` are grid children puts each in its own cell, which is why each pair is wrapped in its own `div` — the same fault the home's `.conceito` was written to avoid. */ .eixos { margin: var(--space-l) 0 0; max-width: none; } .eixos > div { display: grid; gap: var(--space-3xs) 0; border-top: 1px solid var(--color-cafe-com-leite); padding-top: var(--space-s); margin: 0 0 var(--space-m); } .eixos > div:last-child { margin-bottom: 0; } .eixos dt { font-family: var(--stack-heading); font-weight: var(--font-weight-strong); font-size: var(--step-1); } .eixos dd { margin: 0; max-width: var(--measure); } @media (min-width: 48em) { .eixos { max-width: var(--wrap); } .eixos > div { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); gap: 0 var(--space-l); align-items: baseline; } } /* Her portrait, beside the answer to "who comes into my house". It is the photograph the site already ships, at the widths it already ships: nothing generated, and no picture of a room that is not hers, because her guide names generic and over-produced imagery as the thing that breaks the brand. The section clears its own float so the rule below it does not depend on the text being long enough. */ .section--retrato > div::after { content: ""; display: block; clear: both; } .retrato { margin: 0 0 var(--space-m); max-width: 13rem; } @media (min-width: 48em) { .retrato { float: right; margin: 0 0 var(--space-m) var(--space-m); } } /* THE HOME'S NAME BLOCK: A SMALL ROUND PORTRAIT ON THE LEFT, THE TEXT ON THE RIGHT. Her words of 2026-09-28: "Acho que aqui podemos voltar o formato bolinha na foto, deixando ela menor compatível com o tamanho do texto." (14:27:29) and "Colocar o texto para a direita e a foto na esquerda." (14:27:53). The read-back she did not correct (14:28:47) adds that the side changes on smaller screens too, where the photo floated right until now. This reverses the 24rem square of 2026-09-24 on her own word. ONE GRID AT EVERY WIDTH, photo column first, because the side is the rule and a float can only give it back to the text. The photo is the square crop she chose on 2026-09-24, drawn as a circle; nothing new is made. On a desktop its width is set to about the height of the text beside it (measured in Chrome at 1440 and 1024: see the round file). On a phone the text column is narrow and tall, so the photo keeps the left column at a size a face still reads at and sits at the top of the text. */ .sobre { margin-top: var(--space-m); display: grid; grid-template-columns: clamp(7rem, 31vw, 9rem) minmax(0, 1fr); gap: var(--space-s); align-items: start; } @media (min-width: 48em) { .sobre { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-l); align-items: center; } } .sobre__texto > p:first-child { margin-top: 0; } .sobre__texto > :last-child { margin-bottom: 0; } .retrato--redondo { float: none; margin: 0; max-width: none; } .retrato--redondo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; } /* THE PORTRAIT GREW ON 2026-09-29 (18:05:10): "eu gostaria que a minha foto ficasse um pouquinho maior, nesse formato mesmo redondo, mas um pouquinho maior; o texto ainda rolar do direito, mas assim centralizado ali com a foto". She gave no number: 11.5rem (184 px) became 15rem (240 px) on a computer, and 6-7.5rem became 7-9rem on a phone, about a third larger each. The text stays on the right and is centred on the photo's height from 48em; on a phone the photo keeps the top of a tall, narrow text column. The button under the text is the `.button` of the rest of the site. */ .sobre__texto .chamada { margin-top: var(--space-m); } /* /SOBRE/ OPENS WITH HER PORTRAIT, on her word of 2026-09-28 at 17:40:39. Vertical and uncropped (her file is 3:4), not round: the circle is the home's. One grid from 48em: the photograph is the left column, as on the home, and the h1 with her first four paragraphs is the right one; the column width is set so the photograph is about as tall as that text at 1280 and 1440 (measured in Chrome, see the round file). On a phone the grid is one column and the photograph sits just above the text. */ .sobre-abertura { display: grid; gap: var(--space-m); align-items: start; } .sobre-abertura .retrato--vertical { float: none; margin: 0; max-width: 16rem; } .retrato--vertical img { display: block; width: 100%; height: auto; } .sobre-abertura__texto > :first-child { margin-top: 0; } .sobre-abertura__texto > :last-child { margin-bottom: 0; } @media (min-width: 48em) { .sobre-abertura { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-l); } .sobre-abertura .retrato--vertical { max-width: none; } } .sobre-abertura + p { margin-top: var(--space-m); } /* Who it is for, and who it is not for, side by side. Two lists and no colour: the page has spent Mostarda, and a coloured panel here would make the section that turns work down look like a promotion. */ .duplas { display: grid; gap: var(--space-l); margin-top: var(--space-m); } @media (min-width: 48em) { .duplas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .duplas h3 { margin-top: 0; } .duplas ul { margin: 0; padding-left: 1.1em; max-width: var(--measure); } .duplas li { margin: 0 0 var(--space-2xs); } /* The price, published. Her own argument for publishing it is the line above it, so the number arrives as information: a name and a value on one line, a hairline between entries, and no box, no button and no second colour that would turn it into an offer. The button that asks for the work is the page's close. */ .precos { margin: var(--space-l) 0 0; max-width: var(--measure); } .precos > div { border-top: 1px solid var(--color-cafe-com-leite); padding-top: var(--space-s); margin-bottom: var(--space-l); } .precos > div:last-child { margin-bottom: 0; } .preco { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--space-s); margin: 0 0 var(--space-s); } .preco__nome, .preco__valor { font-family: var(--stack-heading); font-weight: var(--font-weight-strong); font-size: var(--step-1); } .preco__valor { white-space: nowrap; } .precos ul { margin: 0 0 var(--space-s); padding-left: 1.1em; } .precos li { margin: 0 0 var(--space-3xs); } /* The free diagnostic, as a door. A hairline panel and one button: it is the step before the work and not a second product, so it is quieter than the field above it and louder than the text around it, and it carries no price of its own. */ .porta { border: 1px solid var(--color-cafe-com-leite); padding: var(--space-l) var(--space-m); max-width: var(--measure); } .porta > :first-child { margin-top: 0; } .porta > :last-child { margin-bottom: 0; } .porta__pergunta { font-family: var(--stack-heading); font-weight: var(--font-weight-strong); font-size: var(--step-1); } .porta .chamada { margin-top: var(--space-m); } /* Her seven answers, folded shut. Her brief asks for short text on the first read and detail as the reader goes deeper, and nothing on this site runs client JavaScript, so a native `details` is the only honest way to offer the detail. The hairline and the marker are the browser's own affordance and are left alone: a disclosure that does not look like one is worse than a plain list. */ .duvidas { margin: var(--space-m) 0 0; max-width: var(--measure); } .duvidas details { border-top: 1px solid var(--color-cafe-com-leite); padding: var(--space-s) 0; } .duvidas details:last-child { padding-bottom: 0; } .duvidas summary { cursor: pointer; font-family: var(--stack-heading); font-weight: var(--font-weight-strong); } .duvidas summary:hover, .duvidas summary:focus-visible { text-decoration: underline; } .duvidas details > p { margin: var(--space-xs) 0 0; } /* A card that carries more than one paragraph. Every card on the site sets its paragraphs flush, which was right while a card was one line of text and one link; the home's third service card now carries two paragraphs and two actions, and four paragraphs touching each other read as one block of noise. The step is the smallest one on the scale, so a card that was already correct moves by 8 px and nothing else changes. */ .card > p + p { margin-top: var(--space-2xs); } /* THE PROJECT PAGES, first built for "Sala 09 — ACATE" on 2026-09-24, on her briefing §11 and §13. Two new objects, each used once per page, and both of them because the page needed a shape the site did not have yet. THE OPENING IMAGE, ONE RULE FOR EVERY PROJECT PAGE. Her word of 2026-09-29 at 18:30:52, about the page she held up as the model: "a imagem grandona do tamanho do texto, do tamanho da tarja laranja, fica mais organizado. Faz igual nos outros projetos." So the figure takes the width of the text column, which is also the width of the Tangerina band's text, and it starts on the same left edge as the title above it and the paragraphs below it. Until that day this page kept a 30rem portrait column and the others carried a `--larga` modifier that said the same thing the default now says. WHAT THE RULE DOES NOT DO is print a picture past its own file: the ceiling `--natural` in the rule near the top of this file holds an image that is smaller than the column at its own width, at the left edge, and the file's size is reported to her instead of hidden. */ .abertura__figura { margin: var(--space-m) 0 0; max-width: none; } .abertura__figura img { width: 100%; height: auto; display: block; } /* A photograph that is taller than the wide strip she asked for is cropped by DISPLAY ONLY: the file is untouched, and `object-position` names the part she chose. Sala 09 (2026-09-29 18:35:08): she sent a strip of `sala09-03` with the blue lattice at the right, the Coffee sign at the left and the work table in front, 2.09 to 1. The strip starts 89% of the way down the 5:4 photograph, below the ceiling. On a phone the strip would be 165 px tall, so it is 3 to 2 there. */ .abertura__figura--faixa img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 89%; } @media (min-width: 40em) { .abertura__figura--faixa img { aspect-ratio: 1280 / 613; } } /* A file that is narrower than her screen's column and is her answer to "a mesma foto, só que mais larga" (Apartamento Ingleses, 19:47:17). The photograph is 1200 px and the column is 1459 px on her 1585 px window, so 1200 px is 82% of the band and the page looked unchanged. The page lets the browser print it up to 1.25 times its file, which is 1500 px and covers her screen, and no wider. The same ratio as the home hero has carried since 2026-09-24 (about 1.2x). THIS IS THE ONE PLACE THE SITE PRINTS PAST A FILE ON PURPOSE, and it is named so that a later reader can take it out. */ .abertura__figura--preenche img { max-width: calc(var(--natural) * 1.25); } /* THE GALLERY. One photograph per row, in the order she approved, each held to the widest size its own file has (768 px) and never stretched past it: on a phone that is the full width of the screen, and on a desktop it is a large photograph rather than a soft one. The caption sits under it in the register of a prancha's own title, and it is the same string a screen reader gets, so nothing is said twice. No client JavaScript runs on this site, so this is a stack and not a slideshow. */ .galeria { list-style: none; padding: 0; margin: var(--space-m) 0 0; max-width: none; } /* 48rem until 2026-09-24. The comment above set 48rem as "the widest size its own file has (768 px)", and that was true of the file this page was built with. It is not true of the work: the manifest shows headroom on every plate here -- sala09 runs from +52 to +832 px, the Guararapes and Sobrado plates +576, the Ale plates +1471. The width came from the ladder and not from the file, so the ladder moved as well (bin/build-images.py) and the figure takes the measure. WHAT DOES NOT MOVE: apartamento-ingleses. Four of its seven sources are 480 px, so its `.galeria--tres` holds each figure to 480 px (below). */ .galeria__figura { margin: 0 0 var(--space-xl); max-width: none; } .galeria__figura:last-child { margin-bottom: 0; } .galeria__figura img { width: 100%; height: auto; display: block; } /* THREE TO A ROW, all one size. Her words about Sala 09 (18:35:43: "diminuir e fazer de três em três; estão muito grandes para olhar no computador") and Apartamento Ingleses (18:37:14: "de 3 em 3 fotos"), and her dislike of "cada uma de um tamanho" (18:24:34). The frame is the square of the project cards on /projetos/ and every photograph is cropped to it by `object-fit: cover`: the photographs run from landscape to portrait, and a square cuts the least from that spread. The crop is by display only; the files are untouched. A figure is held to 30rem: the Ingleses files are 480 px, the build makes nothing wider, and 30rem is 480 px. Two to a row from 40em, three from 64em, one on a phone. */ .galeria--tres { display: grid; gap: var(--space-l) var(--space-m); } .galeria--tres .galeria__figura { margin: 0; max-width: 30rem; } .galeria--tres .galeria__figura img { aspect-ratio: 1 / 1; object-fit: cover; } @media (min-width: 40em) { .galeria--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64em) { .galeria--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* TWO TO A ROW, WHERE THE PLATES ARE PRANCHAS AND THEIR FILES ARE NARROWER THAN THE PAGE (A.C. Sala, 2026-09-30). Her audio of 2026-09-29 at 18:32:24: the plates "estão todas pequenas"; "ou a gente coloca de duas em duas ... de uma forma que elas se completem, mas não fiquem grudadas lateralmente". The files are 1091 px wide, so a plate filling the band (up to 1474 px) would be stretched, which is her own rule against it (above). Two to a row fills the band with no empty side; the gap is --space-m, so they never touch. A plate that has no partner (the third) takes its own row and stops at its own file width. */ .galeria--dois .galeria__figura { margin: 0 0 var(--space-xl); } @media (min-width: 40em) { .galeria--dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l) var(--space-m); } .galeria--dois .galeria__figura { margin: 0; max-width: none; } .galeria--dois .galeria__figura:last-child:nth-child(odd) { grid-column: 1 / -1; } } .galeria__legenda { display: block; margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--color-jeans); opacity: 0.85; } /* THE HERO PHOTOGRAPH, §6 of her briefing: "A primeira tela deve utilizar uma fotografia forte de projeto." It took the measure on 2026-09-24 with the rest of her rule. It was held to a column before, and the column was 48rem, so on a 1585 px page the strongest photograph she has left 706 px of empty paper beside it. WHAT IT COSTS, since this is the one figure whose file is smaller than the measure: apto-ingleses-07 is 1200 px and the measure is up to 1474, so on her screen the browser prints it about 1.2x its own file. The ladder was raised to her file's own width for exactly this reason, and 1.2x is what is left. It is named here rather than left for a reader to find. The portrait that used to float here moved into the Sobre block, which is where §19 asks for her. */ .hero__figura { margin: var(--space-l) 0 0; max-width: none; } .hero__figura img { width: 100%; height: auto; display: block; } /* The eight themes of "Design além da estética", §14, and they are a line of text and not a set of cards: §14 names them as words and asks, in its own words, that they do not become eight heavy cards. The heading face and one generous step of space is the lightest object they can sit in. */ .conceito__temas { margin: var(--space-l) 0 0; font-family: var(--stack-heading); font-weight: var(--font-weight-strong); font-size: var(--step-0); max-width: var(--measure); } /* `.retrato--redondo` STOOD HERE AND CAME OUT ON 2026-09-24. It was the same crop rule as the two above it -- a circle from `aspect-ratio`, `object-fit` and a 50% radius -- and it drew the home's portrait into a circle on her word of 2026-09-20. She changed that word on 2026-09-24 at 18:16:58: "Aumentar a foto e deixá-la quadrada." The home figure is `retrato--quadrado` now, so this rule answers to no template and it is removed rather than left in the file looking live. Nothing else used it. THE TWO `.hero__retrato` RULES ABOVE ARE ALSO ANSWERED BY NO TEMPLATE, and they were already dead before this round -- §6 moved a project photograph into the first screen and her portrait moved to the Sobre block with it. They are left standing because removing them is a different change with a different reason, and it is owed rather than smuggled in here. */ /* --------------------------------------------------------------------------------- HER REVIEW V5, 2026-09-28. Four rules, and none of them adds a colour or a block. --------------------------------------------------------------------------------- */ /* THE HOME'S THREE PROJECTS. V5 section 4: "todos na mesma linha, com a mesma largura, altura e proporção de imagem." So one square frame for all three, and each photograph is cropped to it by `object-fit: cover`. The frame is square because two of the three leads are portrait and the Sobrado photograph is landscape, and a square cuts the least from all three. `--foco` is set per tile in content/index.11tydata.js. One column on a phone, where three across would print each photograph at about 100 px. */ .obras--tres { gap: var(--space-l) var(--space-m); } @media (min-width: 40em) { .obras--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .obras--tres .obra__capa { aspect-ratio: 1 / 1; } .obras--tres .obra__link img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--foco, 50% 50%); } /* EVERY PROJECT THE SAME WAY ON /projetos/, since 2026-09-28. Her words at 13:26:07: "todos apareçam da mesma forma: uma imagem, nome do projeto e qual serviço", and at 13:26:19 "Manter as imagens do mesmo tamanho." So the frame is the home's square (above), and each photograph is cropped to it by `object-fit: cover`. The leads run from 0.62 (Sala 09, portrait) to 2.04 (A.C. Sala, a wide plate); a square cuts the least from that spread, and it is the frame she approved on the home the same day. The uncropped photographs and plates are one tap away on each case page. FIVE ACROSS ON A COMPUTER, TWO ON A TABLET, ONE ON A PHONE. Ten cards at five make two full rows, so no card stands alone and no row ends with blank paper to its right (her rule of 2026-09-24, "Isso ajusta no site todo"). Three or four across would leave a lone card or a half row. Two across stops at 64em because a card there is at most about 470 px, and the Apartamento Ingleses lead is a 480 px file: wider, and the browser would print it past its own pixels. The phone is one column, as the home's. */ .obras--iguais { gap: var(--space-l) var(--space-s); } @media (min-width: 40em) { .obras--iguais { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* THREE ACROSS SINCE 2026-09-28. Five across read as crowded to her -- "achei muito tumultuado. Vamos tirar o projeto do banheiro e fazer de 3 em 3." (14:34:29) -- and with the bathroom gone the nine cards are three full rows. */ @media (min-width: 64em) { .obras--iguais { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .obras--iguais .obra__capa { aspect-ratio: 1 / 1; } .obras--iguais .obra__link img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--foco, 50% 50%); } .obras--iguais .obra__nome { margin-bottom: 0; } /* A name runs one or two lines, so the card is a column of one height. "Ver mais" stood at the foot of it until 2026-09-29 (18:37:57: "pode tirar esse 'Ver mais'"); the card ends at the service line now. */ .obras--iguais .obra__link { display: flex; flex-direction: column; height: 100%; } /* THE THREE SERVICE CARDS ARE ONE HEIGHT. V5 section 3: "os três cards devem permanecer com dimensões equivalentes." The grid already stretches each card to the row; this holds each card's actions at its foot, so the three links sit on one line. */ .card-list--tres .card { display: flex; flex-direction: column; } .card-list--tres .card > p:not(:has(a)) + p:has(a) { margin-top: auto; padding-top: var(--space-s); } /* "Presencial ou on-line", as the one line V5 section 6 asks for. */ .linha-atendimento { margin-top: var(--space-m); } /* HABITAR INSIDE THE EDITORIAL (V5 section 5). A hairline and a sub-heading, the same hairline the article rows use: it is part of the Editorial, not a new block. */ .habitar-destaque { margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid var(--color-cafe-com-leite); } .habitar-destaque > :is(h2, h3) { margin-top: 0; font-size: var(--step-1); } .habitar-destaque__sub { font-family: var(--stack-heading); margin-bottom: var(--space-xs); } .habitar-destaque .chamada { margin-top: var(--space-s); } /* THE NETWORKS AS MARKS ALONE (V5 section 8: "somente os símbolos/ícones em destaque"). "Em destaque", so the mark is larger than the text-size mark the footer uses. Each link is a 44 px target and names itself to a screen reader in a hidden span. */ .redes--icones { justify-content: flex-start; gap: 0 var(--space-s); margin-top: var(--space-s); } .redes--icones a { min-width: 44px; justify-content: center; } .redes--icones .ico { width: 1.6em; height: 1.6em; } /* THE COMPACT FOOTER, V5 section 9, item 10: "Footer compacto". At desktop width the mark sits on the left and the city with the four marks on the right. The mark keeps its size, because that size is her word of 2026-09-23 at 17:17:49 ("Pode aumentar um pouco a logo para conseguirem ler a frase?"). The right block used to sit on the logo's bottom edge. On 2026-09-28 she asked for it "um pouco mais para cima, de maneira que fique na mesma linha da logomarca" (13:37:53) and then "Alinhar com a logo marca." (13:48:20). The read-back she did not correct (13:48:53) is the specification: the block centred on the height of the whole lockup, house and name together. So the block is one grid item, centred on the one row the logo fills. The phone footer does not change. */ @media (min-width: 48em) { .site-footer__inner { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-l); padding-block: var(--space-m); } .site-footer__logo { margin: 0; } .site-footer__contato { justify-self: end; text-align: right; } .site-footer__contato > p { margin: 0; } .site-footer__links { justify-content: flex-end; margin: 0; } }