:root {
  --blue: #1B3BD6; --deep: #142B9E; --paper: #F6F1E7; --yellow: #FFC53D; --dim: #B9C4F6;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --text: 'Schibsted Grotesk', system-ui, sans-serif;
  --gutter: 20px; --panel: #D3DAF7;  /* pale blue, for the dropdowns and the calendar: the cream was glaring against the blue page (owner, 2026-10-24; sands were tried and dropped) */
}
@media (prefers-color-scheme: dark) {  /* follows the visitor's system setting; no toggle (owner) */
  :root { --blue: #0E1531; --deep: #1D2858; --dim: #A6B1E0; --panel: #BDB7AC; --yellow: #EBBA4E; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--blue); }
body {
  max-width: 760px; margin-inline: auto; padding-inline: var(--gutter);
  background: var(--blue); color: var(--paper); font: 500 16px/1.35 var(--text);
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.top { --pb: 12px; position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding-block: 22px var(--pb); }
.motto {
  position: absolute; right: 0; bottom: var(--pb); transform: skewX(-8deg);  /* its baseline is the tagline's: the same distance from the header's bottom edge as the header's padding (tied to it, 2026-10-23: a fixed 18.5px was 11px high once the phone padding became 8px) */
  font: italic 400 10.5px/1 var(--text); letter-spacing: .3px; color: rgb(200 203 220 / .38);
}
h1 span { display: block; font: 900 clamp(46px, 13vw, 96px)/.82 var(--display); text-transform: uppercase; }
h1 .wm { text-transform: lowercase; font-size: clamp(46px, 12.4vw, 88px); letter-spacing: -.0045em; }  /* 88px on desktop: the header is under 20% of a 720px laptop screen and the fourth event shows (measured 2026-10-22); the slides keep 112px */  /* the slides use -0.5px at 112px: the same proportion at every size */
h1 .wm i { font-style: normal; color: var(--yellow); }
h1 .wm em { text-transform: uppercase; font: 800 .46em/1 var(--display); font-style: normal; letter-spacing: .1em; margin-left: .5em; color: var(--paper); position: relative; top: -.263em; }  /* white, 27% of the wordmark (the slides use 36%), centred on the body of its lowercase letters: shift = (0.305 - 0.4 r) / r of its own size */
h1 small { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--yellow);
  font: 800 clamp(20px, 3.7vw, 26px)/1 var(--display); text-transform: uppercase; letter-spacing: 1px; }  /* grows with the wordmark (clamp(46px, 12.4vw, 88px)): about 30% of its size, never under 20px */
h1 small svg { width: .9em; height: .9em; fill: currentColor; }
h1 small .masks { width: 1.55em; height: 1.55em; margin-block: -.23em; }  /* comedy laughing, tragedy in despair, cut-outs in the background colour; the margin keeps the line height, so the motto stays level with the tagline */
.masks .cut { fill: none; stroke: var(--blue); stroke-width: 1.3; stroke-linecap: round; }
.masks .edge { stroke: var(--blue); stroke-width: 1.4; }
.masks .hole { fill: var(--blue); }
.lang { flex: none; display: flex; gap: 12px; padding-top: 6px; font-weight: 700; letter-spacing: 1px; }
.lang a { color: var(--dim); text-decoration: none; }
.lang a[aria-current] { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }

.strip { position: sticky; top: 0; z-index: 2; }
.days {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter); background: var(--blue);
  border-bottom: 2px solid var(--deep);
}
.days::-webkit-scrollbar { display: none; }
.days button {
  flex: none; padding: 8px 12px; border: 0; border-radius: 3px; background: none; cursor: pointer;
  font: 800 19px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; color: var(--dim);
}
.days button[aria-pressed="true"] { background: var(--paper); color: var(--blue); }
.days .sep { flex: none; width: 2px; margin-inline: 4px; background: var(--deep); }
/* The calendar icon stands in for "Tudo", at the same height as the text buttons; chosen, it holds the day's number and grows into the same box. */
.days .cal { display: grid; place-items: center; padding: 6px 10px; line-height: 0; }
.days .cal svg { width: calc(1.05em + 4px); height: calc(1em + 4px); }
.days .cal[aria-pressed="true"] { padding-block: 2px; }
.days .cal[aria-pressed="true"] svg { width: calc(1.15em + 8px); height: calc(1em + 12px); }
.calpop {
  position: absolute; z-index: 3; top: calc(100% + 4px); right: var(--cal-right, 0); width: 340px; padding: 6px 10px 10px;
  border-radius: 8px; background: var(--panel); color: var(--blue);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 2px 6px rgb(0 0 0 / .2), 0 14px 40px rgb(0 0 0 / .45);  /* a soft edge, not the dropdowns' hard ring (owner, 2026-10-24) */
}
.calpop .head { display: flex; align-items: center; justify-content: space-between; font: 800 22px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; }
.calpop .head button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--blue); cursor: pointer; }
.calpop .head svg { width: 14px; height: 10px; }
.calpop .prev svg { transform: rotate(90deg); }
.calpop .next svg { transform: rotate(-90deg); }
.calpop .head button:disabled { opacity: .2; cursor: default; }
.calpop .weekdays, .calpop .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calpop .weekdays span { padding: 4px 0 8px; text-align: center; font: 700 14px/1 var(--text); letter-spacing: .5px; opacity: .7; }
.calpop .grid button {
  display: flex; align-items: center; justify-content: center; justify-self: center; width: 100%; max-width: 46px; aspect-ratio: 1;  /* a circle: hover, today's ring and the chosen day */
  border: 0; border-radius: 50%; background: none; color: var(--blue); font: 700 17px/1 var(--text); cursor: pointer;
}
.calpop .grid button:disabled { opacity: .25; font-weight: 500; cursor: default; }
.calpop .grid .today { box-shadow: inset 0 0 0 1.5px var(--blue); }
.calpop .grid button:hover:not(:disabled) { background: rgb(27 59 214 / .1); }
.calpop .grid button[aria-pressed="true"] { background: var(--blue); color: var(--paper); }

.tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 4px 6px; }  /* 4 px above the search (was 14; owner, 2026-10-30: a lot of space) */
@media (max-width: 600px) {  /* phones: the header is about 11% of the screen and the first events start higher (measured 2026-10-22: header 126px -> 92px at 390x844); tap targets unchanged */
  .top { --pb: 8px; padding-block: 18px var(--pb); }
  .calpop { left: -8px; right: -8px; width: auto; }  /* 12 px from each screen edge */
  .days { justify-content: space-between; }  /* spread edge to edge, in line with the search box and the filters below; the fitting hides the same days */
  h1 small { margin-top: 6px; }
  .tools { padding-block: 4px 6px; gap: 10px; }
}
.search { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--dim); }
.search:focus-within { border-bottom-color: var(--paper); }
.search svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--paper); stroke-width: 2.4; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; padding: 8px 0; border: 0; border-radius: 0; background: none; font-size: 17px; outline: none; }
.search input::placeholder { color: rgb(185 196 246 / .6); font-size: 15px; }  /* the typed text stays 17 px (16 or more keeps iOS from zooming in on focus) */
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search .clear { display: none; margin: -14px -6px -14px 0; padding: 14px 6px; line-height: 0; cursor: pointer; }
.search .clear svg { width: 14px; height: 14px; }
.search.set .clear { display: block; }
.row { display: flex; gap: 4px; }
.pick { position: relative; flex: 1 1 auto; min-width: 0; }
.pick:not(.set) { flex-shrink: 0; }  /* only filters in use shorten their label */
.pick summary {
  display: flex; align-items: center; gap: 5px; padding: 6px 8px 6px 9px; border: 1.5px solid var(--dim);
  border-radius: 3px; background: none; cursor: pointer; font-size: 14px; color: var(--paper); white-space: nowrap;
}
.pick summary { list-style: none; }
.pick summary::-webkit-details-marker { display: none; }
.pick summary span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pick svg { flex: none; }
.pick .caret { width: 11px; height: 8px; }
.pick .clear { display: none; margin: -7px -8px -7px -2px; padding: 7px 8px 7px 4px; line-height: 0; cursor: pointer; }
.pick .clear svg { width: 11px; height: 11px; }
.pick.set .caret { display: none; }
.pick.set .clear { display: block; }
.pick[open] .caret { transform: rotate(180deg); }
.pick[open] summary { border-color: var(--paper); }
.pick.set summary { border-color: var(--yellow); color: var(--yellow); }
.panel {
  position: absolute; z-index: 3; left: 0; top: calc(100% + 4px);
  min-width: 100%; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); max-height: 55vh; overflow-y: auto;
  padding: 4px 0; border-radius: 3px; background: var(--panel); color: var(--blue); box-shadow: 0 0 0 2px var(--deep);
}
.pick:last-of-type .panel { left: auto; right: 0; }
.pick:not([open]) .panel { display: none; }
.panel button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px; width: 100%;
  padding: 6px 12px; border: 0; background: none; cursor: pointer; color: var(--blue); font-size: 14px; text-align: left;
}
.panel button:hover { background: rgb(27 59 214 / .1); }
.panel button[aria-pressed="true"], .panel button[aria-pressed="true"]:hover { background: rgb(27 59 214 / .16); font-weight: 700; }
.panel .reset { justify-content: flex-start; gap: 7px; margin-bottom: 4px; border-bottom: 1px solid rgb(27 59 214 / .2); }
.panel .reset svg { width: 10px; height: 10px; }
.panel small { font-size: 12px; opacity: .6; }

