/* ==========================================================================
   vizibil.art — shared tokens and components
   Loaded by every page of the site. Components read tokens only: every
   colour, length, weight and line-height below the token block is a var().

   Contents
   01 Fonts            06 Buttons, links, chips     11 News
   02 Tokens           07 Header and navigation     12 Project, impact, team,
   03 Base             08 Opening carousel              support
   04 Layout, bands    09 Definition, principles    13 Footer, form fields
   05 Headings         10 Rail, silhouette, artwork 14 Dialog
                                                    15 Responsive, preferences
   Inner pages (each section carries its own breakpoints)
   16 Current page, breadcrumb, page head     21 Artwork grid, any count
   17 Figures: every artist on horizons      22 Collections: filters, count,
   18 Artist head                                empty state, load more
   19 Spec list                              23 Long-form text, event block,
   20 Artwork page, purchase                     legal text, error page
                                             24 Forms and form windows
   25 Phase 2: stack, offset, page index, news list, post, entries,
      model form
   26 Despre: the head and programs, the people, partners' logos, project
      pages, credit

   Breakpoints (max-width, mirrored in --bp-* for site.js)
     sm 560px   phones
     md 53.75em navigation collapses, two-column sections stack: 860px at the
                browser's default text size, and later as the visitor enlarges
                the text (Chrome "Large", 20px: 1075px), so the header changes to
                the menu before its links no longer fit. "Up" is 53.8125em (861px)
     lg 1100px  tight two-column

   A page opts in to script-dependent layout with <html class="js">, set by a
   one-line inline script in the head. Without it the navigation stays inline.
   ========================================================================== */

/* 01 Fonts: subsets (docs/design.md › Typography) ----------------------- */

@font-face {
  font-family: Raleway;
  src: url("fonts/raleway-500-600.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Raleway;
  src: url("fonts/raleway-italic-500-600.woff2") format("woff2");
  font-weight: 500 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url("fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url("fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 02 Tokens --------------------------------------------------------------- */

:root {
  /* Brand palette (docs/design.md › Colours and bands) */
  --c-canvas: #fff9ef;
  --c-paper: #fffdf8;
  --c-linen: #f5f0e6;
  --c-ink: #211f1b;
  --c-ink-deep: #151310;
  --c-muted: #5b554d;
  --c-orange: #e95b25;
  --c-orange-deep: #a83c16;
  --c-cobalt: #3633ae;
  --c-cobalt-wash: #eae8ff;
  --c-yellow: #edc557;
  --c-rule-300: #d7d0c5;
  --c-rule-450: #cfc6b7;
  /* Sampled from the supplied turquoise watercolour, lifted toward paper */
  --c-teal-wash: #d8e9e6;

  /* Colour roles */
  --ground: var(--c-canvas);
  --surface: var(--c-paper);
  --surface-sunk: var(--c-linen);
  --ink: var(--c-ink);
  --muted: var(--c-muted);
  --rule: var(--c-ink);
  --rule-soft: var(--c-rule-450);
  --accent-action: var(--c-orange);
  --accent-action-hover: color-mix(in srgb, var(--c-orange) 84%, var(--c-paper));
  --accent-project: var(--c-cobalt);
  --accent-impact: var(--c-yellow);
  --accent-wash: var(--c-teal-wash);
  --on-action: var(--c-ink);
  --on-project: var(--c-paper);
  --on-project-muted: var(--c-cobalt-wash);
  --on-impact: var(--c-ink);
  --on-dark: var(--c-canvas);
  --on-dark-muted: var(--c-rule-300);
  --rule-on-dark: color-mix(in srgb, var(--c-canvas) 24%, transparent);
  --rule-on-colour: color-mix(in srgb, var(--c-ink) 42%, transparent);
  --scrim: color-mix(in srgb, var(--c-ink-deep) 62%, transparent);
  /* the video window covers the whole screen: the page behind it all but gone */
  --scrim-full: color-mix(in srgb, var(--c-ink-deep) 96%, transparent);
  --shadow-edge: color-mix(in srgb, var(--c-ink) 48%, transparent);
  --shadow-paper: color-mix(in srgb, var(--c-ink) 30%, transparent);
  --shadow-raised: 0 1.125rem 2.5rem -1rem color-mix(in srgb, var(--c-ink) 38%, transparent);
  --shadow-dialog: 0 1.5rem 4rem -1.25rem color-mix(in srgb, var(--c-ink-deep) 55%, transparent);
  --shadow-marker: 0 0.125rem 0.5rem var(--shadow-paper);
  --shadow-figure: drop-shadow(0 0 0.5px var(--shadow-edge)) drop-shadow(0 0.125rem 0.3rem var(--shadow-paper));

  /* Defaults a band can override */
  --band-bg: var(--ground);
  --band-ink: var(--ink);
  --band-muted: var(--muted);
  --band-rule: var(--rule);
  --band-rule-soft: var(--rule-soft);
  --focus: var(--c-cobalt);
  --tag-ink: var(--c-cobalt);
  --btn-bg: var(--accent-action);
  --btn-bg-hover: var(--accent-action-hover);
  --btn-ink: var(--on-action);
  --btn-rule: var(--ink);

  /* Matter */
  --tex-linen: url("img/linen-tile.webp");
  --tex-linen-light: url("img/linen-tile-light.webp");
  --tex-linen-size: 12rem;
  --wash-teal: url("img/wash-teal.webp");
  --brush-frame: url("img/frame-brush.webp");
  --status-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  --status-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v9M12 18.5v.5'/%3E%3C/svg%3E");

  /* Type */
  --font-display: Raleway, "Helvetica Neue", Arial, sans-serif;
  --font-text: Poppins, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.75rem;                                          /* 12  chips, tags */
  --text-sm: 0.8125rem;                                        /* 13  captions, utility links */
  --text-ui: 0.9375rem;                                        /* 15  navigation, buttons, links */
  --text-base: 1rem;                                           /* 16  body */
  --text-md: 1.125rem;                                         /* 18  lead, names */
  --text-lg: clamp(1.1875rem, 1.05rem + 0.68vw, 1.375rem);     /* 19–22  item headings */
  --text-xl: clamp(1.375rem, 0.86rem + 1.95vw, 2.25rem);       /* 22–36  sub headings */
  /* The large-screen switch: 0 keeps titles, display and section space at their 1536px
     size on any larger window; 1 lets them grow with the page grid from 1536 to 1920
     (titles 54 to 60, display 68 to 76, section space 100 to 120) and stop there.
     Body, lead, UI and caption sizes never grow. */
  --large-type: 0;
  --text-2xl: clamp(1.625rem, 1.19rem + 2.2vw, 3.4rem + var(--large-type) * clamp(0rem, (100vw - 96rem) * 0.35 / 24, 0.35rem));  /* 26–54 (60)  titles */
  --text-3xl: clamp(2rem, 1.25rem + 3.6vw, 4.25rem + var(--large-type) * clamp(0rem, (100vw - 96rem) / 48, 0.5rem));            /* 32–68 (76)  display */
  --leading-flat: 1;
  --leading-tight: 1.04;
  --leading-heading: 1.12;
  --leading-snug: 1.25;
  --leading-copy: 1.45;
  --leading-body: 1.6;
  --tracking-display: -0.015em;
  --tracking-none: 0;
  --tracking-label: 0.09em;
  --weight-text: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-display: 600;
  --measure: 62ch;
  --measure-lead: 48ch;
  --measure-narrow: 40ch;
  --measure-note: 32ch;
  --measure-title-sm: 13ch;
  --measure-title-md: 18ch;

  /* Links: one language. At rest a link is underlined thin or, where the
     context already says "link" (navigation, a card), not at all. On hover
     and focus every link gets the same strong underline. Nothing recolours. */
  --underline: 1px;
  --underline-strong: 2px;
  --underline-offset: 0.3em;
  --media-hover-scale: 1.035;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-section: clamp(3.5rem, 7vw, 6.25rem + var(--large-type) * clamp(0rem, (100vw - 96rem) * 5 / 96, 1.25rem));
  --space-head: clamp(1.75rem, 3.5vw, 2.75rem);
  --space-split: clamp(2rem, 6vw, 6rem);
  --space-panel: clamp(2rem, 4.4vw, 4rem);
  --space-column: clamp(1rem, 2.6vw, 3rem);
  --gutter: clamp(1rem, 0.3rem + 2.2vw, 1.5rem);
  /* As a negative margin, moves a line box's edge onto the cap height (top) or the
     baseline (bottom): Poppins and Raleway centre their capitals in the line, so the
     leading over the cap height equals the space under the baseline. It resolves
     on the element that uses it. */
  --leading-trim: calc((1cap - 1lh) / 2);
  /* Raleway's cap height per em (710 / 1000): lets a lead find the cap height of the
     title beside it, which --leading-trim cannot, as it resolves on its own element */
  --cap-display: 0.71;

  /* Shape and size */
  --radius-0: 0;
  --hairline: 0.5px;
  --border: 1px;
  --border-strong: 3px;
  --border-heavy: 6px;
  --focus-width: 3px;
  --focus-offset: 3px;
  /* The page grid: 1380px up to a 1536px window, then it grows by 55px for every 96px
     of window until it is 1600px wide at 1920 and stays there, centred. The extra width
     goes to columns and gaps; reading measures (--measure*) and body type do not grow. */
  --container: clamp(86.25rem, 86.25rem + (100vw - 96rem) * 55 / 96, 100rem);
  --control: 3rem;
  --control-sm: 2.75rem;
  --check: 1.25rem;
  --icon: 1.375rem;
  --icon-stroke: 1.75;
  --chip-pad: 0.3em 0.6em;
  --lift: -2px;
  --opacity-disabled: 0.45;
  --opacity-wash-strong: 0.6;
  --frame-gap: 0.1em 0.32em;
  --status-icon: 1.25em;
  --status-icon-shift: 0.12em;

  /* Header: the row is exactly as tall as the logo lockup, so the token is the rendered height */
  --logo-w: 9.25rem;
  --logo-ratio: 0.625;         /* lockup height / width */
  --logo-inset: -0.086;        /* transparent padding inside the lockup, as a share of its width */
  --header-row: calc(var(--logo-w) * var(--logo-ratio));
  --header-h: calc(var(--header-row) + var(--border));
  /* The band of the window the sticky header covers, which scroll targets and sticky asides
     keep clear of: the header's height, 0px where the header scrolls away (a short window) */
  --header-stuck: var(--header-h);
  --nav-gap: clamp(1rem, 2vw, 2rem);
  --nav-link-h: 3.75rem;

  /* Component dimensions */
  /* The tallest the hero runs grows with the page grid, 38rem at 1536 to 42rem at 1920 */
  --hero-h: clamp(27rem, calc(100svh - var(--header-h) - 8rem), 38rem + clamp(0rem, (100vw - 96rem) / 6, 4rem));
  --hero-copy-min: 22rem;
  --hero-copy-top: calc(var(--hero-h) * 0.27);
  --hero-copy-min-sm: 14.5rem;
  --hero-media-max: 62svh;
  --hero-wash: min(26rem, 60vw);
  --event-date-w: 3rem;
  --upcoming-head-w: 8rem;
  --frame-border: 0.22em;
  --frame-width: 0.62em;
  --frame-outset: 0.12em;
  --headword-rise: -0.12em;
  /* Where the headword's capitals sit below the top of its column, as a share of the
     Display size: its rise (-0.12), the frame's top padding and border, which the word
     carries too (0.26), and its own leading over the cap height (about 0.15 as Raleway
     draws it); measured level within a pixel at 861-1920 */
  --headword-cap: 0.29;
  --frame-pad: 0.04em 0.3em 0.1em;
  --rail-card: clamp(9.5rem, 17.4vw, 15rem);
  --rail-gap: clamp(1rem, 2.2vw, 2rem);
  --rail-ratio: 1.25;          /* silhouette box: 4 wide, 5 tall */
  --rail-inset: 0.5rem;
  --rail-headroom: calc(var(--rail-inset) + var(--space-3)); /* above the cards: a hovered figure grows up into it */
  --count-w: 3em;
  --rail-wash: 30rem;
  --rail-wash-show: clamp(7.5rem, 14vw, 13rem);
  --news-side-min: 20rem;
  --thumb: clamp(9.5rem, 15vw, 14rem);
  --thumb-sm: 5.5rem;
  --project-h: clamp(26rem, 38vw, 34rem + clamp(0rem, (100vw - 96rem) / 4, 6rem));  /* 34rem at 1536, 40rem from 1920 */
  --footer-logo-w: 10.5rem;
  --dialog-w: 36rem;

  /* Inner pages (sections 16–24) */
  --radius-round: 50%;         /* radio buttons only: a square radio reads as a checkbox */
  --check-mark: 0.8125rem;     /* the tick inside a --check box */
  --radio-dot: 0.5rem;
  --anpc-w: 15.625rem;         /* 250 × 50 px, fixed by ANPC order 449/2022 */
  --anpc-h: 3.125rem;
  --figures-cols: 5;
  --figures-pad: clamp(0.5rem, 1.6vw, 1.75rem);
  --figure-height: 125%;       /* a 4:5 figure's height as a share of its width: where the horizon runs */
  --artist-figure-w: clamp(13rem, 24vw, 21rem);
  --artist-figure-w-sm: clamp(9.5rem, 17vw, 14.5rem);
  --artist-figure-w-md: clamp(11rem, 28vw, 15rem);
  --artist-figure-phone: 58%;
  /* A work's page shows the whole work in the first screen: the mat is at most the window
     less the header, the breadcrumb strip and --work-pad above and below it */
  --crumbs-h: calc(var(--control-sm) + var(--border));
  --work-pad: var(--space-6);
  --work-fit: max(26rem, 100svh - var(--header-h) - var(--crumbs-h) - 2 * var(--work-pad));
  --work-mat: var(--space-6);
  --view-thumb: 4.5rem;
  --filter-min: 12rem;
  --spec-term-min: 6.5rem;
  --order-thumb: 4.5rem;
  --dialog-form-w: 46rem;
  --textarea-h: 8.5rem;
  --select-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --select-icon-size: 1.125rem;

  /* Phase 2 pages (section 25) */
  --figure-portrait: 26rem;                  /* the widest a portrait photograph runs in long text */
  --blank-line: 7rem;                        /* a line to fill in on the withdrawal model form */

  /* Layers */
  --z-under: -1;
  --z-raised: 2;
  --z-header: 100;
  --z-skip: 300;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 640ms;
  --rise: 0.75rem;

  /* Breakpoints, for site.js */
  --bp-sm: 560px;
  --bp-md: 53.75em;   /* 860px at the default text size (Breakpoints, above) */
  --bp-lg: 1100px;
  --bp-xl: 1360px;   /* the Despre head only */
}

/* 03 Base ----------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-stuck) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--ground);
  color: var(--ink);
  font: var(--weight-text) var(--text-base) / var(--leading-body) var(--font-text);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* Linen: one declaration of the weave. Anything that is a ground gets it
   through this rule (or the .linen class); components only set a colour. */
body,
.linen,
.band,
.site-header,
.hero__stage,
.upcoming__row,
.dialog {
  background-image: var(--tex-linen);
  background-size: var(--tex-linen-size);
  background-blend-mode: multiply;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration-thickness: var(--underline);
  text-underline-offset: var(--underline-offset);
}

a:hover,
a:focus-visible {
  text-decoration-thickness: var(--underline-strong);
}

button,
input {
  font: inherit;
  color: inherit;
}

strong {
  font-weight: var(--weight-strong);
}

p,
figcaption,
li,
dd {
  text-wrap: pretty;
}

::placeholder {
  color: var(--muted);
  opacity: 1;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--on-dark);
  font-weight: var(--weight-strong);
  text-decoration: none;
  translate: 0 -200%;
}

.skip-link:focus {
  translate: 0;
  outline-color: var(--c-yellow);
}

/* A run that must not break (a hyphenated word, a phrase). It generates no box of its
   own (display: contents), so in a flex or grid container (a .text-link, a .btn, a
   contents link) its text stays one item with the words around it and keeps the spaces
   between them; a boxed span became a separate flex item and the spaces either side of
   it collapsed ("Cere-neformularul", owner, 11 October 2026). It still holds: white-space
   is inherited by the text inside it. */
.nowrap {
  display: contents;
  white-space: nowrap;
}

/* A held run the script found wider than its column (site.js, initHold): it wraps like
   the text around it */
.nowrap[data-hold-released] {
  white-space: normal;
}

/* Short copy is balanced so no line ends on a single word: leads, notes,
   labels, anything of a few lines. Long paragraphs keep text-wrap: pretty. */
.balance,
.lead,
.muted,
.text-link,
.section-head > p,
.section-head__text > p,
.slide__fact,
.principles li > span,
.principles li > p,
.event__place,
.artwork-card__medium,
.news-item p,
.project__copy p,
.ledger__item p,
.team__statement p,
.support__copy > p,
.site-footer__brand p,
.check span,
.choice span,
.dialog p,
.status,
.specs dt,
.link-list li {
  text-wrap: balance;
}

/* 04 Layout and bands ----------------------------------------------------- */

.wrap {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* A band is a full-width colour field. It sets local roles; everything
   inside reads --band-* and --focus, so components work on any ground. */
.band {
  position: relative;
  padding-block: var(--space-section);
  border-bottom: var(--border) solid var(--rule);
  background-color: var(--band-bg);
  color: var(--band-ink);
  overflow-x: clip;
}

.band--surface {
  --band-bg: var(--surface);
}

.band--sunk {
  --band-bg: var(--surface-sunk);
}

.band--wash {
  --band-bg: var(--accent-wash);
  --band-muted: var(--ink);
  --band-rule-soft: var(--rule-on-colour);
  --tag-ink: var(--ink);
}

.band--project {
  --band-bg: var(--accent-project);
  --band-ink: var(--on-project);
  --band-muted: var(--on-project-muted);
  --band-rule: var(--on-project);
  --band-rule-soft: var(--rule-on-dark);
  --focus: var(--c-yellow);
  --btn-rule: var(--on-project);
  --tag-ink: var(--on-project);
}

.band--impact {
  --band-bg: var(--accent-impact);
  --band-ink: var(--on-impact);
  --band-muted: var(--on-impact);
  --band-rule-soft: var(--rule-on-colour);
  --focus: var(--ink);
  --tag-ink: var(--ink);
}

.band--support {
  --band-bg: var(--accent-action);
  --band-ink: var(--on-action);
  --band-muted: var(--on-action);
  --band-rule-soft: var(--rule-on-colour);
  --focus: var(--ink);
  --btn-bg: var(--ink);
  --btn-bg-hover: var(--c-ink-deep);
  --btn-ink: var(--c-paper);
  --tag-ink: var(--ink);
  /* ink on orange is 4.69:1, close to the limit: here the weave lightens the ground instead of darkening it */
  background-image: var(--tex-linen-light);
  background-blend-mode: screen;
}

.band--ink {
  --band-bg: var(--ink);
  --band-ink: var(--on-dark);
  --band-muted: var(--on-dark-muted);
  --band-rule: var(--rule-on-dark);
  --band-rule-soft: var(--rule-on-dark);
  --focus: var(--c-yellow);
  --tag-ink: var(--on-dark);
  background-image: none;
}

.band--flush {
  padding-block: 0;
}

/* Two-column splits */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-split);
  align-items: start;
}

.split--lead {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: baseline;
}

/* Top-aligned: a title's and a paragraph's first lines carry about the same leading
   over their cap height, so their tops sit level */
.split--half {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Image box: the image always covers a box with a declared ratio.
   Absolute positioning keeps the image out of grid-row sizing. */
.media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--ratio, 16 / 10);
  background: var(--surface-sunk);
}

