/* cine-c, built: the system of the reference (thin bar, one large frame that changes in place, the foot strip,
   the hairline table, tinted bands, two type sizes); every value below is our own.
   Colour: a closed set taken from Carlos's materials and rooms. cal (the lime plaster ground), compensado
   (the maple plywood face: the tinted band, text selection, the phone menu), ebano (the ebony of Velas: every
   word and the strong rules), cinza (the shadowed concrete: quiet words), linha (the hairlines), ipe (the joints
   that edge Fêmea's panels: the foot), luz (white, only for words on a photograph).
   Type: Piazzolla (Huerta Tipografica, OFL), self hosted, two sizes, 15 and 22 px (1.2 squared), the name set
   in roman with its last part in italic. Spacing: an 8 based scale, a 24 px page gutter, 16 px on a phone. */

@font-face { font-family: Piazzolla; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/piazzolla-latin-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Piazzolla; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/piazzolla-latin-ext-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Piazzolla; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(fonts/piazzolla-latin-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Piazzolla; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(fonts/piazzolla-latin-ext-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --cal: #EEEDE8;
  --compensado: #E5D7BE;
  --ebano: #211915;
  --cinza: #645C55;
  --linha: #A39B91;
  --ipe: #4A3428;
  --ipe-linha: #6F5747;
  --luz: #FFFFFF;
  --face: Piazzolla, ui-serif, serif;
  --t-s: 15px;
  --t-l: 22px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px;
  --g: 24px;
  --bar: 40px;
  --strip: 40px;
  --labelw: 300px;
  --ease: cubic-bezier(.33, 1, .68, 1);
  --ease-in: cubic-bezier(.32, 0, .67, 0);
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cal); color: var(--ebano); font-family: var(--face); font-size: var(--t-s); line-height: 1.45;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--linha) var(--cal);
  scroll-padding-top: var(--bar); -webkit-tap-highlight-color: transparent; }
/* no grey-blue tap flash on a phone: every control answers a press itself (the .97 press below, the menu sheet) */
/* a link to a part of a page (the home's group names to Arte) lands under the sticky bar, not behind it */
body { margin: 0; background: var(--cal); color: var(--ebano); font-kerning: normal; min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px;
  text-underline-offset: .24em; transition: text-decoration-color 160ms var(--ease); }
@media (hover: hover) { a:hover { text-decoration-color: currentColor; } }
::selection { background: var(--compensado); color: var(--ebano); }
:focus-visible { outline: 2px solid var(--ebano); outline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:active, .ask:active, .bar-back:active, .bar-menu:active, .sheet-close:active { transform: scale(.97); }
.mark { display: block; stroke: currentColor; stroke-width: 1.25; fill: none; overflow: visible; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--g); top: var(--s-2); z-index: 50; background: var(--cal); padding: var(--s-3) var(--s-4); }

/* ------------------------------------------------------------ the bar */
.bar { position: sticky; top: 0; z-index: 20; height: var(--bar); display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--s-5);
  padding-inline: var(--g); background: var(--cal); border-bottom: 1px solid var(--linha); }
.bar-nav { grid-column: 1; grid-row: 1; }
.bar-nav ul, .sheet-nav ul, .foot-nav ul, .lang-switch { list-style: none; margin: 0; padding: 0; }
.bar-nav ul { display: flex; gap: var(--s-5); }
.bar-nav a { display: flex; align-items: center; height: var(--bar); }
[aria-current="page"], .lang-switch [aria-current] { font-style: italic; }
.bar-name { grid-column: 2; grid-row: 1; margin: 0; white-space: nowrap; line-height: 1; transition: opacity 200ms var(--ease); }
.bar-name a { display: flex; align-items: baseline; gap: .32em; text-decoration: none; }
.np-first { font-size: var(--t-l); letter-spacing: -.005em; }
.np-rest { font-size: var(--t-s); font-style: italic; }
.bar > .lang-switch { grid-column: 3; grid-row: 1; justify-self: end; display: flex; gap: var(--s-4); }
.lang-switch a { display: flex; align-items: center; min-height: var(--bar); }
.bar-menu, .bar-back { display: none; }

