/* ============================================================
   ALLES IS LETTER — Summer Closing
   Eén concept: de pagina bestaat uit woorden, niet uit blokken.
   ============================================================ */

:root{
  --acid:  #E8FF00;   /* zuurgeel: 17,4:1 op de zwarte inkt   */
  --ink:   #0B0B09;   /* de inkt                              */
  --red:   #E62200;   /* alleen als GROTE letter op geel      */
  --red-b: #FF3B18;   /* rood op zwart (5,5:1)                */
  --blue:  #5A82FF;   /* blauw op zwart (5,6:1)               */
  --ghost: #C6D800;   /* watermerk-geel                       */
  --red-d: #B81900;   /* rood op geel, ook klein (5,9:1)      */
  --paper: #FFFDE8;   /* gebroken wit op zwart                */
  --disp:  'Anton', 'Haettenschweiler', 'Arial Narrow', Impact, sans-serif;
  --text:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dock:  88px;
}

*{box-sizing:border-box}
html{overflow-x:clip; -webkit-text-size-adjust:100%}
body{
  margin:0; overflow-x:clip;
  background:var(--acid); color:var(--ink);
  font-family:var(--text); font-weight:500;
  font-size:clamp(1.02rem,3.5vw,1.28rem); line-height:1.4;
  padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%}
a{color:inherit}
p{margin:0 0 .7em}

.vh{position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--acid); padding:14px 18px; font-family:var(--disp); z-index:99}
.skip:focus{left:0}
:focus-visible{outline:5px solid var(--red-b); outline-offset:3px}

/* ---------- de rails: informatie die voorbij rolt ---------- */
.rail{
  display:block; position:relative; overflow:hidden;
  background:var(--acid); color:var(--ink);
  border-top:5px solid var(--ink); border-bottom:5px solid var(--ink);
  font-family:var(--disp); text-transform:uppercase; text-decoration:none;
  letter-spacing:.01em; padding:.3em 0 .24em; line-height:1; white-space:nowrap;
}
.rail--sm{ font-size:clamp(.95rem,3.6vw,1.5rem) }
.rail--big{ font-size:clamp(1.6rem,7vw,3.2rem) }
.rail--ink{ background:var(--ink); color:var(--acid); border-color:var(--ink) }
.rail__t{ display:flex; width:max-content; will-change:transform; animation:roll linear infinite; animation-duration:var(--spd,30s) }
.rail__t--rev{ animation-direction:reverse }
.rail__c{ flex:0 0 auto; padding-right:.35em }
.rail__c i{ font-style:normal; color:var(--red-d) }
.rail--ink .rail__c i{ color:var(--red-b) }
@keyframes roll{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }

/* ---------- het woordblok: de foto zit IN de letters ---------- */
.wall{ background:var(--acid); padding:clamp(6px,1.6vw,16px) 0 clamp(6px,1.6vw,16px) }
.merk{ font-family:var(--disp); text-transform:uppercase; margin:0 0 .06em;
       font-size:clamp(.98rem,4vw,1.9rem); line-height:1.1; letter-spacing:.01em }