/* A <picture> (large-screen widths, see the build's withLarge) adds no box: its image lays
   out as the box's own */
picture {
  display: contents;
}

.media > img,
.media > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: scale var(--dur-slow) var(--ease-out);
}

/* 05 Headings ---------------------------------------------------------------
   The look lives on classes, so any heading level can take any size.
   Elements only get a sane default (the item treatment). */

h1,
h2,
h3,
h4,
h5,
h6,
.h-display,
.h-title,
.h-sub,
.h-item {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-none);
  text-wrap: balance;
}

.h-display {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.h-title {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.h-sub {
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
}

.h-item {
  font-size: var(--text-lg);
}

/* Responsive step: a sub heading that takes the title size once sections are
   two-column (above the md breakpoint). For long headings that would run to
   three lines at title size on a phone. */
@media (min-width: 53.8125em) {
  .h-sub--title-up {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
  }
}

.h-name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}

/* The one small heading: strips and utility blocks (upcoming, footer columns) */
.h-label {
  font: var(--weight-strong) var(--text-xs) / var(--leading-snug) var(--font-text);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.lead {
  max-width: var(--measure-lead);
  font-size: var(--text-md);
}

.muted {
  color: var(--band-muted);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-5) var(--space-7);
  align-items: baseline;
  margin-bottom: var(--space-head);
}

.section-head > p,
.section-head__text > p {
  max-width: var(--measure-lead);
  color: var(--band-muted);
  font-size: var(--text-md);
}

/* A head whose lead has a link under it (Despre › the people: the volunteer link) */
.section-head__text > .text-link {
  margin-top: var(--space-2);
}

.section-head--controls {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
}

/* 06 Buttons, links, chips ------------------------------------------------ */

/* The one button. Bands re-colour it through --btn-*; its shape never changes. */
.btn {
  display: inline-flex;
  min-height: var(--control);
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border: var(--border) solid var(--btn-rule);
  border-radius: var(--radius-0);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font: var(--weight-strong) var(--text-ui) / var(--leading-snug) var(--font-text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, translate var(--dur-base) var(--ease-out);
}

.btn:hover {
  background: var(--btn-bg-hover);
  translate: 0 var(--lift);
}

.btn:active {
  translate: 0;
}

.btn--compact {
  min-height: var(--control-sm);
  padding: var(--space-2) var(--space-4);
}

/* Link treatments. Rest states differ by context; hover and focus are one
   rule for all of them (see the link tokens). No arrows anywhere. */
.text-link {
  display: inline-flex;
  min-height: var(--control-sm);
  align-items: center;
  font: var(--weight-strong) var(--text-ui) / var(--leading-copy) var(--font-text);
  text-decoration-line: underline;
}

button.text-link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration-thickness: var(--underline);
  text-underline-offset: var(--underline-offset);
}

.quiet-link {
  text-decoration-line: none;
}

/* A card's title link, stretched over the whole card */
.card-link {
  text-decoration-line: none;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.text-link:hover,
.text-link:focus-visible,
.quiet-link:hover,
.quiet-link:focus-visible,
.card-link:focus-visible,
.artwork-card:hover .card-link,
.news-item:hover .card-link,
.event:hover .card-link,
.entry:hover .card-link,
.silhouette-card:hover .silhouette-card__name,
.silhouette-card:focus-visible .silhouette-card__name {
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-strong);
  text-underline-offset: var(--underline-offset);
}

/* The focus ring of a stretched link wraps the card: it is drawn on the
   link's own stretched ::after, so no relational selector is needed. */
.card-link:focus-visible {
  outline: none;
}

.card-link:focus-visible::after {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* Square control for true previous / next actions and for closing */
.icon-btn {
  display: inline-grid;
  width: var(--control);
  height: var(--control);
  flex: none;
  place-items: center;
  padding: 0;
  border: var(--border) solid var(--band-rule);
  border-radius: var(--radius-0);
  background: transparent;
  color: var(--band-ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.icon-btn svg {
  width: var(--icon);
  height: var(--icon);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn:hover:not([aria-disabled="true"]) {
  background: var(--band-ink);
  color: var(--band-bg);
}

.icon-btn[aria-disabled="true"] {
  border-color: var(--band-rule-soft);
  color: var(--band-muted);
  cursor: default;
}

.icon-btn[aria-disabled="true"] svg {
  opacity: var(--opacity-disabled);
}

/* Quiet variant: no box at rest, the same ink fill on hover. Used for
   previous / next pairs, so every stepper on the site is one family. */
.icon-btn--quiet {
  width: var(--control-sm);
  height: var(--control-sm);
  border-color: transparent;
}

.icon-btn--quiet[aria-disabled="true"] {
  border-color: transparent;
}

/* Stepper: previous arrow, position, next arrow, as one inline group */
.control-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.control-group__count {
  position: relative;
  min-width: var(--count-w);
  padding-block: var(--space-2);
  color: var(--band-ink);
  font: var(--weight-strong) var(--text-sm) / var(--leading-flat) var(--font-text);
  font-variant-numeric: lining-nums tabular-nums;
  text-align: center;
  white-space: nowrap;
}

/* Poppins has no tabular figures (no tnum), so tabular-nums changes nothing: the
   widest label the rail can show (data-widest, from the script) holds the width */
.control-group__count::after {
  content: attr(data-widest);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* Chips: a type tag, and three states that mean the same thing everywhere.
   on   = live and open to you   (Urmează, Disponibil, Expoziție curentă)
   hold = taken for now          (Rezervat)
   off  = over                   (Încheiat, Vândut) */
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--chip-pad);
  border: var(--border) solid transparent;
  font: var(--weight-strong) var(--text-xs) / var(--leading-snug) var(--font-text);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.chip--tag {
  padding-inline: 0;
  color: var(--tag-ink);
}

.chip--on {
  border-color: var(--band-ink);
  background: var(--band-ink);
  color: var(--band-bg);
}

.chip--hold {
  border-color: var(--band-ink);
  color: var(--band-ink);
}

.chip--off {
  border-color: var(--band-rule-soft);
  color: var(--band-muted);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  color: var(--band-muted);
  font-size: var(--text-sm);
}

/* 07 Header and navigation ------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: var(--border) solid var(--rule);
  background-color: var(--ground);
}

.site-header__row {
  display: flex;
  height: var(--header-row);
  align-items: center;
  gap: var(--space-6);
}

.brand {
  display: flex;
  width: var(--logo-w);
  flex: none;
  margin-left: calc(var(--logo-w) * var(--logo-inset));
}

.brand img {
  width: 100%;
}

.site-nav {
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  margin: 0;
}

.site-nav__link {
  display: inline-flex;
  min-height: var(--control-sm);
  align-items: center;
  font: var(--weight-strong) var(--text-ui) / var(--leading-snug) var(--font-text);
}

.lang {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: var(--space-5);
  border-left: var(--border) solid var(--rule-soft);
}

.lang__label {
  display: none;
}

/* Reads band roles, so the same switch works in the header (canvas) and the ink footer */
.lang__switch {
  display: grid;
  grid-template-columns: repeat(2, var(--control-sm));
  border: var(--border) solid var(--band-ink);
}

.lang__option {
  display: grid;
  min-height: var(--control-sm);
  place-items: center;
  font: var(--weight-strong) var(--text-sm) / var(--leading-flat) var(--font-text);
}

.lang__option[aria-current] {
  background: var(--band-ink);
  color: var(--band-bg);
}

.menu-toggle {
  display: none;
  margin-left: auto;
  background: var(--surface);
}

.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
  display: block;
}

.nav-scrim {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-under);
  background: var(--scrim);
  animation: fade-in var(--dur-base) ease both;
}

/* 08 Opening carousel ------------------------------------------------------
   One stage, two cells. Every slide is real markup; slides use
   display:contents so each slide's media and copy drop into the shared cells.
   The slideshow moves only when the visitor moves it; its one control is a next
   marker in the picture's bottom-right corner. */

.hero {
  border-bottom: var(--border) solid var(--rule);
}

.hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(var(--hero-copy-min), 1fr);
  min-height: var(--hero-h);
  overflow: clip;
  border-inline: var(--border) solid var(--rule);
  background-color: var(--surface);
}

/* Brand matter in the first viewport: the turquoise wash rises from the
   corner of the text panel, under the text. */
.hero__stage::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--hero-wash);
  aspect-ratio: 1;
  background: var(--wash-teal) center / contain no-repeat;
  translate: 34% 42%;
  rotate: -18deg;
  opacity: var(--opacity-wash-strong);
  pointer-events: none;
}

.slide {
  display: contents;
}

/* Without JavaScript only the first available slide shows */
.hero__stage:not([data-carousel-ready]) .slide:not([hidden]) ~ .slide {
  display: none;
}

/* The stage holds the height of its tallest slide: the text of the slides not shown stays
   in the layout, unseen, so the picture never resizes when a shorter slide's crossfade
   ends. Their pictures stay out, so they still load only when needed. */
.hero__stage[data-carousel-ready] .slide[hidden]:not([data-slide-off]) {
  display: contents !important;
}

.slide[hidden] .slide__media {
  display: none;
}

.slide[hidden] .slide__copy {
  visibility: hidden;
}

.slide__media {
  position: relative;
  grid-area: 1 / 1;
  min-width: 0;
  overflow: hidden;
  border-right: var(--border) solid var(--rule);
  background: var(--surface-sunk);
  touch-action: pan-y;
}

.slide__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: scale var(--dur-slow) ease;
}

/* same slight zoom as the gallery and news pictures */
.slide__media:hover img {
  scale: var(--media-hover-scale);
}

.slide__copy {
  position: relative;
  z-index: 1;
  grid-area: 1 / 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  /* every slide's title starts at the same height in the panel */
  padding: var(--hero-copy-top) var(--space-panel) var(--space-panel);
}

/* The fact runs as one line of text: a state chip leads it, and a long place wraps under
   the chip instead of pushing it onto a line of its own, where it read as an eyebrow */
.slide__fact {
  max-width: var(--measure-narrow);
  margin-top: var(--space-4);
  color: var(--band-muted);
  font-size: var(--text-md);
  line-height: var(--leading-copy);
}

.slide__fact .chip {
  --band-ink: var(--ink);
  --band-bg: var(--surface);
  margin-right: var(--space-2);
}

/* What is on, in one sentence (client, October 2026: "descrierea evenimentului") */
.slide__text {
  max-width: var(--measure-narrow);
  margin-top: var(--space-3);
  text-wrap: pretty;
}

.slide__copy .btn {
  margin-top: var(--space-6);
}

/* The marker: a solid paper square with an ink glyph and the marker shadow, laid on a
   picture, so it reads on any picture, light or dark. Hover: ink fill, paper glyph. Two
   uses: the hero's previous and next markers and the play mark on a video still. */
.marker {
  display: grid;
  width: var(--control);
  height: var(--control);
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-0);
  background: var(--c-paper);
  color: var(--ink);
  box-shadow: var(--shadow-marker);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.marker svg {
  width: var(--icon);
  height: var(--icon);
}

.marker:hover {
  background: var(--ink);
  color: var(--c-paper);
}

/* On a picture the ring has to survive any colour under it: ink ring, paper halo */
.marker:focus-visible {
  outline: var(--focus-width) solid var(--ink);
  outline-offset: var(--focus-width);
  box-shadow: 0 0 0 var(--focus-width) var(--c-paper), 0 0 0 calc(3 * var(--focus-width)) var(--c-paper);
}

/* The controls: a "previous" and a "next" marker side by side inside the picture,
   inset from its right edge and bottom, a small gap between them (owner, 21 October
   2026: the previous marker joined the next one, for keyboard and screen-reader users
   who could only go forward). */
.hero__prev,
.hero__next {
  --hero-marker: var(--control);
  --hero-inset: var(--space-4);
  grid-area: 1 / 1;
  z-index: var(--z-raised);
  align-self: end;
  justify-self: end;
  margin-right: var(--hero-inset);
  margin-bottom: var(--hero-inset);
  cursor: pointer;
}

.hero__prev {
  margin-right: calc(var(--hero-inset) + var(--hero-marker) + var(--space-2));
}

.hero__prev svg,
.hero__next svg {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__stage[aria-busy="true"] .hero__prev,
.hero__stage[aria-busy="true"] .hero__next {
  cursor: progress;
}

/* The transition: picture and text move on together in a plain crossfade. It
   starts only once the incoming picture is decoded (site.js). */
.slide[data-entering] .slide__media {
  z-index: 1;
  animation: fade-in var(--dur-slow) ease both;
}

.slide[data-leaving] .slide__copy {
  animation: fade-out var(--dur-base) ease both;
}

.slide[data-entering] .slide__copy {
  animation: fade-in var(--dur-base) ease var(--dur-base) both;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes rise {
  from { opacity: 0; translate: 0 var(--rise); }
  to { opacity: 1; translate: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Upcoming strip: only in the document when something is coming */
.upcoming {
  border-bottom: var(--border) solid var(--rule);
}

.upcoming__row {
  display: grid;
  grid-template-columns: minmax(max-content, 0.5fr) repeat(3, minmax(0, 1fr));
  border-inline: var(--border) solid var(--rule);
  background-color: var(--surface);
}

.upcoming__head {
  display: flex;
  min-width: var(--upcoming-head-w);
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--accent-impact);
  color: var(--on-impact);
  --focus: var(--ink);
}

.upcoming__head .text-link {
  min-height: 0;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.upcoming__list {
  display: contents;
}

.event {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  align-content: start;
  padding: var(--space-4) var(--space-5);
  border-left: var(--border) solid var(--band-rule-soft);
  transition: background-color var(--dur-fast) ease;
}

.event:hover {
  background-color: var(--surface-sunk);
}

.event__date {
  grid-row: 1 / span 3;
  display: grid;
  align-content: start;
  justify-items: center;
  min-width: var(--event-date-w);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-flat);
}

.event__day {
  font-size: var(--text-xl);
}

.event__month {
  margin-top: var(--space-1);
  font: var(--weight-strong) var(--text-xs) / var(--leading-flat) var(--font-text);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.event__place {
  color: var(--band-muted);
  font-size: var(--text-sm);
}

.event .card-link:focus-visible::after {
  outline-offset: calc(-1 * var(--focus-width));
}

/* 09 Definition and principles ---------------------------------------------
   "Vizibil [mișcare]" and its meaning. The brush frame from the logo stands
   where a dictionary entry's brackets would be: [art] becomes [mișcare]. It is
   the section's only accent. */

/* Two columns with a shared top line: the headword's first line sits level
   with the paragraph opposite. Each column ends where its content ends. */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-split);
  align-items: start;
}

.definition__new {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--frame-gap);
  /* the display line box and the frame carry space above the cap height: pull the word up to the paragraph's top */
  margin-top: var(--headword-rise);
}

/* "Vizibil" carries the frame's padding and an invisible border of the frame's width, so
   both words have one line box: the headword's capitals sit at the same height whether the
   frame stands beside the word or wraps under it (861-912px) */
.definition__word {
  display: inline-block;
  padding: var(--frame-pad);
  padding-inline: 0;
  border-block: var(--frame-border) solid transparent;
}

.brush-frame {
  display: inline-block;
  padding: var(--frame-pad);
  border: var(--frame-border) solid transparent;
  border-image: var(--brush-frame) 27% / var(--frame-width) / var(--frame-outset) stretch;
  font-style: italic;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-none);
}