/* the phone menu: a compensado sheet, open as #menu:target without JavaScript */
.sheet { display: none; }
/* phones and tablets: below 1024 px the menu and the centred name no longer fit on one line */
@media (max-width: 1023px) {
  :root { --bar: 56px; }
  .bar { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: var(--s-2); }
  .bar-nav, .bar > .lang-switch { display: none; }
  .bar-back { display: flex; grid-column: 1; grid-row: 1; align-items: center; width: 44px; height: 44px; }
  .bar-name { grid-column: 2; justify-self: center; text-align: center; }
  .bar-name a { flex-direction: column; align-items: center; gap: 2px; padding-block: var(--s-1); }
  .bar-name .np-first { font-size: 18px; }
  .bar-name .np-rest { font-size: 13px; }
  .bar-menu { display: flex; grid-column: 3; grid-row: 1; align-items: center; justify-content: flex-end; min-height: 44px; min-width: 44px; white-space: nowrap; }
  .sheet { position: fixed; inset: 0; z-index: 40; overflow: auto; background: var(--compensado); padding: 0 var(--g) var(--s-7); }
  .sheet:target, .sheet.is-open { display: block; }
  .js .sheet:target:not(.is-open) { display: none; }
  .sheet.is-open { animation: sheet-in 240ms var(--ease) both; }
  .sheet.is-closing { animation: sheet-out 160ms var(--ease-in) both; }
  .sheet-top { display: flex; justify-content: flex-end; align-items: center; height: var(--bar); }
  .sheet-close { display: flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: flex-end; }
  .sheet-nav { margin-top: var(--s-6); }
  .sheet-nav a { display: flex; align-items: center; min-height: 52px; font-size: var(--t-l); }
  .sheet .lang-switch { display: flex; gap: var(--s-5); margin-top: var(--s-6); }
  .sheet .lang-switch a { min-height: 44px; min-width: 44px; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheet-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }
/* the home: the bar's copy of the name steps back while the big name is in view */
.name-in-view .page--home .bar-name { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ the foot: the ipe band */
.foot { background: var(--ipe); color: var(--cal); padding: var(--s-8) var(--g) var(--s-6); }
.foot :focus-visible { outline-color: var(--cal); }
.foot ::selection { background: var(--cal); color: var(--ipe); }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-8); align-items: start; }
.foot-name { grid-column: 1 / span 6; margin: 0; line-height: 1.15; }
.foot-name a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .32em; }
.foot-name .np-first { font-size: var(--t-l); }
.foot-nav { grid-column: 8 / span 3; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 32px; }
.foot > .foot-grid > .lang-switch { grid-column: 11 / span 2; justify-self: end; display: flex; gap: var(--s-4); }
.foot .lang-switch a { min-height: 32px; }
.foot-rights { grid-column: 1 / -1; margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--ipe-linha); color: var(--compensado); }
@media (max-width: 760px) {
  .foot { padding-top: var(--s-7); }
  .foot-grid { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-6); }
  .foot-name { grid-column: 1 / -1; }
  .foot-nav { grid-column: 1; }
  .foot-nav a, .foot .lang-switch a { min-height: 44px; }
  .foot > .foot-grid > .lang-switch { grid-column: 2; align-self: end; }
}

/* ------------------------------------------------------------ the one ask, everywhere */
.ask { display: inline-flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-5); line-height: 1.3; border: 1px solid var(--ebano);
  text-decoration: none; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
@media (hover: hover) { a.ask:hover { background: var(--ebano); color: var(--cal); } }
.ask--slot { border-style: dashed; border-color: var(--cinza); color: var(--cinza); }
.ask-address { display: inline-block; margin-left: var(--s-3); }

/* ------------------------------------------------------------ equal-height rows (home and galleries) */
.cine ul, .cine dl, .cine dd, .cine h1, .cine h2, .cine p, .cine figure { margin: 0; }
.cine ul { list-style: none; padding: 0; }
.rows { --r: min(var(--row, 260px), var(--rvw, 22vw)); display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-4); }
.rows::after { content: ""; flex: 1000000 1 0px; }
.rows > li { flex: calc(var(--a) * 1000) 1 calc(var(--a) * var(--r)); max-width: calc(var(--a) * var(--r) * 1.35); min-width: 0; }
.rows .row-img { width: 100%; height: auto; }
/* with JavaScript every row is balanced and filled edge to edge, the last one too (site.js sets --w) */
.rows.is-laid::after { display: none; }
/* until site.js has run, rows wait unseen, so a slow phone never paints the plain wrap and then jumps to the balanced one
   (page-check measured a 0.32 layout shift on Arte with a slowed processor); if the script never arrives, the load event
   shows the plain wrap (.nolive, set by the line in the head) */
