/* "Concrete" look — a modern gallery wall, from the user's mockup
   (2026-11-05). Loaded ONLY for a browser that opened a page with
   ?look=concrete (?look=off switches back; see the loader in the page head).
   Everything is scoped under html.look-concrete, so the live look can't be
   touched by it.

   What changes against the live wall: a light concrete wall with soft
   window-light shadows instead of the brick; a light header with a black logo
   and black outlined pills; posters hung straight with square corners and a
   soft shadow, no tilt, torn edges, ageing or paper texture; the caption laid
   over the foot of the image with an arrow; a black date tab. */

html.look-concrete {
  --cc-ink: #141414;
  --cc-muted: #5f5a53;
  --cc-wall: #dcd6cd;
}

/* ——— the wall ——— */
/* every wall but the four that keep their own texture (see the end of the
   file): Clubs/Jazz black brick, Escena white brick, Kids, Cinema black wood */
html.look-concrete body:not([data-cat="clubs"]):not([data-cat="jazzbcn"]):not([data-cat="escena"]):not([data-cat="kids"]):not([data-cat="cinema"]) {
  /* the third texture (CONCRETEPANELS_NEW, 4x3 panels, saved at 2000px as
     concrete-wall-3.webp): tiled at 1800px - panels about 450px wide - and
     scrolling with the posters, like a real wall */
  background: var(--cc-wall) url("/textures/concrete-wall-4.webp") left top / 1800px auto repeat scroll !important;
  color: var(--cc-ink);
}
@media (max-width: 700px) {
  /* fixed backgrounds stutter on phones */
  html.look-concrete body:not([data-cat="clubs"]):not([data-cat="jazzbcn"]):not([data-cat="escena"]):not([data-cat="kids"]):not([data-cat="cinema"]) { background-attachment: scroll !important; background-size: 900px auto !important; background-repeat: repeat !important; }
}

/* ——— header ——— */
html.look-concrete .topbar {
  background: rgba(236, 232, 226, 0.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(20, 20, 20, 0.12);
}
html.look-concrete .brand-logo { filter: brightness(0); }
html.look-concrete .brand,
html.look-concrete .brand * { color: var(--cc-ink); }

/* pills: black outline, black fill when chosen (dates and categories alike) */
html.look-concrete .filter-chip,
html.look-concrete .filters.when .filter-chip {
  color: var(--cc-ink);
  border: 1px solid rgba(20, 20, 20, 0.55);
  background: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.6px;
}
html.look-concrete .filter-chip:hover,
html.look-concrete .filters.when .filter-chip:hover { border-color: var(--cc-ink); background: rgba(255, 255, 255, 0.7); }
html.look-concrete .filter-chip.active,
html.look-concrete .filters.when .filter-chip.active,
html.look-concrete .filters.when .filter-chip.chip-free.active {
  background: var(--cc-ink);
  border-color: var(--cc-ink);
  color: #fff;
}
html.look-concrete .filters.when .filter-chip.chip-free { border-color: rgba(20, 20, 20, 0.55); }

/* ——— the grid: the live wall's own (auto-fill columns of 250px+, up to
   1700px wide, paid 2x2 posters) - a fixed 5-column grid capped at 1500px
   made every poster ~15% smaller than on the live design (2026-11-05) ——— */

/* ——— posters: straight, square, a soft shadow on the wall ——— */
html.look-concrete .poster {
  transform: none !important;
  filter: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  border-radius: 0;
  /* pasted flat on the wall: a tight contact edge, a little soft spread to
     the lower right - not a card floating above it (see the variants below) */
  box-shadow: var(--sh, 0 0 0 1px rgba(0, 0, 0, 0.04), 1px 2px 2px rgba(0, 0, 0, 0.3), 3px 6px 10px -2px rgba(0, 0, 0, 0.2));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
html.look-concrete .poster:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 2px 4px 6px rgba(0, 0, 0, 0.25), 6px 14px 22px -6px rgba(0, 0, 0, 0.28);
}
/* the glued-paper creases stay, as in the mockup - a little lighter than
   on the brick wall, which also ages and tears its posters */
html.look-concrete .poster .tex { display: block; opacity: 0.55; }

/* photo posters: the image fills the sheet, the caption sits on its foot */
html.look-concrete .poster-img > img { flex: 1 1 auto; height: 100%; }
html.look-concrete .poster-img .strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.82));
  color: #fff;
  padding: 44px 40px 14px 14px;
}
html.look-concrete .poster-img .strip .t { font-size: 16px; line-height: 1.15; font-weight: 700; letter-spacing: -0.2px; }
html.look-concrete .poster-img .strip .v { font-size: 10.5px; opacity: 0.85; letter-spacing: 0.3px; text-transform: none; }
html.look-concrete .poster-img .strip::after {
  content: "→";
  position: absolute;
  right: 14px;
  bottom: 12px;
  font: 700 20px/1 "Space Grotesk", sans-serif;
  color: #fff;
}