.definition__meaning {
  margin-top: var(--space-4);
}

.about__body > .text-link {
  margin-top: var(--space-1);
}

/* The values, in a row under the definition (client, October 2026), with a middle dot
   between them that assistive technology does not read */
.values {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-5);
}

/* Two columns, without the sentence under the heading (Page copy › Definiția left empty, client,
   November 2026): the values stand apart from the heading, in their own air, and close the left
   column level with the "Despre" link opposite (a row the link's height, so the two lines share
   a centre), as the headword opens it level with the paragraph; never closer to the heading than
   --space-6 (padding: the auto margin takes the rest). With the sentence the left column is the
   taller, and the values follow it as before */
@media (min-width: 53.8125em) {
  .definition {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  /* the row's height is its own, without the space above it */
  .definition__new + .values {
    box-sizing: content-box;
    min-height: var(--control-sm);
    margin-top: auto;
    padding-top: var(--space-6);
  }
}

.values li + li::before {
  content: "·" / "";
  margin-right: var(--space-3);
}

/* The association in two sentences (client, October 2026), in place of the principles:
   a .lead; long enough to wrap as a paragraph */
.about__text {
  text-wrap: pretty;
}

.about__text + .text-link {
  margin-top: var(--space-4);
}

/* The principles open the column (owner, 11 October 2026: the paragraph that stood above
   them introduced the association a second time and was cut). Their first capitals sit
   level with the headword's. */
@media (min-width: 53.8125em) {
  .about__body > .principles:first-child > li:first-child,
  .about__body > .about__text:first-child {
    margin-top: calc(var(--text-3xl) * var(--headword-cap) + var(--leading-trim));
  }
}

/* Principles: a plain list, one row per principle, a soft rule between rows.
   No rule above or below: after text the first row starts at its cap height
   and the last ends on its baseline, where those rules stood, so the space
   around the list is unchanged. A list that opens a column starts like the
   text beside it. */
.principles {
  margin-block: var(--space-5) var(--space-3);
}

.principles:first-child {
  margin-top: 0;
}

.principles li {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-1) var(--space-5);
  align-items: baseline;
}

.principles li + li {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border) solid var(--band-rule-soft);
}

* + .principles > li:first-child {
  margin-top: var(--leading-trim);
}

.principles > li:last-child {
  margin-bottom: var(--leading-trim);
}

.principles li > :is(span, p) {
  color: var(--band-muted);
}

/* A name or a line alone across the row (partners and collaborators, a person with no
   role yet, a result) */
.principles > li.principles__name-only > :first-child {
  grid-column: 1 / -1;
}

/* Stacked: the term over its text at every width, the text in ink. The client's
   "Term: text" lines and result lines inside a project's text (owner review,
   21 October 2026: in Raleway at the Name and Item sizes they read as subheads). */
.principles--stacked > li {
  grid-template-columns: minmax(0, 1fr);
}

.principles--stacked > li > span {
  color: inherit;
  text-wrap: pretty;
}

.prose .principles {
  padding-left: 0;
}

.prose > .principles {
  margin-top: var(--space-5);
}

.prose .principles > li + li {
  margin-top: var(--space-3);
}

/* Ruled groups (Despre › Parteneri): a label over each list, a rule under the label and
   under every row, as the identity list on Contact, so a group of one row is ruled like
   a group of three (owner, 11 October 2026: "Sprijin" had no rule, "Spații" had). */
.principles--ruled {
  margin-block: 0;
  border-top: var(--border) solid var(--band-rule-soft);
}

.principles--ruled > li,
.principles--ruled > li + li,
* + .principles--ruled > li:first-child,
.principles--ruled > li:last-child {
  margin: 0;
  padding-block: var(--space-3);
  border-top: 0;
  border-bottom: var(--border) solid var(--band-rule-soft);
}

.stack > .principles--ruled + .h-label {
  margin-top: var(--space-6);
}

/* 10 Rail, silhouette card, artwork card ----------------------------------- */

.rail {
  position: relative;
}

/* The track is the scroll container. The small inset keeps focus rings
   whole, and is pulled back out so the first card sits on the page grid.
   The top gets more (--rail-headroom): a scroller clips both ways, and a
   hovered figure grows upward. */
.rail__track {
  margin: calc(var(--rail-inset) * -1);
  margin-top: calc(var(--rail-headroom) * -1);
  padding: var(--rail-inset);
  padding-top: var(--rail-headroom);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--rail-inset);
  scrollbar-width: none;
}

.rail__track::-webkit-scrollbar {
  display: none;
}

.rail__list {
  position: relative;
  display: flex;
  width: max-content;
  gap: var(--rail-gap);
  margin: 0;
}

/* The horizon: one ink rule every figure stands on. It belongs to the rail,
   not to the scrolling list, so it starts and ends on the page grid. */
.rail--horizon::after {
  content: "";
  position: absolute;
  /* the track's negative top margin collapses through the rail, so the figures start one headroom down */
  top: calc(var(--rail-card) * var(--rail-ratio) + var(--rail-headroom));
  left: 0;
  right: 0;
  border-top: var(--border) solid var(--band-rule);
  pointer-events: none;
}

.rail__item {
  flex: none;
  width: var(--rail-card);
  scroll-snap-align: start;
}

/* The wash sits behind the heading, above the figures and clear of the controls */
.artists-band::before {
  content: "";
  position: absolute;
  top: calc(var(--rail-wash-show) - var(--rail-wash));
  left: calc(var(--rail-wash) * -0.28);
  width: var(--rail-wash);
  aspect-ratio: 1;
  background: var(--wash-teal) center / contain no-repeat;
  rotate: 160deg;
  opacity: var(--opacity-wash-strong);
  pointer-events: none;
}

/* overflow-x: clip alone lets the wash rise into the section above */
.artists-band {
  overflow: clip;
}

.artists-band > .wrap {
  position: relative;
}

/* Silhouette card: a figure filled with the artist's own work, bust crop,
   no frame, name only. A figure is either finished campaign artwork, or any
   image cut by a mask: class silhouette--masked plus the mask inline, as
   style="mask-image: url(...)" (or --shape, only on a page next to site.css).
   A new artist needs no CSS. */
.silhouette-card {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* Every figure is cut paper laid on the ground: a hairline edge and a soft
   shadow, both tinted from ink, the same on all of them. The filter lives on a
   wrapper because a mask would cut it off. */
.silhouette-card__figure {
  display: block;
  filter: var(--shadow-figure);
}

.silhouette {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  transform-origin: 50% 100%;
  transition: scale var(--dur-slow) var(--ease-out);
}

.silhouette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The outline comes from --shape, or from an inline mask-image. Pages in a
   subfolder must use the inline mask-image: Chrome resolves a url() inside a
   custom property against site.css, not against the page that sets it. The
   generator always writes mask-image inline. */
.silhouette--masked,
.silhouette--blank {
  -webkit-mask-image: var(--shape);
  mask-image: var(--shape);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.silhouette--mirror,
.silhouette--mirror img {
  transform: scaleX(-1);
}

.silhouette-card__name {
  display: block;
  padding-top: var(--space-3);
  text-wrap: balance;
}

/* The whole figure grows from its feet, mask and all, so a masked figure and a
   finished cut-out answer the same way. */
.silhouette-card:hover .silhouette,
.silhouette-card:focus-visible .silhouette {
  scale: var(--media-hover-scale);
}

/* Artwork card: stands alone; the shop reuses it as is.
   artwork-card--row lays it out as picture beside text. */
.artworks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-column);
}

.artwork-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

.artwork-card__media {
  --ratio: 8 / 7;
}

.artwork-card__body {
  display: grid;
  flex: 1;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-1);
  padding-top: var(--space-4);
}

.artwork-card__title {
  font-style: italic;
}

.artwork-card__artist {
  font-weight: var(--weight-strong);
}

.artwork-card__medium {
  color: var(--band-muted);
  font-size: var(--text-sm);
}

.artwork-card__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  align-self: end;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border) solid var(--band-rule);
}

.artwork-card__price {
  font: var(--weight-display) var(--text-lg) / var(--leading-flat) var(--font-display);
  font-variant-numeric: lining-nums;
}

.artwork-card:hover .media > img,
.artwork-card:hover .media > picture > img,
.news-item:hover .media > img {
  scale: var(--media-hover-scale);
}

/* 11 News ------------------------------------------------------------------ */

.news {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(var(--news-side-min), 5fr);
  gap: var(--space-column);
  align-items: start;
}

.news-item {
  position: relative;
}

.news-item p {
  color: var(--band-muted);
}

.news-item--lead {
  border: var(--border) solid var(--band-rule-soft);
}

.news-item--lead .media {
  --ratio: 16 / 9;
}

.news-item--lead .news-item__body {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
}

.news-item--lead p {
  max-width: var(--measure-lead);
}

/* The side column's rows hug their content, one under another, and the column starts
   with its first row, level with the lead's top edge: no rule above it, no padding.
   (Owner, 11 October 2026: rows stretched to the lead's height left a text-only row
   floating in a 300px slot, under a top rule level with the photo, not the text.) */
.news__side {
  display: flex;
  flex-direction: column;
}

.news__stack {
  display: flex;
  flex-direction: column;
}

@media (min-width: 53.8125em) {
  .news__stack > .news-item--row:first-child {
    padding-top: 0;
  }

  /* A text row opening the column: its first capitals, not its line box, meet the top edge */
  .news__stack > .news-item--text:first-child .meta {
    margin-top: var(--leading-trim);
  }
}

/* Stacked under the lead, the rows open with an ink rule, as every list does */
@media (max-width: 53.75em) {
  .news__stack {
    border-top: var(--border) solid var(--band-rule);
  }
}

.news-item--row {
  display: grid;
  grid-template-columns: var(--thumb) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-5);
  border-bottom: var(--border) solid var(--band-rule-soft);
}

.news-item--row .media {
  --ratio: 1;
}

.news-item--row .news-item__body {
  display: grid;
  gap: var(--space-1);
}

.news-item--row .news-item__body > p:not(.meta) {
  max-width: var(--measure-lead);
  font-size: var(--text-sm);
}

.news__all {
  margin-top: var(--space-3);
}

/* 12 Project, impact, team, support --------------------------------------- */

/* The photograph bleeds to the band's left edge; the text keeps to the page grid on the right.
   Up to 1536 the text column is three eighths of the band. Past it the column is the
   margin plus 36% of the page grid, so the text keeps its width (about 512px) however
   wide the window, and the photograph takes the rest: 1184px at 1920, 1504 at 2560,
   1944 at 3440. It is never wider than 125rem, nor longer than 2.6 times its height. */
.project {
  --project-copy: max(37.5%, (100% - var(--container)) / 2 + var(--container) * 0.36);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--project-copy);
  min-height: max(var(--project-h), (100vw - max(37.5vw, (100vw - var(--container)) / 2 + var(--container) * 0.36)) / 2.6);
}

.project__media {
  justify-self: end;
  width: 100%;
  max-width: 125rem;
  aspect-ratio: auto;
  min-height: 100%;
}

.project__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-panel);
  padding-right: max(var(--gutter), (100vw - var(--container)) / 2);
}

.project__meta {
  margin-top: var(--space-4);
  font-weight: var(--weight-strong);
  font-size: var(--text-ui);
  line-height: var(--leading-copy);
}

.project__copy > p:not(.project__meta) {
  max-width: var(--measure-narrow);
  margin-top: var(--space-4);
  color: var(--band-muted);
  font-size: var(--text-md);
}

.project__copy .btn {
  margin-top: var(--space-6);
}

.impact__title {
  max-width: var(--measure-title-md);
  margin-bottom: var(--space-head);
}

/* The impact head over the ledger: the title, and the period the figures cover, its
   capitals level with the title's (The One Cap Line Rule), starting on the ledger's
   third column, where that column's text starts */
.impact__head {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0;
}

.impact__head > .impact__title {
  grid-column: 1 / 3;
  margin-bottom: 0;
}

.impact__head > p {
  grid-column: 3 / -1;
  max-width: none;
  padding-left: var(--space-5);
}

/* With three items the head takes the ledger's three columns: the title over the first
   two, the period over the third */
@media (min-width: 1101px) {
  .band--impact:has(.ledger > :nth-child(3):last-child) .impact__head {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* One row of ruled columns, as many as there are items (four with the client's
   groups); two by two below 1100px, one under another on phones */
.ledger {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  border-block: var(--border) solid var(--band-rule);
}

.ledger__item {
  padding: var(--space-5) var(--space-5) var(--space-6) 0;
}

.ledger__item + .ledger__item {
  padding-left: var(--space-5);
  border-left: var(--border) solid var(--band-rule-soft);
}

/* The figure, then what it counts: a static number from the data, never animated
   (owner, 21 October 2026) */
.ledger__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ledger__figure {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: lining-nums;
}

.ledger__item p {
  max-width: var(--measure-note);
  margin-top: var(--space-2);
}

.team__statement p {
  max-width: var(--measure-lead);
  margin-top: var(--space-4);
  font-size: var(--text-md);
}

.team__statement .text-link {
  margin-top: var(--space-4);
}

.team__list {
  margin-top: var(--space-3);
  border-top: var(--border) solid var(--band-rule);
}

.team__list li {
  padding-block: var(--space-3);
  border-bottom: var(--border) solid var(--band-rule-soft);
}

/* Five names or more run in two columns wherever two names fit side by side, so the
   list stays about as tall as the statement beside it (three to eight names) */
.team {
  container-type: inline-size;
}

@container (min-width: 20rem) {
  .team__list:has(> li:nth-child(5)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }
}

.support__title {
  max-width: var(--measure-title-sm);
}

.support__copy {
  max-width: var(--measure-lead);
}

.support__copy > p {
  font-size: var(--text-md);
}

.support__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}

/* Status line. Success reads as success: ink with a tick, never the error colour. */
.status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-weight: var(--weight-strong);
  font-size: var(--text-ui);
}

/* Empty, the line takes no room and shows nothing, but stays in the accessibility tree: a live
   region that is display: none when its words arrive is not reliably announced (VoiceOver) */
.status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.status::before {
  content: "";
  width: var(--status-icon);
  height: var(--status-icon);
  flex: none;
  margin-top: var(--status-icon-shift);
  background: currentColor;
  -webkit-mask: var(--status-image) center / contain no-repeat;
  mask: var(--status-image) center / contain no-repeat;
}

.status[data-state="ok"] {
  --status-image: var(--status-tick);
}

.status[data-state="error"] {
  --status-image: var(--status-alert);
}

/* While a form is on its way to the server (site.js → initForm): the words alone, no mark; the
   button stays where it is, focusable, and says by its pointer that it is busy */
.status[data-state="sending"]::before {
  content: none;
}

form[aria-busy="true"] [type="submit"] {
  cursor: progress;
}

/* 12b Video: reels and the video window ------------------------------------
   Above 860px an ordinary head on the halves of the Vizibil section above it (the title
   in the first, the lead from the half line, on the title's cap line; on the card line a
   one-word title broke inside the word at 861px), then the reels one to a column of the
   homepage's three-column card grid (the Galerie's). Beside the reels, a short lead left
   the first column empty under it (owner review, 21 October 2026). Each reel is a
   button (still, play mark, name, role, project and length) that opens the video in a
   dark window over the page. */
.videos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.videos__head {
  margin-bottom: 0;
}

.videos__copy > .lead {
  margin-top: var(--space-3);
  color: var(--band-muted);
}

@media (min-width: 53.8125em) {
  .videos {
    gap: var(--space-head);
  }

  .videos__copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-split);
    align-items: start;
  }

  .videos__copy > .lead {
    margin-top: calc(var(--text-2xl) * (var(--leading-tight) - var(--cap-display)) / 2 + var(--leading-trim));
  }
}

/* The reels are a rail (the artists' rail, without the horizon): three to a row above
   560px, on the card grid's gap, where the stepper stays hidden; on phones cards about
   two-thirds of the column wide, the next one showing at the edge, and the stepper beside
   the heading. A reel's width is read from the track (a size container), so any number
   of videos keeps the same card; a fourth would scroll. */
.reels-rail {
  --rail-headroom: var(--rail-inset);
  --reel-gap: var(--space-column);
  --reel-card: calc((100cqi - 2 * var(--reel-gap)) / 3);
}

.reels-rail > .rail__track {
  container-type: inline-size;
}

