/* Skills invoked: council-process, creative-director, frontend-design, taste-skill */
/* ==========================================================================
   OFICINA · design system for nelsonporto.com.br (orchestrator pass 2, 2026-09-05)

   Palette: papel #f1efe6 (ground), papel-2 #e7e2d2 (hover ground), tinta #121110,
   tinta-2 #4a453a (soft ink), ocre #a8760a (sampled from A Superfície da Água).
   Type: Bricolage Grotesque (display, variable 200..800) · IBM Plex Sans (text, and since 2026-09-14 the labels,
         numbers and captions too: Nelson, "Forever stop using these monospaced fonts"). All self-hosted (fonts.css).
   Pass 2 rulings (Nelson): moderate image sizes (never gigantic, never small),
   nothing shown above its own resolution, no letterbox on content, name small,
   text-forward dossiers with facts and tags, layout variation, less scrolling.
   Motion: 800ms cubic-bezier(.4,0,.2,1) for the page family, .3s for interface
   states; one CSS page-load choreography that starts on paint and ends visible.
   Laws: images at natural ratio, never cropped (no cover fitting, no fixed
   image heights); no colored bars; no gradients on surfaces.
   ========================================================================== */

/* fonts/fonts.css is linked from <head> (a serial @import cost one round-trip; audit of 2026-09-07) */

:root {
  --papel: #f1efe6;
  --papel-2: #e7e2d2;
  --tinta: #121110;
  --tinta-2: #4a453a;
  --ocre: #a8760a;
  --ocre-2: #8a6108;
  --linha: rgba(18, 17, 16, 0.14);
  --linha-2: rgba(18, 17, 16, 0.34);

  --f-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --f-text: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-label: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;   /* labels, meta, numbers: the text face (Nelson, 2026-09-14: no monospaced face) */

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 800ms;
  --dur-ui: 0.3s;

  --gutter: clamp(20px, 4vw, 64px);
  --col-max: 1680px;
  --header-h: 72px;
  --jgap: clamp(14px, 1.8vw, 28px);

  --sz-body: clamp(16px, 1.05vw, 18px);
  --sz-label: 0.74rem;   /* capitals: eyebrows, labels, buttons */
  --sz-meta: 0.8rem;     /* sentence case: meta lines, years, numbers */
  --sz-h1: clamp(2.4rem, 5vw, 5rem);
  --sz-h2: clamp(1.8rem, 3.6vw, 3.4rem);
  --sz-h3: clamp(1.3rem, 2vw, 1.75rem);
  --sz-logline: clamp(1.15rem, 1.6vw, 1.5rem);
  --sz-pull: clamp(1.4rem, 2.4vw, 2.1rem);
}

/* ---- reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papel); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-text);
  font-size: var(--sz-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
:focus-visible { outline: 2px solid var(--ocre); outline-offset: 3px; }
::selection { background: var(--ocre); color: var(--papel); }

.num { font-family: var(--f-label); }   /* figures in cells: the text face, whose figures are tabular */
.wrap { max-width: var(--col-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* language toggle: PT is the document default */
.lang-en:not(body) { display: none; } /* the English spans; the body of an English page carries the same class and is excluded (the English pages came up blank, 2026-09-08) */
body.lang-en .lang-pt { display: none; }
body.lang-en .lang-en { display: inline; }
body.lang-en .lang-en.block, body.lang-pt .lang-pt.block { display: block; }
body.lang-en div.lang-en, body.lang-en .def.lang-en { display: block; }
body.lang-pt div.lang-en, body.lang-pt .def.lang-en { display: none; }
body.lang-en div.lang-pt, body.lang-en .def.lang-pt { display: none; }

/* cross-document page transition (Chrome 126+, progressive) */
/* the cross-document view transition left the next page stuck mid-fade in Safari (the English page came up blank on 2026-09-08); pages cut, they no longer cross-fade */

/* ---- type roles ------------------------------------------------------ */
.eyebrow { font-family: var(--f-label); font-weight: 600; font-size: var(--sz-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ocre); }
.meta { font-family: var(--f-label); font-weight: 400; font-size: var(--sz-meta); letter-spacing: 0.01em; color: var(--tinta-2); }
.label { font-family: var(--f-label); font-weight: 600; font-size: var(--sz-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ocre); }
.chip {
  display: inline-block;
  font-family: var(--f-label);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--linha-2);
  padding: 0.3em 0.6em;
  color: var(--tinta);
  white-space: nowrap;
}
.chip--award { border-color: var(--tinta); }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tags--filter { margin-top: 1.4rem; }
.tags--filter .chip { cursor: pointer; transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
.tags--filter .chip:hover, .tags--filter .chip.is-active { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.h2 { font-family: var(--f-display); font-weight: 800; font-size: var(--sz-h2); line-height: 0.98; letter-spacing: -0.025em; }
.h3 { font-family: var(--f-display); font-weight: 700; font-size: var(--sz-h3); line-height: 1.08; letter-spacing: -0.015em; }
.h3 .meta { margin-left: 0.6rem; font-weight: 400; }
.prose { max-width: 66ch; }
.prose p + p { margin-top: 1em; }
.prose strong { font-weight: 600; }
.pull {
  position: relative;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: var(--sz-pull);
  line-height: 1.22;
  letter-spacing: -0.015em;
  max-width: 30ch;
  padding-left: 1.1em;
}
.pull::before { content: "\201C"; position: absolute; left: 0; top: -0.08em; color: var(--ocre); font-weight: 800; }
.pull .lang-pt, .pull .lang-en { display: block; }
body.lang-en .pull .lang-pt { display: none; }
body.lang-pt .pull .lang-en { display: none; }
.press { font-family: var(--f-text); font-style: italic; max-width: 60ch; padding-left: 1.1em; position: relative; }
.press::before { content: "\201C"; position: absolute; left: 0; top: 0; color: var(--ocre); font-style: normal; font-weight: 700; }
.src { display: block; margin-top: 0.5rem; font-size: 0.64rem; }
.link-u { position: relative; display: inline-block; }
/* a name that links (Eduardo Calvet, Pindorama Filmes; Nelson, 2026-09-09): the text keeps its colour, a hairline under it, ochre on hover */
.name-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--linha-2); text-underline-offset: 0.16em; transition: color var(--dur-ui) var(--ease); }
.name-link:hover { color: var(--ocre); text-decoration-color: currentColor; }
.link-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-ui) var(--ease); }
.link-u:hover::after, .link-u:focus-visible::after { transform: scaleX(1); }
.block-actions { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: baseline; margin-top: 1.2rem; }
.block-actions a, .block-actions button { font-family: var(--f-label); font-weight: 600; font-size: var(--sz-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ocre); }
.block-actions button { padding: 0; border: 0; background: none; cursor: pointer; line-height: inherit; }  /* the button sits on the link's baseline (Nelson, 2026-09-09: "align these two elements") */
.block-actions--col { flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }

/* ---- header ---------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--papel); border-bottom: 1px solid var(--linha); }
.site-header__row { max-width: var(--col-max); margin: 0 auto; padding: 0 var(--gutter); min-height: var(--header-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; }
.brand { display: flex; align-items: baseline; gap: 1rem; white-space: nowrap; }
.brand__name { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; letter-spacing: 0.01em; text-transform: uppercase; }
.brand__tag { color: var(--tinta-2); }
.doors { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.doors a { font-family: var(--f-label); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; position: relative; padding-bottom: 3px; }
.doors a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--tinta); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-ui) var(--ease); }
.doors a:hover::after, .doors a:focus-visible::after { transform: scaleX(1); }
.doors a[aria-current="page"] { color: var(--ocre); }
.doors a[aria-current="page"]::after { background: var(--ocre); transform: scaleX(1); }
.header__aux { display: flex; align-items: center; gap: 0.75rem; }
.header__aux > * { flex-shrink: 0; }
.lang-toggle { font-family: var(--f-label); font-weight: 600; font-size: 0.70rem; letter-spacing: 0.08em; white-space: nowrap; border: 1px solid var(--tinta); padding: 0.45em 0.7em; transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
.lang-toggle:hover { background: var(--tinta); color: var(--papel); }
.nav-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--tinta); flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { display: block; width: 16px; height: 1px; background: var(--tinta); transition: transform var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.drawer { position: fixed; inset: 0; z-index: 90; background: var(--papel); padding: calc(var(--header-h) + 16px) var(--gutter) 2rem; display: flex; flex-direction: column; transform: translateY(-100%); visibility: hidden; transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
.drawer.is-open { transform: translateY(0); visibility: visible; transition: transform var(--dur) var(--ease); }
.drawer li { border-bottom: 1px solid var(--linha); }
.drawer a { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.7rem, 7vw, 2.4rem); letter-spacing: -0.02em; }
.drawer a .meta { font-size: 0.66rem; }
.drawer a[aria-current="page"] { color: var(--ocre); }
.drawer__foot { margin-top: auto; padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
@media (max-width: 1400px) { .brand__tag { display: none; } }
@media (max-width: 900px) { .site-header__row { grid-template-columns: auto auto; justify-content: space-between; } .doors { display: none; } .nav-toggle { display: flex; } }
@media (max-width: 374px) {   /* phones under 375 px: the gaps and the name give way, the controls keep their shape (2026-09-15) */
  .site-header__row { gap: 0.75rem; } .brand { gap: 0.6rem; } .header__aux { gap: 0.5rem; }
  .brand__name { font-size: clamp(1.02rem, 5.6vw, 1.3rem); }
}
@media (min-width: 901px) { .drawer { display: none; } }

