/* ============================================================
   STUDENT WELCOME KORTRIJK — shared design system
   Streetwear / spray-paint, condensed type, electric magenta
   ============================================================ */

/* De letters staan als <link> in de head van Base.astro, niet hier als @import.
   Een @import is een ketting: de browser vindt hem pas als dit bestand binnen is,
   en de letterbestanden zelf pas als het blad van Google binnen is. In de head
   ziet de preload-scanner het meteen en lopen ze naast elkaar. */

:root{
  --paper:#f7f4f0;          /* warm off-white */
  --paper-pure:#fffdfb;
  --ink:#141215;            /* near-black */
  --ink-soft:#3a363b;
  --magenta:#ff10ab;        /* electric fuchsia brand */
  --magenta-deep:#cf0888;
  --magenta-ink:#7a0a55;
  --line:#e3ddd5;

  --font-display:'Anton', system-ui, sans-serif;
  --font-cond:'Saira Condensed', system-ui, sans-serif;
  --font-body:'Archivo', system-ui, sans-serif;

  --maxw:1240px;
  --pad:clamp(20px,5vw,64px);
  --nav-h:74px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---- selection ---- */
::selection{background:var(--magenta);color:#fff}

/* ---- typographic primitives ---- */
.kicker{
  font-family:var(--font-cond);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.78rem;
  color:var(--magenta-deep);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.kicker::before{
  content:"";
  width:26px;height:2px;background:var(--magenta);
  display:inline-block;
}
.display{
  font-family:var(--font-display);
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:-.005em;
  font-weight:400;
  margin:0;
}
.cond{font-family:var(--font-cond)}
.section-title{
  font-family:var(--font-display);
  text-transform:uppercase;
  line-height:.9;
  font-size:clamp(2.6rem,7vw,5.5rem);
  margin:0;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;
  height:var(--nav-h);
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  display:flex;align-items:center;
}
.nav-inner{
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;align-items:center;gap:11px;
  font-family:var(--font-display);text-transform:uppercase;
  font-size:1.32rem;letter-spacing:.01em;line-height:1;
}
/* De ronde logo staat rechtop: de scheve stand van vroeger hoorde bij het
   vierkante tegeltje, op een cirkel zou alleen de SW erin scheef gaan hangen. */
.brand .mark{
  width:34px;height:34px;flex:none;
}
.brand b{font-weight:400}
.brand .yr{color:var(--magenta-deep)}

.nav-links{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-cond);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  font-size:.96rem;
}
.nav-links a{
  padding:9px 14px;position:relative;color:var(--ink);
  transition:color .15s;white-space:nowrap;
}
.nav-links a:hover{color:var(--magenta-deep)}
.nav-links a.active{color:var(--magenta-deep)}
.nav-links a.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;
  height:3px;background:var(--magenta);
}
.nav-cta{
  font-family:var(--font-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.95rem;white-space:nowrap;
  background:var(--ink);color:#fff;
  padding:11px 20px;margin-left:8px;
  transition:background .15s, transform .15s;
}
.nav-cta:hover{background:var(--magenta);transform:translateY(-1px)}

.burger{
  display:none;width:46px;height:46px;border:2px solid var(--ink);
  background:var(--paper);cursor:pointer;padding:0;
  flex-direction:column;gap:5px;align-items:center;justify-content:center;
}
.burger span{width:22px;height:2.5px;background:var(--ink);transition:.2s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:55;
  background:var(--ink);color:#fff;
  display:flex;flex-direction:column;
  padding:30px var(--pad);gap:6px;
  transform:translateY(-120%);transition:transform .35s cubic-bezier(.6,.05,.2,1);
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:2.4rem;line-height:1.1;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.mobile-menu a:hover,.mobile-menu a.active{color:var(--magenta)}

@media(max-width:960px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{position:relative}
.pad-y{padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(64px,9vw,120px)}

.dark{background:var(--ink);color:var(--paper)}
.dark .kicker{color:var(--magenta)}
.dark .kicker::before{background:var(--magenta)}
.magenta-bg{background:var(--magenta);color:#fff}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.02rem;
  padding:15px 28px;cursor:pointer;border:2px solid var(--ink);
  background:var(--ink);color:#fff;transition:.18s;
}
.btn:hover{background:var(--magenta);border-color:var(--magenta);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.btn--magenta{background:var(--magenta);border-color:var(--magenta)}
.btn--magenta:hover{background:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 var(--magenta)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--magenta)}
.dark .btn--ghost{color:#fff;border-color:#fff}
.dark .btn--ghost:hover{background:#fff;color:var(--ink)}
.btn .arr{font-family:var(--font-body);font-weight:700}

/* ============================================================
   MARQUEE (tape strip)
   ============================================================ */
.marquee{
  background:var(--magenta);color:#fff;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  overflow:hidden;white-space:nowrap;display:flex;
}
.marquee.ink{background:var(--ink);color:#fff}
.marquee__track{
  display:inline-flex;align-items:center;gap:0;
  padding:11px 0;
  font-family:var(--font-display);text-transform:uppercase;
  font-size:1.15rem;letter-spacing:.02em;
  animation:scrollx 28s linear infinite;
}
/* 13px links en rechts: op de naad tussen twee reeksen telt dat samen op tot de
   26px die ook tussen de woorden binnen een reeks staat, zodat het ritme
   doorloopt en je niet ziet waar de lus overspringt. */
.marquee__track span{padding:0 13px;display:inline-flex;align-items:center;gap:26px}
.marquee__track .dot{width:11px;height:11px;background:#fff;border-radius:50%;display:inline-block}
.marquee.ink .marquee__track .dot{background:var(--magenta)}
/* De balk schuift precies één reeks weg en springt dan terug op nul; reeks twee
   staat op dat moment waar reeks een stond, dus je ziet de sprong niet.
   --marquee-seq is de breedte van die ene reeks -- site.js zet er een
   pixelwaarde in zodra hij gemeten heeft. Los van het aantal reeksen dus: klonen
   bijzetten schuift de balk niet meer opzij. De 50% is de terugval voor als
   site.js niet draait en klopt voor de twee reeksen die in de HTML staan. */
@keyframes scrollx{to{transform:translateX(calc(var(--marquee-seq, 50%) * -1))}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ============================================================
   SPRAY EFFECTS
   ============================================================ */
.spray-x-watermark{
  position:absolute;pointer-events:none;z-index:0;
  opacity:.9;mix-blend-mode:normal;
}
.spray-rough{ filter:url(#sprayRough); }
/* sprayed underline used under words */
.spray-underline{position:relative;display:inline-block}
.spray-underline::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:-.12em;height:.22em;
  background:var(--magenta);
  filter:url(#sprayRough);
  z-index:-1;
}

/* corner registration ticks */
.ticks::before,.ticks::after{
  content:"";position:absolute;width:18px;height:18px;pointer-events:none;
  border:var(--ink) solid;border-width:0;
}

/* ============================================================
   COUNTDOWN
   ============================================================ */
.countdown{display:flex;gap:clamp(10px,2.4vw,30px);flex-wrap:wrap}
.cd-unit{
  text-align:center;min-width:clamp(74px,15vw,128px);
}
.cd-num{
  font-family:var(--font-display);
  font-size:clamp(3rem,9vw,6.6rem);line-height:.82;
  font-variant-numeric:tabular-nums;
}
.cd-label{
  font-family:var(--font-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.22em;font-size:.74rem;margin-top:10px;
  color:var(--magenta-deep);
}
.dark .cd-label{color:var(--magenta)}
.magenta-bg .cd-label{color:#fff;opacity:.85}

/* ============================================================
   PLACEHOLDER (image slots)
   ============================================================ */
.ph{
  position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(135deg,
      rgba(20,18,21,.05) 0 11px, rgba(20,18,21,0) 11px 22px),
    var(--paper-pure);
  border:2px solid var(--ink);
  display:grid;place-items:center;
  color:var(--ink-soft);
}
.ph::after{
  content:attr(data-label);
  font-family:'Courier New',monospace;text-transform:uppercase;
  letter-spacing:.12em;font-size:.74rem;font-weight:700;
  background:var(--paper);padding:5px 11px;border:1.5px solid var(--ink-soft);
  color:var(--ink-soft);
}
.ph.dark-ph{
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.07) 0 11px, rgba(255,255,255,0) 11px 22px),
    #211d22;
  border-color:#fff;
}
.ph.dark-ph::after{background:#211d22;color:#cfc7cf;border-color:#6a626c}
.ph.magenta-ph{
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.16) 0 11px, rgba(255,255,255,0) 11px 22px),
    var(--magenta);
  border-color:var(--ink);
}
.ph.magenta-ph::after{background:var(--magenta);color:#fff;border-color:#fff}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--paper-pure);border:2px solid var(--ink);
  position:relative;transition:transform .18s, box-shadow .18s;
}
.card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--magenta)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:var(--paper)}
.foot-top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-top:clamp(56px,7vw,90px);padding-bottom:48px;
}
.foot-logo{font-family:var(--font-display);text-transform:uppercase;font-size:2.6rem;line-height:.9}
.foot-logo .yr{color:var(--magenta)}
.foot-h{
  font-family:var(--font-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.78rem;color:var(--magenta);margin:0 0 16px;
}
.foot-list{display:flex;flex-direction:column;gap:9px;font-family:var(--font-cond);font-size:1.05rem;font-weight:500}
.foot-list a:hover{color:var(--magenta)}
.foot-addr{color:#b9b1ba;font-size:.96rem;line-height:1.7}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.14);
  padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:18px;
  flex-wrap:wrap;
  font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;
  color:#9a929b;
}
.foot-socials{display:flex;gap:10px}
.foot-socials a{
  width:40px;height:40px;border:2px solid rgba(255,255,255,.3);
  display:grid;place-items:center;font-family:var(--font-cond);font-weight:700;font-size:.8rem;
  transition:.16s;color:#fff;
}
.foot-socials a:hover{background:var(--magenta);border-color:var(--magenta)}
@media(max-width:760px){.foot-top{grid-template-columns:1fr 1fr}.foot-logo{grid-column:1/-1}}
@media(max-width:480px){.foot-top{grid-template-columns:1fr}}

/* ---- utility ---- */
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.6;color:var(--ink-soft);max-width:60ch}
.dark .lead{color:#c8c1c9}
.eyebrow-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
/* Scroll-reveal: content is ALWAYS visible by default. JS adds .reveal-armed
   to hide the start state only after it has verified the observer actually
   fires, so motion is a pure enhancement and never gates content. */
.reveal{opacity:1;transform:none}
.reveal-armed{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal-armed.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal-armed{opacity:1;transform:none}}