.reels {
  gap: var(--reel-gap);
}

.reels__item {
  flex: none;
  width: var(--reel-card);
  scroll-snap-align: start;
}

.reel {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-0);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* The still is cut to 4:5 (the site's portrait box) from the 9:16 frame, kept near the
   top so the speaker's head and hands stay in; the window plays the whole frame */
.reel__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-sunk);
}

.reel__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  transition: scale var(--dur-slow) var(--ease-out);
}

/* The play mark: the marker (as the hero's markers) in the middle of the still,
   with a play triangle; it fills with ink when the reel is hovered */
.reel__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.reel__play svg {
  fill: currentColor;
}

.reel:hover .reel__media img {
  scale: var(--media-hover-scale);
}

.reel:hover .marker {
  background: var(--ink);
  color: var(--c-paper);
}

.reel:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-width);
}

.reel__name {
  display: block;
  margin-top: var(--space-3);
}

.reel:hover .reel__name {
  text-decoration: underline;
  text-decoration-thickness: var(--underline-strong);
  text-underline-offset: 0.3em;
}

.reel__meta {
  display: block;
  margin-top: var(--space-1);
  color: var(--band-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-copy);
}

.reel__meta + .reel__meta {
  margin-top: 0;
}

/* The window: the whole screen, deep ink; the video as tall as the screen allows at
   9:16 (a landscape video, [data-landscape], at 16:9 and as wide as the screen allows),
   its name and the close button on a bar the video's width, and under it a line with the
   "Transcriere" disclosure and, on a page in another language, the language the video is
   spoken in. Its roles are the ink band's (the markup carries .band--ink). */
.video-dialog {
  --video-pad: var(--space-4);
  /* the bar above the video and the line under it */
  --video-chrome: calc(var(--control) + var(--control-sm) + 2 * var(--space-3));
  --video-h: calc(100dvh - 2 * var(--video-pad) - var(--video-chrome));
  --video-w: calc(var(--video-h) * 9 / 16);
  --transcript-w: 24rem;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--video-pad);
  border: 0;
  /* the window covers the screen, so it carries the dark ground itself (custom
     properties do not reach ::backdrop in every browser) */
  background: var(--scrim-full);
  color: var(--band-ink);
}

.video-dialog[open] {
  display: grid;
  place-items: center;
}

.video-dialog::backdrop {
  background: transparent;
}

.video-dialog__body {
  width: min(100%, var(--video-w));
}

.video-dialog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--control);
  margin-bottom: var(--space-3);
}

.video-dialog__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
  min-width: 0;
  font: inherit;
}

.video-dialog__role {
  color: var(--band-muted);
  font-size: var(--text-sm);
}

.video-dialog__video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--c-ink-deep);
}

.video-dialog[data-landscape] {
  --video-w: min(100vw - 2 * var(--video-pad), var(--video-h) * 16 / 9);
}

.video-dialog[data-landscape] .video-dialog__video {
  aspect-ratio: 16 / 9;
}

/* A YouTube video's player (site.js makes it when the reel is pressed): the video's box,
   with the reel's still behind it until the player has loaded */
iframe.video-dialog__video {
  border: 0;
  background-position: center;
  background-size: cover;
}

/* Subtitles (English, shown from the start on the English pages): set in the text face
   on a near-solid ink box, so they read over any picture. The files place them under the
   Romanian subtitles that are part of the picture and above the logos at its foot. */
.video-dialog__video::cue {
  background: var(--scrim-full);
  color: var(--c-paper);
  font-family: var(--font-text);
}

/* Under the video: the disclosure at the left, under the name; the language at the right,
   under the close button */
.video-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-4);
  min-height: var(--control-sm);
  margin-top: var(--space-3);
}

.video-dialog__toggle {
  min-height: var(--control-sm);
}

.video-dialog__spoken {
  margin: 0 0 0 auto;
  color: var(--band-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-copy);
  text-align: right;
}

/* The side text: what the video is about (its description, then its project's credit),
   and the transcript once opened, plain paragraphs at the body size on the window's
   ground. On phones it follows the line under the video and the window scrolls; from
   861px it stands beside the video, as tall as the video, and scrolls on its own. */
.video-dialog__aside {
  scroll-margin-top: var(--video-pad);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border) solid var(--band-rule-soft);
  color: var(--band-ink);
  font-size: var(--text-base);
  line-height: var(--leading-copy);
}

.video-dialog__aside p {
  margin: 0;
}

.video-dialog__about p + p,
.video-dialog__transcript p + p {
  margin-top: var(--space-3);
}

.video-dialog__about .credit {
  margin-top: var(--space-5);
}

/* the transcript, under the description: its own soft rule */
.video-dialog__about:not([hidden]) + .video-dialog__transcript,
.video-dialog__about:not([hidden]) ~ .video-dialog__transcript {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border) solid var(--band-rule-soft);
}

.video-dialog__transcript {
  scroll-margin-top: var(--space-4);
}

.video-dialog__aside:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-width);
}

/* While the side text is open the ground is solid, so no page shows through behind its
   text as the window scrolls */
.video-dialog[data-aside-open] {
  align-items: start;
  background: var(--c-ink-deep);
}

@media (min-width: 53.8125em) {
  .video-dialog[data-aside-open] {
    align-items: center;
  }

  .video-dialog[data-aside-open] .video-dialog__body {
    display: grid;
    grid-template-columns: min(var(--video-w), 100vw - 2 * var(--video-pad) - var(--space-6) - var(--transcript-w)) var(--transcript-w);
    grid-template-areas:
      "bar ."
      "video aside"
      "foot .";
    column-gap: var(--space-6);
    width: auto;
  }

  .video-dialog[data-aside-open] .video-dialog__bar { grid-area: bar; }
  .video-dialog[data-aside-open] .video-dialog__video { grid-area: video; }
  .video-dialog[data-aside-open] .video-dialog__foot { grid-area: foot; }

  /* as tall as the video: it gives the row no height of its own and scrolls inside it */
  .video-dialog[data-aside-open] .video-dialog__aside {
    grid-area: aside;
    contain: size;
    overflow-y: auto;
    margin-top: 0;
    padding-top: 0;
    padding-right: var(--space-3);
    border-top: 0;
    scrollbar-color: var(--band-muted) transparent;
  }
}

/* Impact and video, narrower: the ledger two by two, then one under another */
@media (max-width: 1100px) {
  .impact__head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .impact__head > .impact__title {
    grid-column: 1;
  }

  .impact__head > p {
    grid-column: 2;
  }

  .ledger {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ledger__item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .ledger__item:nth-child(n + 3) {
    border-top: var(--border) solid var(--band-rule-soft);
  }
}

@media (max-width: 53.75em) {
  .impact__head > .impact__title,
  .impact__head > p {
    grid-column: auto;
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .ledger {
    grid-template-columns: minmax(0, 1fr);
  }

  .ledger__item,
  .ledger__item + .ledger__item {
    padding: var(--space-4) 0 var(--space-5);
    border-left: 0;
  }

  .ledger__item + .ledger__item {
    border-top: var(--border) solid var(--band-rule-soft);
  }

  /* Phones: a reel about two-thirds of the column wide, so the still reads and the name
     and the role · length line each hold one line; the next reel shows at the edge */
  .reels-rail {
    --reel-gap: var(--space-4);
    --reel-card: 70cqi;
  }
}

/* 13 Footer and form fields ------------------------------------------------ */

.site-footer {
  padding-block: var(--space-panel) var(--space-5);
  border-bottom: 0;
}

/* Brand, then three columns: pages, information and settings, the association's identity */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.5fr) minmax(0, 0.6fr) minmax(min-content, 0.75fr);
  gap: var(--space-6) var(--space-7);
  padding-bottom: var(--space-7);
}

.site-footer__brand img {
  width: var(--footer-logo-w);
  margin-left: calc(var(--footer-logo-w) * var(--logo-inset));
  filter: brightness(0) invert(1);
}

.site-footer__brand p {
  max-width: var(--measure-note);
  margin-top: var(--space-4);
  color: var(--band-muted);
  font: var(--weight-medium) var(--text-lg) / var(--leading-copy) var(--font-display);
}

.site-footer__col {
  /* the lockup carries transparent padding above its ink: start the columns at its optical top */
  margin-top: var(--space-5);
}

.site-footer__col .h-label {
  margin-bottom: var(--space-3);
}

.link-list li + li {
  margin-top: var(--space-1);
}

.link-list a,
.link-list button,
.site-footer address a {
  display: inline-block;
  padding-block: var(--space-1);
  color: var(--band-muted);
}

/* A long word ("Confidențialitate") breaks rather than being cut off by the footer when a
   reader enlarges letter and word spacing on a narrow phone (WCAG 1.4.12); at normal
   spacing every entry fits, so nothing changes */
.link-list a,
.link-list button {
  overflow-wrap: anywhere;
}

.link-list button {
  padding-inline: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.site-footer address {
  color: var(--band-muted);
  font-style: normal;
  line-height: var(--leading-body);
}

/* The e-mail address holds one line: the identity column is never narrower than it
   (min-content), and from 560px down the column runs the full width. It may break
   before the @ only where even that is too narrow. */
@media (min-width: 561px) {
  .site-footer address a[href^="mailto:"] {
    white-space: nowrap;
  }

  /* Chrome breaks at a <wbr> even under nowrap */
  .site-footer address a[href^="mailto:"] wbr {
    display: none;
  }
}

/* Identity data as text. An unknown hard fact is an em dash, never an invented value. */
.identity {
  margin-top: var(--space-2);
  color: var(--band-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-copy);
}

.identity > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
}

.identity dt {
  color: var(--band-ink);
}

.identity dd {
  font-variant-numeric: lining-nums tabular-nums;
}

.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: var(--space-5) var(--space-6);
  align-items: start;
  padding-block: var(--space-6);
  border-top: var(--border) solid var(--band-rule);
}

.newsletter__title {
  padding-top: var(--space-3);
}

/* Form field */
.field__row {
  display: flex;
  border: var(--border) solid var(--band-muted);
}

.field__input {
  min-width: 0;
  min-height: var(--control);
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-0);
  background: var(--c-canvas);
  color: var(--c-ink);
}

.field__input:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
  outline-color: var(--c-cobalt);
}

.field__input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 var(--border-strong) var(--accent-action);
}

.field__input[aria-invalid="true"]:focus-visible {
  outline-offset: calc(-2 * var(--focus-width));
}

.field__row .btn {
  border-width: 0 0 0 var(--border);
  --btn-rule: var(--c-ink);
}

.field__row .btn:hover {
  translate: 0;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
  color: var(--band-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-copy);
}

/* One drawn box for every checkbox and radio on the site: band ink outline,
   band ink fill when ticked, the band's ground for the tick. It reads on every
   ground, which the browser's orange accent did not (2.6:1 on canvas). */
.check input,
.choice input,
.option input {
  display: inline-grid;
  width: var(--check);
  height: var(--check);
  flex: none;
  place-content: center;
  margin: 0;
  border: var(--border) solid var(--band-ink);
  border-radius: var(--radius-0);
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.check input::before,
.choice input::before,
.option input::before {
  content: "";
  width: var(--check-mark);
  height: var(--check-mark);
  background: var(--band-bg);
  -webkit-mask: var(--status-tick) center / contain no-repeat;
  mask: var(--status-tick) center / contain no-repeat;
  opacity: 0;
}

.check input:checked,
.choice input:checked,
.option input:checked {
  background: var(--band-ink);
}

.check input:checked::before,
.choice input:checked::before,
.option input:checked::before {
  opacity: 1;
}

.option input[type="radio"],
.option input[type="radio"]::before {
  border-radius: var(--radius-round);
}

.option input[type="radio"]::before {
  width: var(--radio-dot);
  height: var(--radio-dot);
  -webkit-mask: none;
  mask: none;
}

.check input:disabled,
.choice input:disabled,
.option input:disabled {
  cursor: default;
  opacity: var(--opacity-disabled);
}

/* An unticked required box is marked on the box itself, not only in the status line */
.check input[aria-invalid="true"],
.option input[aria-invalid="true"] {
  outline: var(--border-strong) solid var(--accent-action);
  outline-offset: var(--border-strong);
}

/* Base row: copyright, the language switch, the ANPC pictogram */
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border) solid var(--band-rule);
  color: var(--band-muted);
  font-size: var(--text-sm);
}

.site-footer__base > p {
  margin-right: auto;
}

.site-footer .lang {
  padding-left: 0;
  border-left: 0;
}

.site-footer .lang__label {
  display: block;
  color: var(--band-muted);
}

/* ANPC pictogram. The law fixes its size (250 × 50 px) and its link; this is a
   typeset stand-in until the official image file is placed (replacement list). */
.anpc {
  display: grid;
  width: var(--anpc-w);
  min-height: var(--anpc-h);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: var(--border) solid var(--band-ink);
  color: var(--band-ink);
  text-decoration: none;
}

.anpc__mark {
  font: var(--weight-strong) var(--text-base) / var(--leading-flat) var(--font-text);
  letter-spacing: var(--tracking-label);
}

.anpc__text {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  text-wrap: balance;
}

.anpc:hover .anpc__text,
.anpc:focus-visible .anpc__text {
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-strong);
  text-underline-offset: var(--underline-offset);
}

/* 14 Dialog ---------------------------------------------------------------- */

.dialog {
  --band-bg: var(--surface);
  width: min(var(--dialog-w), 100% - 2 * var(--space-4));
  max-height: calc(100dvh - 2 * var(--space-4));
  padding: 0;
  overflow: auto;
  border: var(--border) solid var(--ink);
  background-color: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-dialog);
}

.dialog::backdrop {
  background: var(--scrim);
}

.dialog[open] {
  animation: rise var(--dur-base) var(--ease-out) both;
}

.dialog__body {
  position: relative;
  padding: var(--space-panel);
  border-top: var(--border-heavy) solid var(--accent-action);
}

.dialog__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.dialog__title {
  max-width: var(--measure-title-sm);
  margin-right: var(--space-8);
}

/* The title takes focus when the window opens (tabindex -1, never tabbed to):
   no ring there, it would sit on the close button */
.dialog__title:focus,
.form-done__title:focus {
  outline: none;
}

.dialog__body > p {
  margin-top: var(--space-4);
}

.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}

.dialog__aside {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border) solid var(--band-rule-soft);
}

.dialog__aside p {
  margin-top: var(--space-2);
  color: var(--band-muted);
  font-size: var(--text-ui);
}

.dialog__aside .text-link {
  margin-top: var(--space-1);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: var(--border) solid var(--band-rule-soft);
}

.choice:first-of-type {
  margin-top: var(--space-5);
}

.choice input {
  margin-top: var(--space-1);
}

.choice span {
  color: var(--band-muted);
  font-size: var(--text-ui);
}

.choice strong {
  display: block;
  color: var(--band-ink);
  font-size: var(--text-base);
}

/* 15 Responsive and preferences ------------------------------------------- */

@media (max-width: 1100px) {
  .hero__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .project {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .event {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--space-4);
  }

  .event__date {
    grid-row: auto;
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: var(--space-2);
  }

  .event__day {
    font-size: var(--text-lg);
  }

  .news {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 0.6fr)) minmax(min-content, 0.8fr);
    gap: var(--space-6);
  }
}

