/* Acampada per l'Habitatge
 * Materials reals de l'acampada (el cartell, el logo, fotos, cartró) amb un acabat net:
 * text llegible, alineat i sense girs; el retolador només com a accent.
 * Propietats lògiques (inline/block) perquè l'àrab (RTL) funcioni sense regles a part. */

/* ---------- Tipografies (servides des d'aquest mateix web) ---------- */
@font-face { font-family: "Anton"; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Anton"; src: url("../fonts/anton-latin-ext-400-normal.woff2") format("woff2"); font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-wdth-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
@font-face { font-family: "Marker"; src: url("../fonts/permanent-marker-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Kufi"; src: url("../fonts/noto-kufi-arabic-arabic-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

/* ---------- Tokens ---------- */
:root {
  --wall: #f1efea;      /* paret clara de la plaça */
  --paper: #fcfbf8;     /* paper */
  --ink: #141211;
  --ink-soft: #524b45;  /* text secundari: contrast > 7:1 sobre --wall */
  --line: rgba(20, 18, 17, 0.13);
  --red: #e4512e;       /* vermell de la tenda */
  --red-deep: #a8270f;  /* vermell per a text sobre clar */
  --tape: rgba(231, 221, 188, 0.88);
  --display: "Anton", "Kufi", Impact, "Arial Narrow Bold", sans-serif;
  --text: "Archivo", "Kufi", system-ui, sans-serif;
  --hand: "Marker", "Kufi", cursive;
  --m: clamp(20px, 4vw, 56px);
  --gap: clamp(6rem, 10vw, 10rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lift: 0 1px 2px rgba(20, 18, 17, 0.08), 0 14px 30px -18px rgba(20, 18, 17, 0.45);
}
:lang(ar) { --display: "Kufi", "Anton", sans-serif; --text: "Kufi", "Archivo", system-ui, sans-serif; --hand: "Kufi", sans-serif; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--wall) url("../img/gra.png"); color: var(--ink); font-family: var(--text); font-size: 1.125rem; line-height: 1.6; overflow-x: hidden; }
:lang(ar) body, body:lang(ar) { line-height: 1.85; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 0.22em; transition: color 0.2s; }
a:hover { color: var(--red-deep); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
::selection { background: var(--red); color: var(--ink); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[id] { scroll-margin-top: 6.5rem; } /* que la capçalera fixa no tapi el títol en anar a #ancoratge */
.wrap { max-width: 84rem; margin-inline: auto; padding-inline: var(--m); }
.skip { position: absolute; inset-inline-start: -999px; top: 0; z-index: 50; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; }
.skip:focus { inset-inline-start: 0; }

/* Titulars */
.big, .h2 { font-family: var(--display); text-transform: uppercase; line-height: 0.95; letter-spacing: 0; text-wrap: balance; }
.big { font-size: clamp(3rem, 1.3rem + 5.6vw, 6.8rem); line-height: 0.9; }
.h2 { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.8rem); }
:lang(ar) .big, :lang(ar) .h2 { text-transform: none; font-weight: 800; line-height: 1.3; }
/* el tampó gastat del cartell, només en titulars grans */
.stamp { -webkit-mask-image: url("../img/segell.png"); mask-image: url("../img/segell.png"); -webkit-mask-size: 420px; mask-size: 420px; padding-block: 0.14em 0.18em; }
.lead { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.5; }
.hand { font-family: var(--hand); line-height: 1.2; }

/* Paper i fotos */
.paper { background: var(--paper); box-shadow: var(--lift); }
.taped { position: relative; }
.taped::before { content: ""; position: absolute; z-index: 2; top: -13px; left: 50%; width: 104px; height: 28px; translate: -50% 0; rotate: -3deg; background: var(--tape); clip-path: polygon(3% 8%, 0 30%, 4% 52%, 1% 78%, 5% 100%, 96% 94%, 100% 70%, 97% 46%, 100% 22%, 95% 0); pointer-events: none; }
.photo { margin: 0; background: var(--paper); padding: 10px 10px 14px; box-shadow: var(--lift); }
.photo img { filter: grayscale(1) contrast(1.25) brightness(1.04); }
.photo figcaption { font-size: 0.95rem; line-height: 1.4; color: var(--ink-soft); margin-top: 0.7rem; padding-inline: 0.2rem; }

/* ---------- Botons i enllaços ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1; text-decoration: none; padding: 1.05rem 1.6rem; background: var(--ink); color: var(--paper); border: 0; cursor: pointer; transition: transform 0.2s var(--ease), background-color 0.2s; }
.btn:hover { color: var(--paper); background: #2c2724; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--red { background: var(--red); color: var(--ink); }
.btn--red:hover { background: #ef6643; color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--ink); }
:lang(ar) .btn { font-weight: 800; }
.link { font-weight: 650; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }

/* ---------- Cinta de consignes ---------- */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; }
.ticker__track { display: flex; width: max-content; animation: ticker 110s linear infinite; }
.ticker__run { display: flex; flex-shrink: 0; }
.ticker__run span { font-family: var(--display); text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.04em; white-space: nowrap; padding: 0.55rem 0; }
.ticker__run span::after { content: "✕"; color: var(--red); margin-inline: 1.6rem; font-size: 0.8em; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
[dir="rtl"] .ticker__track { animation-name: ticker-rtl; }
@keyframes ticker-rtl { to { transform: translateX(50%); } }

/* ---------- Capçalera ---------- */
.top { background: var(--wall); }
.top__in { display: flex; align-items: center; gap: 1rem 2rem; padding-block: 1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; margin-inline-end: auto; }
.brand img { width: 52px; height: 52px; border-radius: 50%; }
.brand span { font-family: var(--display); text-transform: uppercase; font-size: 1.35rem; line-height: 1; }
.brand:hover { color: var(--ink); }
:lang(ar) .brand span { font-family: "Anton", sans-serif; }
.nav { display: flex; align-items: center; gap: 1.8rem; }
.nav__links { display: flex; gap: 1.6rem; }
.nav__links a { font-weight: 600; text-decoration: none; padding-block: 0.35rem; border-bottom: 3px solid transparent; }
.nav__links a:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav__links a[aria-current="page"] { border-bottom-color: var(--red); }
.nav .btn { font-size: 1rem; padding: 0.85rem 1.2rem; }
.langs { position: relative; }
.langs summary { list-style: none; cursor: pointer; font-weight: 600; padding: 0.35rem 0; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: " ▾"; color: var(--ink-soft); }
.langs ul { position: absolute; inset-inline-end: 0; top: calc(100% + 0.5rem); background: var(--paper); padding: 0.4rem; z-index: 30; min-width: 10rem; box-shadow: var(--lift); }
.langs button, .langs a { display: block; font: inherit; width: 100%; text-align: start; background: none; border: 0; padding: 0.5rem 0.75rem; cursor: pointer; color: var(--ink); text-decoration: none; }
.langs button:hover, .langs a:hover { background: var(--wall); color: var(--ink); }
.langs button[aria-pressed="true"], .langs a[aria-current] { font-weight: 700; color: var(--red-deep); }
.top__menu { display: none; }
@media (max-width: 62rem) {
  .top__menu { display: inline-flex; align-items: center; gap: 0.55rem; font: 600 1.05rem var(--text); background: var(--ink); color: var(--paper); border: 0; cursor: pointer; padding: 0.7rem 1rem; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding-block: 0.5rem 1.6rem; }
  .is-open .nav { display: flex; }
  .nav__links { flex-direction: column; gap: 0.1rem; }
  .nav__links a { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: 2rem; line-height: 1.2; border: 0; }
  .nav__links a[aria-current="page"] { color: var(--red-deep); }
  .langs ul { position: static; box-shadow: none; padding: 0.4rem 0 0; background: none; }
  .brand img { width: 44px; height: 44px; }
  .brand span { font-size: 1.15rem; }
}

/* ---------- Portada ---------- */
.hero { padding-block: clamp(2.5rem, 5vw, 5rem) clamp(4rem, 8vw, 7rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.sticker { width: 116px; height: 116px; border-radius: 50%; border: 5px solid var(--paper); box-shadow: var(--lift); rotate: -7deg; margin-bottom: 1.8rem; }
.hero__day { font-family: var(--hand); color: var(--red-deep); font-size: clamp(1.4rem, 1.15rem + 0.9vw, 2rem); line-height: 1.15; margin-bottom: 0.8rem; }
.hero__title { max-width: 13ch; margin-bottom: 1.8rem; }
:lang(ar) .hero__title { max-width: 14ch; }
.hero__lede { max-width: 36rem; margin-bottom: 1.4rem; }
.hero__next { display: flex; gap: 0.6rem; align-items: baseline; font-weight: 600; margin-bottom: 2.2rem; max-width: 36rem; }
.hero__next::before { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--red); translate: 0 -0.1rem; box-shadow: 0 0 0 4px rgba(228, 81, 46, 0.2); }
.hero__next:empty { display: none; }
.poster { margin: 0; rotate: 1.4deg; }
.poster img { box-shadow: var(--lift); }
.poster figcaption { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.9rem; rotate: -1.4deg; }
@media (max-width: 56rem) {
  .hero__grid { grid-template-columns: 1fr; }
  .poster { width: min(80%, 24rem); justify-self: center; }
  .sticker { width: 92px; height: 92px; }
}

/* ---------- Agenda: el programa imprès, clavat al cartró ---------- */
.board { background: #c4a06e url("../img/cartro.jpg") center / cover; padding-block: clamp(4rem, 8vw, 7rem); }
.programme { max-width: 70rem; margin-inline: auto; padding: clamp(1.8rem, 4vw, 3.4rem); }
.programme__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.4rem; }
.day + .day { margin-top: 3rem; }
.day__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; padding-bottom: 0.8rem; border-bottom: 3px solid var(--ink); }
.day__title strong { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: 1.9rem; line-height: 1; }
.day__title span { color: var(--ink-soft); font-weight: 600; }
.day__title span::first-letter { text-transform: uppercase; }
:lang(ar) .day__title strong { text-transform: none; font-weight: 800; }
.ev { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 12rem); gap: 0.4rem 1.8rem; padding-block: 1.4rem; border-bottom: 1px solid var(--line); align-items: start; }
.ev__time { font-family: var(--display); font-size: 1.85rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ev__time--tbc { font-family: var(--text); font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); line-height: 1.3; padding-top: 0.2rem; }
.ev__title { font-weight: 700; font-size: 1.25rem; line-height: 1.3; margin-bottom: 0.35rem; }
.ev__text { color: var(--ink-soft); margin-bottom: 0.35rem; }
.ev__by { color: var(--ink-soft); font-size: 1rem; margin: 0; }
.ev__kind { justify-self: end; font-weight: 650; font-size: 0.95rem; color: var(--red-deep); text-align: end; padding-top: 0.25rem; }
.ev--big { position: relative; }
.ev--big::before { content: ""; position: absolute; inset-block: 1.2rem; inset-inline-start: -1.1rem; width: 5px; background: var(--red); }
.ev--past { opacity: 0.55; }
.programme__empty { font-size: 1.15rem; font-weight: 600; }
.programme__foot { margin: 2rem 0 0; color: var(--ink-soft); }
@media (max-width: 44rem) {
  .ev { grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.3rem 1rem; }
  .ev__time { font-size: 1.5rem; }
  .ev__time--tbc { font-size: 0.85rem; }
  .board .wrap { padding-inline: 12px; }
  .programme { padding: 1.6rem 1.25rem; }
  .ev__kind { grid-column: 2; grid-row: 1; justify-self: start; text-align: start; padding: 0; }
  .ev__main { grid-column: 2; }
  .ev--big::before { inset-inline-start: -0.8rem; }
}

/* ---------- Qui som ---------- */
.about { margin-top: var(--gap); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.about .h2 { margin-bottom: 2rem; }
.about__text p { max-width: 38rem; }
.pull { font-weight: 650; font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem); line-height: 1.35; max-width: 34rem; margin: 2.4rem 0; padding-inline-start: 1.3rem; border-inline-start: 5px solid var(--red); }
.about__aside { display: grid; gap: 3rem; padding-top: 1rem; }
.about__aside .photo { rotate: 1deg; }
.memo-card { padding: 2rem; background: var(--ink); color: var(--paper); }
.memo-card h3 { font-family: var(--display); text-transform: uppercase; font-size: 2rem; line-height: 1; margin-bottom: 0.9rem; }
.memo-card p { color: #e7e1da; }
.memo-card a { color: var(--paper); }
@media (max-width: 56rem) { .about { grid-template-columns: 1fr; } }

/* ---------- Com ens organitzem ---------- */
.org { margin-top: var(--gap); }
.org__line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.1rem; font-family: var(--display); text-transform: uppercase; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.4rem); line-height: 1.1; margin: 1.8rem 0 1.2rem; }
.org__line img { width: clamp(64px, 7vw, 110px); }
[dir="rtl"] .org__line img { transform: scaleX(-1); }
:lang(ar) .org__line { text-transform: none; font-weight: 800; }
.org__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 3rem; margin-bottom: 4rem; }
.org__steps p { margin: 0; max-width: 32ch; }
.org__steps strong { display: block; font-size: 1.2rem; margin-bottom: 0.2rem; }
.org__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 3rem 4rem; align-items: start; }
.coms { padding: clamp(1.8rem, 4vw, 3rem); }
.coms h3 { font-family: var(--display); text-transform: uppercase; font-size: 2rem; line-height: 1; margin-bottom: 0.7rem; }
.coms > p { color: var(--ink-soft); margin-bottom: 2rem; max-width: 48ch; }
.coms ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.6rem 2.4rem; }
.coms strong { display: block; font-size: 1.1rem; margin-bottom: 0.15rem; }
.coms li { padding-inline-start: 1rem; border-inline-start: 3px solid var(--red); }
.coms span { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; display: block; }
.org__aside { display: grid; gap: 2.2rem; }
.org__aside .photo { rotate: -1deg; }
.org__note { font-family: var(--hand); color: var(--red-deep); font-size: 1.35rem; }
@media (max-width: 56rem) { .org__steps, .org__grid { grid-template-columns: 1fr; } }

