/* grupocerne.pt — single stylesheet.
   Order: tokens → reset → typography → layout → components → utilities → print.
   Desktop is the primary target (operator decision, 2026-09-06). Nothing here is design yet;
   it is the substrate the design will be written on. See DESIGN.md. */

@import url("tokens.css?v=20261010a");
@import url("tree.css?v=20261010a");

/* ---------- self-hosted fonts (SIL OFL). No external origin, ever. ---------- */
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/fonts/newsreader-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- reset: minimal, opinion-free ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;hanging-punctuation:first allow-end}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-text);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1,"liga" 1}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,dl,dd,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--color-slate);outline-offset:3px}
::selection{background:var(--color-selection);color:var(--color-azul)}

/* ---------- accessibility ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--color-azul);color:var(--color-paper);padding:.6rem 1rem;z-index:30;text-decoration:none}
.skip:focus{left:var(--space-4);top:var(--space-2)}

/* ---------- typography: the t-* classes are the type system. Closed on /especimen/ 2026-09-06; values in tokens.css. ---------- */
.t-display{font-family:var(--font-display);font-weight:400;font-size:var(--text-display);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--color-azul);max-width:16ch;text-wrap:balance}
.t-h1{font-family:var(--font-display);font-weight:400;font-size:var(--text-h1);line-height:var(--leading-h1);letter-spacing:var(--tracking-h1);color:var(--color-azul);max-width:20ch;text-wrap:balance}
.t-h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-h2);line-height:var(--leading-h2);letter-spacing:var(--tracking-h2);color:var(--color-azul);max-width:28ch;text-wrap:balance}
.t-h3{font-family:var(--font-display);font-weight:400;font-size:var(--text-h3);line-height:var(--leading-h3);color:var(--color-azul);text-wrap:balance}
.t-lede{font-family:var(--font-display);font-weight:400;font-size:var(--text-lede);line-height:var(--leading-lede);color:var(--color-ink);max-width:54ch;text-wrap:pretty}
.t-body{font-family:var(--font-text);font-weight:400;font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-ink);max-width:var(--measure);text-wrap:pretty}
.t-body+.t-body{margin-top:var(--para-gap)}
.t-body a{color:var(--color-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--color-slate);transition:color .15s ease,text-decoration-color .15s ease}
.t-body a:hover{color:var(--color-slate)}
.t-italic{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:var(--text-lede);line-height:var(--leading-lede);color:var(--color-deep);max-width:52ch;text-wrap:pretty}
.t-nav{display:flex;gap:0 var(--space-6);font-family:var(--font-text);font-weight:500;font-size:var(--text-nav);line-height:1;letter-spacing:.01em}
.t-nav a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--color-ink);text-decoration:none;transition:color .15s ease}
.t-nav a:hover{color:var(--color-slate)}
.t-tel{font-family:var(--font-text);font-weight:500;font-size:var(--text-tel);line-height:var(--leading-tel);font-variant-numeric:tabular-nums;color:var(--color-ink)}
.t-tel a{color:var(--color-ink);text-decoration:none;border-bottom:1px solid var(--color-rule);transition:border-color .15s ease}
.t-tel a:hover{border-color:var(--color-ink)}
.t-who{font-weight:400;font-size:var(--text-caption);color:var(--color-muted);margin:0 var(--space-2) 0 var(--space-1)}
.t-sep{color:var(--color-areia)}
.t-caption{font-family:var(--font-text);font-weight:400;font-size:var(--text-caption);line-height:var(--leading-caption);color:var(--color-muted);max-width:var(--measure)}
.t-label{font-family:var(--font-text);font-weight:500;font-size:var(--text-label);line-height:1.3;letter-spacing:var(--tracking-label);color:var(--color-slate)}
.t-table{width:100%;max-width:720px;border-collapse:collapse;font-family:var(--font-text);font-size:var(--text-table);line-height:1.5;font-variant-numeric:tabular-nums}
.t-table th,.t-table td{text-align:left;vertical-align:top;padding:12px 0;border-bottom:1px solid var(--color-rule)}
.t-table th{width:26%;font-weight:500;color:var(--color-muted);padding-right:var(--space-4)}
.t-table tr:first-child th,.t-table tr:first-child td{border-top:1px solid var(--color-ink)}
.t-legal{font-family:var(--font-text);font-weight:400;font-size:var(--text-legal);line-height:1.5;color:var(--color-muted)}
.t-legal a{color:var(--color-muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* ---------- layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}

/* ---------- header ----------
   A block of Azul Cerne. Two states. Expanded: the lockup centred on its own row, the navigation
   on a row ruled beneath. Folded: the lockup row has scrolled off the top and a small lockup
   sits at the left of the navigation row, which stays.
   How: the header is sticky at a NEGATIVE top equal to the lockup row's height, so the lockup
   row scrolls away with the page like any content and the navigation row stops at the top of
   the viewport. Nothing changes size during scroll, so there is no layout shift and nothing for
   scroll anchoring to fight. The lockup fades as it leaves, and the small lockup fades in, both
   on a scroll timeline over the same distance. All text on the block is paper; the lockup Areia. */
.site-header{position:sticky;top:calc(-1 * var(--header-brand-row));z-index:20;background:var(--color-azul);color:var(--color-paper)}

.brand{display:inline-flex;align-items:center;color:var(--color-areia);text-decoration:none;transition:color .15s ease}
.brand:hover,.brand:focus-visible{color:#E0D2C0}
.brand__logo{display:block;background:currentColor;-webkit-mask:url("/img/logo.svg") center/contain no-repeat;mask:url("/img/logo.svg") center/contain no-repeat;aspect-ratio:481.198/470.501}

.site-header__brand{display:flex;justify-content:center;align-items:flex-end;height:var(--header-brand-row)}
.brand--large{margin-bottom:var(--space-4)}
.brand--large .brand__logo{height:var(--header-logo)}

/* compact: every page but the home. No lockup row, sticks at the top, small lockup always shown. */
.site-header--compact{top:0}
.site-header--compact .brand--small{opacity:1;visibility:visible;transform:none;animation:none}

.site-header__rule{border-bottom:1px solid var(--header-rule)}
.site-header__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.brand--small{justify-self:start;opacity:0;visibility:hidden;transform:translateX(-8px)}
.brand--small .brand__logo{height:var(--header-logo-small)}

.nav-primary__list{display:flex;justify-content:center;gap:0 var(--space-7);font-family:var(--font-text);font-weight:500;font-size:var(--text-nav);line-height:1;letter-spacing:.01em}
.nav-item{position:relative}
.nav-item__label{position:relative;display:inline-flex;align-items:center;height:var(--header-row);color:var(--color-paper);text-decoration:none;transition:color .18s ease}
.nav-item__label::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--color-areia);transform:scaleX(0);transform-origin:left;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.nav-item:hover .nav-item__label,.nav-item:focus-within .nav-item__label,.nav-item__label:focus-visible{color:var(--color-areia)}
.nav-item:hover .nav-item__label::after,.nav-item:focus-within .nav-item__label::after,.nav-item__label[aria-current]::after{transform:scaleX(1)}

/* the menu: a panel of the same Azul hanging from the row, aligned to the label's left edge.
   Opens on hover and on keyboard focus within the item. Closed state is not display:none, so the
   opening can be a short fade and rise; visibility:hidden keeps it out of the tab order when shut. */
.nav-menu{position:absolute;top:100%;left:calc(-1 * var(--space-5));min-width:280px;margin:1px 0 0;padding:var(--space-3) 0 var(--space-4);background:var(--color-azul);border-top:1px solid var(--header-rule);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s ease,transform .18s cubic-bezier(.4,0,.2,1),visibility 0s linear .18s}
.nav-item:hover .nav-menu,.nav-item:focus-within .nav-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav-menu a{display:flex;align-items:center;min-height:var(--tap);padding:0 var(--space-5);font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:0;color:var(--color-paper);text-decoration:none;white-space:nowrap;transition:color .15s ease}
.nav-menu a:hover,.nav-menu a:focus-visible,.nav-menu a[aria-current]{color:var(--color-areia)}

.lang{justify-self:end;font-family:var(--font-text);font-weight:500;font-size:var(--text-label);letter-spacing:.04em}
.lang a{display:inline-flex;align-items:center;height:var(--header-row);padding:0 var(--space-2);color:var(--color-paper);text-decoration:none;transition:color .18s ease}
.lang a:hover{color:var(--color-areia)}

/* the fold */
@supports (animation-timeline: scroll()) {
  .brand--small{animation:header-small-in linear both;animation-timeline:scroll(root);animation-range:0 var(--header-fold)}
  .brand--large{animation:header-logo-out linear both;animation-timeline:scroll(root);animation-range:0 var(--header-fold)}
  @keyframes header-logo-out{
    from{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.4,0,.6,1)}
    to{opacity:0;transform:scale(.94)}
  }
  @keyframes header-small-in{
    from,45%{opacity:0;visibility:hidden;transform:translateX(-10px)}
    to{opacity:1;visibility:visible;transform:none;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  }
}
@media (prefers-reduced-motion: reduce){
  .brand--large,.brand--small{animation:none}
  .nav-item__label::after,.brand,.nav-menu,.nav-menu a{transition:none}
}

/* ---------- provisional page layout: enough rhythm to judge the header against. Not design. ---------- */
.hero{padding:var(--space-10) var(--gutter) var(--space-9)}
.hero .t-lede{margin-top:var(--space-6)}
.home-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7) var(--gutter);padding:var(--space-7) var(--gutter) var(--space-8);border-top:1px solid var(--color-areia)}
.home-people .person{grid-template-columns:160px minmax(0,1fr);gap:var(--space-5)}
.home-people__note{grid-column:1/-1;max-width:none}          /* one line on desktop */
.stanzas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);padding-top:var(--space-7);border-top:1px solid var(--color-areia)}
.stanza .t-body{margin-top:var(--space-3)}
.home-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gutter);padding-top:var(--space-8);align-items:stretch}
/* a frase do nome centra-se verticalmente na tabela ao lado: a coluna estica à altura
   da linha e o padding do topo vale exatamente o bloco do título "O que procuramos",
   o que desce o centro da frase do centro da coluna para o centro da tabela. */