.count { padding-block: 18px 0; color: var(--dim); font-size: 14px; letter-spacing: .5px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 52px 20px 56px; text-align: center; }
.empty .icon { width: 34px; height: 34px; fill: none; stroke: var(--dim); stroke-width: 1.8; stroke-linecap: round; }
.empty .head { font: 800 22px/1.25 var(--display); text-transform: uppercase; letter-spacing: .3px; }
.empty .filters { color: var(--dim); font-size: 14px; }
.empty .filters:empty { display: none; }
.empty .go {
  min-height: 44px; margin-top: 6px; padding: 0 20px; border: 1.5px solid var(--dim); border-radius: 3px;
  background: none; cursor: pointer; color: var(--paper); font: 700 14px/1 var(--text);
}
.empty .go[hidden] { display: none; }
.empty .go[data-act="q"] { border-color: var(--yellow); color: var(--yellow); }
#list h2 {
  padding-block: 26px 10px; border-bottom: 3px solid var(--paper);
  font: 800 28px/1 var(--display); text-transform: uppercase;
}
.ev {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 16px;
  margin-inline: calc(-1 * var(--gutter)); padding: 14px var(--gutter); border-bottom: 2px solid var(--deep);
}
.ev:hover, .ev:active { background: var(--deep); }
.ev h3 { font-size: 19px; line-height: 1.15; font-weight: 700; overflow-wrap: anywhere; }
.ev .open { text-decoration: none; }
.ev .open::after { content: ""; position: absolute; inset: 0; }
.ev .open span { color: var(--dim); font-weight: 500; }
.meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; margin-top: 6px; color: var(--dim); font-size: 15px; }
.meta a { position: relative; z-index: 1; text-decoration: none; }
.meta .venue { color: var(--yellow); font-weight: 700; }
.meta .food { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; color: var(--yellow); }  /* inside .who: it stays with the venue name, not with the pin */
.meta a.venue:hover, .place:hover, .tickets:hover { text-decoration: underline; text-underline-offset: 3px; }
.place { white-space: nowrap; padding-block: 5px; margin-block: -5px; }  /* a taller tap area (30 px) for the map link, same layout */
.place svg { width: 13px; height: 13px; margin-right: 2px; vertical-align: -1px; }
.tickets { color: var(--yellow); font-size: 13px; font-weight: 700; white-space: nowrap; }
.tickets svg { width: 1.1em; height: 1.1em; vertical-align: -.2em; margin-right: .32em; }  /* a ticket, or a calendar for a restaurant's reservation: the arrow after the title already means "opens" (owner, 2026-10-23) */
.meta em {
  display: inline-block; padding: 0 7px; border: 1px solid var(--dim); border-radius: 999px;
  font-style: normal; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; vertical-align: 1px;
}
/* the run ("até 13 dez · qua–dom") flows in the meta line after the neighbourhood; its details open from the round button */
.runs { white-space: nowrap; }
.runs svg { width: 13px; height: 13px; margin-right: 3px; vertical-align: -1px; }
.run { position: relative; z-index: 1; margin-top: 4px; color: var(--dim); font-size: 14px; }
.run p { margin-top: 6px; color: var(--paper); line-height: 1.45; }
.run .cast { color: var(--dim); }
.run .syn { display: inline-block; padding: 3px 0; color: var(--yellow); font-size: 13px; font-weight: 700; }  /* the synopsis opens the event's own page (Teatro only, owner 2026-11-02): a plain text link, no pill (owner); the padding keeps the tap target at 24 px (WCAG 2.5.8) */
.when { display: flex; flex-direction: column; align-items: flex-end; text-align: right; color: var(--yellow); font: 800 26px/1 var(--display); }
/* the run's open/close control: same place on every row, a 44 px touch target (owner, 2026-10-19) */
.more {
  position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 12px;
  border: 1.5px solid rgb(185 196 246 / .55); border-radius: 50%; background: none; color: var(--paper); cursor: pointer;
}
.more::after { content: ""; position: absolute; inset: -7px; }  /* a 44 px touch target around the 30 px circle (WCAG 2.5.8, Apple/Google 44-48) */
.more:hover { border-color: var(--paper); }
.when .more svg { width: 11px; height: 7px; color: inherit; transition: transform .15s; }  /* not the 28 px of .when svg (the clock) */
.more[aria-expanded="true"] { background: var(--paper); border-color: var(--paper); color: var(--blue); }
.when .more[aria-expanded="true"] svg { transform: rotate(180deg); }
.when time { display: block; }
.when time + time { margin-top: 4px; }
.when svg { width: 28px; height: 28px; color: var(--dim); }