.js:not(.live):not(.nolive) .rows { visibility: hidden; }
.rows.is-laid > li { flex: 0 0 var(--w); max-width: none; margin-right: var(--mr, 0px); margin-left: var(--ml, 0px); }
.rows.is-measuring > li { flex: 0 0 1px; }
.rows.is-measuring .cap { overflow-wrap: normal; }
@media (max-width: 600px) { .rows { --r: var(--rpvw, 34vw); gap: var(--s-2); } }
.gap { display: block; width: 100%; aspect-ratio: var(--a, .8); border: 1px dashed var(--linha); }

/* ------------------------------------------------------------ the home */
.opening-frame { position: relative; }
.opening-name { font-weight: 400; line-height: 1; letter-spacing: -.012em; }
.opening-name .np-first, .opening-name .np-rest { font-size: inherit; }
.opening-name .np-rest { display: block; font-size: .5em; letter-spacing: 0; margin-top: .3em; }
/* tall or narrow windows and phones: the picture cut to keep the woman and the work whole, the name under it */
.opening--wide { --Hb: min(calc(var(--vh) - var(--bar) - 150px), calc(100vw / var(--pa)), var(--hmax)); }
.opening--wide .opening-frame { display: flex; flex-direction: column; align-items: center; }
.opening--wide .opening-img { width: min(100vw, calc(var(--Hb) * var(--A))); height: var(--Hb); max-width: none; object-fit: cover; object-position: 50% 50%; }
.opening-name { font-size: clamp(36px, 5.2vw, 64px); padding: var(--s-5) var(--g) 0; align-self: flex-start; }
@media (max-width: 600px) {
  .opening--wide { --Hb: calc(100vw / var(--pa)); }
  .opening-name { padding: var(--s-5) var(--s-4) 0; }
}
/* wide windows: the frame is the whole first screen and the name hangs on the painted wall right of the photograph */
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  /* as tall as the window under the bar; on a window wider than the photograph's shape, as wide as the window,
     running up to 8% under the fold (floor only) rather than leaving bands of plaster at the sides */
  .opening--wide { --Hb: min(max(calc(var(--vh) - var(--bar)), min(calc(100vw / var(--A)), calc((var(--vh) - var(--bar)) * 1.08))), var(--hmax));
    --Wd: calc(var(--Hb) * var(--A)); --W: min(100vw, var(--Wd)); }
  .opening--wide .opening-frame { width: var(--W); height: var(--Hb); margin-inline: auto; display: block; overflow: hidden; }
  .opening--wide .opening-img { width: 100%; height: 100%; object-position: 100% 50%; }
  .opening--wide .opening-name { position: absolute; left: calc(var(--W) - (1 - var(--wall)) * var(--Wd)); top: 40%; padding: 0;
    font-size: calc(var(--Wd) * .031); color: var(--luz); }
  /* the second line stays large text (24 px or more), so 3:1 on the wall is enough; measured worst 3.4:1 */
  .opening--wide .opening-name .np-rest { font-size: max(24px, .56em); }
}
.index { display: grid; row-gap: var(--s-8); padding: var(--s-8) var(--g) var(--s-9); }
.shelf h2 { font-size: var(--t-l); font-weight: 400; line-height: 1.2; margin-bottom: var(--s-5); }
.shelf h2 a { display: inline-flex; align-items: center; min-height: 44px; }
.rows--cards { row-gap: var(--s-6); }
.rows--cards a { display: block; text-decoration: none; }
.cap { display: block; padding-top: var(--s-2); line-height: 1.3; overflow-wrap: anywhere; }
.cap-title { text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .24em; transition: text-decoration-color 160ms var(--ease); }
@media (hover: hover) { .rows--cards a:hover .cap-title { text-decoration-color: currentColor; } }
.cap-year { font-style: italic; color: var(--cinza); }
.cap-note { display: block; color: var(--cinza); }
@media (max-width: 600px) { .index { padding: var(--s-7) var(--s-4) var(--s-8); row-gap: var(--s-7); } .rows--cards { row-gap: var(--s-5); } }

