/* 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");
@import url("tree.css");

/* ---------- 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(--space-8);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(--space-8);padding-top:var(--space-8);align-items:start}
.home-row .name{padding-top:var(--space-6)}
.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{margin:0 0 var(--space-5)}
.crumb a::before{content:"←";margin-right:.5em}
.crumb{display:flex}
.page-head .t-lede{margin-top:var(--space-6)}
.page-body{padding-bottom:var(--space-2)}
.page-body>.sec+.sec{margin-top:var(--space-9)}
.sec>.t-h2{margin-bottom:var(--space-5)}
.sec>.t-h3{margin:var(--space-6) 0 var(--space-3)}
.sec>.t-body+.t-h3{margin-top:var(--space-7)}
.sec>.t-table{margin-top:var(--space-5)}
.sec>.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:auto 1fr;grid-template-rows:auto auto;column-gap:var(--space-4);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{grid-column:2;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)}

/* 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{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{margin-top:var(--space-3)}
.sec>.t-body+.cols,.sec>.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}

/* ---------- 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. */
.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:460px;display:flex;flex-direction:column;justify-content:center}
.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--static .band.grow{opacity:calc(var(--o) * .28)}
.page-head__tree .tree--static .band.grow:nth-last-of-type(-n+2){opacity:calc(var(--o) * .75)}
.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 */
.page-head--load{min-height:min(820px,calc(100vh - var(--header-row)))}
.page-head__tree--load{left:min(calc(var(--head-pad) + 700px),calc(100vw - 800px));width:800px}
.door__inner{display:flex;align-items:center;justify-content:center;gap:var(--space-7);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)}

/* ---------- 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{top:0}
  .site-header__brand{display:none}
  .brand--small{opacity:1;visibility:visible;transform:none;animation:none}
  .brand--small .brand__logo{height:40px}
  .site-header__row{grid-template-columns:auto 1fr auto;column-gap:var(--space-4);padding:0 var(--gutter)}
  .nav-primary{min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .nav-primary::-webkit-scrollbar{display:none}
  .nav-primary__list{flex-wrap:nowrap;justify-content:flex-start;gap:0 var(--space-5);font-size:15px;padding-right:var(--space-6)}
  .nav-item__label{white-space:nowrap}
  .nav-item__label{height:44px}
  .nav-menu{display:none}
  .lang a{height:44px}
  .hero--tree{display:block;min-height:0;overflow:visible;padding-left:var(--gutter);padding-bottom:var(--space-7)}
  .hero--tree{display:flex;flex-direction:column}
  .hero__text{display:contents}
  .hero__text .t-display{order:0}
  .hero__tree{position:static;order:1;width:100%;max-width:440px;transform:none;margin:var(--space-5) 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{grid-template-columns:96px minmax(0,1fr);gap:var(--space-4)}
  .person .t-tel{font-size:19px}
  .person__line{overflow-wrap:anywhere}
  .page-head--tree{min-height:0;padding-left:var(--gutter)}
  .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:440px;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}
  .t-table--wide{display:block;overflow-x:auto}
  .t-table th{width:34%}
  .door__inner{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);font-size:14px}
  .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. */
.page-head .crumb a,.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}
.page-head .crumb a:hover,.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(--space-8);row-gap:var(--space-3);align-items:start;padding:var(--space-6) var(--space-7) 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}
}
.sec.letters{padding-top:0;border-top:0}
.sec.letters+.sec.letters{margin-top:var(--space-5)}