/* ---------- Desnonaments ---------- */
.alarm { background: var(--red); margin-top: var(--gap); padding-block: clamp(4rem, 8vw, 7rem); }
.flyer { max-width: 66rem; margin-inline: auto; padding: clamp(2rem, 5vw, 3.6rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 4rem; }
.flyer .big { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.8rem); }
.flyer__text { margin-top: 1.4rem; }
.flyer ol { counter-reset: s; display: grid; gap: 1.2rem; }
.flyer ol li { counter-increment: s; position: relative; padding-inline-start: 2.8rem; font-weight: 550; }
.flyer ol li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: -0.1rem; font-family: var(--display); font-size: 1.7rem; color: var(--red-deep); line-height: 1; }
.flyer__help { margin-top: 1.8rem; background: var(--ink); color: var(--paper); padding: 1.1rem 1.3rem; font-weight: 600; }
@media (max-width: 52rem) { .flyer { grid-template-columns: 1fr; } }

/* ---------- Vaga ---------- */
.strike { background: var(--ink); color: var(--paper); padding-block: clamp(4.5rem, 9vw, 8rem); }
.strike__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 5rem; align-items: center; }
.strike .strike__num { font-family: var(--display); font-size: clamp(8rem, 5rem + 13vw, 17rem); line-height: 0.82; color: var(--red); margin: 0; }
.strike .strike__date { color: var(--paper); font-family: var(--display); text-transform: uppercase; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem); line-height: 1.05; margin-top: 1.2rem; }
:lang(ar) .strike__date { text-transform: none; font-weight: 800; }
.strike .h2 { margin-bottom: 1.2rem; }
.strike p { max-width: 38rem; color: #ece6df; }
.strike__media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; margin-top: 2.6rem; }
.strike .photo { color: var(--ink); rotate: -1.2deg; }
@media (max-width: 56rem) { .strike__grid, .strike__media { grid-template-columns: 1fr; } }

