/* Plec · galeria d'art · demo v2 (09/10/2026, polida amb Impeccable el mateix dia)
   Minimalista: blanc de sala (no paper ivori ni sèpia, com la Plec d'abans), tinta negra i un sol punt vermell.
   Una família de lletra, la Hedvig Letters (serif per als títols de les obres, sense serif per a la resta), a poques mides.
   Les obres es veuen en 3D (js/obres3d.js) i a la seva proporció real; la sala es camina (js/sala.js).
   Res no entra fent un fos: el que es mou són les obres. */

:root{
  --mur:#F1F1EF; --mur-2:#E6E6E2; --tinta:#141414; --gris:#666662; --linia:#D6D6D1; --punt:#C8331E;
  --serif:'Hedvig Letters Serif', Georgia, serif; --sans:'Hedvig Letters Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --marge:clamp(20px, 3.4vw, 48px); --cap-h:72px; --corba:cubic-bezier(.22,1,.36,1);
}
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.3s; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-stopped{ overflow:clip; }

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-color:#BDBDB8 var(--mur); accent-color:var(--punt); }
body{ margin:0; background:var(--mur); color:var(--tinta); font:400 16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-underline-offset:4px; text-decoration-thickness:1px; }
p{ margin:0; }
::selection{ background:var(--tinta); color:var(--mur); }
:focus-visible{ outline:2px solid var(--tinta); outline-offset:3px; }
.salta{ position:absolute; left:16px; top:-60px; z-index:100; padding:10px 16px; background:var(--tinta); color:var(--mur); text-decoration:none; }
.salta:focus{ top:12px; }
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ── lletra: poques mides ── */
.titol-gran{ font-family:var(--serif); font-weight:400; font-size:clamp(3.2rem, 8.6vw, 8.4rem); line-height:.94; letter-spacing:-.025em; margin:0; }
.titol-mig{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem, 3.6vw, 3.4rem); line-height:1.04; letter-spacing:-.015em; margin:0; }
.seccio-t{ font-size:15px; font-weight:400; color:var(--tinta); margin:0 0 18px; }
.text{ font-size:17px; line-height:1.6; max-width:46ch; margin-top:22px; }
.enllac{ display:inline-block; padding:8px 0 4px; text-decoration:underline; }
@media (hover:hover){ .enllac:hover{ color:var(--gris); } }

