/* ==========================================================================
   La Dilettante Amsterdam — styles
   Vormtaal (BRIEFING.md §3.2): alles een inktlijn, schaduwen hard en zwart,
   geen afgeronde hoeken, scheefstand als middel, grain over de hele pagina.
   Tokens staan in designtokens.css.
   ========================================================================== */

/* --- Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Lenis neemt het scrollen over zodra JS draait — native smooth scrolling
   zou er dan doorheen vechten en geeft schokkerig dubbel-gedrag. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible{
  outline: var(--line-heavy) solid var(--ink);
  outline-offset: 3px;
}
.section--ink :focus-visible,
.section--wine :focus-visible,
.section--purple :focus-visible{
  outline-color: var(--paper);
}

.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Grain: de drukwerktextuur (§3.2 regel 5) ----------------------------- */
.grain-defs{ position: absolute; width: 0; height: 0; }
.grain{
  position: fixed; inset: -100px;
  filter: url(#grain);
  opacity: .05;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 999;
  /* eigen GPU-laag: het turbulence-filter wordt één keer gerasterd en
     daarna alleen verschoven — anders rast elke flicker het hele scherm
     opnieuw en hapert het scrollen */
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* --- Typerollen ------------------------------------------------------------ */
.label{
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.hand{
  font-family: var(--font-hand);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  transform: rotate(-2deg);
  display: inline-block;
}
.hand--wine{ color: var(--wine); }

.section-title{
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: .35em 0 .5em;
}

.section-intro{ max-width: 46ch; margin-bottom: 2.5rem; }

h3{
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: -0.01em;
}

/* --- Eyebrow: het V.A. 13:00-blokje (§3.3) --------------------------------- */
.eyebrow{
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink);
  border: var(--line) solid var(--ink);
  padding: .3em .8em;
  transform: rotate(-1.5deg);
  box-shadow: 4px 4px 0 var(--ink);
}
.eyebrow--paper { background: var(--paper); }
.eyebrow--lime  { background: var(--lime); }
.eyebrow--sun   { background: var(--sun); }
.eyebrow--blue  { background: var(--pop-blue); }
.eyebrow--coral { background: var(--coral); }
.eyebrow--wine  { background: var(--wine); color: var(--paper); }

/* --- Knoppen (§3.3) --------------------------------------------------------- */
.btn{
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: var(--line) solid var(--ink);
  padding: 1em 1.8em;
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover, .btn:active{
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn--sun   { background: var(--sun); }
.btn--paper { background: var(--paper); }

/* --- [AAN TE LEVEREN]-placeholders — zichtbaar, nooit weggemoffeld --------- */
.tbd{
  border: var(--line) dashed var(--wine);
  background: repeating-linear-gradient(
    -45deg,
    rgba(184, 32, 40, .06) 0 12px,
    rgba(184, 32, 40, 0) 12px 24px
  );
  padding: 1rem;
  font-size: .9rem;
}
.tbd__tag{
  display: inline-block;
  align-self: flex-start; /* niet uitrekken in flex-containers */
  font-family: var(--font-label);
  font-size: .68rem;
  letter-spacing: var(--ls-label);
  background: var(--wine);
  color: var(--paper);
  padding: .2em .6em;
  margin-bottom: .4em;
}
.tbd--inline{ margin: .75rem 0; max-width: 46ch; }
.tbd--dark{
  border-color: var(--paper);
  background: repeating-linear-gradient(
    -45deg,
    rgba(248, 248, 248, .1) 0 12px,
    rgba(248, 248, 248, 0) 12px 24px
  );
}
.tbd--dark .tbd__tag{ background: var(--paper); color: var(--ink); }

.voorbeeld-balk{
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: var(--ls-label);
  background: var(--pop-yellow);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  padding: .5em .9em;
  margin-bottom: 1.5rem;
  display: inline-block;
  transform: rotate(-1deg);
}

/* --- Scheefstand: onregelmatig, als een prikbord (§3.2 regel 4) ------------ */
.tilt-l  { transform: rotate(-2deg); }
.tilt-r  { transform: rotate(1.5deg); }
.tilt-l2 { transform: rotate(-1deg); }
.tilt-r2 { transform: rotate(2.5deg); }

/* --- Open/dicht-indicator (§6.01) ------------------------------------------ */
.open-indicator{
  position: fixed;
  top: .9rem; right: .9rem;
  z-index: 1000;
  display: flex; align-items: center; gap: .55em;
  font-family: var(--font-label);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  padding: .55em .9em;
  transform: rotate(1deg);
}
.open-indicator__dot{
  width: .65em; height: .65em;
  background: var(--vine);
  border: 2px solid var(--ink);
  border-radius: 50%;
  flex: none;
}
.open-indicator.is-open  .open-indicator__dot{ background: var(--lime); }
.open-indicator.is-dicht .open-indicator__dot{ background: var(--pop-red); }

/* --- Header ----------------------------------------------------------------- */
.site-header{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  background: var(--paper);
  border-bottom: var(--line) solid var(--ink);
}
.site-header__brand img{ width: 74px; height: auto; }
.site-nav{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
}
/* ruimte laten voor de vaste open/dicht-indicator rechtsboven */
@media (min-width: 861px){
  .site-header{ padding-right: 300px; }
}
.site-nav a{
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav a:hover{ text-decoration: underline; text-decoration-thickness: 3px; }
.site-nav__cta{
  border: var(--line) solid var(--ink);
  background: var(--sun);
  padding: .4em .8em;
  box-shadow: 4px 4px 0 var(--ink);
}

/* --- Sectiekleuren: blokken die tegen elkaar botsen, geen witruimte -------- */
.section{ padding: var(--section-y) 0; }
.section--paper      { background: var(--paper); }
.section--paper-warm { background: var(--paper-warm); }
.section--lime       { background: var(--lime); }
.section--sun        { background: var(--sun); }
.section--purple     { background: var(--pop-purple); color: var(--paper); }
.section--wine       { background: var(--wine); color: var(--paper); }
.section--ink        { background: var(--ink); color: var(--paper); }

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow{ max-width: 720px; }

.section-more{ margin-top: 2.5rem; }
.arrow-link{
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: var(--line) solid currentColor;
  padding-bottom: .2em;
}
.arrow-link:hover{ background: var(--sun); color: var(--ink); border-color: var(--ink); }

/* --- 01 · Hero --------------------------------------------------------------- */
.hero{
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) var(--section-y);
  text-align: center;
  overflow: hidden;
}
.hero__logo{
  max-width: min(760px, 88vw);
  margin: 0 auto;
}
.hero__meta{ margin-top: 1.5rem; }
.hero__actions{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.25rem;
  margin-top: 2.25rem;
}
.hero__mascotte{
  position: absolute;
  right: -1rem; bottom: 1rem;
  width: min(260px, 42vw);
  transform: rotate(4deg);
}

/* --- 02/07 · Ticker (§3.3 sectiescheiding) ----------------------------------- */
.ticker{
  overflow: hidden;
  border-top: var(--line) solid var(--ink);
  border-bottom: var(--line) solid var(--ink);
  padding: .6rem 0;
}
.ticker__track{
  display: flex;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  text-transform: uppercase;
  will-change: transform;
}
.ticker__track + .ticker__track{ margin-top: .35rem; }
.ticker__track span{ flex: none; padding-right: .5em; }

/* --- 03 · Eventkaarten (§3.3) ------------------------------------------------- */
.event-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 1rem;
}
.event-card{
  background: var(--paper);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-hard);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.event-card:hover{
  transform: rotate(0deg) translateY(-4px);
  box-shadow: var(--shadow-deep);
}
.event-card__poster{
  min-height: 220px;
  display: flex; flex-direction: column; justify-content: center;
  border-bottom: var(--line) solid var(--ink);
}
.event-card__poster--purple{ background: var(--pop-purple); color: var(--paper); }
.event-card__poster--red   { background: var(--pop-red); color: var(--paper); }
.event-card__poster--yellow{ background: var(--pop-yellow); color: var(--ink); }
.event-card__poster.tbd{ border-style: none none dashed none; padding: 1.25rem; }
.event-card__body{ padding: 1.25rem; }
.event-card__body h3{ margin: .5rem 0; }
.event-card__foot{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1rem;
}
.chip{
  font-family: var(--font-label);
  font-size: .68rem;
  letter-spacing: var(--ls-label);
  border: 2px solid var(--ink);
  padding: .2em .6em;
}
.chip--walkin{ background: var(--lime); }

.deze-week__vast{
  margin-top: 2rem;
  font-weight: 500;
  max-width: 46ch;
}

/* --- 04 · Drie kolommen -------------------------------------------------------- */
.cols-3{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.col h3{ margin-bottom: .75rem; }
.col__blob{
  width: 110px; height: 110px;
  border: var(--line) solid var(--ink);
  border-radius: var(--radius-blob);
  display: grid; place-items: center;
  font-size: 2.6rem;
  margin-bottom: 1.25rem;
  box-shadow: 6px 6px 0 var(--ink);
}
.col__blob--wine{ background: var(--wine); }
.col__blob--sun { background: var(--sun); }
.col__blob--blue{ background: var(--pop-blue); }

/* --- 05 · Het verhaal (mascotte-pin) ------------------------------------------- */
.verhaal{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.verhaal__illustratie{
  min-height: 340px;
  display: flex; flex-direction: column; justify-content: center;
  transform: rotate(-2deg);
}
.verhaal__alinea{
  margin: 2.25rem 0;
  max-width: 42ch;
  font-size: 1.08em;
}
.arrow-link--paper:hover{ background: var(--paper); }

/* --- 06 · Postergrid ------------------------------------------------------------ */
.poster-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.poster{
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-hard);
  aspect-ratio: 4 / 5;
  display: flex; align-items: flex-end;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.poster:nth-child(odd){ margin-top: 1.5rem; }
.poster:hover{ transform: rotate(0deg); box-shadow: var(--shadow-deep); }
.poster figcaption{
  width: 100%;
  background: var(--paper);
  border-top: var(--line) solid var(--ink);
  padding: .75rem .9rem;
  color: var(--ink);
  display: grid; gap: .15rem;
}
.poster figcaption strong{ font-family: var(--font-display); font-weight: 400; }
.poster--orange{ background: var(--pop-orange); }
.poster--purple{ background: var(--pop-purple); }
.poster--red   { background: var(--pop-red); }
.poster--blue  { background: var(--pop-blue); }
.poster--coral { background: var(--coral); }
.poster--yellow{ background: var(--pop-yellow); }
.poster--lime  { background: var(--lime); }
.poster--sun   { background: var(--sun); }

/* --- 08 · Partnerwand ------------------------------------------------------------ */
.partner-wall{
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.partner{
  display: inline-flex; flex-direction: column; gap: .15rem;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: .9rem 1.2rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.15rem;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
a.partner:hover{
  transform: rotate(0deg) translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--ink);
}
.partner .label{ font-size: .62rem; }

/* --- 09 · Bezoek ------------------------------------------------------------------ */
.bezoek{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.bezoek__adres{
  font-style: normal;
  font-size: 1.1em;
  font-weight: 500;
  margin: 1.5rem 0;
}
.tijden{
  border-collapse: collapse;
  margin: 1rem 0;
  min-width: min(320px, 100%);
}
.tijden th, .tijden td{
  border: var(--line) solid var(--ink);
  padding: .6em 1em;
  text-align: left;
}
.tijden th{
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  background: var(--sun);
}
.tijden td{ font-family: var(--font-label); }
.tijden__nb{ font-size: .85rem; }
.kaart-link{ text-decoration: none; display: block; }
.kaart-placeholder{
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; justify-content: center;
  border: var(--line) solid var(--ink);
  border-style: solid;
  background-color: var(--pop-blue);
  box-shadow: var(--shadow-hard);
  color: var(--ink);
}
.route{
  list-style: none;
  margin-top: 1.75rem;
  display: grid; gap: .6rem;
}
.route .label{
  display: inline-block;
  min-width: 6.5em;
  background: var(--paper-warm);
  border: 2px solid var(--ink);
  padding: .1em .5em;
  margin-right: .6em;
}

/* --- 10 · Reserveerformulier ------------------------------------------------------- */
.reserveer-form{
  margin-top: 1.5rem;
  display: grid; gap: 1.25rem;
}
.form-row{ display: grid; gap: .4rem; }
.form-row label{
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.form-row input,
.form-row select,
.form-row textarea{
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 0;
  padding: .75em .9em;
  box-shadow: 5px 5px 0 var(--ink);
}
.reserveer-form .btn{ justify-self: start; }
.form-demo-melding{
  background: var(--sun);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  padding: 1rem;
  font-size: .9rem;
}

/* --- 11 · Footer --------------------------------------------------------------------- */
.site-footer{ padding: var(--section-y) 0 2rem; }
.site-footer__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
.site-footer__logo-card{
  background: var(--paper);
  border: var(--line) solid var(--paper);
  box-shadow: 8px 8px 0 var(--wine);
  padding: 1rem;
  max-width: 220px;
  transform: rotate(-2deg);
}
.site-footer address{ font-style: normal; }
.site-footer .label{ margin-bottom: .6rem; color: var(--vine); }
.site-footer a{ color: var(--paper); }
.site-footer__mascotte{ max-width: 200px; }
.site-footer__bottom{
  text-align: center;
  margin-top: 4rem;
  color: var(--vine);
}

/* --- Skeletpagina's (agenda/kaart/over/bezoek/reserveren) ---------------------------- */
.skelet{
  min-height: 55vh;
  padding: var(--section-y) 0;
}
.skelet .tbd{ margin-top: 2rem; max-width: 60ch; }

/* --- Responsief ----------------------------------------------------------------------- */
@media (max-width: 860px){
  .verhaal{ grid-template-columns: 1fr; }
  .hero__mascotte{ position: static; width: 100%; margin: 2.5rem auto 0; transform: rotate(-1deg); }
  .site-nav{ margin-right: 0; }
}

@media (max-width: 560px){
  .open-indicator{ top: auto; bottom: .9rem; right: .9rem; }
  .poster:nth-child(odd){ margin-top: 0; }
  /* lange koppen mogen niet uit beeld lopen — leesbaarheid wint (§3.4) */
  .section-title{ font-size: clamp(1.9rem, 9.5vw, 2.5rem); overflow-wrap: anywhere; }
}

/* --- Reduced motion: alles staat stil, pagina blijft leesbaar (§3.4) ----------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .tilt-l, .tilt-r, .tilt-l2, .tilt-r2{ transform: none; }
}

/* --- Print: dit merk is drukwerk, dus netjes printen -------------------------------- */
@media print{
  .grain, .open-indicator{ display: none; }
}