/* ---------- La paret de cartells ---------- */
.wall { background: #c4a06e url("../img/cartro.jpg") center / cover; padding-block: clamp(4.5rem, 8vw, 7rem); margin-top: var(--gap); }
.wall__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 3.5rem; }
.wall__label { background: var(--paper); padding: 1.4rem 1.6rem; box-shadow: var(--lift); max-width: 36rem; }
.wall__label .h2 { margin-bottom: 0.6rem; }
.wall__label p:not(.eyebrow) { margin: 0; color: var(--ink-soft); }
.pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 3rem 2.4rem; align-items: start; }
.pin { margin: 0; }
.pin:nth-child(odd) figure { rotate: -0.8deg; }
.pin:nth-child(even) figure { rotate: 0.9deg; }
.pin figure { margin: 0; }
.pin a { display: block; text-decoration: none; }
.pin img { box-shadow: var(--lift); transition: transform 0.4s var(--ease); }
.pin a:hover img { transform: translateY(-4px); }
.pin figcaption { background: var(--paper); margin-top: 0.8rem; padding: 0.55rem 0.8rem; font-size: 0.95rem; font-weight: 600; line-height: 1.35; display: inline-block; }
.wall .more { margin-top: 3rem; }
.strike + .wall { margin-top: 0; }