/* ── capçalera ── */
.cap{ position:fixed; inset:0 0 auto 0; z-index:50; height:var(--cap-h); display:flex; align-items:center; gap:36px; padding:0 var(--marge); background:var(--mur); border-bottom:1px solid transparent; transition:border-color .3s; }
.cap.linia{ border-bottom-color:var(--linia); }
.marca{ display:flex; align-items:baseline; gap:14px; margin-right:auto; text-decoration:none; }
.marca-nom{ font-family:var(--serif); font-size:28px; line-height:1; letter-spacing:-.01em; }
.marca-sub{ font-size:13px; color:var(--gris); }
.menu ul{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.menu a{ display:inline-block; font-size:15px; text-decoration:none; padding:10px 0 4px; border-bottom:1px solid transparent; transition:border-color .3s; }
.menu a[aria-current="page"]{ border-color:currentColor; }
@media (hover:hover){ .menu a:hover{ border-color:currentColor; } }
.cap-sala{ display:inline-flex; align-items:center; gap:10px; font-size:15px; text-decoration:none; padding:12px 0; }
.cap-obre{ display:none; font:400 15px/1 var(--sans); color:inherit; background:none; border:0; padding:14px 4px; cursor:pointer; }
.punt{ width:9px; height:9px; border-radius:50%; background:var(--punt); flex:none; }
.menu-mobil{ position:fixed; inset:0; z-index:49; background:var(--mur); padding:calc(var(--cap-h) + 28px) var(--marge) 40px; }
.menu-mobil[hidden]{ display:none; }
.menu-mobil ul{ list-style:none; margin:0; padding:0; }
.menu-mobil a{ display:block; font-family:var(--serif); font-size:2.4rem; line-height:1.15; padding:10px 0; text-decoration:none; border-bottom:1px solid var(--linia); }

/* ── l'obra: el marc té la proporció de la tela; el 3D s'hi posa a sobre, al píxel, i la foto s'amaga sense fos ── */
.obra{ display:block; text-decoration:none; color:inherit; }
.obra-marc{ position:relative; display:block; aspect-ratio:var(--prop); }
.obra-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; box-shadow:0 22px 40px -26px rgba(0,0,0,.42), 0 4px 10px -6px rgba(0,0,0,.18); -webkit-user-drag:none; user-select:none; }
.obra-marc.en-3d .obra-img{ opacity:0; }
.obra-peu{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 14px; margin-top:16px; font-size:13px; }
.obra-titol{ font-family:var(--serif); font-size:16px; }
.obra-dades{ color:var(--gris); white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (hover:hover){ a.obra:hover .obra-titol{ text-decoration:underline; } }
.capa3d{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:6; }

/* ── l'exposició ── */
.hero{ min-height:100svh; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(28px, 5vw, 96px); align-items:center; padding:calc(var(--cap-h) + 32px) var(--marge) 48px; }
.hero-artista{ font-size:20px; margin-top:22px; }
.hero-dates{ font-size:15px; color:var(--gris); margin-top:8px; }
.hero-accio{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; margin-top:44px; }
.hero-obra{ display:flex; justify-content:center; }
/* la cartel·la fa l'amplada de la tela, no la de la columna */
.obra-hero{ width:min(100%, calc(min(74vh, 820px) * var(--prop))); margin:0 auto; }
.entra{ display:inline-flex; align-items:center; gap:12px; font-size:17px; text-decoration:none; padding:15px 22px; border:1px solid var(--tinta); transition:background-color .3s, color .3s; }
@media (hover:hover){ .entra:hover{ background:var(--tinta); color:var(--mur); } }
.entra-gran{ font-size:20px; padding:19px 30px; margin-top:34px; }

.seccio{ padding:clamp(88px, 12vw, 180px) var(--marge); }
.seccio-tocada{ padding:0 var(--marge) clamp(88px, 12vw, 180px); }
.declaracio{ display:grid; justify-items:start; }
.declaracio-text{ font-family:var(--serif); font-size:clamp(1.8rem, 3.3vw, 3.1rem); line-height:1.18; letter-spacing:-.01em; max-width:30ch; text-wrap:pretty; }
.declaracio-peu{ font-size:14px; color:var(--gris); margin-top:32px; }

.paret-seccio{ padding-top:0; }
.paret{ display:flex; align-items:center; justify-content:space-between; gap:clamp(24px, 4vw, 72px); margin-top:clamp(40px, 6vw, 80px); }
.paret + .paret{ margin-top:clamp(80px, 10vw, 150px); }
.obra-paret{ flex:var(--cm) 1 0; min-width:0; }

.sala-crida{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(28px, 5vw, 88px); align-items:center; border-top:1px solid var(--linia); border-bottom:1px solid var(--linia); }
.sala-crida-img{ display:block; aspect-ratio:16 / 10; overflow:hidden; background:var(--mur-2); }
.sala-crida-img img{ width:100%; height:100%; object-fit:cover; }
.sala-crida .entra-gran{ margin-top:30px; }

.programa-llista{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linia); }
.programa-llista li{ display:grid; grid-template-columns:150px minmax(0, 1fr) 120px; gap:24px; padding:22px 0; border-bottom:1px solid var(--linia); font-size:17px; }
.programa-llista .data{ font-variant-numeric:tabular-nums; }
.programa-llista .tipus{ color:var(--gris); text-align:right; }

/* ── obres ── */
.cap-pagina{ padding:calc(var(--cap-h) + clamp(64px, 9vw, 140px)) var(--marge) clamp(48px, 6vw, 88px); }
.filtres{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:40px; }
.filtres button{ font:400 15px/1 var(--sans); color:var(--gris); background:none; border:0; border-bottom:1px solid transparent; padding:15px 0 12px; cursor:pointer; }
.filtres button[aria-pressed="true"]{ color:var(--tinta); border-color:var(--tinta); }
@media (hover:hover){ .filtres button:hover{ color:var(--tinta); } }
.filtre-n{ font-size:14px; color:var(--gris); margin-top:16px; font-variant-numeric:tabular-nums; }
.graella{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(56px, 7vw, 112px) clamp(24px, 3vw, 48px); align-items:end; }
.graella li[hidden]{ display:none; }
/* a la graella, cada obra també manté la mida respecte de les altres: la de 160 cm d'ample omple la casella */
.graella .obra{ width:calc(var(--cm) / 160 * 100%); }

