/* ============================================================
   Lex van Delden Stichting — lexvandelden.org
   Heruitgave 2026 van de site uit 2003–2012.
   Palet: papierwit met marood (uit de oorspronkelijke stylesheet)
   en een vleug salie (het oude kadergroen #AFCE9D, gedempt).
   ============================================================ */

/* ---------- fonts (self-hosted, no external requests) ---------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/source-serif-4-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/source-serif-4-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/source-serif-4-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/archivo-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/archivo-latin-600-normal.woff2') format('woff2')}

/* ---------- tokens ---------- */
:root{
  --paper:#FBFAF6;
  --ink:#26211C;
  --maroon:#7C2B23;
  --maroon-deep:#591E17;
  --sage:#8FA37E;
  --rule:#E6E1D4;
  --rule-dark:#CCC4B2;
  --meta:#6F675A;
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Source Serif 4',Georgia,serif;
  --label:'Archivo','Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
}
img{max-width:100%;height:auto}
a{color:var(--maroon);text-decoration-color:rgba(124,43,35,.35);text-underline-offset:3px;transition:color .15s ease}
a:hover{color:var(--maroon-deep);text-decoration-color:var(--maroon-deep)}
:focus-visible{outline:2px solid var(--maroon);outline-offset:2px;border-radius:1px}
::selection{background:var(--maroon);color:var(--paper)}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;color:var(--ink);margin:0}
em,i{font-style:italic}
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}

.eyebrow{
  font-family:var(--label);font-size:.7rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--meta);
}

/* ---------- shell: rail + main ---------- */
.shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}

.rail{
  border-right:1px solid var(--rule);
  padding:2.2rem 1.6rem 1.6rem;
  position:sticky;top:0;align-self:start;height:100vh;
  display:flex;flex-direction:column;gap:1.6rem;
}
.brand{display:block;text-decoration:none;color:var(--ink)}
.brand .mark{width:44px;height:44px;display:block;margin-bottom:.7rem;opacity:.9}
.brand .name{font-family:var(--display);font-weight:600;font-size:1.45rem;line-height:1.1;display:block}
.brand .sub{font-family:var(--label);font-size:.62rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--maroon);display:block;margin-top:.35rem}
.brand:hover .name{color:var(--maroon-deep)}

.nav{display:flex;flex-direction:column;gap:.15rem;font-family:var(--label);font-size:.78rem;font-weight:500;letter-spacing:.06em}
.nav a{display:block;padding:.42rem .6rem .42rem .75rem;text-decoration:none;color:var(--ink);border-left:2px solid transparent}
.nav a:hover{color:var(--maroon-deep);border-left-color:var(--rule-dark)}
.nav a[aria-current="page"]{color:var(--maroon);border-left-color:var(--maroon);font-weight:600}
.nav .nav-sep{border-top:1px solid var(--rule);margin:.55rem .6rem .55rem .75rem}

.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:.9rem}
.lang-toggle{font-family:var(--label);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.lang-toggle a{text-decoration:none;color:var(--meta);padding:.2rem .1rem}
.lang-toggle a:hover{color:var(--maroon-deep)}
.lang-toggle .on{color:var(--maroon)}
.rail-dates{font-family:var(--display);font-style:italic;font-weight:500;color:var(--meta);font-size:.95rem}

/* ---------- mobile topbar ---------- */
.topbar{display:none}

main{padding:3.4rem 3.4rem 4rem;max-width:50rem}
.page-head{margin-bottom:2.2rem}
.page-head h1{font-size:2.45rem;margin:.4rem 0 .9rem}
.page-head .rule{height:1px;background:linear-gradient(to right,var(--maroon) 0,var(--maroon) 3.5rem,var(--rule) 3.5rem)}
.lede{font-size:1.1rem;color:var(--ink);max-width:42rem}
.note{font-size:.92rem;color:var(--meta)}
.note a{color:var(--maroon)}

main p{margin:0 0 1.1rem}
.prose{max-width:42rem}
.prose p{margin:0 0 1.15rem;text-align:justify;hyphens:auto}
.prose strong{font-weight:600}

/* ---------- gateway (root index) ---------- */
body.gateway{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem 1.2rem}
.gate{max-width:34rem;text-align:center}
.gate .mark{width:56px;height:56px;margin:0 auto 1.4rem;display:block;opacity:.9}
.gate .portrait{
  width:172px;margin:0 auto 1.8rem;display:block;
  border:1px solid var(--rule-dark);padding:6px;background:#fff;
  box-shadow:0 1px 0 var(--rule);
}
.gate h1{font-size:3.6rem;font-weight:600;letter-spacing:.01em}
@media (max-width:560px){.gate h1{font-size:2.55rem}}
.gate .gate-sub{font-family:var(--label);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--meta);margin:.9rem 0 0}
.gate .dates{display:flex;align-items:center;gap:1rem;margin:1.5rem 0 2.2rem;color:var(--maroon);font-family:var(--display);font-size:1.25rem;font-weight:500}
.gate .dates::before,.gate .dates::after{content:"";flex:1;height:1px;background:var(--rule-dark)}
.gate-langs{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.gate-langs a{
  font-family:var(--label);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:var(--maroon);border:1px solid var(--maroon);
  padding:.85rem 2.1rem;transition:background .15s ease,color .15s ease;
}
.gate-langs a:hover{background:var(--maroon);color:var(--paper)}
.gate-foot{margin-top:3rem;font-family:var(--label);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}

/* ---------- section index (home pages) ---------- */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 184px;gap:2.4rem;align-items:start}
.home-grid .portrait{border:1px solid var(--rule-dark);padding:5px;background:#fff;width:100%}
.home-grid figcaption{font-size:.78rem;color:var(--meta);margin-top:.5rem;line-height:1.45}

.toc{border-top:1px solid var(--rule);margin-top:2.4rem}
.toc a{display:grid;grid-template-columns:minmax(9rem,12rem) 1fr;gap:1.4rem;align-items:baseline;
  padding:.95rem .2rem;border-bottom:1px solid var(--rule);text-decoration:none}
.toc .t{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--ink)}
.toc .d{font-size:.9rem;color:var(--meta)}
.toc a:hover .t{color:var(--maroon-deep)}
.toc a:hover{background:rgba(143,163,126,.07)}