.home-row .name{display:flex;align-items:center;padding-top:calc(var(--text-h2) * var(--leading-h2) + var(--space-5) * 2)}
.home-row .name>*{margin-top:0}
.letters{padding-top:var(--space-8)}
.buybox .t-table{margin-top:var(--space-5);max-width:none}
.letter .t-h2{margin-top:var(--space-2)}
.letter .t-h2 a{text-decoration:none;color:inherit}
.letter .t-h2 a:hover{color:var(--color-slate)}
.letter .t-body{margin-top:var(--space-3)}

/* ---------- interior pages ----------
   One column of reading at 62ch on the 1200 container. Sections separated by space, not rules,
   except where a component has its own. Components below are the only ones pages may use. */
:root{--col:960px}                                   /* the reading column, centred on the page */
.page-head{max-width:var(--col);padding:var(--space-9) var(--gutter) var(--space-8)}
.page-body{max-width:var(--col)}
.crumb{display:flex;margin:0 0 var(--space-6)}
.crumb a{display:inline-flex;align-items:center;min-height:var(--tap);font-family:var(--font-text);font-weight:500;font-size:var(--text-label);letter-spacing:var(--tracking-label);color:var(--color-slate);text-decoration:none;transition:color .15s ease}
.crumb a::before{content:"←";margin-right:.5em}
.crumb a:hover{color:var(--color-ink)}
.page-head .t-lede{margin-top:var(--space-6)}
.page-body{padding-bottom:0}
.page-body>.sec+.sec{margin-top:var(--space-9)}
.sec>.t-h2{margin-bottom:var(--space-5)}
.sec>.t-h3,.sec__text>.t-h3{margin:var(--space-6) 0 var(--space-3)}
.sec>.t-body+.t-h3,.sec__text>.t-body+.t-h3{margin-top:var(--space-7)}
.sec>.t-table,.sec__text>.t-table{margin-top:var(--space-5)}
.page--grid .sec__text>.t-table{max-width:none}
.page--grid .sec__text>.t-table:last-child tr:last-child th,.page--grid .sec__text>.t-table:last-child tr:last-child td{padding-bottom:0}
.sec>.t-italic,.sec__text>.t-italic{margin-top:var(--space-6)}
.sec>.t-body+.t-caption{margin-top:var(--space-3)}

/* a section landing's cards: one link each, numbered, ruled above */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-6)}
.card{display:grid;align-content:start;grid-template-columns:1fr;row-gap:var(--space-3);padding:var(--space-5) var(--space-6) var(--space-6);background:var(--color-areia);border-radius:var(--radius);text-decoration:none;color:var(--color-azul);transition:filter .15s ease,transform .15s ease}
.card:hover,.card:focus-visible{filter:brightness(.94);transform:translateY(-1px)}
.card .card__n{color:var(--color-deep)}
.card .card__title,.card .card__desc{color:var(--color-azul)}
.card__n{grid-row:1/3;padding-top:.35em}
.card__title{transition:color .15s ease}
.card:hover .card__title,.card:focus-visible .card__title{color:var(--color-azul)}
.card__desc{max-width:44ch}
.cards+.sec{margin-top:var(--space-9)}

/* FAQ: question as h3, answer beneath, ruled */
.faq>div{padding:var(--space-5) 0 var(--space-6);border-top:1px solid var(--color-rule)}
.faq>div:last-child{border-bottom:1px solid var(--color-rule)}
.faq>div>.t-h3{margin-bottom:var(--space-3)}

