/* ==========================================================================
   ärdəzən · ardezen.eu · folha de estilo v6.0
   Autor: JMR · Editor da identidade de marca: UNICI-Solutions, Lda.
   Paleta e tipografia: Manual de Identidade v3.0
   ========================================================================== */

/* ---- Fontes (Assistant, OFL, servidas localmente) ----------------------- */
@font-face { font-family: 'Assistant'; font-weight: 200; font-display: swap; src: url('/assets/fonts/Assistant-ExtraLight.woff2') format('woff2'); }
@font-face { font-family: 'Assistant'; font-weight: 300; font-display: swap; src: url('/assets/fonts/Assistant-Light.woff2') format('woff2'); }
@font-face { font-family: 'Assistant'; font-weight: 400; font-display: swap; src: url('/assets/fonts/Assistant-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Assistant'; font-weight: 600; font-display: swap; src: url('/assets/fonts/Assistant-SemiBold.woff2') format('woff2'); }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --bordeaux: #852020;
  --navy:     #111344;
  --gelo:     #EAF2EF;
  --oliva:    #595A4A;
  --areia:    #B2B09B;

  --bg:        #FFFFFF;             /* página: branco puro */
  --bg-chrome: var(--gelo);          /* cabeçalho e rodapé: branco-gelo, um tom abaixo */
  --ink:       var(--navy);
  --ink-2:     var(--oliva);
  --rule:      var(--areia);
  --accent:    var(--bordeaux);
  --paper:     #F4F8F6;              /* campos de formulário */
  --band:      #E2ECE8;              /* banda de destaque, um tom abaixo do chrome */

  --font: 'Assistant', 'Segoe UI', system-ui, sans-serif;

  /* escala tipográfica (Bringhurst, razão ~1.25, base 17px) */
  --fs--1: 0.85rem;   /* 14.4 */
  --fs-0:  1.0625rem; /* 17 */
  --fs-1:  1.33rem;   /* 22.6 */
  --fs-2:  1.66rem;   /* 28 */
  --fs-3:  2.07rem;   /* 35 */
  --fs-4:  2.6rem;    /* 44 */
  --fs-5:  3.25rem;   /* 55 */
  --fs-6:  4.06rem;   /* 69 */

  --lh: 1.5;
  --measure: 34rem;   /* ~68 caracteres */

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --col-left: clamp(0rem, 12vw, 14rem); /* coluna de leitura deslocada à direita */
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6.5rem;

  --ease: 220ms cubic-bezier(.2,.6,.2,1);
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-0); line-height: var(--lh); font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-weight: 200; line-height: 1.1; margin: 0; letter-spacing: -0.005em; }
p { margin: 0 0 var(--space-2); }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dt, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--gelo); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: var(--gutter); }

