/* ==========================================================================
   BLOKKEN + paginachrome
   ========================================================================== */

.at-block-empty {
  padding: 1.5rem;
  border: 1px dashed var(--at-border-2);
  border-radius: var(--at-r-sm);
  color: var(--at-text-3);
  font-size: .85rem;
}

/* --------------------------------------------------------------------------
   PAGINAKOP
   -------------------------------------------------------------------------- */
.at-pagehead {
  padding-block: clamp(2.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3rem);
}

/* De etage als labeltje met een stip in de kleur van die verdieping. De
   tekst blijft wit: een paar etagekleuren (Shelter-blauw, Publishing-blauw)
   zijn te donker om op het zwart van de site te lezen. */
.at-pagehead__floor {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--at-border-2);
  font-family: var(--at-font-body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: var(--at-ls-label);
  text-transform: uppercase;
  color: var(--at-text);
}
.at-pagehead__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, var(--at-accent));
}

/* Stond op 6,5rem en werd op een breed scherm honderd pixels hoog — dat
   duwde de hele pagina naar beneden voordat er iets te lezen viel. Een
   paginatitel hoeft geen affiche te zijn; de kop op de homepage is dat wel
   en die staat los. */
.at-pagehead__title {
  /* Ruimte onder het etagelabel: dat is een los signaal, geen bovenschrift
     van de titel, en plakte er te dicht tegenaan. */
  margin-block: clamp(1rem, 2.5vw, 1.6rem) 1rem;
  font-size: clamp(2rem, 5vw, 3.6rem);
}

/* Een merk naast de titel — voor de Foundation, of straks een ander
   samenwerkingsverband. Op een telefoon komt het erboven te staan; naast
   elkaar zou allebei te klein worden. */
.at-pagehead--mark .at-pagehead__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 760px) {
  .at-pagehead--mark .at-pagehead__grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.at-pagehead__text { min-width: 0; }

.at-pagehead__mark {
  display: block;
  width: auto;
  /* In zijn eigen verhouding, niet bijgesneden: het is een logo. */
  height: auto;
  max-width: min(42vw, 170px);
  justify-self: start;
}
@media (min-width: 760px) {
  .at-pagehead__mark {
    justify-self: end;
    /* Niet tegen de rand van de kolom: het merk mag ademen. */
    margin-right: clamp(1rem, 4vw, 4rem);
  }
}

.at-pagehead .at-btn { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   TEKSTSECTIE
   -------------------------------------------------------------------------- */
/* Eén verhouding voor de hele site: de paginakop gebruikt dezelfde, zodat
   de kolommen van boven naar beneden op één lijn blijven staan. */
.at-textsection__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .at-textsection__grid {
    grid-template-columns: minmax(0, .4fr) minmax(0, .6fr);
    grid-template-areas:
      'head    body'
      'actions body';
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .at-textsection__head    { grid-area: head; }
  .at-textsection__body    { grid-area: body; }
  /* Zonder foto staan de knoppen links onder de kop, bij de rest van het
     "wat is dit"-blok, in plaats van onderaan een lange tekst. */
  .at-textsection__actions { grid-area: actions; }
}

/* Met foto: die neemt de linkerkolom over en de kop schuift naar boven de
   tekst, zodat rechts één doorlopende kolom ontstaat. */
@media (min-width: 900px) {
  .at-textsection--figure .at-textsection__grid {
    grid-template-columns: minmax(0, .46fr) minmax(0, .54fr);
    grid-template-areas:
      'figure head'
      'figure body'
      'figure actions';
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: clamp(1rem, 2vw, 1.6rem);
    /* De foto moet wél meerekken tot onderaan; `start` op het gewone raster
       zorgt anders dat hij halverwege de knoppen ophoudt. */
    align-items: stretch;
  }
  .at-textsection--figure .at-textsection__figure  { grid-area: figure; }
  .at-textsection--figure .at-textsection__head    { grid-area: head; }
  .at-textsection--figure .at-textsection__body    { grid-area: body; }
  /* Mét foto blijven de knoppen bij de tekst waar ze bij horen. */
  .at-textsection--figure .at-textsection__actions { grid-area: actions; margin-top: 0; }

  /* Staan er meerdere secties onder elkaar, dan mag de foto om en om van
     kant wisselen — dat leest als een opsomming in plaats van als vier
     dezelfde rijen. */
  .at-textsection--right .at-textsection__grid {
    grid-template-columns: minmax(0, .54fr) minmax(0, .46fr);
    grid-template-areas:
      'head    figure'
      'body    figure'
      'actions figure';
  }
}

/* Op een telefoon eerst de foto, dan kop en tekst eronder. */
.at-textsection__figure {
  position: relative;
  margin: 0;
  border-radius: var(--at-r);
  overflow: hidden;
  background: var(--at-surface);
}
/* Op een telefoon de hele foto: de compositie is liggend en de toren staat
   rechts, dus daar valt weinig aan te snijden. */
.at-textsection__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 62% center;
}
@media (min-width: 900px) {
  /* De foto loopt mee met de tekst ernaast, zodat de twee kolommen onderaan
     gelijk eindigen — maar met een ondergrens. Bij een korte alinea werd het
     anders een strookje van 170 pixels naast een halve pagina wit. */
  .at-textsection__figure { min-height: clamp(280px, 32vw, 420px); }
  .at-textsection__img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    /* Het zwaartepunt schuift mee naar rechts, want daar staat de toren. */
    object-position: 72% center;
  }
}