/* ── la fitxa d'una obra ── */
.fitxa{ min-height:100svh; display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); gap:clamp(28px, 5vw, 96px); align-items:center; padding:calc(var(--cap-h) + 40px) var(--marge) 56px; }
.fitxa-obra{ display:grid; justify-items:center; }
.obra-fitxa{ width:min(100%, calc(min(76vh, 880px) * var(--prop))); }
.fitxa-obra[data-gira].en-3d{ cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.fitxa-obra[data-gira].en-3d:active{ cursor:grabbing; }
.fitxa-pista{ font-size:13px; color:var(--gris); margin-top:20px; visibility:hidden; }
.fitxa-obra.en-3d .fitxa-pista{ visibility:visible; }
.cartela p{ margin-bottom:6px; }
.cartela-artista{ font-size:16px; }
.cartela-artista a{ text-decoration:underline; text-decoration-color:var(--linia); }
.cartela-artista span{ color:var(--gris); margin-left:6px; }
.cartela-titol{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem, 3.4vw, 3.3rem); line-height:1.05; letter-spacing:-.015em; margin:12px 0 22px; }
.cartela-preu{ color:var(--gris); margin-top:20px !important; }
.cartela-accio{ margin:30px 0 20px !important; }
.detall{ padding-left:0; padding-right:0; }
.detall .seccio-t{ padding:0 var(--marge); }
.detall-fig{ margin:0; }
.detall-fig img{ width:100%; height:auto; }
/* a escala: la paret s'ajusta a l'espai més petit (l'alçada de la pantalla o l'amplada de la columna),
   de manera que la tela i la persona hi caben sempre, centrades */
.escala{ container-type:inline-size; }
.escala-paret{ --m:min(min(70vh, 620px) / 3.2, 100cqw / (var(--w) / 100 + 2.1)); --amp:calc((var(--w) / 100 + 1.15) * var(--m));
  position:relative; height:calc(3.2 * var(--m)); margin-top:40px; background:var(--mur-2); overflow:hidden; }
.escala-obra{ position:absolute; left:calc(50% - var(--amp) / 2); width:calc(var(--w) / 100 * var(--m)); height:calc(var(--a) / 100 * var(--m)); bottom:calc((1.55 - var(--a) / 200) * var(--m)); box-shadow:0 18px 30px -20px rgba(0,0,0,.45); }
.escala-obra img{ width:100%; height:100%; object-fit:cover; }
.escala-persona{ position:absolute; bottom:0; left:calc(50% - var(--amp) / 2 + (var(--w) / 100 + 0.55) * var(--m)); height:calc(1.7 * var(--m)); fill:var(--tinta); opacity:.88; }
.escala-terra{ position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gris); }
.escala-cota{ position:absolute; left:calc(50% - var(--amp) / 2); bottom:calc((1.55 - var(--a) / 200) * var(--m) - 30px); font-size:13px; color:var(--gris); white-space:nowrap; }
.passa{ display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--linia); padding-top:40px; padding-bottom:80px; }
.passa a{ display:grid; gap:4px; text-decoration:none; }
.passa a:last-child{ text-align:right; }
.passa-e{ font-size:13px; color:var(--gris); }
.passa-t{ font-family:var(--serif); font-size:clamp(1.4rem, 2.2vw, 2rem); }
@media (hover:hover){ .passa a:hover .passa-t{ text-decoration:underline; } }

/* ── artistes i visita ── */
.artista{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:clamp(28px, 5vw, 96px); padding:56px 0; border-top:1px solid var(--linia); }
.artista-origen{ color:var(--gris); margin-top:12px; }
.artista-obres{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(20px, 3vw, 40px); align-items:end; }
.dades{ margin:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:32px; border-top:1px solid var(--linia); padding-top:28px; }
.dades dt{ font-size:13px; color:var(--gris); margin-bottom:10px; }
.dades dd{ margin:0; font-size:17px; line-height:1.55; }

.peu{ padding:72px var(--marge) 48px; border-top:1px solid var(--linia); }
.peu-in{ display:grid; grid-template-columns:minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap:32px; }
.peu-marca .marca-nom{ display:block; margin-bottom:12px; }
.peu-t{ display:block; font-size:13px; color:var(--gris); margin-bottom:10px; }
.peu a{ text-decoration:none; }
@media (hover:hover){ .peu a:hover{ text-decoration:underline; } }
.peu-demo{ margin-top:56px; font-size:13px; color:var(--gris); max-width:80ch; }