@media (max-width: 53.75em) {
  :root {
    /* 7.5rem; a narrow phone with enlarged text keeps the logo and the menu button in
       the row (40vw is wider than 7.5rem down to 300px at the default size) */
    --logo-w: min(7.5rem, 40vw);
    /* ...and the row stays taller than the menu button (75px against 48px at the default size) */
    --header-row: max(calc(var(--logo-w) * var(--logo-ratio)), calc(var(--control) + var(--space-2)));
    --rail-card: clamp(9.5rem, 27vw, 13rem);
    --footer-logo-w: 8.25rem;
  }

  /* Navigation. Without script it stays in the page: the header is not
     sticky and the links wrap under the logo. With script (html.js) it
     becomes a panel under a sticky header. */
  .site-header {
    position: static;
  }

  .site-header__row {
    height: auto;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
  }

  .site-nav {
    flex-basis: 100%;
    margin: 0;
    padding-bottom: var(--space-3);
  }

  .site-nav__list {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
  }

  .lang {
    padding-left: 0;
    border-left: 0;
  }

  .js .site-header {
    position: sticky;
  }

  .js .site-header__row {
    height: var(--header-row);
    flex-wrap: nowrap;
  }

  .js .menu-toggle {
    display: inline-grid;
  }

  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    max-height: calc(100dvh - var(--header-h));
    padding: var(--space-2) var(--gutter) var(--space-6);
    overflow: auto;
    border-bottom: var(--border) solid var(--rule);
    background-color: var(--surface);
    box-shadow: var(--shadow-raised);
  }

  .js .site-nav[data-open] {
    display: block;
    animation: rise var(--dur-base) var(--ease-out) both;
  }

  .js .site-nav__list {
    display: block;
  }

  .js .site-nav__link {
    display: flex;
    min-height: var(--nav-link-h);
    border-bottom: var(--border) solid var(--rule-soft);
    font: var(--weight-display) var(--text-xl) / var(--leading-snug) var(--font-display);
    letter-spacing: var(--tracking-display);
  }

  .js .site-nav .btn {
    display: flex;
    min-height: var(--control);
    margin-top: var(--space-5);
    font-size: var(--text-base);
  }

  .js .lang {
    justify-content: space-between;
    margin-top: var(--space-5);
  }

  /* The language label in the paper panel; the footer's label reads its band's muted ink */
  .js .site-nav .lang__label {
    display: block;
    color: var(--muted);
  }

  /* Two-column sections stack */
  .about,
  .split,
  .split--lead,
  .split--half,
  .section-head,
  .news,
  .newsletter {
    grid-template-columns: minmax(0, 1fr);
  }

  .split {
    gap: var(--space-6);
  }

  .section-head {
    gap: var(--space-3);
  }

  .section-head--controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* Opening: picture first and full-bleed, then its text */
  .hero__stage {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 0;
    border-inline: 0;
  }

  .slide__media {
    grid-area: 1 / 1;
    width: 100%;
    max-height: var(--hero-media-max);
    aspect-ratio: 5 / 4;
    border-right: 0;
    border-bottom: var(--border) solid var(--rule);
  }

  .hero__prev,
  .hero__next {
    --hero-marker: var(--control-sm);
    --hero-inset: var(--space-3);
    width: var(--hero-marker);
    height: var(--hero-marker);
  }

  .definition__new {
    margin-top: 0;
  }

  .slide__copy {
    grid-area: 2 / 1;
    justify-content: flex-start;
    min-height: var(--hero-copy-min-sm);
    padding: var(--space-5) var(--gutter) var(--space-6);
  }

  .slide__fact {
    margin-top: var(--space-3);
    font-size: var(--text-base);
  }

  .slide__copy .btn {
    margin-top: var(--space-5);
  }

  .upcoming__row {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    border-inline: 0;
  }

  .upcoming__head {
    flex-direction: row;
    align-items: center;
    padding: var(--space-3) var(--gutter);
  }

  .event {
    grid-template-columns: var(--event-date-w) minmax(0, 1fr);
    padding: var(--space-4) var(--gutter);
    border-left: 0;
    border-top: var(--border) solid var(--band-rule-soft);
  }

  .event__date {
    grid-row: 1 / span 3;
    grid-auto-flow: row;
    justify-content: center;
    gap: 0;
  }

  .event__day {
    font-size: var(--text-xl);
  }

  .artworks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .artwork-card:first-child {
    grid-column: 1 / -1;
  }

  .news-item--row {
    gap: var(--space-4);
  }

  .project {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .project__media {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .project__copy {
    padding: var(--space-6) var(--gutter) var(--space-7);
  }

  .ledger__item p {
    max-width: var(--measure-lead);
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) minmax(min-content, 1.25fr);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__col {
    margin-top: 0;
  }

  .newsletter__title {
    padding-top: 0;
  }
}

/* A short window (400% zoom, a phone held sideways): the header would take a third of the
   height, so it scrolls away with the page, and nothing keeps clear of it (--header-stuck).
   Relative, not static: it stays the phone menu's frame. While the menu is open the header
   is sticky again, so the panel and its scrim open under it wherever the page is scrolled. */
@media (max-height: 500px) {
  :root {
    --header-stuck: 0px;
  }

  .site-header,
  .js .site-header {
    position: relative;
  }

  .js .site-header:has([data-nav][data-open]) {
    position: sticky;
  }
}

/* Tablet: the first work runs as a feature row */
@media (min-width: 561px) and (max-width: 53.75em) {
  .artwork-card:first-child {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--space-5);
  }

  .artwork-card:first-child .artwork-card__media {
    flex: 1.35;
  }

  .artwork-card:first-child .artwork-card__body {
    flex: 1;
    grid-template-rows: none;
    padding-top: 0;
  }
}

@media (max-width: 560px) {
  :root {
    --rail-card: clamp(9.5rem, 41vw, 11rem);
    --thumb: var(--thumb-sm);
  }

  /* Rail head on phones: title and arrows on one line, the count under the title */
  .section-head--controls {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2) var(--space-3);
  }

  .section-head--controls .control-group {
    display: contents;
  }

  .section-head--controls .control-group__count {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    text-align: left;
  }

  .principles li {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Phones: the first work full width, the others as rows, picture beside text.
     Two narrow cards side by side could not hold a price and a state on one line. */
  .artworks {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .artwork-card:not(:first-child) {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .artwork-card:not(:first-child) .artwork-card__media {
    flex: 0 0 30%;
  }

  .artwork-card:not(:first-child) .artwork-card__title {
    font-size: var(--text-md);
  }

  .artwork-card:not(:first-child) .artwork-card__body {
    grid-template-rows: none;
    padding-top: 0;
  }

  .news-item--lead .news-item__body {
    padding: var(--space-4);
  }

  /* Phones: one unit per row, the picture with its tag and headline beside it */
  .news-item--row {
    gap: var(--space-3);
    align-items: start;
    padding-block: var(--space-4);
  }

  .news-item--row .news-item__body > p:not(.meta) {
    display: none;
  }

  .news-item--row .news-item__title {
    font-size: var(--text-base);
  }

  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
  }

  .site-footer__identity {
    grid-column: 1 / -1;
  }

  .field__row {
    display: grid;
  }

  .field__row .btn {
    border-width: var(--border) 0 0;
  }

  .dialog__title {
    margin-right: var(--space-7);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .btn:hover,
  .silhouette-card:hover .silhouette,
  .silhouette-card:focus-visible .silhouette,
  .artwork-card:hover .media > img,
  .artwork-card:hover .media > picture > img,
  .slide__media:hover img,
  .news-item:hover .media > img,
  .reel:hover .reel__media img {
    translate: 0;
    scale: 1;
  }
}

@media (forced-colors: active) {
  body,
  .linen,
  .band,
  .site-header,
  .hero__stage,
  .upcoming__row,
  .dialog {
    background-image: none;
  }

  .artists-band::before,
  .hero__stage::after {
    display: none;
  }

  .chip {
    border-color: CanvasText;
  }

  .brush-frame {
    border-image: none;
    border-color: CanvasText;
  }

  .silhouette--masked {
    forced-color-adjust: none;
  }

  .status::before {
    background: CanvasText;
  }
}

/* The logo is an image, so forced colours leave it alone: its black lettering would vanish on
   a dark scheme, and the footer's white one on a light scheme. Each takes the scheme's text tone. */
@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .brand img {
    filter: brightness(0) invert(1);
  }
}

@media (forced-colors: active) and (prefers-color-scheme: light) {
  .site-footer__brand img {
    filter: brightness(0);
  }
}

@media print {
  .site-header,
  .hero__prev,
  .hero__next,
  .nav-scrim {
    display: none;
  }
}

/* ==========================================================================
   Inner pages. Sections 16–24 extend the system for every page after the
   homepage. Same rules as above: tokens only, band roles only, and each
   component carries its own breakpoints so it can be read in one place.
   The markup each one expects is in docs/design.md › Components.
   ========================================================================== */

/* 16 Current page, breadcrumb, page head ------------------------------------ */

/* Current page: one indicator, the strong underline at rest, the same as hover, so
   hovering the current link changes nothing. aria-current="page" on the page itself;
   "true" on the section a page belongs to (an artist's page marks Artiști, a work's
   page marks Galerie, a post marks Noutăți). */
.site-nav__list > li > [aria-current]:not(.btn) {
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-strong);
  text-underline-offset: var(--underline-offset);
}

/* Breadcrumb: chrome, not a kicker. It has its own ruled strip under the
   header and never sits inside the page head (The No Eyebrow Rule). */
.crumbs {
  border-bottom: var(--border) solid var(--rule);
  background-color: var(--ground);
  color: var(--muted);
  font-size: var(--text-sm);
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  margin: 0;
}

.crumbs__item {
  display: inline-flex;
  min-height: var(--control-sm);
  align-items: center;
  gap: var(--space-2);
}

.crumbs__item + .crumbs__item::before {
  content: "/";
  content: "/" / "";
  color: var(--muted);
}

.crumbs a {
  display: inline-flex;
  min-height: var(--control-sm);
  align-items: center;
}

.crumbs__list {
  flex-wrap: nowrap;
}

.crumbs__item {
  flex: none;
}

.crumbs__item:last-child {
  flex: 0 1 auto;
  min-width: 0;
}

/* The current page is the h1 just below: here it holds one line and may end in an ellipsis */
.crumbs [aria-current] {
  overflow: hidden;
  color: var(--ink);
  font-weight: var(--weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Page head: the first band of an inner page. A visible h1 (.h-display for a
   one- or two-word name, .h-title for anything longer) and, optionally, the
   page's lead beside it on the baseline. It is a modifier on any band. */
.page-head__row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-5) var(--space-7);
  align-items: baseline;
}

.page-head__row:not(:last-child) {
  margin-bottom: var(--space-head);
}

.page-head__lead {
  max-width: var(--measure-lead);
  font-size: var(--text-md);
  text-wrap: balance;
}

.page-head__lead + .page-head__lead {
  margin-top: var(--space-3);
}

@media (max-width: 53.75em) {
  .page-head__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

/* Title and lead on one cap line (owner, 11 October 2026). Above 860px, in a page head
   and in a section head, the lead's first capitals sit level with the title's: the
   title keeps its place and the lead drops by the title's leading over its cap height
   (--head-size, --cap-display) less its own (--leading-trim). Stacked, as before. */
@media (min-width: 53.8125em) {
  .page-head__row,
  .section-head:has(> p),
  .section-head:has(> .section-head__text) {
    --head-size: var(--text-2xl);
    align-items: start;
  }

  .page-head__row:has(> .h-display),
  .section-head:has(> .h-display) {
    --head-size: var(--text-3xl);
  }

  .page-head__row > .page-head__lead:nth-child(2),
  .page-head__row > * > .page-head__lead:first-child,
  .section-head > p,
  .section-head__text > p:first-child {
    margin-top: calc(var(--head-size) * (var(--leading-tight) - var(--cap-display)) / 2 + var(--leading-trim));
  }

  /* Over a three-column card grid (the galleries and the news), the lead starts on the
     grid's second column, the left edge of the second card, instead of the page-columns
     line, which no card shares. Heads over text keep the page columns. */
  .page-head__row--cards,
  .section-head--cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-column);
  }

  .page-head__row--cards > :last-child,
  .section-head--cards > p,
  .section-head--cards > .section-head__text {
    grid-column: 2 / -1;
  }

  /* Over the figures (the artists listing) the head takes the figures' columns and the
     lead starts on the column line nearest the page-columns line: the third column's
     left edge, at 40% of the grid with five columns and 50% with four (owner,
     11 October 2026: at 677px it sat over no column). */
  .page-head__row--figures {
    grid-template-columns: repeat(var(--figures-cols), minmax(0, 1fr));
    column-gap: 0;
  }

  .page-head__row--figures > :first-child {
    grid-column: 1 / 3;
  }

  .page-head__row--figures > :last-child {
    grid-column: 3 / -1;
  }
}

/* 17 Figures: every artist, standing on horizons ----------------------------
   The listing form of the silhouette rail. A grid of silhouette cards; each
   row of figures stands on one ink rule that runs the full width of the page
   grid, for any number of artists. The rule is drawn by each card (its
   ::before is as tall as the 4:5 figure, so its bottom edge is the horizon)
   and runs on to the right; the list clips it at the grid edge. */
.figures {
  display: grid;
  grid-template-columns: repeat(var(--figures-cols), minmax(0, 1fr));
  row-gap: var(--space-7);
  margin: 0;
  overflow-x: clip;
}

.figures__item {
  padding-inline: var(--figures-pad);
}

.figures .silhouette-card {
  position: relative;
}

/* A name may use its card's side padding, so a two-word name holds one line
   wherever the column allows it (Cristian Morariu at 320px) */
.figures .silhouette-card__name {
  margin-inline: calc(-1 * var(--figures-pad));
}

.figures .silhouette-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * var(--figures-pad));
  right: -100vw;
  height: 0;
  padding-top: var(--figure-height);
  border-bottom: var(--border) solid var(--band-rule);
  pointer-events: none;
}

@media (max-width: 1100px) {
  .figures,
  .page-head__row--figures {
    --figures-cols: 4;
  }
}

@media (max-width: 53.75em) {
  .figures {
    --figures-cols: 3;
  }
}

@media (max-width: 560px) {
  .figures {
    --figures-cols: 2;
    row-gap: var(--space-6);
  }
}

/* An artist with no figure yet: the default outline as a faint tint of the
   band's ink, so the listing keeps its rhythm and nothing pretends to be artwork. */
.silhouette--blank {
  /* opaque: a translucent tint would let the figure's drop shadow show through it */
  background: color-mix(in srgb, var(--band-ink) 12%, var(--band-bg));
}

/* 18 Artist head ---------------------------------------------------------------
   The artist leads: the figure stands on the band's closing ink rule, the name
   is the page's h1 beside it. The band has no bottom padding; the copy carries
   it. --compact is the same device inside a work's page (h2, smaller figure). */
.artist-head {
  padding-bottom: 0;
}

.artist-head__grid {
  display: grid;
  grid-template-columns: var(--artist-figure-w) minmax(0, 1fr);
  gap: var(--space-split);
  align-items: end;
}

.artist-head--compact .artist-head__grid {
  grid-template-columns: var(--artist-figure-w-sm) minmax(0, 1fr);
}

.artist-head__figure {
  display: block;
}

.artist-head__copy {
  align-self: center;
  padding-bottom: var(--space-section);
}

.artist-head__practice {
  max-width: var(--measure-narrow);
  margin-top: var(--space-4);
  color: var(--band-muted);
  font-size: var(--text-md);
  line-height: var(--leading-copy);
  text-wrap: balance;
}

.artist-head__copy > .lead {
  margin-top: var(--space-5);
}

.artist-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-6);
}

/* Two columns down to 561px: the figure keeps its column and stands on the rule.
   On phones the copy comes first and the figure, 58% of the width, closes the band. */
@media (max-width: 1100px) {
  .artist-head__grid {
    gap: var(--space-6);
  }
}

@media (max-width: 53.75em) {
  .artist-head__grid {
    grid-template-columns: var(--artist-figure-w-md) minmax(0, 1fr);
  }

  .artist-head--compact .artist-head__grid {
    grid-template-columns: var(--artist-figure-w-sm) minmax(0, 1fr);
  }
}

/* Above 860px the head is on the page columns: the figure stands at the grid's left
   edge in the first column, the name and its copy start on the page-columns line
   (677px at 1440), where every other inner page starts its second column (owner,
   11 October 2026: at 453px and, in a work's band, 348px they lined up with nothing). */
@media (min-width: 53.8125em) {
  .artist-head__grid,
  .artist-head--compact .artist-head__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-7);
  }

  /* The same figure in both bands: in a work's band the small one stood alone in
     a wide column */
  .artist-head__figure,
  .artist-head--compact .artist-head__figure {
    width: var(--artist-figure-w);
  }
}

@media (max-width: 560px) {
  .artist-head__grid,
  .artist-head--compact .artist-head__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .artist-head__copy {
    padding-bottom: 0;
  }

  .artist-head__figure,
  .artist-head--compact .artist-head__figure {
    order: 2;
    width: var(--artist-figure-phone);
  }
}

/* Artist facts and biography: the page columns (.split--page), facts with the
   heading, text at the right on the same line as the "Lucrări" lead */
.artist-about__facts {
  margin-top: var(--space-6);
}

/* One work or none: "Lucrări" on the page columns, the same grammar as "Despre"
   beside it. The title and "Toată galeria" hold the first column; the card spans the
   second, from the page-columns line to the grid's right edge, its picture's top edge
   level with the title's capitals; with no works the
   sentence that they are coming stands there, its capitals level with the title's
   (The One Cap Line Rule). Stacked under 860px in the order of the grid: title,
   card, link (owner, 11 October 2026). */
.split--page.artist-work {
  grid-template-areas: "title" "card" "foot";
  row-gap: 0;
}

.artist-work__title {
  grid-area: title;
  margin-bottom: var(--space-head);
}

.artist-work > .artwork-card,
.artist-work > .artworks,
.artist-work > .empty {
  grid-area: card;
}

/* Two works: the pair side by side in that column, from tablets up */
@media (min-width: 53.8125em) {
  .split--page.artist-work > .artworks--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: calc(var(--text-2xl) * (var(--leading-tight) - var(--cap-display)) / 2);
  }
}

.artist-work > .section-foot {
  grid-area: foot;
}

@media (min-width: 53.8125em) {
  .split--page.artist-work {
    grid-template-areas: "title card" "foot card";
    grid-template-rows: auto 1fr;
  }

  .artist-work__title {
    margin-bottom: 0;
  }

  .artist-work > .artwork-card {
    margin-top: calc(var(--text-2xl) * (var(--leading-tight) - var(--cap-display)) / 2);
  }

  .artist-work > .empty > p:first-child {
    margin-top: calc(var(--text-2xl) * (var(--leading-tight) - var(--cap-display)) / 2 + var(--leading-trim));
  }

  .artist-work > .section-foot {
    align-self: start;
  }
}