/* ---- home: compact opening ------------------------------------------- */
.hero { padding-top: clamp(28px, 4vh, 56px); padding-bottom: clamp(16px, 2vh, 28px); }
.hero__eyebrow { display: block; margin-bottom: 0.9rem; }
.hero__name { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.8rem, 6.4vw, 5.4rem); line-height: 0.94; letter-spacing: -0.03em; text-transform: uppercase; }
.hero__heading { margin-top: 0.7rem; font-family: var(--f-display); font-weight: 600; font-size: var(--sz-h2); line-height: 1.02; letter-spacing: -0.02em; max-width: 26ch; }
.hero__meta { margin-top: 0.9rem; font-family: var(--f-label); font-weight: 500; font-size: var(--sz-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero > * { animation: rise var(--dur) var(--ease-out) both; }
.hero > :nth-child(2) { animation-delay: 0.08s; }
.hero > :nth-child(3) { animation-delay: 0.16s; }
.feat { animation: rise var(--dur) var(--ease-out) both; animation-delay: 0.28s; }
@media (prefers-reduced-motion: reduce) { .hero > *, .feat { animation: none; } }

/* ---- the opening: the home, once a visit, his mark drawn in ink on the paper; then it flies into the hero's monogram and the page
   appears (Nelson, 2026-09-11: "show me the version where the mark shrinks into the logo"). Two layers in the page's own stacking: the
   paper, which lifts, and the film (the ink on white) multiplied into whatever lies under it, so it matches the paper exactly and shows
   nothing of itself over the page as it flies. */
.abertura { display: none; }
.com-abertura .abertura { display: block; }
.abertura__papel { position: fixed; inset: 0; z-index: 500; background: var(--papel); }
.abertura__marca { position: fixed; inset: 0; z-index: 501; margin: auto; width: min(78vmin, 760px); height: min(78vmin, 760px);
  mix-blend-mode: multiply; transform-origin: 50% 50%; pointer-events: none; }
.com-abertura .brand__mark--hero { opacity: 0; }

/* ---- between pages: the page fades to the paper and the next one fades in, the header staying where it is (Nelson, 2026-09-11:
   "a smooth fading effect between pages when we click ... very smooth"). The browser's own view transitions (Chrome, Edge, Safari);
   elsewhere the page simply changes. For everyone, whatever the system's motion settings (Nelson, 2026-09-11: "A", the full bypass). */
@view-transition { navigation: auto; }
.site-header { view-transition-name: np-cabecalho; }
::view-transition-old(root) { animation: np-some 220ms cubic-bezier(.4, 0, 1, 1) both; }          /* out to the paper, */
::view-transition-new(root) { animation: np-surge 440ms cubic-bezier(0, 0, .2, 1) 200ms both; }   /* then in, touching it: no empty frame */
::view-transition-old(np-cabecalho), ::view-transition-new(np-cabecalho) { animation: none; mix-blend-mode: normal; }
::view-transition-old(np-cabecalho) { opacity: 0; }                                                 /* the header: the new one at once, */
::view-transition-new(np-cabecalho) { opacity: 1; }                                                 /* never two headers blended */
@keyframes np-some { to { opacity: 0; } }
@keyframes np-surge { from { opacity: 0; } }

/* featured work: one random video per visit, beside its context */
.feat { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; padding-top: clamp(16px, 2vh, 28px); padding-bottom: clamp(32px, 5vh, 64px); border-bottom: 1px solid var(--linha-2); }
.feat__media img, .feat__media video { width: 100%; height: auto; }
.feat__panel { display: grid; gap: 0.7rem; align-content: start; padding-top: 0.2rem; }
.feat__title { font-family: var(--f-display); font-weight: 800; font-size: var(--sz-h2); line-height: 0.98; letter-spacing: -0.025em; }
.feat__title a:hover { color: var(--ocre); }
.feat__text { margin-top: 0.4rem; }
.feat__text p { display: block; }  /* the whole text, so the line about his work after the film text shows (Nelson, 2026-10-09: "first the movie, then what I did"; it was clamped at six lines) */
@media (max-width: 900px) { .feat { grid-template-columns: 1fr; } }

/* 404 "Porta": the number large, then the doors and the complete works index with year and area (Nelson, 2026-09-08: "the minimalist 404 with the large 404. o erro é uma porta.") */
.lost { padding-bottom: clamp(24px, 4vh, 48px); }
.page-head .lost__num { font-family: var(--f-display); font-weight: 800; font-size: clamp(6.5rem, 20vw, 17rem); line-height: 0.84; letter-spacing: -0.05em; margin-top: 0.15em; }
.lost__line { margin-top: 1.4rem; max-width: 34ch; }
.lost-block { padding-top: clamp(32px, 5vh, 64px); }
.lost-block .doors-block__head .meta { color: var(--tinta-2); }
.lost-index { columns: 3; column-gap: clamp(24px, 4vw, 64px); margin-top: 0.2rem; }
.lost-index li { break-inside: avoid; display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); column-gap: 1rem; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--linha); }
.lost-index__year { font-family: var(--f-label); font-weight: 400; font-size: var(--sz-meta); letter-spacing: 0.01em; color: var(--tinta-2); white-space: nowrap; }
.lost-index__title:hover { color: var(--ocre); }
.lost-index__door { grid-column: 2; font-family: var(--f-label); font-weight: 600; font-size: var(--sz-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ocre); margin-top: 0.15rem; }
.page-notfound .site-footer__grid { display: none; }
.page-notfound .site-footer { padding-top: 1.6rem; }
@media (max-width: 1100px) { .lost-index { columns: 2; } }
@media (max-width: 640px) { .lost-index { columns: 1; } }

/* doors: two-column compact list */
.doors-block { padding-top: clamp(32px, 5vh, 64px); }
.doors-block__head { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--linha-2); }
.doors-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
.door-row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 1.5rem; grid-template-areas: "n name arrow" "n holds arrow"; align-items: baseline; column-gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--linha); transition: background-color var(--dur-ui) var(--ease); }
.door-row:hover { background: var(--papel-2); }
.door-row__n { grid-area: n; font-family: var(--f-label); font-weight: 500; font-size: var(--sz-meta); color: var(--tinta-2); }
.door-row__name { grid-area: name; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.05; letter-spacing: -0.02em; transition: color var(--dur-ui) var(--ease); }
.door-row:hover .door-row__name { color: var(--ocre); }
.door-row__holds { grid-area: holds; font-family: var(--f-label); font-weight: 400; font-size: var(--sz-meta); letter-spacing: 0.01em; color: var(--tinta-2); margin-top: 0.25rem; }
.door-row__arrow { grid-area: arrow; font-family: var(--f-label); color: var(--tinta-2); text-align: right; transition: transform var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
.door-row:hover .door-row__arrow { transform: translateX(4px); color: var(--ocre); }
@media (max-width: 760px) { .doors-grid { grid-template-columns: 1fr; } }

/* highlights: six works, image with its title, tags and year */
.hl { padding-top: clamp(40px, 6vh, 80px); }
.hl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px) clamp(16px, 2.5vw, 40px); margin-top: 1.4rem; }
.hl__item { display: grid; gap: 0.7rem; align-content: start; }
.hl__item img, .hl__item video { width: 100%; height: auto; }
.hl__cap { display: grid; gap: 0.35rem; }
.hl__title { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.1; transition: color var(--dur-ui) var(--ease); }
.hl__item:hover .hl__title { color: var(--ocre); }
@media (max-width: 900px) { .hl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hl__grid { grid-template-columns: 1fr; } }