/* numbered steps: roman numeral in a narrow column, content beside */
.steps{counter-reset:step;max-width:var(--measure)}
.steps>li{counter-increment:step;display:grid;grid-template-columns:3.2rem 1fr;padding:var(--space-5) 0;border-top:1px solid var(--color-rule)}
.steps>li:last-child{border-bottom:1px solid var(--color-rule)}
.steps>li>*{grid-column:2}
.steps>li::before{grid-column:1;grid-row:1;content:counter(step,upper-roman);font-family:var(--font-text);font-weight:500;font-size:var(--text-label);letter-spacing:var(--tracking-label);color:var(--color-slate);padding-top:.4em}
.steps>li>.t-h3{margin-bottom:var(--space-2)}
.steps>li>.t-caption{margin-top:var(--space-2)}

/* ruled list of short items; --body variant for sentences */
.list{max-width:var(--measure)}
.list>li{padding:var(--space-3) 0;border-top:1px solid var(--color-rule);font-family:var(--font-display);font-size:var(--text-h3);line-height:var(--leading-h3);color:var(--color-azul)}
.list>li:last-child{border-bottom:1px solid var(--color-rule)}
.list--body>li{font-family:var(--font-text);font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-ink)}

/* two columns of anything */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-8)}
.cols>div>.t-label{margin-bottom:var(--space-3)}
.cols--sections>.sec{margin:0}

/* people: portrait beside name, role, lines. One duotone treatment for two different sessions. */
.people{display:grid;gap:var(--space-8)}
.person{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-7);align-items:start}
.portrait{margin:0;background:var(--color-slate);overflow:hidden;aspect-ratio:4/5}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.08) brightness(1.02);mix-blend-mode:luminosity}
.person__name{margin-bottom:var(--space-1)}
.person__role{margin-bottom:var(--space-4)}
.person__line{margin-top:var(--space-2)}
.person .t-body:not(.person__line){margin-top:var(--space-5)}
.person .t-tel.person__line{margin-top:var(--space-2)}
.people__label{margin-bottom:var(--space-6)}
.people--large{padding-top:var(--space-6);border-top:1px solid var(--color-ink)}
.people--large .person{grid-template-columns:240px minmax(0,1fr)}
.page--grid .sec__text>.people--large{padding-top:0;border-top:0}
/* stat band: three or four figures under the lede of a trade page, one source caption beneath */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-5) var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--color-ink)}
.stats__n{display:block;white-space:nowrap;font-family:var(--font-display);font-weight:400;font-size:var(--text-h1);line-height:1;letter-spacing:var(--tracking-h1);color:var(--color-azul);font-variant-numeric:tabular-nums}
.stats__l{display:block;margin-top:var(--space-2);font-family:var(--font-text);font-size:var(--text-caption);line-height:var(--leading-caption);color:var(--color-muted)}
.stats+.t-caption{margin-top:var(--space-4)}
/* ---------- the interior grid ----------
   Interior pages on the 1200 container, twelve columns, as the home. Each section is a row: a rule
   across the container, the heading and any small matter in the left four columns, the reading
   measure in the right eight (`.sec__text`). A band between head and body is the divider for the
   first row. The head is the same row: text in the left eight columns, the whole tree in the right
   four, never clipped. */
.page--grid{--col:var(--container)}
.page--grid .page-body{padding-left:0;padding-right:0}
.page--grid .sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:var(--gutter);row-gap:0;align-items:start}
.page--grid .sec>*{grid-column:1/5}
.page--grid .sec>.t-h2{margin:0}
@media (min-width: 901px){.page--grid .sec:not(.sec--prose):not(:has(.sec__aside,.principle__maxim,.sec__wide))>.t-h2{grid-row:1/span 2;align-self:start;position:sticky;top:calc(var(--header-row) + var(--space-6))}}
.page--grid .sec>.t-h2+.sec__aside{margin-top:var(--space-5)}
.page--grid .sec>.sec__text{grid-column:5/-1;grid-row:1/span 2}
/* the founders across the full width, both in one screen */
.page--grid .sec:has(.people--large)>.sec__text{grid-column:1/-1;grid-row:2}
.page--grid .sec:has(.people--large){grid-template-rows:auto auto}
.page--grid .sec:has(.people--large)>.t-label{grid-row:1;margin-bottom:var(--space-5)}
.page--grid .people--large{grid-template-columns:1fr;gap:var(--space-8)}
.page--grid .people--large .person{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.page--grid .people--large .portrait{grid-column:1/4}
.page--grid .people--large .person>div{grid-column:4/-1;display:grid;grid-template-columns:minmax(0,260fr) minmax(0,552fr);column-gap:var(--gutter);align-content:start}
.page--grid .people--large .person__name,.page--grid .people--large .person__role{grid-column:1/-1}
.page--grid .people--large .person__line{grid-column:1;margin-top:var(--space-2)}
.page--grid .people--large .person .t-body:not(.person__line){grid-column:2;grid-row:3/span 3;margin-top:0;max-width:none}
.page--grid .people--large .marks--logos{grid-column:1/-1;margin-top:var(--space-6)}
.page--grid .sec__text>:first-child{margin-top:0}
.page--grid .sec__text>.list:first-child>li:first-child,.page--grid .sec__text>.faq--groups:first-child>details:first-of-type{border-top:0;padding-top:0}
.page--grid .sec__text>.faq--groups:first-child>details:first-of-type>summary{padding-top:0}
.page--grid .sec__text>.t-table:first-child tr:first-child th,.page--grid .sec__text>.t-table:first-child tr:first-child td{border-top:0;padding-top:0}
.page--grid .sec>.sec__wide~.t-body{margin-top:var(--space-5)}
.page--grid .sec--wide>*{grid-column:1/-1}
.page--grid .sec>.sec__wide{grid-column:1/-1}
.page--grid .sec>.t-h2+.sec__wide,.page--grid .sec>.t-h2+.change{margin-top:var(--space-5)}
.page--grid .sec>.sec__wide~*{grid-column:1/-1}
/* a landing on the grid: title, lede and the cards left, the whole tree right, one screen */
.page--section.page--grid .page-head__text>.cards{margin-top:var(--space-7)}
.page--section.page--grid .page-head__text>.t-lede{max-width:none}
.page--section.page--grid .page-head--grid{padding-bottom:var(--space-6)}
.cards--wide{grid-template-columns:1fr;gap:0;border-top:1px solid var(--color-ink)}
.cards--wide .card{grid-template-columns:1fr;padding:var(--space-4) 0;background:none;border-bottom:1px solid var(--color-rule);border-radius:0}
.cards--wide .card:hover,.cards--wide .card:focus-visible{filter:none;transform:none}
.cards--wide .card:hover .card__title,.cards--wide .card:focus-visible .card__title{color:var(--color-slate)}
.cards--wide .card__title{font-size:var(--text-h2);line-height:var(--leading-h2)}
.cards--wide .card__title::after{content:"\2192";margin-left:var(--space-3);color:var(--color-areia)}
.cards--wide .card__desc{max-width:none}
.page--grid .page-body>.sec{padding:var(--space-7) var(--gutter) 0;border-top:1px solid var(--color-rule)}
.page--grid .page-body>.sec+.sec{margin-top:var(--space-8)}
.page--grid .slab+.page-body>.sec:first-child{border-top:0;padding-top:0}
.page--grid .slab+.page-body{padding-top:var(--space-9)}
/* prose: the heading above its text, both across the container; a section with more than a short
   paragraph runs in two columns, as the home's stanzas do, so the text fills the page at a readable
   measure; a hairline the width of the container between sections */
.page--grid .sec--prose{grid-template-rows:auto auto}
.page--grid .sec--prose>.t-h2{grid-column:1/-1;grid-row:1;position:static;margin-bottom:var(--space-5)}
.page--grid .sec--prose>.sec__text{grid-column:1/-1;grid-row:2}
/* a centred list: heading above, the list on the middle six columns, both centred */
.page--grid .sec--centred>.t-h2{grid-column:4/10;text-align:center;max-width:none}
.page--grid .sec--centred>.sec__text{grid-column:4/10}
.page--grid .sec--centred .list{max-width:none;text-align:center}
.page--grid .sec--prose>.t-label{grid-column:1/-1;grid-row:1;margin-bottom:var(--space-3)}
.sec__text>.t-italic+.t-body{margin-top:var(--space-5)}
.page--grid .sec--prose>.sec__text>.t-body,.page--grid .sec--prose>.sec__text>.t-italic,.page--grid .sec--prose>.sec__text>.t-caption{max-width:none}
.page--grid .page-body>.sec--prose{border-top:1px solid var(--color-rule);padding-top:var(--space-7)}
.page--grid .slab+.page-body>.sec--prose:first-child{border-top:0;padding-top:0}
/* the head on the grid: the home's hero brought to the interior page. Text in a block at the left, the
   tree large and at full tone at the right, running past the container and clipped at the viewport,
   as on the home. Heads without a tree keep the same block. */
.page-head--grid{--head-pad:max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter)));position:relative;max-width:none;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:var(--space-8) var(--gutter) var(--space-8) var(--head-pad);overflow:hidden}
.page-head--grid:has(.page-head__tree){min-height:520px;justify-content:center}
.page-head--grid:has(.crumb){padding-top:var(--space-4)}
.page-head--grid>.page-head__text{position:relative;z-index:1;max-width:760px}
.page-head--grid>.page-head__tree{position:absolute;left:min(calc(var(--head-pad) + 820px),calc(100vw - 440px));top:50%;width:380px;transform:translateY(-50%);color:var(--color-areia);pointer-events:none}
.page-head--grid>.page-head__tree .tree{display:block;width:100%;max-width:none;height:auto}
/* section landings: the tree larger, its right half past the edge of the screen */
.page--section .page-head--grid>.page-head__tree{left:max(calc(var(--head-pad) + 760px),calc(100vw - 560px));width:760px}
.page--section .page-head--grid:has(.page-head__tree){min-height:600px;justify-content:flex-start;padding-top:var(--space-9)}
.page--section .page-head--grid>.page-head__text{max-width:747px}
.page-head--grid .tree--static .band.grow{opacity:calc(var(--o) * .55)}
/* the steps on the grid: numeral, title, text on one row */
.page--grid .steps{max-width:none}
.page--grid .steps>li{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;column-gap:var(--gutter);padding:var(--space-7) 0;align-items:start}
.page--grid .steps>li:first-child{border-top:0;padding-top:0}
/* the steps as a timeline: a line through the numerals, the tree beside them growing ring by ring
   as each step comes into view (scroll-driven, no script; browsers without it show the whole tree) */