/* ------------------------------------------------------------ a work page: the first screen */
.work { --S: calc(var(--vh) - var(--bar) - var(--strip)); }
.first { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "slides" "strip" "label"; }
.hang { display: contents; }
.slides { grid-area: slides; position: relative; display: grid; justify-items: center; }
/* with JavaScript the shapes share one cell and change in place; without it they stand one under another */
.js .slides > .slide { grid-area: 1 / 1; }
.no-js .slides { row-gap: var(--s-5); }
.slides > .gap { width: min(60vw, 420px); margin: var(--s-7) auto; }
.strip { grid-area: strip; }
.label { grid-area: label; }
.js .slides[data-viewer] > .slide:not(.is-current):not(.is-moving) { display: none; }
.slide.is-moving { z-index: 1; }

/* a shape at its own ratio (every work without a widened room) */
.slide--plate { --h: min(var(--S), calc(var(--max) / var(--a)), calc((100vw - 2 * var(--g)) / var(--a))); }
.slide--plate .v-plate { height: var(--h); width: auto; }
/* a widened room: edge to edge, never cut inside the photograph (data-photo-box, the work_whole gate) */
.slide--room { --H: min(var(--S), var(--hmax), calc((100vw - 2 * var(--g)) / var(--pw))); }
.slide--room .v-room { width: min(100vw, calc(var(--H) * var(--A))); height: var(--H); max-width: none; object-fit: cover; object-position: 50% 50%; }
.slide--room .v-alt, .slide--wide .v-alt { display: none; }
.first--room .slides { min-height: 0; }

/* the click zones: the right four fifths turn forward, the left fifth back */
.zone { position: absolute; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; padding-inline: var(--g); }
.zone-prev { left: 0; width: 20%; cursor: w-resize; }
.zone-next { right: 0; width: 80%; cursor: e-resize; color: var(--luz); }
.zone:active { transform: none; }
.zone:focus-visible { outline: 2px solid var(--luz); outline-offset: -6px; }
.zone .mark { stroke-width: 1.5; filter: drop-shadow(0 0 1px rgba(33, 25, 21, .35)); transition: opacity 200ms var(--ease); }
@media (hover: hover) { .zone-next:hover .mark { opacity: .7; } }
.no-js .zone, .no-js .turn { display: none; }

/* the strip: the title and its year, the counter, the way to the neighbours */
.strip { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: var(--strip); padding-inline: var(--g); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.strip-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); min-width: 0; }
.strip h1 { font-size: var(--t-l); font-weight: 400; line-height: 1.2; }
.strip-year { font-size: var(--t-l); font-style: italic; line-height: 1.2; }
.strip-note { flex-basis: 100%; color: var(--cinza); }
/* a title with its short note (Mesa Escudo, canela preta e maple) takes a taller strip, so the note keeps its distance
   from the hairline under it; --S follows, so the strip still stands at the window's foot */
@media (min-width: 601px) { .work--noted { --strip: 67px; } .work--noted .strip { padding-block: var(--s-2); } }
.turn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: var(--s-1); }
.turn button { display: flex; align-items: center; justify-content: center; width: 40px; height: 38px; }
.count { min-width: 4.2em; text-align: center; font-variant-numeric: tabular-nums; }
.strip-nav { display: flex; gap: var(--s-5); flex: none; }
.strip-nav a { display: flex; align-items: center; min-height: 38px; }

/* the label: the hairline table and the ask */
.label { padding: var(--s-6) var(--g) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-5); align-items: end; }
.label > .lines { grid-column: 1 / span 6; }
.label > .description { grid-column: 1 / span 7; font-size: var(--t-l); max-width: 34em; }
.label > .ask-line { grid-column: 8 / -1; justify-self: end; }
.lines { display: grid; grid-template-columns: minmax(8.5em, max-content) minmax(0, 1fr); border-top: 1px solid var(--linha); }
.lines dt, .lines dd { padding-block: 10px 11px; border-bottom: 1px solid var(--linha); }
.lines dt { font-style: italic; color: var(--cinza); padding-right: var(--s-5); }
.lines dd { margin: 0; font-variant-numeric: tabular-nums; }