.foot { display: flex; justify-content: space-between; gap: 12px; padding-block: 40px 32px; color: var(--dim); font-size: 13px; }
.foot a { color: var(--paper); font-weight: 700; text-decoration: none; }
.foot a svg { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }

@media (min-width: 700px) {
  .row { gap: 8px; }
  .pick summary { gap: 6px; padding: 6px 10px 6px 12px; }
  :root { --gutter: 32px; }
  .motto { font-size: 11.5px; }
  .ev h3 { font-size: 21px; }
  .when { font-size: 30px; }
}

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 440px) {
  .days .cal { padding-inline: 9px; }
  .days { gap: 4px; }
  .days button { padding: 8px 6px; font-size: 17px; }
  .days .sep { margin-inline: 1px; }
}
@media (max-width: 370px) {
  .pick summary { gap: 4px; padding: 6px 6px 6px 8px; font-size: 13px; }
  .days button { padding: 8px 5px; font-size: 16px; }
}

/* ---- the map view (map.js; only pages whose city has a map) ---- */
.countrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 8px 10px; }  /* 10 px less above than the count had alone, 10 px of air below the switch */
.countrow .count { padding: 0; }
.views { display: none; }
.has-map .views {
  display: flex; gap: 2px; padding: 2px; border: 1px solid var(--dim); border-radius: 999px;
}
.views button {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 23px; padding: 0 9px; border: 0; border-radius: 999px;
  background: none; color: var(--dim); cursor: pointer; font: 800 14px/1 var(--display); letter-spacing: 1px; text-transform: uppercase;
}
.views button::after { content: ""; position: absolute; inset: -10.5px -2px; }  /* a 44 px touch target around the 23 px pill (WCAG 2.5.8, Apple/Google 44) */
.views button[aria-pressed="true"] { background: var(--paper); color: var(--blue); }
.views svg { width: 14px; height: 14px; }