/* Bovenschrift wat lucht geven ten opzichte van de kop eronder. */
.at-textsection__head .at-label { display: block; margin-bottom: .7rem; }

.at-textsection__title {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  letter-spacing: -.03em;
}

/* Broodtekst; alleen de openingsalinea houdt de intro-stem. */
.at-textsection__body {
  font-family: var(--at-font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--at-text);
  max-width: 60ch;
  text-wrap: pretty;
}
.at-textsection__body p { margin: 0; }
.at-textsection__body p + p { margin-top: 1.1em; }
.at-textsection__body > p:first-child {
  font-family: var(--at-font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: -.012em;
}
.at-textsection__body em { font-style: normal; font-weight: 600; }
/* Knoppen zijn geen lopende-tekstlinks: geen onderstreping. */
.at-textsection__body .at-btn { text-decoration: none; }

/* Links in lopende tekst herken je aan de kleur, niet aan een streep. Het
   accent haalt bijna 5:1 contrast met de witte broodtekst, dus het verschil
   is ook zonder kleurwaarneming te zien — en bij hover komt de streep er
   alsnog bij, zodat er altijd een tweede signaal is. */
.at-textsection__body a:not(.at-btn) {
  color: var(--at-accent);
  text-decoration: none;
  text-underline-offset: .18em;
  text-decoration-thickness: 2px;
  transition: color .3s var(--at-ease-out);
}
.at-textsection__body a:not(.at-btn):hover,
.at-textsection__body a:not(.at-btn):focus-visible {
  text-decoration: underline;
}

.at-textsection__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   PROZA (fallback voor losse WP-blokken)
   -------------------------------------------------------------------------- */
.at-prose {
  font-family: var(--at-font-body);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--at-text);
  max-width: 60ch;
}
.at-prose > * + * { margin-top: 1.1em; }
.at-prose h2 { margin-top: 2em; font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--at-text); }
.at-prose h3 { margin-top: 1.6em; font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--at-text); }
.at-prose a {
  color: var(--at-accent);
  text-decoration: none;
  text-underline-offset: .18em;
  transition: color .3s var(--at-ease-out);
}
.at-prose a:hover,
.at-prose a:focus-visible { text-decoration: underline; }

/* --------------------------------------------------------------------------
   404

   Wie hier belandt zocht een plek in de toren, niet ons. De toren staat er dus
   gewoon bij — hetzelfde gebaar als op de homepage — met de uitwegen ernaast.
   -------------------------------------------------------------------------- */