.merk em{ font-style:normal; color:var(--red-d) }
.wordblock{ width:100%; height:auto; overflow:hidden }
.wordblock text{ font-family:var(--disp) }
.wordblock__ghost text{ fill:var(--ink) }
.wordblock__ghost{ transform:translate(8px,9px) }
.wordblock__img{ filter:url(#lift) }
/* Was contrast(1.32) saturate(1.45) brightness(1.02). Die contrastboost
   drukte juist de schaduwen dicht, waardoor de drie figuren in het zwart
   verdwenen. Op verzoek van de opdrachtgever staat de foto hier nu
   onbewerkt in de letters, zodat je ze alle drie ziet. */
.wordblock--solo{ margin-top:.2em }
.datum{ width:100%; height:auto; margin-top:-1.4% }
.datum__t{ font-family:var(--disp); fill:none; stroke:var(--red); stroke-width:10; paint-order:stroke }

/* een tweede, rode misdruk onder het blok */
.wall{ position:relative }

/* ---------- kaarten ---------- */
.tick{ overflow:clip; background:var(--ink); color:var(--paper); padding:clamp(20px,5vw,46px) 0 clamp(26px,5vw,52px) }
.tick__hit{ display:block; text-decoration:none; color:inherit }
.tick__word{ width:100%; height:auto; overflow:hidden }
.tick__word text{ font-family:var(--disp) }
.tick__sh{ fill:var(--red-b); transform:translateX(8px) }
.tick__fg{ fill:var(--acid) }
.tick__line{
  display:flex; align-items:center; justify-content:space-between; gap:.4em;
  margin-top:.1em; padding:.12em calc(5% + 14px);
  background:var(--acid); color:var(--ink);
  font-family:var(--disp); text-transform:uppercase;
  font-size:clamp(1.5rem,7.4vw,3.4rem); line-height:1.18;
  width:110%; margin-left:-5%; transform:rotate(-1.5deg);
}
.tick__arrow{ font-family:var(--text); font-weight:900 }
.tick__hit:hover .tick__line{ background:var(--red-b); color:var(--paper) }
.tick__prijs{ padding:clamp(16px,4vw,32px) clamp(14px,3vw,26px) 0 }
.huge{ font-family:var(--disp); color:var(--acid); font-size:clamp(3.4rem,16vw,8rem); line-height:.86; margin:0 0 .12em }
.tick .say{ max-width:32ch; color:var(--paper) }
.tick .say b{ color:var(--acid); font-weight:900 }

/* ---------- line-up ---------- */
.tiltwrap{ position:relative; overflow:clip; background:var(--ink); padding:clamp(18px,4.5vw,42px) 0 clamp(10px,2vw,18px) }
.rail--tilt{ width:114%; margin-left:-7%; transform:rotate(-2.6deg); border-color:var(--ink) }

.acts{ background:var(--ink); padding:clamp(8px,2vw,20px) 0 clamp(16px,3vw,34px) }
.acts__list{ list-style:none; margin:0; padding:0 }
.act{ overflow:hidden }
.act + .act{ margin-top:-1.2vw }
.acts__list > .act:last-child .w__fg{ fill:none; stroke:var(--acid); stroke-width:9; paint-order:stroke }
.acts__list > .act:last-child .w__sh{ display:none }
.act .w{ width:100%; height:auto; overflow:hidden }
.w text{ font-family:var(--disp) }
.w__fg{ fill:var(--acid) }
.w__sh{ fill:var(--red-b); transform:translateX(7px) }
.act:nth-child(2) .w__sh{ fill:var(--blue) }
.act:nth-child(4) .w__sh{ fill:var(--blue) }

/* ---------- locatie ---------- */
.plek{ background:var(--acid); padding:clamp(14px,3vw,30px) 0 clamp(20px,4vw,40px) }
.plek .say, .plek p{ padding-inline:clamp(14px,3vw,26px) }
.wanneer{ font-family:var(--disp); text-transform:uppercase; margin:.1em 0 .1em;
          font-size:clamp(1.05rem,4.6vw,2.4rem); line-height:1.08; padding-inline:clamp(14px,3vw,26px) }
.wanneer em{ font-style:normal; color:var(--red-d) }
.say--lead{ font-size:clamp(1.15rem,4.4vw,1.6rem); font-weight:700; line-height:1.22; max-width:30ch; margin-top:.4em }
.link{
  display:inline-block; font-family:var(--disp); text-transform:uppercase; text-decoration:none;
  font-size:clamp(1.15rem,4.8vw,1.8rem); background:var(--ink); color:var(--acid);
  padding:.14em .5em; margin-top:.2em;
}
.link:hover{ background:var(--red); color:var(--acid) }
.link--in{ background:none; color:var(--acid); padding:0; text-decoration:underline; text-underline-offset:.14em; font-family:var(--text); font-size:inherit; text-transform:none }
.link--in:hover{ background:none; color:var(--red-b) }

/* ---------- route: drie regels die van links naar rechts lopen ---------- */
.route{ background:var(--acid); border-top:5px solid var(--ink) }
.route__r{ position:relative; overflow:clip; padding:clamp(14px,3vw,26px) 0 clamp(22px,3.6vw,38px) }
.route__ghost{
  position:absolute; inset:0; display:flex; align-items:center; overflow:hidden;
  font-family:var(--disp); color:var(--ghost); white-space:nowrap; pointer-events:none;
  font-size:clamp(5rem,26vw,15rem); line-height:.8;
}
.route__r--alt .route__ghost{ color:#D2E400 }
.route__txt{ position:relative; padding-inline:clamp(14px,3vw,26px); max-width:36ch }
.route__txt h3{ font-family:var(--disp); font-weight:400; text-transform:uppercase; font-size:clamp(2.4rem,11vw,5rem); line-height:.9; margin:0 0 .12em; letter-spacing:.01em }
.route__txt p{ margin:0; font-weight:700; line-height:1.32 }
.route__txt b{ background:var(--ink); color:var(--acid); padding:0 .22em }

/* ---------- vragen ---------- */
.vragen{ background:var(--ink); color:var(--paper); padding:clamp(24px,5vw,50px) clamp(14px,3vw,26px) clamp(30px,5vw,60px) }
.qa{ margin:0 0 clamp(18px,3.4vw,30px) }
.q{
  font-family:var(--disp); text-transform:uppercase; margin:0 0 .1em;
  font-size:clamp(1.75rem,8.4vw,3.6rem); line-height:.95;
  color:transparent; -webkit-text-stroke:2px var(--acid); paint-order:stroke fill;
}
.a{ margin:0; max-width:34ch; color:var(--paper); font-weight:500 }

/* ---------- afsluiter ---------- */
.foot{ background:var(--acid); padding-bottom:clamp(16px,3vw,28px) }
.rail--mail{ background:var(--ink); color:var(--acid); font-size:clamp(1.2rem,5.4vw,2.4rem); text-decoration:none }
.rail--mail:hover{ background:var(--red); color:#fff }
.wordblock--foot{ margin-top:clamp(10px,2vw,20px) }
.foot__fine{ padding:clamp(12px,2.4vw,20px) clamp(14px,3vw,26px) 0; font-size:.92rem; font-weight:700; margin:0 }

/* ---------- de plakbalk: kaarten altijd binnen bereik ---------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:center; gap:.5em;
  background:var(--ink); color:var(--acid); text-decoration:none;
  border-top:5px solid var(--acid);
  padding:.34em clamp(12px,3vw,24px) calc(.34em + env(safe-area-inset-bottom));
  font-family:var(--disp); text-transform:uppercase;
  font-size:clamp(1.5rem,6.6vw,2.2rem); line-height:1.2;
}
.dock__k{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dock__p{ color:var(--paper); flex:0 0 auto }
.dock__a{ flex:0 0 auto; color:var(--red-b); font-family:var(--text); font-weight:900 }
.dock:hover{ background:var(--red); color:#fff }
.dock:hover .dock__a{ color:#fff }
.dock.is-off{ pointer-events:none; font-size:clamp(1rem,4.4vw,1.5rem) }
.dock.is-off .dock__p, .dock.is-off .dock__a{ display:none }
.is-off .tick__arrow{ display:none }

/* ---------- rust ---------- */
@media (prefers-reduced-motion: reduce){
  .rail__t{ animation:none!important; transform:none!important }
  .act .w{ transform:none!important }
  *{ scroll-behavior:auto!important }
}

/* ---------- breed scherm: nog groter, niet netter ---------- */
@media (min-width:1000px){
  /* op een breed scherm mag de poster niet de hele hoogte opeten:
     de datum en de feitenrail moeten meteen te zien zijn            */
  .wall > svg, .wall > .merk{ max-width:min(66vw,1150px); margin-inline:auto }
  .wall{ padding-block:clamp(10px,1.6vw,20px) }
  .datum{ margin-top:-2.2% }
  .act + .act{ margin-top:-2.1vw }
}

@media (min-width:900px){
  /* op een breed scherm wordt de tekst zelf ook poster-formaat */
  body{ font-size:clamp(1.28rem,1.55vw,1.7rem) }
  .say--lead{ font-size:clamp(1.6rem,3vw,2.9rem); max-width:24ch }
  .route__txt{ max-width:none; padding-right:16vw }
  .route__txt p{ font-size:clamp(1.4rem,2.5vw,2.7rem); line-height:1.2 }
  .route__txt h3{ font-size:clamp(3rem,7vw,7rem) }
  .a{ max-width:44ch; font-size:clamp(1.2rem,1.7vw,1.9rem) }
  .q{ font-size:clamp(2.4rem,5.2vw,4.8rem) }
  /* de vragen zakken schuin de pagina in */
  .qa:nth-of-type(2){ margin-left:11% }
  .qa:nth-of-type(3){ margin-left:22% }
  .qa:nth-of-type(4){ margin-left:33% }
  .qa:nth-of-type(5){ margin-left:15% }
  .tick .say{ max-width:26ch }
  .tick{ display:grid; grid-template-columns:1fr; }
  .tick__prijs{ display:flex; gap:clamp(20px,4vw,60px); align-items:flex-end; flex-wrap:wrap }
  .tick__prijs .huge{ flex:0 0 auto }
  .tick .say{ flex:1 1 22ch; max-width:30ch }
  .route__r{ padding-block:clamp(26px,3vw,44px) }
}

/* ============================================================
   DE FOTO ALS ACHTERGROND OP ALLE ZWARTE VLAKKEN
   Wens van de opdrachtgever: de foto zat alleen IN de letters
   (SUMMER CLOSING, LAGERWAL, SUPER RANDOM) en moet terugkomen op
   elk vlak dat niet gekleurd is.

   Hoe donker de sluier moet zijn is uitgerekend, niet gegokt. Het
   zuurgeel is bijna zo licht als wit, dus de achtergrond bepaalt
   het contrast. Zelfs als de felste plek van de foto (de spot in
   de rook) spierwit zou zijn, houdt 64% sluier nog 5,4:1 over en
   74% zelfs 8,4:1 - ruim boven de eis van 4,5:1.

   Daarom per vlak een andere dekking: waar de letters kolossaal en
   massief zijn mag de foto hard doorkomen; waar de tekst dun is
   (de omtrekletters bij de vragen) of waar scherpte zwaarder weegt
   dan sfeer (de koopbalk) gaat de sluier omhoog.
   Elk vlak toont bovendien een ander stuk van de foto, zodat je
   niet zes keer dezelfde uitsnede ziet.
   ============================================================ */
.darkshot,
.tick,
.vragen,
.rail--ink,
.rail--mail,
.dock{
  background-color:var(--ink);
  background-repeat:no-repeat;
  background-size:auto, cover;
}
.darkshot--lineup .tiltwrap,
.darkshot--lineup .acts{ background:none }
.darkshot--lineup{ position:relative }

/* kolossale massieve letters - foto mag hard doorkomen */
.tick{
  background-image:linear-gradient(rgba(11,11,9,.64), rgba(11,11,9,.64)), url("/media/hero.jpg");
  background-position:center, center 26%;
}
.darkshot--lineup{
  background-image:linear-gradient(rgba(11,11,9,.62), rgba(11,11,9,.62)), url("/media/hero.jpg");
  background-position:center, center 52%;
}

/* smalle banden: kleine letters, dus iets meer sluier */
.rail--ink{
  background-image:linear-gradient(rgba(11,11,9,.72), rgba(11,11,9,.72)), url("/media/hero.jpg");
  background-position:center, center 14%;
}
.rail--mail{
  background-image:linear-gradient(rgba(11,11,9,.68), rgba(11,11,9,.68)), url("/media/hero.jpg");
  background-position:center, center 90%;
}

/* de vragen staan in dunne omtrekletters - die hebben een rustiger
   ondergrond nodig dan massieve letters van dezelfde grootte */
.vragen{
  background-image:linear-gradient(rgba(11,11,9,.74), rgba(11,11,9,.74)), url("/media/hero.jpg");
  background-position:center, center 72%;
}

/* de plakbalk is de koopknop: scherpte gaat hier voor sfeer */
.dock{
  background-image:linear-gradient(rgba(11,11,9,.80), rgba(11,11,9,.80)), url("/media/hero.jpg");
  background-position:center, center 46%;
}
.dock:hover, .rail--mail:hover{ background-image:none }


/* ============================================================
   DE KAARTENBALK IN DE KLEUREN VAN DE JASSEN
   Wens van de opdrachtgever: rode omlijning, en blauw zodra je
   er met de muis overheen gaat - de kleuren van de rode en de
   blauwe glitterjas op de foto.

   Op een telefoon bestaat aanwijzen niet, dus daar doet de rode
   rand het werk; de blauwe staat is voor de laptop. Het blauw is
   dieper gekozen dan het jasblauw zelf (#5A82FF): op dat lichtere
   blauw haalt het zuurgeel maar 3,1:1, op dit diepe blauw 10,7:1.
   ============================================================ */
.dock{
  /* Vast tegen de onderrand, maar de onderste twee hoeken zijn afgerond
     zodat de rode lijn de ronding van het browservenster VOLGT in plaats
     van erdoor afgesneden te worden.
     De straal is bewust iets ruimer (18px) dan de ronding van een venster:
     dan valt de hoek van de balk altijd binnen wat de browser toont en is
     de omlijning helemaal rond te zien. Op een vierkant venster leest het
     als een bewuste ronding.
     De onderrand zelf is dikker: bij een ronding wordt een dunne lijn in de
     bocht optisch dunner, en op een telefoon valt hij deels achter de
     streep onderaan het scherm. */
  border:4px solid var(--red-b);
  border-bottom-width:6px;
  border-radius:0 0 18px 18px;
}
.dock:hover,
.dock:focus-visible{
  border-color:#4E77FF;
  background-color:#152A8E;
  background-image:none;
  color:var(--acid);
  outline:none;
}
.dock:hover .dock__a,
.dock:focus-visible .dock__a{ color:var(--paper) }   /* rood op blauw haalde maar 3,1:1 */
.dock:hover .dock__p,
.dock:focus-visible .dock__p{ color:var(--paper) }