/* ---------- Preguntes ---------- */
.faq { margin-top: var(--gap); }
.faq .h2 { margin-bottom: 2.4rem; }
.faq__list { max-width: 56rem; display: grid; gap: 0.8rem; }
.faq details { background: var(--paper); box-shadow: 0 1px 2px rgba(20, 18, 17, 0.08); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; font-weight: 700; font-size: 1.15rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--wall); font-weight: 500; font-size: 1.3rem; transition: rotate 0.2s; }
.faq details[open] summary::after { rotate: 45deg; background: var(--red); }
.faq details p { margin: 0; padding: 0 1.5rem 1.4rem; max-width: 48rem; }

/* ---------- Pàgines interiors ---------- */
.phead { padding-block: clamp(3rem, 7vw, 5.5rem) 0; }
.phead .big { max-width: 16ch; }
.phead__intro { max-width: 42rem; margin-top: 1.6rem; }
.sec { margin-top: clamp(3.5rem, 7vw, 6rem); }
.sec-h { margin-bottom: 2rem; }
.list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1.6rem; }
.item { background: var(--paper); padding: 1.7rem 1.6rem; box-shadow: 0 1px 2px rgba(20, 18, 17, 0.08); }
.item h3 { font-weight: 700; font-size: 1.25rem; line-height: 1.3; margin-bottom: 0.6rem; }
.item h3 a { text-decoration: none; }
.item h3 a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.item__meta { color: var(--red-deep); font-weight: 650; font-size: 0.95rem; margin-bottom: 0.5rem; }
.item p:last-child { margin-bottom: 0; }
.item__src { font-size: 1rem; color: var(--ink-soft); }

