/*
 * OFFLINE/GENOVA — typography-first, image-optional. Mobile first (designed at 390 px).
 * Images are never needed by the composition: they only appear as small optional
 * thumbnails (and as a secondary document in the detail view). If every image
 * disappeared, every layout here would still hold.
 */

:root {
  --paper: #f2efe8;
  --paper-2: #e6e1d6;
  --ink: #151515;
  --ink-2: #4f4c47;
  --ink-3: #8a867d;
  --rule: #d4cec2;
  --accent: #2d4a78;
  --dark-rule: rgba(242, 239, 232, 0.16);
  --dark-mute: #a7a298;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --pad: 16px;
  --max: 1360px;
  --thumb: 60px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.more {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 14px 0;        /* >= 44 px touch target */
  display: inline-block;
}

.note {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 16px;
}

.loading,
.empty {
  padding: 48px var(--pad);
  color: var(--ink-2);
  font-size: 16px;
}

/* Compact layouts: long venue lists (up to 10 places on some sources) stay at 2 lines;
   the full text is always in the detail view. */
.at-meta,
.index-meta,
.agenda-meta,
.closing-meta,
.row-meta {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

a:hover .at-title,
a:hover .index-title,
a:hover .agenda-title,
a:hover .closing-title,
a:hover .row-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

/* Text columns may shrink below their longest word (e.g. "CONGRESSONAZIONALE"),
   so overflow-wrap can break it instead of overflowing into the thumbnail. */
.at-body,
.index-body,
.closing-body,
.row-body,
.agenda-item {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------------------------------------------------------------- images */

.pic {
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
}

.pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.pic.loaded img { opacity: 1; }

/* Optional thumbnail: small, square, always last column of its row. */
.thumb {
  width: var(--thumb);
  height: var(--thumb);
  flex: none;
}

/* -------------------------------------------------------------- masthead */

.masthead {
  /* Sticky header: always visible while scrolling, same look. Its paper background spans the full window width
     (so wide bands never show through at the sides) because the header box itself is full width; the side padding
     keeps the content on the same centred var(--max) column as before.
     HOTFIX iPad (v2.32): NO giant box-shadow + clip-path any more - on iOS Safari the sticky header, composited
     while scrolling / after a rotation, painted its 100vmax paper shadow unclipped over the whole page (blank page,
     header still visible). */
  padding: 16px max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))) 0;
  padding-top: max(16px, env(safe-area-inset-top));
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
}

.masthead-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

/* Header logo OFFLINE/GENOVA: the image as supplied (no filters/effects), original aspect ratio, compact. */
.brand {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  line-height: 0;
}

.brand-logo {
  display: block;
  width: clamp(140px, calc(100vw - 213px), 232px);   /* phones: leaves room for CERCA + date (3 lines at most) */
  max-width: 100%;
  height: auto;
}

.today-label {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.45;
  text-align: right;
}

.nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 18px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

.nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.nav a + a { border-left: 1px solid var(--rule); }

.nav a.is-active {
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
}

main {
  max-width: var(--max);
  margin: 0 auto;
}

/* ------------------------------------------------------ opening = OGGI */

.opening {
  padding: 28px var(--pad) 56px;
}

.open-title {
  margin-top: 10px;
  font-size: clamp(112px, 37vw, 320px);
  font-weight: 600;
  line-height: 0.78;
  letter-spacing: -0.05em;
  margin-left: -0.03em;
  text-transform: uppercase;
}

.open-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
  padding-top: 10px;
  border-top: 1px solid var(--ink);
}