/* ---- Cabeçalho ---------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--gutter);
  background: color-mix(in srgb, var(--bg-chrome) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--areia) 55%, transparent);
}
.wordmark { display: inline-flex; flex-direction: column; line-height: 1; color: var(--ink); }
.wordmark:hover { color: var(--ink); }
.wordmark__name { font-weight: 600; font-size: var(--fs-2); letter-spacing: .01em; }
.wordmark__tag  { font-weight: 200; font-size: var(--fs--1); letter-spacing: .04em; margin-top: .15rem; color: var(--ink-2); }

.site-nav { display: flex; align-items: center; gap: var(--space-4); }
.site-nav__list { display: flex; gap: var(--space-3); }
.site-nav__list a { font-weight: 300; font-size: var(--fs-0); padding: .25rem 0; border-bottom: 1px solid transparent; }
.site-nav__list a[aria-current] { border-bottom-color: var(--ink); }
.lang-switch { display: flex; gap: .75rem; font-size: var(--fs--1); color: var(--ink-2); }
.lang-switch a { text-transform: lowercase; }
.lang-switch a[aria-current] { color: var(--ink); font-weight: 600; }

.nav-toggle { display: none; align-items: center; gap: .6rem; font-size: var(--fs--1); font-weight: 300; }
.nav-toggle__bar { width: 26px; height: 1px; background: var(--ink); position: relative; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ''; position: absolute; left: 0; width: 26px; height: 1px; background: var(--ink); transition: transform var(--ease); }
.nav-toggle__bar::before { top: -7px; } .nav-toggle__bar::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset: 0; top: 0; padding: 7rem var(--gutter) var(--space-5);
    flex-direction: column; align-items: flex-start; justify-content: space-between;
    background: var(--bg-chrome); transform: translateX(100%); transition: transform var(--ease); visibility: hidden;
  }
  .site-nav.is-open { transform: none; visibility: visible; }
  .site-nav__list { flex-direction: column; gap: var(--space-2); }
  .site-nav__list a { font-size: var(--fs-3); font-weight: 200; }
  body.nav-open { overflow: hidden; }
}

/* ---- Botões e ligações -------------------------------------------------- */
.btn {
  display: inline-block; padding: .85rem 1.6rem;
  background: var(--accent); color: #FFFFFF; font-weight: 600; font-size: var(--fs-0);
  transition: background var(--ease);
}
.btn:hover, .btn:focus-visible { background: color-mix(in srgb, var(--accent) 85%, var(--navy)); color: var(--gelo); }
.link { border-bottom: 1px solid var(--rule); padding-bottom: .05em; }
.link:hover { border-bottom-color: var(--accent); }
.crumb { font-size: var(--fs--1); color: var(--ink-2); margin-bottom: var(--space-3); }

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; display: grid; grid-template-columns: 1fr; min-height: min(88vh, 900px); }
.hero__figure { margin: 0; grid-area: 1/1; overflow: hidden; }
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }
.hero__figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,19,68,.55) 0%, rgba(17,19,68,.15) 45%, transparent 70%); pointer-events: none; }
.hero__figure { position: relative; }
.hero__figure--empty { background: linear-gradient(160deg, var(--areia) 0%, var(--oliva) 100%); opacity: .35; }
.hero__text {
  grid-area: 1/1; align-self: end; z-index: 2;
  padding: var(--space-5) var(--gutter) var(--space-6);
  max-width: 40rem; color: var(--gelo);
  text-shadow: 0 1px 24px rgba(17,19,68,.35);
}
.hero__title { font-size: clamp(var(--fs-4), 6vw, var(--fs-6)); font-weight: 200; max-width: 16ch; }
.hero__lead { font-size: var(--fs-1); font-weight: 300; max-width: var(--measure); margin: var(--space-3) 0 var(--space-4); }
.hero .btn { text-shadow: none; }
@media (max-width: 860px) { .hero { min-height: 78vh; } .hero__text { padding-bottom: 9rem; } }

/* ---- Cartouche: legenda de desenho técnico ------------------------------ */
.cartouche {
  position: absolute; right: var(--gutter); bottom: var(--gutter); z-index: 3;
  width: min(22rem, calc(100% - 2 * var(--gutter)));
  background: var(--bg-chrome); color: var(--ink);
  border: 1px solid var(--ink);
  font-size: var(--fs--1); line-height: 1.35;
}
.cartouche__grid { display: grid; }
.cartouche__row { display: grid; grid-template-columns: 6.5rem 1fr; border-bottom: 1px solid var(--ink); }
.cartouche__row dt { padding: .45rem .6rem; border-right: 1px solid var(--ink); font-weight: 300; color: var(--ink-2); }
.cartouche__row dd { padding: .45rem .6rem; font-weight: 400; }
.cartouche__foot { display: flex; justify-content: space-between; align-items: baseline; padding: .5rem .6rem; border-top: 2px solid var(--accent); }
.cartouche__brand { font-weight: 600; font-size: var(--fs-0); }
.cartouche__ref { font-weight: 300; color: var(--ink-2); letter-spacing: .02em; }
@media (max-width: 860px) {
  .cartouche { position: static; width: 100%; border-left: 0; border-right: 0; }
  .hero .cartouche { grid-area: 2/1; }
  .hero__text { padding-bottom: var(--space-5); }
}