/* the plates and the one picture (wide windows, no room). The stage is the lead's own box: as tall as the screen
   less the bar and the strip, never wider than the lead's pixels allow. Every picture of the work stands in that box
   at its own shape, on its foot, against its left edge, so a press on a plate never moves the column beside it.
   - plates: the stage against the window's left edge, the way a room runs to the edges; right of it a column as tall
     as the stage: the ledger hangs from the bar's own rule, the ask under it, and at the foot, level with the
     picture's foot, every picture of the work as a small plate (site.js fits their height to the space left).
   - one: a work that is one picture. The picture and its label hang together in the middle of the window, the label
     beside the picture at eye level (its middle), the way a single work and its label hang on a wall. Measured on
     Num. 5 and Caixa 13 at 1280, 1440 and 1920: the largest field of bare plaster is 18 to 23 percent of the first
     screen, against 35 to 38 with the label at the top and 45 to 55 with the picture against the left edge. */
.plates { display: none; }
.slide--view { display: none; }
/* a view opened on a computer stays shown if the window then narrows below the plates' width */
.js .slides[data-viewer] > .slide--view.is-current, .js .slides[data-viewer] > .slide--view.is-moving { display: block; }
@media (min-width: 900px) {
  .first--plates, .first--one { grid-template-areas: "hang" "strip"; }
  /* --H0, the stage's height: the window less the bar and the strip, never taller than the lead's pixels allow nor
     wider than the space beside the column (--a0 and --m0, the lead's shape and pixel width, sit on .hang) */
  .first--plates .hang, .first--one .hang { grid-area: hang; display: grid; column-gap: var(--s-8); align-items: stretch;
    --H0: min(var(--S), calc(var(--m0) / var(--a0)), calc((100vw - 2 * var(--g) - var(--labelw) - var(--s-8)) / var(--a0))); }
  .first--plates .hang { grid-template-columns: auto minmax(var(--labelw), 1fr); padding-right: var(--g);
    --H0: min(var(--S), calc(var(--m0) / var(--a0)), calc((100vw - var(--g) - var(--labelw) - var(--s-8)) / var(--a0))); }
  .first--one .hang { grid-template-columns: auto minmax(var(--labelw), 26em); justify-content: center; padding-inline: var(--g); }
  /* the wall (fix round, 4 Oct 2026): a work's first screen is one window tall, so the strip stands at the window's
     foot on every work page, as it does under Fêmea's room, and the next work and the foot wait below the fold. A
     picture whose pixels stop short of that height hangs with its label as one group in the middle of the wall, a
     touch above the middle (a padding of 8 percent of the plaster left over, under it), the way a work hangs at eye level.
     hung: a plates lead too short to hold the left edge (every table, Auto Engano, Caixa 11); its column is capped so
     the group stays together, and its plates stand right under the ask instead of at a foot it no longer shares. */
  .first--one .hang, .first--hung .hang { min-height: var(--S); align-items: center;
    padding-bottom: calc((var(--S) - var(--H0)) * .08); }
  .first--hung .hang { grid-template-columns: auto minmax(var(--labelw), 38em); justify-content: center; padding-inline: var(--g);
    --H0: min(var(--S), calc(var(--m0) / var(--a0)), calc((100vw - 2 * var(--g) - var(--labelw) - var(--s-8)) / var(--a0))); }
  .first--plates .slides, .first--one .slides { grid-area: auto; grid-column: 1; justify-items: start; align-items: end; }
  .js .first--plates .slides[data-viewer] { width: calc(var(--H0) * var(--a0)); height: var(--H0); }
  .first--plates .slide, .first--one .slide { align-self: end; justify-self: start; }
  .first--plates .slide--plate .v-plate, .first--one .slide--plate .v-plate {
    width: min(calc(var(--H0) * var(--a0)), calc(var(--H0) * var(--a)), var(--max)); height: auto; }

  .first--plates .label, .first--one .label { grid-area: auto; grid-column: 2; display: flex; flex-direction: column;
    align-items: stretch; row-gap: var(--s-5); padding: 0 0 var(--s-5); }
  .first--one .label { justify-content: center; }
  .first--plates .lines, .first--one .lines { border-top: 0; }
  .first--plates .lines dt, .first--plates .lines dd, .first--one .lines dt, .first--one .lines dd { line-height: 28px; padding-block: 14px 13px; }
  .first--plates .lines dd, .first--one .lines dd { font-size: var(--t-l); }
  .first--plates .lines dt, .first--one .lines dt { padding-top: 16px; padding-bottom: 11px; }
  .first--plates .description, .first--one .description { font-size: var(--t-l); max-width: 34em; }
  .first--hung .label { padding: 0; }
  .first--plates .label > .ask-line { align-self: flex-start; }
  .first--one .label > .ask-line { align-self: flex-start; }
  /* on a computer the plates are the gallery (each opens large in the stage); the gallery below is the phone's and the
     page's without JavaScript, so no picture is shown twice on one screen */
  .live .views--plated { display: none; }
  /* until site.js has run, the plated gallery waits hidden: it stands just under the first screen, so the browser would
     fetch its larger files at once, and then paint the small plates from those same files (the painted gate's
     over-fetch). If the script never arrives, the load event shows it (.nolive, set by the line in the head). */
  .js:not(.live):not(.nolive) .views--plated { display: none; }
  /* the plates' pictures wait until the script has fitted their height, so the browser fetches the right file once */
  .plates:not(.is-fit) .plate-img { display: none; }
  /* a work whose lead has no plate: the stage, showing another picture, brings the lead back on a press */
  .slides[data-home].is-away { cursor: w-resize; }
  /* .live: set by site.js itself, so a page whose script did not arrive keeps its gallery and no empty plates */
  .live .first--plates .plates { display: grid; row-gap: var(--s-4); margin-top: auto; }
  .live .first--hung .plates { margin-top: 0; }
  .plate-group { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
  .plate-group li { flex: none; width: var(--w, calc(var(--a) * 96px)); margin-right: var(--mr, 0px); }
  .plate-group button { display: block; width: 100%; padding: 0 0 var(--s-2); border-bottom: 2px solid transparent;
    transition: border-color 200ms var(--ease); }
  .plate-group button[aria-current="true"] { border-bottom-color: var(--ebano); }
  .plate-group button:active { transform: none; }
  .plate-img { width: 100%; height: auto; }
  @media (hover: hover) { .plate-group button:not([aria-current="true"]):hover { border-bottom-color: var(--linha); } }
}

/* phones: the photograph itself at full width (a room shows its own photograph), the strip, the label */
@media (max-width: 600px) {
  :root { --g: 16px; }
  .slide--plate .v-plate { width: min(100vw, var(--max)); height: auto; }
  .slide--room .v-room { display: none; }
  .slide--room .v-alt { display: block; width: min(100vw, var(--max)); height: auto; }
  .slide--wide .v-plate { display: none; }
  .slide--wide .v-alt { display: block; width: min(100vw, var(--maxmob)); height: auto; }
  .zone-next { justify-content: flex-end; }
  .zone .mark { display: none; }
  .strip { flex-wrap: wrap; padding-block: var(--s-3); border-top: 0; border-bottom: 0; }
  .turn { position: static; transform: none; margin-left: auto; }
  .turn button { width: 44px; height: 44px; }
  .strip-nav { display: none; }
  .label { display: block; padding-top: var(--s-5); }
  .cine .label > * + * { margin-top: var(--s-5); }
  .lines { grid-template-columns: minmax(7.5em, max-content) minmax(0, 1fr); }
  .label > .ask-line { justify-self: start; }
}

/* ------------------------------------------------------------ the gallery and the neighbours */
.views { padding: var(--s-8) var(--g) 0; }
.views h2 { font-size: var(--t-l); font-weight: 400; line-height: 1.2; margin-bottom: var(--s-5); }
.chain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--s-8); background: var(--compensado); }
.chain a { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-6) var(--g); min-height: 44px; text-decoration: none; }
.chain-next { grid-column: 2; align-items: flex-end; text-align: right; }
.chain-dir { font-style: italic; color: var(--cinza); }
.chain-name { font-size: var(--t-l); line-height: 1.2; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color 160ms var(--ease); }
@media (hover: hover) { .chain a:hover .chain-name { text-decoration-color: currentColor; } }
@media (max-width: 600px) { .views { padding-top: var(--s-7); } .chain { margin-top: var(--s-7); } .chain a { padding: var(--s-5) var(--s-4); } }