/* ── la sala ── */
.p-sala .cap, .p-sala .peu{ display:none; }
.p-sala{ overflow:hidden; background:var(--mur); }
.sala{ position:fixed; inset:0; }
.sala-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
.sala-canvas:active{ cursor:grabbing; }
/* la interfície no es menja els gestos: només els enllaços i els botons reben el dit */
.sala-ui > *{ position:absolute; z-index:2; pointer-events:none; }
.sala-ui a, .sala-ui button{ pointer-events:auto; }
.sala-titol{ left:var(--marge); top:22px; margin:0; font-weight:400; font-size:14px; display:flex; align-items:baseline; gap:12px; }
.sala-titol .marca-nom{ font-size:24px; }
.sala-surt{ right:var(--marge); top:18px; font-size:15px; text-decoration:none; padding:12px 16px; border:1px solid var(--tinta); background:rgba(241,241,239,.88); }
.sala-cartela{ left:var(--marge); bottom:24px; max-width:380px; padding:18px 20px; background:rgba(241,241,239,.92); font-size:14px; transition:opacity .4s; }
.sala-cartela.buida{ opacity:0; }
.sala-cartela .t{ font-family:var(--serif); font-size:22px; line-height:1.15; margin:4px 0 8px; }
.sala-cartela .g{ color:var(--gris); }
.sala-c-links{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.sala-c-links a{ display:inline-block; padding:8px 0 2px; text-decoration:underline; }
.sala-c-links a[hidden]{ display:none; }
.sala-passa{ right:var(--marge); bottom:24px; display:flex; align-items:center; gap:10px; }
.sala-passa button{ font:400 15px/1 var(--sans); color:var(--tinta); background:rgba(241,241,239,.92); border:1px solid var(--tinta); padding:14px 18px; cursor:pointer; }
.sala-passa button[aria-disabled="true"]{ opacity:.35; cursor:default; }
.sala-n{ font-size:14px; margin-right:6px; font-variant-numeric:tabular-nums; }
.sala-pista{ left:50%; bottom:28px; transform:translateX(-50%); font-size:13px; color:var(--tinta); background:rgba(241,241,239,.86); padding:8px 14px; transition:opacity .6s; white-space:nowrap; }
.sala-pista.fora{ opacity:0; }
.pista-mobil{ display:none; }
@media (hover:hover){
  .sala-surt:hover{ background:var(--tinta); color:var(--mur); }
  .sala-passa button:not([aria-disabled="true"]):hover{ background:var(--tinta); color:var(--mur); }
}
.sala-carrega{ position:absolute; inset:0; z-index:5; display:grid; place-content:center; gap:6px; text-align:center; background:var(--mur); transition:opacity .8s; }
.sala-carrega.fora{ opacity:0; pointer-events:none; }
.sala-carrega[hidden]{ display:none; }
.sala-carrega-expo{ font-size:13px; color:var(--gris); }
.sala-carrega-t{ font-family:var(--serif); font-size:clamp(1.8rem, 3vw, 2.6rem); }
.sala-sense{ position:absolute; inset:0; z-index:6; display:grid; place-content:center; gap:20px; text-align:center; background:var(--mur); padding:var(--marge); }
.sala-sense[hidden]{ display:none; }

@media (max-width:1000px){
  .menu{ display:none; }
  .cap-obre{ display:block; }
  .hero, .fitxa, .artista, .sala-crida{ grid-template-columns:minmax(0, 1fr); }
  .hero{ padding-top:calc(var(--cap-h) + 40px); }
  .obra-hero, .obra-fitxa{ width:min(100%, 520px, calc(64vh * var(--prop))); }
  .graella{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dades{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .peu-in{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:640px){
  :root{ --cap-h:64px; }
  .marca-sub{ display:none; }
  .cap{ gap:18px; }
  .cap-sala{ font-size:14px; }
  .paret{ flex-direction:column; align-items:center; gap:56px; }
  .obra-paret{ flex:none; width:calc(var(--cm) / 200 * 100%); min-width:52%; }
  .programa-llista li{ grid-template-columns:minmax(0, 1fr); gap:4px; }
  .programa-llista .tipus{ text-align:left; }
  .artista-obres{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dades{ grid-template-columns:minmax(0, 1fr); }
  .sala-cartela{ left:12px; right:12px; bottom:80px; max-width:none; padding:14px 16px; }
  .sala-passa{ left:12px; right:12px; bottom:14px; justify-content:space-between; }
  .sala-pista{ top:64px; bottom:auto; white-space:normal; text-align:center; width:max-content; max-width:calc(100% - 24px); }
  .pista-gran{ display:none; }
  .pista-mobil{ display:inline; }
  .sala-titol{ left:14px; top:16px; }
  .sala-titol-expo{ display:none; }
  .sala-surt{ right:12px; top:10px; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}