/* ---- Bandas da home ----------------------------------------------------- */
.band { padding: var(--space-6) var(--gutter); }
.band + .band { padding-top: 0; }
.band__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-4); padding-left: var(--col-left); }
.band__title { font-size: var(--fs-3); font-weight: 200; }
.band__more { font-size: var(--fs--1); font-weight: 300; border-bottom: 1px solid var(--rule); }
.band__more:hover { border-bottom-color: var(--accent); }
.band__narrow { padding-left: var(--col-left); max-width: calc(var(--col-left) + var(--measure)); }
.band__lead { font-size: var(--fs-1); font-weight: 300; margin: var(--space-3) 0; }
.band__empty { padding-left: var(--col-left); color: var(--ink-2); font-weight: 300; }
.band--atelier { background: var(--band); padding-top: var(--space-6); }
.band--atelier + .band { padding-top: var(--space-6); }

/* ---- Grelha de projectos ------------------------------------------------ */
.proj-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.proj-grid--page { gap: var(--space-4) var(--space-3); }
.proj-grid--small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.proj-card a { display: block; }
.proj-card img, .proj-card__empty { aspect-ratio: 4/3; object-fit: cover; width: 100%; background: var(--areia); display: block; }
.proj-card__empty { opacity: .35; }
.proj-card__meta { display: flex; justify-content: space-between; gap: var(--space-2); padding: .7rem 0 0; border-top: 1px solid var(--ink); margin-top: .6rem; }
.proj-card__title { font-weight: 600; font-size: var(--fs-0); }
.proj-card__sub { font-weight: 300; font-size: var(--fs--1); color: var(--ink-2); text-align: right; }

