@font-face { font-family: "Schibsted Grotesk"; src: url(../fonts/schibsted-grotesk.woff) format("woff"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(../fonts/schibsted-grotesk-italic.woff) format("woff"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(../fonts/cormorant-garamond-italic.woff) format("woff"); font-weight: 300 700; font-style: italic; font-display: swap; }
:root {
  --paper: #f4f6f2;
  --surface: #eaf0ec;
  --ink: #0f1813;
  --muted: #5a675f;
  --line: #cfdad2;
  --codex: #154a2f;
  --felt: #0c3420;
  --felt-ink: #f3f7f4;
  --felt-muted: #a9c2b1;
  --mint: #1b4a31;
  --mint-ink: #f3f7f4;
  --mint-muted: #b7cdbd;
  --gold: #b8913f;
  --font-display: "Apple Chancery", "Cormorant Garamond", Georgia, serif;
  --font-body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --measure: 62ch;
  --max: 1200px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.65;
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); }
main { flex: 1; }
a { color: var(--codex); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
img { display: block; max-width: 100%; }
p { max-width: var(--measure); margin: 0; }

.wrap {
  max-width: var(--max); margin: 0 auto; width: 100%;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack-lg { display: flex; flex-direction: column; gap: 28px; }

h1, h2, h3, .chancery {
  font-family: var(--font-display); font-style: italic; font-synthesis: none; font-weight: 700;
  line-height: 1.22; letter-spacing: 0; margin: 0; text-wrap: balance;
  padding-block: .08em .14em;
}
h1 { font-size: clamp(2.8rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
h3 { font-size: clamp(1.55rem, 2.4vw, 1.9rem); }

.label {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 10px;
}
.label::before { content: ""; width: 22px; height: 1px; background: var(--gold); }
.lead { font-size: 1.2rem; line-height: 1.6; }
.muted { color: var(--muted); }

.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand img { width: 34px; height: auto; }
.brand .chancery { font-size: 1.45rem; padding: 0; line-height: 1; }
.nav { display: flex; gap: 26px; }
.nav a { color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 500; padding-block: 22px; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 2px; background: var(--codex); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--codex); }
.menu-btn { display: none; background: none; border: 1px solid var(--line); color: var(--ink); font: 600 .9rem var(--font-body); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
@media (max-width: 980px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px max(20px, env(safe-area-inset-right, 0px)) 20px max(20px, env(safe-area-inset-left, 0px)); }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
}

.view[hidden] { display: none !important; }

.has-sub { position: relative; display: flex; }
.sub-toggle { background: none; border: 0; color: var(--ink); font: 500 .92rem var(--font-body); padding: 22px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; position: relative; }
.sub-toggle::after { content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 2px; background: var(--codex); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.has-sub.active .sub-toggle { color: var(--codex); }
.has-sub.active .sub-toggle::after, .sub-toggle:hover::after { transform: scaleX(1); }
.caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.has-sub.open .caret { transform: translateY(1px) rotate(-135deg); }
.sub { display: none; position: absolute; top: calc(100% - 6px); left: -18px; min-width: 210px; background: var(--paper); border: 1px solid var(--line); padding: 8px 0; box-shadow: 0 12px 32px rgba(10,30,18,.10); }
.has-sub.open .sub { display: flex; flex-direction: column; }
@media (hover: hover) and (min-width: 981px) { .has-sub:hover .sub { display: flex; flex-direction: column; } .has-sub:hover .caret { transform: translateY(1px) rotate(-135deg); } }
.sub a { padding: 10px 18px; font-size: .92rem; }
.sub a::after { display: none; }
.sub a:hover { background: var(--surface); color: var(--codex); }
.sub a[aria-current="page"] { color: var(--codex); box-shadow: inset 2px 0 0 var(--codex); }
@media (max-width: 980px) {
  .has-sub { flex-direction: column; }
  .sub-toggle { padding: 14px 0; font-size: 1.1rem; border-bottom: 1px solid var(--line); justify-content: space-between; width: 100%; }
  .sub-toggle::after { display: none; }
  .sub { position: static; box-shadow: none; border: 0; padding: 0 0 0 16px; min-width: 0; background: transparent; }
  .sub a { padding: 12px 0; font-size: 1rem; border-bottom: 1px solid var(--line); }
}

.subnav { border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { flex: none; color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 600; padding: 16px 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] { color: var(--codex); border-bottom-color: var(--codex); }


.hero { position: relative; background: #080c09; color: #fff; }
.hero { overflow: hidden; }
.hero picture img { width: 100%; height: clamp(440px, 64vw, 820px); object-fit: cover; object-position: 50% 74%;
  transform: scale(1.04) translateZ(0); will-change: transform; backface-visibility: hidden; animation: drift 40s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04) translateZ(0); } to { transform: scale(1.1) translateZ(0); } }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,30,18,.65) 0%, rgba(7,40,24,.40) 40%, rgba(4,22,13,.92) 100%),
    linear-gradient(0deg, rgba(16,66,41,.45), rgba(16,66,41,.45)); }
.hero-copy { position: absolute; inset: auto 0 0; z-index: 1; padding-block: 40px 48px; }
.hero-copy .wrap { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.hero-copy .label { color: rgba(255,255,255,.82); }
.hero h1 { font-size: clamp(3rem, 8.5vw, 7rem); margin-block: 14px 10px; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.hero .motto { font-size: clamp(1.6rem, 3.4vw, 2.3rem); color: rgba(255,255,255,.94); padding-top: 4px; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.hero .since { text-align: right; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); line-height: 1.8; }
.hero .since strong { display: block; font-family: var(--font-display); font-style: italic; font-synthesis: none; letter-spacing: 0; text-transform: none; font-size: 2.6rem; color: #fff; line-height: 1.2; }
@media (max-width: 640px) { .hero-copy .wrap { grid-template-columns: 1fr; } .hero .since { display: none; } }

.felt { background: var(--felt); color: var(--felt-ink); position: relative; }
.felt::before, .felt::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--gold); opacity: .7; }
.felt::before { top: 6px; } .felt::after { bottom: 6px; }
.view > .felt:last-child::after { display: none; }
.felt .label { color: var(--felt-muted); }
.felt a { color: var(--felt-ink); }
.felt h1, .felt h2, .felt h3 { color: var(--felt-ink); }
.felt .muted { color: var(--felt-muted); }
.felt.block { padding-block: 88px; }
.felt .pillars > div { border-top: 1px solid rgba(255,255,255,.25); padding-top: 18px; }
.page-head h1 { color: var(--mint-ink) !important; }
.page-head .label { color: var(--mint-muted); }
.page-head .lead { color: var(--mint-muted) !important; }
.page-head .wm { color: var(--mint-ink) !important; opacity: .1 !important; }
.lustrum { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; padding-block: 88px; }
.lustrum > * { min-width: 0; }
.lustrum .poster { border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); padding: 8px; }
.lustrum .poster img { width: 100%; aspect-ratio: 1640 / 924; object-fit: cover; }
.facts-row { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 40px; padding-top: 4px; }
.facts-row div { display: flex; flex-direction: column; gap: 2px; }
.facts-row dt { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--felt-muted); }
.facts-row dd { margin: 0; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .lustrum { grid-template-columns: 1fr; gap: 40px; padding-block: 64px; } }
@media (max-width: 480px) { .facts-row { grid-template-columns: 1fr 1fr; } }

.btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 12px 22px; font: 700 .92rem var(--font-body); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s, color .15s; }
.btn-light { background: #fff; color: var(--felt) !important; }
.btn-light:hover { background: var(--mint); }
.btn-line { border-color: rgba(255,255,255,.55); color: #fff !important; background: transparent; }
.btn-line:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-solid { background: var(--codex); color: var(--paper) !important; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; padding: 7px 14px; font-size: .82rem; }
.btn-ghost:hover { border-color: var(--codex); color: var(--codex); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.arrow { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.arrow span { transition: transform .2s ease; }
.arrow:hover span { transform: translateX(4px); }

.teaser { display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; padding-block: 96px; }
.teaser > * { min-width: 0; }
.teaser .big { font-family: var(--font-display); font-style: italic; font-synthesis: none; font-weight: 700; font-size: clamp(5rem, 13vw, 10rem); line-height: 1.1; color: var(--codex); padding-block: .05em .12em; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .teaser { grid-template-columns: 1fr; gap: 16px; padding-block: 72px; } }

.page-head { padding-block: 88px 56px; border-bottom: 1px solid var(--line); background: var(--mint); }
.page-head .wrap { display: flex; flex-direction: column; gap: 22px; }
.page-head h1 { color: var(--ink); max-width: 16ch; }
.page-head .lead { color: var(--muted); }
@media (max-width: 640px) { .page-head { padding-block: 56px 40px; } }

section.block { padding-block: 80px; }
section.block + section.block { border-top: 1px solid var(--line); }
@media (max-width: 640px) { section.block { padding-block: 56px; } }

.split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: center; }
.split > * { min-width: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 48px; } }
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts div:first-child { border-top: 1px solid var(--ink); }
.facts dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); padding-top: 4px; }
.facts dd { margin: 0; font-weight: 500; }
.facts .vcf { font-family: var(--font-display); font-style: italic; font-synthesis: none; font-weight: 700; font-size: 1.35rem; color: var(--codex); }
.wide-photo { margin: 0; }
.wide-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 62%; }
.wide-photo figcaption { font-size: .85rem; color: var(--muted); padding-top: 12px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.pillars > div { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; gap: 36px; } }