.page--grid .sec--steps>.steps{grid-column:1/8;grid-row:1}
.page--grid .sec--steps>.steps>li{grid-template-columns:repeat(7,minmax(0,1fr));position:relative;border-top:1px solid var(--color-rule);padding:var(--space-7) 0}
.page--grid .sec--steps>.steps>li::before{grid-column:1/2}
.page--grid .sec--steps>.steps>li:last-child{border-bottom:0;padding-bottom:0}
.page--grid .slab+.page-body>.sec--steps>.steps>li:first-child{border-top:0;padding-top:0}
.page--grid .sec--steps>.steps>li>.t-h2,.page--grid .sec--steps>.steps>li>.steps__text{grid-column:2/-1}
.page--grid .sec--steps>.steps__tree{grid-column:8/-1;grid-row:1;position:sticky;top:calc(var(--header-row) + var(--space-6));align-self:start;width:min(600px,calc(100vw - 840px));color:var(--color-areia);pointer-events:none}
.steps__tree .tree{display:block;width:100%;max-width:none;height:auto}
.sec--steps{timeline-scope:--step-1,--step-2,--step-3,--step-4,--step-5,--step-6}
.steps--line>li:nth-child(1){view-timeline-name:--step-1}
.steps--line>li:nth-child(2){view-timeline-name:--step-2}
.steps--line>li:nth-child(3){view-timeline-name:--step-3}
.steps--line>li:nth-child(4){view-timeline-name:--step-4}
.steps--line>li:nth-child(5){view-timeline-name:--step-5}
.steps--line>li:nth-child(6){view-timeline-name:--step-6}
.steps--line>li{scroll-margin-top:calc(var(--header-row) + var(--space-6))}
.steps--line>li:target>.t-h2{color:var(--color-slate)}
.timeline a{display:block;color:inherit;text-decoration:none}
.timeline a:hover .timeline__name,.timeline a:focus-visible .timeline__name{color:var(--color-slate)}
.page--grid .steps>li::before{grid-column:1/3;grid-row:1/span 2;font-family:var(--font-display);font-weight:400;font-size:var(--text-display);line-height:.8;letter-spacing:var(--tracking-display);color:var(--color-slate);padding-top:0;font-size:var(--text-h1);line-height:1}
.page--grid .steps>li>.t-h2{grid-column:3/-1;grid-row:1;margin:0}
.page--grid .steps>li>.steps__text{grid-column:3/-1;grid-row:2;margin-top:var(--space-4)}
.steps__text>.t-caption{margin-top:var(--space-2)}
/* ---------- the slab: a block of Azul Cerne, the deck's dark slide brought to the page.
   Full width when it sits between a page head and the body; pulled out to the viewport edges when it
   sits inside the reading column. Figures in Areia, words in paper, one source line beneath. */