.article { max-width: 46rem; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding: clamp(2rem, 5vw, 3.6rem); }
.article .big { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); margin-block: 0.8rem 1.2rem; }
.article__lede { font-size: 1.3rem; line-height: 1.5; font-weight: 550; }
.note-box { background: var(--wall); padding: 0.9rem 1.1rem; font-weight: 600; }
.prose { font-size: 1.15rem; line-height: 1.75; margin-block: 2rem 2.5rem; }
.prose h2 { font-family: var(--display); text-transform: uppercase; font-size: 1.75rem; line-height: 1.05; margin-block: 2.4rem 0.9rem; }
:lang(ar) .prose h2 { text-transform: none; font-weight: 800; }
.prose ul { margin-bottom: 1.2em; }
.prose li { position: relative; padding-inline-start: 1.4em; margin-bottom: 0.5em; }
.prose li::before { content: ""; position: absolute; inset-inline-start: 0.2em; top: 0.72em; width: 0.45em; height: 0.45em; background: var(--red); border-radius: 50%; }
.share { border-top: 1px solid var(--line); padding-top: 1.4rem; margin-bottom: 2rem; }
.share p { font-weight: 700; margin-bottom: 0.6rem; }
.share ul { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.share a { display: inline-block; font-weight: 600; text-decoration: none; padding: 0.45rem 0.9rem; background: var(--wall); }
.share a:hover { background: var(--ink); color: var(--paper); }

.tdays { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 2rem; }
.tday { background: var(--paper); padding: 12px 12px 18px; box-shadow: var(--lift); }
.tday h3 { font-weight: 700; font-size: 1.15rem; margin: 0.9rem 0.3rem 0.2rem; }
.tday p { font-size: 1rem; color: var(--ink-soft); margin: 0 0.3rem; }

.live { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.5rem; padding: clamp(1.6rem, 4vw, 2.6rem); }
.live h2 { font-family: var(--display); text-transform: uppercase; font-size: 2rem; }
.live p { margin: 0; flex: 1 1 18rem; }
.progs { display: grid; gap: 1.2rem; }
.prog { background: var(--paper); padding: 1.6rem; box-shadow: 0 1px 2px rgba(20, 18, 17, 0.08); }
.prog__meta { color: var(--red-deep); font-weight: 650; font-size: 0.95rem; margin-bottom: 0.4rem; }
.prog h3 { font-weight: 700; font-size: 1.3rem; margin-bottom: 0.4rem; }
.prog audio { width: 100%; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 4.5rem; align-items: start; }
.two .h2 + p { margin-top: 1rem; }
@media (max-width: 52rem) { .two { grid-template-columns: 1fr; } }
.steps-list { display: grid; gap: 1.4rem; }
.steps-list li { padding-inline-start: 1.1rem; border-inline-start: 3px solid var(--red); }
.steps-list strong { display: block; font-size: 1.15rem; margin-bottom: 0.15rem; }
.steps-list span { color: var(--ink-soft); }

.press { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.6rem; }
.press > div { background: var(--paper); padding: 1.9rem 1.7rem; box-shadow: 0 1px 2px rgba(20, 18, 17, 0.08); }
.press h2 { font-family: var(--display); text-transform: uppercase; font-size: 1.6rem; line-height: 1.05; margin-bottom: 0.8rem; }
.press__mail { font-weight: 700; font-size: 1.15rem; overflow-wrap: anywhere; }
.kit { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.kit img { width: 88px; height: 88px; border-radius: 50%; }
.cite { background: var(--wall); padding: 0.9rem 1.1rem; overflow-wrap: anywhere; font-weight: 600; }

.memo { background: var(--ink); color: var(--paper); padding-block: clamp(4.5rem, 9vw, 8rem); }
.memo__intro { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.4; max-width: 36ch; margin-block: 1.5rem 4rem; color: #ece6df; }
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 3rem; }
.people h3 { font-family: var(--display); text-transform: uppercase; color: var(--red); font-size: clamp(2.6rem, 1.8rem + 3vw, 4.2rem); line-height: 0.95; margin-bottom: 0.9rem; }
:lang(ar) .people h3 { font-weight: 900; line-height: 1.3; }
.people p { max-width: 30ch; color: #e7e1da; }
.memo__body { font-size: 1.3rem; max-width: 42rem; margin-top: 4rem; }
.memo__help { margin-top: 2.5rem; background: var(--paper); color: var(--ink); padding: 1.3rem 1.5rem; font-weight: 600; max-width: 62ch; }

/* ---------- Peu ---------- */
.foot { background: var(--ink); color: var(--paper); margin-top: var(--gap); padding-block: clamp(4rem, 7vw, 6rem) 2.5rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--red); text-decoration: underline; }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; margin-bottom: 3.5rem; }
.foot__top img { width: 104px; height: 104px; border-radius: 50%; }
.foot__claim { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem); line-height: 1; max-width: 16ch; margin: 0; }
.foot__claim span { color: var(--red); }
:lang(ar) .foot__claim { text-transform: none; font-weight: 800; line-height: 1.3; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(252, 251, 248, 0.15); }
.foot h2 { font-weight: 700; font-size: 1rem; margin-bottom: 0.8rem; color: var(--red); }
.foot__cols ul { display: grid; gap: 0.35rem; }
.foot__cols p { overflow-wrap: anywhere; } /* l'adreça de correu no cap en columnes estretes */
.foot__cols button { font: inherit; background: none; border: 0; color: inherit; padding: 0; cursor: pointer; text-align: start; }
.foot__cols button:hover { color: var(--red); text-decoration: underline; }
.foot__langs a { text-decoration: none; }
.foot__langs a:hover, .foot__langs a[aria-current] { color: var(--red); text-decoration: underline; }
.langhint { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 0; padding: 0.55rem var(--m); background: var(--ink); color: var(--paper); font-weight: 600; font-size: 0.98rem; }
.langhint a { color: var(--paper); text-decoration-color: var(--red); }
.langhint a:hover { color: var(--red); }
.langhint button { font: inherit; font-size: 1.3rem; line-height: 1; background: none; border: 0; color: var(--paper); cursor: pointer; padding: 0.1rem 0.4rem; }
.foot__legal { margin-top: 3.5rem; font-size: 0.9rem; line-height: 1.6; color: #cfc8c0; display: grid; gap: 0.8rem; }
.foot__legal p { margin: 0; max-width: 95ch; }
.foot__legal a { text-decoration: underline; text-decoration-color: rgba(228, 81, 46, 0.6); }
@media (max-width: 52rem) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .foot__cols > :last-child { grid-column: 1 / -1; } }


/* ---------- Moviment ---------- */
.js [data-in] { opacity: 0; translate: 0 20px; transition: opacity 0.8s var(--ease), translate 0.8s var(--ease); }
.js [data-in].in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .js [data-in] { opacity: 1; translate: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

@media print {
  .ticker, .top, .foot, .share { display: none !important; }
  body { background: #fff; }
  .board, .wall, .alarm, .strike, .memo { background: none; color: #000; }
}

/* ======================================================================
   Capa d'acabat: profunditat suau, càpsules i moviment amb massa.
   Els objectes de la plaça (cartell, fotos, cartells) continuen sent paper amb cinta;
   els contenidors d'informació són peces amb doble marc i cantonades grans.
   ====================================================================== */
:root {
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --soft: 0 1px 1px rgba(20, 18, 17, 0.04), 0 30px 60px -32px rgba(20, 18, 17, 0.26);
  --lift: 0 1px 1px rgba(20, 18, 17, 0.06), 0 22px 44px -22px rgba(20, 18, 17, 0.34);
  --r-lg: 2rem;
  --r-md: 1.4rem;
  /* doble marc: safata exterior + línia fina, sense vores grises */
  --bezel: 0 0 0 6px rgba(20, 18, 17, 0.035), 0 0 0 7px rgba(20, 18, 17, 0.07);
}

/* Gra de paper fix, per sobre de tot i sense interceptar res */
body { background-image: none; }
body::before { content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none; background: url("../img/gra.png"); opacity: 0.55; }

/* Etiqueta sobre els titulars */
.eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.85rem 0.38rem; margin: 0 0 1.1rem; border-radius: 999px; background: rgba(20, 18, 17, 0.06); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; color: var(--ink); }
.eyebrow::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--red); }
:lang(ar) .eyebrow { letter-spacing: 0; font-size: 0.85rem; }
.strike .eyebrow, .memo .eyebrow { background: rgba(252, 251, 248, 0.1); color: var(--paper); }