/* the date: a black tab, straight */
html.look-concrete .datebadge {
  transform: none;
  background: rgba(20, 20, 20, 0.9);
  color: #fff;
  top: 12px;
  left: 12px;
  padding: 4px 9px;
  border-radius: 0;
  box-shadow: none;
}

/* type-only posters keep their colours, lose the paper */
html.look-concrete .poster-type { background-image: none; }

/* banners and the "your poster here" sheet hang the same way */
html.look-concrete .banner,
html.look-concrete .poster-add {
  transform: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 1px 2px 2px rgba(0, 0, 0, 0.3), 3px 6px 10px -2px rgba(0, 0, 0, 0.2);
}

/* server-rendered pages (towns, festes, weekends): their section labels and
   breadcrumbs sat on dark brick; on concrete they read as black tabs */
html.look-concrete .townhead h1 {
  background: none;
  color: var(--cc-ink);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -1px;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.02;
  padding: 0;
}
html.look-concrete .townhead p { background: none; color: var(--cc-muted); padding: 0; margin-top: 10px; font-size: 15px; }
html.look-concrete .townhead p.townhead-also { padding: 0; }
html.look-concrete .townhead-also a { color: var(--cc-ink); }
html.look-concrete .towncrumbs a,
html.look-concrete .towncrumbs span {
  background: rgba(255, 255, 255, 0.45);
  color: var(--cc-ink);
  border: 1px solid rgba(20, 20, 20, 0.45);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11.5px;
}
html.look-concrete .towncrumbs .sep { background: none; border: 0; color: var(--cc-muted); text-shadow: none; padding: 3px 2px; }
html.look-concrete .towncrumbs [aria-current] { background: var(--cc-ink); color: #fff; border-color: var(--cc-ink); }
html.look-concrete .towncrumbs a:hover { color: var(--cc-ink); background: #fff; }
html.look-concrete .festaday span { background: var(--cc-ink); color: #fff; transform: none; box-shadow: none; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.8px; padding: 6px 12px; }

@media (max-width: 760px) {
  html.look-concrete .poster-img .strip { padding: 30px 30px 10px 10px; }
  html.look-concrete .poster-img .strip .t { font-size: 13px; }
  html.look-concrete .poster-img .strip::after { font-size: 16px; right: 10px; bottom: 9px; }
}

/* the save button: black instead of the red sticker */
html.look-concrete .peace.save-btn { background: var(--cc-ink); color: #fff; border-radius: 0; }

/* ═══ Variants: ?look=concrete-duo and ?look=concrete-frame (2026-11-05) ═══
   The mockup's posters work because they share one system: date top-left,
   category top-right, title and venue in a band at the foot with an arrow,
   one colour each from a small palette. Both variants lay real posters out
   that way. duo: the image black-and-white, printed in the poster's colour.
   frame: the image in its own colours, inside a frame of that colour.
   The colour (pal-0..5) is fixed per event by its id. */
html.look-duo .poster-img,
html.look-frame .poster-img {
  --pbg: #eee7da; --pink: #141414; --blend: multiply;
  background: var(--pbg);
  color: var(--pink);
  isolation: isolate;
}
html.look-duo .poster-img.pal-0, html.look-frame .poster-img.pal-0 { --pbg: #f2d02b; --pink: #141414; --blend: multiply; }
html.look-duo .poster-img.pal-1, html.look-frame .poster-img.pal-1 { --pbg: #e9472a; --pink: #ffffff; --blend: luminosity; }
html.look-duo .poster-img.pal-2, html.look-frame .poster-img.pal-2 { --pbg: #2357e8; --pink: #ffffff; --blend: luminosity; }
html.look-duo .poster-img.pal-3, html.look-frame .poster-img.pal-3 { --pbg: #f4b6c6; --pink: #141414; --blend: multiply; }
html.look-duo .poster-img.pal-4, html.look-frame .poster-img.pal-4 { --pbg: #1f5c3f; --pink: #ffffff; --blend: luminosity; }
html.look-duo .poster-img.pal-5, html.look-frame .poster-img.pal-5 { --pbg: #eee7da; --pink: #141414; --blend: multiply; }

/* the image between a top band (date, category) and a foot band (title) */
html.look-duo .poster-img > img,
html.look-frame .poster-img > img {
  position: absolute;
  top: 42px;
  bottom: 86px;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(100% - 128px); /* top + bottom bands: a replaced element does not stretch between top/bottom */
  object-fit: cover;
  background: transparent;
}
html.look-frame .poster-img > img { left: 12px; right: 12px; width: calc(100% - 24px); }
html.look-duo .poster-img > img {
  filter: grayscale(1) contrast(1.2) brightness(1.05);
  mix-blend-mode: var(--blend);
}

html.look-duo .datebadge,
html.look-frame .datebadge {
  background: none;
  color: var(--pink);
  font-family: "Anton", sans-serif;
  font-size: 16px;
  letter-spacing: 0.5px;
  top: 12px;
  left: 13px;
  padding: 0;
}
html.look-duo .catlabel,
html.look-frame .catlabel {
  display: block;
  position: absolute;
  top: 15px;
  right: 13px;
  z-index: 6;
  font: 700 11px/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--pink);
}
html.look-duo .poster-img .strip,
html.look-frame .poster-img .strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: none;
  color: var(--pink);
  padding: 0 38px 12px 13px;
}
html.look-duo .poster-img .strip .t,
html.look-frame .poster-img .strip .t { font-size: 18px; line-height: 1.08; letter-spacing: -0.3px; }
html.look-duo .poster-img .strip .v,
html.look-frame .poster-img .strip .v { font-size: 10.5px; opacity: 0.8; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.look-duo .poster-img .strip::after,
html.look-frame .poster-img .strip::after { color: var(--pink); right: 13px; bottom: 12px; }

/* on touch screens the save button is always shown: it takes the arrow's
   corner instead of covering the category */
@media (hover: none) {
  html.look-duo .poster-img .peace,
  html.look-frame .poster-img .peace { top: auto; bottom: 10px; right: 8px; }
  html.look-duo .poster-img .strip::after,
  html.look-frame .poster-img .strip::after { display: none; }
  html.look-duo .poster-img .strip,
  html.look-frame .poster-img .strip { padding-right: 70px; }
}
@media (max-width: 760px) {
  html.look-duo .poster-img > img,
  html.look-frame .poster-img > img { top: 32px; bottom: 70px; height: calc(100% - 102px); }
  html.look-frame .poster-img > img { left: 8px; right: 8px; width: calc(100% - 16px); }
  html.look-duo .poster-img .strip,
  html.look-frame .poster-img .strip { height: 70px; padding-left: 9px; padding-bottom: 9px; }
  html.look-duo .poster-img .strip .t,
  html.look-frame .poster-img .strip .t { font-size: 13.5px; }
  html.look-duo .datebadge,
  html.look-frame .datebadge { font-size: 13px; top: 9px; left: 9px; }
  html.look-duo .catlabel,
  html.look-frame .catlabel { font-size: 9.5px; top: 11px; right: 9px; }
}

/* ═══ Type-only posters, redrawn in the mockup's system (2026-11-05) ═══
   Posters without an image are our own design, so here they can follow the
   reference fully: one colour of a seven-colour palette, one bold generated
   graphic (public/poster-shapes.js), date top-left, category top-right, the
   title bottom-left in a heavy grotesque, venue under it, an arrow. */
html.look-concrete .poster-type {
  --tbg: #efe8da; --tink: #141414; --tshape: #e8432b;
  background: var(--tbg) !important;
  color: var(--tink) !important;
  display: block;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
html.look-concrete .poster-type.tpal-0 { --tbg: #efe8da; --tink: #141414; --tshape: #e8432b; }
html.look-concrete .poster-type.tpal-1 { --tbg: #161616; --tink: #f3efe7; --tshape: #f3efe7; }
html.look-concrete .poster-type.tpal-2 { --tbg: #2350e6; --tink: #ffffff; --tshape: #ffffff; }
html.look-concrete .poster-type.tpal-3 { --tbg: #f2cf2a; --tink: #141414; --tshape: #141414; }
html.look-concrete .poster-type.tpal-4 { --tbg: #f3b5c6; --tink: #141414; --tshape: #141414; }
html.look-concrete .poster-type.tpal-5 { --tbg: #1e5a3e; --tink: #f3efe7; --tshape: #f3efe7; }
html.look-concrete .poster-type.tpal-6 { --tbg: #e8432b; --tink: #ffffff; --tshape: #141414; }

html.look-concrete .poster-type .tp-art {
  display: block;
  position: absolute;
  z-index: 1;
  color: var(--tshape);
  pointer-events: none;
}
html.look-concrete .poster-type .tp-art svg { display: block; width: 100%; height: auto; overflow: visible; }

html.look-concrete .poster-type .tp-date {
  display: block;
  position: absolute;
  top: 12px;
  left: 13px;
  z-index: 3;
  font: 16px/1 "Anton", sans-serif;
  letter-spacing: 0.5px;
  color: var(--tink);
}
html.look-concrete .poster-type .cat {
  position: absolute;
  top: 15px;
  right: 13px;
  z-index: 3;
  border: 0;
  padding: 0;
  margin: 0;
  font: 700 11px/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.6px;
  color: var(--tink);
}
html.look-concrete .poster-type .title,
html.look-concrete .poster-type.f-anton .title,
html.look-concrete .poster-type.f-archivo .title,
html.look-concrete .poster-type.f-playfair .title {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 44px;
  z-index: 3;
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: none;
  letter-spacing: -0.6px;
  line-height: 1.0;
  color: var(--tink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: none;
}
html.look-concrete .poster-type.tlen-s .title { font-size: clamp(24px, 2.4vw, 36px); }
html.look-concrete .poster-type.tlen-m .title { font-size: clamp(19px, 1.85vw, 27px); }
html.look-concrete .poster-type.tlen-l .title { font-size: clamp(15px, 1.4vw, 20px); letter-spacing: -0.3px; }
html.look-concrete .poster--big.poster-type .title { font-size: clamp(30px, 3.4vw, 52px); }
html.look-concrete .poster-type .foot {
  position: absolute;
  left: 13px;
  right: 40px;
  bottom: 13px;
  z-index: 3;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}
html.look-concrete .poster-type .when { display: none; }
html.look-concrete .poster-type .where {
  font: 500 10.5px/1.2 "Space Grotesk", sans-serif;
  letter-spacing: 0.2px;
  text-transform: none;
  text-align: left;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--tink);
}
html.look-concrete .poster-type::after {
  content: "→";
  position: absolute;
  right: 13px;
  bottom: 10px;
  z-index: 3;
  font: 700 20px/1 "Space Grotesk", sans-serif;
  color: var(--tink);
}
@media (hover: none) {
  html.look-concrete .poster-type .peace { top: auto; bottom: 10px; right: 8px; }
  html.look-concrete .poster-type::after { display: none; }
  html.look-concrete .poster-type .foot { right: 70px; }
}
@media (max-width: 760px) {
  html.look-concrete .poster-type .tp-date { font-size: 13px; top: 9px; left: 9px; }
  html.look-concrete .poster-type .cat { font-size: 9.5px; top: 11px; right: 9px; }
  html.look-concrete .poster-type .title { left: 9px; right: 9px; bottom: 34px; }
  html.look-concrete .poster-type.tlen-s .title { font-size: 22px; }
  html.look-concrete .poster-type.tlen-m .title { font-size: 17px; }
  html.look-concrete .poster-type.tlen-l .title { font-size: 14px; }
  html.look-concrete .poster-type .foot { left: 9px; bottom: 10px; }
}

/* the weekend intro: its links in ink, not browser blue */
html.look-concrete .townhead p.weekend-intro { color: var(--cc-muted); }
html.look-concrete .weekend-intro a { color: var(--cc-ink); font-weight: 600; }

/* ═══ Newsletter banner and sign-up boxes (2026-11-05) ═══
   A solid black panel in the mockup's type instead of the brick-paper strip
   with the red Anton headline: heavy white title, muted line, a square field
   and a yellow button. */
html.look-concrete .banner.banner-wl {
  background: #161616 !important;
  color: #f3efe7;
  align-items: flex-start;
  text-align: left;
  gap: 12px;
  padding: 34px 38px 28px;
}
html.look-concrete .banner.banner-wl .tex { display: none; }
html.look-concrete .banner.banner-wl .b-title {
  font: 700 clamp(28px, 3.4vw, 50px)/1.02 "Space Grotesk", sans-serif;
  letter-spacing: -1.2px;
  text-transform: none;
  color: #ffffff;
  text-align: left;
}
html.look-concrete .banner.banner-wl .wl-sub { color: #cfc8bc; text-align: left; font-weight: 500; }
html.look-concrete .banner.banner-wl .wl-privacy { color: #8f887d; text-align: left; }
html.look-concrete .banner.banner-wl .wl-msg { color: #f2cf2a; text-align: left; }
html.look-concrete .wl-form input[type="email"],
html.look-concrete .wlbox__form input[type="email"] {
  background: #ffffff;
  border: 0;
  border-radius: 0;
  color: #141414;
  padding: 12px 14px;
}
html.look-concrete .wl-form input[type="email"]:focus { outline: 3px solid #f2cf2a; outline-offset: 0; }
html.look-concrete .wl-form button,
html.look-concrete .wlbox__form button {
  background: #f2cf2a;
  color: #141414;
  border: 0;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  padding: 12px 18px;
}
html.look-concrete .wl-form button::after,
html.look-concrete .wlbox__form button::after { content: " →"; }
html.look-concrete .wl-form button:hover,
html.look-concrete .wlbox__form button:hover { background: #ffffff; }
/* the strip under the wall (town pages) and the box on festa/fair/weekend pages */
html.look-concrete .wl-line,
html.look-concrete .wlbox {
  background: #161616 !important;
  color: #f3efe7 !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 1px 2px 2px rgba(0, 0, 0, 0.3), 3px 6px 10px -2px rgba(0, 0, 0, 0.2) !important;
}
html.look-concrete .wl-line .wl-privacy,
html.look-concrete .wlbox .wlbox__note { color: #8f887d !important; }
html.look-concrete .wlbox h2 { font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -0.6px; color: #fff; }
html.look-concrete .wlbox .wlbox__msg { color: #f2cf2a; }

/* ═══ "Your poster here": a yellow poster in the same system ═══ */
html.look-concrete .poster-add {
  display: block;
  padding: 0;
  text-align: left;
  background: #f2cf2a;
  color: #141414;
}
html.look-concrete .poster-add .tex { display: block; opacity: 0.55; }
html.look-concrete .poster-add::before {
  /* the dashed frame becomes a big black asterisk */
  inset: auto;
  top: 17%;
  left: 24%;
  width: 60%;
  aspect-ratio: 1;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23141414'%3E%3Crect x='43' y='3' width='14' height='94' rx='7'/%3E%3Crect x='43' y='3' width='14' height='94' rx='7' transform='rotate(60 50 50)'/%3E%3Crect x='43' y='3' width='14' height='94' rx='7' transform='rotate(120 50 50)'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(12deg);
  transition: transform 0.4s ease;
}
html.look-concrete .poster-add:hover::before { transform: rotate(42deg); }
html.look-concrete .poster-add .pa-logo {
  top: 14px;
  left: 14px;
  width: 46%;
  transform: none;
  filter: brightness(0);
}
html.look-concrete .poster-add .pa-title {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 54px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13cqw;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: none;
  color: #141414;
  text-align: left;
}
html.look-concrete .poster-add:hover .pa-title { color: #141414; }
html.look-concrete .poster-add .pa-sub {
  position: absolute;
  left: 14px;
  right: 42px;
  bottom: 13px;
  max-width: none;
  font-size: 4.6cqw;
  line-height: 1.25;
  color: rgba(20, 20, 20, 0.78);
  text-align: left;
}
html.look-concrete .poster-add::after {
  content: "→";
  position: absolute;
  right: 14px;
  bottom: 11px;
  font: 700 20px/1 "Space Grotesk", sans-serif;
  color: #141414;
}

/* ═══ Uneven shadows (2026-11-05) ═══
   No two posters on a real wall sit the same way: a corner lifts where the
   paste ran thin, an edge bows. Four variants, picked by the colour class
   every poster already carries (fixed per event): flat; bottom-right corner
   lifted; bottom-left corner lifted; right edge bowed. The lifted corner's
   shadow is a soft wedge drawn by ::before outside the poster's edge only
   (clipped to the L-shaped area beyond it), so it never darkens the sheet. */
html.look-concrete .poster-img::before,
html.look-concrete .poster-type::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 46%;
  height: 32%;
  filter: blur(2px);
  display: none;
}
/* bottom-right corner lifted */
html.look-concrete .poster-img.pal-1::before,
html.look-concrete .poster-type.tpal-1::before {
  display: block;
  right: -12px;
  bottom: -12px;
  background: radial-gradient(ellipse 75% 70% at 82% 82%, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.12) 45%, transparent 72%);
  clip-path: polygon(calc(100% - 12px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 12px), calc(100% - 12px) calc(100% - 12px));
}
/* bottom-left corner lifted */
html.look-concrete .poster-img.pal-2::before,
html.look-concrete .poster-type.tpal-2::before {
  display: block;
  left: -12px;
  bottom: -12px;
  background: radial-gradient(ellipse 75% 70% at 18% 82%, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.1) 45%, transparent 72%);
  clip-path: polygon(0 0, 12px 0, 12px calc(100% - 12px), 100% calc(100% - 12px), 100% 100%, 0 100%);
}
/* lifted corners: the edge shadow a little deeper on that side */
html.look-concrete .poster-img.pal-1,
html.look-concrete .poster-type.tpal-1 {
  --sh: 0 0 0 1px rgba(0, 0, 0, 0.04), 1px 2px 2px rgba(0, 0, 0, 0.3), 5px 8px 12px -3px rgba(0, 0, 0, 0.26);
}
html.look-concrete .poster-img.pal-2,
html.look-concrete .poster-type.tpal-2 {
  --sh: 0 0 0 1px rgba(0, 0, 0, 0.04), -1px 2px 2px rgba(0, 0, 0, 0.26), -2px 7px 11px -3px rgba(0, 0, 0, 0.22);
}
/* right edge bowed off the wall: a longer, softer shadow down that side */
html.look-concrete .poster-img.pal-5, html.look-concrete .poster-type.tpal-6 {
  --sh: 0 0 0 1px rgba(0, 0, 0, 0.04), 1px 2px 2px rgba(0, 0, 0, 0.28), 6px 3px 10px -2px rgba(0, 0, 0, 0.3);
}
/* flat (the rest): just the contact edge */
html.look-concrete .poster-img.pal-0, html.look-concrete .poster-img.pal-3, html.look-concrete .poster-img.pal-4,
html.look-concrete .poster-type.tpal-0, html.look-concrete .poster-type.tpal-3, html.look-concrete .poster-type.tpal-4, html.look-concrete .poster-type.tpal-5 {
  --sh: 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px 2px rgba(0, 0, 0, 0.32), 2px 4px 7px -2px rgba(0, 0, 0, 0.16);
}
html.look-concrete .poster:hover::before { opacity: 0.6; }

/* ═══ Window light across wall AND posters (2026-11-05) ═══
   The wall texture is now shadow-free (concrete-wall-4.webp); the soft
   diagonal shadows of the window frames are drawn here instead, as one layer
   over the whole page - wall and posters alike, scrolling with them - so the
   posters sit under the same light as the concrete, as in the mockup. Two
   repeating bands of different widths and periods keep it from looking
   regular. Same angle as the shadows baked into the earlier textures (rising
   left to right). A plain translucent warm shade, not a blend mode: a page-
   tall blended layer makes phones stutter on scroll. Below the header. */
html.look-concrete body { position: relative; }
html.look-concrete body:not([data-cat="clubs"]):not([data-cat="jazzbcn"]):not([data-cat="escena"]):not([data-cat="kids"]):not([data-cat="cinema"])::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background:
    repeating-linear-gradient(155deg,
      rgba(66, 52, 38, 0) 0px,
      rgba(66, 52, 38, 0) 220px,
      rgba(66, 52, 38, 0.22) 340px,
      rgba(66, 52, 38, 0.28) 460px,
      rgba(66, 52, 38, 0.22) 560px,
      rgba(66, 52, 38, 0) 680px,
      rgba(66, 52, 38, 0) 1300px),
    repeating-linear-gradient(155deg,
      rgba(66, 52, 38, 0) 0px,
      rgba(66, 52, 38, 0) 760px,
      rgba(66, 52, 38, 0.15) 850px,
      rgba(66, 52, 38, 0.18) 920px,
      rgba(66, 52, 38, 0) 1030px,
      rgba(66, 52, 38, 0) 1800px);
  /* A fixed-size image, not the layer's own box: an angled gradient places its
     bands from the box's centre, so as a wall loaded more posters and the page
     grew, every band slid down (2026-11-05). 40000px is taller than any wall;
     it repeats beyond that. Its width only changes when the window does. */
  background-size: 100% 40000px;
  background-repeat: repeat-y;
}
@media (max-width: 760px) {
  /* narrower bands on a phone, so a screen still crosses one or two */
  html.look-concrete body:not([data-cat="clubs"]):not([data-cat="jazzbcn"]):not([data-cat="escena"]):not([data-cat="kids"]):not([data-cat="cinema"])::after { opacity: 0.85; }
}

/* ═══ The four walls that keep their old texture (2026-11-05) ═══
   With the concrete design live for everyone, Clubs and the jazz festival
   (black brick), Escena (white brick), Kids and Cinema (black wood) keep the
   backdrop style.css gives them; everything else on them is the new design.
   No window light there (it is drawn for the concrete), and the text that
   sits straight on the wall gets back the dark boxes it had on those
   textures - plain black type is unreadable on black brick or wood. */
html.look-concrete body[data-cat="clubs"],
html.look-concrete body[data-cat="jazzbcn"],
html.look-concrete body[data-cat="cinema"] { color: var(--paper); }
html.look-concrete body:is([data-cat="clubs"], [data-cat="jazzbcn"], [data-cat="escena"], [data-cat="kids"], [data-cat="cinema"]) .townhead h1 {
  display: inline-block;
  background: rgba(26, 23, 18, 0.86);
  color: #f2ead8;
  padding: 8px 14px 6px;
}
html.look-concrete body:is([data-cat="clubs"], [data-cat="jazzbcn"], [data-cat="escena"], [data-cat="kids"], [data-cat="cinema"]) .townhead p {
  display: table;
  background: rgba(26, 23, 18, 0.82);
  color: #f2ead8;
  padding: 5px 12px;
}
html.look-concrete body:is([data-cat="clubs"], [data-cat="jazzbcn"], [data-cat="escena"], [data-cat="kids"], [data-cat="cinema"]) .townhead-also a { color: #ffd27a; }
html.look-concrete body:is([data-cat="clubs"], [data-cat="jazzbcn"], [data-cat="cinema"]) .towncrumbs a,
html.look-concrete body:is([data-cat="clubs"], [data-cat="jazzbcn"], [data-cat="cinema"]) .towncrumbs span:not(.sep) { background: rgba(242, 234, 216, 0.88); }