/* works index: two columns, compact rows */
.index { padding-top: clamp(40px, 6vh, 80px); padding-bottom: clamp(40px, 6vh, 80px); }
.index__head { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--linha-2); }
.index__cols { column-count: 2; column-gap: clamp(24px, 4vw, 48px); margin-top: 1rem; }
@media (min-width: 1200px) { .index__cols { column-count: 3; } }  /* the index in three columns on wide screens (Nelson, 2026-09-07: 'so that we don't waste so much space') */
.index-group { break-inside: avoid; margin-bottom: 1.8rem; }
.index-group__label { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0 0.5rem; border-bottom: 1px solid var(--linha-2); }
.row { display: grid; grid-template-columns: 1.6rem 3.6rem minmax(0, 1fr); align-items: center; gap: 0.7rem; padding: 0.38rem 0; border-bottom: 1px solid var(--linha); transition: background-color var(--dur-ui) var(--ease); }
.row:hover, .row:focus-visible { background: var(--papel-2); }
.row__n { font-family: var(--f-label); font-weight: 500; font-size: var(--sz-meta); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.row__thumb { width: 3.6rem; }
.row__thumb img, .row__thumb video { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }  /* every index thumbnail the same size (Nelson, 2026-09-07: 'They should all have the same size') */
.row__thumb--none { height: 1px; background: var(--linha-2); }
.row__title { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; line-height: 1.1; letter-spacing: -0.01em; transition: color var(--dur-ui) var(--ease); }
.row:hover .row__title { color: var(--ocre); }
.row__sub { display: block; margin-top: 0.2rem; font-size: 0.66rem; }
@media (max-width: 900px) { .index__cols { column-count: 1; } }

/* perfil excerpt + contact */
.perfil { padding-top: clamp(40px, 6vh, 80px); padding-bottom: clamp(40px, 6vh, 80px); border-top: 1px solid var(--linha-2); }
.perfil__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 4rem; }
@media (max-width: 900px) { .perfil__grid { grid-template-columns: 1fr; } }
.portrait { max-width: 720px; }
.contact { max-width: 44rem; }
.contact__cta { margin-top: 0.6rem; font-size: var(--sz-logline); line-height: 1.3; letter-spacing: -0.01em; }
.contact form { margin-top: 1.6rem; display: grid; gap: 1.1rem; }
.contact label { display: grid; gap: 0.4rem; }
.contact label > span { font-family: var(--f-label); font-weight: 500; font-size: var(--sz-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); }
.contact input, .contact textarea { font: inherit; color: var(--tinta); background: transparent; border: 0; border-bottom: 1px solid var(--linha-2); padding: 0.55em 0; border-radius: 0; transition: border-color var(--dur-ui) var(--ease); }
.contact input:focus, .contact textarea:focus { outline: none; border-bottom-color: var(--ocre); }
.contact textarea { min-height: 6rem; resize: vertical; }
.btn { display: inline-block; font-family: var(--f-label); font-weight: 600; font-size: var(--sz-label); letter-spacing: 0.09em; text-transform: uppercase; border: 1px solid var(--tinta); padding: 0.9em 1.4em; transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
.btn:hover, .btn:focus-visible { background: var(--tinta); color: var(--papel); }
.contact .btn { justify-self: start; }

/* ---- door and section pages ------------------------------------------ */
.page-head { padding-top: clamp(28px, 4vh, 56px); padding-bottom: clamp(16px, 2vh, 32px); }
.page-head .crumb { display: block; margin-bottom: 1rem; }
.page-head h1 { font-family: var(--f-display); font-weight: 800; font-size: var(--sz-h1); line-height: 0.96; letter-spacing: -0.03em; }
.page-head h1 + .meta { margin-top: 0.8rem; }
.crumb { font-family: var(--f-label); font-weight: 500; font-size: var(--sz-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); }
.crumb a:hover { color: var(--ocre); }
.section { padding-top: clamp(24px, 4vh, 44px); padding-bottom: clamp(24px, 4vh, 44px); border-top: 1px solid var(--linha-2); }
.section-head { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.section__texts > * + * { margin-top: 1.2rem; }
.section__texts .prose, .section__texts > p { max-width: 66ch; }
.section__texts:empty { display: none; }

/* definitions in his words */
.defs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 3rem; margin-top: 1.2rem; }
.def { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.35; letter-spacing: -0.01em; }
@media (max-width: 760px) { .defs__grid { grid-template-columns: 1fr; } }

/* work rows: image beside text, alternating sides */
.wrows { display: grid; gap: clamp(28px, 4vh, 56px); margin-top: 1.4rem; }
.wrow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; padding-top: clamp(16px, 2.5vh, 24px); border-top: 1px solid var(--linha); }
.wrow--flip .wrow__media { order: 2; }
.wrow__media img, .wrow__media video { width: 100%; height: auto; }
.wrow__media .plates { --jgap: 10px; }
.wrow__body { display: grid; gap: 0.6rem; align-content: start; }
.wrow__title { font-family: var(--f-display); font-weight: 800; font-size: var(--sz-h2); line-height: 0.98; letter-spacing: -0.025em; }
.wrow__title a:hover { color: var(--ocre); }
.wrow__text p { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.wrow__facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.wrow.is-hidden { display: none; }
@media (max-width: 800px) { .wrow { grid-template-columns: 1fr; } .wrow--flip .wrow__media { order: 0; } }

/* ---- dossier: catalogue layout ------------------------------------- */
.cat__head { padding-top: clamp(24px, 4vh, 48px); }
.cat__head .crumb { display: block; margin-bottom: 1rem; }
.cat__title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: end; }
.cat__title { font-family: var(--f-display); font-weight: 800; font-size: var(--sz-h1); line-height: 0.96; letter-spacing: -0.03em; }
.cat__title-row .tags { justify-content: flex-end; max-width: 34rem; }
.cat__strip { margin-top: 0.9rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linha-2); }
.cat__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); padding-top: clamp(20px, 3vh, 36px); }
@media (min-width: 1000px) { .cat__grid { grid-template-columns: 300px minmax(0, 1fr); } }
@media (min-width: 1400px) { .cat__grid { grid-template-columns: 340px minmax(0, 1fr); } }
.cat__aside { display: grid; gap: 0.6rem; align-content: start; }
@media (min-width: 1000px) { .cat__aside { position: sticky; top: calc(var(--header-h) + 20px); } }
/* under 1000px the story comes first and the ficha follows, folded */
@media (max-width: 999px) { .cat__aside { order: 2; } .cat__main { order: 1; } .cat__ficha:not([open]) .cat__ficha-body { display: none; } }
.cat__ficha { display: block; }
.cat__ficha summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; }
.cat__ficha summary::-webkit-details-marker { display: none; }
.cat__ficha summary::after { content: "+"; font-family: var(--f-label); color: var(--tinta-2); }
.cat__ficha[open] summary::after { content: "\2212"; }
@media (min-width: 1000px) { .cat__ficha summary::after { display: none; } .cat__ficha summary { pointer-events: none; } }
.cat__ficha-body { display: grid; gap: 0.6rem; margin-top: 0.4rem; }
.cat__ficha-body .eyebrow { margin-top: 0.8rem; }
.cat__aside .eyebrow { margin-top: 1rem; }
.cat__aside .eyebrow:first-child { margin-top: 0; }
.cat__main { display: grid; gap: clamp(28px, 4vh, 56px); align-content: start; min-width: 0; }
.cat__open { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.cat__open--series .cat__intro { order: 0; }
.cat__intro { display: grid; gap: 0.9rem; align-content: start; }
.cat__synopsis p { margin: 0; }
.cat__synopsis p + p { margin-top: 1em; }
.cat__lead img, .cat__lead video { width: 100%; height: auto; }
.cat__quote { padding: clamp(12px, 2vh, 24px) 0; }
.cat__gallery .h3 { margin-bottom: 1rem; }
@media (max-width: 900px) { .cat__open { grid-template-columns: 1fr; } .cat__title-row { grid-template-columns: 1fr; } .cat__title-row .tags { justify-content: flex-start; } }
.tx { display: grid; gap: 0.6rem; }
.tx .h3 { margin-bottom: 0.2rem; }
.tx--logline .prose p { font-size: var(--sz-logline); line-height: 1.35; letter-spacing: -0.01em; max-width: 40ch; }
.tx--notes .prose p { font-size: 0.95rem; color: var(--tinta-2); }
.tx--credits .prose p { font-family: var(--f-label); font-weight: 400; font-size: 0.86rem; }

dl.specs { display: grid; grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr); column-gap: 1rem; }
dl.specs > * { padding: 0.5rem 0; border-top: 1px solid var(--linha); min-width: 0; }
dl.specs dt { font-family: var(--f-label); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ocre); padding-top: 0.62rem; overflow-wrap: anywhere; }
dl.specs dd { font-family: var(--f-text); font-size: 0.92rem; overflow-wrap: break-word; }
@media (max-width: 640px) { dl.specs { grid-template-columns: 1fr; } dl.specs dd { border-top: 0; padding-top: 0; } }

.dossier__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: clamp(32px, 5vh, 64px); padding: 1.2rem 0 2.5rem; border-top: 1px solid var(--linha-2); }
.dossier__nav a { display: grid; gap: 0.4rem; }
.dossier__nav a:last-child { text-align: right; }
.dossier__nav .h3 { transition: color var(--dur-ui) var(--ease); }
.dossier__nav a:hover .h3 { color: var(--ocre); }