/* Botons: càpsula amb la fletxa en el seu propi cercle */
.btn { border-radius: 999px; padding-block: 0.5rem; padding-inline: 1.5rem 0.5rem; gap: 1rem; font-size: 1.05rem; transition: transform 0.5s var(--spring), background-color 0.4s var(--spring); }
.btn::after { content: "↗"; flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(252, 251, 248, 0.14); font-family: var(--text); font-size: 1.05rem; font-weight: 600; line-height: 1; transition: transform 0.5s var(--spring); }
.btn--red::after, .btn--light::after { background: rgba(20, 18, 17, 0.1); }
[dir="rtl"] .btn::after { content: "↖"; }
.btn:hover { transform: translateY(-1px); }
.btn:hover::after { transform: translate(3px, -2px) scale(1.06); }
[dir="rtl"] .btn:hover::after { transform: translate(-3px, -2px) scale(1.06); }
.btn:active { transform: scale(0.98); }
.nav .btn { padding-block: 0.35rem; padding-inline: 1.15rem 0.35rem; font-size: 0.98rem; }
.nav .btn::after { width: 2rem; height: 2rem; font-size: 0.95rem; }
.link { transition: color 0.4s var(--spring); }

/* Navegació: illa flotant, desenganxada de dalt */
.top { position: sticky; top: 12px; z-index: 40; background: none; padding-inline: 12px; margin-top: 12px; }
.top__in { max-width: 82rem; padding-block: 0.45rem; padding-inline: 0.6rem 0.5rem; border-radius: 999px; background: rgba(252, 251, 248, 0.78); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 0 0 1px rgba(20, 18, 17, 0.06), 0 18px 40px -24px rgba(20, 18, 17, 0.35); }
.brand img { width: 44px; height: 44px; }
.brand span { font-size: 1.2rem; }
.nav__links a { border-bottom: 0; padding: 0.55rem 0.85rem; border-radius: 999px; transition: background-color 0.4s var(--spring); }
.nav__links a:hover { background: rgba(20, 18, 17, 0.06); }
.nav__links a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.nav__links { gap: 0.2rem; }
.langs ul { border-radius: var(--r-md); padding: 0.5rem; box-shadow: var(--soft), 0 0 0 1px rgba(20, 18, 17, 0.06); }
.langs button, .langs a { border-radius: 0.8rem; }

@media (max-width: 62rem) {
  .top__in { flex-wrap: nowrap; }
  .top__menu { position: relative; z-index: 3; width: 3rem; height: 3rem; padding: 0; border-radius: 50%; background: var(--ink); justify-content: center; font-size: 0; }
  .top__menu span { position: absolute; left: 50%; top: 50%; width: 1.15rem; height: 2px; margin-left: -0.575rem; background: var(--paper); border-radius: 2px; transition: transform 0.6s var(--spring); }
  .top__menu span:first-child { transform: translateY(-4px); }
  .top__menu span:nth-child(2) { transform: translateY(4px); }
  .is-open .top__menu span:first-child { transform: rotate(45deg); }
  .is-open .top__menu span:nth-child(2) { transform: rotate(-45deg); }
  .brand { position: relative; z-index: 3; }
  .nav { display: flex; position: fixed; inset: 0; z-index: 2; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.6rem; padding: 6rem 2rem 3rem; background: rgba(241, 239, 234, 0.9); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); opacity: 0; visibility: hidden; transition: opacity 0.6s var(--spring), visibility 0s linear 0.6s; }
  .is-open .nav { opacity: 1; visibility: visible; transition: opacity 0.6s var(--spring), visibility 0s; }
  .nav__links a { font-size: 2.6rem; padding: 0.1rem 0; background: none !important; color: var(--ink) !important; }
  .nav__links a[aria-current="page"] { color: var(--red-deep) !important; }
  .nav > * { opacity: 0; transform: translateY(2.5rem); transition: opacity 0.7s var(--spring), transform 0.7s var(--spring); }
  .nav__links li { opacity: 0; transform: translateY(2.5rem); transition: opacity 0.7s var(--spring), transform 0.7s var(--spring); }
  .is-open .nav > *, .is-open .nav__links li { opacity: 1; transform: none; }
  .is-open .nav__links li:nth-child(1) { transition-delay: 0.08s; }
  .is-open .nav__links li:nth-child(2) { transition-delay: 0.13s; }
  .is-open .nav__links li:nth-child(3) { transition-delay: 0.18s; }
  .is-open .nav__links li:nth-child(4) { transition-delay: 0.23s; }
  .is-open .nav > .langs { transition-delay: 0.3s; }
  .is-open .nav > .btn { transition-delay: 0.36s; }
  .nav .btn { font-size: 1.15rem; padding-block: 0.5rem; padding-inline: 1.4rem 0.5rem; }
  .langs ul { position: static; box-shadow: none; background: none; padding: 0.5rem 0 0; }
  html.menu-open { overflow: hidden; }
}

/* Contenidors d'informació: doble marc i cantonades grans */
.programme, .coms, .flyer, .article, .live { border-radius: var(--r-lg); box-shadow: var(--bezel), var(--soft); }
.item, .faq details, .press > div, .prog, .wall__label, .tday, .note-box, .cite, .memo__help, .flyer__help, .share a { border-radius: var(--r-md); }
.item, .faq details, .press > div, .prog, .wall__label, .tday { box-shadow: var(--bezel), var(--soft); }
.memo-card { border-radius: var(--r-lg); box-shadow: 0 0 0 6px rgba(20, 18, 17, 0.05), 0 0 0 7px rgba(20, 18, 17, 0.09), var(--soft); }
.tday img { border-radius: calc(var(--r-md) - 6px); }
.programme.taped::before { display: none; }
.faq__list { gap: 1.1rem; }
.faq summary { padding: 1.35rem 1.6rem; }
.faq details p { padding: 0 1.6rem 1.5rem; }
.faq summary::after { transition: rotate 0.5s var(--spring), background-color 0.4s var(--spring); }
.item, .prog, .press > div, .tday { transition: transform 0.6s var(--spring), box-shadow 0.6s var(--spring); }
.item:hover, .prog:hover, .press > div:hover, .tday:hover { transform: translateY(-3px); box-shadow: var(--bezel), 0 1px 1px rgba(20, 18, 17, 0.04), 0 40px 70px -34px rgba(20, 18, 17, 0.32); }
.list-grid, .press, .tdays { gap: 2rem; }
.share a { border-radius: 999px; padding: 0.5rem 1rem; }
.flyer__help { border-radius: var(--r-md); }
.coms li { border-inline-start-width: 2px; }