.slab{background:var(--color-azul);color:var(--color-paper);padding:var(--space-8) 0}
.slab__inner{max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}
.page-body .slab{margin-inline:calc(50% - 50vw)}
.page-body>.sec+.slab,.page-body>.slab+.sec{margin-top:var(--space-9)}
.slab--stats{margin-top:0}
.slab--stats+.page-body{padding-top:var(--space-9)}
.slab .stats{border-top:1px solid var(--header-rule);padding-top:var(--space-6)}
.slab .stats__n{color:var(--color-areia)}
.slab .stats__l{color:var(--color-paper);opacity:.78}
.slab .t-caption{color:var(--color-areia);opacity:.8;margin-top:var(--space-6)}
/* the Areia slab: the same block in Areia, words in Azul, figures in Deep */
.slab--areia{background:var(--color-areia);color:var(--color-azul);padding:var(--space-8) 0}
.slab--areia .t-h2{color:var(--color-azul);margin-bottom:var(--space-5)}
.slab--areia .timeline{border-top-color:var(--color-azul);padding-top:var(--space-5)}
.slab--areia .timeline__n,.slab--areia .timeline__dur{color:var(--color-deep)}
.slab--areia .t-caption{color:var(--color-deep);opacity:1;margin-top:var(--space-5)}
/* the process on one line: six steps and their durations, three to a row */
.timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6) var(--space-6);margin:0;padding:var(--space-5) 0 0;list-style:none;border-top:1px solid var(--color-ink);max-width:none}
.timeline li{padding-right:var(--space-4);display:grid;grid-template-rows:auto auto 1fr;align-items:start}
.timeline__dur{align-self:end}
.timeline__n{display:block;font-family:var(--font-text);font-weight:500;font-size:var(--text-label);letter-spacing:var(--tracking-label);color:var(--color-slate)}
.timeline__name{display:block;margin-top:var(--space-2);font-family:var(--font-display);font-size:var(--text-h3);line-height:var(--leading-h3);color:var(--color-azul);text-wrap:balance}
.timeline__dur{display:block;margin-top:var(--space-2);font-family:var(--font-text);font-size:var(--text-caption);line-height:var(--leading-caption);color:var(--color-muted);font-variant-numeric:tabular-nums}
.timeline--six{grid-template-columns:repeat(6,minmax(0,1fr))}
.timeline+.t-caption{margin-top:var(--space-5)}
.timeline+.t-caption+.steps{margin-top:var(--space-8)}
/* questions in groups, each closed until opened: native details, no script */
.faq--groups>div{border:0;padding:0}
.faq--groups>.t-label{margin:var(--space-7) 0 var(--space-3)}
.faq--groups>.t-label:first-child{margin-top:0}
.faq--groups details{border-top:1px solid var(--color-rule)}
.faq--groups details:last-of-type{border-bottom:1px solid var(--color-rule)}
.faq--groups summary{list-style:none;cursor:pointer;min-height:var(--tap);display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-5);padding:var(--space-4) 0;font-family:var(--font-display);font-size:var(--text-h3);line-height:var(--leading-h3);color:var(--color-azul)}
.faq--groups summary::-webkit-details-marker{display:none}
.faq--groups summary::after{content:"+";flex:none;font-family:var(--font-display);font-size:var(--text-h2);line-height:1;color:var(--color-slate)}
.faq--groups details[open]>summary::after{content:"\2212"}
.faq--groups summary:hover,.faq--groups summary:focus-visible{color:var(--color-slate)}
.faq--groups details>.t-body{margin-bottom:var(--para-gap)}
.faq--groups details>.t-body:last-child{margin-bottom:0;padding-bottom:var(--space-5)}
/* what changes and what does not: two panels, ink outline for what stays, Areia fill for what changes */
.change{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);margin-top:var(--space-5);align-items:stretch}
.change__keep{order:1}
.change__new{order:2;border:1px solid var(--color-areia)}
.change>div{padding:var(--space-6) var(--space-6) var(--space-4);border-radius:var(--radius)}
.change__keep{border:1px solid var(--color-ink)}
.change__new{background:var(--color-areia)}
.change .t-label{margin-bottom:var(--space-3)}
.change__new .t-label,.buyers__panel--us .t-label{color:var(--color-deep)}
.change .list{max-width:none}
.change .list>li:last-child{border-bottom:0}
.change+.t-body{margin-top:var(--space-5)}
/* the three kinds of buyer: three panels, ours in Areia */
.buyers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-top:var(--space-5)}
.buyers__panel{padding:var(--space-5) var(--space-5) var(--space-4);border:1px solid var(--color-ink);border-radius:var(--radius)}
.buyers__panel--us{background:var(--color-areia);border-color:var(--color-areia)}
.buyers__panel>.t-h3{margin:0 0 var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-ink)}
.buyers dl{margin:0}
.buyers dl>div+div{margin-top:var(--space-4)}
.buyers dt{margin-bottom:var(--space-1)}
.buyers dd{margin:0}
.buyers+.t-body{margin-top:var(--space-6)}
/* the law: what the regime is, in the display face; who issues it and what it requires beside */
.law{margin:0;padding:0;list-style:none;max-width:none}
.law>li{display:grid;grid-template-columns:minmax(0,357fr) minmax(0,747fr);gap:var(--space-1) var(--gutter);padding:var(--space-5) 0;border-top:1px solid var(--color-rule)}
.law>li:last-child{border-bottom:1px solid var(--color-rule)}
.law__what{grid-row:1/3;font-family:var(--font-display);font-size:var(--text-h3);line-height:var(--leading-h3);color:var(--color-azul)}
.law__who{font-family:var(--font-text);font-weight:500;font-size:var(--text-label);letter-spacing:var(--tracking-label);color:var(--color-slate)}
.law__req{font-family:var(--font-text);font-size:var(--text-body);line-height:var(--leading-body);color:var(--color-ink)}
.law+.t-body{margin-top:var(--space-6)}


/* the button */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--space-6);background:var(--color-azul);color:var(--color-paper);font-family:var(--font-text);font-weight:500;font-size:var(--text-nav);letter-spacing:.01em;text-decoration:none;border-radius:var(--radius);transition:background .15s ease}
.button:hover{background:var(--color-deep)}