/* ---- plates: justified rows at natural ratio ------------------------ */
.plates { display: flex; flex-direction: column; gap: var(--jgap); }
.jrow { display: flex; gap: var(--jgap); align-items: flex-start; }
.jrow .plate { flex: var(--ar, 1) 1 0; min-width: 0; }
.jrow--short .plate { flex: 0 1 auto; width: calc(var(--ar, 1) * var(--h, 360px)); max-width: 100%; }
.jrow--short { flex-wrap: wrap; }
.plate__open::after { content: "\2922"; position: absolute; right: 0.5rem; bottom: 0.5rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; font-family: var(--f-label); font-size: 0.8rem; color: var(--papel); background: rgba(18, 17, 16, 0.72); opacity: 0; transition: opacity var(--dur-ui) var(--ease); pointer-events: none; }
.plate:hover .plate__open::after, .plate__open:focus-visible::after { opacity: 1; }
@media (hover: none) { .plate__open::after { opacity: 0.85; } }
.plate { position: relative; }
.plate img, .plate video { width: 100%; height: auto; }
.plate button.plate__open { display: block; width: 100%; cursor: zoom-in; }
.plate figcaption { margin-top: 0.4rem; }
.plate video { background: transparent; }
@media (max-width: 700px) { .jrow { flex-direction: column; } .jrow .plate, .jrow--short .plate { flex: 0 0 auto; width: 100%; } }
.lead img, .lead video { width: 100%; height: auto; }
.lead figcaption { margin-top: 0.5rem; }
.vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jgap); align-items: start; }
.vgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .vgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .vgrid, .vgrid--3 { grid-template-columns: 1fr; } }
.cat__below { display: grid; gap: clamp(28px, 4vh, 56px); padding-top: clamp(28px, 4vh, 56px); }
.cat__open--solo { grid-template-columns: 1fr; }
.cat__open--solo .cat__lead { max-width: 1180px; }
.index__cols.is-collapsed .index-group:nth-child(n+3) { display: none; }
.index__more { margin-top: 1rem; }

/* archive groups */
.acervo { display: grid; gap: clamp(20px, 3vh, 36px); }
.acervo__label { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }

/* ---- models (photogrammetry) ---------------------------------------- */
.models { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--jgap); }
.model { position: relative; display: grid; grid-template-rows: auto auto auto; gap: 0.3rem; }
.model__poster { width: 100%; height: auto; }
.model__label { font-family: var(--f-label); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinta); padding-top: 0.4rem; }
.model__btn { font-family: var(--f-label); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ocre); text-align: left; justify-self: start; }
.model__btn:hover { color: var(--tinta); }
.model model-viewer { width: 100%; height: 20rem; background: var(--papel-2); }

/* ---- embeds --------------------------------------------------------- */
.embed { max-width: 900px; }
.embed-load { position: relative; display: block; width: 100%; cursor: pointer; }
.embed-load img { width: 100%; height: auto; }
.embed-cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--tinta); color: var(--papel); font-family: var(--f-label); font-weight: 600; font-size: var(--sz-label); letter-spacing: 0.09em; text-transform: uppercase; padding: 0.8em 1.3em; transition: background-color var(--dur-ui) var(--ease); }
.embed-load:hover .embed-cta { background: var(--ocre); }
.embed-frame iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: var(--papel-2); }
.embed-meta { margin-top: 0.6rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.embed-meta a { color: var(--ocre); }

/* ---- education table, citations, store, lists ---------------------- */
table.edu { width: 100%; border-collapse: collapse; }
table.edu th, table.edu td { text-align: left; vertical-align: top; padding: 0.8rem 1.2rem 0.8rem 0; border-top: 1px solid var(--linha); }
table.edu th { font-family: var(--f-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; white-space: nowrap; }
table.edu td.num { font-size: var(--sz-meta); letter-spacing: 0.01em; color: var(--tinta-2); white-space: nowrap; }
@media (max-width: 760px) { table.edu, table.edu tbody, table.edu tr, table.edu th, table.edu td { display: block; } table.edu td, table.edu th { border-top: 0; padding: 0.2rem 0; } table.edu tr { padding: 0.9rem 0; border-top: 1px solid var(--linha); } }
ul.citations li { padding: 0.6rem 0; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
ul.citations li > span:first-child { font-weight: 500; }
.list { display: grid; gap: 0.4rem; max-width: 66ch; }
.list li { padding-left: 1.2em; position: relative; }
.list li::before { content: "\2014"; position: absolute; left: 0; color: var(--ocre); }
.store { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--jgap); align-items: start; }
.store figure img { width: 100%; height: auto; }
.store figcaption { margin-top: 0.5rem; display: grid; gap: 0.2rem; }
.store__title { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; }
.store__price { font-family: var(--f-label); font-weight: 500; font-size: var(--sz-meta); color: var(--ocre); }

/* ---- footer --------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--linha-2); margin-top: 0; padding: clamp(32px, 5vh, 64px) 0 2.5rem; }
.site-footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 3rem; }
.site-footer h2 { font-family: var(--f-label); font-weight: 600; font-size: var(--sz-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ocre); margin-bottom: 0.9rem; }
.site-footer ul { column-count: 1; }
.site-footer li { padding: 0.2rem 0; }
.site-footer li a { font-family: var(--f-text); font-size: 0.92rem; }
.site-footer li a:hover { color: var(--ocre); }
.site-footer li a[aria-current="page"] { color: var(--ocre); }
.site-footer__copy { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--linha); }
@media (min-width: 900px) { .site-footer__grid > div:first-child ul { column-count: 2; column-gap: 2rem; } }
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---- lightbox ------------------------------------------------------- */

/* ---- record tables on doors; long facts in the main column ---------- */
.record { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; }
.record__group .eyebrow { margin-bottom: 0.4rem; }
@media (max-width: 760px) { .record { grid-template-columns: 1fr; } }
dl.specs--long { grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); }
dl.specs--long dd { font-size: 0.95rem; }
/* on phones the long facts stack, key above value, so the value keeps a full measure */
@media (max-width: 700px) { dl.specs--long { grid-template-columns: 1fr; } dl.specs--long dd { border-top: 0; padding-top: 0; } }

/* ---- skip link ------------------------------------------------------ */
.skip { position: absolute; left: -999px; top: 0; z-index: 400; background: var(--tinta); color: var(--papel); padding: 0.8em 1.2em; font-family: var(--f-label); font-weight: 400; font-size: var(--sz-meta); }
.skip:focus { left: var(--gutter); top: var(--gutter); }


/* ---- curated dossier (dossier.html) ---- */
.dz__head { padding-top: clamp(24px, 4vh, 44px); }
.dz__title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; margin-top: 0.8rem; }
.dz__kicker { display: block; margin-bottom: 0.6rem; }
.dz__title { font-family: var(--f-display); font-weight: 800; font-size: var(--sz-h1); line-height: 0.96; letter-spacing: -0.03em; margin-bottom: 0.9rem; }
.dz__laurels { display: flex; gap: 1rem; align-items: center; }
.dz__laurels img { width: 92px; height: auto; }
@media (max-width: 800px) { .dz__title-row { grid-template-columns: 1fr; } .dz__laurels img { width: 64px; } }
.dz-hero { position: relative; aspect-ratio: 16 / 9; margin-top: 1.6rem; background: var(--papel-2); overflow: hidden; }
.dz-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.dz-slide.is-active { opacity: 1; }
.dz-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-hero__dots { position: absolute; right: 0.9rem; bottom: 0.8rem; display: flex; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.dz-hero__dots li { width: 0.5rem; height: 0.5rem; background: rgba(241, 239, 230, 0.55); transition: background var(--dur-ui) var(--ease); }
.dz-hero__dots li.is-active { background: var(--ocre); }
.dz-open { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); padding-top: clamp(28px, 4vh, 56px); padding-bottom: clamp(20px, 3vh, 40px); }
@media (max-width: 900px) { .dz-open { grid-template-columns: 1fr; } }
.dz-prose { max-width: 62ch; }
.dz-prose--lead p { font-size: 1.1rem; line-height: 1.55; }
.dz-open__record dl.specs { margin-top: 0.4rem; }
/* Direction A, "etiqueta de parede" (Nelson, 2026-09-08): the opening text under the ficha técnica, one column for everything about the work;
   on phones the words come first, then the data, so they follow the image */