.chapters { display: flex; flex-direction: column; }
.chapter { display: grid; grid-template-columns: 240px 1fr; gap: 56px; padding-block: 56px; border-top: 1px solid var(--line); }
.chapter:first-child { border-top: 0; padding-top: 0; }
.chapter > * { min-width: 0; }
.chapter .when { position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; gap: 6px; }
.chapter .when .yr { font-family: var(--font-display); font-style: italic; font-synthesis: none; font-weight: 700; font-size: 2.6rem; line-height: 1.2; color: var(--codex); font-variant-numeric: tabular-nums; }
.chapter .body { display: flex; flex-direction: column; gap: 18px; }
.chapter .body h2 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.chapter.key .when .yr { color: var(--gold); }
@media (max-width: 760px) { .chapter { grid-template-columns: 1fr; gap: 14px; padding-block: 44px; } .chapter .when { position: static; } }

.song { display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: start; }
.song + .song { margin-top: 80px; padding-top: 80px; border-top: 1px solid var(--line); }
.song > * { min-width: 0; }
.song figure { margin: 0; position: sticky; top: 110px; }
.song figure button { padding: 0; border: 1px solid var(--line); background: var(--surface); cursor: zoom-in; display: block; width: 100%; }
.song figure img { width: 100%; }
.song figcaption { font-size: .8rem; color: var(--muted); padding-top: 8px; }
.song .head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 32px; }
.credits { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: .92rem; }
.credits div { display: flex; flex-direction: column; }
.credits dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.credits dd { margin: 0; font-weight: 600; }
.lyrics { display: flex; flex-direction: column; gap: 26px; font-size: 1.08rem; line-height: 1.75; }
.verse { display: grid; grid-template-columns: 2rem 1fr; }
.verse .num { color: var(--muted); font-size: .85rem; padding-top: 3px; font-variant-numeric: tabular-nums; }
.verse .in { padding-left: 1.6em; display: inline-block; }
.refrein { margin-left: 2rem; padding-left: 18px; border-left: 2px solid var(--codex); font-style: italic; }
.refrein .tag { display: block; font-style: normal; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--codex); padding-bottom: 4px; }
@media (max-width: 700px) { .song { grid-template-columns: 1fr; gap: 28px; } .song figure { position: static; max-width: 220px; } }

