/* =====================================================================
   Works page (trabalho.html) — page head, brand filter, featured case, every project,
   Qualquer tela (hardware lineup + event app), Como roda, end cap.
   Shared: ../lib/gami.css, ../lib/site.css, ./modules/sheets.css.
   ===================================================================== */

/* Fallback metrics matched to Geologica (same values as the other pages), so the swap does not move lines. */
@font-face { font-family: "Geologica Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); font-weight: 100 549; size-adjust: 102%; ascent-override: 95.6%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "Geologica Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); font-weight: 550 900; size-adjust: 100.5%; ascent-override: 97%; descent-override: 27.4%; line-gap-override: 0%; }
:root {
  --f-display: "Geologica", "Geologica Fallback", ui-sans-serif, system-ui, sans-serif;
  --floor: rgba(250, 239, 239, .28);
  --scr-off: #090B0E;
  --sec: clamp(96px, 11vw, 160px);                 /* the one vertical rhythm */
  /* Qualquer tela: 1 cm = --cm px, one scale for the whole row (950 cm of floor, so the 1,70 m person ≈ 250 px at 1440) */
  --tm: 4;
  --cm: clamp(1px, calc((min(100vw, 1440px) - 2 * var(--margin)) / 942), 1.8px);   /* 942 cm: person's art edge → LED's art edge */
  /* the designed screens' shared palette (round 4): warm ink, one apricot-coral accent that pops */
  --app-bg: #140F12; --app-surface: #1D1519; --app-raised: #271C21; --app-line: rgba(255, 236, 230, .08);
  --app-acc: #FF6A5E; --app-acc-rgb: 255 122 69; --app-soft: #FFC4C4; --app-text: #FBF3EF; --app-mute: #B9A9A6;
}
html { scroll-padding-top: calc(var(--header-h) + 24px); }
body { background: var(--ink); overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }
ul.clean { list-style: none; margin: 0; padding: 0; }

/* ---------- Light: the static brand light, cued per section ---------- */
.light { position: fixed; inset: 0; z-index: -2; pointer-events: none; transition: opacity 800ms var(--ease-out); }
.light--rake {
  background:
    radial-gradient(ellipse 46% 34% at -2% 80%, rgba(255,163,168,.26), rgba(255,138,122,.10) 45%, transparent 72%),
    radial-gradient(ellipse 40% 22% at 50% 102%, rgba(224,69,126,.12), transparent 75%);
  opacity: 0;
}
body[data-cue="topo"] .light--key { opacity: .95; }
body[data-cue="trabalho"] .light--key { opacity: .42; }    /* house lights dim; each sheet is lit by its own footage */
body[data-cue="telas"] .light--key { opacity: .55; }
body[data-cue="telas"] .light--rake { opacity: 1; }        /* raking light along the floor line */
body[data-cue="fim"] .light--key { opacity: 1; }

/* FOCO: section headlines sharpen as they arrive */
.foco { transition: font-variation-settings 600ms var(--ease-out); }
html[data-motion="full"] .foco:not(.is-in) { font-variation-settings: "SHRP" 0; }

/* ---------- Sections: one rhythm ---------- */
.tb-sec { padding-block: var(--sec) 0; }
.tb-sec--last { padding-bottom: var(--sec); }
.tb-top { padding-top: clamp(40px, 5vw, 80px); }
.tb-title {
  font-family: var(--f-display); font-weight: 620; color: var(--text); font-variation-settings: "SHRP" 100;
  font-size: clamp(2.5rem, 1rem + 3.6vw, 4.5rem); line-height: .96; letter-spacing: -.038em;
  margin: 0; max-width: 14ch; text-wrap: balance;
}
.s-head h2, .s-head .tb-title { text-wrap: balance; }
.s-head .g-lede { max-width: 40ch; }