/* Objectes de la plaça: paper real, amb ombra suau */
.poster img, .photo, .pin img, .sticker { box-shadow: var(--lift); }
.pin figcaption { border-radius: 0.7rem; box-shadow: 0 1px 1px rgba(20, 18, 17, 0.05); }
.wall__label { padding: 1.6rem 1.8rem; }

/* Espai: les seccions respiren més */
:root { --gap: clamp(7rem, 12vw, 12rem); }
.hero { padding-top: clamp(3rem, 6vw, 6rem); }

/* Entrada: pujada pesada amb desenfocament que es resol */
.js [data-in] { opacity: 0; translate: 0 3rem; filter: blur(10px); transition: opacity 1s var(--spring), translate 1s var(--spring), filter 1s var(--spring); }
.js [data-in].in { opacity: 1; translate: 0 0; filter: none; }

/* Mòbil: sense girs ni superposicions */
@media (max-width: 48rem) {
  .poster, .poster figcaption, .photo, .about__aside .photo, .org__aside .photo, .strike .photo, .pin figure, .pin:nth-child(odd) figure, .pin:nth-child(even) figure { rotate: 0deg; }
  .programme, .coms, .flyer, .article, .live { border-radius: var(--r-md); }
  .top { top: 8px; padding-inline: 8px; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-in] { filter: none; }
  .nav > *, .nav__links li { transform: none !important; }
}
@media (max-width: 48rem) {
  .eyebrow { font-size: 0.68rem; letter-spacing: 0.12em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Què necessitem (participa) ---------- */
.needs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 4rem; border-radius: var(--r-lg); box-shadow: var(--bezel), var(--soft); padding: clamp(1.8rem, 4vw, 3rem); }
.needs > div:first-child p:last-child { color: var(--ink-soft); margin: 0.8rem 0 0; }
.needs__list { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.4rem; }
.need { display: inline-flex; align-items: center; gap: 0.55rem; background: var(--wall); border-radius: 999px; padding: 0.55rem 1.1rem; font-weight: 600; line-height: 1.3; }
.need--urgent { background: var(--red); }
.need strong { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0.15rem 0.5rem; }
.needs__no { color: var(--ink-soft); }
.needs__bring { font-weight: 600; margin-bottom: 0.4rem; }
.needs__date { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 52rem) { .needs { grid-template-columns: 1fr; } }

/* ---------- On som (participa) ---------- */
.onsom__intro { color: var(--ink-soft); margin: 0.8rem 0 2rem; max-width: 40rem; }
.onsom__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 3.5rem; align-items: start; }
.plan { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--bezel), var(--soft); }
.plan img { width: 100%; }
.plan__pin { position: absolute; display: grid; place-items: center; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; border-radius: 50%; background: var(--red); color: var(--ink); font-weight: 800; font-size: 0.95rem; box-shadow: 0 0 0 3px var(--paper), var(--lift); }
.plan__pin--centre { left: 50%; top: 58%; }
.plan__pin--nord { left: 50%; top: 30%; }
.plan__pin--nord-est { left: 66%; top: 32%; }
.plan__pin--est { left: 70%; top: 50%; }
.plan__pin--sud-est { left: 66%; top: 70%; }
.plan__pin--sud { left: 50%; top: 72%; }
.plan__pin--sud-oest { left: 34%; top: 70%; }
.plan__pin--oest { left: 30%; top: 50%; }
.plan__pin--nord-oest { left: 34%; top: 32%; }
.plan__pin--n1 { translate: 2.3rem 0; }
.plan__pin--n2 { translate: -2.3rem 0; }
.plan__pin--n3 { translate: 0 2.3rem; }
.plan__list { display: grid; gap: 0.9rem; margin-bottom: 1.6rem; counter-reset: pin; }
.plan__list li { display: grid; grid-template-columns: 2rem 1fr; gap: 0 0.8rem; counter-increment: pin; }
.plan__list li::before { content: counter(pin); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--red); font-weight: 800; }
.plan__list span { color: var(--ink-soft); }
.plan__info > p { margin-bottom: 0.9rem; }
.plan__ask { color: var(--ink-soft); }
@media (max-width: 56rem) { .onsom__grid { grid-template-columns: 1fr; } }