/* ---- Artigos ------------------------------------------------------------ */
.art-list { display: grid; gap: 0; padding-left: var(--col-left); border-top: 1px solid var(--rule); }
.art-item a { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.art-item__cat { font-size: var(--fs--1); font-weight: 300; color: var(--ink-2); }
.art-item__title { font-size: var(--fs-2); font-weight: 200; grid-column: 2; }
.art-item__ex { grid-column: 2; font-weight: 300; color: var(--ink-2); max-width: var(--measure); }
@media (max-width: 640px) { .art-item a { grid-template-columns: 1fr; } .art-item__title, .art-item__ex { grid-column: 1; } }

.art-grid { display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.art-card a { display: grid; gap: .5rem; }
.art-card img { aspect-ratio: 3/2; object-fit: cover; width: 100%; margin-bottom: .5rem; }
.art-card .art-item__title { font-size: var(--fs-1); }
.pager { display: flex; gap: .75rem; margin-top: var(--space-5); justify-content: center; font-size: var(--fs--1); }
.pager a[aria-current] { font-weight: 600; border-bottom: 1px solid var(--ink); }

/* ---- Documentos (páginas de texto) -------------------------------------- */
.doc { padding: var(--space-5) var(--gutter) var(--space-6); }
.doc--wide .doc__head { padding-left: 0; }
.doc__head { padding-left: var(--col-left); margin-bottom: var(--space-5); }
.doc__head--row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.doc__title { font-size: clamp(var(--fs-4), 5vw, var(--fs-5)); }
.doc__lead { font-size: var(--fs-1); font-weight: 300; max-width: var(--measure); margin-top: var(--space-3); }
.doc__body { padding-left: var(--col-left); }
.doc__body.prose { box-sizing: content-box; }
.doc__aside { padding-left: var(--col-left); margin-top: var(--space-5); color: var(--ink-2); font-weight: 300; max-width: calc(var(--col-left) + var(--measure)); }
.doc__partner { border-left: 2px solid var(--accent); padding-left: var(--space-2); }
.doc__cta { padding-left: var(--col-left); margin-top: var(--space-5); }
.doc--404 { min-height: 60vh; }

.prose { max-width: var(--measure); font-weight: 300; box-sizing: content-box; }
.prose p { margin-bottom: var(--space-3); }
.prose h2 { font-size: var(--fs-2); margin: var(--space-5) 0 var(--space-2); }
.prose h3 { font-size: var(--fs-1); font-weight: 400; margin: var(--space-4) 0 var(--space-1); }
.prose a { border-bottom: 1px solid var(--rule); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose img { margin: var(--space-4) 0; }
.prose figcaption { font-size: var(--fs--1); color: var(--ink-2); margin-top: .5rem; }
.prose blockquote { margin: var(--space-4) 0; padding-left: var(--space-3); border-left: 2px solid var(--accent); font-size: var(--fs-1); font-weight: 200; }
.prose ul { list-style: disc; padding-left: 1.2rem; margin-bottom: var(--space-3); }
.prose ol { list-style: decimal; padding-left: 1.2rem; margin-bottom: var(--space-3); }

.filter { display: flex; gap: var(--space-3); font-size: var(--fs--1); font-weight: 300; }
.filter a { padding-bottom: .15rem; border-bottom: 1px solid transparent; }
.filter a[aria-current] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; }

/* ---- Processo (atelier) ------------------------------------------------- */
.process { padding-left: var(--col-left); margin-top: var(--space-5); }
.process__title, .materials__title { font-size: var(--fs-3); margin-bottom: var(--space-4); }
.process__list { display: grid; gap: 0; border-top: 1px solid var(--ink); max-width: calc(var(--measure) + 6rem); }
.process__step { display: grid; grid-template-columns: 4rem 1fr; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.process__n { font-size: var(--fs-3); font-weight: 200; color: var(--ink-2); line-height: 1; }
.process__text h3 { font-size: var(--fs-1); font-weight: 400; margin-bottom: .4rem; }
.process__text p { font-weight: 300; max-width: var(--measure); }
.process__lt { font-size: var(--fs--1); color: var(--ink-2); }

/* ---- Materiais ---------------------------------------------------------- */
.materials { padding-left: var(--col-left); margin-top: var(--space-6); }
.materials__intro { font-weight: 300; max-width: var(--measure); margin-bottom: var(--space-4); }
.materials__group { margin-bottom: var(--space-4); }
.materials__g { font-size: var(--fs-0); font-weight: 400; margin-bottom: var(--space-2); color: var(--ink-2); }
.swatches { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.swatch { display: grid; gap: .5rem; }
.swatch img, .swatch__color { aspect-ratio: 1; width: 100%; display: block; }
.swatch__color { background: var(--c); border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.swatch__name { font-size: var(--fs--1); font-weight: 300; }

/* ---- Pontos (profissionais) --------------------------------------------- */
.points { padding-left: var(--col-left); margin-top: var(--space-4); display: grid; gap: var(--space-3); max-width: calc(var(--col-left) + var(--measure) + 4rem); }
.points__item { border-top: 1px solid var(--rule); padding-top: var(--space-2); }
.points__item dt { font-size: var(--fs-1); font-weight: 400; margin-bottom: .3rem; }
.points__item dd { font-weight: 300; color: var(--ink-2); max-width: var(--measure); }

/* ---- Projecto ----------------------------------------------------------- */
.project { padding-bottom: var(--space-6); }
.project__head { padding: var(--space-5) var(--gutter) var(--space-4) calc(var(--gutter) + var(--col-left)); }
.project__title { font-size: clamp(var(--fs-4), 5vw, var(--fs-5)); }
.project__sub { font-size: var(--fs-1); font-weight: 300; color: var(--ink-2); margin-top: var(--space-2); }
.project__status { font-size: var(--fs--1); color: var(--accent); }
.project__cover { position: relative; margin: 0; }
.project__cover img { width: 100%; max-height: 88vh; object-fit: cover; }
.project__body { padding: var(--space-5) var(--gutter) 0 calc(var(--gutter) + var(--col-left)); }
.gallery { display: grid; gap: var(--space-3); padding: var(--space-5) var(--gutter) 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); }
.gallery__item { margin: 0; }
.gallery__item--portrait { grid-row: span 2; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { font-size: var(--fs--1); color: var(--ink-2); margin: .5rem 0 var(--space-2); }
.project__related { padding: var(--space-6) var(--gutter) 0; }
.project__related .band__title { margin-bottom: var(--space-3); padding-left: var(--col-left); }

/* ---- Artigo ------------------------------------------------------------- */
.post { padding: var(--space-5) var(--gutter) var(--space-6); }
.post__head { padding-left: var(--col-left); max-width: calc(var(--col-left) + var(--measure) + 8rem); }
.post__meta { display: flex; gap: var(--space-2); font-size: var(--fs--1); color: var(--ink-2); font-weight: 300; }
.post__title { font-size: clamp(var(--fs-3), 4.5vw, var(--fs-5)); margin: var(--space-2) 0 var(--space-3); }
.post__lead { font-size: var(--fs-1); font-weight: 300; max-width: var(--measure); }
.post__cover { margin: var(--space-5) 0; }
.post__cover img { width: 100%; max-height: 80vh; object-fit: cover; }
.post__cover figcaption { font-size: var(--fs--1); color: var(--ink-2); margin-top: .5rem; padding-left: var(--col-left); }
.post__body { padding-left: var(--col-left); }
.post__foot { padding-left: var(--col-left); margin-top: var(--space-5); border-top: 1px solid var(--rule); padding-top: var(--space-3); }
.post__author { font-weight: 600; margin-bottom: var(--space-4); }

/* ---- Formulário --------------------------------------------------------- */
.doc--form .doc__body, .form { padding-left: var(--col-left); }
.form { max-width: calc(var(--col-left) + 44rem); }
.form__grid { display: grid; gap: var(--space-3) var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: .35rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--fs--1); font-weight: 300; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 0; border-bottom: 1px solid var(--ink); padding: .65rem .2rem; width: 100%; border-radius: 0;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 14px) 1.15rem, calc(100% - 9px) 1.15rem; background-size: 5px 5px; background-repeat: no-repeat; }
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); border-bottom-width: 2px; }
.field small { font-size: var(--fs--1); color: var(--ink-2); font-weight: 300; }
.field--err label, .field--err small.field__err, .field--err > small:last-child { color: var(--accent); }
.field--err input, .field--err select, .field--err textarea { border-bottom-color: var(--accent); }
.field--check label { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink); font-size: var(--fs-0); }
.field--check input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--accent); }
.field--check a { border-bottom: 1px solid var(--rule); }
.form__hp { position: absolute; left: -9999px; }
.form__error { color: var(--accent); font-weight: 400; }
.form__actions { margin-top: var(--space-4); }
.notice { padding-left: var(--col-left); max-width: calc(var(--col-left) + var(--measure)); }
.notice h2 { font-size: var(--fs-2); margin-bottom: var(--space-2); }
.notice--ok { border-left: 2px solid var(--accent); padding-left: calc(var(--col-left) + var(--space-2)); }
@media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } }

/* ---- Rodapé ------------------------------------------------------------- */
.site-foot { background: var(--bg-chrome); border-top: 1px solid var(--ink); padding: var(--space-5) var(--gutter) var(--space-3); font-size: var(--fs--1); font-weight: 300; }
.site-foot__grid { display: grid; gap: var(--space-4); grid-template-columns: 2fr 1fr 1fr 1fr; }
.site-foot__brand .wordmark__name { display: block; margin-bottom: var(--space-2); }
.site-foot__slogan { font-weight: 200; font-size: var(--fs-1); }
.site-foot__made { color: var(--ink-2); }
.site-foot__zalia { color: var(--ink-2); max-width: 32rem; }
.site-foot__h { font-size: var(--fs--1); font-weight: 600; margin-bottom: .6rem; }
.site-foot__col a { display: block; padding: .15rem 0; }
.site-foot__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-2); border-top: 1px solid var(--rule); color: var(--ink-2); }
.site-foot__legal a { margin-right: 1rem; }
@media (max-width: 860px) { .site-foot__grid { grid-template-columns: 1fr 1fr; } .site-foot__brand { grid-column: 1 / -1; } }

/* ---- Impressão ---------------------------------------------------------- */
@media print {
  .site-head, .site-foot, .btn, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .cartouche { position: static; margin-top: 1rem; }
}