.dz-open__record { display: grid; align-content: start; }
.dz-open__lead { margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--linha-2); }
.dz-open__lead .dz-prose { max-width: 62ch; }
@media (max-width: 900px) { .dz-open__lead { order: -1; margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 1.8rem; } }
/* the chapter's words under its heading, on the title's column, before the images */
.dz-ch__intro { margin: 0 0 clamp(1.6rem, 3vw, 2.4rem); padding-left: 4.2rem; }
.dz-ch--top .dz-top--side { margin-top: 0.2rem; }
.dz-ch--top .tiles { margin-top: clamp(28px, 4vh, 56px); }
.dz-ch__intro .dz-prose { max-width: 62ch; }
.dz-ch__intro .dz-prose p + p { margin-top: 0.9rem; }
@media (max-width: 480px) { .dz-ch__intro { padding-left: 0; } }
.dz-ch { padding-top: clamp(36px, 6vh, 72px); padding-bottom: clamp(12px, 2vh, 24px); }
.dz-ch__head { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1rem; align-items: start; padding-top: 1rem; border-top: 1px solid var(--linha-2); margin-bottom: 1.4rem; }
.dz-ch__num { font-family: var(--f-label); font-weight: 500; font-size: var(--sz-meta); color: var(--ocre); padding-top: 0.5rem; }
.dz-ch__title { font-family: var(--f-display); font-weight: 800; font-size: var(--sz-h2); line-height: 0.98; letter-spacing: -0.025em; margin-top: 0.35rem; overflow-wrap: break-word; hyphens: auto; }   /* a word longer than the line breaks, hyphenated (photogrammetry, at 320 px, 2026-09-15) */
@media (max-width: 340px) { .dz-ch__title { font-size: calc(var(--sz-h2) * 0.88); } }   /* 320 px phones: the long words fit whole (photogrammetry broke unhyphenated, 2026-09-15) */
.dz-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem 1.5rem; margin: 0 0 1.6rem; padding: 0.9rem 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.dz-facts dt { font-family: var(--f-label); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ocre); }
.dz-facts dd { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin-top: 0.2rem; letter-spacing: -0.01em; }
.dz-quote { margin: 0.2rem 0 1.6rem; max-width: 30ch; }
.dz-ch__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 56px); margin-top: 1.6rem; }
.dz-ch__cols .dz-prose { max-width: none; column-gap: 3rem; }
.dz-ch__cols .dz-prose p + p { margin-top: 0.9rem; }
.dz-ch__cols .dz-prose { grid-column: 1 / -1; max-width: 66ch; }
@media (min-width: 901px) { .dz-ch__cols .dz-prose--2 { columns: 2; max-width: none; } .dz-ch__cols .dz-prose--2 p { break-inside: avoid; } }
@media (max-width: 900px) { .dz-ch__cols { grid-template-columns: 1fr; } }
.dz-ch__gallery { margin-top: 0.4rem; }
.dz-vr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--jgap); align-items: start; }
@media (max-width: 900px) { .dz-vr { grid-template-columns: 1fr; } }
.dz-fig { margin: 0; }
.dz-fig video, .dz-fig img { width: 100%; height: auto; display: block; }
.dz-fig figcaption { margin-top: 0.4rem; }
.dz-plate { margin: 0 0 1.4rem; }
.tiles { display: grid; gap: var(--jgap); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tiles--4, .tiles--2 { grid-template-columns: 1fr; } }
.tile { margin: 0; display: grid; gap: 0.45rem; }
.tile .plate__open { aspect-ratio: 1 / 1; overflow: hidden; background: var(--papel-2); }
.tiles--169 .tile .plate__open { aspect-ratio: 16 / 9; }  /* image tiles that are 16:9 by nature, shown whole (the Revoluções por Segundo episodes; Nelson, 2026-09-07) */
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile figcaption { display: grid; gap: 0.1rem; }
.tile__title { font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.dz-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jgap); }
@media (max-width: 800px) { .dz-models { grid-template-columns: 1fr; } }
.dz-model { display: grid; gap: 0.5rem; align-content: start; }
.dz-model .model__poster { width: 100%; height: auto; }
.dz-sub { margin: 2rem 0 1rem; }
.dz-awards-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
@media (max-width: 800px) { .dz-awards-grid { grid-template-columns: 1fr; } }
.dz-laurels-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: center; }
.dz-laurels-big img { width: 100%; height: auto; }
.dz-awards { list-style: none; margin: 0; padding: 0; display: grid; }
.dz-awards li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--linha); align-items: baseline; }
.dz-awards__year { font-family: var(--f-label); font-weight: 500; font-size: var(--sz-meta); color: var(--ocre); }
.dz-awards__name { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.dz-awards__text { display: grid; gap: .25rem; }
.dz-awards__detail { font-family: var(--f-body); font-size: 1rem; line-height: 1.45; color: var(--tinta-2); }
.dz-awards-grid--plain { grid-template-columns: minmax(0, 1fr); }
.dz-awards-grid--plain .dz-laurels-big { display: none; }
.dz-marks { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; align-items: center; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.dz-marks img { height: 1.65rem; width: auto; display: block; }
.dz-marks a { display: block; }
.dz-press { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.dz-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jgap); }
@media (max-width: 800px) { .dz-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dz-person { display: grid; gap: 0.4rem; align-content: start; }
.dz-person__photo { width: 100%; height: auto; }
.dz-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 3rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--linha); }
@media (max-width: 700px) { .dz-credits { grid-template-columns: 1fr; } }
.dz-credits__list { margin-top: 0.4rem; font-size: 0.95rem; line-height: 1.5; }

/* ---- dossier additions: video hero, 3:2 video tiles, portrait triptych, set list, plain list ---- */
.dz-hero--video { aspect-ratio: auto; margin: 1.6rem 0 0; background: transparent; }
.dz-hero--video video { width: 100%; height: auto; display: block; background: var(--tinta); }
.dz-hero--video figcaption { margin-top: 0.4rem; }
.tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tiles--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiles--5, .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tiles--32 .tile video, .tiles--32 .tile .plate__open { aspect-ratio: 3 / 2; }
.tiles--32 .tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--tinta); }
.tiles--sq .tile video, .tiles--sq .tile > img { aspect-ratio: 1 / 1; }
.tiles--916 .tile video, .tiles--916 .tile > img { aspect-ratio: 9 / 16; }
.tiles--34 .tile video, .tiles--34 .tile > img { aspect-ratio: 3 / 4; }  /* 3:4 clips shown whole (Oracle of Duneglass; Nelson, 2026-09-07) */  /* portrait loops shown whole (Ruína Carioca verticals; Nelson, 2026-09-07) */  /* square loops shown whole, all the same size (Vazante; Nelson, 2026-09-07: "the videos treated with the same size") */
.tiles--32 .tile > img { aspect-ratio: 3 / 2; width: 100%; height: 100%; object-fit: cover; display: block; }  /* the poster that stands in for a loop under ?shots=1 keeps the tile's ratio */
.dz-triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jgap); margin-bottom: var(--jgap); }
@media (max-width: 700px) { .dz-triptych { grid-template-columns: 1fr; } }
.dz-portrait { margin: 0; display: grid; gap: 0.4rem; }
.dz-portrait video { width: 100%; height: auto; display: block; background: var(--tinta); }
.dz-set { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 1.9vw, 1.5rem); letter-spacing: -0.015em; line-height: 1.25; }
.dz-set li::after { content: "\00a0\00b7\00a0"; color: var(--ocre); font-weight: 400; }
.dz-set li:last-child::after { content: ""; }
.dz-set__fala { font-family: var(--f-label); font-weight: 500; font-size: var(--sz-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); align-self: center; }
.dz-list-plain { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 3rem; font-size: 1.05rem; line-height: 1.6; }
@media (max-width: 700px) { .dz-list-plain { columns: 1; } }
.dz-list-plain li { break-inside: avoid; padding: 0.35rem 0; border-top: 1px solid var(--linha); }
.dz-list-note { margin-top: 1rem; }

/* ---- work tiles: one ratio for every work on the home selection and the area pages ---- */
.wtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px) var(--jgap); margin-top: 1.4rem; }
@media (max-width: 1100px) { .wtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wtiles { grid-template-columns: 1fr; } }
.wtile { display: grid; gap: 0.7rem; align-content: start; }
.wtile__link, .wtile__titlelink { color: inherit; text-decoration: none; display: block; }
.wtile__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--papel-2); }
.wtile__media img, .wtile__media video { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); display: block; transition: transform var(--dur) var(--ease-out); }
.wtile:hover .wtile__media img, .wtile:hover .wtile__media video { transform: scale(1.025); }
.wtile__none { display: block; width: 100%; height: 100%; }
.wtile__cap { display: grid; gap: 0.3rem; }
.wtile__title { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.12; transition: color var(--dur-ui) var(--ease); }
.wtile:hover .wtile__title { color: var(--ocre); }
.wtile.is-hidden { display: none; }

