/* Site 4 · «A Caixa» — contract: records/DESIGN.md (rev. 2 + rev. 3 amendments) and ambition-plan.md, 1:1. */

@font-face { font-family: 'Alfa Slab One'; src: url('assets/fonts/alfa-slab-one-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('assets/fonts/oswald-200-700.woff2') format('woff2'); font-weight: 200 700; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('assets/fonts/lexend-100-900.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --cartao: #cfa66f;
  --cartao-escuro: #b8905a;
  --rotulo: #f7ecd6;
  --tinta: #1c1a17;
  --carmim: #bf2a3c;
  --verde: #1e5a38;
  --petroleo: #176c78;
  --ouro: #e0a21e;          /* the sun's ink at its highest; the warm end of the flutes */
  --verde-claro: #7fc39a;   /* the colophon's stamp on ink */
  --sombra: rgba(60,35,10,.35);
  --slab: 'Alfa Slab One', 'Rockwell Extra Bold', serif;
  --estencil: 'Oswald', 'Arial Narrow', sans-serif;
  --leitura: 'Lexend', 'Verdana', sans-serif;
  --flute: rgba(106,58,58,.12);   /* the board's flute ink: dawn (JS warms it to noon) */
  --p: 0;                         /* page fraction, set by JS */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background-color: var(--cartao);
  background-image: repeating-linear-gradient(to bottom, var(--flute) 0 1px, transparent 1px 9px);
  color: var(--tinta);
  font: 400 17.5px/1.6 var(--leitura);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.salto { position: absolute; left: -9999px; z-index: 90; }
.salto:focus { left: 12px; top: 12px; background: var(--rotulo); border: 3px solid var(--tinta); padding: 12px 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

h1, h2, h3 { font-family: var(--slab); font-weight: 400; letter-spacing: -.01em; line-height: 1; text-wrap: balance; }
h1 { font-size: 64px; line-height: .95; }
h2 { font-size: 44px; }
h3 { font-size: 28px; line-height: 1.05; }
.estencil { font: 600 14px/1 var(--estencil); letter-spacing: .12em; text-transform: uppercase; }
.titulo { margin-bottom: 28px; }

/* ---------- the light ---------- */
.sol { position: fixed; right: 2vw; top: 0; width: 13vmin; height: 14.95vmin; z-index: 3; pointer-events: none; transform: translateY(104vh); will-change: transform; }
.sol-dica { font: 600 8px var(--estencil); letter-spacing: 1.5px; fill: var(--tinta); opacity: 0; transition: opacity 160ms ease-out; }
@media (hover: hover) and (pointer: fine) { .sol:hover .sol-dica, .sol.na-mao .sol-dica { opacity: .85; } }
/* on a fine pointer the sun can be taken in hand: drag it up or down and the whole page's light follows */
@media (hover: hover) and (pointer: fine) { .sol .sol-disco { pointer-events: auto; cursor: grab; } .sol.na-mao .sol-disco { cursor: grabbing; } }
html:not(.js) .sol { display: none; }
@media (max-width: 1400px) { .sol { z-index: 0; width: 10vmin; height: 11.5vmin; } } /* the lane crosses the content at 1280: the sun passes behind the stations */
/* every object with weight casts a projected shadow: a parallelogram anchored to its base (JS sets height/skew/opacity from the sun) */
.sombra { position: absolute; left: 0; top: 100%; width: 100%; height: 40px; background: var(--tinta); opacity: .22; mix-blend-mode: multiply; transform-origin: 50% 0; transform: skewX(-28deg); pointer-events: none; z-index: 0; }

/* ---------- the stencil bar ---------- */
.barra { position: sticky; top: 0; z-index: 70; height: 52px; background: var(--tinta); color: var(--rotulo); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
/* the mark is words for now (owner, 2026-09-02: no logo until one is designed); the header link returns to the entry site */
.marca { display: inline-flex; align-items: center; gap: 8px; font: 400 20px/1 var(--slab); letter-spacing: .04em; color: var(--rotulo); text-decoration: none; }
.marca-volta { font-family: var(--leitura); font-size: 18px; }
.marca-sub { font: 500 12px/1 var(--estencil); letter-spacing: .14em; opacity: .85; }
.botao {
  display: inline-block; position: relative; background: var(--carmim); color: var(--rotulo);
  font: 600 16px/1 var(--estencil); letter-spacing: .12em; text-transform: uppercase;
  border: 3px solid var(--tinta); padding: 16px 28px; min-height: 48px; cursor: pointer; box-shadow: inset 0 0 0 0 var(--tinta); transition: box-shadow 150ms ease-out;
}
@media (hover: hover) { .botao:hover { box-shadow: inset 0 0 0 4px var(--tinta); } }
.botao:active { transform: translateY(2px); }
.botao.pequeno { padding: 10px 16px; min-height: 44px; font-size: 14px; }
.barra .botao.pequeno { border-color: var(--rotulo); }

/* ---------- estação 1: the cover under the lid ---------- */
.capa { position: relative; height: calc(100svh - 52px); min-height: 600px; overflow: hidden; z-index: 1; }
.capa-rotulo { position: absolute; inset: 20px; overflow: hidden; background: var(--rotulo); }
.capa-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
/* the cover picture has depth: it leans away from a fine pointer (±1.2%) and dollies in as the reader scrolls off it */
html.js .capa-arte { --cx: 0px; --cy: 0px; --cs: 1.05; transform: translate(var(--cx), var(--cy)) scale(var(--cs)); will-change: transform; }
.veu { position: absolute; inset: 0; background: var(--tinta); mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
.moldura { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.canto-capa { position: absolute; width: 44px; height: 44px; pointer-events: none; }
.cc1 { left: 22px; top: 22px; } .cc2 { right: 22px; top: 22px; transform: scaleX(-1); } .cc3 { left: 22px; bottom: 22px; transform: scaleY(-1); } .cc4 { right: 22px; bottom: 22px; transform: scale(-1); }
.capa-texto {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 3;
  width: min(640px, calc(100% - 64px)); background: var(--rotulo); border: 3px solid var(--tinta); padding: 22px 28px 26px; text-align: center;
}
.capa-texto .estencil { color: var(--verde); margin-bottom: 8px; }
.capa-texto h1 { font-size: clamp(30px, 3.6vw, 48px); max-width: 16ch; margin: 0 auto; }
.capa-texto .sub { max-width: 50ch; margin: 10px auto 16px; }
/* the lid: a full-viewport slatted board hinged on its top edge */
.tampa { position: absolute; inset: 0; z-index: 5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='36'%3E%3Crect width='64' height='36' fill='%23cfa66f'/%3E%3Crect y='33' width='64' height='3' fill='%231c1a17' opacity='.85'/%3E%3Cpath d='M0 8H64M0 26H64' stroke='%23b8905a'/%3E%3Ccircle cx='6' cy='18' r='1.6' fill='%231c1a17'/%3E%3Ccircle cx='58' cy='18' r='1.6' fill='%231c1a17'/%3E%3C/svg%3E"); transform-origin: 50% 0; pointer-events: none; display: none; }
.tampa-borda { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--cartao-escuro); border-top: 2px solid var(--tinta); }
/* the opening sequence: lid → light → frame → mark → caption (JS adds .aberta after the first frame) */
html.js .capa { perspective: 1400px; }
html.js .tampa { display: block; }
html.js .veu { opacity: .55; }
html.js .moldura .m-fora, html.js .moldura .m-dentro { stroke-dasharray: 3300; stroke-dashoffset: 3300; }
html.js .capa-texto { opacity: 0; transform: translate(-50%, 40px); }
html.js .capa.aberta .tampa { animation: abrir 1100ms cubic-bezier(.22,1,.36,1) forwards; }
html.js .capa.aberta .veu { animation: luz 1100ms cubic-bezier(.22,1,.36,1) forwards; }
html.js .capa.aberta .moldura .m-fora, html.js .capa.aberta .moldura .m-dentro { animation: tracar 600ms ease-out 900ms forwards; }
html.js .capa.aberta .capa-texto { animation: subir 300ms ease-out 1600ms forwards; }
@keyframes abrir { 80% { opacity: 1; } to { transform: rotateX(-96deg); opacity: 0; } }
@keyframes luz { to { opacity: 0; } }
@keyframes tracar { to { stroke-dashoffset: 0; } }
@keyframes carimbar { 0% { transform: translateX(-50%) scale(1.5); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes subir { to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- estação 2: the crate wall ---------- */
.praca { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 96px 24px 40px; }
.praca .titulo { background: var(--rotulo); display: inline-block; padding: 8px 14px; border: 3px solid var(--tinta); }
/* the wall is one bonded stack on a pallet: twelve columns, no gaps, the lower row's seam (7|8) never under an upper seam (4|5, 8|9) */
.parede { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; align-items: stretch; margin-top: 150px; } /* the fruit that rests on the wall needs the room between the heading and the crates */
.caixa { display: flex; flex-direction: column; } .caixa .face { flex: 1; } /* a row of crates is one height: the taller label gets no more crate than its neighbours, the shorter gets more slats */
.c-laranjas, .c-batatas, .c-tomates { grid-column: span 4; }
.c-melancias { grid-column: span 7; }
.c-cerejas { grid-column: span 5; }
.c-batatas, .c-tomates, .c-cerejas { margin-left: -2.5px; } /* shared edges: one outline, not two */
.palete { display: block; width: 100%; height: 30px; }
/* the fruit that spills when the wall lands: a canvas over the wall, in front of the crates (JS sizes and drives it) */
.fruta { position: absolute; left: 24px; right: 24px; top: 0; height: 0; z-index: 3; pointer-events: none; }
html:not(.js) .fruta { display: none; }
/* the road under the pallet: the van crosses it as the reader scrolls past the wall */
.estrada { position: relative; height: 112px; margin-top: 6px; overflow: hidden; }
.estrada-linha { position: absolute; left: 0; right: 0; bottom: 18px; border-top: 3px dashed var(--tinta); opacity: .55; }
.carrinha-lado { position: absolute; left: 0; bottom: 14px; width: 190px; height: auto; transform: translateX(-120%); will-change: transform; }
html:not(.js) .carrinha-lado { transform: translateX(50vw); }
.c-batatas .face { padding-top: 34px; }
.c-laranjas .rotulo img { object-position: 50% 30%; }
.c-batatas .rotulo img { object-position: 50% 70%; aspect-ratio: 4/3; }
.c-tomates .rotulo img { object-position: 30% 50%; aspect-ratio: 5/3; }
.c-cerejas .rotulo img { aspect-ratio: 4/3; object-position: 50% 45%; }
.caixa { position: relative; margin-top: 8px; --escala: 1; }
.janela { display: block; overflow: hidden; margin-bottom: 12px; }
html.js .janela img { --py: 0%; transform: scale(1.1) translateY(var(--py)); will-change: transform; }
.caixa .face { position: relative; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='36'%3E%3Crect width='64' height='36' fill='%23cfa66f'/%3E%3Crect y='33' width='64' height='3' fill='%231c1a17' opacity='.85'/%3E%3Cpath d='M0 8H64M0 26H64' stroke='%23b8905a'/%3E%3Ccircle cx='6' cy='18' r='1.6' fill='%231c1a17'/%3E%3Ccircle cx='58' cy='18' r='1.6' fill='%231c1a17'/%3E%3C/svg%3E"); border: 2.5px solid var(--tinta); padding: 26px 18px 20px; }
.caixa .face::before { content: ''; position: absolute; left: -2.5px; right: -2.5px; top: -14px; height: 14px; background: var(--cartao-escuro); border: 2.5px solid var(--tinta); border-bottom: 0; transform: skewX(-24deg); transform-origin: 0 100%; }
.caixa-n { position: absolute; top: 6px; right: 12px; color: var(--tinta); opacity: .75; font-size: 12px; }
.rotulo { position: relative; background: var(--rotulo); border: 3px solid var(--carmim); box-shadow: inset 0 0 0 1px var(--rotulo), inset 0 0 0 2px var(--verde); padding: 14px 16px 18px; }
.rotulo img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.rotulo h3 { margin-bottom: 8px; }
.rotulo p { max-width: 46ch; font-size: 16px; line-height: 1.5; }
.canto { position: absolute; width: 26px; height: 26px; pointer-events: none; }
.canto.ca { left: 6px; top: 6px; } .canto.cb { right: 6px; top: 6px; transform: scaleX(-1); }
/* the crates' sizes by produce */
.c-melancias { --escala: 1.25; } .c-batatas { --escala: 1.1; } .c-cerejas { --escala: .8; }
.c-melancias .rotulo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
.c-melancias .rotulo .janela { grid-row: span 2; margin-bottom: 0; } .c-melancias .rotulo img { aspect-ratio: 1; }
.c-melancias .rotulo p, .c-batatas .rotulo p { font-size: 17px; }
.c-cerejas .rotulo h3 { font-size: 24px; }
/* landing physics: JS drives --k (0 airborne … 1 landed) */
html.js .caixa { --k: 1; transform: translateY(calc((1 - var(--k)) * -110px)) rotate(calc((1 - var(--k)) * 2.5deg)); }
/* the label corner peels toward the hand */
.rotulo::after { content: ''; position: absolute; width: 0; height: 0; right: 0; bottom: 0; background: linear-gradient(225deg, var(--cartao) 0 50%, var(--rotulo) 50%); box-shadow: -2px -2px 3px rgba(0,0,0,.18); transition: width 160ms ease-out, height 160ms ease-out; pointer-events: none; }
.rotulo.peel-br::after { right: 0; bottom: 0; left: auto; top: auto; background: linear-gradient(225deg, var(--cartao) 0 50%, var(--rotulo) 50%); }
.rotulo.peel-bl::after { left: 0; bottom: 0; right: auto; top: auto; background: linear-gradient(135deg, var(--cartao) 0 50%, var(--rotulo) 50%); }
@media (hover: hover) and (pointer: fine) { .rotulo:hover::after { width: 28px; height: 28px; } }

/* ---------- estação 3: the ticket ---------- */
.talao-estacao { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 80px 24px; display: grid; gap: 40px; align-items: start; }
@media (min-width: 980px) { .talao-estacao { grid-template-columns: 2fr 3fr; } }
.talao-texto { background: var(--rotulo); border: 3px solid var(--tinta); padding: 24px 28px; }
.talao-texto .titulo { margin-bottom: 12px; }
.talao-texto p { max-width: 52ch; }
.estado { margin-top: 14px; color: var(--carmim); }
.talao-figura { margin: 0; }
.talao { position: relative; width: min(620px, 100%); aspect-ratio: 620/760; margin: 0 auto; background: var(--rotulo); border: 2px solid var(--tinta); cursor: crosshair; touch-action: pan-y; }
.talao-svg { display: block; width: 100%; height: 100%; }
.t-est { font: 600 26px var(--estencil); letter-spacing: 4px; fill: var(--tinta); }
.t-col { font: 600 12px var(--estencil); letter-spacing: 2px; fill: var(--tinta); opacity: .7; }
.t-selo { font: 600 16px var(--estencil); letter-spacing: 2px; fill: var(--verde); }
.t-app { font: 400 14px var(--leitura); fill: var(--tinta); }
.t-app-total { font-weight: 600; }
.t-app-est { font: 600 12px var(--estencil); letter-spacing: 3px; fill: var(--rotulo); }
.registo { opacity: 0; }
.registo .linha-app { opacity: 0; }
html:not(.js) .registo, html:not(.js) .registo .linha-app { opacity: 1 !important; }
.escrita path { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.escrita .preta { stroke: var(--tinta); }
.escrita .azul { stroke: var(--petroleo); }
.leituras path { fill: none; stroke: var(--verde); stroke-width: 2; stroke-linecap: round; }
.leituras .check { stroke-width: 3; }
.carimbo-lido { opacity: 0; transform-box: fill-box; transform-origin: center; }
.aparo { transform-box: view-box; }
.aparo-azul use { filter: none; }
.talao-legenda { position: relative; z-index: 2; margin-top: 16px; font-size: 14.5px; font-style: italic; text-align: center; background: var(--rotulo); border: 2px solid var(--tinta); padding: 8px 12px; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.talao-figura > p { text-align: center; margin-top: 12px; }
/* the resolved state (no-JS): a static, fully written copy of the ticket lives in the markup; the script's live groups take over when it runs */
html.js .estatico { display: none; }
html:not(.js) .escrita path, html:not(.js) .leituras path { stroke-dashoffset: 0 !important; }
html:not(.js) .carimbo-lido { opacity: 1; }
html:not(.js) .aparo, html:not(.js) #reescrever { display: none; }

/* ---------- estação 4: the method band ---------- */
.faixa { position: relative; z-index: 1; padding: 72px 24px; }
.faixa-verde { background: var(--verde); color: var(--rotulo); }
.metodo .titulo { max-width: 1180px; margin: 0 auto 28px; }
.carimbos { list-style: none; max-width: 1180px; margin: 0 auto; display: grid; gap: 24px; }
@media (min-width: 900px) { .carimbos { grid-template-columns: repeat(4, 1fr); } }
.carimbo { position: relative; display: inline-block; width: 160px; height: 48px; margin-bottom: 12px; }
.carimbos .carimbo { width: 210px; }
.carimbo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.carimbo span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px var(--estencil); letter-spacing: 2px; color: inherit; white-space: nowrap; }
/* the stamps come down as the band scrolls in (JS drives --s: 0 raised … 1 stamped), each at its own slant */
.carimbos .carimbo { --s: 1; --rot: 0deg; transform: rotate(var(--rot)) scale(calc(1.7 - .7 * var(--s))); opacity: var(--s); transform-origin: 50% 50%; }
.carimbos li:nth-child(1) .carimbo { --rot: -3deg; } .carimbos li:nth-child(2) .carimbo { --rot: 2deg; } .carimbos li:nth-child(3) .carimbo { --rot: -2deg; } .carimbos li:nth-child(4) .carimbo { --rot: 4deg; }
.carimbos p { max-width: 30ch; }
.metodo-estado { max-width: 1180px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid rgba(247,236,214,.4); max-width: 62ch; }

/* ---------- estação 5: ainda não ---------- */
.ainda { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 72px 24px; }
.ainda-rotulo { max-width: 720px; margin-left: auto; padding: 24px 28px; }
.ainda-rotulo p { max-width: 58ch; }
.carimbo-carmim { color: var(--carmim); transform: rotate(-3deg); }
.carimbo-carmim span { color: var(--carmim); }
.carimbo-verde { color: var(--verde); } .carimbo-verde span { color: var(--verde); }
.carimbo.pequeno { width: 120px; height: 36px; margin: 0; }

/* ---------- estação 6: the order pad on the noon cover ---------- */
.fecho { position: relative; z-index: 1; min-height: 100svh; padding: 80px 24px; display: grid; place-items: center; }
.fecho-rotulo { position: absolute; inset: 20px; overflow: hidden; background: var(--rotulo); }
.fecho-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
html.js .fecho-arte { --fy: 0px; transform: translateY(var(--fy)) scale(1.12); will-change: transform; }
.nota { position: relative; width: min(720px, 100%); }
.nota-papel { position: relative; z-index: 1; background: var(--rotulo); border: 3px solid var(--tinta); padding: 26px 28px 28px; clip-path: polygon(0 12px, 3% 0, 6% 12px, 9% 0, 12% 12px, 15% 0, 18% 12px, 21% 0, 24% 12px, 27% 0, 30% 12px, 33% 0, 36% 12px, 39% 0, 42% 12px, 45% 0, 48% 12px, 51% 0, 54% 12px, 57% 0, 60% 12px, 63% 0, 66% 12px, 69% 0, 72% 12px, 75% 0, 78% 12px, 81% 0, 84% 12px, 87% 0, 90% 12px, 93% 0, 96% 12px, 100% 0, 100% 100%, 0 100%); padding-top: 34px; }
.nota-rotulo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.nota-rotulo img { width: 132px; aspect-ratio: 3/2; object-fit: cover; border: 3px solid var(--carmim); }
.nota-papel h2 { font-size: 36px; margin-bottom: 10px; }
.nota-papel > p { max-width: 56ch; margin-bottom: 18px; }
.fio { font-weight: 600; text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.form { max-width: 640px; }
.linha2 { display: grid; gap: 0 20px; }
@media (min-width: 700px) { .linha2 { grid-template-columns: 1fr 1fr; } }
.campo { margin-bottom: 14px; }
.campo label { display: block; font: 600 13px/1.4 var(--estencil); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.campo input, .campo textarea { width: 100%; background: var(--rotulo); color: var(--tinta); border: 0; border-bottom: 3px solid var(--tinta); border-radius: 0; font: 400 17px/1.5 var(--leitura); padding: 10px 4px; }
.campo input:focus, .campo textarea:focus { outline: 3px solid var(--verde); outline-offset: 2px; }
.mel { position: absolute; left: -9999px; top: auto; }
.consent { margin-top: 12px; font-size: 14.5px; }

/* ---------- colophon ---------- */
.rodape { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; background: var(--tinta); color: var(--rotulo); padding: 20px 24px 40px; font-size: 14.5px; }
.rodape .carimbo-verde { color: var(--verde-claro); } .rodape .carimbo-verde span { color: var(--verde-claro); }

/* ---------- fit ---------- */
@media (max-width: 760px) {
  h1 { font-size: 40px; } h2 { font-size: 30px; } h3 { font-size: 24px; }
  body { font-size: 17px; line-height: 1.55; }
  .sol { width: 10vmin; height: 10vmin; right: 3vw; z-index: 0; } /* on a phone the sun stays behind the stations: nothing overlaps the ticket */
  .capa { min-height: 560px; }
  .capa-rotulo { inset: 12px; }
  .capa-texto { bottom: 26px; width: calc(100% - 40px); padding: 14px 16px 18px; }
  .capa-texto h1 { font-size: 26px; }
  .capa-texto .sub { font-size: 15px; margin: 8px auto 12px; }
  .capa-texto .estencil { font-size: 12px; }
  .praca { padding: 64px 16px 24px; }
  .parede { margin-top: 96px; }
  .parede { grid-template-columns: 1fr; gap: 0; }
  .c-laranjas, .c-batatas, .c-tomates, .c-melancias, .c-cerejas { grid-column: auto; width: auto; margin-left: 0; }
  .c-melancias, .c-cerejas { width: 100%; margin-left: 0; }
  .palete { height: 22px; }
  .fruta { left: 16px; right: 16px; }
  .estrada { height: 84px; } .carrinha-lado { width: 140px; }
  .c-melancias .rotulo { display: block; } .c-melancias .rotulo img { aspect-ratio: 3/2; margin-bottom: 12px; }
  .caixa .face { padding: 22px 14px 16px; }
  .talao-estacao { padding: 56px 16px; gap: 24px; }
  .t-col { font-size: 21px; }
  .t-app { font-size: 22px; }
  .t-app-est { font-size: 18px; }
  .t-selo { font-size: 22px; }
  .talao-legenda { font-size: 14px; }
  .faixa { padding: 56px 16px; }
  .ainda { padding: 56px 16px; }
  .fecho { padding: 44vh 16px 56px; align-items: start; } /* the noon picture shows above the pad before the pad covers it */
  .fecho-rotulo { inset: 12px; }
  .nota-papel { padding: 30px 18px 22px; }
  .nota-papel h2 { font-size: 28px; }
  .botao { padding: 14px 20px; }
}

/* ---------- reduced motion: open, stacked, written, read, noon ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .tampa { display: none; }
  html.js .veu { opacity: 0; }
  html.js .moldura .m-fora, html.js .moldura .m-dentro { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  html.js .capa-texto { opacity: 1; transform: translateX(-50%); animation: none; }
  html.js .caixa { transform: none !important; }
  html.js .escrita path, html.js .leituras path { stroke-dashoffset: 0 !important; }
  html.js .carimbo-lido { opacity: 1 !important; }
  html.js .registo, html.js .registo .linha-app { opacity: 1 !important; }
  html.js .aparo { display: none; }
  html.js .sol { display: none; } /* reduced motion: the light does not travel, so the page's sun is not drawn (the cover keeps its painted one) */
  html.js .capa-arte, html.js .fecho-arte, html.js .janela img { transform: none !important; }
  html.js .carimbos .carimbo { transform: rotate(var(--rot)) !important; opacity: 1 !important; }
  html.js .fruta { display: none; }
  html.js .carrinha-lado { transform: translateX(50vw) !important; }
  .rotulo::after { transition: none; }
  .botao { transition: none; }
}