/* ------------------------------------------------------------ the index pages: Arte, Móveis, Exposições, Sobre, Contato, 404
   One grid for all of them, the same 12 columns as the foot: the names stand in the first three columns (the page's
   name, a group's name, a table's name), what they name runs from the fourth column to the right gutter. Every
   section opens on a hairline, the way the work page's table hangs from the bar's rule. */
.cine--index { padding: 0 var(--g) var(--s-9); }
.page-head, .group, .ledger-block, .reach, .chapter, .band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); }
.page-head { row-gap: var(--s-5); align-items: baseline; padding: var(--s-7) 0 var(--s-8); }
.page-head h1 { grid-column: 1 / span 3; font-size: var(--t-l); font-weight: 400; line-height: 1.2; }
.page-head .intro { grid-column: 4 / span 7; font-size: var(--t-l); line-height: 1.4; max-width: 34em; text-wrap: pretty; }
.page-head .ask-line { grid-column: 4 / span 7; }
.cine--index h2 { font-size: var(--t-l); font-weight: 400; line-height: 1.2; text-wrap: balance; }

/* Arte: each group's name and text on the left, its works in rows on the right, the boxes' line at the column's foot */
.group { grid-template-rows: auto 1fr; padding-top: var(--s-4); border-top: 1px solid var(--linha); }
.group + .group { margin-top: var(--s-8); }
.group-head { grid-column: 1 / span 3; grid-row: 1; padding-right: var(--s-4); }
.group-head p { margin-top: var(--s-3); max-width: 26em; text-wrap: pretty; }
.group > .rows { grid-column: 4 / -1; grid-row: 1 / span 2; padding-top: var(--s-2); }
.group-ask { grid-column: 1 / span 3; grid-row: 2; align-self: end; padding-bottom: var(--s-7); }