/* ---- Colecção (v6.1) ----------------------------------------------------- */
.band--collection { background: var(--bg); }
.band--collection .band__head { padding-left: 0; }
.piece-grid { display: grid; gap: var(--space-4) var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.piece-grid--small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.piece-card a { display: block; }
.piece-card img, .piece-card__empty { aspect-ratio: 1; object-fit: cover; width: 100%; display: block; background: var(--band); transition: opacity var(--ease); }
.piece-card a:hover img { opacity: .92; }
.piece-card__meta { display: flex; justify-content: space-between; gap: var(--space-2); padding-top: .6rem; margin-top: .5rem; border-top: 1px solid var(--ink); }
.piece-card__name { font-weight: 600; font-size: var(--fs-0); }
.piece-card__fam { font-weight: 300; font-size: var(--fs--1); color: var(--ink-2); text-align: right; }
.fam-strip { display: flex; flex-wrap: wrap; gap: .6rem var(--space-3); margin-top: var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--rule); font-size: var(--fs--1); font-weight: 300; }
.fam-strip a span { color: var(--ink-2); }

.piece { padding: var(--space-5) var(--gutter) var(--space-6); }
.piece__head { padding-left: var(--col-left); margin-bottom: var(--space-4); }
.piece__title { font-size: clamp(var(--fs-4), 5vw, var(--fs-5)); }
.piece__ref { font-size: var(--fs--1); color: var(--ink-2); letter-spacing: .03em; margin-top: .5rem; }
.piece__layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(18rem, 4fr); gap: var(--space-5); align-items: start; }
.piece__cover { position: relative; margin: 0; }
.piece__cover img { width: 100%; }
.piece__cover--empty { aspect-ratio: 4/3; background: var(--band); }
.piece__cover .cartouche { width: min(18rem, calc(100% - 2 * var(--space-2))); right: var(--space-2); bottom: var(--space-2); }
.piece__gallery { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); margin-top: var(--space-2); }
.piece__gallery figure { margin: 0; }
.piece__gallery figcaption { font-size: var(--fs--1); color: var(--ink-2); margin-top: .3rem; }
.piece__side { position: sticky; top: 6rem; }
.piece__desc { max-width: none; }
.piece__h { font-size: var(--fs-0); font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
.spec { display: grid; gap: .4rem; font-size: var(--fs--1); font-weight: 300; }
.spec > div, .spec > li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-2); padding: .4rem 0; border-bottom: 1px solid var(--rule); }
.spec--mat > li { grid-template-columns: 1.2rem 7rem 1fr; align-items: center; }
.swatch__color--sm { width: 1.1rem; height: 1.1rem; aspect-ratio: 1; display: inline-block; }
.piece__custom { font-size: var(--fs--1); font-weight: 300; color: var(--ink-2); margin-top: var(--space-4); }
.piece__cta { margin-top: var(--space-2); }
.piece__project { font-size: var(--fs--1); margin-top: var(--space-3); }
.piece__related { margin-top: var(--space-6); }
.piece__related .band__title { margin-bottom: var(--space-3); }
.form__piece { padding: .7rem 1rem; background: var(--band); font-size: var(--fs--1); margin-bottom: var(--space-3); }
.form__piece span { color: var(--ink-2); }
@media (max-width: 960px) { .piece__layout { grid-template-columns: 1fr; } .piece__side { position: static; } .piece__cover .cartouche { position: static; width: 100%; } }