/* ---------- Desnonaments (agenda) ---------- */
.desn__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.4rem; }
.desn__head p:last-child { margin: 0.6rem 0 0; color: var(--ink-soft); max-width: 40rem; }
.desn__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.6rem; margin-bottom: 2.4rem; }
.dcard, .desn__empty { background: var(--paper); border-radius: var(--r-md); box-shadow: var(--bezel), var(--soft); padding: 1.5rem 1.6rem; }
.dcard { border-inline-start: 6px solid var(--red); }
.dcard__when { margin: 0; font-family: var(--display); text-transform: uppercase; font-size: 1.7rem; line-height: 1.05; }
.dcard__when span { display: block; margin-top: 0.35rem; font-family: var(--text); text-transform: none; font-size: 0.95rem; font-weight: 650; color: var(--red-deep); }
.dcard h3 { font-weight: 700; font-size: 1.2rem; line-height: 1.3; margin: 0.9rem 0 0.5rem; }
.dcard p:last-child { margin-bottom: 0; }
.dcard__where { color: var(--ink-soft); font-size: 0.95rem; }
.desn__empty { grid-column: 1 / -1; max-width: 46rem; }
.mapbox { border-radius: var(--r-lg); box-shadow: var(--bezel), var(--soft); padding: clamp(1.6rem, 3vw, 2.4rem); }
.mapbox h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; margin-bottom: 0.7rem; }
.mapbox > p { max-width: 62ch; color: var(--ink-soft); }
.mapbox__frame iframe { display: block; width: 100%; height: min(75vh, 640px); border: 0; border-radius: var(--r-md); margin-top: 1.6rem; background: var(--wall); }
html:not(.js) [data-map-load] { display: none; }
[data-map-load][hidden] { display: none; }

/* ---------- Des de la plaça (posts del Mastodon) ---------- */
.toots__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.4rem; }
.toots__head p:last-child { margin: 0.6rem 0 0; color: var(--ink-soft); max-width: 36rem; }
.toots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 1.8rem; align-items: start; }
.toot__link { display: flex; flex-direction: column; height: 100%; background: var(--paper); border-radius: var(--r-md); padding: 0.6rem 0.6rem 1.1rem; text-decoration: none; box-shadow: var(--bezel), var(--soft); transition: transform 0.6s var(--spring), box-shadow 0.6s var(--spring); }
.toot__link:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--bezel), 0 1px 1px rgba(20, 18, 17, 0.04), 0 40px 70px -34px rgba(20, 18, 17, 0.32); }
.toot__img { position: relative; display: block; margin-bottom: 0.95rem; }
.toot__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--r-md) - 0.6rem); background: var(--wall); }
.toot__badge { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; background: var(--ink); color: var(--paper); font-size: 0.8rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; }
.toot__text { display: block; padding-inline: 0.5rem; font-size: 0.98rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.8rem; overflow-wrap: anywhere; }
.toot__meta { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: auto; padding-inline: 0.5rem; font-size: 0.85rem; color: var(--ink-soft); }
.toot__meta span { color: var(--red-deep); font-weight: 650; }
.toot__link:hover .toot__meta span { text-decoration: underline; }

/* ---------- Sense JavaScript ----------
 * El contingut ja ve escrit a l'HTML (eines/genera.mjs), en cada llengua. Sense JS no hi ha botó de menú:
 * el menú es mostra obert, en línia. Les llengües són enllaços i funcionen igual. */
html:not(.js) .top__menu { display: none; }
@media (max-width: 62rem) {
  html:not(.js) .top__in { flex-wrap: wrap; }
  html:not(.js) .nav { position: static; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; padding: 0 0 0.5rem; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; visibility: visible; }
  html:not(.js) .nav > *, html:not(.js) .nav__links li { opacity: 1; transform: none; }
  html:not(.js) .nav__links { flex-direction: row; flex-wrap: wrap; gap: 0.2rem 1.1rem; }
  html:not(.js) .nav__links a { font-family: var(--text); text-transform: none; font-weight: 600; font-size: 1.05rem; }
}

/* ---------- Portada: el dia d'acampada com a titular ---------- */
.hero__title { max-width: 15ch; }
:lang(ar) .hero__title { max-width: none; font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem); }

/* ---------- 11N: la xifra omple la columna i surt per la vora ---------- */
.strike { overflow: hidden; }
.strike__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; }
.strike .strike__num { font-size: clamp(10rem, 1rem + 29vw, 30rem); line-height: 0.78; letter-spacing: -0.02em; margin-inline-start: calc(-1 * (var(--m) + max(0px, (100vw - 84rem) / 2)) - 0.04em); }
.strike__media .btn { justify-self: start; }
@media (max-width: 56rem) {
  .strike__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .strike .strike__num { font-size: 52vw; }
}

/* ---------- Des de la plaça: posts clavats al cartró de l'agenda ---------- */
.board .toots { margin-top: clamp(4rem, 8vw, 6.5rem); }
.board .toots__head { margin-bottom: 3rem; }
.board .toots__head p:last-child { margin: 0.9rem 0 0; color: var(--ink); }
.toots__grid { gap: 3rem 2.4rem; }
.toot { position: relative; }
.toot:nth-child(odd) { rotate: -0.8deg; }
.toot:nth-child(even) { rotate: 0.9deg; }
.toot:nth-child(odd)::before { content: ""; position: absolute; z-index: 2; top: -13px; left: 50%; width: 104px; height: 28px; translate: -50% 0; rotate: -3deg; background: var(--tape); clip-path: polygon(3% 8%, 0 30%, 4% 52%, 1% 78%, 5% 100%, 96% 94%, 100% 70%, 97% 46%, 100% 22%, 95% 0); pointer-events: none; }
@media (max-width: 48rem) { .toot:nth-child(odd), .toot:nth-child(even) { rotate: 0deg; } }
@media (max-width: 40rem) {
  .toots__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 0.9rem; }
  .toot__link { padding: 0.4rem 0.4rem 0.8rem; }
  .toot__text { font-size: 0.9rem; padding-inline: 0.2rem; }
  .toot__meta { padding-inline: 0.2rem; }
  .toot__meta span { display: none; }
  .toot:nth-child(odd)::before { width: 72px; height: 22px; top: -10px; }
}