/* ---------- print: the reader hands this to his accountant ---------- */
@media print{
  body{background:#fff;color:#000;font-size:11.5pt}
  .site-header,.site-footer,.skip,.button{display:none}
  a{color:#000;text-decoration:none}
  h1,h2,h3{break-after:avoid}
  p{orphans:3;widows:3}
}

/* ---------- seams between components inside a section ---------- */
.sec>.t-table+.t-body,.sec>.t-table+.t-caption,.sec>.t-body+.list,.sec>.list+.t-body,.sec>.t-body+.steps,.sec__text>.t-table+.t-body,.sec__text>.t-table+.t-caption,.sec__text>.t-body+.list,.sec__text>.list+.t-body,.sec__text>.t-body+.steps{margin-top:var(--space-5)}
.sec>.list+.t-caption,.sec>.steps+.t-caption,.sec>.t-tel+.t-caption,.sec>.t-label+.t-body,.sec>.t-h3+.t-tel,.sec__text>.list+.t-caption,.sec__text>.steps+.t-caption,.sec__text>.t-tel+.t-caption,.sec__text>.t-label+.t-body,.sec__text>.t-h3+.t-tel,.sec__text>.t-body+.t-caption{margin-top:var(--space-3)}
.sec>.t-body+.cols,.sec>.t-body+.faq,.sec__text>.t-body+.cols,.sec__text>.t-body+.faq{margin-top:var(--space-6)}
.sec>.t-h2 a,.sec>.t-h3 a{text-decoration:none;color:inherit;transition:color .15s ease}
.sec>.t-h2 a:hover,.sec>.t-h3 a:hover{color:var(--color-slate)}

/* a wide comparison table: heads across the top, row heads narrow */
.t-table--wide{max-width:100%}
.t-table--wide thead th{width:auto;font-weight:500;color:var(--color-muted);padding-right:var(--space-4);border-bottom:1px solid var(--color-ink)}
.t-table--wide tbody th{width:18%}
.t-table--wide td{padding-right:var(--space-4)}
.t-table--wide tr:first-child th,.t-table--wide tr:first-child td{border-top:0}

/* ---------- the door: every page ends here. Who we are, what we buy, the phone, the button. ---------- */
.door{max-width:var(--container);margin:var(--space-8) auto 0;padding:var(--space-6) var(--gutter) var(--space-7);border-top:1px solid var(--color-areia)}
.door__who{font-family:var(--font-display);font-weight:400;font-size:var(--text-h2);line-height:var(--leading-h2);letter-spacing:var(--tracking-h2);color:var(--color-azul);max-width:34ch;text-wrap:balance}
.door__tagline{margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--text-tel);line-height:var(--leading-tel);color:var(--color-azul);max-width:34ch;text-wrap:balance}
.door .button{margin-top:0}
.door__contact{margin:var(--space-3) 0 0;font-family:var(--font-text);font-size:var(--text-body);line-height:1.6;color:var(--color-ink)}
.door__contact a{color:var(--color-azul);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.door__contact a:hover{color:var(--color-ink)}
.door__note{margin:var(--space-1) 0 0;font-size:var(--text-legal);line-height:1.6;color:var(--color-muted)}
.door__person{white-space:nowrap}
@media (max-width:900px){.door__person{display:block}.door__sep{display:none}}

/* ---------- footer: the tier links and the legal line ---------- */
.site-footer{max-width:var(--container);margin:0 auto;padding:var(--space-4) var(--gutter) var(--space-6);border-top:1px solid var(--color-rule)}
.nav-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--space-6);font-family:var(--font-text);font-weight:500;font-size:var(--text-label);letter-spacing:.01em}
.nav-footer a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--color-muted);text-decoration:none;transition:color .15s ease}
.nav-footer a:hover{color:var(--color-ink)}
.legal{margin-top:var(--space-1);font-size:var(--text-legal);line-height:1.6;color:var(--color-muted);text-align:center}
.legal>*+*{margin-left:var(--space-3)}
.legal a{color:var(--color-muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.legal a:hover{color:var(--color-ink)}

/* ---------- the tree study (working page) ---------- */
.arv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1400px;margin:0 auto;padding:0 var(--gutter)}
.arv__text{max-width:62ch;padding:var(--space-9) 0}
.arv__text>*+*{margin-top:var(--space-5)}
.arv__text .t-h1{margin-top:var(--space-4)}
.arv__tree{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;color:var(--color-azul)}
.arv__tree .tree{width:min(100%,88vh);height:auto}
.cmp{max-width:1400px;margin:0 auto;padding:var(--space-8) var(--gutter)}
.cmp>*+*{margin-top:var(--space-5)}
.cmp__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-8);color:var(--color-azul)}
.cmp__row figure{margin:0}
.cmp__row .tree{width:100%;height:auto}
.cmp__row figcaption{margin-top:var(--space-3)}

/* ---------- the hero with the tree: text left, the tree beside it in Areia, growing over the
   first screen of scroll and complete before the founders ---------- */
body{overflow-x:clip}
.hero--tree{--hero-pad:max(var(--gutter),calc((100vw - var(--container)) / 2 + var(--gutter)));position:relative;max-width:none;display:flex;align-items:center;min-height:min(820px,calc(100vh - var(--header-row)));padding:var(--space-8) var(--gutter) 0 var(--hero-pad);overflow:hidden}
.hero__text{position:relative;z-index:1}
.hero__text .t-display{max-width:16ch}
.hero__text .t-lede{max-width:62ch}                     /* ends before the heart; only the grown rings run under it */
.hero__tree{position:absolute;left:min(calc(var(--hero-pad) + 690px),calc(100vw - 820px));top:50%;width:1060px;transform:translateY(-50%);color:var(--color-areia);pointer-events:none}
.hero__tree .tree{display:block;width:100%;max-width:none;height:auto}
.cmp__row--gold{color:var(--color-areia)}

/* the drawing's bulges reach past its own box; never clip a tree at its viewBox edge */
.tree{overflow:visible}

/* ---------- the tree elsewhere ----------
   Page heads: a complete, static section in the empty right of the head, clipped to the head.
   O nome: the whole tree, centred, grown on load. Door: the heart alone as a mark. 404: the heart. */
/* Section landings: the head hugs its text on the house rhythm (95 / 76). The 460px floor
   existed only to make room for the 400px tree, which bought a void under short deks; the tree
   now bleeds past the head and is clipped, as it already is on the right. */
.page-head--tree{--head-pad:max(var(--gutter),calc((100vw - var(--col)) / 2 + var(--gutter)));position:relative;max-width:none;padding-left:var(--head-pad);padding-right:var(--gutter);overflow:hidden;min-height:0;display:flex;flex-direction:column;justify-content:flex-start}
.page-head--tree .t-h1,.page-head--tree .t-lede,.page-head--tree .crumb{position:relative;z-index:1}
.page-head--tree .t-lede{max-width:54ch}
.page-head__tree{position:absolute;left:min(calc(var(--head-pad) + 820px),calc(100vw - 380px));top:50%;width:400px;transform:translateY(-50%);color:var(--color-areia);pointer-events:none}
.page-head__tree .tree{display:block;width:100%;max-width:none;height:auto}
/* O nome: the whole tree in view on load, larger, grown from the pith over about four seconds */
/* The head is 660px because the tree is 640px. The text is 190px, so there are ~370px of
   leftover height: it is COLLECTED below the text, beside the lower rings, not distributed
   above and below it by centring. Top padding is the house rhythm every other head uses. */
.page-head--load{min-height:min(660px,calc(100vh - var(--header-row)));padding-top:var(--space-4);padding-bottom:var(--space-8);justify-content:center}
.page-head__tree--load{left:min(calc(var(--head-pad) + 700px),calc(100vw - 640px));width:640px}
.door__inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--space-7);max-width:840px;margin:0 auto;text-align:left}
.door__text{min-width:0}
.door__button{flex:none}
.door__logo{color:var(--color-azul);background:none;flex:none}
.door__logo .brand__logo{height:104px}
.nf-heart{display:flex;justify-content:center;padding:var(--space-8) 0 0;color:var(--color-areia)}
.nf-heart .tree{width:220px;height:auto}