.at-404__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 1000px) {
  .at-404--tower .at-404__grid {
    grid-template-columns: minmax(0, .52fr) minmax(0, .48fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.at-404__title {
  font-family: var(--at-font-display);
  font-size: clamp(2.75rem, 9vw, 7.2rem);
  line-height: .95;
  letter-spacing: -.035em;
  margin: .3em 0 0;
}

.at-404__lead {
  max-width: 34ch;
  margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
  font-family: var(--at-font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--at-text-2);
  text-wrap: pretty;
}

.at-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

/* De assistent hoort hier: soms weet je de naam van de etage niet meer, en
   dan is doorvragen sneller dan zoeken. */
.at-404__ask {
  max-width: 26rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.at-404__tower { min-width: 0; }

/* Zonder maat wordt de toren een postzegel in een halflege kolom. Dezelfde
   ondergrens als op de homepage, maar iets bescheidener: hier is hij de
   uitweg, niet het hoofdgerecht. */
.at-404__tower .atn__tower {
  max-width: min(100%, max(22rem, calc((100vh - var(--at-header-h) - 12rem) * var(--atn-ratio))));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   FOTOSTRIP
   -------------------------------------------------------------------------- */
.at-strip {
  --strip-gap: clamp(.5rem, 1.2vw, 1rem);
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

.at-strip__scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.at-strip__scroller::-webkit-scrollbar { display: none; }
.at-strip__scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.at-strip__scroller:focus-visible { outline: 2px solid var(--at-accent); outline-offset: 6px; }

.at-strip__list {
  display: flex;
  gap: var(--strip-gap);
  padding-inline: var(--at-pad);
  width: max-content;
}

/* Alle foto's even hoog, elk zijn eigen breedte: dat leest als één doorlopende
   band. Wisselende hoogtes gaven ritme, maar met portret en liggend door
   elkaar werd het een rommelige zaag. */
.at-strip__item {
  flex: none;
  scroll-snap-align: center;
  height: clamp(300px, 62vw, 520px);
  border-radius: var(--at-r);
  overflow: hidden;
  background: var(--at-surface);
}

.at-strip__img {
  width: auto;
  height: 100%;
  /* Een uiterst brede of smalle foto mag de band niet uit balans trekken. */
  max-width: min(80vw, 620px);
  min-width: clamp(180px, 40vw, 240px);
  object-fit: cover;
  transition: transform 1s var(--at-ease-out);
}
@media (hover: hover) {
  .at-strip__item:hover .at-strip__img { transform: scale(1.04); }
}

.at-strip__foot {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--at-max);
  margin: clamp(1rem, 2vw, 1.5rem) auto 0;
  padding-inline: var(--at-pad);
}

.at-strip__caption {
  flex: 1;
  font-size: .78rem;
  color: var(--at-text-3);
}

.at-strip__progress {
  flex: none;
  width: clamp(80px, 14vw, 160px);
  height: 2px;
  background: var(--at-border);
  overflow: hidden;
}
.at-strip__progress span {
  display: block;
  height: 100%;
  width: 30%;
  background: var(--at-accent);
  transform-origin: left;
  transition: transform .1s linear;
}

/* --------------------------------------------------------------------------
   DE BUREN — verder de toren in

   Hier stond de volledige lijst van zeventien afdelingen; die staat achter de
   Floors-knop ook al. Twee buren zeggen meer, want die vertellen waar je bent.
   -------------------------------------------------------------------------- */
.at-neighbours {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--at-border);
}

.at-neighbours__grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .at-neighbours__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.at-neighbours__link {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.2rem, 3vw, 1.6rem);
  border-radius: var(--at-r);
  background: var(--at-surface);
  box-shadow: inset 0 0 0 1px var(--at-border);
  overflow: hidden;
  transition:
    transform .45s var(--at-ease-out),
    box-shadow .4s var(--at-ease-out);
}

/* De kleur van de etage schuift van links in — dezelfde beweging als in het
   menu, zodat je ziet dat het om dezelfde etage gaat. */
.at-neighbours__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c);
  opacity: .16;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--at-ease);
}
.at-neighbours__link:hover,
.at-neighbours__link:focus-visible {
  transform: translate(2px, -2px);
  box-shadow: inset 0 0 0 1px var(--c);
}
.at-neighbours__link:hover::before,
.at-neighbours__link:focus-visible::before { transform: scaleX(1); }