/* ---- Palestras & Workshops · Palco + Programa (Nelson, 2026-09-05) --------- */
.pal-head__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 72px); align-items: end; }
.pal-head__intro { max-width: 58ch; font-size: var(--sz-logline); line-height: 1.35; }
@media (max-width: 900px) { .pal-head__grid { grid-template-columns: 1fr; align-items: start; } .pal-head__intro { font-size: 1.05rem; } }
.pal-palco { border-top: 1px solid var(--linha-2); }
.pal-block { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head body" "frames frames"; gap: 1.2rem clamp(20px, 3vw, 56px); padding: clamp(24px, 4vh, 48px) 0; border-top: 1px solid var(--linha); }
.pal-block:first-child { border-top: 0; padding-top: 0.4rem; }
.pal-block__head { grid-area: head; }
.pal-block__body { grid-area: body; align-self: end; }
.pal-block__frames { grid-area: frames; margin-top: 0.4rem; }
.pal-block__frames--single .jrow .plate { flex: 0 0 calc(50% - var(--jgap) / 2); }  /* a single frame at the size of a pair (Nelson, 2026-09-09) */
.pal-block__title { margin-top: 0.7rem; font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.0; letter-spacing: -0.025em; max-width: 18ch; }
.pal-block__with { margin-top: 0.7rem; }
.pal-items { list-style: none; margin: 0; padding: 0; display: grid; }
.pal-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 1.4rem; align-items: baseline; padding: 0.7rem 0; border-top: 1px solid var(--linha); }
.pal-item:first-child { border-top: 0; padding-top: 0; }
.pal-item__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.15; letter-spacing: -0.015em; }
.pal-item__meta { white-space: nowrap; }
.pal-block__text { margin-top: 1rem; }
@media (max-width: 900px) { .pal-block { grid-template-columns: 1fr; grid-template-areas: "head" "body" "frames"; } .pal-item { grid-template-columns: 1fr; gap: 0.15rem; } .pal-item__meta { white-space: normal; } }
.pal-programa .tags--filter { margin-top: 1.2rem; }
.prog { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.prog__row { display: grid; grid-template-columns: 8.5rem 13rem minmax(0, 1fr) 7rem 8rem; gap: 0.5rem 1.4rem; align-items: baseline; padding: 0.85rem 0; border-top: 1px solid var(--linha); transition: background-color var(--dur-ui) var(--ease); }
.prog__row:last-child { border-bottom: 1px solid var(--linha); }
.prog__row:hover { background: var(--papel-2); }
.prog__row.is-hidden { display: none; }
.prog__year { font-family: var(--f-label); font-weight: 400; font-size: 0.86rem; letter-spacing: 0.01em; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.prog__org { font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; line-height: 1.1; letter-spacing: -0.015em; }
.prog__org a { transition: color var(--dur-ui) var(--ease); }
.prog__org a:hover { color: var(--ocre); }
.prog__desc { font-size: 0.98rem; line-height: 1.45; }
.prog__fmt .chip { white-space: nowrap; }
.prog__city { text-align: right; }
@media (max-width: 1100px) { .prog__row { grid-template-columns: 7rem 11rem minmax(0, 1fr) 6.5rem; } .prog__city { display: none; } }
@media (max-width: 760px) { .prog__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "year fmt" "org org" "desc desc"; gap: 0.25rem 1rem; } .prog__year { grid-area: year; } .prog__fmt { grid-area: fmt; } .prog__org { grid-area: org; } .prog__desc { grid-area: desc; } }

/* ---- dossier hero: sound on request (a film or a reel keeps its audio) ---- */
.dz-hero--video { position: relative; width: fit-content; max-width: 100%; }  /* the sound toggle anchors to the video's own box, also when the file is smaller than the column */
.dz-hero__sound { position: absolute; right: 0.9rem; bottom: 0.9rem; font-family: var(--f-label); font-weight: 600; font-size: var(--sz-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--papel); background: rgba(18, 17, 16, 0.72); border: 1px solid rgba(241, 239, 230, 0.35); padding: 0.45rem 0.7rem; cursor: pointer; transition: background-color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease); }
.dz-hero__sound:hover, .dz-hero__sound[aria-pressed="true"] { background: var(--tinta); border-color: var(--papel); }

/* ---- 3D viewers on request: a 16:9 box, the model's own render as poster, the viewer loads on click ---- */
.tile--sk .sk__box { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tinta); }
.tile--sk .sk__box img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur) var(--ease-out); }
.tile--sk .sk__box:hover img { transform: scale(1.025); }
.tile--sk .sk__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tile--sk .sk__btn { position: absolute; left: 0.8rem; bottom: 0.8rem; }
.tile--sk .sk__box.is-live .sk__btn, .tile--sk .sk__box.is-live img { display: none; }