.open-num {
  font-size: clamp(56px, 17vw, 120px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.open-unit {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.open-aside {
  display: inline-block;
  margin-top: 4px;
  padding: 12px 0;        /* >= 44 px touch target */
  font-size: 15px;
  color: var(--accent);
}

.open-agenda { margin-top: 36px; }

.open-empty {
  font-size: 18px;
  color: var(--ink-2);
  border-top: 1px solid var(--ink);
  padding-top: 16px;
}

.agenda-today { border-top: 1px solid var(--ink); }

.at-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0 17px;
  border-bottom: 1px solid var(--rule);
}

.at-time {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.at-time.is-open { color: var(--ink-3); font-weight: 400; }

/* Several slots in one day: one per line, a little air between them. */
.at-slot { display: block; }
.at-slot + .at-slot { margin-top: 6px; }

/* "Tutto il giorno", "Vedi programma", "Orari di apertura": a discreet label, not a time. */
.at-time.is-label {
  padding-top: 3px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.at-body { display: grid; gap: 5px; min-width: 0; }

.at-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.at-meta { font-size: 14px; color: var(--ink-2); }
.at-meta:empty { display: none; }

.at-src {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* -------------------------------------------------------------- sections */

.sec {
  padding: 48px var(--pad) 56px;
  border-top: 1px solid var(--ink);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.section-title {
  font-size: clamp(60px, 18vw, 150px);
  font-weight: 600;
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.section-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
}

.section-count,
.section-sub {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.section-count { color: var(--ink); font-weight: 700; }
.section-aside .more { margin-left: auto; }

/* -------------------------------------------------------------- weekend */

.sec-weekend {
  background: var(--paper-2);
  border-top: 0;
}

.sec-weekend .pic { background: #d9d3c6; }

.wk-block { display: grid; }

.wk-title {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  font-size: clamp(60px, 18vw, 150px);
  font-weight: 600;
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.wk-count {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 26px;
  border-top: 1px solid var(--ink);
  padding-top: 8px;
}

.wk-num {
  font-size: clamp(120px, 40vw, 280px);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

.wk-unit {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wk-block .more { justify-self: start; margin-top: 4px; }

.index {
  margin-top: 36px;
  border-top: 1px solid var(--ink);
}

.index-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid rgba(21, 21, 21, 0.14);
}

.index-item[data-has-image] { grid-template-columns: 30px minmax(0, 1fr) var(--thumb); gap: 10px 12px; }

.index-n {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.index-body { display: grid; gap: 4px; min-width: 0; }

.index-when {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.index-title {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.18;
  overflow-wrap: break-word;
}

.index-meta { font-size: 13px; color: var(--ink-2); }

/* ---------------------------------------------------------- next days */

.agenda { border-top: 1px solid var(--ink); }

.agenda-day {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 0 8px;
  border-bottom: 1px solid var(--rule);
}

.agenda-date {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.agenda-dow,
.agenda-mon {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.agenda-mon { color: var(--ink-3); }

.agenda-num {
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -0.04em;
  margin: 4px 0 4px -2px;
  font-variant-numeric: tabular-nums;
}

.agenda-item {
  display: grid;
  gap: 4px;
  padding: 2px 0 14px;
}

.agenda-title { font-size: 18px; font-weight: 500; line-height: 1.2; overflow-wrap: break-word; }
.agenda-meta { font-size: 13px; color: var(--ink-3); }

/* ------------------------------------------------------------- in corso */

.sec-ongoing {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}

.sec-ongoing .section-sub { color: var(--dark-mute); }
.sec-ongoing .section-count { color: var(--paper); }
.sec-ongoing .more { color: #9fb4d8; }
.sec-ongoing .pic { background: #262626; }

.closing { border-top: 1px solid var(--paper); }

.closing-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--dark-rule);
}

.closing-item[data-has-image] { grid-template-columns: 58px minmax(0, 1fr) var(--thumb); }

.closing-date {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.closing-label,
.closing-mon {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-mute);
  white-space: nowrap;
}

.closing-num {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.04em;
  margin: 4px 0 3px -1px;
  font-variant-numeric: tabular-nums;
}

.closing-body { display: grid; gap: 5px; min-width: 0; padding-top: 1px; }

.closing-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.closing-meta { font-size: 13px; color: var(--dark-mute); }

/* --------------------------------------------------------------- teatri */
/* Paper section; same grammar as "In corso": big date, title, venue · times, replicas. */

.stage { border-top: 1px solid var(--ink); }

.stage-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.stage-item[data-has-image] { grid-template-columns: 58px minmax(0, 1fr) var(--thumb); }

.stage-date { display: flex; flex-direction: column; line-height: 1; }

.stage-dow,
.stage-mon {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.stage-num {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.04em;
  margin: 4px 0 3px -1px;
  font-variant-numeric: tabular-nums;
}

.stage-body { display: grid; gap: 5px; min-width: 0; padding-top: 1px; }

.stage-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: break-word;
}

a:hover .stage-title { text-decoration: underline; text-underline-offset: 3px; }

.stage-meta { font-size: 13px; color: var(--ink-2); overflow-wrap: break-word; }
.stage-more { font-size: 12px; color: var(--ink-3); }

.stage-full { margin-top: 8px; }

/* -------------------------------------------------------------- archive */

.archive-link {
  display: grid;
  gap: 14px;
}

.archive-num {
  font-size: clamp(110px, 36vw, 260px);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -0.06em;
}

.archive-text { display: grid; gap: 8px; }

.archive-title {
  font-size: clamp(32px, 9vw, 64px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.archive-sub { font-size: 15px; color: var(--ink-2); }

.archive-link:hover .archive-title { color: var(--accent); }

/* ------------------------------------------------------------ list view */

.list-view { padding-bottom: 56px; }

.list-head { padding: 36px var(--pad) 20px; }

.list-title {
  font-size: clamp(48px, 14vw, 120px);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.list-count {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.controls { padding: 0 var(--pad); }

.tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.1;
}

.tab.is-active {
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.cat-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 8px 0 4px;
}

.select-wrap { position: relative; }

.select-wrap::after {
  content: "↓";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
}

.cat-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 46px;
  padding: 0 24px 0 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px; /* >= 16px: no iOS zoom on focus */
}

.rows {
  margin-top: 20px;
  border-top: 1px solid var(--ink);
}

.row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  padding: 16px var(--pad);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

.row[data-has-image] { grid-template-columns: 52px minmax(0, 1fr) var(--thumb); }

.row-date {
  display: flex;
  flex-direction: column;
  line-height: 1;
  padding-top: 2px;
}

.row-dow,
.row-mon {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.row-dow { white-space: nowrap; }
.row-mon { color: var(--ink-3); }

.row-num {
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.04em;
  margin: 3px 0 3px -1px;
  font-variant-numeric: tabular-nums;
}

.row-body { display: grid; gap: 4px; min-width: 0; }

.row-kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.row-kicker:empty { display: none; }

.row-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

.row-meta { font-size: 13px; color: var(--ink-2); }
.row-meta:empty { display: none; }

.row-src {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.row-pic { width: var(--thumb); height: var(--thumb); }

/* ---- OGGI page: three groups (appointments / cinema / ongoing), one hierarchy level
   below the page title: uppercase medium title on a black rule, count and link aside. */
.today-group { margin-top: 44px; }

.group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 2px;
  margin: 0 var(--pad) 12px;
}

.group-title {
  font-size: clamp(26px, 7vw, 44px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-right: auto;
}

.group-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.group-head .more { flex-basis: 100%; padding: 10px 0 4px; }

.today-group > .agenda-today { margin: 0 var(--pad); }
/* Rows (IN CORSO) aligned with the other groups: rule and text inside the page gutter. */
.today-group .rows { margin: 0 var(--pad); }
.today-group .row { padding-left: 0; padding-right: 0; }

.today-cinema { padding: 0 var(--pad); }
.today-cinema .group-head { margin-left: 0; margin-right: 0; }
.today-cinema .film-strip { border-top: 1px solid var(--ink); padding-top: 16px; }

.film-card-next { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---- global search: AL CINEMA block above the events of the catalogue */
.search-cinema { margin-top: 28px; }
.film-card-where { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.results-head { margin-top: 44px; }

/* ---- catalogue: search, period tabs, category nav, filter state */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.catalog-controls { padding: 0 var(--pad); }

.search { position: relative; margin: 4px 0 18px; }

.search-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 48px 0 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 18px;               /* >= 16px: no zoom on iOS focus */
  -webkit-appearance: none;
  appearance: none;
}
.search-input::placeholder { color: var(--ink-3); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-input:focus { outline: none; border-bottom-width: 2px; border-bottom-color: var(--accent); }

.search-clear {
  position: absolute;
  right: 0;
  top: 4px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.search-clear[hidden] { display: none; }
.search-clear:focus-visible, .cat-link:focus-visible, .tab:focus-visible, .reset-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Categories: one row, scrollable inside itself on mobile (the page never scrolls sideways). */
.cat-nav {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(-1 * var(--pad));
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--rule);
  -webkit-overflow-scrolling: touch;
}
.cat-nav::-webkit-scrollbar { display: none; }

.cat-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.cat-link:first-child { padding-left: 0; }
.cat-link.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.cat-link.is-empty { color: var(--ink-3); }
.cat-n { margin-left: 6px; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.filter-state { display: flex; justify-content: flex-end; }
.reset-link {
  display: inline-block;
  padding: 12px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.catalog .rows { margin-top: 12px; }

.empty-state { padding: 40px var(--pad) 8px; }
.empty-title { font-size: clamp(24px, 6vw, 36px); font-weight: 600; line-height: 1.05; text-transform: uppercase; }
.empty-hint { margin: 10px 0 6px; color: var(--ink-2); }

/* Header access to the search. */
.masthead-aside { display: flex; align-items: flex-end; gap: 18px; }
.search-link {
  padding: 4px 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
}

.load-more {
  display: block;
  width: calc(100% - 2 * var(--pad));
  margin: 24px var(--pad) 0;
  min-height: 52px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.load-more:active { background: var(--paper-2); }

.list-view .note { padding: 0 var(--pad); }
.list-view .empty { padding: 32px var(--pad); }

/* --------------------------------------------------------------- detail */

.detail-top { padding: 10px var(--pad); }

.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.detail-head {
  padding: 16px var(--pad) 0;
  max-width: 1100px;
}

.detail-title {
  margin-top: 16px;
  font-size: clamp(38px, 10.5vw, 96px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}

.detail-title.is-long { font-size: clamp(30px, 8vw, 64px); }

.detail-venue {
  margin-top: 18px;
  font-size: 17px;
  color: var(--ink-2);
}

.detail-body {
  padding: 32px var(--pad) 56px;
  display: grid;
  gap: 40px;
}

.detail-desc {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  max-width: 36em;
  border-top: 1px solid var(--ink);
  padding-top: 20px;
  overflow-wrap: break-word;
}

/* The image is a secondary document here (often a poster): small, never upscaled. */
.detail-pic {
  background: transparent;
  margin-bottom: 20px;
}

.detail-pic img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 340px;
}

.detail-info dl { border-top: 1px solid var(--ink); }

.info-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.info-row dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}

.info-row dd {
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: break-word;
}

/* Detail: DOVE (name, room/detail under it, several places one per line). */
.place { display: grid; gap: 2px; }
.place-detail { font-size: 13px; color: var(--ink-3); }
.map-link { border-bottom: 1px solid currentColor; }

/* Detail: hours of named dates (24 set · 10:00–12:00 / 15:00–18:00). */
.day-hours { display: grid; gap: 10px; }
.dh-day { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
.dh-date {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 2px;
}
.dh-slots { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }

.detail-actions {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--accent); border-color: var(--accent); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:active { background: var(--paper-2); }

/* ------------------------------------------------------------- colophon */

.colophon {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px var(--pad) 40px;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 24px;
  color: var(--ink-3);
}

.colophon:empty { display: none; }

/* Colophon: deliberately quiet, like the small print at the end of a magazine. */
.colo-brand {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 700;
  font-stretch: 115%;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--ink-3);
}

.colo-col {
  display: grid;
  gap: 8px;
  align-content: start;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

.colo-col .kicker { font-size: 10px; color: var(--ink-3); }

.colo-col ul { border-top: 1px solid var(--rule); }

.colo-col li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Phones only: slightly smaller OGGI, slightly larger weekend thumbnails. */
@media (max-width: 719px) {
  .open-title { font-size: clamp(102px, 33.5vw, 240px); }
  .sec-weekend { --thumb: 72px; }
}

/* ===================================================== tablet / desktop */

@media (min-width: 720px) {
  :root { --pad: 28px; --thumb: 72px; }

  .brand-logo { width: 272px; }

  .nav {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
  }

  .nav a { padding: 0 22px; }
  .nav a:first-child { padding-left: 0; }

  .section-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
  }

  .section-aside {
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }

  .section-aside .more { margin-left: 0; }

  .at-item { grid-template-columns: 110px minmax(0, 1fr); gap: 20px; }
  .at-time { font-size: 20px; }
  .at-time.is-label { font-size: 12px; }
  .at-title { font-size: 24px; }

  .closing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }

  .stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }
  .stage-title { font-size: 20px; }

  .row { grid-template-columns: 72px minmax(0, 1fr); gap: 24px; }
  .row[data-has-image] { grid-template-columns: 72px minmax(0, 1fr) var(--thumb); }
  .row-num { font-size: 40px; }
  .row-title { font-size: 20px; }

  .controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    align-items: end;
  }

  .cat-row { padding: 0; }
  .controls > .note { grid-column: 1 / -1; margin-top: 0; }

  .detail-actions { grid-template-columns: 1fr 1fr; }

  .colophon { grid-template-columns: 1.2fr 2.4fr; }       /* logo | come funziona (no sources column since 05/10/2026) */
  .colophon .colo-col { max-width: 40em; }
}

@media (min-width: 1024px) {
  :root { --pad: 40px; }

  /* Hero sections (OGGI, weekend): typographic column left, list right.
     The left track is never narrower than the giant OGGI (2.47em of its font-size,
     glyph ink included), so the title cannot reach the right column at any width;
     the 44px gutter plus that margin leaves >= ~55px of real space. */
  :root {
    --hero-gap: 44px;
    --hero-min: calc(2.47 * clamp(140px, 15vw, 240px));
  }

  /* Opening: giant OGGI + count on the left, agenda on the right. */
  .opening {
    display: grid;
    grid-template-columns: minmax(var(--hero-min), 5fr) minmax(0, 7fr);
    gap: 0 var(--hero-gap);
    padding-top: 48px;
    padding-bottom: 80px;
    align-items: start;
  }

  .open-intro {
    grid-column: 1;
    position: sticky;
    top: calc(var(--masthead-h, 0px) + 24px);
  }

  .open-title { font-size: clamp(140px, 15vw, 240px); }
  .open-num { font-size: clamp(72px, 7vw, 112px); }

  .open-agenda { grid-column: 2; margin-top: 0; }

  .sec { padding: 72px var(--pad) 80px; }

  /* Weekend: typographic block left, index right. */
  .sec-weekend {
    display: grid;
    grid-template-columns: minmax(var(--hero-min), 5fr) minmax(0, 7fr);
    gap: 0 var(--hero-gap);
    align-items: start;
  }

  .wk-block { grid-column: 1; position: sticky; top: calc(var(--masthead-h, 0px) + 24px); }
  .wk-title { font-size: clamp(56px, 6.2vw, 104px); }
  .wk-num { font-size: clamp(140px, 16vw, 260px); }
  .index { grid-column: 2; margin-top: 0; }
  .index-title { font-size: 22px; }

  /* Agenda: wider date column, two-column list per day. */
  .agenda-day { grid-template-columns: 160px minmax(0, 1fr); gap: 24px; }
  .agenda-num { font-size: 64px; }
  .agenda-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }

  .closing-title { font-size: 20px; }

  .archive-link {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 40px;
  }

  .list-view { max-width: 1120px; margin: 0 auto; }

  /* Detail: title spans wide; text column + sticky info (with the small image). */
  .detail-head { padding-top: 32px; }

  .detail-body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0 40px;
    align-items: start;
  }

  .detail-desc { grid-column: 1 / span 7; }
  .detail-body > .note { grid-column: 1 / span 7; }

  .detail-info {
    grid-column: 9 / -1;
    position: sticky;
    top: calc(var(--masthead-h, 0px) + 24px);
  }

  .detail-pic img { max-height: 300px; }
  .detail-actions { grid-template-columns: 1fr; }
}

/* =================================================================== CINEMA
   Same editorial language as the rest of Radar: posters are the only extra
   visual element, framed by type and rules (no rounded cards, no shadows). */

.nav { grid-template-columns: repeat(6, 1fr); }

/* ---- posters */

.poster {
  margin: 0;
  aspect-ratio: 2 / 3;
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
}

.poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* real aspect kept (posters range from 2:3 to 4:5): no crop, no stretch */
  object-position: center bottom;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.poster.loaded img { opacity: 1; }

.poster-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  border: 1px solid var(--rule);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-2);
  overflow-wrap: break-word;
}

/* ---- film card (home strip + cinema grid) */

.film-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.film-card .poster { margin-bottom: 6px; }

.film-card-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.film-card-meta { font-size: 12.5px; color: var(--ink-2); }

.film-card-count {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

a.film-card:hover .film-card-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

/* ---- home: AL CINEMA strip (horizontal scroll on phones, grid on desktop) */

.film-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 42%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--pad);
  margin: 0 calc(-1 * var(--pad));
  padding: 0 var(--pad) 8px;
  scrollbar-width: thin;
}

.film-strip > * { scroll-snap-align: start; }

/* ---- cinema page */

.cinema-view { padding-bottom: 56px; }

.day-tabs {
  display: flex;
  overflow-x: auto;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  scrollbar-width: none;
}

.day-tabs::-webkit-scrollbar { display: none; }

.day-tab {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
}

.day-tab:first-child { padding-left: 0; }

.day-tab.is-active {
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.cinema-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 20px var(--pad) 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cinema-status span + span { color: var(--ink-2); font-weight: 500; }

.film-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 14px;
  padding: 0 var(--pad);
}

.cinema-view .empty { padding: 24px var(--pad); }
.cinema-note { padding: 0 var(--pad); margin-top: 36px; }

/* ---- film detail */

.film { padding-bottom: 56px; }

.film-top {
  display: grid;
  gap: 24px;
  padding: 8px var(--pad) 0;
}

.film-poster {
  aspect-ratio: auto;
  width: min(64%, 280px);
  background: transparent;
}

.film-poster img { height: auto; }
.film-poster .poster-ph { position: relative; aspect-ratio: 2 / 3; }

.film-head .detail-title { margin-top: 12px; }

.film-facts { margin-top: 22px; border-top: 1px solid var(--ink); }

.trailer { margin-top: 22px; }
.trailer-btn { display: inline-flex; min-width: 200px; }

.trailer-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.trailer-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.where {
  margin-top: 44px;
  padding: 0 var(--pad);
}

.where-title {
  font-size: clamp(44px, 12vw, 96px);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.where .day-tabs { margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
.where .day-tab:first-child { padding-left: 0; }

.where-cinema {
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--rule);
}

.where-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.where-name a:hover { color: var(--accent); }

.where-address { margin-top: 4px; font-size: 13px; color: var(--ink-3); }

.showtimes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.showtime {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 78px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background 0.15s, color 0.15s;
}

a.showtime:hover,
a.showtime:active { background: var(--ink); color: var(--paper); }
a.showtime:hover .st-meta,
a.showtime:active .st-meta { color: var(--paper); }

.showtime.is-static { border-color: var(--rule); color: var(--ink-2); }

.st-time {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.st-meta {
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  max-width: 160px;
}

.film-synopsis {
  margin-top: 48px;
  padding: 0 var(--pad);
}

.film-synopsis .detail-desc { margin-top: 10px; }
.film-synopsis .detail-desc p + p { margin-top: 0.8em; }
.film-sources { padding: 0 var(--pad); margin-top: 28px; }

@media (max-width: 400px) {
  .nav a { font-size: 11px; letter-spacing: 0.05em; }
}

@media (min-width: 720px) {
  .nav { grid-template-columns: repeat(6, auto); }
  .film-strip { grid-auto-columns: 26%; }
  .group-head .more { flex-basis: auto; padding: 0; }
  .cat-nav { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .film-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; }

  .film-top {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 40px;
    align-items: start;
  }

  .film-poster { width: 100%; max-width: 340px; }
}

@media (min-width: 1024px) {
  .film-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow: visible;
    margin: 0;
    padding: 0;
    gap: 20px;
  }

  .film-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cinema-view, .film { max-width: 1240px; margin: 0 auto; }
  .film-synopsis .detail-desc { max-width: 38em; }
}

@media (min-width: 1280px) {
  .film-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ------------------------------------------------ PREVIEW: editorial AI layer (V1)
   Typography only: one short editorial line in cards (2 lines max), a plain "Famiglie" label,
   an editorial intro in the detail with the untouched source text just below. No badges, no colour. */
.card-summary {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
.sec-ongoing .card-summary { color: var(--dark-mute); }
/* V1.2 card hierarchy: META > TITLE > place (secondary) > editorial text. Only the place line and the
   place -> text spacing change; titles, top meta, text size and truncation are untouched. */
.at-meta,
.index-meta,
.row-meta,
.stage-meta { font-size: 12.5px; font-weight: 400; color: #6d6961; }
.closing-meta { font-size: 12.5px; font-weight: 400; color: #8e897f; }
.card-summary { margin-top: 3px; }        /* grid gap 4-5px + 3px = ~8px between place and text */
.row-summary { margin-top: 4px; }

.card-family {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.detail-lede { margin: 0; }
.source-desc { margin-top: 22px; font-family: var(--sans, inherit); }
.source-desc > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  list-style: none;
  padding: 10px 0;
  border-top: 1px solid var(--rule, rgba(0,0,0,.12));
}
.source-desc > summary::-webkit-details-marker { display: none; }
.source-desc > summary::after { content: " +"; }
.source-desc[open] > summary::after { content: " –"; }
.source-desc > p { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin-top: 6px; }

/* V1.2 "AL CINEMA" shelf: the 2:3 box is unchanged (same height); the image now fills it instead of
   letterboxing (4:5 posters left 13-38px empty). Moderate side crop, never stretched. Strip only:
   cinema grid and film detail keep object-fit: contain. */
.film-strip .poster img { object-fit: cover; object-position: center; }

/* ------------------------------------------ weekly editorial: OFFLINE / QUESTA SETTIMANA
   An editorial opening, not a card: same paper, a rule above, reading measure, Newsreader for headline and text.
   Subordinate to the giant OGGI (headline far smaller). No images, boxes, shadows or rounded corners. */
.sec-editorial { padding: 56px var(--pad) 64px; }
.ed-eyebrow,
.ed-range {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ed-range { margin-top: 6px; font-weight: 500; color: var(--ink-2); }
.ed-headline {
  margin: 28px 0 0;
  max-width: 17em;
  font-family: var(--serif);
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.ed-p {
  margin: 18px 0 0;
  max-width: 36em;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.ed-headline + .ed-text { margin-top: 26px; }
.ed-text > .ed-p:first-child { margin-top: 0; }
.ed-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-3);
}
.ed-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.ed-note { margin: 30px 0 0; max-width: 36em; font-size: 11px; line-height: 1.5; color: var(--ink-3); }

@media (min-width: 720px) {
  .sec-editorial { padding: 72px var(--pad) 88px; }
  .ed-p { font-size: 19px; }
}

@media (min-width: 1024px) {
  /* Same two tracks as the OGGI opening: label left, reading column right.
     V1.1: the left track carries the week as a small typographic anchor (so the text is not left floating),
     headline a little larger on a tighter measure, more air between headline and text and around the section. */
  .sec-editorial {
    display: grid;
    grid-template-columns: minmax(var(--hero-min), 5fr) minmax(0, 7fr);
    gap: 0 var(--hero-gap);
    padding-top: 96px;
    padding-bottom: 112px;
  }
  .ed-head { padding-top: 6px; }
  .ed-range {
    margin-top: 14px;
    font-size: clamp(26px, 2.2vw, 34px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--ink);
  }
  .ed-headline { margin-top: 0; max-width: 15em; font-size: clamp(40px, 3.6vw, 58px); line-height: 1.06; }
  .ed-headline + .ed-text { margin-top: 36px; }
  .ed-p { font-size: 20px; max-width: 34em; }
}

/* v2.56 (16/10/2026): the body of the weekly editorial in TWO typographic columns inside the right area only.
   The headline and the note stay outside, full width of the right area; the left track (label + period) and the
   band are unchanged. One flow of paragraphs (DOM order = reading order: down column 1, then column 2), balanced,
   no fixed height. Activated by the real width of the right area (container query on .ed-body, the city editorial
   only: the cinema editorial uses .cin-ed-*) on the desktop band (>= 1024px): from 620px of right area, i.e. two
   columns of at least ~290px (viewport ~1190px and wider); below, and on tablet and mobile, one column. */
.sec-editorial .ed-body { container-type: inline-size; }
@media (min-width: 1024px) {            /* desktop two-track band only: tablet and mobile keep one column */
  @container (min-width: 620px) {
    .sec-editorial .ed-text {
      column-count: 2;
      column-gap: 36px;
      column-fill: balance;
    }
    .sec-editorial .ed-text > .ed-p {
      max-width: none;
      margin: 0 0 0.8em;               /* bottom margins: no stray gap at the top of the second column */
      font-size: 19px;
      line-height: 1.58;
      widows: 2;
      orphans: 2;
    }
    .sec-editorial .ed-text > .ed-p:last-child { margin-bottom: 0; }
  }
}

/* ============================================ phones only (< 720px): nav strip + compact OGGI counts
   Desktop/tablet (>= 720px) unchanged. */
@media (max-width: 719px) {
  /* Main nav: editorial horizontal strip, natural widths, scrolls on its own (never the page). */
  .nav {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    flex: none;
    white-space: nowrap;
    padding: 0 18px;
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .nav a:first-child { padding-left: 0; }
  .nav a + a { border-left: 0; }
  /* more items than the width: the edge fades where the strip continues (set by bindNav) */
  .nav.fade-r { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
                mask-image: linear-gradient(to right, #000 82%, transparent); }
  .nav.fade-l { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent);
                mask-image: linear-gradient(to left, #000 82%, transparent); }
  .nav.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
                       mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }

  /* Counts under OGGI: one compact line "7 APPUNTAMENTI OGGI · 66 IN CORSO →". */
  .open-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    margin-top: 22px;
    padding-top: 2px;
    border-top: 1px solid var(--ink);
  }
  .open-count {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 0;
    padding: 0;
    border-top: 0;
  }
  .open-count::after { content: "·"; margin-left: 3px; color: var(--ink-2); }
  .open-num {
    font-size: 13px;
    font-weight: 600;
    line-height: inherit;
    letter-spacing: 0.12em;
  }
  .open-aside {
    margin-top: 0;
    padding: 12px 0;        /* keeps the >= 44 px touch target */
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .open-aside-and, .open-aside-what { display: none; }

  /* Short description of events: shown in full (no 2-line clamp / ellipsis); the row grows naturally. */
  .card-summary {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}

/* ------------------------------------------ AL CINEMA: weekly micro-editorial "LE NUOVE USCITE"
   Inside the AL CINEMA section, between its head and the posters: same language as the city editorial (Newsreader,
   thin underlined links, no card, box, rounded corner or gradient) but compact and clearly subordinate.
   Absent file = no block: the section is exactly as before. */
.cin-ed {
  margin: 0 0 32px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
}
.cin-ed-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cin-ed-range { display: block; margin-top: 4px; font-weight: 500; color: var(--ink-2); }
.cin-ed-headline {
  margin: 14px 0 0;
  max-width: 20em;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.cin-ed-p {
  margin: 10px 0 0;
  max-width: 36em;
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.55;
  overflow-wrap: break-word;
}
.cin-ed-headline + .cin-ed-p { margin-top: 12px; }
.cin-ed-note { margin: 14px 0 0; max-width: 36em; font-size: 11px; line-height: 1.5; color: var(--ink-3); }

/* phones/tablets: one column, "LE NUOVE USCITE · 1 OTT — 7 OTT" on one line, then headline, text, posters */
@media (max-width: 1023px) {
  .cin-ed-range { display: inline; margin-top: 0; }
  .cin-ed-range::before { content: " · "; }
  .cin-ed-headline { margin-top: 10px; font-size: 22px; }
  .cin-ed { margin-bottom: 24px; }
}

@media (min-width: 1024px) {
  /* v1.3: the MIRROR of the city editorial. The city opens to the right (label left, text right); the cinema answers
     to the left: headline + text in a wide left track, label and period in a narrow right track, aligned right. */
  .cin-ed {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);    /* text track ~ one reading measure, label track narrow */
    gap: 0 var(--hero-gap);
    margin-bottom: 40px;
  }
  .cin-ed-body { grid-column: 1; grid-row: 1; }
  .cin-ed-eyebrow { grid-column: 2; grid-row: 1; text-align: right; }
  .cin-ed-headline { margin-top: 0; font-size: 28px; }
  .cin-ed-p { font-size: 17px; max-width: 36em; }
}

/* ------------------------------------------ EDITORIAL BAND (dark) — city + cinema editorials
   A typographic band of the publication, not a card: the same near-black / ivory pair already used by "In corso"
   (--ink / --paper, --dark-mute for secondary text, --dark-rule), no radius, shadow, gradient or inner box.
   Grid and composition unchanged. Contrast on #151515: text 15.9:1, secondary 7.2:1, link hover 8.7:1. */
.sec-editorial {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}
.sec-editorial .ed-eyebrow { color: var(--paper); }
.sec-editorial .ed-range { color: var(--dark-mute); }
.sec-editorial .ed-note { color: var(--dark-mute); }

.sec-editorial .ed-link,
.cin-ed .ed-link {
  color: var(--paper);
  text-decoration-color: var(--dark-mute);
}
.sec-editorial .ed-link:hover,
.cin-ed .ed-link:hover {
  color: #9fb4d8;                       /* the link colour already used on the dark "In corso" band */
  text-decoration-color: #9fb4d8;
}
.sec-editorial .ed-link:focus-visible,
.cin-ed .ed-link:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
  text-decoration-color: var(--paper);
}

/* cinema micro-editorial: the band runs edge to edge of the AL CINEMA section (like the poster row) */
.cin-ed {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
  padding: 24px var(--pad) 28px;
}
.cin-ed-range,
.cin-ed-note { color: var(--dark-mute); }

@media (min-width: 1024px) {
  .sec-editorial .ed-range { color: var(--dark-mute); }
  .cin-ed { padding: 40px var(--pad) 44px; }
}

/* ------------------------------------------ EDITORIAL VISUAL V1: weekly cover above the dark editorial band
   One editorial object: 16:9 cover + dark band, same width, zero gap. No radius, shadow, frame, caption or
   gradient. The container is always 16:9 (the file itself is 16:9, so nothing is cropped). */
.ed-cover {
  margin: 24px 0 0;
  background: var(--ink);
}
.ed-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ed-cover + .sec-editorial { margin-top: 0; }
@media (min-width: 1024px) {
  .ed-cover { margin-top: 40px; }
}

/* Menu -> home sections: a little air above a section reached from the menu (also for any in-page anchor). */
.sec, .opening { scroll-margin-top: var(--masthead-h, 0px); }

/* ------------------------------------------ AL CINEMA = ONE DARK BLOCK (v2.25)
   The whole home section is the dark band: "AL CINEMA" head, the micro-editorial and the poster row on the same
   near-black / ivory pair as "In corso" (--ink / --paper, --dark-mute, --dark-rule), edge to edge like the other
   full-width blocks. The editorial loses its own band (no black on black): it is just text inside the block, set off
   by a thin rule as in the original paper layout. Posters/images untouched; only the empty poster box behind them
   goes dark. Contrast on #151515: text 15.9:1, secondary (--dark-mute) 7.2:1, links/counters (#9fb4d8) 8.7:1. */
.sec-cinema {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}
.sec-cinema .section-count { color: var(--paper); }
.sec-cinema .section-sub { color: var(--dark-mute); }
.sec-cinema .more { color: #9fb4d8; }
.sec-cinema a:focus-visible { outline-color: var(--paper); }

.sec-cinema .cin-ed {
  background: none;
  margin: 0 0 32px;
  padding: 14px 0 0;
  border-top: 1px solid var(--dark-rule);
}
.sec-cinema .cin-ed-eyebrow { color: var(--paper); }

.sec-cinema .poster { background: #262626; }
.sec-cinema .poster-ph { border-color: var(--dark-rule); color: var(--dark-mute); }
.sec-cinema .film-card-meta,
.sec-cinema .film-card-next,
.sec-cinema .film-card-where { color: var(--dark-mute); }
.sec-cinema .film-card-count { color: #9fb4d8; }
.sec-cinema .film-strip { scrollbar-color: #4a4843 transparent; }

@media (max-width: 1023px) {
  .sec-cinema .cin-ed { margin-bottom: 24px; }
}
@media (min-width: 1024px) {
  .sec-cinema .cin-ed { margin-bottom: 40px; padding-top: 20px; }
}

/* ------------------------------------------ AL CINEMA editorial: NEWSPAPER COLUMNS (v2.26)
   One text flowing in CSS multi-column (no JS, no manual blocks): the headline spans above the columns, the
   automatic-text note spans below them (a separate note, outside the article flow). The number of columns follows the
   real width of the text block: column-width 270px + max 3 -> 1 column below ~610px of viewport, 2 up to ~945px,
   3 above. Columns stay ~270-425px wide (about 45-70 characters). Ragged right, no rules: space only.
   The side label ("LE NUOVE USCITE / period") keeps its right-hand position only from 1280px, where the text block is
   still ~1030-1100px wide; from 1024 to 1279 it goes inline above the headline (as on phones), so the columns are never
   squeezed into two over-wide ones. */
.sec-cinema .cin-ed-body {
  column-width: 270px;
  column-count: 3;
  column-gap: 40px;
  column-fill: balance;
}
.sec-cinema .cin-ed-headline {
  column-span: all;
  max-width: 24em;
  margin-bottom: 16px;
  break-after: avoid;
}
.sec-cinema .cin-ed-p {
  max-width: none;
  margin: 0;
  line-height: 1.55;
  orphans: 2;
  widows: 2;
  text-wrap: pretty;
}
.sec-cinema .cin-ed-p + .cin-ed-p { margin-top: 0.75em; }
.sec-cinema .cin-ed-headline + .cin-ed-p { margin-top: 0; }
.sec-cinema .cin-ed-note {
  column-span: all;
  max-width: 36em;
  margin-top: 20px;
}

@media (min-width: 720px) and (max-width: 1023px) {
  .sec-cinema .cin-ed-body { column-gap: 32px; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .sec-cinema .cin-ed { display: block; }
  .sec-cinema .cin-ed-eyebrow { text-align: left; }
  .sec-cinema .cin-ed-range { display: inline; margin-top: 0; }
  .sec-cinema .cin-ed-range::before { content: " · "; }
  .sec-cinema .cin-ed-headline { margin-top: 12px; }
}

@media (min-width: 1024px) {
  .sec-cinema .cin-ed-headline { margin-bottom: 20px; }
  .sec-cinema .cin-ed-note { margin-top: 24px; }
}

@media (min-width: 1280px) {
  .sec-cinema .cin-ed { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ------------------------------------------ AL CINEMA: closing "TUTTI I FILM →" (v2.27)
   After the posters, the same link as in the section head (same .more grammar, same light accent on the dark block),
   right-aligned like the head link, under a thin rule across the content width: it closes the cinema selection.
   Not a button; touch target >= 44px tall and widened to the left. */
.cin-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 28px;
  border-top: 1px solid var(--dark-rule);
}
.cin-foot .more { padding: 16px 0 16px 32px; }
@media (min-width: 1024px) {
  .cin-foot { margin-top: 40px; }
}

/* ------------------------------------------ colophon logo (v2.28)
   The header logo (same file, no filters/effects, original aspect ratio) replaces the text wordmark in the colophon,
   smaller than in the header (139-232px on phones, 272px from 720px): 128px on phones, 184px from 720px. Links to the home like the header. */
.colo-brand {
  display: block;
  align-self: start;
  width: max-content;
  max-width: 100%;
  line-height: 0;
}
.colo-logo {
  display: block;
  width: 128px;
  max-width: 100%;
  height: auto;
}
@media (min-width: 720px) {
  .colo-logo { width: 184px; }
}

/* Header logo: larger touch target (≈ +20px tall) with the SAME layout and look: the padding is cancelled by an equal
   negative margin, so the header height and the logo position do not change. */
.brand { padding: 10px 0; margin: -10px 0; }

/* ------------------------------------------ LEAD EVENTS (v2.30): OGGI and QUESTO WEEKEND
   The first three of the day's ranking are the section's lead group: more air, a stronger title, a real image and two
   or three lines of the OFFLINE text already published (Newsreader, like the editorials). Same page, same palette, no
   card, box, radius or shadow; #1 a little more present than #2 and #3 (title only: the three images have the SAME size
   and format in each layout, v2.31). From #4 the compact list is unchanged; an ink rule after #3 marks the step.
   Phones: a small square image for all three leads, text 2 lines. */
.lead-kicker {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--ink);
}
.lead-pic { aspect-ratio: 4 / 3; }
.lead-summary {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.42;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* OGGI */
.at-item.at-lead { padding: 20px 0 22px; }
.at-lead .at-title { font-size: 23px; font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; }
.lead-1 .at-lead .at-title { font-size: 26px; }
.agenda-today > .lead-3 > .at-item { border-bottom-color: var(--ink); }
.at-lead[data-has-image] {
  grid-template-columns: 74px minmax(0, 1fr);
  grid-template-areas: "time body" "pic body";
  grid-template-rows: auto 1fr;
  row-gap: 12px;
}
.at-lead[data-has-image] .at-time { grid-area: time; }
.at-lead[data-has-image] .at-body { grid-area: body; }
.at-lead .lead-pic { grid-area: pic; width: 64px; aspect-ratio: 1; align-self: start; }

/* QUESTO WEEKEND */
.wk-lead-kicker { margin-top: 36px; }
.wk-lead-kicker + .index { margin-top: 0; }
.index-item.index-lead { padding: 20px 0 22px; }
.index-lead .index-n { font-size: 14px; font-weight: 700; color: var(--ink); padding-top: 1px; }
.index-lead .index-title { font-size: 23px; font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; }
.lead-1 .index-lead .index-title { font-size: 26px; }
.index > .lead-3 > .index-item { border-bottom: 1px solid var(--ink); }
.index-lead[data-has-image] { grid-template-columns: 30px minmax(0, 1fr) 96px; gap: 10px 12px; }
.index-lead .lead-pic { width: 96px; aspect-ratio: 1; }

@media (min-width: 720px) {
  .lead-summary { -webkit-line-clamp: 3; font-size: 17px; }
  /* OGGI: time | text | image, as the compact rows plus a right-hand picture */
  .at-lead[data-has-image],
  .lead-1 > .at-lead[data-has-image] {
    grid-template-columns: 110px minmax(0, 1fr) 190px;
    grid-template-areas: "time body pic";
    grid-template-rows: auto;
    column-gap: 20px;
  }
  .at-lead .lead-pic,
  .lead-1 > .at-lead .lead-pic { width: auto; aspect-ratio: 4 / 3; }
  .at-lead .at-title { font-size: 28px; }
  .lead-1 .at-lead .at-title { font-size: 32px; }
  .at-item.at-lead { padding: 24px 0 26px; }
  /* WEEKEND: n | text | image */
  .index-lead[data-has-image],
  .lead-1 > .index-lead[data-has-image] {
    grid-template-columns: 30px minmax(0, 1fr) 180px;
    grid-template-areas: "n body pic";
    gap: 10px 12px;                       /* same number -> text gap as the compact rows: titles aligned */
  }
  .index-lead[data-has-image] .index-n { grid-area: n; }
  .index-lead[data-has-image] .index-body { grid-area: body; }
  .index-lead .lead-pic,
  .lead-1 > .index-lead .lead-pic { grid-area: pic; width: auto; aspect-ratio: 4 / 3; margin-left: 8px; }
  .index-lead .index-title { font-size: 26px; }
  .lead-1 .index-lead .index-title { font-size: 30px; }
  .index-item.index-lead { padding: 22px 0 24px; }
}

@media (min-width: 1024px) {
  /* the label sits above the index in the right column; the sticky block on the left spans both rows */
  .sec-weekend { grid-template-rows: auto 1fr; }
  .sec-weekend > .wk-block { grid-row: 1 / span 2; }
  .sec-weekend > .wk-lead-kicker { grid-column: 2; grid-row: 1; margin-top: 0; }
  .sec-weekend > .wk-lead-kicker + .index { grid-row: 2; }
}

/* ===================================== OGGI as a FRONT PAGE (v2.33)
   Same paper / ink / blue, same Archivo + Newsreader, same rules. The three leads of the day's ranking become a front
   page: #1 is the cover story (the OFFLINE lead visual at full column width), #2 and #3 are second stories with a real
   picture, from #4 the compact agenda is unchanged. No card, radius, shadow, clip-path or extra sticky. */

.has-front .open-agenda { margin-top: 0; }
.front {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 24px;
  margin-top: 28px;
  border-top: 1px solid var(--ink);
}
.story { min-width: 0; }
.story-link { display: block; color: inherit; text-decoration: none; }
.story-link:hover .story-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.story-pic { aspect-ratio: 4 / 3; width: 100%; }
.story-text { display: block; }
.story-kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.story-title { display: block; margin-top: 8px; font-weight: 600; letter-spacing: -0.015em; }
.story-meta { display: block; margin-top: 8px; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.story .story-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 10px;
}

/* #1 cover story */
.story-1 { grid-column: 1 / -1; padding: 16px 0 26px; }
.story-1 .story-pic { margin-bottom: 16px; }
.story-1 .story-title { font-size: 31px; line-height: 1.04; letter-spacing: -0.025em; }
.story-1 .story-meta { font-size: 15px; }
.story-1 .story-summary { -webkit-line-clamp: 4; font-size: 17.5px; line-height: 1.42; }

/* #2 / #3 second stories: two newspaper columns with a hairline between them */
.story-2, .story-3 { padding: 16px 0 24px; border-top: 1px solid var(--ink); }
.story-3 { border-left: 1px solid var(--rule); margin-left: -12px; padding-left: 11px; }
.story-2 .story-pic, .story-3 .story-pic { margin-bottom: 12px; }
.story-2 .story-title, .story-3 .story-title { font-size: 19px; line-height: 1.12; }
.story-2 .story-meta, .story-3 .story-meta { font-size: 13px; }
.story-2 .story-summary, .story-3 .story-summary { font-size: 15px; line-height: 1.38; }

/* the rest of the day: the agenda as it is */
.rest-kicker { margin: 30px 0 10px; font-weight: 700; color: var(--ink); }

/* phones: the cover picture runs edge to edge (the gutter is the frame of everything else) */
@media (max-width: 719px) {
  .story-1 .story-pic { width: auto; margin: 0 calc(-1 * var(--pad)) 16px; }
  .story-1 { padding-top: 0; }
  .front { border-top: 0; margin-top: 24px; }
}
@media (max-width: 380px) {
  .story-2 .story-title, .story-3 .story-title { font-size: 17.5px; }
  .story-2 .story-summary, .story-3 .story-summary { font-size: 14.5px; }
}

/* tablet and up: OGGI becomes a horizontal masthead band (word left, date and counts right) to free the width */
@media (min-width: 720px) {
  .has-front .open-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 36px;
    align-items: end;
  }
  .has-front .open-intro > .open-title { grid-column: 1; grid-row: 1 / span 2; font-size: clamp(120px, 19vw, 190px); }
  .has-front .open-intro > .kicker { grid-column: 2; grid-row: 1; align-self: start; padding-top: 14px; }
  .has-front .open-intro > .open-meta { grid-column: 2; grid-row: 2; }
  .has-front .open-num { font-size: clamp(56px, 7vw, 96px); }

  .front { margin-top: 32px; column-gap: 32px; }
  /* #1: picture and text side by side, the picture takes 3/5 */
  .story-1 > .story-link[data-has-image] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: 28px;
    align-items: start;
  }
  .story-1 { padding: 20px 0 30px; }
  .story-1 .story-pic { margin-bottom: 0; }
  .story-1 .story-title { font-size: clamp(30px, 3.9vw, 36px); margin-top: 10px; }
  .story-1 .story-summary { -webkit-line-clamp: 6; font-size: 18px; }
  .story-2, .story-3 { padding: 20px 0 30px; }
  .story-3 { margin-left: -16px; padding-left: 15px; }
  .story-2 .story-title, .story-3 .story-title { font-size: 23px; }
  .story-2 .story-meta, .story-3 .story-meta { font-size: 14px; }
  .story-2 .story-summary, .story-3 .story-summary { font-size: 16.5px; }
}

/* desktop: a real front page. Cover story 2/3 (picture over text), #2 and #3 stacked in the right column, the rest
   of the day below in two agenda columns. */
@media (min-width: 1024px) {
  .opening.has-front { display: block; }
  .has-front .open-intro { position: static; column-gap: 48px; }
  .has-front .open-intro > .open-title { font-size: clamp(150px, 13vw, 200px); }
  .has-front .open-intro > .open-meta { max-width: 560px; }

  .front {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 40px;
    margin-top: 36px;
  }
  .story-1 { grid-column: 1; grid-row: 1 / span 2; padding: 24px 0 36px; }
  .story-1 > .story-link[data-has-image] { display: block; }
  .story-1 .story-pic { margin-bottom: 20px; }
  .story-1 .story-text { max-width: 760px; }
  .story-1 .story-kicker { font-size: 12px; }
  .story-1 .story-title { font-size: clamp(38px, 3.4vw, 48px); line-height: 1.02; }
  .story-1 .story-meta { font-size: 16px; }
  .story-1 .story-summary { -webkit-line-clamp: 4; font-size: 19.5px; }

  /* right column: separated by a hairline, #2 above #3 */
  .story-2, .story-3 {
    grid-column: 2;
    border-top: 0;
    border-left: 1px solid var(--rule);
    margin-left: -20px;
    padding: 24px 0 28px 19px;
  }
  .story-2 { grid-row: 1; }
  .story-3 { grid-row: 2; padding-top: 0; }
  .story-3 > .story-link { border-top: 1px solid var(--ink); padding-top: 22px; }
  .story-2 .story-pic, .story-3 .story-pic { aspect-ratio: 3 / 2; }
  .story-2 .story-title, .story-3 .story-title { font-size: clamp(22px, 1.9vw, 26px); }

  .agenda-today.is-rest {
    columns: 2;
    column-gap: 40px;
    column-rule: 1px solid var(--rule);
  }
  .agenda-today.is-rest > li { break-inside: avoid; }
  .rest-kicker { margin-top: 8px; }
}

/* EDITORIAL COVER (v2.33): the weekly editorial cover sits UNDER the dark editorial band (same width, zero gap: still
   one object) and is 2/3 of its original height: 16:9 -> 8:3, cropped from the centre. */
.sec-editorial + .ed-cover { margin-top: 0; }
.sec-editorial + .ed-cover img { aspect-ratio: 8 / 3; object-position: 50% 50%; }

/* ------------------------------------------ EVENT DETAIL V2 (v2.34): abstract -> OFFLINE long text
   Same type and palette. V2.1 (v2.36, 03/10/2026): the event image is back where it was before V2 - small, on top of
   the info column (.detail-pic rules above: never upscaled, max 340/300 px high) - and no longer interrupts the text. */
.detail-main { min-width: 0; }
.detail-long { border-top: 0; padding-top: 0; }
.detail-main > .detail-desc + .detail-long { margin-top: 1.1em; }
.detail-long p + p { margin-top: 0.9em; }
.detail-lede.is-abstract { color: var(--ink); }
@media (min-width: 1024px) {
  .detail-main { grid-column: 1 / span 7; }
}

/* ------------------------------------------------ TUTTI / SEARCH UX V2 (03/10/2026)
   The catalogue opens on the search: "Cosa ti interessa?" (one big field, Discovery Search V1 under the hood),
   "Che tipo?" (rectangular buttons in the language of "Guarda il trailer": 1px ink border, uppercase, selected = ink
   block), the period tabs of the previous versions right above the list, then the number of events and the list.
   No hero title, no cloud, no explanations. */
.discovery .catalog-controls { padding: 28px var(--pad) 0; }
.ds-label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.ds-ask { margin-bottom: 30px; }
.ds-search { margin: 0; }
.ds-search .search-input {
  min-height: 68px;
  padding-right: 48px;
  border-bottom: 2px solid var(--ink);
  font-size: clamp(20px, 5.6vw, 52px);         /* the whole placeholder fits down to 360 px */
  font-weight: 500;
  letter-spacing: -0.02em;
}
.ds-search .search-input::placeholder { font-weight: 400; color: var(--ink-3); }
.ds-search .search-input:focus { border-bottom-width: 2px; border-bottom-color: var(--accent); }
.ds-search .search-clear { top: 14px; }

.ds-group + .ds-group { margin-top: 18px; }
.ds-options { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .ds-opt:hover { border-color: var(--accent); color: var(--accent); }
  .ds-opt.is-on:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
}
.ds-opt:active { background: var(--paper-2); }
.ds-opt.is-on { background: var(--ink); color: var(--paper); }
.ds-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* QUANDO: the period tabs as before (.tabs / .tab), one row that scrolls inside itself on mobile */
.ds-when-wrap { margin: 32px var(--pad) 0; }
.discovery .tabs.ds-when {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.discovery .tabs.ds-when::-webkit-scrollbar { display: none; }
.discovery .ds-when .tab { flex: 1 0 auto; padding: 0 14px; white-space: nowrap; }

/* the number of events, on the rule that opens the list */
.ds-count-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 22px var(--pad) 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}
.ds-count { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ds-count-row .reset-link { padding: 0; }
.ds-count-row .reset-link[hidden] { display: none; }
.discovery .catalog-results > .rows:first-child,
.discovery .ds-found > .rows:first-child { margin-top: 0; }

/* discreet heads inside the results (OGGI groups, the rest of the catalogue): the list stays the protagonist */
.discovery .today-group { margin-top: 28px; }
.discovery .today-group:first-child { margin-top: 20px; }
.discovery .group-title { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; }
.discovery .search-cinema { margin-top: 20px; }
.ds-none { padding: 24px var(--pad) 0; }
.ds-none .empty-title { font-size: clamp(22px, 5.5vw, 32px); }
.ds-rest { margin-top: 48px; }
.ds-rest-head {
  margin: 0 var(--pad);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ds-rest-open { margin-top: 16px; }

@media (min-width: 720px) {
  .discovery .catalog-controls { padding-top: 40px; }
  .ds-ask { margin-bottom: 36px; }
  /* label column + buttons: two quiet steps, not two tab bars */
  .ds-group { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: start; column-gap: 16px; }
  .ds-opt { padding: 0 12px; }
  .ds-group .ds-label { margin: 0; line-height: 44px; }
  .ds-when-wrap { margin-top: 40px; }
}

/* ============================================================ FUORI PORTA (v2.49) */
.sec-trips .trips-empty { margin-top: 14px; color: var(--ink-2); font-size: 15px; }
.trips-map { position: relative; margin-top: 22px; border-top: 1px solid var(--ink); }
.trips-map-canvas { height: 340px; background: var(--paper-2); z-index: 0; }
.trips-map-legend { font-size: 12px; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid var(--rule); }
.trips-map-legend:empty { display: none; }
.trips-map-note { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.trips-map-off { display: none; }
.trips-map.is-off .trips-map-off { display: block; padding: 10px 0; color: var(--ink-2); font-size: 14px;
  border-bottom: 1px solid var(--rule); }
.trips-map.is-nomap .trips-map-canvas, .trips-map.is-nomap .trips-map-legend { display: none; }
.trips-map .leaflet-container { font: inherit; background: var(--paper-2); }
.trips-map .leaflet-control-attribution { font-size: 11px; }
.trip-pin { background: none; border: 0; cursor: pointer; }
.trip-pin-shape { position: absolute; left: 2px; top: 2px; width: 30px; height: 30px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--accent); border: 2px solid var(--paper); box-shadow: 0 1px 0 var(--ink);
  display: grid; place-items: center; }
.trip-pin-shape > span { transform: rotate(45deg); color: var(--paper); font: 700 13px/1 var(--sans, inherit); }
.trip-pin.is-approx .trip-pin-shape { background: var(--paper); border: 2px dashed var(--accent); }
.trip-pin.is-approx .trip-pin-shape > span { color: var(--accent); }
.trip-pin[aria-expanded="true"] .trip-pin-shape, .trip-pin:focus-visible .trip-pin-shape {
  outline: 3px solid var(--ink); outline-offset: 2px; }
.trip-pin:focus { outline: none; }
.trip-ref span { display: inline-block; transform: translate(-50%, -50%); white-space: nowrap; padding: 2px 6px;
  background: var(--ink); color: var(--paper); font: 700 11px/1.3 var(--sans, inherit); letter-spacing: .08em;
  text-transform: uppercase; }
.trip-card { position: absolute; width: 320px; max-height: calc(100% - 40px); overflow: auto; background: var(--paper);
  border: 1px solid var(--ink); padding: 12px 44px 14px 14px; z-index: 500; }
.trip-card[hidden] { display: none; }
.trip-card-place { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.trip-card-approx { font-size: 12px; color: var(--ink-2); }
.trip-card-title { margin-top: 4px; font-size: 18px; font-weight: 600; line-height: 1.15; }
.trip-card-when { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.trip-card-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.trip-card-go { display: inline-flex; min-height: 44px; }
.trip-card-dir { color: var(--ink); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.trip-card-close { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; font-size: 22px;
  background: none; border: 0; cursor: pointer; color: var(--ink); }
.trip-card-choose { margin-top: 6px; list-style: none; padding: 0; }
.trip-card-choose li { padding: 8px 0; border-top: 1px solid var(--rule); display: grid; gap: 2px; }
.trip-card-choose a { font-weight: 600; color: var(--ink); }
.trip-card-choose span { font-size: 13px; color: var(--ink-2); }
.trips-list { margin-top: 0; }
.ds-where { margin-top: 14px; }
.colo-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 719px) {
  .trips-map-canvas { height: 240px; }
  .trip-card { position: relative; width: auto; max-height: none; border-top: 0; }
}
/* the menu has one item more */
.nav { grid-template-columns: repeat(7, 1fr); }
@media (min-width: 720px) { .nav { grid-template-columns: repeat(7, auto); } }

/* ============================================================ FUORI PORTA, mappa in grigio (v2.51, 14/10/2026) */
/* only the cartography goes grey (tile pane): pins, cards, controls and attribution keep their colours */
.trips-map .leaflet-tile-pane { filter: grayscale(1) contrast(1.06); }
/* pins: the titles' black (--ink), no outline, a solid white dot (or the white count for a group). The indicative
   position (comune) is said in the card ("Posizione indicativa del comune") and in the pin's label, not by the
   graphic: the legend about dashed pins is gone. */
.trip-pin-shape, .trip-pin.is-approx .trip-pin-shape { background: var(--ink); border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.trip-pin-shape > span, .trip-pin.is-approx .trip-pin-shape > span { color: var(--paper); font-size: 14px; }
.trip-pin-shape > span:empty, .trip-pin.is-approx .trip-pin-shape > span:empty { width: 10px; height: 10px;
  border-radius: 50%; background: var(--paper); border: 0; }
.trips-map-legend { display: none; }
/* OFFLINE blue: the selected pin; keyboard focus = blue pin + blue ring */
.trip-pin[aria-expanded="true"] .trip-pin-shape { background: var(--accent); outline: none; }
.trip-pin:focus-visible .trip-pin-shape { background: var(--accent); outline: 3px solid var(--accent); outline-offset: 3px; }

/* ============================================================ FUORI PORTA, tempi e km in auto (v2.52, 14/10/2026) */
.row-travel { display: block; font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.trips-travel-note { margin-top: 14px; font-size: 12px; color: var(--ink-2); }
.trip-card-travel { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.trip-card-travel-note { margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.travel-line { display: block; font-weight: 600; }
.travel-note { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.travel-note + .map-link { display: inline-block; margin-top: 6px; }

/* ============================================================ FUORI PORTA, fascia tortora (v2.55, 15/10/2026) */
/* a light warm grey band between the cream page / QUESTO WEEKEND (#e6e1d6) and the dark bands (CINEMA, IN CORSO).
   Text stays the site black; secondary text uses --ink-2 (5.7:1 on the band; the lighter greys would be < 4.5:1);
   divider tone darkened so rules stay visible; map placeholder and the map card take the band's own tones. */
.sec-trips {
  --trips-bg: #d8d3c9;
  --trips-deep: #cbc5b9;
  --rule: #b8b1a4;
  --ink-3: var(--ink-2);
  background: var(--trips-bg);
  border-top: 0;
}
.sec-trips .row-meta, .sec-trips .section-sub, .sec-trips .trips-map-note, .sec-trips .trips-travel-note { color: var(--ink-2); }
.sec-trips .pic { background: var(--trips-deep); }
.sec-trips .trips-map-canvas, .sec-trips .trips-map .leaflet-container { background: var(--trips-deep); }
.sec-trips .trip-card { background: var(--trips-bg); }
/* desktop: room for the tallest map card (title on 3 lines + time and km + note + buttons) without inner scrolling */
@media (min-width: 720px) { .sec-trips .trips-map-canvas { height: 380px; } }

/* ===================================== SEO 04 (v2.60) / SEO 04.2 (v2.61, 01/11/2026): THE WEEKEND EDITORIAL
   In the LEFT column of QUESTO WEEKEND, under the counter (the original magazine composition); the events stay on the
   right. Same paper, ink and serif voice as the weekly editorial (.ed-p / .ed-link). Phones: under the counter, two
   paragraphs then "Continua a leggere" (the full text is in the page). Desktop: the left column (.wk-left = title block
   + editorial) is the sticky element; app.js stickWeekendLeft sets --wk-left-top so that a column taller than the
   screen scrolls first and then sticks by its bottom edge: nothing is ever covered, the sticky ends with the section. */
.wk-ed { margin-top: 40px; border-top: 1px solid var(--ink); padding-top: 10px; }
.wk-ed-title {
  margin-top: 12px;
  max-width: 18em;
  font-family: var(--serif);
  font-size: clamp(28px, 7.4vw, 38px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.wk-ed-text { margin-top: 6px; }
.wk-ed .more { margin-top: 2px; }
.wk-ed-fallback .wk-ed-text { margin-top: 0; }
.wk-ed-more {
  margin-top: 6px;
  padding: 14px 0;                     /* >= 44 px touch target, like .more */
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
}

@media (max-width: 1023px) {
  .wk-ed.is-collapsed .ed-p:nth-child(n+3) { display: none; }
}

@media (min-width: 1024px) {
  .wk-ed-more { display: none; }
  .sec-weekend.has-ed > .wk-left {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: var(--wk-left-top, calc(var(--masthead-h, 0px) + 24px));
    align-self: start;
  }
  .sec-weekend.has-ed .wk-left > .wk-block { position: static; }
  .wk-left .wk-ed-title { font-size: 32px; }
  /* two typographic columns only when each keeps a readable measure (>= 15em), otherwise one */
  .wk-left .wk-ed-text { column-width: 15em; column-count: 2; column-gap: 28px; }
  .wk-left .wk-ed .ed-p { font-size: 16px; line-height: 1.55; margin-top: 12px; }
  .wk-left .wk-ed .ed-p:first-child { margin-top: 0; }
}

/* ===================================== UX 04.3 (v2.62, 01/11/2026): MORE ROOM FOR THE WEEKEND EDITORIAL; C'È ANCHE ALTRO.
   Home: the editorial preview keeps its first two whole paragraphs on desktop, one on phones and tablets (the rest is on
   /eventi/weekend/, "Continua a leggere"). Desktop: the counter is ~13% smaller (was clamp(140px, 16vw, 260px)) and the
   gaps around it a little tighter, so the text gains height without crowding. Mobile counter unchanged. */
@media (max-width: 1023px) {
  .wk-ed-preview .ed-p:nth-child(n+2) { display: none; }
}
@media (min-width: 1024px) {
  .wk-num { font-size: clamp(122px, 13.9vw, 226px); }
  .wk-count { margin-top: 22px; }
  .wk-left .wk-ed { margin-top: 30px; }
  .wk-left .wk-ed-title { margin-top: 10px; }
  .wk-left .wk-ed-text { margin-top: 10px; }
}
/* the start of the editorial (#editoriale) clears the sticky header also with the browser's own anchor jump */
#editoriale { scroll-margin-top: calc(var(--masthead-h, 0px) + 16px); }

/* C'È ANCHE ALTRO. (end of /eventi/weekend/): an index of the guide like a magazine's contents page. Same paper, ink, blue,
   Archivo uppercase titles, numbered items and thin rules as QUESTO WEEKEND; no cards, shadows or icons. */
.sec-explore { padding-bottom: 64px; }
.explore-title {
  margin-top: 14px;
  max-width: 12em;
  font-size: clamp(40px, 11vw, 64px);    /* ~70% of QUESTO WEEKEND: a new section, not a second opening */
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.explore-lead {
  margin-top: 18px;
  max-width: 34em;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink-2);
}
.explore-list { margin-top: 32px; border-top: 1px solid var(--ink); }
.explore-list > li { border-bottom: 1px solid var(--rule); }
.explore-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-areas: "n name arrow" ". sub sub";
  gap: 4px 0;
  padding: 16px 0 17px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.explore-n { grid-area: n; padding-top: 4px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.explore-name {
  grid-area: name;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.explore-sub { grid-area: sub; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.explore-arrow { grid-area: arrow; padding-left: 12px; font-size: 20px; line-height: 1.1; color: var(--accent); }
.explore-item:hover .explore-name, .explore-item:focus-visible .explore-name { color: var(--accent); }
.explore-cta { margin-top: 28px; }
.explore-cta a {
  display: inline-block;
  padding: 12px 0;
  border-bottom: 2px solid var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.explore-cta a:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (min-width: 720px) {
  .explore-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .explore-item { padding: 22px 0 24px; }
  .explore-name { font-size: 26px; }
}
@media (min-width: 1024px) {
  .sec-explore {
    display: grid;
    grid-template-columns: minmax(var(--hero-min), 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    gap: 0 var(--hero-gap);
    align-items: start;
    padding-bottom: 88px;
  }
  .explore-head { grid-column: 1; grid-row: 1 / span 2; }
  .explore-list { grid-column: 2; grid-row: 1; margin-top: 0; }
  .explore-cta { grid-column: 2; grid-row: 2; margin-top: 32px; }
}