/* on interior pages the door and footer follow the centred reading column */
main:has(.page) + .site-footer{max-width:var(--col)}
main:has(.page--grid)+.site-footer{max-width:var(--container)}

/* ---------- mobile and narrow desktops ----------
   One rule per component. The header is always compact below 900px (touch has no hover, so the
   menus are not shown; every section label already opens its landing). */
@media (max-width: 900px){
  .site-header{position:static}   /* on phones the header stays at the top: the menu is two rows and would be a wall following the reader */
  .site-header__brand{display:none}
  .brand--small{grid-row:1;grid-column:1;min-height:var(--tap);opacity:1;visibility:visible;transform:none;animation:none}
  .brand--small .brand__logo{height:40px}
  .site-header__row{grid-template-columns:1fr auto;column-gap:var(--space-4);padding:0 var(--gutter)}
  .lang{grid-row:1;grid-column:2}
  .nav-primary{grid-row:2;grid-column:1/-1;min-width:0}
  .nav-primary__list{flex-wrap:wrap;justify-content:flex-start;gap:0 var(--space-5);font-size:var(--text-label)}
  .nav-item__label{white-space:nowrap;height:var(--tap)}
  .nav-menu{display:none}
  .lang a{height:var(--tap)}
  .hero--tree{display:flex;flex-direction:column;min-height:0;overflow:visible;padding-left:var(--gutter);padding-bottom:var(--space-7)}
  .hero__text{display:contents}
  .hero__text .t-display{order:0}
  .hero__tree{position:static;order:1;width:100%;max-width:360px;transform:none;margin:var(--space-4) auto 0;align-self:center}
  .hero__text .t-lede{order:2;margin-top:var(--space-6)}
  .home-people,.stanzas,.cards,.cols,.people{grid-template-columns:1fr}
  .home-people .person,.person,.people--large .person{grid-template-columns:96px minmax(0,1fr);gap:var(--space-4)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .change,.buyers{grid-template-columns:1fr}
  .stats__n{font-size:var(--text-h2)}
  .law>li{grid-template-columns:1fr}
  .law__what{grid-row:auto}
  .band__quote{font-size:var(--text-h3)}
  .person__line{overflow-wrap:anywhere}
  .page-head--tree,.page-head--grid{min-height:0;padding-left:var(--gutter)}
  .page-head--grid:has(.page-head__tree){min-height:0}
  .page-head--load{padding-top:var(--space-7);padding-bottom:var(--space-7);justify-content:center}
  .page-head__tree{display:none}
  .page-head--load .crumb{order:0}
  .page-head--load .t-h1{order:1}
  .page-head--load .page-head__tree{order:2;display:block;position:static;width:100%;max-width:300px;transform:none;margin:var(--space-5) auto var(--space-2)}
  .page-head--load .t-lede{order:3}
  .steps>li{grid-template-columns:2.4rem 1fr}
  .page--grid .sec,.page-head--grid{display:block}
  .page--grid .page-body{padding-left:var(--gutter);padding-right:var(--gutter)}
  .page--grid .page-body>.sec{padding-left:0;padding-right:0}
  .page--grid .sec>.t-h2{margin-bottom:var(--space-5);position:static}
  .crumb{margin-bottom:var(--space-5)}
  .page--grid .sec>.sec__aside,.page--grid .sec>.principle__maxim,.page--grid .sec>.t-label:first-child{margin-bottom:var(--space-5)}
  .t-tel a,.person__line a,.sec__text>.t-body>a[href^="mailto:"],.sec__text>.t-body>a[href^="tel:"],.person__name a{display:inline-block;min-height:var(--tap);padding-block:var(--space-2)}
  .person__name a{padding-block:0;line-height:var(--tap)}
  .page--grid .people--large .person>div{display:grid;grid-template-columns:1fr;grid-column:1}
  .page--grid .people--large .person .t-body:not(.person__line){grid-column:1;grid-row:auto;margin-top:var(--space-4)}
  .page--grid .people--large .marks--logos{grid-column:1}
  .page--grid .people--large .portrait{grid-column:1/-1;width:160px}
  .page--grid .people--large .person{grid-template-columns:1fr}
  .page--section.page--grid .page-head--grid{padding-bottom:var(--space-4)}
  .page--section.page--grid .page-head--grid:has(.page-head__tree){min-height:0}
  .button{font-size:var(--text-body)}
  .page--grid .steps>li,.page--grid .sec--steps>.steps>li{grid-template-columns:1fr;grid-template-rows:none;column-gap:0;padding:var(--space-6) 0}
  .page--grid .sec--steps>.steps>li::before{grid-column:1;grid-row:auto;position:static;font-size:var(--text-h2);margin-bottom:var(--space-2)}
  .page--grid .sec--steps>.steps>li>.t-h2,.page--grid .sec--steps>.steps>li>.steps__text{grid-column:1;grid-row:auto}
  .steps__tree{display:none}
  .page--grid .sec--steps>.steps>li{padding:var(--space-6) 0}
  .page--grid .steps>li::before{grid-column:1;grid-row:auto;font-size:var(--text-h2);margin-bottom:var(--space-3)}
  .page--grid .steps>li>.t-h2,.page--grid .steps>li>.steps__text{grid-column:1;grid-row:auto}
  .page--grid .steps>li>.steps__text{margin-top:var(--space-3)}
  .timeline--six{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards--wide .card{grid-template-columns:1fr}
  .page--section.page--grid .page-head__text>.cards{margin-top:var(--space-6)}
  .t-table--wide{display:block;overflow-x:auto}
  .t-table th{width:34%}
  .door__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-5)}
  .door__logo .brand__logo{height:64px}
  .door .button{width:100%;max-width:360px}
  .legal{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}
  .legal>*+*{margin-left:0}
  .t-display,.t-h1,.t-h2{max-width:none}
}
@media (max-width: 600px){
  .nav-primary__list{gap:0 var(--space-4)}
  .site-header__row{column-gap:var(--space-3)}
  .hero{padding-top:var(--space-7)}
  .stanzas{gap:var(--space-6)}
}

/* link-buttons: the rule is that anything that acts like a button looks like one. Stated last so
   nothing above can undo it. */
.bb-more a,.button--small{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--space-4);background:var(--color-areia);border-radius:var(--radius);font-family:var(--font-text);font-weight:500;font-size:var(--text-label);letter-spacing:var(--tracking-label);color:var(--color-azul);text-decoration:none;transition:filter .15s ease}
.bb-more a:hover,.button--small:hover{filter:brightness(.94);color:var(--color-azul)}
.cols--sections + .sec{margin-top:var(--space-9)}