/* Phones: the full card, as in the grid (the homepage strip's rows are keyed to
   :not(:first-child), and this card follows the title) */
@media (max-width: 560px) {
  .split--page.artist-work > .artwork-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .split--page.artist-work > .artwork-card .artwork-card__media {
    flex: none;
  }

  .split--page.artist-work > .artwork-card .artwork-card__title {
    font-size: var(--text-lg);
  }

  .split--page.artist-work > .artwork-card .artwork-card__body {
    grid-template-rows: auto auto 1fr auto;
    padding-top: var(--space-4);
  }
}

/* 19 Spec list ----------------------------------------------------------------
   dl.specs › div › dt + dd. Year, technique, dimensions; an artist's practice
   and exhibitions; pre-contract terms. Ruled rows, term muted at the left. */
.specs {
  border-top: var(--border) solid var(--band-rule-soft);
}

.specs > div {
  display: grid;
  grid-template-columns: minmax(var(--spec-term-min), 0.42fr) minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: var(--border) solid var(--band-rule-soft);
}

.specs dt {
  color: var(--band-muted);
  font-size: var(--text-sm);
}

.specs dd {
  font-size: var(--text-ui);
  line-height: var(--leading-copy);
  text-wrap: balance;
}

.specs dd + dd {
  grid-column: 2;
}

.specs--compact > div {
  padding-block: var(--space-2);
}

.specs--compact dd {
  font-size: var(--text-sm);
}


/* 20 Artwork page: the work, its label, the purchase -------------------------
   The work hangs on a mat: a linen panel as wide as the media column, the picture
   centred on it, never cropped, never wider than its file, lifted off the linen like
   paper (the figures' shadow). The mat is as tall as the picture needs and at most
   --work-fit, so the whole work is in the first screen. A tall work (data-format
   "tall") fills the height and keeps its views in a strip on the grid's left edge;
   any other work keeps them in a row under the mat. Views (the whole work, a detail)
   are small buttons, never laid over the work.
   Owner, 29 October 2026: a tall work sat at the left of its column, with a gap as
   wide as itself before the label and its foot below the fold. */
.artwork {
  --work-h: calc(var(--work-fit) - var(--view-thumb) - var(--space-3));
  --work-strip: 0rem;
  padding-top: var(--work-pad);
}

.artwork[data-format="tall"] {
  --work-h: var(--work-fit);
}

.artwork__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: var(--space-split);
  align-items: start;
}

.artwork-media {
  container-type: inline-size;
}

.artwork-media__stage {
  width: 100%;
  height: min(var(--work-h, var(--work-fit)), min(100cqi - var(--work-strip, 0rem) - 2 * var(--work-mat), var(--work-w)) / var(--work-r) + 2 * var(--work-mat));
  aspect-ratio: auto;
  background-image: var(--tex-linen);
  background-size: var(--tex-linen-size);
  background-blend-mode: multiply;
}

.artwork-media__stage > img {
  inset: var(--work-mat);
  width: calc(100% - 2 * var(--work-mat));
  height: calc(100% - 2 * var(--work-mat));
  max-width: var(--work-w);
  margin: auto;
  object-fit: contain;
  filter: var(--shadow-figure);
}

.artwork-media__views {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

@media (min-width: 561px) {
  .artwork[data-format="tall"] {
    --work-strip: calc(var(--view-thumb) + var(--space-3));
  }

  .artwork[data-format="tall"] .artwork-media {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .artwork[data-format="tall"] .artwork-media__stage {
    flex: 1;
    min-width: 0;
  }

  .artwork[data-format="tall"] .artwork-media__views {
    flex-direction: column;
    margin-top: 0;
  }
}

/* On a phone the mat would only make the work smaller */
@media (max-width: 560px) {
  .artwork {
    --work-mat: 0rem;
  }
}

/* When the label runs longer than the work, the work stays in view beside it */
@media (min-width: 53.8125em) {
  .artwork-media {
    position: sticky;
    top: calc(var(--header-stuck) + var(--work-pad));
  }
}

.artwork-media__view {
  display: block;
  width: var(--view-thumb);
  aspect-ratio: 1;
  padding: var(--space-1);
  border: var(--border) solid transparent;
  background: none;
  cursor: pointer;
}

.artwork-media__view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artwork-media__view:hover,
.artwork-media__view[aria-pressed="true"] {
  border-color: var(--band-ink);
}

.artwork-media__view[aria-pressed="false"]:hover {
  border-color: var(--band-rule-soft);
}

.artwork__title {
  font-style: italic;
}

.artwork__artist {
  margin-top: var(--space-3);
  font: var(--weight-strong) var(--text-md) / var(--leading-snug) var(--font-text);
}

/* Open at both ends, like the principles: no rule above the year or below the
   dimensions; the first row starts at its cap height and the last ends on its
   baseline, so the artist above and the purchase rule below sit --space-5 away */
.artwork__label > .specs {
  margin-top: var(--space-5);
  border-top: 0;
}

.artwork__label > .specs > div:first-child {
  padding-top: 0;
}

.artwork__label > .specs > div:first-child > * {
  margin-top: var(--leading-trim);
}

.artwork__label > .specs > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.artwork__label > .specs > div:last-child > * {
  margin-bottom: var(--leading-trim);
}

/* The value sets the last row's bottom: Chrome rounds the smaller term's line so
   it would hang about a pixel below the baseline */
.artwork__label > .specs > div:last-child > dt {
  margin-bottom: -1lh;
}

.artwork__text {
  max-width: var(--measure);
  margin-top: var(--space-6);
  color: var(--band-muted);
}

@media (max-width: 53.75em) {
  .artwork__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

/* Price, state and actions. The same ruled row as the artwork card, at the
   size of a decision: the price in Raleway, the state chip opposite. */
.purchase {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border) solid var(--band-rule);
}

.purchase__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.purchase__amount {
  font: var(--weight-display) var(--text-xl) / var(--leading-flat) var(--font-display);
  font-variant-numeric: lining-nums;
}

.purchase__note {
  max-width: var(--measure-narrow);
  margin-top: var(--space-3);
  color: var(--band-muted);
  text-wrap: balance;
}

.purchase__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}

/* While works are not sold (site.json → sales): the one support button under the spec
   list, with no rule (the ink rule separated the price row; over a lone button it
   separated nothing) */
.purchase--support {
  margin-top: var(--space-6);
  padding-top: 0;
  border-top: 0;
}

.purchase--support .purchase__actions {
  margin-top: 0;
}

.purchase__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-4);
  color: var(--band-muted);
  font-size: var(--text-sm);
}

/* The dot ends an item, so a wrapped line never starts with it */
.purchase__facts li:not(:last-child)::after {
  content: "·";
  content: "·" / "";
  margin-left: var(--space-2);
}

/* 21 Artwork grid for any number of works --------------------------------------
   .artworks.artworks--grid: three columns, two from 860px, one full card per
   row on phones. Nothing is keyed to the first card, and a single work left by a
   filter is one ordinary card in the first column. An artist's page with one work
   lays it out on the page columns instead (.artist-work). */
@media (max-width: 53.75em) {
  .artworks--grid > .artwork-card:first-child {
    grid-column: auto;
  }
}

/* Two columns: an odd last card does not stand alone, it becomes a feature row */
@media (min-width: 561px) and (max-width: 53.75em) {
  .artworks--grid > .artwork-card:last-child:nth-child(odd):not(:only-child) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--space-5);
  }

  .artworks--grid > .artwork-card:last-child:nth-child(odd):not(:only-child) .artwork-card__media {
    flex: 1.35;
  }

  .artworks--grid > .artwork-card:last-child:nth-child(odd):not(:only-child) .artwork-card__body {
    flex: 1;
    grid-template-rows: none;
    align-content: end;
    padding-top: 0;
  }
}

@media (min-width: 561px) and (max-width: 53.75em) {
  .artworks--grid > .artwork-card:first-child {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .artworks--grid > .artwork-card:first-child .artwork-card__media {
    flex: none;
  }

  .artworks--grid > .artwork-card:first-child .artwork-card__body {
    flex: 1;
    grid-template-rows: auto auto 1fr auto;
    padding-top: var(--space-4);
  }
}

@media (max-width: 560px) {
  .artworks--grid {
    gap: var(--space-6);
  }

  .artworks--grid > .artwork-card,
  .artworks--grid > .artwork-card:not(:first-child) {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .artworks--grid > .artwork-card .artwork-card__media,
  .artworks--grid > .artwork-card:not(:first-child) .artwork-card__media {
    flex: none;
  }

  .artworks--grid > .artwork-card:not(:first-child) .artwork-card__title {
    font-size: var(--text-lg);
  }

  .artworks--grid > .artwork-card .artwork-card__body,
  .artworks--grid > .artwork-card:not(:first-child) .artwork-card__body {
    grid-template-rows: auto auto 1fr auto;
    padding-top: var(--space-4);
  }
}

/* 22 Collections: filters, count, empty state, load more ---------------------
   One script drives any list that can be filtered or revealed in steps (the
   gallery, news). Controls are form fields; their name is the data-filter-*
   attribute they read on each item. Without script every item shows and the
   filter bar and the button stay hidden.
   No rules around the bar (owner, 11 October 2026: "too many lines"): space alone
   groups head, controls with their count, and the list. */
.filters {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Selects share a row in equal columns; the segmented group (one row of boxes)
   takes its own row below 1280px, where it no longer fits beside three selects.
   Every control is label + 44px box, bottom-aligned, so the labels share a line. */
.filters__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-5);
}

.filters__controls > .filter {
  flex: 1 1 var(--filter-min);
}

.filters__controls > .segmented {
  flex: 0 0 auto;
}

/* A lone select (Galerie: the artist) is one grid column wide, over the first card,
   never a bar across the whole grid */
.filters__controls > .filter:only-child:not(.segmented) {
  flex: 0 1 calc((100% - 2 * var(--space-column)) / 3);
}

@media (max-width: 53.75em) {
  .filters__controls > .filter:only-child:not(.segmented) {
    flex-basis: calc((100% - var(--space-column)) / 2);
  }
}

@media (max-width: 560px) {
  .filters__controls > .filter:only-child:not(.segmented) {
    flex-basis: 100%;
  }
}

@media (max-width: 1280px) {
  .filters__controls > .segmented {
    flex-basis: 100%;
  }
}

.filter {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.filter__label {
  font: var(--weight-strong) var(--text-sm) / var(--leading-snug) var(--font-text);
}

.filters__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  min-height: var(--control-sm);
}

.filters__count {
  font-weight: var(--weight-strong);
  font-size: var(--text-ui);
}

/* Segmented choice: radio options as square boxes, the chosen one filled with
   band ink, like the language switch. The news filters. */
.segmented {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.segmented > legend {
  margin-bottom: var(--space-2);
  padding: 0;
}

.segmented__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.segmented__option {
  position: relative;
  display: inline-grid;
  min-width: var(--control-sm);
  min-height: var(--control-sm);
  place-items: center;
  padding: 0 var(--space-4);
  border: var(--border) solid var(--band-ink);
  color: var(--band-ink);
  font: var(--weight-strong) var(--text-ui) / var(--leading-snug) var(--font-text);
  cursor: pointer;
}

.segmented__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented__option:hover {
  box-shadow: inset 0 0 0 var(--border) var(--band-ink);
}

.segmented__option:has(input:checked) {
  background: var(--band-ink);
  color: var(--band-bg);
}

.segmented__option:has(input:focus-visible) {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.segmented__option:has(input[aria-invalid="true"]) {
  box-shadow: inset 0 0 0 var(--border-strong) var(--accent-action);
}

/* Honest empty state: says what happened and offers the way back */
.empty {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border: var(--border) solid var(--band-rule-soft);
}

/* Quiet: no box, the sentence and the link at the lead measure (an artist with no works yet) */
.empty--quiet {
  padding: 0;
  border: 0;
}

.empty--quiet p {
  font-size: var(--text-md);
}

.empty p {
  max-width: var(--measure-lead);
  color: var(--band-muted);
  text-wrap: balance;
}

/* Load more: progress in words, then the button */
.collection-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border) solid var(--band-rule-soft);
}

.collection-more__progress {
  color: var(--band-muted);
  font-size: var(--text-sm);
}

@media (max-width: 560px) {
  .filters__controls > .filter {
    flex-basis: 100%;
  }

  .segmented__option {
    padding-inline: var(--space-3);
  }
}

/* 23 Long-form text, event block, legal text, error page ----------------------
   .prose styles text a person wrote in the CMS, so here, and only here, bare
   h2, h3, lists, quotes and figures take a look from their element. */
.prose {
  max-width: var(--measure);
}

/* A legal text groups its blocks in sections: they read as if the section were not there */
.prose > * + *,
.prose > section > * + * {
  margin-top: var(--space-4);
}

.prose > h2,
.prose > section > h2 {
  margin-top: var(--space-7);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
}

.prose > h3,
.prose > section > h3 {
  margin-top: var(--space-6);
}

.prose > :is(h2, h3) + *,
.prose > section > :is(h2, h3) + * {
  margin-top: var(--space-3);
}

.prose > :first-child,
.prose > section > :first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  padding-left: var(--space-5);
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose li::marker {
  color: var(--band-muted);
}

.prose blockquote {
  margin-block: var(--space-6);
  margin-inline: 0;
  padding-left: var(--space-5);
  border-left: var(--border) solid var(--band-rule);
}

.prose blockquote p {
  font: italic var(--weight-medium) var(--text-lg) / var(--leading-copy) var(--font-display);
  text-wrap: pretty;
}

.prose blockquote footer {
  margin-top: var(--space-3);
  color: var(--band-muted);
  font-size: var(--text-sm);
}

.prose figure {
  margin-block: var(--space-6);
}

.prose figcaption,
.caption {
  margin-top: var(--space-2);
  color: var(--band-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-copy);
  text-wrap: balance;
}

/* Event block: date, time, place, entry, and the one action */
.event-block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5) var(--space-6);
  padding: var(--space-5);
  border: var(--border) solid var(--band-rule);
}

.event-block__date {
  display: grid;
  align-content: start;
  justify-items: center;
  min-width: var(--control);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-flat);
}

.event-block__day {
  font-size: var(--text-2xl);
}

.event-block__month {
  margin-top: var(--space-2);
  font: var(--weight-strong) var(--text-xs) / var(--leading-flat) var(--font-text);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.event-block__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}

@media (max-width: 560px) {
  .event-block {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .event-block__date {
    grid-auto-flow: column;
    justify-content: start;
    align-items: baseline;
    gap: var(--space-2);
  }

  .event-block__day {
    font-size: var(--text-xl);
  }
}

/* Legal text: the contents of a page (the left column of .article, section 25) */

.toc__list {
  margin-top: var(--space-3);
  border-top: var(--border) solid var(--band-rule);
}

.toc__list li {
  border-bottom: var(--border) solid var(--band-rule-soft);
}

.toc__list a {
  display: grid;
  grid-template-columns: var(--toc-num) minmax(0, 1fr);
  min-height: var(--control-sm);
  align-content: center;
  align-items: baseline;
  padding-block: var(--space-2);
  color: var(--band-muted);
  font-size: var(--text-ui);
  line-height: var(--leading-snug);
}

/* An entry that wraps hangs under its words, not under its number: the numbers take a
   column as wide as the longest ("10." in a list of ten or more), and the words balance
   so a long entry never leaves one word alone on its last line */
.toc__list {
  --toc-num: 1.25em;
}

.toc__list--tens {
  --toc-num: 1.75em;
}

.toc__num {
  font-variant-numeric: tabular-nums;
}

.toc__text {
  text-wrap: balance;
}

.toc__list a[aria-current] {
  color: var(--band-ink);
  font-weight: var(--weight-strong);
}

.legal__body > section + section {
  margin-top: var(--space-7);
}

.legal__updated {
  margin-top: var(--space-7);
  color: var(--band-muted);
  font-size: var(--text-sm);
}

/* Error page: what happened, the routes onward, three figures on a horizon */
.error-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-split);
  align-items: end;
}

.error-page .lead {
  margin-top: var(--space-5);
}

.error-page__routes {
  margin-top: var(--space-6);
  border-top: var(--border) solid var(--band-rule-soft);
}

.error-page__routes li {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-1) var(--space-5);
  align-items: baseline;
  border-bottom: var(--border) solid var(--band-rule-soft);
}

.error-page__routes span {
  color: var(--band-muted);
  font-size: var(--text-ui);
  text-wrap: balance;
}

.error-page .figures {
  --figures-cols: 3;
}

@media (max-width: 53.75em) {
  .error-page__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
  }
}

@media (max-width: 560px) {
  .error-page__routes li {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--space-3);
  }
}

/* 24 Forms and form windows ---------------------------------------------------
   Visible labels above fields; optional fields say so, required ones do not
   shout. A field's error is written under it, tied to it by aria-describedby,
   and the field takes the orange ring. The field keeps the canvas/ink pair on
   every ground (the documented exception to The Band Owns The Colour Rule). */
.form {
  display: grid;
  gap: var(--space-5);
}