.recurring { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; align-items: start; }
.r-event { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.r-event .img { overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.r-event img { width: 100%; height: auto; transition: transform .4s ease; }
.r-event a:hover img { transform: scale(1.03); }
.r-event .when { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--codex); }
.r-event.text-only { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 2fr; gap: 16px 32px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 28px; }
.r-event.text-only > * { min-width: 0; }
@media (max-width: 900px) { .recurring { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .recurring { grid-template-columns: 1fr; } .r-event.text-only { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .r-event img, .arrow span, .nav a::after { transition: none; } }

.current { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.current > div { min-width: 0; padding: 22px 20px 26px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.current > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.current .role { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.current .name { font-family: var(--font-display); font-style: italic; font-synthesis: none; font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.2; padding-block: .05em .12em; }
@media (max-width: 760px) { .current { grid-template-columns: 1fr 1fr; } .current > div:nth-child(3) { padding-left: 0; border-left: 0; } }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 600px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
thead th { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); }
td.year { font-weight: 700; white-space: nowrap; }
tr.more td { color: var(--muted); letter-spacing: .2em; border-bottom: 0; }
tbody tr:hover td { background: var(--surface); }

.senioren { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 32px; }
.senioren li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.senioren .n { font-weight: 600; }
.senioren .y { color: var(--muted); font-size: .85rem; }
.founder { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--ink); }
.founder .chancery { font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--gold); }


.mono { display: inline-block; aspect-ratio: 800 / 793; background: currentColor;
  -webkit-mask: url(../img/monogram-mask.png) center / contain no-repeat; mask: url(../img/monogram-mask.png) center / contain no-repeat; }
.brand .mono { width: 36px; color: var(--codex); }
.hero .since .mono { width: 64px; color: #fff; opacity: .92; margin: 0 0 10px auto; display: block; }
.felt { overflow: hidden; }
.felt .wm { position: absolute; top: 50%; width: clamp(260px, 30vw, 420px); color: var(--felt-ink); opacity: .07; transform: translateY(-50%); pointer-events: none; }
.felt .wm.l { left: -90px; } .felt .wm.r { right: -90px; }
.felt .wrap { position: relative; z-index: 1; }
.page-head { position: relative; overflow: hidden; }
.page-head .wm { position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); width: clamp(120px, 18vw, 230px); color: var(--codex); opacity: .12; pointer-events: none; }
@media (max-width: 640px) { .page-head .wm { opacity: .07; right: -30px; } }
.intro-mono { width: clamp(140px, 20vw, 260px); color: var(--codex); }
.facts .mono { width: 46px; color: var(--codex); float: right; margin-left: 12px; }
footer .mono { width: 58px; color: var(--felt-ink); }

.brand .shield { width: 32px; height: auto; }
.hero .since .shield { width: 74px; height: auto; margin: 0 0 12px auto; display: block; filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
.intro-shield { width: clamp(150px, 20vw, 250px); height: auto; filter: drop-shadow(0 10px 24px rgba(15,40,25,.14)); }
.sticker { width: 200px; height: auto; transform: rotate(-7deg); filter: drop-shadow(0 8px 18px rgba(10,30,18,.18)); }
.sticker-float { float: right; margin: 0 0 18px 28px; shape-outside: circle(50%); }
@media (max-width: 760px) { .sticker-float { float: none; margin: 4px 0 8px; width: 150px; } }
footer .sticker { width: 74px; transform: rotate(-8deg); filter: none; }
.over-shield { display: flex; justify-content: center; padding-bottom: 28px; }
.over-shield img { width: 170px; height: auto; }

.decades { display: flex; flex-direction: column; }
.decade { display: grid; grid-template-columns: 200px 1fr; gap: 40px; padding-block: 36px; border-top: 1px solid var(--line); }
.decade:first-child { border-top: 1px solid var(--ink); }
.decade > * { min-width: 0; }
.decade .dec { font-family: var(--font-display); font-style: italic; font-synthesis: none; font-weight: 700; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.2; color: var(--codex); padding-block: .05em .12em; font-variant-numeric: tabular-nums; }
.decade ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 28px; }
.decade li { display: flex; flex-direction: column; gap: 2px; }
.decade .n { font-size: 1.15rem; font-weight: 700; }
.decade .y { font-size: .8rem; color: var(--muted); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.decade li.founder { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 2px; padding: 0; margin: 0; border: 0; }
.decade li.now .n { color: var(--codex); }
.decade li.now .y::after { content: " · huidig"; color: var(--codex); font-weight: 700; }
.decade li.founder .n { font-family: var(--font-display); font-style: italic; font-synthesis: none; font-size: 1.7rem; color: var(--gold); line-height: 1.2; }
@media (max-width: 700px) { .decade { grid-template-columns: 1fr; gap: 14px; padding-block: 28px; } .decade ol { grid-template-columns: repeat(2, 1fr); } }

.nar-disc { margin: 18px 0 0; width: 210px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: end center; overflow: hidden;
  box-shadow: 0 0 0 4px var(--codex), 0 0 0 10px var(--paper), 0 0 0 11px var(--gold), 0 18px 40px rgba(8,40,24,.18); transform: rotate(-3deg); transition: transform .5s ease; }
.nar-disc:hover { transform: rotate(2deg) scale(1.03); }
.nar-disc img { width: 88%; height: auto; transform: translateY(6%); }
@media (max-width: 760px) { .nar-disc { width: 170px; margin: 14px 0 6px 12px; } }
.lus { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lus svg { width: 18px; height: 18px; flex: none; }
.decade .n { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lus-legend { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; padding-bottom: 20px; }


@keyframes rise { from { opacity: .15; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-copy .label, .hero h1, .hero .motto, .hero .since { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 { animation-delay: .12s; } .hero .motto { animation-delay: .28s; } .hero .since { animation-delay: .4s; }

.marquee { background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden; padding-block: 18px; }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-family: var(--font-display); font-style: italic; font-synthesis: none; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.3; color: var(--codex); padding-inline: 28px; white-space: nowrap; display: inline-flex; align-items: center; gap: 56px; }
.marquee span::after { content: ""; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 76px)); gap: 10px; }
.countdown div { border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 8px; padding: 10px 6px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; background: rgba(0,0,0,.16); }
.countdown b { color: var(--felt-ink); font-size: 1.7rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown small { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--felt-muted); }
.countdown-live { font-family: var(--font-display); font-style: italic; font-synthesis: none; font-weight: 700; font-size: 1.8rem; color: var(--gold); }

.view.enter { animation: pageIn .45s ease both; }
@keyframes pageIn { from { opacity: .2; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.poster, .r-event .img, .next-event a.poster { transition: transform .35s ease, box-shadow .35s ease; }
.poster:hover, .r-event .img:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(8,40,24,.22); }
.btn { transition: background .15s, color .15s, transform .15s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.intro-shield { transition: transform .5s ease; }
.intro-shield:hover { transform: rotate(-4deg) scale(1.03); }
.sticker { transition: transform .4s ease; }
.sticker:hover { transform: rotate(4deg) scale(1.05); }
.decade li { transition: transform .2s ease; }
.decade li:hover { transform: translateX(4px); }
.felt .wm { animation: floaty 9s ease-in-out infinite alternate; }
.felt .wm.r { animation-delay: -4.5s; }
@keyframes floaty { from { transform: translateY(-50%) rotate(-3deg); } to { transform: translateY(-46%) rotate(3deg); } }

@supports (animation-timeline: view()) {
  .chapter, .song, .r-event, .decade, .pillars > div, .teaser > *, .wide-photo, .current > div, .lustrum > * {
    animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero picture img, .marquee-track, .felt .wm, .view.enter, .hero-copy .label, .hero h1, .hero .motto, .hero .since { animation: none !important; }
  .chapter, .song, .r-event, .decade, .pillars > div, .teaser > *, .wide-photo, .current > div, .lustrum > * { animation: none !important; }
  .marquee-track { flex-wrap: wrap; width: auto; }
}

:root { --head-h: 68px; }
main { margin-top: calc(var(--head-h) * -1); }
.view > :first-child:not(.hero) { border-top: var(--head-h) solid transparent; }
.site-head { transition: background-color .3s ease, border-color .3s ease; }
.site-head .brand, .site-head .nav a, .site-head .sub-toggle, .site-head .menu-btn { transition: color .3s ease, border-color .3s ease; }
.site-head.on-dark { background: color-mix(in srgb, var(--felt) 70%, transparent); border-bottom-color: rgba(255,255,255,.14); }
.site-head.on-dark .brand, .site-head.on-dark .nav a, .site-head.on-dark .sub-toggle,
.site-head.on-dark .nav a[aria-current="page"], .site-head.on-dark .has-sub.active .sub-toggle { color: #fff; }
.site-head.on-dark .nav a::after, .site-head.on-dark .sub-toggle::after { background: var(--gold); }
.site-head.on-dark .menu-btn { color: #fff; border-color: rgba(255,255,255,.4); }
.site-head.on-dark .sub { background: var(--felt); border-color: rgba(255,255,255,.14); box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.site-head.on-dark .sub a:hover { background: rgba(255,255,255,.08); color: #fff; }
.site-head.on-dark .sub a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--gold); }
body.head-dark::before { background: var(--felt); }
@media (max-width: 980px) {
  .site-head.on-dark .nav { background: var(--felt); border-bottom-color: rgba(255,255,255,.14); }
  .site-head.on-dark .nav a, .site-head.on-dark .sub-toggle, .site-head.on-dark .sub a { border-bottom-color: rgba(255,255,255,.14); }
}


.year-list { display: flex; flex-direction: column; gap: 72px; padding-top: 24px; }
.yr-event { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.yr-event.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.yr-event.flip .yr-img { order: 2; }
.yr-img { display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 14px 36px rgba(8,40,24,.12); transition: transform .35s ease, box-shadow .35s ease; }
.yr-img img { width: 100%; height: auto; display: block; }
.yr-img:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), 0 22px 48px rgba(8,40,24,.2); }
.yr-text { display: flex; flex-direction: column; gap: 12px; max-width: 46ch; }
.yr-text h3 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.yr-text .when { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--codex); }
.yr-event.ginto { background: var(--felt); color: var(--felt-ink); border-radius: 10px; padding: 48px; grid-template-columns: minmax(0, 1fr); gap: 0; }
.ginto .yr-text { max-width: 62ch; }
.ginto .yr-text h3 { color: var(--felt-ink); }
.ginto .yr-text .when { color: var(--gold); }
.ginto .muted { color: var(--felt-muted); }
.ginto-mark { font-family: var(--font-display); font-style: italic; font-synthesis: none; font-weight: 700; font-size: clamp(4rem, 9vw, 6.5rem); line-height: 1.15; color: var(--gold); padding-inline: 8px; white-space: nowrap; }
@media (max-width: 820px) {
  .year-list { gap: 52px; }
  .yr-event, .yr-event.flip { grid-template-columns: 1fr; gap: 20px; }
  .yr-event.flip .yr-img { order: 0; }
  .yr-event.ginto { grid-template-columns: 1fr; padding: 32px 24px; gap: 8px; }
}
@supports (animation-timeline: view()) { .yr-event { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; } }
@media (prefers-reduced-motion: reduce) { .yr-event { animation: none !important; } .yr-img { transition: none; } }

.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px; }
.sponsor { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); min-width: 0; }
.sponsor .tile { aspect-ratio: 16 / 9; border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 28px; border: 1px solid var(--line); transition: transform .35s ease, box-shadow .35s ease; }
.sponsor .tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sponsor:hover .tile { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(8,40,24,.16); }
.sponsor .name { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; }
.sponsor .name small { font-weight: 600; color: var(--codex); font-size: .8rem; letter-spacing: .04em; }
.sponsor-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.sponsor-cta .stack { max-width: 60ch; }
@media (prefers-reduced-motion: reduce) { .sponsor .tile { transition: none; } }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sen-now { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px; background: var(--felt); color: var(--felt-ink); border-radius: 14px; padding: 44px 48px; margin-bottom: 72px; }
.sen-now .label { color: var(--felt-muted); }
.sen-now-text { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sen-now-name { font-family: var(--font-display); font-style: italic; font-synthesis: none; font-weight: 700; font-size: clamp(3.2rem, 8vw, 5.5rem); line-height: 1.12; padding-block: .02em .12em; color: #fff; }
.sen-now .lus { color: var(--gold); font-size: .8rem; }
.sen-now .lus svg { width: 22px; height: 22px; }
.sen-now .mono { width: clamp(90px, 14vw, 150px); color: var(--felt-ink); opacity: .16; flex: none; }
.tl { position: relative; display: flex; flex-direction: column; }
.tl::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-1px); background: var(--line); }
.tl-block { position: relative; padding-bottom: 40px; }
.tl-dec { position: relative; display: flex; justify-content: center; padding-block: 8px 24px; }
.tl-dec span { position: relative; z-index: 1; background: var(--paper); border: 1px solid var(--codex); color: var(--codex); border-radius: 999px; padding: .28em 1.15em .4em; font-family: var(--font-display); font-style: italic; font-synthesis: none; font-weight: 700; font-size: 1.6rem; line-height: 1.35; white-space: nowrap; display: inline-flex; align-items: center; min-height: 2.4em; font-variant-numeric: tabular-nums; }
.tl-list { list-style: none; margin: 0; padding: 0 0 30px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 88px; row-gap: 14px; }
.tl-item { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 20px; display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; transition: border-color .2s ease, box-shadow .2s ease; }
.tl-item:hover { border-color: var(--codex); box-shadow: 0 10px 24px rgba(8,40,24,.10); }
.tl-item:nth-child(odd) { flex-direction: row-reverse; justify-content: flex-start; }
.tl-item:nth-child(even) { transform: translateY(30px); }
.tl-item::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--codex); transform: translateY(-50%); }
.tl-item:nth-child(odd)::after { right: -51px; }
.tl-item:nth-child(even)::after { left: -51px; }
.tl-item.lus-item { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.tl-item.lus-item::after { background: var(--gold); border-color: var(--gold); }
.tl-y { font-size: .82rem; color: var(--muted); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tl-n { font-weight: 700; font-size: 1.15rem; }
.tl-item .lus { font-size: .68rem; }
.sen-founder { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 8px; }
.sen-founder .mono { width: 86px; color: var(--codex); background-color: var(--codex); margin-bottom: 10px; }
.sen-founder .chancery { font-size: clamp(2.6rem, 5vw, 3.4rem); color: var(--gold); line-height: 1.15; }
@media (max-width: 760px) {
  .sen-now { padding: 32px 26px; margin-bottom: 48px; }
  .tl::before { left: 8px; transform: none; }
  .tl-dec { justify-content: flex-start; }
  .tl-list { grid-template-columns: 1fr; padding: 0 0 0 36px; row-gap: 12px; }
  .tl-item:nth-child(odd) { flex-direction: row; }
  .tl-item:nth-child(even) { transform: none; }
  .tl-item:nth-child(odd)::after, .tl-item:nth-child(even)::after { left: -35px; right: auto; }
  .sen-founder { align-items: flex-start; text-align: left; padding-left: 0; }
}
.arrow { min-height: 44px; }
.brand { min-height: 44px; }
.menu-btn { min-height: 44px; padding-inline: 18px; }
.copy-row a.val { display: inline-flex; align-items: center; min-height: 44px; }
.subnav .wrap { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); scroll-padding-inline: 20px; }
.subnav .wrap.at-end { -webkit-mask-image: none; mask-image: none; }
.subnav a { padding-block: 14px; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 760px) {
  .lus, .tl-item .lus { font-size: .74rem; }
  .countdown small { font-size: .72rem; }
  .countdown { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 340px; }
  .hero picture img { height: clamp(420px, 92vw, 560px); }
}
.legal { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.legal h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); color: var(--codex); padding-top: 18px; }
.legal h2:first-child { padding-top: 0; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--muted); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--codex); flex: none; }
.consent a { color: var(--codex); font-weight: 600; }
.form { display: flex; flex-direction: column; gap: 18px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form .row2 > * { min-width: 0; }
@media (max-width: 560px) { .form .row2 { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { font: 400 1rem var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; width: 100%; }
.field select { -webkit-appearance: none; appearance: none; color-scheme: light; color: var(--ink); background-color: var(--surface); cursor: pointer; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, #154a2f 50%), linear-gradient(135deg, #154a2f 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field select option { color: var(--ink); background-color: var(--surface); }
.field select option:checked, .field select option:hover { color: #fff; background-color: #154a2f; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--codex); outline-offset: 0; border-color: var(--codex); }
.field .err { color: #b3261e; font-size: .85rem; }
.form-note { font-size: .88rem; color: var(--muted); }
.sent { border: 1px solid var(--codex); border-radius: 8px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); }
.sent pre { margin: 0; white-space: pre-wrap; font: .9rem/1.5 var(--font-body); color: var(--muted); max-height: 180px; overflow: auto; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.contact-grid > * { min-width: 0; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }
.copy-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--line); }
.copy-row:first-of-type { border-top: 1px solid var(--ink); }
.copy-row .lbl { width: 6rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.copy-row a.val { color: var(--codex); text-decoration: none; }
.copy-row a.val:hover { text-decoration: underline; }
.copy-row .val { font-weight: 600; font-size: 1.05rem; user-select: all; overflow-wrap: anywhere; flex: 1; min-width: 0; }

footer { background: var(--felt); color: var(--felt-ink); position: relative; }
footer .chancery { color: var(--felt-ink); }
footer::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: var(--gold); opacity: .7; }
footer .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding-block: 48px; }
footer img { width: 56px; height: auto; }
footer .chancery { font-size: 1.9rem; }
footer .fine { color: var(--felt-muted); font-size: .85rem; display: flex; flex-direction: column; gap: 6px; text-align: right; }
footer .fine a { color: var(--felt-ink); }
@media (max-width: 640px) { footer .wrap { grid-template-columns: auto 1fr; } footer .fine { grid-column: 1 / -1; text-align: left; } }

dialog { border: 0; padding: 0; background: transparent; max-width: min(92vw, 720px); }
dialog::backdrop { background: rgba(4,8,5,.85); }
dialog img { max-height: 86vh; }
dialog button { position: absolute; top: 10px; right: 10px; background: var(--paper); color: var(--ink); border: 0; border-radius: 999px; padding: 8px 14px; font: 700 .85rem var(--font-body); cursor: pointer; }