.at-neighbours__label {
  font-family: var(--at-font-body);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: var(--at-ls-label);
  text-transform: uppercase;
  color: var(--at-text-3);
}
.at-neighbours__name {
  font-family: var(--at-font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.at-neighbours__floor {
  font-family: var(--at-font-body);
  font-size: .8rem;
  color: var(--at-text-2);
}

.at-neighbours__all {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--at-font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: var(--at-ls-label);
  text-transform: uppercase;
  color: var(--at-text-2);
  cursor: pointer;
  transition: color .3s var(--at-ease-out);
}
.at-neighbours__all .at-btn__arrow { width: 1em; height: 1em; transition: transform .3s var(--at-ease-out); }
.at-neighbours__all:hover { color: var(--at-accent); }
.at-neighbours__all:hover .at-btn__arrow { transform: translateX(.3em); }

/* --------------------------------------------------------------------------
   PROGRAMMA — zalen met hun eigen agenda

   Gebouwd voor ADE. De oude pagina zette elke agenda in een kadertje van
   600 pixels hoog: bij een korte maand een gat eronder, bij een volle maand
   een schuifbalk in een schuifbalk. Hier geeft het kadertje zijn hoogte door
   en groeit het mee.
   -------------------------------------------------------------------------- */
.at-lineup__head {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.at-lineup__titlerow {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.at-lineup__title {
  flex: none;
  font-family: var(--at-font-display);
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.at-lineup__titlerow .at-rule { --rule-h: clamp(1.4rem, 3vw, 2.4rem); }

/* De intro krijgt de introstem, net als bovenaan een detailpagina. */
.at-lineup__intro {
  max-width: 60ch;
  margin-top: .4rem;
  font-family: var(--at-font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--at-text);
  text-wrap: pretty;
}
.at-lineup__intro p { margin: 0; }
.at-lineup__intro p + p { margin-top: .7em; }

/* --- Eén zaal ------------------------------------------------------------ */
.at-lineup__show {
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--at-border);
}
.at-lineup__show + .at-lineup__show { margin-top: clamp(2rem, 5vw, 3.5rem); }

.at-lineup__venue {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5em;
  margin-bottom: clamp(1rem, 2.5vw, 1.6rem);
  font-family: var(--at-font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

/* "TICKETS" achter de naam, in het accent — zelfde rol als het geel op de
   oude pagina, maar dan in de kleur van deze site. */
.at-lineup__label { color: var(--at-accent); }

/* De agenda komt van FourVenues en brengt zijn eigen opmaak mee — per zaal
   verschillend, en niet te overschrijven want het is een ander domein. Geen
   eigen achtergrond eronder dus: een donkere agenda loopt zo door in de
   pagina, en een lichte wordt vanzelf een kaart met onze schuine hoek. */
.at-lineup__agenda {
  border-radius: var(--at-r);
  overflow: hidden;
}

.at-lineup__frame {
  display: block;
  width: 100%;
  /* Beginhoogte tot het kadertje zijn echte hoogte doorgeeft; zonder script
     blijft dit staan en is de agenda gewoon bruikbaar.

     Bewust géén overgang op de hoogte: FourVenues meldt tijdens het laden
     tientallen keren een nieuwe maat, en dan zit de pagina een halve minuut
     te stuiteren omdat elke melding een animatie start. */
  height: 620px;
  border: 0;
}

.at-lineup__actions { margin-top: 1.25rem; }

/* --- Poster -------------------------------------------------------------- */
.at-lineup__poster {
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  max-width: min(100%, 34rem);
  border-radius: var(--at-r);
  overflow: hidden;
}
.at-lineup__poster-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Lange opsommingen — zoals de sponsorlijst van de Foundation — in kolommen
   in plaats van één sliert van vijftig regels. */
.at-textsection__body .at-columns {
  /* Op kolombreedte in plaats van een vast aantal: dan past het aantal zich
     aan de ruimte aan en breken namen als "A'DAM Lookout" niet middenin. */
  columns: 13rem;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 1.1em;
  padding: 0;
  list-style: none;
  font-size: .92rem;
  color: var(--at-text-2);
}
.at-textsection__body .at-columns li {
  break-inside: avoid;
  padding-block: .18em;
  padding-left: .9em;
  text-indent: -.9em;
}
/* Een streepje in de accentkleur in plaats van een opsommingsbolletje. */
.at-textsection__body .at-columns li::before {
  content: '—';
  margin-right: .45em;
  color: var(--at-accent);
}

/* --------------------------------------------------------------------------
   NIEUWSBRIEF
   -------------------------------------------------------------------------- */
.at-news__inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-block: 1px solid var(--at-border);
}
@media (min-width: 900px) {
  .at-news__inner { grid-template-columns: minmax(0, .45fr) minmax(0, .55fr); }
}

.at-news__title {
  font-family: var(--at-font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.at-news__copy .at-label { display: block; margin-bottom: .7rem; }

.at-news__text {
  margin-top: .6rem;
  font-family: var(--at-font-body);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.5;
  color: var(--at-text-2);
  max-width: 42ch;
}

.at-news__form {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.at-news__row {
  display: grid;
  gap: .6rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 520px) {
  .at-news__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Het e-mailveld mag de ruimte, de knop niet meer dan hij nodig heeft. */
  .at-news__row--send { grid-template-columns: minmax(0, 1fr) auto; }
}

.at-news__field { display: block; min-width: 0; }

.at-news__field input {
  width: 100%;
  padding: .95em 1.1em;
  border: 0;
  border-radius: var(--at-r-sm);
  box-shadow: inset 0 0 0 1px var(--at-border-2);
  background: transparent;
  font-family: var(--at-font-body);
  font-size: .95rem;
  color: var(--at-text);
  transition: box-shadow .3s var(--at-ease-out), background-color .3s var(--at-ease-out);
}
.at-news__field input::placeholder { color: var(--at-text-3); }
.at-news__field input:hover { background: var(--at-surface); }
.at-news__field input:focus {
  outline: 0;
  background: var(--at-surface);
  box-shadow: inset 0 0 0 2px var(--at-accent);
}

.at-news__submit { justify-content: center; }

/* Het spamveld hoort onvindbaar te zijn voor mensen, maar wel te bestaan
   voor de robots die er intrappen. */
.at-news__trap {
  position: absolute;
  left: -5000px;
}

/* --------------------------------------------------------------------------
   ETAGEPAGINA — logo, socials, en de volgorde op een breed scherm
   -------------------------------------------------------------------------- */

/* Het logo van de etage naast de titel, wit gemaakt zoals in het menu — zo
   blijven zeventien huisstijlen één geheel. */
.at-pagehead__logo {
  display: grid;
  place-items: center;
  width: clamp(120px, 22vw, 200px);
  justify-self: start;
}
@media (min-width: 760px) {
  .at-pagehead__logo { justify-self: end; margin-right: clamp(1rem, 4vw, 4rem); }
}
.at-pagehead__logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.at-pagehead__socials {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
}
.at-pagehead__socials a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem;
  border-radius: var(--at-r-sm);
  box-shadow: inset 0 0 0 1px var(--at-border);
  font-family: var(--at-font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--at-text-2);
  transition:
    color .3s var(--at-ease-out),
    box-shadow .3s var(--at-ease-out),
    transform .3s var(--at-ease-out);
}
.at-pagehead__socials a:hover {
  color: var(--at-accent);
  box-shadow: inset 0 0 0 1px var(--at-accent);
  transform: translate(2px, -2px);
}
.at-pagehead__socials .at-social-icon { width: 15px; height: 15px; }

/* Op een telefoon staan de foto's boven de tekst en dat leest goed: je ziet
   meteen waar je bent. Op een breed scherm werkt datzelfde averechts — dan
   begint de tekst pas ver onder een brede band beeld. Daar gaat de strip
   daarom naar achteren, zodat de tekst direct onder de titel staat. */
@media (min-width: 900px) {
  .at-page--intro .at-page__content {
    display: flex;
    flex-direction: column;
  }
  .at-page--intro .at-page__content > .at-strip { order: 1; }
}

/* --------------------------------------------------------------------------
   ETAGEKOP — twee kolommen: wie het is, en wat het is
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .at-pagehead--split .at-pagehead__grid {
    display: grid;
    /* Dezelfde verhouding en dezelfde tussenruimte als een tekstsectie: de
       kolommen van de paginakop en die van de blokken eronder liepen niet
       gelijk, en dat las als scheef. */
    grid-template-columns: minmax(0, .4fr) minmax(0, .6fr);
    gap: clamp(1.25rem, 3vw, 3rem);
    align-items: start;
  }
}

.at-pagehead__about {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  min-width: 0;
}
@media (max-width: 899px) {
  .at-pagehead__about { margin-top: clamp(1.5rem, 4vw, 2rem); }
}

/* Dezelfde stem als de intro-alinea van een tekstsectie. */
.at-pagehead__intro {
  font-family: var(--at-font-body);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--at-text);
  max-width: 52ch;
  text-wrap: pretty;
}
.at-pagehead__intro p { margin: 0; }
.at-pagehead__intro p + p { margin-top: 1.1em; }
.at-pagehead__intro > p:first-child {
  font-family: var(--at-font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -.012em;
}

/* De knop staat links onder de socials, bij de rest van de gegevens. */
.at-pagehead__visit { margin-top: 1.25rem; }

/* Het logo sluit de tekstkolom af, wat kleiner en rustiger dan de titel
   ernaast — het is een ondertekening, geen kop. */
.at-pagehead__about .at-pagehead__logo {
  display: grid;
  place-items: center;
  width: clamp(110px, 16vw, 160px);
  margin: 0;
  justify-self: start;
}
.at-pagehead__about .at-pagehead__logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .8;
}

/* Pijlen bij de fotostrip — alleen waar een aanwijzer is. Met een muis is
   niet te zien dat deze rij opzij kan; op een telefoon veeg je vanzelf. */
.at-strip__nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .at-strip__nav {
    display: flex;
    gap: .5rem;
    flex: none;
  }
}

.at-strip__arrow {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: var(--at-r-sm);
  background: var(--at-surface);
  color: var(--at-text);
  cursor: pointer;
  transition:
    background-color .3s var(--at-ease-out),
    color .3s var(--at-ease-out),
    transform .3s var(--at-ease-out),
    opacity .3s linear;
}
.at-strip__arrow svg { width: 1rem; height: 1rem; }
.at-strip__arrow[data-strip-prev] svg { transform: rotate(180deg); }
.at-strip__arrow:hover:not(:disabled) {
  background: var(--at-accent);
  color: var(--at-accent-ink);
  transform: translate(2px, -2px);
}
.at-strip__arrow:disabled { opacity: .3; cursor: default; }

/* Tijdens het slepen geen tekst of foto's selecteren. */
.at-strip__scroller.is-dragging { user-select: none; }
.at-strip__img { -webkit-user-drag: none; user-select: none; }

/* --------------------------------------------------------------------------
   AGENDA — losse evenementen per dag

   Waar het Programma-blok hele zalen binnenhaalt, gaat dit over losse
   momenten. De dag is de kapstok; het filter op zaal verbergt alleen, want
   alles staat al in de pagina.
   -------------------------------------------------------------------------- */
.at-agenda__head {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.at-agenda__titlerow {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.at-agenda__title {
  flex: none;
  font-family: var(--at-font-display);
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.at-agenda__titlerow .at-rule { --rule-h: clamp(1.4rem, 3vw, 2.4rem); }

.at-agenda__intro {
  max-width: 60ch;
  margin-top: .4rem;
  font-family: var(--at-font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.at-agenda__intro p { margin: 0; }
.at-agenda__intro p + p { margin-top: .7em; }

/* --- Filter -------------------------------------------------------------- */
.at-agenda__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--at-border);
}

.at-agenda__filter-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--at-text-3, var(--at-text-2));
}

.at-agenda__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* De chips uit het Floors-menu komen daar binnengevlogen en staan hier
   gewoon stil; die begintoestand moet er dus af. */
.at-agenda .at-chip {
  opacity: 1;
  transform: none;
  border: 0;
  background: none;
  cursor: pointer;
}

.at-agenda__jump { margin-left: auto; }
.at-agenda__jump select {
  padding: .5rem 2rem .5rem .85rem;
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--at-border);
  background: none;
  color: var(--at-text-2);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}

/* --- Eén dag ------------------------------------------------------------- */
.at-agenda__day {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  margin: clamp(2.25rem, 6vw, 3.5rem) 0 clamp(1rem, 2.5vw, 1.5rem);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--at-accent, var(--at-text));
  scroll-margin-top: calc(var(--at-header-h, 4rem) + 1.5rem);
}
.at-agenda__day::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--at-border);
}
.at-agenda__list > .at-agenda__day:first-child { margin-top: 0; }