/* Móveis: one list; a piece that opens a new room stands a wider gap from the one before it (site.js keeps the gap
   only inside a row, never at a row's start) */
.pieces { border-top: 1px solid var(--linha); padding-top: var(--s-5); }
.rows--rooms { --room-gap: 48px; }
.no-js .rows--rooms > li[data-room-start]:not(:first-child) { margin-left: var(--room-gap); }

/* the hairline ledger: Exposições' records and its press */
.ledger-block + .ledger-block { margin-top: var(--s-8); }
.ledger-block > h2 { grid-column: 1 / span 3; padding-top: 13px; }
.ledger-block > .ledger, .ledger-block > .rows { grid-column: 4 / -1; }
.ledger-block--pictures > .rows { padding-top: var(--s-4); border-top: 1px solid var(--linha); }
/* one grid for the whole table (each entry a subgrid), so the year column is as wide as its widest year, "2021/2022" too */
.ledger { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linha);
  display: grid; grid-template-columns: minmax(7.5em, max-content) minmax(0, 1fr) minmax(0, max-content); column-gap: var(--s-5); }
.entry { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline;
  padding: 13px 0 14px; border-bottom: 1px solid var(--linha); }
@supports not (grid-template-columns: subgrid) { .entry { grid-template-columns: 7.5em minmax(0, 1fr) minmax(0, max-content); column-gap: var(--s-5); } }
.entry-when { font-size: var(--t-l); line-height: 28px; font-variant-numeric: tabular-nums; }
.entry-when.is-undated { font-size: var(--t-s); font-style: italic; color: var(--cinza); }
.entry-main { display: block; font-size: var(--t-l); line-height: 28px; }
.entry-where { display: block; color: var(--cinza); }
.entry-kind { font-style: italic; color: var(--cinza); text-align: right; }
.entry-pictures { grid-column: 2 / -1; padding-top: var(--s-4); }

/* rows of pictures kept at their own size: none grows past its ceiling (archive photographs are small and old) */
.rows--own > li { max-width: min(var(--cap, 100%), calc(var(--a) * var(--r) * 1.35)); }
.rows--own .row-img { max-width: var(--cap, 100%); }