/* ---------- Groups of projects ---------- */
.tb-group + .tb-group { margin-top: clamp(72px, 8vw, 120px); }
.tb-group[hidden], .tb-sec[hidden] { display: none; }
.tb-group__head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end;
  margin-bottom: clamp(24px, 3vw, 40px); padding-top: 18px; border-top: 1px solid var(--edge);
}
.tb-group__head h3 { grid-column: 1 / span 7; margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.tb-group__head h3 small { font-family: var(--f-mono); font-stretch: 87.5%; font-weight: 400; font-size: .78rem; letter-spacing: 0; color: var(--text-3); }
.tb-group__head p { grid-column: 9 / span 4; margin: 0; justify-self: end; text-align: right; }
.tb-group__head p b { color: var(--text); font-weight: 500; }

/* While a brand is chosen the page reads as one answer: the chip bar (status + "Ver todas as marcas") lands under
   the header and the results follow it closely; the "every project" head is not true for a filtered list. */
.is-filtered #destaque, .is-filtered #destaque[hidden] + #projetos { padding-top: clamp(40px, 4vw, 56px); }
.is-filtered #projetos { padding-top: clamp(72px, 8vw, 120px); }
.is-filtered #projetos .s-head { display: none; }
.tb-group[hidden] + .tb-group { margin-top: 0; }

/* A filter chip that is already chosen keeps its lit edge and signal rule; its corner stays shut. */
#chips .wk-chip__hit[aria-pressed="true"] .wk-flap { transform: rotate3d(1, 1, 0, 180deg); }
#chips .wk-chip__hit[aria-pressed="true"] .wk-chip__face { --ch: var(--ch-chip); }
#chips .wk-chip__hit[aria-pressed="true"] .wk-chip__face::after { opacity: 1; }
#chips .wk-chip__arrow { display: none; }   /* phones: a filter, not a link */

/* A solo result (one sheet for the brand) is a two-part composition that closes on col 12. */
#projetos .wk-sheet.is-solo .wk-cap { grid-column: calc(var(--span, 7) + 2) / -1; }
@media (min-width: 1024px) {
  #projetos .wk-sheet.is-solo .wk-title { font-size: clamp(2rem, 1rem + 2vw, 3rem); max-width: 16ch; }
  #projetos .wk-sheet.is-solo .wk-line, #projetos .wk-sheet.is-solo .wk-fact { font-size: 1.125rem; max-width: 52ch; }
}

/* No layout shift: the chip grid and the featured case are drawn by JS after first paint, so their boxes are
   reserved from the same geometry (one grid of 16 chips: 8 × 16:10 across, 4 on tablets, 4 × 4:3 on phones; 8 columns of 16:9
   for the case). Lower bounds, measured against the rendered result at 1440 → 360 px. */
.tb-top { --wc: calc(min(100vw, 1440px) - 2 * var(--margin)); }
#chips { min-height: calc(.15625 * var(--wc) - 3px); }
#featured { --wc: calc(min(100vw, 1440px) - 2 * var(--margin)); min-height: max(calc(.375 * var(--wc) + 20px), 440px); }
@media (max-width: 1023px) {
  #chips { min-height: calc(.625 * var(--wc) + 9px); }
  #featured { min-height: calc(.5625 * var(--wc) + 406px); }
}
@media (max-width: 640px) {
  #chips { min-height: calc(.75 * var(--wc) + 2px); }
  #featured { min-height: calc(.5625 * var(--wc) + 474px); }
}

/* ---------- Qualquer tela ---------- */
.lineup-scroll { position: relative; margin-top: clamp(40px, 5vw, 72px); }
.lineup-row { display: flex; width: max-content; margin: 0 auto; padding: 0 max(0px, calc(var(--margin) - var(--tm) * var(--cm))); --rows: calc(250 * var(--cm)) 66px 40px; min-height: calc(250 * var(--cm) + 106px); }
.lineup { --sx: 0px; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; grid-template-rows: var(--rows); margin: 0; padding: 0; list-style: none; }
.tela { display: grid; grid-row: span 3; grid-template-rows: subgrid; padding: 0; position: relative; }
.tela--human { display: grid; grid-template-rows: var(--rows); }
.tela__art { align-self: end; position: relative; width: calc(var(--w) * var(--cm)); height: calc(var(--h) * var(--cm)); margin: 0 calc(var(--tm) * var(--cm)); }
.tela__btn { display: block; position: relative; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; transition: filter 300ms var(--ease-out); }
.tela__btn > svg, .tela__fig > svg { width: 100%; height: 100%; overflow: visible; }
.tela__btn > svg { filter: drop-shadow(0 calc(4 * var(--cm)) calc(6 * var(--cm)) rgba(0, 0, 0, .6)); }
.tela__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.tela__btn .h { fill: url(#pc-face); stroke: url(#pc-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tela__btn .h2 { fill: url(#pc-face-2); stroke: url(#pc-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tela__btn .d { fill: none; stroke: rgba(250,239,239,.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tela__btn .scr-off { fill: var(--scr-off); }
.tela__btn .scr-edge { fill: none; stroke: rgba(250,239,239,.18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tela__btn.is-on-self { filter: drop-shadow(0 0 calc(26 * var(--cm)) rgb(var(--spill) / .55)); }
.tela__fig .person { fill: none; stroke: rgba(250,239,239,.4); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.tela__fig .dim { fill: none; stroke: rgba(250,239,239,.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tela__fig { position: absolute; inset: 0; }

/* The participant's phone: a modern handset at true scale (7,2 × 14,7 cm), in the hand */
.tela__btn--phone { position: absolute; left: calc(49.4 * var(--cm)); top: calc(82 * var(--cm)); width: calc(7.2 * var(--cm)); height: calc(14.7 * var(--cm)); }
.tela__btn--phone::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(48px, 100%); height: max(48px, 100%); transform: translate(-50%, -50%); }   /* ≥ 44 px touch target */
.tela__btn--phone > svg { filter: drop-shadow(0 0 calc(5 * var(--cm)) rgb(var(--app-acc-rgb) / .4)); }
.tela__btn--phone.is-on-self { filter: drop-shadow(0 0 12px rgb(var(--app-acc-rgb) / .8)); }
.tela__btn--phone .ph-body { fill: #151113; stroke: rgba(255,236,230,.32); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tela__callout { position: absolute; left: calc(57.5 * var(--cm)); top: calc(76 * var(--cm)); display: flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; line-height: 1; color: var(--app-soft); white-space: nowrap; pointer-events: none; }
.tela__callout::before { content: ""; width: 14px; height: 1px; background: currentColor; opacity: .7; }
.tela__dimlabel { position: absolute; left: 0; top: -24px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

.tela__label { width: 0; min-width: 100%; border-top: 1px solid var(--floor); padding: 14px 4px 0 calc(var(--tm) * var(--cm)); display: grid; gap: 4px; align-content: start; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11.5px; line-height: 1.3; }
.tela__label .nm { color: var(--text-2); transition: color var(--d-ui); }
.tela__label .dm { color: var(--text-3); white-space: normal; overflow-wrap: anywhere; }
.tela__label .dm .nw { white-space: nowrap; }
.tela.is-on .tela__label .nm { color: var(--text); }
.tela.is-on .tela__label .nm::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--text); margin-right: 7px; vertical-align: .08em; }
.tela__group { width: 0; min-width: 100%; align-self: end; height: 22px; position: relative; }
.tela__group::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(250,239,239,.18); }
.tela__group.first::after { left: calc(var(--tm) * var(--cm)); }
.tela__group.last::after, .tela__group.gap::after { right: calc(var(--tm) * var(--cm)); }
.tela__group.first::before { content: ""; position: absolute; bottom: 0; left: calc(var(--tm) * var(--cm)); width: 1px; height: 8px; background: rgba(250,239,239,.34); }
.tela__group.last::before { content: ""; position: absolute; bottom: 0; right: calc(var(--tm) * var(--cm)); width: 1px; height: 8px; background: rgba(250,239,239,.34); }
.tela__group span { position: absolute; left: calc(var(--tm) * var(--cm)); top: 0; white-space: nowrap; font-family: var(--f-label); font-stretch: 150%; font-weight: 500; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-3); }
.tela__label .scale { display: grid; justify-items: start; gap: 4px; margin-top: 6px; color: var(--text-3); white-space: nowrap; }
.scalebar { display: inline-block; width: calc(50 * var(--cm)); height: 6px; border: 1px solid rgba(250,239,239,.36); border-top: 0; position: relative; }
.scalebar::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 3px; background: rgba(250,239,239,.36); }
.scalebar-l { font-family: var(--f-mono); font-stretch: 87.5%; font-weight: 400; font-size: 11.5px; }
.drag-hint { display: none; }

/* Readout: preview (1–4) · what's on screen (5–8) · where it ran (9–12), vertically centred on each other */
.readout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; align-items: start; margin-top: clamp(40px, 4vw, 56px); padding-top: 32px; border-top: 1px solid var(--edge); }
.ro-preview { grid-column: 1 / span 4; height: 224px; display: flex; align-items: center; justify-content: center; min-width: 0; }
.ro-screen { position: relative; height: 100%; max-width: 100%; aspect-ratio: var(--ar); background: var(--bezel); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); box-shadow: 0 0 44px rgb(var(--spill, 214 196 170) / .35); }
.ro-screen.is-wide { height: auto; width: 100%; }
.ro-screen.is-phone { clip-path: none; border-radius: 13% / 6%; background: linear-gradient(160deg, #3B3336, #151113 32%, #0E0B0D 70%, #2E272A); box-shadow: inset 0 0 0 1px rgba(255,236,230,.16), 0 0 48px rgb(var(--app-acc-rgb) / .28); }
.ro-screen.is-phone > img { inset: 3.4% 3.6%; width: 92.8%; height: 93.2%; border-radius: 10% / 4.9%; }
.ro-screen::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; background: linear-gradient(90deg, rgba(255,163,168,0), var(--gold) 16%, var(--red) 84%, rgba(255,111,150,.2)); }
.ro-screen.is-phone::before { display: none; }
.ro-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-motion="full"] .ro-screen.is-cut > * { animation: scan-in 260ms steps(8, end) both; }
@keyframes scan-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.readout__now { grid-column: 5 / span 4; margin: 0; display: grid; gap: 8px; align-content: start; padding-top: 44px; }
.readout__now .g-label { display: flex; align-items: center; gap: 9px; color: var(--text-2); }
.readout__name { font-family: var(--f-display); font-weight: 620; font-variation-settings: "SHRP" 100; color: var(--text); font-size: 1.5rem; line-height: 1.1; letter-spacing: -.015em; }
.readout__dims { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; line-height: 1.6; color: var(--text-3); }
.readout__proj { grid-column: 9 / span 4; margin: 0; display: grid; gap: 8px; align-content: start; padding-top: 44px; }
.readout__proj p { margin: 0; color: var(--text-2); font-size: 1rem; line-height: 1.5; max-width: 52ch; }
.readout__proj a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--text);   /* 44 px tall hit area, line box unchanged */ text-decoration: underline; text-decoration-color: var(--edge-2); text-underline-offset: 4px; }
.readout__proj a:hover { text-decoration-color: var(--text-2); }
/* (dashed tag removed r3) */ .readout .tag { display: inline-block; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 10.5px; color: var(--text-2); border: 1px dashed rgba(250,239,239,.3); padding: 3px 6px; vertical-align: .1em; }