/* ---------- ledger (werkenlijst / discografie) ---------- */
.ledger{border-top:1px solid var(--rule);margin-top:1.6rem}
.lrow{display:grid;grid-template-columns:7.6rem minmax(0,1fr);gap:1.6rem;padding:1.05rem .15rem;border-bottom:1px solid var(--rule)}
.lrow:target{background:rgba(143,163,126,.12)}
.lrow .gut{padding-top:.15rem}
.opusnum{font-family:var(--display);font-size:1.32rem;font-weight:600;color:var(--maroon);line-height:1.05;display:block}
.opusnum .post{color:var(--sage)}
.gut .reclink{display:inline-block;margin-top:.4rem;font-family:var(--label);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--meta);border-bottom:1px solid var(--rule-dark);padding-bottom:.1rem}
.gut .reclink:hover{color:var(--maroon-deep);border-bottom-color:var(--maroon-deep)}
.lrow .work-title{font-weight:600}
.lrow .yr{color:var(--meta)}
.lrow .scoring{display:block}
.lrow .extra{display:block;font-size:.9rem;color:var(--meta);margin-top:.15rem}

.rec-item{margin:.65rem 0 0;padding-left:1rem;border-left:2px solid var(--rule)}
.rec-item .perf{font-weight:600}
.rec-item .cdid{display:block;font-family:var(--label);font-size:.72rem;letter-spacing:.05em;color:var(--meta);margin-top:.15rem}

.legend{font-size:.92rem;color:var(--meta);max-width:42rem}
.legend p{margin:0 0 .55rem}
.legend .ast{color:var(--sage);font-weight:600}

/* ---------- parool archive ---------- */
.years{border-top:1px solid var(--rule);margin-top:1.8rem}
.years a{display:grid;grid-template-columns:6.4rem 1fr auto;gap:1.4rem;align-items:baseline;padding:1rem .2rem;border-bottom:1px solid var(--rule);text-decoration:none}
.years .y{font-family:var(--display);font-size:1.7rem;font-weight:600;color:var(--maroon)}
.years .m{font-size:.9rem;color:var(--ink)}
.years .c{font-family:var(--label);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.years a:hover{background:rgba(143,163,126,.07)}

.month-block{margin:2rem 0;padding-bottom:1.2rem;border-bottom:1px solid var(--rule)}
.month-block h2{font-size:1.5rem}
.month-block h2 a{text-decoration:none;color:var(--ink)}
.month-block h2 a:hover{color:var(--maroon-deep)}
.month-block .titles{margin-top:.6rem;line-height:1.9;font-size:.97rem}
.month-block .titles a{white-space:normal}
.month-block .titles .sep{color:var(--rule-dark);padding:0 .35rem}

.crumbs{font-family:var(--label);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);margin-bottom:.6rem}
.crumbs a{text-decoration:none;color:var(--meta)}
.crumbs a:hover{color:var(--maroon-deep)}
.crumbs .sep{padding:0 .45rem;color:var(--rule-dark)}

.month-strip{display:flex;flex-wrap:wrap;gap:.35rem;margin:1.2rem 0 0;font-family:var(--label);font-size:.72rem;font-weight:600;letter-spacing:.08em}
.month-strip a{text-decoration:none;color:var(--meta);padding:.3rem .55rem;border:1px solid var(--rule)}
.month-strip a:hover{color:var(--maroon-deep);border-color:var(--rule-dark)}
.month-strip a.on{color:var(--paper);background:var(--maroon);border-color:var(--maroon)}

.parool-art{padding:1.9rem 0;border-bottom:1px solid var(--rule);max-width:44rem}
.parool-art:target{background:rgba(143,163,126,.1);box-shadow:0 0 0 .9rem rgba(143,163,126,.1)}
.parool-art .art-date{font-family:var(--label);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--maroon);margin:0 0 .35rem}
.parool-art h2{font-size:1.62rem;margin:0 0 .8rem}
.parool-art p{text-align:justify;hyphens:auto}
.parool-art .art-sig{font-family:var(--label);font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--meta);text-align:right;margin:.9rem 0 0}
.parool-art .art-sig::before{content:"—";letter-spacing:0;padding-right:.6rem;color:var(--rule-dark)}
.pn{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;font-family:var(--label);font-size:.74rem;font-weight:600;letter-spacing:.1em}
.pn a{text-decoration:none}

/* ---------- photos ---------- */
.photo-list{margin-top:1.4rem}
.photo-list figure{display:grid;grid-template-columns:262px minmax(0,1fr);gap:1.8rem;align-items:start;margin:0;padding:1.6rem 0;border-bottom:1px solid var(--rule)}
.photo-list img{border:1px solid var(--rule-dark);padding:5px;background:#fff;width:100%;max-width:262px}
.photo-list figcaption{font-size:.97rem;color:var(--ink);padding-top:.3rem}
.photo-list .when{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--maroon);display:block;margin-bottom:.4rem}

/* ---------- links ---------- */
.linkcat{margin:2rem 0}
.linkcat h2{font-size:1.4rem;margin-bottom:.7rem}
.linkcat ul{list-style:none;margin:0;padding:0}
.linkcat li{padding:.45rem 0;border-bottom:1px solid var(--rule)}
.linkcat .info{color:var(--meta);font-size:.92rem}

/* ---------- contact ---------- */
.contact-card{border:1px solid var(--rule);border-left:3px solid var(--maroon);padding:1.4rem 1.6rem;margin:1.8rem 0;max-width:34rem;background:#fff}
.contact-card .eyebrow{margin-bottom:.3rem;display:block}
.contact-card a{font-family:var(--display);font-size:1.45rem;font-weight:600;text-decoration:none}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule);margin-top:3.4rem;padding-top:1.2rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--label);font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.site-foot a{color:var(--meta);text-decoration:none}
.site-foot a:hover{color:var(--maroon-deep)}

/* ---------- responsive ---------- */
@media (max-width:979px){
  .shell{display:block}
  .rail{display:none}
  .topbar{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.85rem 1.1rem;border-bottom:1px solid var(--rule);
    position:sticky;top:0;background:var(--paper);z-index:10;
  }
  .topbar .tb-brand{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--ink);text-decoration:none;white-space:nowrap}
  .topbar .tb-right{display:flex;align-items:center;gap:1rem}
  .topbar .lang-toggle{font-size:.66rem}
  .m-nav summary{
    list-style:none;cursor:pointer;font-family:var(--label);font-size:.7rem;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:var(--maroon);
    border:1px solid var(--maroon);padding:.45rem .8rem;user-select:none;
  }
  .m-nav summary::-webkit-details-marker{display:none}
  .m-nav[open] summary{background:var(--maroon);color:var(--paper)}
  .m-nav .nav{
    position:absolute;right:1.1rem;left:1.1rem;top:calc(100% + 1px);
    background:var(--paper);border:1px solid var(--rule-dark);
    padding:.7rem;box-shadow:0 10px 24px rgba(38,33,28,.08);
  }
  main{padding:1.8rem 1.2rem 3rem}
  .page-head h1{font-size:1.95rem}
  .home-grid{grid-template-columns:1fr}
  .home-grid figure{margin:0;max-width:200px}
  .toc a{grid-template-columns:1fr;gap:.15rem;padding:.85rem .2rem}
  .lrow{grid-template-columns:1fr;gap:.3rem}
  .lrow .gut{display:flex;align-items:baseline;gap:.9rem}
  .gut .reclink{margin-top:0}
  .photo-list figure{grid-template-columns:1fr}
  .years a{grid-template-columns:4.6rem 1fr;gap:.8rem}
  .years .c{grid-column:2;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}