/* Sobre: the story a section at a time, its pictures beside the words, the side alternating */
.chapter { row-gap: var(--s-6); align-items: start; padding-top: var(--s-4); border-top: 1px solid var(--linha); }
.chapter + .chapter, .chapter + .band, .band + .chapter { margin-top: var(--s-8); }
.chapter h2 { font-style: italic; margin-bottom: var(--s-4); }
.chapter-body p { font-size: var(--t-l); line-height: 1.45; max-width: 30em; text-wrap: pretty; }
.chapter-body p + p { margin-top: .7em; }
.chapter--left .chapter-text { grid-column: 1 / span 5; }
.chapter--left .chapter-pictures { grid-column: 7 / -1; }
.chapter--right .chapter-text { grid-column: 8 / -1; grid-row: 1; }
.chapter--right .chapter-pictures { grid-column: 1 / span 6; grid-row: 1; }
.chapter-pictures { padding-top: var(--s-2); }
.chapter-lead .lead-img { width: 100%; max-width: var(--cap); height: auto; }
.chapter-more { grid-column: 1 / -1; }
/* sections with no picture share a compensado band: side by side when there are two, in two columns when alone */
.band { margin-inline: calc(-1 * var(--g)); padding: var(--s-7) var(--g) var(--s-8); background: var(--compensado); row-gap: var(--s-7); }
.band .chapter--words { display: block; grid-column: span 6; padding: 0; border: 0; margin: 0; }
.band--one .chapter--words { grid-column: 1 / -1; }
.band--one .chapter-body { columns: 2; column-gap: var(--s-7); }
.band--one .chapter-body p { max-width: none; break-inside: avoid-column; }
.band ::selection { background: var(--cal); }

/* Contato and the 404: the one email ask as a button nobody can miss */
.reach { row-gap: var(--s-6); padding-bottom: var(--s-8); }
.reach-ask, .reach-who { grid-column: 4 / span 7; }
.reach-ask .ask:not(.ask--slot), .ask-like { display: inline-flex; align-items: center; min-height: 64px; padding: 0 var(--s-6); font-size: var(--t-l);
  background: var(--ebano); color: var(--cal); border: 1px solid var(--ebano); text-decoration: none;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease); }
.reach-ask .ask--slot { min-height: 64px; padding: 0 var(--s-6); font-size: var(--t-l); }
@media (hover: hover) { .reach-ask a.ask:hover, .ask-like:hover { background: var(--ipe); border-color: var(--ipe); color: var(--cal); } }
.ask-like:active { transform: scale(.97); }
.reach-ask .ask:focus-visible, .ask-like:focus-visible { outline-color: var(--ebano); }
.reach-who span { display: block; }
.reach-who span:first-child { font-size: var(--t-l); line-height: 1.3; }
.reach-who span + span { color: var(--cinza); }

/* tablets: the names stand over what they name */
@media (max-width: 1023px) {
  .group, .ledger-block, .chapter, .band { display: block; }
  .group-head { padding-right: 0; }
  .group > .rows { padding-top: var(--s-5); }
  .group-ask { padding: var(--s-5) 0 0; }
  .ledger-block > h2 { padding-top: 0; margin-bottom: var(--s-4); }
  .chapter-pictures { padding-top: var(--s-5); }
  .chapter-more { padding-top: var(--s-5); }
  .band .chapter--words + .chapter--words { margin-top: var(--s-7); }
  .band--one .chapter-body { columns: 1; }
}
@media (max-width: 760px) {
  .page-head, .reach { display: block; }
  .page-head { padding: var(--s-6) 0 var(--s-7); }
  .page-head .intro, .page-head .ask-line { margin-top: var(--s-4); }
  .cine .reach-who { margin-top: var(--s-6); }
  .ledger { grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s-4); }
  .entry-kind { grid-column: 2; text-align: left; }
  .entry-pictures { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .cine--index { padding-inline: var(--s-4); }
  /* a phone shows rooms of furniture as pairs; a wider gap inside a pair reads as a fault, so it goes */
  .rows--rooms { --room-gap: 0px; }
  .no-js .rows--rooms > li[data-room-start]:not(:first-child) { margin-left: 0; }
  /* the story at the reading size: 22 px leaves about 30 letters a line on a phone */
  .chapter-body p { font-size: var(--t-s); line-height: 1.6; }
  .band { margin-inline: calc(-1 * var(--s-4)); padding-inline: var(--s-4); }
  .group + .group, .ledger-block + .ledger-block, .chapter + .chapter, .chapter + .band, .band + .chapter { margin-top: var(--s-7); }
  .reach-ask .ask, .ask-like { width: 100%; justify-content: center; text-align: center; padding-block: var(--s-3); }
}

/* ------------------------------------------------------------ reduced motion: no travel, fades stay short */
@media (prefers-reduced-motion: reduce) {
  .sheet.is-open { animation-name: fade-in; }
  .sheet.is-closing { animation-name: fade-out; }
  button:active, .ask:active, .ask-like:active, .bar-back:active, .bar-menu:active, .sheet-close:active { transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }