/* =========================================================
   KustNU — tijdelijke landingspagina
   Merkkleuren en typografie komen 1-op-1 uit het Figma-bestand
   (collectie "TexelNU", mode KustNU).
   ========================================================= */

/* ---------- Fonts (zelf gehost: geen verzoek naar Google) ---------- */
@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/nunito-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/nunito-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/nunito-400i-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/nunito-400i-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Figtree;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/figtree-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/figtree-300-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Figtree;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/figtree-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/figtree-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Figtree;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/figtree-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/figtree-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Figtree;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/figtree-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/figtree-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  /* Merk — exacte waarden uit de Figma-variabelen, mode KustNU.
     Alleen dit blok verschilt van de TexelNU-stylesheet. */
  --accent:          #125E86;   /* zeeblauw: knoppen, accenttekst */
  --accent-hover:    #0D4463;
  --accent-soft:     #EB9001;   /* amber uit het magazine, decoratief */
  --band:            #125E86;   /* contactband */
  --tint-1:          #FCE6C2;   /* amber-zacht */
  --tint-2:          #DCEAF4;   /* zeeblauw-zacht */

  --paper:           #FFFCF6;
  --sand:            #F7EDE0;
  --sand-deep:       #EFE0CD;
  --ink:             #2A211C;
  --muted:           #6F6058;
  --inverse:         #FFFFFF;
  --border:          #E4D5C2;

  /* Maatvoering */
  --container:       1470px;
  --gutter:          clamp(20px, 5vw, 56px);
  --radius-panel:    6px;
  --radius-card:     10px;

  /* Ritme */
  --section-y:       clamp(72px, 9vw, 118px);

  /* Motion */
  --ease:            cubic-bezier(.16,1,.3,1);   /* ease-out-expo */
  --ease-soft:       cubic-bezier(.33,1,.68,1);  /* ease-out-cubic */
  --t-fast:          .24s;
  --t-mid:           .45s;
  --t-slow:          .8s;

  /* Stapeling */
  --z-base: 1; --z-raised: 10; --z-header: 100; --z-overlay: 1000;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.76 Figtree,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input{font:inherit}
h1,h2,h3{font-family:Nunito,ui-rounded,system-ui,sans-serif;font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
:where(a,button,[tabindex]):focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

/* ---------- Layout ---------- */
.container{width:min(100% - var(--gutter)*2, var(--container));margin-inline:auto}

.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:var(--z-overlay);
  background:var(--ink);color:var(--inverse);
  padding:.7em 1.2em;border-radius:999px;text-decoration:none;font-weight:500;
  transition:top var(--t-fast) var(--ease);
}
.skip:focus{top:14px}

/* ---------- Typografie ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:16px;
  font-weight:700;font-size:13px;line-height:1.4;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
}
.kicker::before{
  content:"";width:46px;height:3px;border-radius:2px;
  background:var(--accent-soft);flex:none;
}
.kicker--plain::before{display:none}

.rule{display:block;width:56px;height:3px;border-radius:2px;background:var(--accent-soft)}

/* ---------- Knoppen ---------- */
.btn{
  --btn-bg:var(--accent); --btn-fg:var(--inverse); --btn-bd:transparent;
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:19px 28px 19px 34px;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1.5px solid var(--btn-bd);
  font-weight:700;font-size:16px;line-height:1.2;letter-spacing:.012em;
  text-decoration:none;white-space:nowrap;
  transition:background var(--t-fast) var(--ease-soft),
             color     var(--t-fast) var(--ease-soft),
             border-color var(--t-fast) var(--ease-soft),
             transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
  will-change:transform;
}
.btn svg{flex:none;transition:transform var(--t-mid) var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgb(42 33 28 / .45)}
.btn:hover svg{transform:translateX(5px)}
.btn:active{transform:translateY(0);transition-duration:.08s}

.btn--primary:hover{--btn-bg:var(--accent-hover)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--border)}
.btn--ghost:hover{--btn-bd:var(--accent);--btn-fg:var(--accent)}

/* ---------- Social ---------- */
.social{display:flex;align-items:center;gap:12px;list-style:none;padding:0}
.social a{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  color:var(--accent);
  transition:color var(--t-fast) var(--ease-soft),
             background var(--t-fast) var(--ease-soft),
             transform var(--t-mid) var(--ease);
}
.social a:hover{color:var(--accent-hover);background:rgb(190 79 69 / .09);transform:translateY(-2px)}
.social svg{width:20px;height:20px}

/* =========================================================
   Header
   ========================================================= */
.site-header{background:var(--paper);position:relative;z-index:var(--z-header)}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:112px;padding-block:20px;
}
.header__logo{display:block;flex:none}
.header__logo img{width:250px}
.header__right{display:flex;align-items:center;gap:22px}
.header__tagline{
  font-weight:700;font-size:13px;line-height:1.4;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  text-align:right;
}

/* =========================================================
   Hero
   ========================================================= */
.hero{position:relative;isolation:isolate;display:grid;align-items:center;
  min-height:min(840px, 86vh);padding-block:clamp(56px,7vw,90px)}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;
  filter:contrast(1.06) saturate(1.12)}
.hero::after{ /* zachte diepte links, net als in het ontwerp */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgb(51 31 20 / .16), rgb(51 31 20 / 0) 62%);
}
.hero__inner{
  display:grid;gap:clamp(32px,4vw,56px);
  grid-template-columns:minmax(0,660px) minmax(0,1fr);
  align-items:center;
}

.panel{
  background:rgb(255 252 246 / .88);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border-radius:var(--radius-panel);
  padding:clamp(38px,4.4vw,68px) clamp(28px,4.6vw,72px);
  box-shadow:0 26px 64px -8px rgb(42 33 28 / .22);
}
.panel h1{
  margin-block:18px 0;
  font-size:clamp(2.25rem,5.4vw,4.125rem);   /* 36 → 66px */
  line-height:1.08;letter-spacing:-.025em;
}
.panel__lead{
  margin-top:18px;
  font-family:Nunito,sans-serif;font-style:italic;font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.45;
  color:var(--accent);
}
.panel .btn{margin-top:clamp(26px,3vw,32px)}

.hero__mag{margin:0;justify-self:center;perspective:1400px}
.hero__mag img{
  width:clamp(230px,30vw,520px);
  border-radius:3px;
  box-shadow:0 44px 92px -14px rgb(36 23 15 / .34),
             0 12px 26px -8px rgb(36 23 15 / .22);
  transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
  will-change:transform;
}
.hero__mag img:hover{
  transform:translateY(-8px) rotate(-1.4deg) scale(1.035);
  box-shadow:0 60px 110px -14px rgb(36 23 15 / .38),
             0 16px 32px -8px rgb(36 23 15 / .26);
}

/* =========================================================
   Intro
   ========================================================= */
.intro{background:var(--sand);padding-block:var(--section-y);text-align:center}
.intro .rule{margin-inline:auto}
.intro__text{
  margin:34px auto 0;max-width:62ch;
  font-weight:300;font-size:clamp(1.0625rem,1.7vw,1.3125rem);line-height:1.68;
}

/* =========================================================
   Edities
   ========================================================= */
.editions{background:var(--paper);padding-block:var(--section-y)}
.editions__eyebrow{
  display:block;text-align:center;margin-bottom:46px;
  font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
}
.cards{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.card{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--border);
  border-radius:var(--radius-card);overflow:hidden;
  transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease);
}
.card:hover{
  transform:translateY(-4px);border-color:#DCC9B1;
  box-shadow:0 24px 50px -22px rgb(42 33 28 / .3);
}
.card__visual{
  display:grid;place-items:center;
  aspect-ratio:715/388;min-height:280px;
  overflow:hidden;
}
/* <picture> mag de plaatsing in het grid niet opvangen */
.card__visual picture,.hero__mag picture,.vcard__person picture{display:contents}
.card:nth-child(1) .card__visual{background:var(--tint-1)}
.card:nth-child(2) .card__visual{background:var(--tint-2)}
.card__cover{
  width:clamp(180px,33%,235px);
  border-radius:3px;
  box-shadow:0 8px 22px -6px rgb(36 23 15 / .32);
  transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
  will-change:transform;
}
.card:nth-child(2) .card__cover{transform:rotate(4.5deg)}
.card:hover .card__cover{
  box-shadow:0 16px 34px -8px rgb(36 23 15 / .36);
}
.card:nth-child(2):hover .card__cover{transform:rotate(2.6deg) scale(1.06)}

/* Kaart met twee edities naast elkaar (NL vooraan, Duits erachter) */
.card__pair{display:flex;align-items:center;justify-content:center}
.card__pair img{
  border-radius:3px;
  box-shadow:0 8px 22px -6px rgb(36 23 15 / .32);
  transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
  will-change:transform;
}
.card__pair .is-back{width:clamp(126px,24%,196px);transform:rotate(-11deg);margin-right:-44px}
.card__pair .is-front{width:clamp(138px,26%,214px);transform:rotate(-1.5deg);position:relative;z-index:1}
.card:hover .card__pair img{box-shadow:0 16px 34px -8px rgb(36 23 15 / .36)}
.card:hover .card__pair .is-back{transform:rotate(-14deg) translateX(-12px) scale(1.05)}
.card:hover .card__pair .is-front{transform:rotate(0deg) scale(1.06)}