.mapview { display: none; position: relative; margin-inline: calc(var(--gutter) * -1); }
body.view-map .mapview { display: block; }
.mapframe {
  --land: color-mix(in srgb, #fff 7%, var(--blue)); --water: color-mix(in srgb, #000 38%, var(--blue));
  position: relative; width: 100%; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: var(--blue);  /* the width is set so a minimum height cannot widen the box through its aspect ratio */
}
.mapframe .base { position: absolute; top: 0; left: 0; width: 100%; height: auto; overflow: visible; display: block; }  /* sized by the width; the water runs on below the city when the frame is taller */
.base .land { fill: var(--land); }
.base .water { fill: var(--water); }
.base .edge { fill: none; stroke: var(--yellow); stroke-width: 1.4; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .7; vector-effect: non-scaling-stroke; }
.base .roads path { fill: none; stroke: var(--paper); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.base .minor { opacity: .14; stroke-width: .8; }
.base .main { opacity: .22; stroke-width: 1.3; }
.base .major { opacity: .4; stroke-width: 2; }
.pins { position: absolute; inset: 0; }
.pin {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  padding: 0; border: 2px solid var(--blue); border-radius: 50%; background: var(--yellow); color: var(--blue); cursor: pointer;
  box-shadow: 0 0 0 4px rgb(255 197 61 / .28); font: 900 14px/1 var(--display);
}
.pin.ghost { opacity: .25; box-shadow: none; cursor: default; pointer-events: none; }
.pin.sel { outline: 3px solid var(--paper); outline-offset: 2px; }
.plabel {
  position: absolute; left: 0; top: 0; font: 800 12px/14px var(--display); letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
  color: var(--paper); text-shadow: 0 0 3px var(--blue), 0 0 3px var(--blue), 0 0 2px var(--blue); pointer-events: none;
}
.zoom { position: absolute; bottom: 12px; right: 12px; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; background: var(--paper); }
.zoom button { width: 44px; height: 44px; border: 0; background: none; color: var(--blue); cursor: pointer; font: 700 26px/1 var(--text); }
.zoom button + button { border-top: 1px solid rgb(27 59 214 / .2); }

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 62%; overflow-y: auto; padding: 10px var(--gutter) 8px;
  border-radius: 18px 18px 0 0; background: var(--deep); box-shadow: 0 -10px 30px rgb(0 0 0 / .35);
}
.sheet .grab { width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--dim); opacity: .5; }
.sheet > h3 { padding-right: 44px; color: var(--yellow); font: 800 26px/1 var(--display); letter-spacing: .5px; text-transform: uppercase; }
.sheet .sub { margin: 4px 0 6px; color: var(--dim); font-size: 14px; }
.sheet .sub a { margin-left: 8px; color: var(--paper); }
.sheet .x {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; margin: -5px -5px 0 0;
  border: 0; background: none; color: var(--paper); cursor: pointer;
}
.sheet .x svg { width: 14px; height: 14px; }
.sheet .ev:hover, .sheet .ev:active { background: none; }
.sheet .ev { border-bottom-color: rgb(255 255 255 / .12); }

/* the map replaces the list while the map button is pressed */
body.view-map #list { display: none; }
@media (min-width: 700px) {
  .views button { height: 27px; padding: 0 11px; font-size: 15px; }  /* larger than the phone's 19 px pill (owner, 2026-10-30: 22/13 and 24/14 looked alike, 30/16 was a bit too big) */
  .views button::after { inset: -8.5px -2px; }
  .views svg { width: 15px; height: 15px; }
  .mapview { margin-inline: 0; }
  .mapframe { border: 1px solid var(--dim); border-radius: 8px; }
}
@media (max-width: 1099px) {
  .sheet { position: fixed; z-index: 6; max-height: 58svh; border-radius: 18px 18px 0 0; }  /* a bottom sheet over the page, as on a phone's own maps */
}
@media (min-width: 1100px) {
  .sheet { left: 12px; right: 12px; bottom: 12px; max-height: 58%; border-radius: 12px; }  /* on a wide screen the panel is a card floating over the foot of the map */
}