/* ---------- App do evento: the participant's phone, in detail ---------- */
.app { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 40px; align-items: center; margin-top: clamp(72px, 8vw, 120px); padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--edge); }
.app__stage { grid-column: 1 / span 6; position: relative; display: grid; place-items: center; gap: 26px; padding-block: 24px; min-height: 0; }
.app__stage::before { /* the screen's own warm light pooled on the floor under the handset */
  content: ""; position: absolute; left: 50%; bottom: 6%; width: min(460px, 90%); height: 30%; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 60%, rgb(var(--app-acc-rgb) / .16), rgb(var(--app-acc-rgb) / 0) 70%); pointer-events: none; }
.app__label { order: 2; display: flex; align-items: center; gap: 9px; margin: 0; color: var(--text-3); }
.app__label .g-tally { background: var(--app-acc); }
.app__text { grid-column: 7 / span 6; display: grid; gap: 18px; justify-items: start; }
.app__text .g-label { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.app__text .g-label::before { content: ""; width: 24px; height: 1px; background: var(--text-3); }
.app__text h3 { margin: 0; font-size: clamp(1.75rem, 1rem + 1.4vw, 2.5rem); line-height: 1.02; letter-spacing: -.028em; max-width: 16ch; text-wrap: balance; }
.app__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.app__cap .g-mono { color: var(--app-soft); }
.app__text p { margin: 0; max-width: 48ch; color: var(--text-2); }
/* The five screens, as a list that is also the phone's remote: the one on screen is lit, a hairline fills while it plays */
.app__feat { list-style: none; width: 100%; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--edge); counter-reset: scr; }
.app__feat li { border-bottom: 1px solid var(--edge); }
.app__feat li[hidden] { display: none; }
.app__feat button { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: baseline; width: 100%; min-height: 48px; margin: 0; padding: 13px 0 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.app__feat b { font-family: var(--f-label); font-stretch: 130%; font-weight: 500; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); transition: color var(--d-ui) var(--ease-out); }
.app__feat span { font-size: .9375rem; line-height: 1.45; color: var(--text-2); transition: color var(--d-ui) var(--ease-out); }
.app__feat i { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--app-acc); transform: scaleX(0); transform-origin: 0 50%; }
.app__feat button[aria-pressed="true"] b { color: var(--app-acc); }
.app__feat button[aria-pressed="true"] span { color: var(--text); }
.app__feat button[aria-pressed="true"] i { transform: scaleX(1); }
.app.is-cycling .app__feat button[aria-pressed="true"] i { animation: app-dwell 3200ms linear both; }
@keyframes app-dwell { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.app__feat button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .app__feat button:hover b { color: var(--text); } .app__feat button:hover span { color: var(--text); } }