.card__body{
  display:flex;flex-direction:column;gap:32px;justify-content:space-between;
  flex:1;padding:clamp(30px,3.4vw,48px) clamp(26px,3.6vw,52px) clamp(34px,3.6vw,52px);
}
.card__body h2{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.24;letter-spacing:-.0125em}
.card__body p{margin-top:16px;color:var(--muted);max-width:46ch}
/* knop met de toelichting eronder — zo staan beide kaartknoppen op één lijn,
   ongeacht hoeveel regels de tekst erboven inneemt */
.card__actions{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.card__buttons{display:flex;flex-wrap:wrap;gap:14px}
.card__hint{font-size:14px;color:var(--muted)}

/* bij een download wijst het pijltje omlaag, dus beweegt het ook omlaag */
.btn--download:hover svg{transform:translateY(3px)}

/* =========================================================
   Contact
   ========================================================= */
.contact{background:var(--band);color:var(--inverse);padding-block:var(--section-y)}
.contact__inner{
  display:grid;gap:clamp(40px,5vw,64px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,470px);
  /* één rasterkolom naar binnen, zoals in het ontwerp */
  padding-inline:clamp(0px,3.4vw,125px);
}
.contact .kicker{color:var(--inverse)}
.contact .kicker::before{background:var(--inverse);opacity:.85}
.contact h2{
  margin-block:22px;
  font-size:clamp(2rem,4.2vw,3.125rem);line-height:1.14;letter-spacing:-.02em;
}
.contact__text p:last-child{max-width:52ch}

.vcard{
  background:var(--paper);color:var(--ink);
  border-radius:var(--radius-card);
  padding:clamp(30px,3.2vw,44px) clamp(26px,3.4vw,46px);
  box-shadow:0 26px 50px -10px rgb(3 15 23 / .32), 0 6px 14px -4px rgb(3 15 23 / .22);
  transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
  will-change:transform;
}
.vcard:hover{
  transform:rotate(-1.3deg) scale(1.025);
  box-shadow:0 38px 70px -12px rgb(3 15 23 / .38), 0 10px 20px -6px rgb(3 15 23 / .26);
}
.vcard__person{display:flex;align-items:center;gap:18px}
.vcard__photo{
  width:80px;height:80px;flex:none;border-radius:50%;
  background:#fff;border:1.5px solid var(--border);
}
.vcard__name{font-weight:600;font-size:21px;line-height:1.4}
.vcard__role{font-size:15px;line-height:1.6;color:var(--muted)}
.vcard hr{margin-block:26px;border:0;border-top:1px solid var(--border)}
.vcard dl{display:grid;gap:26px;margin:0}
.vcard dt{
  font-weight:700;font-size:11px;line-height:1.5;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.vcard dd{margin:2px 0 0}
.vcard dd a{
  font-weight:500;font-size:20px;line-height:1.5;color:var(--accent);
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--t-mid) var(--ease), color var(--t-fast) var(--ease-soft);
}
.vcard dd a:hover{background-size:100% 1.5px;color:var(--accent-hover)}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{background:var(--sand-deep);padding-block:58px}
.footer__top{
  display:grid;align-items:center;gap:28px;
  grid-template-columns:1fr auto 1fr;
}
.footer__logo{width:200px}
.footer__follow{display:flex;align-items:center;gap:14px;justify-self:center}
.footer__follow span{font-weight:500;font-size:15px}
.footer__follow .social a{color:var(--ink)}
.footer__follow .social a:hover{color:var(--accent);background:rgb(42 33 28 / .07)}
.footer__links{
  display:flex;flex-wrap:wrap;gap:40px;justify-content:flex-end;
  list-style:none;padding:0;margin:0;justify-self:end;
}
.footer__links a{
  display:inline-block;padding-block:6px;   /* tikdoel ≥24px hoog */
  font-weight:500;font-size:15px;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--t-mid) var(--ease), color var(--t-fast) var(--ease-soft);
}
.footer__links a:hover{background-size:100% 1.5px;color:var(--accent)}
.site-footer hr{margin-block:30px;border:0;border-top:1px solid var(--border)}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between;
  font-size:15px;color:var(--muted);
}
/* Colofonlinks: geen onderstreping. Ze onderscheiden zich in rust door een
   donkerdere kleur en iets meer gewicht dan de tekst eromheen — anders is
   er zonder hover geen enkel teken dat het een link is. */
.footer__bottom a{
  color:var(--ink);font-weight:500;text-decoration:none;
  transition:color var(--t-fast) var(--ease-soft);
}
.footer__bottom a:hover{color:var(--accent)}