/* --- Eén evenement ------------------------------------------------------- */
.at-agenda__event {
  display: grid;
  gap: .5rem clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.1rem, 2.5vw, 1.5rem) 0;
  border-top: 1px solid var(--at-border);
}
.at-agenda__event[hidden] { display: none; }

@media (min-width: 800px) {
  .at-agenda__event { grid-template-columns: minmax(0, .28fr) minmax(0, .72fr); }
}

.at-agenda__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .75rem;
}

@media (min-width: 800px) {
  .at-agenda__meta { flex-direction: column; gap: .45rem; }
}

/* De zaalnaam is ook een filterknop — vandaar de streep eronder die bij
   aanwijzen oplicht, net als de linkjes elders. */
.at-agenda__venue {
  padding: 0;
  border: 0;
  background: none;
  color: var(--at-accent, var(--at-text));
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s var(--at-ease-out);
}
.at-agenda__venue:hover { color: var(--at-text); }

.at-agenda__time {
  font-size: .9rem;
  color: var(--at-text-2);
  font-variant-numeric: tabular-nums;
}

.at-agenda__event-title {
  margin: 0;
  font-family: var(--at-font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.015em;
}

.at-agenda__text {
  margin-top: .5rem;
  max-width: 62ch;
  color: var(--at-text-2);
  text-wrap: pretty;
}
.at-agenda__text p { margin: 0; }
.at-agenda__text p + p { margin-top: .6em; }

.at-agenda__actions { margin: 1rem 0 0; }

.at-agenda__empty {
  padding: clamp(2rem, 6vw, 3rem) 0;
  color: var(--at-text-2);
  text-align: center;
}

/* --------------------------------------------------------------------------
   AFSPRAAKFORMULIER — de aanmelding van gasten

   Het formulier komt van Reflex en staat in een eigen kadertje, dat zijn
   hoogte doorgeeft. Hier alleen de omlijsting eromheen.
   -------------------------------------------------------------------------- */
.at-appointment__head {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.at-appointment__titlerow {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.at-appointment__title {
  flex: none;
  font-family: var(--at-font-display);
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.at-appointment__titlerow .at-rule { --rule-h: clamp(1.4rem, 3vw, 2.4rem); }

.at-appointment__intro {
  max-width: 60ch;
  margin-top: .4rem;
  font-family: var(--at-font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
.at-appointment__intro p { margin: 0; }
.at-appointment__intro p + p { margin-top: .7em; }

/* Het formulier is smal van zichzelf; over de volle breedte uitrekken maakt
   het alleen maar moeilijker te lezen. */
.at-appointment__form { max-width: 46rem; }

.at-appointment__frame {
  display: block;
  width: 100%;
  height: 640px;
  border: 0;
  border-radius: 0 14px 0 14px;
  background: var(--at-surface);
  box-shadow: inset 0 0 0 1px var(--at-border);
}