/* the letter card: one wide, clearly clickable block */
.letter-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"meta sum" "title sum" "title read";column-gap:var(--gutter);row-gap:var(--space-3);align-items:start;padding:var(--space-6) var(--space-6) var(--space-7);background:var(--color-areia);border-radius:var(--radius);text-decoration:none;color:var(--color-azul);transition:filter .15s ease,transform .15s ease}
.letter-card:hover,.letter-card:focus-visible{filter:brightness(.94);transform:translateY(-1px)}
.letter-card__meta{grid-area:meta;color:var(--color-deep)}
.letter-card__title{grid-area:title;color:var(--color-azul);max-width:none}
.letter-card__sum{grid-area:sum;color:var(--color-azul);max-width:none}
.letter-card__read{grid-area:read;justify-self:start;align-self:end;background:var(--color-paper)}
@media (max-width: 900px){
  .letter-card{grid-template-columns:1fr;grid-template-areas:"meta" "title" "sum" "read"}
  .home-row{grid-template-columns:1fr}
  .home-row .name{display:block;padding-top:var(--space-6)}   /* empilhado: sem centragem */
}
.sec.letters{padding-top:0;border-top:0}
.sec.letters+.sec.letters{margin-top:var(--space-5)}

/* ---------- contact squares: número · WhatsApp · email · LinkedIn ----------
   Replaces the visible tel/email lines on the home. 44px targets (Rule 12),
   Azul Cerne ground, paper glyph, slate on hover/focus. No JS, icons inline. */
.contact-squares{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:var(--space-4) 0 0;padding:0}
.csq{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);background:var(--color-azul);color:var(--color-paper);border-radius:var(--radius);text-decoration:none;transition:background .15s ease}
.csq:hover,.csq:focus-visible{background:var(--color-slate)}
.csq svg{width:22px;height:22px;fill:currentColor;display:block}
@media print{.contact-squares{display:none}}

/* the closing line of Quem somos / Who we are: full measure, centred */
.t-italic--wide{max-width:none;text-align:center;text-wrap:balance}

/* percurso: uma linha de wordmarks sob cada biografia. Aceita texto hoje,
   e <img class="marks__logo"> quando houver ficheiros oficiais licenciados. */
.marks{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);list-style:none;margin:var(--space-5) 0 0;padding:0;font-family:var(--font-text);font-weight:500;font-size:var(--text-label);line-height:1.4;letter-spacing:var(--tracking-label);color:var(--color-slate)}
.marks li{display:inline-flex;align-items:center}
.marks li+li::before{content:"·";margin-right:var(--space-3);color:var(--color-areia)}
.marks--logos{gap:var(--space-5) var(--space-6);margin-top:var(--space-5)}
.marks--logos li+li::before{content:none}
.marks__logo{max-height:26px;max-width:110px;width:auto;height:auto;object-fit:contain;display:block}
@media (max-width:900px){.marks--logos{gap:var(--space-4) var(--space-5)}.marks__logo{max-height:28px;max-width:98px}}

/* nome na home liga à biografia em Quem somos */
.person__name a{color:inherit;text-decoration:none;border-bottom:1px solid var(--color-rule);transition:border-color .15s ease,color .15s ease}
.person__name a:hover,.person__name a:focus-visible{color:var(--color-slate);border-bottom-color:var(--color-ink)}
/* e aterra com a pessoa centrada no ecrã, livre do cabeçalho colante.
   clamp: nunca por baixo do cabeçalho, nunca tão baixo que empurre o nome para fora. */
#pedro,#manuel{scroll-margin-top:clamp(88px,calc(50vh - 180px),42vh)}
/* Sem scroll-behavior:smooth. Com ele ativo, o Chrome cancela o salto inicial para a
   ancora (#pedro, #manuel, #oficios) quando o tipo de letra carrega e o layout mexe,
   e a pagina fica no topo. Nao ha ancoras dentro da mesma pagina, por isso o smooth
   nao dava nada e custava a correcao. Verificado no browser a 11-09-2026. */
/* no telemóvel o bloco é mais alto que o ecrã, portanto centrar esconderia o nome:
   aterra logo abaixo do cabeçalho e lê-se para baixo. */
@media (max-width:900px){#pedro,#manuel{scroll-margin-top:88px}}

/* Princípios: a máxima vive entre o título e o corpo, como subtítulo. */
.sec--principle .t-h2{margin-bottom:var(--space-3)}
.principle__maxim{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:var(--text-h3);line-height:var(--leading-h3);color:var(--color-deep);max-width:46ch;margin-top:var(--space-3);padding-left:var(--space-4);border-left:2px solid var(--color-areia);text-wrap:pretty}
.principle__maxim+.t-body{margin-top:var(--space-5)}
@media (max-width:900px){.principle__maxim{padding-left:var(--space-3)}}

/* Ligações discretas na home: títulos das estrofes e o nome dentro da frase em itálico.
   Mesmo tratamento dos nomes das pessoas: sublinhado fino que escurece no hover. */
.stanza h2 a,.name .t-italic a{color:inherit;text-decoration:none;border-bottom:1px solid var(--color-rule);transition:border-color .15s ease,color .15s ease}
.stanza h2 a:hover,.stanza h2 a:focus-visible,.name .t-italic a:hover,.name .t-italic a:focus-visible{color:var(--color-slate);border-bottom-color:var(--color-ink)}
#oficios,#trades{scroll-margin-top:clamp(88px,calc(50vh - 180px),42vh)}
@media (max-width:900px){#oficios,#trades{scroll-margin-top:88px}}

/* 2026-10-09: marcas do percurso alinhadas com o slide D4 do deck: uma só altura base e uma escala por marca,
   em vez de um teto de largura que encolhia as marcas largas (Harvard, Teixeira Duarte). */
.marks--logos{--mark-h:28px;gap:var(--space-4) var(--space-5)}
.marks--logos .marks__logo{height:calc(var(--mark-h) * var(--mark-scale,1));width:auto;max-height:none;max-width:none}
.marks__logo[alt="Stanford Graduate School of Business"]{--mark-scale:0.988}
.marks__logo[alt="London Business School"]{--mark-scale:1.3}
.marks__logo[alt="Teixeira Duarte"]{--mark-scale:0.822}
.marks__logo[alt="Ambit Partners"]{--mark-scale:0.984}
.marks__logo[alt="Harvard Business School"]{--mark-scale:0.984}
.marks__logo[alt="Nova School of Business and Economics"]{--mark-scale:1.0}
.marks__logo[alt="BCG"]{--mark-scale:0.903}
.marks__logo[alt="Prospio"]{--mark-scale:0.78}
@media (max-width:900px){.marks--logos{--mark-h:24px;gap:var(--space-3) var(--space-4)}}
/* 2026-10-10: cartão do Pedro nas páginas de proprietários (o mesmo desenho dos fundadores na home, mais pequeno) */
.person--card{grid-template-columns:120px minmax(0,1fr);gap:var(--space-5)}
.person--card .person__name{margin-top:0}
@media (max-width:900px){.person--card{grid-template-columns:96px minmax(0,1fr);gap:var(--space-4)}}