/* =========================================================
   Bladerboek-overlay
   De iframe wordt pas ingeladen bij een klik, zodat er zonder
   toestemming niets naar Heyzine gaat.
   ========================================================= */
.reader{
  width:min(1500px,95vw);height:92vh;max-width:none;max-height:none;
  margin:auto;                 /* herstelt de centrering die *{margin:0} wegneemt */
  padding:0;border:0;border-radius:12px;overflow:hidden;
  background:var(--ink);color:var(--inverse);
  box-shadow:0 40px 120px -20px rgb(0 0 0 / .6);
}
.reader::backdrop{
  background:rgb(24 16 11 / .74);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.reader__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:58px;padding:0 12px 0 22px;background:var(--ink);
}
.reader__title{font-size:15px;font-weight:500;color:rgb(255 255 255 / .82)}
.reader__close{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border:0;border-radius:999px;cursor:pointer;
  background:rgb(255 255 255 / .1);color:var(--inverse);
  font-weight:500;font-size:14px;
  transition:background var(--t-fast) var(--ease-soft);
}
.reader__close:hover{background:rgb(255 255 255 / .2)}
.reader__close svg{width:14px;height:14px}
.reader__frame{display:block;width:100%;height:calc(100% - 58px);border:0;background:var(--ink)}

/* zacht openen (met terugval naar direct tonen) */
@media (prefers-reduced-motion:no-preference){
  .reader{
    opacity:0;transform:scale(.97) translateY(10px);
    transition:opacity .3s var(--ease-soft), transform .45s var(--ease),
               overlay .45s var(--ease) allow-discrete, display .45s var(--ease) allow-discrete;
  }
  .reader[open]{opacity:1;transform:none}
  @starting-style{ .reader[open]{opacity:0;transform:scale(.97) translateY(10px)} }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1180px){
  /* één kolom: paneel én magazine in het midden van de viewport.
     Met `start` bleef het paneel links plakken zodra het smaller
     was dan de container. */
  .hero__inner{grid-template-columns:1fr;justify-items:center;text-align:left}
  .panel{max-width:660px}
  /* magazine boven het paneel; het bevat geen focusbare elementen,
     dus de tabvolgorde blijft kloppen */
  .hero__mag{order:-1}
  .hero__mag img{width:clamp(220px,42vw,380px)}
  .contact__inner{grid-template-columns:1fr;padding-inline:0}
  .vcard{max-width:470px}
}
/* "van de Noordkop" is langer dan de Texelse strapline en breekt eerder;
   daarom verdwijnt hij hier op 980px in plaats van 900px */
@media (max-width:980px){
  .header__tagline{display:none}
}
@media (max-width:900px){
  .header__logo img{width:190px}
  .footer__top{grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px}
  .footer__links{justify-self:center;justify-content:center;gap:26px}
  .footer__bottom{justify-content:center;text-align:center}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{min-height:0}
  .header__inner{min-height:88px}
  .header__logo img{width:164px}
  /* krappere hero-marge + kleiner magazine, zodat de knop op een
     telefoon met ruimte boven de vouw blijft */
  .hero{padding-block:38px}
  /* kleiner magazine, zodat de knop op een telefoon boven de vouw blijft */
  .hero__mag img{width:clamp(150px,46vw,200px)}
  /* "Binnenkort weer online" past anders niet op één regel */
  .kicker{letter-spacing:.14em;gap:12px}
  .kicker::before{width:28px}
  .card__visual{min-height:230px}
  .card__actions .btn{width:100%;justify-content:space-between}
  .footer__links{flex-direction:column;gap:14px}
  .vcard:hover{transform:none}          /* geen kanteling op smalle schermen */
}

/* =========================================================
   Reveal — alleen actief mét JS, zodat de inhoud
   zonder JS gewoon zichtbaar is
   ========================================================= */
/* Let op: de reveal gebruikt bewust `translate` (de losse eigenschap) en een
   `animation`, niet `transform` + `transition`. Anders overschrijft deze regel
   — die specifieker is dan .vcard:hover of .card:hover — zowel de hover-
   transformaties als de eigen transitie van die elementen. */
.js [data-reveal]{opacity:0;translate:0 22px}
.js [data-reveal].is-in{
  animation:reveal .85s var(--ease) both;
  animation-delay:var(--d,0ms);
}
@keyframes reveal{
  from{opacity:0;translate:0 22px}
  to  {opacity:1;translate:0 0}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js [data-reveal]{opacity:1;translate:none;animation:none}
  .btn:hover,.social a:hover,.card:hover,.vcard:hover{transform:none}
  .hero__mag img:hover,.card:hover .card__cover{transform:none}
    .card:nth-child(2) .card__cover{transform:rotate(4.5deg)}
}