/* ---- Galeria · the viewer (docs/GALERIA-SPEC-2026-09-05.md): the paper light table, the loupe, the projeção ---- */
:root { --g-bar: 3.4rem; --g-strip: 6.2rem; --g-dur: 800ms; }
html.g-lock { overflow: hidden; }
.galeria { position: fixed; inset: 0; z-index: 300; background: var(--papel); color: var(--tinta); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--g-bar) minmax(0, 1fr) auto var(--g-strip); overscroll-behavior: contain; touch-action: manipulation; -webkit-tap-highlight-color: transparent; opacity: 0; transition: opacity var(--g-dur) var(--ease); }
.galeria.is-open { opacity: 1; }
.galeria[hidden] { display: none; }
.g__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 var(--gutter); border-bottom: 1px solid var(--linha); }
.g__count { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.g__count .g__n { color: var(--tinta); font-weight: 500; }
.g__ctl { display: flex; gap: 0.2rem; flex-wrap: nowrap; }
.g__count, .g__btn { white-space: nowrap; flex-shrink: 0; }   /* every label on one line, at every width (2026-09-15) */
.g__btn { font-family: var(--f-label); font-weight: 500; font-size: var(--sz-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); padding: 0.7rem 0.7rem; min-height: 44px; transition: color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease); }
.g__btn:hover, .g__btn[aria-pressed="true"] { color: var(--tinta); background: var(--papel-2); }
.g__btn--close { color: var(--tinta); }
.g__stage { position: relative; overflow: hidden; cursor: default; }
.g__frame { position: absolute; inset: 0; }
.g__media { position: absolute; display: block; max-width: none; object-fit: contain; background: var(--papel-2); will-change: transform, opacity; user-select: none; -webkit-user-drag: none; }
img.g__media { cursor: zoom-in; }
.is-zoom img.g__media { cursor: grab; }
.is-zoom .g__stage:active img.g__media { cursor: grabbing; }
.is-loupe img.g__media { cursor: none; }
.g__edge { position: absolute; top: 0; bottom: 0; width: clamp(56px, 12vw, 160px); display: grid; place-items: center; font-family: var(--f-label); font-size: 1.1rem; color: var(--tinta-2); opacity: 0; transition: opacity var(--dur-ui) var(--ease); }
.g__edge--prev { left: 0; } .g__edge--next { right: 0; }
.g__stage:hover .g__edge, .g__edge:focus-visible { opacity: 1; }
.g__edge span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--linha-2); background: rgba(241, 239, 230, 0.85); }
.is-zoom .g__edge { display: none; }
.g__loupe { position: fixed; left: 0; top: 0; width: 240px; height: 240px; border-radius: 50%; border: 1px solid var(--tinta); box-shadow: 0 12px 40px rgba(18, 17, 16, 0.25); background-color: var(--papel-2); background-repeat: no-repeat; pointer-events: none; opacity: 0; transition: opacity var(--dur-ui) var(--ease); z-index: 2; }
.is-loupe .g__loupe { display: block; }
.g__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ocre); transform: scaleX(0); transform-origin: left; display: none; }
.is-video .g__progress { display: block; }
.g__cap { padding: 0.7rem var(--gutter) 0; text-align: left; }
.g__cap[hidden] { display: none; }
.g__strip { display: flex; gap: 6px; align-items: center; padding: 0.9rem var(--gutter); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-top: 1px solid var(--linha); transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease); }
.g__strip::-webkit-scrollbar { display: none; }
.g__thumb { flex: 0 0 auto; width: calc((var(--g-strip) - 1.8rem) * 1.5); height: calc(var(--g-strip) - 1.8rem); position: relative; opacity: 0.55; transition: opacity var(--dur-ui) var(--ease); outline-offset: 2px; }
.tile.g__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g__thumb:hover, .g__thumb.is-current { opacity: 1; }
.g__thumb.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--tinta); }
.g__thumb--video::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-40%, -50%); border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--papel); filter: drop-shadow(0 0 2px rgba(18, 17, 16, 0.6)); z-index: 1; }
.galeria.is-nostrip { grid-template-rows: var(--g-bar) minmax(0, 1fr) auto 0; }
.galeria.is-nostrip .g__strip { opacity: 0; pointer-events: none; }
.galeria.is-still .g__strip, .galeria.is-still .g__bar { opacity: 0; }
.galeria.is-still .g__strip { pointer-events: none; }
@media (max-width: 760px) {
  :root { --g-strip: 4.6rem; }
  .g__btn--loupe, .g__btn--full { display: none; }
  .g__btn { padding: 0.6rem 0.5rem; }
  .g__edge { opacity: 1; width: 44px; } .g__edge span { border: 0; background: transparent; }
}
@media (max-width: 480px) {   /* the toolbar on phones (430 px, the largest iPhones, included): the 1:1 zoom goes the way of the loupe and full screen (pinch does it), every
     label on one line (the count stacked and Ampliar 1:1 wrapped at 375 px, 2026-09-15) */
  .g__btn[data-g-zoom] { display: none; }
  .g__bar { gap: 0.5rem; } .g__ctl { gap: 0; }
  .g__btn { padding: 0.6rem 0.42rem; letter-spacing: 0.05em; }
}
@media (max-width: 374px) { .g__bar { padding: 0 14px; } .g__btn { padding: 0.6rem 0.34rem; letter-spacing: 0.03em; } }
@media (prefers-reduced-motion: reduce) { .galeria { transition: none; } .g__media { transition: none !important; } }
/* the prophets stand: portrait 3D windows (Nelson, 2026-09-05); the viewer loads when the window comes into view */
.tiles--sk-portrait .tile--sk .sk__box { aspect-ratio: 3 / 4; }
.tiles--sk-portrait.tiles--4 { grid-template-columns: repeat(5, minmax(0, 1fr)); }  /* ten prophets, two rows of five (Nelson, 2026-09-05) */
@media (max-width: 1100px) { .tiles--sk-portrait.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tiles--sk-portrait.tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dz-vr__video { display: grid; gap: 1rem; align-content: start; }  /* stacked media in the VR block breathe (2026-09-06) */
/* hero beside the record, every dossier (Nelson, 2026-09-06: "ficha técnica sempre ao lado do conteúdo em destaque") */
.dz-top--side { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: 1.6rem; }
.dz-top--side .dz-hero { margin-top: 0; }
.dz-top__main { display: grid; gap: clamp(1.4rem, 2.5vw, 2.4rem); align-content: start; min-width: 0; }
.dz-top__main .dz-open__text { margin-top: 0; }
.dz-top--side .dz-hero--video { margin-top: 0; width: 100%; }
/* the label under the highlighted item, the plate caption (Nelson, 2026-09-08) */
.dz-hero-block { min-width: 0; }
.dz-hero__label { margin-top: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
/* the plate-caption row: the label at the left, the heart and the share at the right (Nelson, 2026-09-09) */
.dz-hero__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.7rem; }
.dz-hero__foot .dz-hero__label { margin-top: 0; }
.dz-actions { display: flex; align-items: center; gap: 1.1rem; }
.heart, .share { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; background: none; color: var(--tinta); cursor: pointer; }
.heart svg, .share svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: transform var(--dur-ui) var(--ease), fill var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
.share:hover { color: var(--ocre); }
.feat__react { display: inline-flex; align-items: center; gap: 0.9rem; margin-left: auto; }
.heart[aria-pressed="true"] { color: var(--ocre); }
.heart[aria-pressed="true"] svg { fill: currentColor; }
.heart:active svg { transform: scale(0.86); }
.dz-share__btn { font-family: var(--f-label); font-weight: 600; font-size: var(--sz-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ocre); background: none; border: 0; padding: 0; cursor: pointer; }
/* the channels as one more line of the caption strip, right-aligned, no box (Nelson, 2026-09-09) */
.share-menu { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 1.4rem; margin-top: 0.15rem; }
.share-menu[hidden] { display: none; }
.share-menu a, .share-menu button { font-family: var(--f-label); font-weight: 600; font-size: var(--sz-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--tinta); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
@media (max-width: 900px) { .share-menu { justify-content: flex-start; } }
.share-menu a:hover, .share-menu button:hover { color: var(--ocre); }
.share-menu [data-share-copy] .share-copy__done, .share-menu [data-share-copy][data-copied] .share-copy__idle { display: none; }
.share-menu [data-share-copy][data-copied] .share-copy__done { display: inline; color: var(--ocre); }
.wtile__cap { position: relative; padding-right: 4.4rem; }
.wtile__actions { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 0.6rem; }
.wtile .share-menu, .feat__panel .share-menu { justify-content: flex-start; margin-top: 0; }
.dz-top--side .dz-hero--video video { width: 100%; }
.dz-top--wide { grid-template-columns: minmax(0, 8.5fr) minmax(0, 3.5fr); }  /* a larger hero, a smaller record (Nelson, 2026-09-07, Rio) */
.dz-top--wide .dz-open__record { font-size: 0.9em; }
.dz-top--narrow { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); }  /* a vertical highlight in a narrower column (Nelson, 2026-09-07, Arquitetura dos Sonhos) */
@media (max-width: 900px) { .dz-top--side { grid-template-columns: 1fr; } }

.door-intro { max-width: 52rem; margin: 1.2rem 0 0.4rem; }  /* the door's own paragraph, in his words (XR, 2026-09-07) */

/* Sobre: the portrait beside the text, one composition (Nelson, 2026-09-07: "put my picture with the text ... lay it out beautifully") */
.bio { padding-top: 0.5rem; }
.bio__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.bio__portrait { margin: 0; }
.bio__portrait .portrait { max-width: none; }
.bio__meta { font-family: var(--f-label); font-weight: 500; font-size: var(--sz-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); }
.bio__heading { font-family: var(--f-display); font-weight: 700; font-size: var(--sz-h2); line-height: 1.02; letter-spacing: -0.02em; margin: 0.7rem 0 1.8rem; max-width: 14ch; }
.bio__prose { max-width: 60ch; }
.bio__prose p + p { margin-top: 1.1rem; }
.bio__quote { margin-top: 2.4rem; max-width: 30ch; }
@media (min-width: 900px) {
  .bio__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .bio__portrait { position: sticky; top: 5.5rem; }
}

/* a chapter whose media sits beside its text (NOVA identity: the cover small, the release text at its side; Nelson, 2026-09-07) */
.dz-ch__aside { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.dz-ch__aside-media .dz-hero--video, .dz-ch__aside-media figure { margin: 0; }
.dz-ch__aside-text > * + * { margin-top: 1.1rem; }
@media (min-width: 900px) { .dz-ch__aside { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
/* two media beside the text: the original cover (1:1) to the left of the logotype motion (3:2), at one height (NOVA; Nelson, 2026-09-08) */
.dz-ch__aside-media--row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(0.8rem, 1.5vw, 1.4rem); align-items: start; }
.dz-ch__aside-media--row .dz-fig img { max-width: 100% !important; }
@media (min-width: 900px) { .dz-ch__aside--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.dz-triptych--small { max-width: 720px; }  /* the trio in halftone, smaller (Nelson, 2026-09-07) */

.plate__link { display: block; cursor: pointer; }  /* a plate that opens a page instead of the lightbox (the Canal Meio courses; Nelson, 2026-09-07) */

.dz-marks .mark--dark { background: var(--tinta); padding: 0.45rem 0.7rem; }  /* a light logotype (Pindorama) readable on the paper (Nelson, 2026-09-07: 'not with a white logo over beige because it's unreadable') */

.contact__status { font-family: var(--f-label); font-weight: 600; font-size: var(--sz-label); letter-spacing: 0.09em; text-transform: uppercase; margin-top: 0.9rem; }
.contact__status.is-err { color: var(--ocre); }

.feat__credits { margin-top: 0.3rem; }

/* the Seleção tile carries a work's laurels and honours (Nelson, 2026-09-07: "Awavena in the selection needs to somehow show that it won an Emmy, that it was in Venice" · "Tinta & Fogo also needs to show the two laurels in the seleção") */
.wtile__honors { display: block; margin-top: 0.35rem; color: var(--ocre); }
.wtile__laurels { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; margin-top: 0.55rem; }
.wtile__laurels img { height: 2rem; width: auto; display: block; }

/* door tiles carry what the home carries: credits and the description under the title (Nelson, 2026-09-07: "se a gente tem uma thumbnail na inicial, a gente tem prêmios, a gente tem descrição, isso deve estar também nas portas") */
.wtile__credits { display: block; margin-top: 0.35rem; }
.wtile__text { display: block; margin-top: 0.55rem; font-size: 0.95rem; line-height: 1.5; color: var(--tinta-2, inherit); }
.wtiles--rich { row-gap: clamp(32px, 4vw, 56px); }

/* the invitation on the Palestras door (Nelson, 2026-09-07) */
.pal-head__cta { margin-top: 1.4rem; }
.pal-convite { border-top: 1px solid var(--linha-2); }
.contact select { font: inherit; color: var(--tinta); background: transparent; border: 0; border-bottom: 1px solid var(--linha-2); padding: 0.55rem 0; border-radius: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }
.contact select:focus { outline: none; border-bottom-color: var(--ocre); }

figure.tile > video, figure.plate > video { cursor: zoom-in; }  /* tile loops open large in the lightbox (2026-09-07) */

/* his monogram beside the name, in the header only (Nelson, 2026-09-07: 'the monogram to the left of my name in the title, only in the header') */
.brand__mark { height: 1.45em; width: auto; display: block; align-self: center; margin-right: -0.35rem; }

/* the signature: the monogram beside the name, and 11:11 in the lower right corner (Nelson, 2026-09-07) */
.site-footer__copy { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.site-footer__sig { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand__mark--footer { height: 1.6em; margin-right: 0; }
.site-footer__hour { font-variant-numeric: tabular-nums; }

.hero__name { display: flex; align-items: center; gap: 0.22em; }
.brand__mark--hero { height: 0.82em; margin-right: 0; }
@media (max-width: 700px) { .brand__mark--hero { height: 0.78em; } }

/* the call to action beside the title on the home (Nelson, 2026-09-07) */
.hero { position: relative; }
.hero__cta { position: absolute; right: var(--gutter); top: clamp(28px, 4vh, 56px); display: flex; gap: 0.6rem; }  /* on the hero's own padding line, off the header rule (Nelson, 2026-09-08: "too close. It's not cool") */
.btn--quiet { border-color: var(--linha-2); }
@media (max-width: 900px) { .hero__cta { position: static; margin-top: 1.4rem; } }

/* ---- /sistema/: the identity system page, built from the site's own tokens (2026-09-07) ---- */
.sis-intro { max-width: 34ch; margin-top: 1rem; }
.sis-section { border-top: 1px solid var(--linha); }
.sis-head { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline; gap: 1rem; }
.sis-num { color: var(--ocre); }
.sis-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); margin-top: 1.6rem; align-items: start; }
.sis-text { max-width: 44rem; }
.sis-rules { margin: 1.2rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.sis-lockups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jgap); }
.sis-lockup { display: grid; gap: 0.6rem; justify-items: start; padding: clamp(16px, 2vw, 28px); border: 1px solid var(--linha); }
.sis-lockup--ink { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.sis-mark svg, .sis-mark-img { width: clamp(96px, 12vw, 180px); height: auto; display: block; }
.sis-mark--ink svg path { fill: var(--papel); }
.sis-name { display: flex; align-items: center; gap: 0.32em; margin-top: 1.6rem; font-size: clamp(2.2rem, 4.6vw, 4rem); }
.sis-name .brand__mark--hero { height: 0.82em; }
.sis-name__text { font-size: 1em; }
.sis-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem clamp(0.5rem, calc((100% - 264px) / 4), 1.4rem); margin-top: 1.6rem; }   /* the five marks (264 px) share what the column leaves; on a 320 px phone the last wraps (2026-09-15) */
.sis-size { display: grid; justify-items: center; gap: 0.4rem; }
.sis-size svg { width: var(--s); height: var(--s); display: block; }
.sis-type { display: grid; gap: 1.4rem; }
.sis-type__row { display: grid; gap: 0.35rem; margin: 0; }
.sis-type__h1 { font-size: clamp(2.2rem, 4.6vw, 4rem); }
.sis-type__rotulo { color: var(--ocre); }
.sis-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jgap); }
.sis-swatch { display: grid; gap: 0.3rem; }
.sis-swatch__chip { display: block; aspect-ratio: 3 / 2; background: var(--sw); border: 1px solid var(--linha); }
.sis-swatch__hex { color: var(--tinta-2); }
.sis-comp { display: grid; gap: 0.8rem; }
.sis-comp__page { border: 1px solid var(--linha-2); padding: 6%; display: grid; gap: 0.6rem; background: var(--papel); }
.sis-comp__page > span { display: block; background: var(--linha-2); }
.sis-comp__eyebrow { width: 18%; height: 4px; background: var(--ocre) !important; }
.sis-comp__title { width: 52%; height: 22px; background: var(--tinta) !important; }
.sis-comp__line { width: 44%; height: 9px; }
.sis-comp__meta { width: 26%; height: 4px; }
.sis-comp__row { display: grid; grid-template-columns: 8.5fr 3.5fr; gap: 4%; margin-top: 0.6rem; }
.sis-comp__hero { display: block; aspect-ratio: 3 / 2; background: var(--papel-2); }
.sis-comp__record { display: grid; gap: 8px; align-content: start; }
.sis-comp__record i { display: block; height: 5px; background: var(--linha-2); }
.sis-comp__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4%; margin-top: 0.6rem; }
.sis-comp__tiles i { display: block; aspect-ratio: 3 / 2; background: var(--papel-2); }
.sis-apps { display: grid; gap: clamp(20px, 3vw, 40px); }
.sis-app { margin: 0; display: grid; gap: 0.5rem; min-width: 0; }   /* the card demo keeps its 85:55 ratio; the item still shrinks to its column */
.sis-app img { width: 100%; height: auto; border: 1px solid var(--linha); display: block; }
.sis-bizcard { aspect-ratio: 85 / 55; max-width: 480px; border: 1px solid var(--linha-2); padding: 7% 8%; display: grid; align-content: space-between; gap: 0.5rem; background: var(--papel); }
.sis-bizcard__name { display: flex; align-items: center; gap: 0.3em; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1; }
.sis-bizcard__name img { height: 0.85em; width: auto; }
.sis-bizcard__line { font-size: 0.95rem; }
.sis-sig { font-family: var(--f-label); font-weight: 400; font-size: 0.85rem; line-height: 1.6; margin: 0; padding: 1rem 1.2rem; border: 1px solid var(--linha); white-space: pre-wrap; }
.sis-files { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.sis-files li { display: grid; gap: 0.15rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--linha); }
@media (max-width: 900px) { .sis-grid { grid-template-columns: minmax(0, 1fr); } .sis-lockups, .sis-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Escalas: one composition drawn in each medium's frame, sized from sistema.json "escalas" (2026-09-10, para aprovação) */
.sis-frames { display: grid; grid-template-columns: minmax(0, 210fr) minmax(0, 459fr); gap: var(--jgap); align-items: start; }  /* 210 : 459 gives the A4 page and the card one height (297/210 = 459/210 x 55/85) */
.sis-frame--slide { grid-column: 1 / -1; }
.sis-frame { margin: 0; display: grid; gap: 0.5rem; }
.sis-frame__box { container-type: inline-size; border: 1px solid var(--linha-2); background: var(--papel); }
.sis-frame__in { aspect-ratio: var(--ratio); padding: calc(var(--pad) * 100cqw / var(--w)); display: flex; flex-direction: column; gap: 2.4cqw; overflow: hidden; }
.sis-fs { font-size: calc(var(--s) * 100cqw / var(--w)); }
.sis-frame__text { max-width: 30ch; line-height: 1.35; }
.sis-scale { margin-top: clamp(24px, 3vw, 44px); }
.sis-scale thead th { border-top: 0; padding-bottom: 0.4rem; }
.sis-scale td.num { color: var(--tinta); }
.sis-scale td.num:nth-of-type(1) { color: var(--tinta-2); white-space: normal; }
.sis-scale__m { display: none; }
@media (max-width: 760px) { .sis-scale thead { display: none; } .sis-scale__m { display: inline-block; min-width: 9.5rem; color: var(--tinta-2); } }

/* iOS draws a play glyph on an inline video it did not start; the loops keep their poster instead (2026-09-07) */
video:not([controls])::-webkit-media-controls-start-playback-button, video:not([controls])::-webkit-media-controls { display: none !important; -webkit-appearance: none; }
video:not([controls])::-webkit-media-controls-panel { display: none !important; }

/* the Festival do Rio films (Nelson, 2026-10-09): the festival's own mark in white over the moving image, top right
   ("put the Festival do Rio logo in white over their images in the top right corner of their animated thumbnails");
   a background image, so the tile and cover rules for img/video never touch it */
.wtile__media, .feat__media { position: relative; }
.fest-mark { position: absolute; top: clamp(10px, 4.5%, 20px); right: clamp(10px, 3.2%, 20px); width: clamp(118px, 40%, 210px); background: center / contain no-repeat; pointer-events: none; z-index: 1; filter: drop-shadow(0 0 6px rgba(18, 17, 16, 0.45)); }  /* a soft ink halo keeps the white mark legible over bright footage (the Vozes tile) */
.feat__media .fest-mark { width: clamp(150px, 30%, 280px); top: clamp(12px, 4%, 26px); right: clamp(12px, 3%, 26px); }
/* the weekend sessions: the record's own rows, each venue a link to its tickets */
.feat__sessions:empty { display: none; }
.feat__sessions dl.specs { margin-top: 0.2rem; }
.dz-fest { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.dz-fest__mark { display: inline-block; }
.dz-fest__mark img { height: 1.65rem; width: auto; display: block; }
.dz-fest dl.specs { margin-top: 0.8rem; }
/* the film model's cover beside the trailer: the columns follow the two ratios (inline), no text column */
.dz-ch__aside--solo { grid-template-columns: 1fr; }
@media (max-width: 600px) { .dz-ch__aside--solo .dz-ch__aside-media--row { grid-template-columns: 1fr !important; } }  /* phones: the cover over the trailer (the inline ratios hold from 601 px) */
/* a vertical photograph as the highlight, at its own ratio (No Passo da Cobra; Nelson, 2026-10-09: "Maybe you can use a vertical image") */
.dz-hero--portrait { aspect-ratio: auto; background: none; }
.dz-hero--portrait .dz-slide { position: relative; opacity: 1; }
.dz-hero--portrait .dz-slide img { height: auto; object-fit: initial; }
/* a lone press print at the size of a pair, as the single frame of 2026-09-09: the two film pages read alike (No Passo da Cobra one print, Vozes two) */
.dz-ch#imprensa .jrow:only-child .plate:only-child { flex: 0 0 calc(50% - var(--jgap) / 2); }
@media (max-width: 700px) { .dz-ch#imprensa .jrow:only-child .plate:only-child { width: 100%; } }