.form__group {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form__group > legend {
  margin-bottom: var(--space-3);
  padding: 0;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.form__grid > .form-field--full {
  grid-column: 1 / -1;
}

/* Fields side by side share their rows: each field spans four rows of the grid
   (label, hint, box, error) through subgrid, so labels and boxes line up across
   the row whether or not a neighbour has a hint or an error. An absent hint or a
   hidden error leaves a zero-height row; spacing comes from margins, not the gap,
   so empty rows add nothing. Without subgrid support the field stacks as before. */
@supports (grid-template-rows: subgrid) {
  /* the last row's margin is taken back, so the grid ends where its fields end */
  .form__grid {
    row-gap: 0;
    margin-bottom: calc(-1 * var(--space-4));
  }

  .form__grid > .form-field {
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    margin-bottom: var(--space-4);
  }

  .form__grid > .form-field > * {
    grid-row: 2;
  }

  .form__grid > .form-field > .form-field__label {
    grid-row: 1;
    margin-bottom: var(--space-2);
  }

  .form__grid > .form-field > .form-field__hint {
    grid-row: 3;
    margin-top: var(--space-2);
  }

  .form__grid > .form-field > .form-field__error {
    grid-row: 4;
    margin-top: var(--space-2);
  }
}

/* What happens next, in a confirmation: a short numbered list */
/* ol.next-steps outranks the ol[class] list reset */
ol.next-steps {
  display: grid;
  max-width: var(--measure);
  gap: var(--space-2);
  padding-left: var(--space-5);
  list-style: decimal;
  color: var(--band-ink);
}

.next-steps li::marker {
  color: var(--band-muted);
  font-weight: var(--weight-strong);
}

.form-field {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-field > legend {
  margin-bottom: var(--space-2);
  padding: 0;
}

.form-field__label {
  color: var(--band-ink);
  font: var(--weight-strong) var(--text-ui) / var(--leading-snug) var(--font-text);
}

.form-field__optional {
  color: var(--band-muted);
  font-weight: var(--weight-text);
}

.form-field__hint {
  color: var(--band-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-copy);
  text-wrap: balance;
}

.form-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--band-ink);
  font: var(--weight-strong) var(--text-sm) / var(--leading-copy) var(--font-text);
  text-wrap: balance;
}

.form-field__error::before {
  content: "";
  width: var(--status-icon);
  height: var(--status-icon);
  flex: none;
  background: currentColor;
  -webkit-mask: var(--status-alert) center / contain no-repeat;
  mask: var(--status-alert) center / contain no-repeat;
}

.input {
  width: 100%;
  min-height: var(--control);
  padding: var(--space-3) var(--space-4);
  border: var(--border) solid var(--band-muted);
  border-radius: var(--radius-0);
  background: var(--c-canvas);
  color: var(--c-ink);
  font: var(--weight-text) var(--text-base) / var(--leading-snug) var(--font-text);
}

.input--compact {
  min-height: var(--control-sm);
  padding-block: var(--space-2);
}

textarea.input {
  min-height: var(--textarea-h);
  line-height: var(--leading-body);
  resize: vertical;
}

.input:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
  outline-color: var(--c-cobalt);
}

.input[aria-invalid="true"] {
  border-color: var(--accent-action);
  box-shadow: inset 0 0 0 var(--border-strong) var(--accent-action);
}

.input[aria-invalid="true"]:focus-visible {
  outline-offset: calc(-2 * var(--focus-width));
}

.input:disabled {
  opacity: var(--opacity-disabled);
}

/* Select: the native control without its platform arrow, and a drawn chevron */
.select {
  position: relative;
}

.select > select {
  padding-right: calc(2 * var(--space-4) + var(--select-icon-size));
  appearance: none;
  cursor: pointer;
}

.select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-4);
  width: var(--select-icon-size);
  height: var(--select-icon-size);
  background: var(--c-ink);
  -webkit-mask: var(--select-icon) center / contain no-repeat;
  mask: var(--select-icon) center / contain no-repeat;
  translate: 0 -50%;
  pointer-events: none;
}

/* Checkbox and radio rows (the drawn box is defined with .check in section 13) */
.options {
  display: grid;
  gap: var(--space-2);
}

.options--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--control-sm);
  padding-block: var(--space-2);
  color: var(--band-ink);
  font-size: var(--text-ui);
  line-height: var(--leading-copy);
  cursor: pointer;
}

.option input {
  margin-top: var(--status-icon-shift);
}

.option span {
  text-wrap: pretty;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.form__actions .status {
  flex-basis: 100%;
  margin-top: 0;
}

@media (max-width: 560px) {
  .form__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Form window: the checkout dialog (while works are sold). Wider than the
   message dialog; a full-screen sheet on phones. Everything the law asks to be
   shown before paying is in the window, and so is the confirmation. */
.dialog--form {
  width: min(var(--dialog-form-w), 100% - 2 * var(--space-4));
  max-width: none;
}

.dialog--form .dialog__title {
  max-width: none;
}

.dialog--form .form {
  margin-top: var(--space-5);
}

.dialog__note {
  margin-top: var(--space-3);
  color: var(--band-muted);
  font-size: var(--text-ui);
}

@media (max-width: 560px) {
  .dialog--form {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
  }

  .dialog--form .dialog__body {
    min-height: 100%;
    padding: var(--space-6) var(--gutter) var(--space-7);
  }
}

/* The thing being bought: thumbnail, title, artist, price, between two rules */
.order-line {
  display: grid;
  grid-template-columns: var(--order-thumb) minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-5);
  padding-block: var(--space-4);
  border-block: var(--border) solid var(--band-rule-soft);
}

.order-line__media {
  --ratio: 1;
}

.order-line__title {
  font-style: italic;
}

.order-line__meta {
  color: var(--band-muted);
  font-size: var(--text-sm);
  text-wrap: balance;
}

.order-line__price {
  font: var(--weight-display) var(--text-lg) / var(--leading-flat) var(--font-display);
  white-space: nowrap;
}

/* Pre-contract information: the terms, in the window, before the order button */
.precontract {
  padding-top: var(--space-4);
  border-top: var(--border) solid var(--band-rule);
}

.precontract > .specs {
  margin-top: var(--space-3);
}

/* The confirmation, in the same window */
.form-done > * + * {
  margin-top: var(--space-4);
}

.form-done__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: var(--space-8);
}

.form-done__title::before {
  content: "";
  width: var(--icon);
  height: var(--icon);
  flex: none;
  background: currentColor;
  -webkit-mask: var(--status-tick) center / contain no-repeat;
  mask: var(--status-tick) center / contain no-repeat;
}


@media (forced-colors: active) {
  .check input:checked,
  .choice input:checked,
  .option input:checked,
  .segmented__option:has(input:checked) {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .form-field__error::before,
  .form-done__title::before,
  .select::after {
    background: CanvasText;
  }

  .figures .silhouette-card::before {
    border-color: CanvasText;
  }

  /* The chosen view of a work: forced colours give every view button a border, so the
     chosen one takes the highlight colour and the others none */
  .artwork-media__view {
    border-color: Canvas;
  }

  .artwork-media__view[aria-pressed="true"] {
    border-color: Highlight;
  }
}

@media print {
  .crumbs,
  .toc,
  .filters,
  .collection-more,
  .artwork-media__views {
    display: none;
  }
}

/* 25 Phase 2: the remaining pages ------------------------------------------------
   Galerie, Noutăți, posts, Susține, Despre, Contact, the legal and error pages.
   Small layout helpers and five components; everything else on those pages is
   sections 16–24 reused. */

address {
  font-style: normal;
}

/* Stack: a column whose children are spaced evenly (the right column of a split) */
.stack > * + * {
  margin-top: var(--space-5);
}

/* Text in a column keeps to the measure when the page grid grows past 1536 */
.stack > p:not([class]) {
  max-width: var(--measure);
}

.stack > .h-label + * {
  margin-top: var(--space-3);
}

/* Offset: content alone in the page head's second column, under the lead. One
   column from 860px. */
.offset {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-7);
}

.offset > * {
  grid-column: 2;
}

* + .offset {
  margin-top: var(--space-7);
}

.page-head__row + .offset {
  margin-top: 0;
}

@media (max-width: 53.75em) {
  .offset {
    grid-template-columns: minmax(0, 1fr);
  }

  .offset > * {
    grid-column: 1;
  }

  * + .offset {
    margin-top: var(--space-6);
  }
}

/* Page columns: a split that keeps the page head's two columns, so every section
   of a page starts its text on the same vertical line as the lead (Susține, Despre,
   Contact, Galerie). Stacks at 860px like every split. Top-aligned, as .split--half:
   the columns' first lines sit level at the top. */
.split--page {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-6) var(--space-7);
}

/* A figure set stands on the section's bottom line instead */
.split--page > .figures {
  align-self: end;
}

/* A label opening a column has less leading than the title opposite: it drops
   --space-1 to sit level with the title's cap height (Contact, Despre › Parteneri) */
@media (min-width: 53.8125em) {
  .split--page > * > .h-label:first-child {
    margin-top: var(--space-1);
  }
}

/* An intro that travels with a long form beside it (Susține), only where the
   viewport is tall enough to hold it whole; on a short screen it scrolls normally */
@media (min-width: 53.8125em) and (min-height: 760px) {
  .stack--sticky {
    position: sticky;
    top: calc(var(--header-stuck) + var(--space-5));
    align-self: start;
  }
}

@media (max-width: 53.75em) {
  .split--page {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Page index: the sections of a long page, as text links under its lead */
.page-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin-top: var(--space-4);
}

/* News list: every post, newest first. Above 560px each post is a card, three to a
   row (two up to 860px): picture on top, then meta, headline and summary, the
   Galerie's artwork-grid grammar. Phones keep the homepage row. */
.news-list {
  border-top: var(--border) solid var(--band-rule);
}

/* A row without a picture is text from the grid edge, on every list and at every width */
.news-item--row.news-item--text {
  grid-template-columns: minmax(0, 1fr);
}

/* Phones: the controls fold behind "Filtrează"; the count stays in view above them */
.filters__toggle {
  display: none;
}

@media (max-width: 560px) {
  .js .filters__toggle {
    display: inline-flex;
  }

  .js .filters__controls:not([data-open]) {
    display: none;
  }

  .filters__meta {
    order: -1;
  }
}

/* Under the filter bar the list has no top rule and no space of its own: the bar's
   margin is the gap, as above the Galerie's grid */
.filters:not([hidden]) + .news-list {
  padding-top: 0;
  border-top: 0;
}

/* Phones: the first row loses its top padding too, which the rule above it used to need */
@media (max-width: 560px) {
  .filters:not([hidden]) + .news-list > .news-item--row:first-child {
    padding-top: 0;
  }
}

.news-list .news-item--row .media {
  --ratio: 16 / 10;
}

.news-list .news-item__body {
  gap: var(--space-2);
}

.news-list .news-item__body > p:not(.meta) {
  max-width: var(--measure-lead);
  font-size: var(--text-base);
}

@media (min-width: 561px) {
  .news-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-7) var(--space-column);
    padding-top: var(--space-6);
  }

  .news-list > .news-item--row {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-4);
    padding-block: 0;
    border-bottom: 0;
  }

  /* A post without a picture is a linen tile as tall as its row, its headline at the
     Sub size: a text card with a picture's weight. A soft-ruled box with an Item-size
     headline read as an empty box once half the posts had no picture (owner review,
     21 October 2026). */
  .news-list > .news-item--text {
    padding: var(--space-6);
    background-color: var(--surface-sunk);
  }

  .news-list > .news-item--text .news-item__body {
    gap: var(--space-3);
  }
}

@media (min-width: 561px) and (max-width: 53.75em) {
  .news-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .news-list {
    --thumb: var(--thumb-sm);
  }

  /* On phones a text post is a row like the others, with no tile: no second weave */
  .news-list > .news-item--text {
    background-image: none;
  }

  .news-list .news-item--row .media {
    --ratio: 1;
  }

  /* Every row headline alike, whether the card above 560px set it at the Item or the Sub size */
  .news-list .news-item__title {
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-none);
  }
}

/* Article: the layout of a post and of a legal page. The title across the grid
   (.page-title); then, on the page columns, the facts at the left (meta and the event
   block, or the contents), sticky while the lead and the text run at the right. */
.page-title {
  margin-bottom: var(--space-head);
}

.article {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-6) var(--space-7);
  align-items: start;
}

.article__main > * + * {
  margin-top: var(--space-6);
}

/* A dated post: the meta row under the title at the left, then the event block beside
   the text. The summary's capitals sit level with the block's top edge (owner,
   11 October 2026: aligned with the box, not with the tags above it). */
@media (min-width: 53.8125em) {
  .article--event {
    row-gap: var(--space-4);
  }

  .article--event > .meta {
    grid-column: 1;
  }

  .article--event > .article__aside {
    grid-row: 2;
    grid-column: 1;
  }

  .article--event > .article__main {
    grid-row: 2;
    grid-column: 2;
  }

  .article--event > .article__main > .page-head__lead:first-child {
    margin-top: var(--leading-trim);
  }
}

/* Any other post (an article, a workshop report) is the page head's two columns: the
   title, its meta row and its picture in the first, the summary and the text in the
   second, on the page-columns line, the summary's capitals level with the title's (The
   One Cap Line Rule). The picture takes the column's width under the meta, beside the
   text, so the first screen is full on both sides (owner, 11 October 2026: a title across
   the grid over one reading column left the right of the page empty; a left column
   holding only the meta row left the left empty). */
.article__head > .meta {
  margin-top: var(--space-4);
}

.article__head > .post__media {
  margin-top: var(--space-6);
}

/* An article without a picture (.article--text): the summary takes the picture's place
   under the meta row, so the first column holds the title, the meta and the summary, and
   the text starts in the second at once, its first capitals level with the title's.
   (Owner, October 2026: with the summary at the right, the left column held only the
   title and the meta beside the whole text.) */
.article__head > .page-head__lead {
  margin-top: var(--space-6);
}

@media (min-width: 53.8125em) {
  .article--single {
    --head-size: var(--text-2xl);
  }

  .article--single > .article__main > .page-head__lead:first-child,
  .article--text > .article__main > .prose:first-child {
    margin-top: calc(var(--head-size) * (var(--leading-tight) - var(--cap-display)) / 2 + var(--leading-trim));
  }

  /* Where the picture would be, the summary is set as a standfirst at the Item size in
     Raleway 500: the head keeps some weight opposite the text and travels beside it as
     the picture's head does. At the Sub size it ran four or five lines under a one-line
     title and read as a second headline (owner review, 21 October 2026). */
  .article__head > .page-head__lead {
    max-width: var(--measure-lead);
    font-family: var(--font-display);
    font-weight: var(--weight-medium);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
  }

  .article__head > .post__media {
    max-width: none;
  }
}

/* The head travels beside a long text (a report with pictures in its body), as the event
   block does, only where the viewport is tall enough to hold it whole (as .stack--sticky) */
@media (min-width: 53.8125em) and (min-height: 760px) {
  .article__head {
    position: sticky;
    top: calc(var(--header-stuck) + var(--space-5));
  }
}

/* A post's subheads: a short text under one title, so its sections take the Item size, not
   the Sub size of a legal text's chapters; a third level takes the Name size */
.post .prose > h2 {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-none);
}

.post .prose > h3 {
  font-size: var(--text-md);
}

@media (min-width: 53.8125em) {
  .article__aside {
    position: sticky;
    top: calc(var(--header-stuck) + var(--space-5));
    max-height: calc(100svh - var(--header-stuck) - 2 * var(--space-5));
    overflow: auto;
  }
}

/* The legal pages: the contents take a quarter of the grid, the text three quarters
   (owner, 11 October 2026: "Mai puțin spațiu cuprinsul (1/4), mai mult spațiu conținutul
   efectiv"). The contents never narrow below 15rem, so from 861px to about 1060px they
   hold that width and the text takes the rest. In the wide column the lead and the prose
   keep their measure (about 75 characters a line), and so does the model form, a sheet
   whose lines are short (at the column's width its box was half empty); the spec lists
   and a rule over each section run to the column's right edge, so the column reads as
   one ruled text the width of the grid, as the contents' rules do opposite. */
@media (min-width: 53.8125em) {
  .article--legal {
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 3fr);
  }

  .article--legal .legal__body {
    max-width: none;
  }

  .article--legal .legal__body > :not(section),
  .article--legal .legal__body > section > :not(.specs) {
    max-width: var(--measure);
  }

  .article--legal .legal__body > section {
    padding-top: var(--space-6);
    border-top: var(--border) solid var(--band-rule-soft);
  }

}