/* The handset: a modern phone, drawn as one object from --pw. Screen 9 : 19.5, a thin even bezel, a warm dark
   titanium frame with a soft lit edge, the camera island, and the side keys. */
.phone {
  --pw: clamp(256px, 21vw, 296px);
  --fr: calc(var(--pw) * .016);          /* frame (metal band) */
  --bz: calc(var(--pw) * .03);           /* bezel (black glass) */
  --r: calc(var(--pw) * .16);            /* outer corner radius */
  position: relative; width: var(--pw); padding: var(--fr); border-radius: var(--r);
  background: linear-gradient(155deg, #5A4F53 0%, #2A2326 14%, #171214 40%, #120E10 64%, #2B2427 88%, #4A4044 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 230, .16),
    inset 0 1px 1px rgba(255, 255, 255, .22),
    0 1px 0 rgba(255, 236, 230, .06),
    0 60px 90px -40px rgba(0, 0, 0, .9),
    0 24px 40px -24px rgba(0, 0, 0, .7),
    0 0 110px rgb(var(--app-acc-rgb) / .10);
}
.phone__glass { position: relative; padding: var(--bz); border-radius: calc(var(--r) - var(--fr)); background: #050304; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.phone__screen { position: relative; aspect-ratio: 9 / 19.5; border-radius: calc(var(--r) - var(--fr) - var(--bz)); overflow: hidden; background: var(--app-bg); isolation: isolate; }
.phone__screen::after { /* the glass: a faint sweep of light over the screen */ content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.07), rgba(255,255,255,0) 30%); }
.phone__island { position: absolute; z-index: 4; left: 50%; top: calc(var(--bz) + var(--pw) * .028); width: 29%; height: calc(var(--pw) * .082); transform: translateX(-50%); border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.phone__island::after { /* the camera lens */ content: ""; position: absolute; right: 14%; top: 50%; width: calc(var(--pw) * .036); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2B3440 0 22%, #0B0E13 60%); }
.phone__key { position: absolute; width: calc(var(--pw) * .012); border-radius: 2px; background: linear-gradient(90deg, #1A1517, #4A4044 60%, #2A2326); }
.phone__key--a { left: calc(var(--pw) * -.009); top: 17%; height: 4.4%; }
.phone__key--v1 { left: calc(var(--pw) * -.009); top: 24.5%; height: 8.2%; }
.phone__key--v2 { left: calc(var(--pw) * -.009); top: 34.5%; height: 8.2%; }
.phone__key--p { right: calc(var(--pw) * -.009); top: 27%; height: 12.5%; transform: scaleX(-1); }
.phone__screen > .app-sa { position: absolute; inset: 0; z-index: 1; opacity: 1; transition: opacity 560ms var(--ease-fold); }
.phone__screen > .app-sa + .app-sa { z-index: 2; }
.phone__screen > .app-sa.is-entering { opacity: 0; }

/* ---------- Como roda (stack) ---------- */
.rider { margin-top: clamp(72px, 8vw, 120px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 18px; padding-top: 18px; border-top: 1px solid var(--edge); }
.rider__head { grid-column: 1 / span 3; }
.rider__head .g-label { color: var(--text-2); margin: 0; }
.rider__head p:not(.g-label) { margin: 10px 0 0; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.rider dl { grid-column: 4 / span 9; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 1px solid var(--edge); }
.rider dl > div { display: grid; grid-template-columns: 136px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--edge); }
.rider dt { font-family: var(--f-label); font-stretch: 130%; font-weight: 500; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); padding-top: 3px; }
.rider dd { margin: 0; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12.5px; line-height: 1.55; color: var(--text); }

/* ---------- End cap ---------- */
.tb-end { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: end; padding-top: 28px; border-top: 1px solid var(--edge-2); }
.tb-end__t { grid-column: 1 / span 7; }
.tb-end__t .g-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.tb-end__t .g-eyebrow::before { content: ""; width: 24px; height: 1px; background: linear-gradient(90deg, var(--gold), var(--red)); }
.tb-end__t h2 { margin: 0; text-wrap: balance; max-width: 14ch; }
.tb-end__cta { grid-column: 9 / span 4; min-width: 0; display: grid; gap: 22px; justify-items: start; }
.tb-end__cta p { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--text-2); max-width: 36ch; }
.tb-end__links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; max-width: 380px; }
.tb-end__links .g-btn { justify-content: space-between; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .tb-end__t { grid-column: 1 / span 6; }
  .tb-end__cta { grid-column: 7 / span 6; }
}
@media (max-width: 1023px) {
  .readout { align-items: start; }
  .readout__now, .readout__proj { padding-top: 0; }
  .ro-preview { grid-column: 1 / span 4; grid-row: 1 / span 2; }
  .readout__now, .readout__proj { grid-column: 6 / span 7; }
  .rider__head, .rider dl { grid-column: 1 / -1; }
  .app__stage { grid-column: 1 / span 6; }
  .app__text { grid-column: 7 / span 6; }
  .tb-end__t, .tb-end__cta { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .tb-group__head h3, .tb-group__head p { grid-column: 1 / -1; }
  .tb-group__head p { justify-self: start; text-align: left; margin-top: 8px; }
}
/* Below 1180 px the lineup keeps one scale and scrolls sideways, with the person pinned at the left edge. */
@media (max-width: 1179px) {
  :root { --cm: 1.1px; }
  .lineup-scroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: calc(72 * var(--cm) + var(--margin)); scrollbar-width: none; margin-top: 28px; }
  .lineup-scroll::-webkit-scrollbar { display: none; }
  .lineup-row { margin: 0; padding: 0 var(--margin) 0 0; }
  .lineup { padding-top: 56px; margin-top: -56px; }
  .lineup-scroll.is-scrolled .lineup {
    -webkit-mask-image: linear-gradient(90deg, transparent var(--sx), #000 calc(var(--sx) + min(44px, var(--sx))));
            mask-image: linear-gradient(90deg, transparent var(--sx), #000 calc(var(--sx) + min(44px, var(--sx))));
  }
  .tela { scroll-snap-align: start; }
  .tela__label .dm { white-space: normal; }
  .tela--human { position: sticky; left: 0; z-index: 3; padding-left: var(--margin); background: linear-gradient(90deg, var(--ink) 70%, rgba(11,13,16,0)); }
  .drag-hint { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11px; color: var(--text-3); }
}
@media (max-width: 480px) {
  .tb-end__long { display: none; }   /* "Ver o case →": the full label does not fit with its arrow */
}
@media (max-width: 720px) {
  .app__stage, .app__text { grid-column: 1 / -1; }
  .phone { --pw: min(248px, 66vw); }
}
@media (max-width: 640px) {
  :root { --cm: 1.2px; --gutter: 16px; }
  .readout__name { font-size: 1.25rem; }
  .ro-preview, .readout__now, .readout__proj { grid-column: 1 / -1; grid-row: auto; }
  .ro-preview { height: 180px; }
  .readout__now, .readout__proj { padding-top: 0; }
  .rider dl { grid-template-columns: minmax(0, 1fr); }
  .rider dl > div { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 12px 0 13px; }
  .app__feat { grid-template-columns: minmax(0, 1fr); }
  .tb-end__links { max-width: none; }
}

/* Round 3 · every screen is a designed screen (modules/screen-art.js) */
.tela__btn .tela__sa-in { position: absolute; display: block; }
.tela__btn .tela__sa { position: absolute; display: block; background: #060A16; pointer-events: none; opacity: .5; transition: opacity 240ms var(--ease-out); }
.tela__btn.is-on-self .tela__sa, .tela__btn--phone .tela__sa { opacity: 1; }
@media (hover: hover) { .tela__btn:hover .tela__sa { opacity: .85; } }
.ro-screen > .ro-sa { position: absolute; inset: 0; }
.ro-screen.is-phone > .ro-sa { inset: 3.4% 3.6%; border-radius: 10% / 4.9%; }

/* Lenis (desktop, fine pointer, full motion only) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
#chips { scroll-margin-top: 88px; }

/* Header at phone widths: the shared CTA + menu don't fit beside the logo at 390 px (same override as home.css;
   should move to lib/site.css) */
@media (max-width: 1023px) { .s-header .g-btn { min-height: 44px; } }
@media (max-width: 440px) {
  .s-header { gap: 8px; }
  .s-header .g-btn { padding: 0 11px; letter-spacing: .1em; font-size: .625rem; min-height: 44px; height: auto; }
  .s-header__end { gap: 2px; }
  .s-header__logo img { width: 96px; }
}

/* ---------- Brand detail (round 4): the chosen brand, above its projects ----------
   logo tile (1–3) · what we built, the event(s), the projects, links (4–8) · facts (9–12) */
.bd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: start;
  margin-top: clamp(40px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--edge-2); }
.bd[hidden] { display: none; }
.bd__id { grid-column: 1 / span 3; }
.bd__logo { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; container-type: size; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--edge);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.bd__logo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(255,163,168,0), var(--gold) 16%, var(--red) 84%, rgba(255,111,150,.2)); }
.bd__logo img { height: calc(var(--lh) * .92cqh); width: auto; max-width: 72%; object-fit: contain; }
.bd__logo img.is-bv { filter: brightness(0) invert(1); }
.bd__word { font-family: var(--f-label); font-stretch: 150%; font-weight: 600; font-size: clamp(11px, 12cqh, 15px); letter-spacing: .26em; text-transform: uppercase; color: var(--text); text-align: center; padding: 0 10%; }
.bd__txt { grid-column: 4 / span 5; min-width: 0; display: grid; gap: 14px; justify-items: start; }
.bd__eyebrow { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--text-2); }
.bd__name { margin: 0; font-family: var(--f-display); font-weight: 620; font-variation-settings: "SHRP" 100; color: var(--text); font-size: clamp(1.9rem, 1rem + 1.8vw, 2.75rem); line-height: 1; letter-spacing: -.032em; text-wrap: balance; }
.bd__sum { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--text); max-width: 50ch; text-wrap: pretty; }
.bd__meta { margin: 0; display: grid; gap: 6px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; line-height: 1.55; color: var(--text-3); max-width: 60ch; }
.bd__meta b { color: var(--text-2); font-weight: 500; }
.bd__pend { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bd__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.bd__all { min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--text-2); font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; text-decoration: underline; text-decoration-color: var(--edge-2); text-underline-offset: 4px; cursor: pointer; }
.bd__all:hover { color: var(--text); text-decoration-color: var(--signal); }
.bd__all:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.bd__facts { grid-column: 9 / span 4; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); border-top: 1px solid var(--edge); }
.bd__facts > div { padding: 14px 0 12px; border-bottom: 1px solid var(--edge); display: grid; gap: 6px; align-content: start; }
.bd__facts dd { margin: 0; order: -1; font-family: var(--f-display); font-weight: 620; font-variation-settings: "SHRP" 100; color: var(--text); font-size: clamp(1.6rem, 1rem + 1.2vw, 2.25rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd__facts dt { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11.5px; color: var(--text-3); line-height: 1.35; }
.bd__facts > div:only-child, .bd__facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bd__links .g-btn { max-width: 100%; }
.bd__lblw { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bd__lbl--s { display: none; }
/* DOBRA: the panel unfolds from its top-left crease when a brand is chosen */
html[data-motion="full"] .bd.is-in { animation: bd-in 560ms var(--ease-fold) both; }
@keyframes bd-in { from { clip-path: polygon(0 0, 0 0, 0 0); } to { clip-path: polygon(0 0, 300% 0, 0 300%); } }
.is-filtered #destaque { padding-top: clamp(56px, 6vw, 88px); }
@media (max-width: 1023px) {
  .bd__id { grid-column: 1 / span 4; }
  .bd__txt { grid-column: 5 / -1; }
  /* one column per fact (2–4), so an odd count never leaves an empty cell */
  .bd__facts { grid-column: 1 / -1; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .bd__facts > div:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 640px) {
  .bd { row-gap: 20px; }
  .bd__id { grid-column: 1 / span 6; }
  .bd__txt { grid-column: 1 / -1; }
  .bd__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd__facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bd__links .g-btn { width: 100%; justify-content: space-between; gap: 16px; padding: 0 20px; }
  .bd__links .g-btn .g-arrow { flex: none; }
  /* Phone: summary → facts → CTA → reset. Flatten the text column so the facts can sit before the links. */
  .bd__txt { display: contents; }
  .bd__txt > * { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
  .bd__txt > .bd__links { justify-self: stretch; }
  .bd__facts { order: 1; }
  .bd__txt > .bd__links { order: 2; }
  .app__feat button { grid-template-columns: 88px 1fr; gap: 12px; }
}
@media (max-width: 420px) {
  .bd__lbl { display: none; }
  .bd__lbl--s { display: inline; }
}

/* ---------- Qualquer tela below 1100 px: one card per device (round 8) ----------
   ≥ 1100 px the to-scale row stays. Narrower, the row, its hint and the readout give way to cards: each device
   as large as its card allows, in its true proportions, standing on the card's floor line. */
.tcards-wrap { display: none; }
@media (max-width: 1099px) {
  .lineup-scroll, .drag-hint, .readout { display: none; }
  .tcards-wrap { display: block; width: 100%; max-width: var(--maxw); margin: 36px auto 0; padding: 0 var(--margin); --stage: 380px; }
  .tcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
  .tcard { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: linear-gradient(180deg, rgba(250,239,239,.035), rgba(250,239,239,.012)); border: 1px solid var(--edge);
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
  .tcard__stage { position: relative; height: var(--stage); padding: 28px 20px 0; display: flex; align-items: flex-end; justify-content: center; container-type: size; border-bottom: 1px solid var(--floor); }
  .tcard__stage::before { /* the lit screen's light, pooled on the floor */ content: ""; position: absolute; left: 50%; bottom: 0; width: 80%; height: 34%; transform: translateX(-50%);
    background: radial-gradient(ellipse 50% 40% at 50% 100%, rgb(var(--app-acc-rgb) / .14), rgb(var(--app-acc-rgb) / 0) 70%); pointer-events: none; }
  .tcard__dev { position: relative; flex: none; aspect-ratio: var(--ar); width: min(100cqw, calc(100cqh * var(--ar))); }
  .tcard__dev.is-fade1 { -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
  .tcard__dev.is-fade2 { -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent); }
  .tcard__dev > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
  .tcard__dev .h { fill: url(#pc-face); stroke: url(#pc-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .tcard__dev .h2 { fill: url(#pc-face-2); stroke: url(#pc-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .tcard__dev .d { fill: none; stroke: rgba(250,239,239,.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .tcard__dev .scr-off { fill: var(--scr-off); }
  .tcard__dev .scr-edge { fill: none; stroke: rgba(250,239,239,.18); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .tcard__dev .ph-body { fill: #151113; stroke: rgba(255,236,230,.32); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .tcard--phone .tcard__dev > svg { filter: drop-shadow(0 0 18px rgb(var(--app-acc-rgb) / .3)); }
  .tcard__sa { position: absolute; display: block; background: #060A16; overflow: hidden; }
  .tcard__sa-in { position: absolute; display: block; }
  .tcard__app { position: absolute; inset: 0; z-index: 1; transition: opacity 560ms var(--ease-fold); }
  .tcard__app + .tcard__app { z-index: 2; }
  .tcard__app.is-entering { opacity: 0; }
  .tcard__txt { display: grid; gap: 10px; align-content: start; padding: 20px 20px 24px; }
  .tcard__n { margin: 0; font-size: 11px; color: var(--text-3); }
  .tcard__name { margin: 0; font-family: var(--f-display); font-weight: 620; font-variation-settings: "SHRP" 100; color: var(--text); font-size: 1.375rem; line-height: 1.1; letter-spacing: -.015em; }
  .tcard__dims { margin: -4px 0 4px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 12px; line-height: 1.5; color: var(--text-3); }
  .tcard__dims .nw { white-space: nowrap; }
  .tcard__row { margin: 0; display: grid; gap: 5px; font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
  .tcard__row .g-label { color: var(--text-3); }
  .tcard__row a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--text); text-decoration: underline; text-decoration-color: var(--edge-2); text-underline-offset: 4px; }
  .tcards__foot { display: flex; align-items: baseline; gap: 16px; margin: 16px 0 0; font-family: var(--f-mono); font-stretch: 87.5%; font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
  .tcards__pos { display: none; }
}
@media (max-width: 599px) {
  .tcards-wrap { padding: 0; margin-top: 28px; --stage: clamp(300px, 96vw, 380px); }
  .tcards { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 0 9vw 4px; scroll-padding-inline: 9vw; }
  .tcards::-webkit-scrollbar { display: none; }
  .tcards:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .tcard { flex: 0 0 82vw; scroll-snap-align: center; }
  .tcards__foot { padding: 0 var(--margin); }
  .tcards__pos { display: inline; flex: none; color: var(--text-2); }
  .tcards__pos b { font-weight: 500; color: var(--text); }
  .tcard__n { display: none; }
}

/* Footer touch targets: 44 px minimum on touch screens (mirrors lib/site.css footer). */
@media (pointer: coarse) {
  .s-footer__nav, .s-footer__meta { gap: 0; }
  .s-footer__nav a, .s-footer__meta > a, .s-footer__meta > button,
  .s-footer__priv > a, .s-footer__priv > button { min-height: 44px; display: inline-flex; align-items: center; }
  .s-footer__priv { display: inline-flex; align-items: center; gap: 8px; }
}

/* ---------- Page entrance (round 15): one quiet sequence on load, then everything rests ----------
   Eyebrow → title rises and sharpens (FOCO) → lede → brand chips one by one → the featured case.
   Pure CSS, fill-mode backwards (no animated state lingers after it ends); reduced motion shows the page at once. */
@keyframes tb-in { from { opacity: 0; transform: translate3d(0, var(--tb-y, 14px), 0); } to { opacity: 1; transform: none; } }
@keyframes tb-title-in { from { opacity: 0; transform: translate3d(0, .32em, 0); font-variation-settings: "SHRP" 0; } to { opacity: 1; transform: none; font-variation-settings: "SHRP" 100; } }
@keyframes tb-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html[data-motion="full"] .tb-top .g-eyebrow { animation: tb-in 520ms var(--ease-out) 60ms backwards; --tb-y: 6px; }
html[data-motion="full"] .tb-top .g-eyebrow::before { transform-origin: 0 50%; animation: tb-line 620ms var(--ease-fold) 60ms backwards; }
html[data-motion="full"] .tb-title { animation: tb-title-in 900ms var(--ease-out) 140ms backwards; }
html[data-motion="full"] .tb-top .s-head__aside .g-lede { animation: tb-in 700ms var(--ease-out) 300ms backwards; --tb-y: 10px; }
html[data-motion="full"] #chips .wk-chip { animation: tb-in 560ms var(--ease-out) calc(420ms + var(--ci, 0) * 40ms) backwards; --tb-y: 10px; }
html[data-motion="full"] #destaque { animation: tb-in 900ms var(--ease-out) 620ms backwards; --tb-y: 24px; }