/* One column: the lead comes first, under the title, then the facts or the contents, then the text */
@media (max-width: 53.75em) {
  .article {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .article__main {
    display: contents;
  }

  .article__main > .page-head__lead {
    order: -1;
  }

  /* A dated post: meta, summary, the event block, then the picture and the text */
  .article--event {
    row-gap: 0;
  }

  .article--event > .meta {
    order: -2;
  }

  .article--event > .article__main > .page-head__lead {
    margin-top: var(--space-4);
  }

  .article--event > .article__aside,
  .article--event > .article__main > :not(.page-head__lead) {
    margin-top: var(--space-6);
  }

  /* An article: title, meta, summary, then the picture and the text, with the same spacing */
  .article--single {
    row-gap: 0;
  }

  .article__head {
    display: contents;
  }

  .article__head > h1 {
    order: -3;
  }

  .article__head > .meta {
    order: -2;
  }

  .article--single > .article__main > .page-head__lead,
  .article__head > .page-head__lead {
    margin-top: var(--space-4);
  }

  .article--single > .article__main > :not(.page-head__lead) {
    margin-top: var(--space-6);
  }

  .article__main > * + * {
    margin-top: 0;
  }

  /* One column: the facts, the contents and the picture keep the text's measure */
  .article__aside,
  .article__head > .post__media,
  .article__main > * {
    max-width: var(--measure);
  }
}

.post__media {
  --ratio: 16 / 10;
  max-width: var(--measure);
}

.prose__figure--portrait {
  max-width: var(--figure-portrait);
}

@media (max-width: 560px) {
  .post__media {
    --ratio: 4 / 3;
  }
}

/* Entries: a ruled index of named things (projects), title at the left, what and
   when at the right; the title is a card link when the entry has a page.
   Top-aligned on the cap height: the title's and the meta line's first lines lose
   their leading above (--leading-trim), so their capitals sit level --space-5 under
   the rule, and the row's last baseline sits --space-5 over the next one. */
.entries {
  border-top: var(--border) solid var(--band-rule);
}

.entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-2) var(--space-7);
  align-items: start;
  padding-block: var(--space-5);
  border-bottom: var(--border) solid var(--band-rule-soft);
}

.entry__title {
  margin-top: var(--leading-trim);
}

.entry__body > :last-child {
  margin-bottom: var(--leading-trim);
}

@media (min-width: 561px) {
  .entry__title {
    margin-bottom: var(--leading-trim);
  }

  .entry__body > :first-child {
    margin-top: var(--leading-trim);
  }
}

.entry__body > * + * {
  margin-top: var(--space-1);
}

.entry__meta {
  font-weight: var(--weight-strong);
  font-size: var(--text-ui);
  line-height: var(--leading-copy);
}

.entry__body > p:not(.entry__meta) {
  max-width: var(--measure-lead);
  color: var(--band-muted);
  text-wrap: balance;
}

@media (max-width: 560px) {
  .entry {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Impact: the transparency block under the ledger */
.impact__transparency {
  margin-top: var(--space-head);
}

/* Three figures on a horizon, at every width (Despre, error pages). On phones an item
   marked --wide steps out, and a set that had one becomes a pair. */
.figures.figures--three {
  --figures-cols: 3;
}

@media (max-width: 560px) {
  .figures__item--wide {
    display: none;
  }

  .figures.figures--three:has(.figures__item--wide) {
    --figures-cols: 2;
  }
}

/* The withdrawal model form: the legal text with its blanks, in a ruled box */
.model-form {
  padding: var(--space-5);
  border: var(--border) solid var(--band-rule);
}

.model-form > p + p {
  margin-top: var(--space-3);
}

.model-form__blank {
  display: inline-block;
  min-width: var(--blank-line);
  border-bottom: var(--border) solid var(--band-rule);
}

/* A form in the page (contact, partnership, volunteering): confirmation in place */
.page-form > [data-form-panel] > .form-field__hint {
  margin-top: var(--space-2);
}

.page-form .form {
  margin-top: var(--space-5);
}

/* A form with no heading of its own (Contact: the lead above already says "Scrie-ne")
   opens its column: its first labels sit level with the label opposite */
.page-form > [data-form-panel] > .form:first-child {
  margin-top: 0;
}

@media (min-width: 53.8125em) {
  .split--page > .page-form > [data-form-panel] > .form:first-child > .form__grid:first-child > .form-field:nth-child(-n + 2) > .form-field__label {
    margin-top: var(--space-1);
  }
}

/* Under a ruled list the load-more row needs no second rule */
.news-list ~ .collection-more {
  margin-top: var(--space-5);
  padding-top: 0;
  border-top: 0;
}

/* 26 Despre: programs, the people, partners' groups, project pages -----------------
   Round 2 of the client's feedback (October 2026). */

/* The Despre head, two columns from 861px. The first: the title, the association's
   description under it, and under that the picture of a project (site.json → aboutPhoto),
   which takes whatever height is left, so its foot sits on the programs' last baseline and
   both columns end on one line. The picture takes the description's measure, not the
   column's width: where the column is wider than the text (above 1360px) it stops where
   the description's box does, so the gap to the programs widens from one gutter to about
   two and the picture belongs to the text above it rather than leaning on the list. The
   second: "Programele noastre", its capitals level with the title's (The One Cap Line
   Rule), then the four programs as a ruled list: above 1360px (--bp-xl, used here only)
   each program's heading beside its paragraph; from 861 to 1360px the heading over the
   paragraph. One column under 860px, the picture at 3:2 after the description. */
.about-head {
  --about-photo-min: 18rem;
  display: grid;
  gap: var(--space-7);
}

.about-head__intro {
  display: flex;
  flex-direction: column;
}

.about-head__text {
  margin-top: var(--space-5);
}

.about-head__photo {
  --ratio: 3 / 2;
  margin-top: var(--space-6);
}

.programs__list {
  margin-top: var(--space-5);
}

.programs__list li {
  padding-block: var(--space-5);
  border-top: var(--border) solid var(--band-rule-soft);
}

.programs__list li:last-child {
  padding-bottom: 0;
}

.programs__list p {
  max-width: var(--measure);
  margin-top: var(--space-2);
  text-wrap: pretty;
}

/* the column ends on the last paragraph's baseline, where the picture opposite ends */
.programs__list li:last-child p {
  margin-bottom: var(--leading-trim);
}

@media (min-width: 53.8125em) {
  .about-head {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: var(--space-7);
  }

  /* the description's measure: 48ch at the lead's size (font-size sets the ch, no text here) */
  .about-head__photo {
    flex: 1 1 auto;
    min-height: var(--about-photo-min);
    max-width: var(--measure-lead);
    font-size: var(--text-md);
    aspect-ratio: auto;
  }

  /* Display title and Sub heading: each loses its own leading over its cap height */
  .programs > .h-sub {
    margin-top: calc(var(--text-3xl) * (var(--leading-tight) - var(--cap-display)) / 2 - var(--text-xl) * (var(--leading-heading) - var(--cap-display)) / 2);
  }
}

@media (min-width: 1361px) {
  .programs__list li {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    column-gap: var(--space-6);
    align-items: baseline;
  }

  .programs__list p {
    margin-top: 0;
  }
}

/* Oamenii din spatele Vizibil: the people, three to a row (two below 861px), each card the
   black-and-white portrait at 4:5 (rectangular on purpose: the silhouette belongs to the
   artists), the name, the role and "Despre <first name>". The button, stretched over the
   card, opens the person's whole text in a paper panel that spans the row under the
   card's row, its notch pointing at the card (site.js → initPeople sets --notch). Each
   <li> is display: contents, so card and panel are both items of the grid; dense flow
   lets the cards after an open panel fill their row first. The panel's text starts on the
   second card's left edge, the line the section head's lead stands on. Without script
   the buttons are not shown and every text is open, in its panel after its row. */
.people {
  --notch-size: 0.75rem;
  --person-reveal: 9rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--space-7) var(--space-column);
}

.person {
  display: contents;
}

.person__card {
  position: relative;
}

.person__media {
  --ratio: 4 / 5;
  margin-bottom: var(--space-4);
}

.person__role {
  margin-top: var(--space-1);
  color: var(--band-muted);
  font-size: var(--text-ui);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

/* No portrait yet: a card of text under a soft rule, no empty picture box */
.person--text .person__head {
  padding-top: var(--space-4);
  border-top: var(--border) solid var(--band-rule-soft);
}

.person__toggle {
  display: none;
  margin-top: var(--space-1);
}

.js .person__toggle {
  display: inline-flex;
}

/* The whole card is the button's target; its focus ring wraps the card (as .card-link) */
.person__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
}

.person__toggle:focus-visible {
  outline: none;
}

.person__toggle:focus-visible::after {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.person__card:hover .person__toggle,
.person__toggle[aria-expanded="true"] {
  text-decoration-thickness: var(--underline-strong);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .js .person__card:hover .person__media > img {
    scale: var(--media-hover-scale);
  }
}

.person__text {
  --pad: var(--space-panel);
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: calc((100% + 2 * var(--pad) - 2 * var(--space-column)) / 3 - var(--pad)) minmax(0, 1fr);
  column-gap: var(--space-column);
  align-items: start;
  padding: var(--pad);
  background-color: var(--surface);
  /* opened from the address (#slug): the card's name, role and button stay in view above */
  scroll-margin-top: var(--person-reveal);
}

/* With script: one panel open at a time, pulled up to its row, the notch under the card */
.js .person__text {
  margin-top: calc(var(--notch-size) + var(--space-2) - var(--space-7));
}

.js .person__text:not([data-open]) {
  display: none;
}

.js .person__text::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--notch-size));
  left: var(--notch, 4rem);
  width: calc(2 * var(--notch-size));
  height: var(--notch-size);
  background: var(--surface);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  translate: -50% 0;
}

.person__text-name {
  margin-top: var(--leading-trim);
}

.person__bio {
  max-width: var(--measure);
  font-size: var(--text-md);
}

.person__bio > p:first-child {
  margin-top: var(--leading-trim);
}

.person__bio p {
  text-wrap: pretty;
}

.person__bio p + p {
  margin-top: var(--space-3);
}

/* the panel's padding measured from the text's capitals and its last baseline */
.person__bio > p:last-child {
  margin-bottom: var(--leading-trim);
}

.person__close {
  display: none;
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.js .person__close {
  display: inline-grid;
}

/* The head clears the close button; the text keeps the measure */
.js .person__text-head {
  padding-right: calc(var(--control) + var(--space-4));
}

@media (min-width: 53.8125em) {
  .js .person__text-head {
    padding-right: 0;
  }

  /* where the panel's padding is narrower than the button, the text's first lines clear it */
  .js .person__bio {
    margin-right: max(0px, var(--control) + var(--space-4) + var(--space-3) - var(--pad));
  }
}

@media (max-width: 53.75em) {
  .people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }

  .person__text {
    --pad: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
  }

  .js .person__text {
    margin-top: calc(var(--notch-size) + var(--space-2) - var(--space-6));
  }

  .person__bio {
    margin-top: var(--space-4);
    font-size: var(--text-base);
  }

  .person__bio > p:first-child {
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .person__media {
    margin-bottom: var(--space-3);
  }

  .person__role {
    font-size: var(--text-sm);
  }
}

/* Despre › Parteneri: the logos the partners have sent, in one row under the groups, all at
   one height. Their files are on white: multiply lays them on the paper, and grey keeps
   one quiet row whatever each brand's colours. */
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-7);
  margin-top: var(--space-7);
}

/* --logo-scale: set on a narrow logo by the template (Despre › Parteneri), so a square
   seal is not the smallest thing in the row */
.partner-logos img {
  display: block;
  width: auto;
  height: calc(3.5rem * var(--logo-scale, 1));
  filter: grayscale(1);
  mix-blend-mode: multiply;
}

/* A project's page: the dated-post layout, with "Pe scurt" (what is known: when, where,
   who supported, hosted or joined it) in the event block's place, without its date
   column */
.event-block.project-aside {
  grid-template-columns: minmax(0, 1fr);
}

.project-aside .specs {
  margin-top: var(--space-4);
}

/* A funder's statement (AFCN) closes the text, small and muted, set off by space alone
   (the page closes no other note with a rule) */
/* A funder's credit, under the text of a project's page, a post about the project and its
   videos' window: a soft rule the text's width, the funding statement in the UI face, the
   funder's disclaimer as small print under it. Not body copy: it closes the text. */
.credit {
  max-width: var(--measure);
  padding-top: var(--space-4);
  border-top: var(--border) solid var(--band-rule-soft);
}

/* With the funder's logo (Între Spații: AFCN; Pas Cultural: Start ONG): the logo at the
   left, the words beside it, the logo as the partner logos on Despre (grey, multiplied onto
   the ground) */
.credit--logo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
}

.credit__logo {
  display: block;
  width: auto;
  height: 4rem;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}

/* On phones the words get the width: the logo a size down, level with the statement */
@media (max-width: 560px) {
  .credit__logo {
    height: 3rem;
  }
}

.credit__line {
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

.credit__note {
  margin-top: var(--space-2);
  color: var(--band-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-copy);
  text-wrap: pretty;
}

.article__main > .credit {
  margin-top: var(--space-7);
}

/* A text that opens on a section heading starts at the column top, as one that opens on a paragraph */
.post .prose > h2:first-child {
  margin-top: 0;
}

/* 27 Photos: the text's photos, the strip of extra ones, the gallery window ----------
   An article's photos (a post's, a project's page) open, large, in the gallery window
   (src/site/components/photos.tsx, site.js › initPhotos); docs/design.md › Photos. */

/* A photo in the text is a link to the gallery: it looks as it did; on hover or keyboard
   focus a marker with the enlarge mark stands in its corner, as the hero's markers do */
.photo-zoom {
  position: relative;
  display: block;
  color: inherit;
  cursor: zoom-in;
}

.photo-zoom:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.photo-zoom__mark {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  width: var(--control-sm);
  height: var(--control-sm);
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
  pointer-events: none;
}

.photo-zoom__mark svg,
.photo-dialog__arrows svg {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.photo-zoom:hover .photo-zoom__mark,
.photo-zoom:focus-visible .photo-zoom__mark {
  opacity: 1;
}

/* Without hover (a touch screen) the mark is always there, smaller and closer to the corner, so
   a photo that opens is seen to (Vlad, 1.11) */
@media (hover: none) {
  .photo-zoom__mark {
    right: var(--space-2);
    bottom: var(--space-2);
    width: var(--space-6);
    height: var(--space-6);
    opacity: 1;
  }

  .photo-zoom__mark svg {
    width: var(--space-4);
    height: var(--space-4);
  }
}

/* The extra photos, once, at the end of the text: square thumbnails. Without script every one
   shows, in rows; with it one row, 4, 5 or 6 as the column allows, the last one shown carrying
   "+N" for the rest (each of the 4th, 5th and 6th has its own, shown where it ends the row) */
.photo-strip {
  max-width: var(--measure);
  margin-top: var(--space-7);
  container-type: inline-size;
}

.photo-strip__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--space-2);
}

.photo-strip__item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface-sunk);
  color: var(--c-paper);
  cursor: zoom-in;
}

.photo-strip__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-strip__item:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.photo-strip__more {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: var(--scrim);
  font: var(--weight-display) var(--text-xl) / 1 var(--font-display);
  font-variant-numeric: lining-nums;
}

.js .photo-strip__list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.js .photo-strip__list > li:nth-child(n + 5) {
  display: none;
}

.js .photo-strip__list > li:nth-child(4) .photo-strip__more {
  display: grid;
}

@container (min-width: 30rem) {
  .js .photo-strip__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .js .photo-strip__list > li:nth-child(5) {
    display: block;
  }

  .js .photo-strip__list > li:nth-child(4) .photo-strip__more {
    display: none;
  }

  .js .photo-strip__list > li:nth-child(5) .photo-strip__more {
    display: grid;
  }
}

@container (min-width: 38rem) {
  .js .photo-strip__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .js .photo-strip__list > li:nth-child(6) {
    display: block;
  }

  .js .photo-strip__list > li:nth-child(5) .photo-strip__more {
    display: none;
  }

  .js .photo-strip__list > li:nth-child(6) .photo-strip__more {
    display: grid;
  }
}

/* The window: the whole screen, linen, as a work's mat is; the photo as large as it fits, with
   the shadow of a work on its mat. "Galerie foto" and the close button above; the count and the
   previous and next markers below, so nothing is laid over the photo */
.photo-dialog {
  --band-bg: var(--surface-sunk);
  --photo-pad: var(--space-4);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--surface-sunk);
  color: var(--ink);
}

.photo-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: fade-in var(--dur-base) var(--ease-out) both;
}

.photo-dialog::backdrop {
  background: var(--scrim);
}

.photo-dialog__bar,
.photo-dialog__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--photo-pad);
}

.photo-dialog__title:focus {
  outline: none;
}

.photo-dialog__stage {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  min-height: 0;
  padding: var(--space-2) var(--photo-pad);
  /* a swipe is the gallery's, a vertical drag the page's (the window does not scroll) */
  touch-action: pan-y pinch-zoom;
}

.photo-dialog__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: var(--surface);
  filter: var(--shadow-figure);
  animation: fade-in var(--dur-base) var(--ease-out) both;
}

.photo-dialog__count {
  color: var(--muted);
  font-size: var(--text-sm);
  font-variant-numeric: lining-nums tabular-nums;
}

.photo-dialog__arrows {
  display: flex;
  gap: var(--space-2);
}

.photo-dialog__arrows .marker {
  cursor: pointer;
}

@media (max-width: 53.75em) {
  .photo-dialog__arrows .marker {
    width: var(--control-sm);
    height: var(--control-sm);
  }
}