/* ============================================================
   Kunstinstituut Melly — Archive theme
   Palette and type follow kunstinstituutmelly.nl
   ============================================================ */
@font-face{font-family:"Melly Sans";font-weight:normal;font-style:normal;font-display:swap;
  src:url("../webfonts/OSMellySansv0.88-Regular.woff2") format("woff2"),
      url("../webfonts/OSMellySansv0.88-Regular.woff") format("woff");}
@font-face{font-family:"Melly Sans";font-weight:normal;font-style:italic;font-display:swap;
  src:url("../webfonts/OSMellySansv0.88-Italic.woff2") format("woff2"),
      url("../webfonts/OSMellySansv0.88-Italic.woff") format("woff");}
@font-face{font-family:"Melly Sans 2";font-weight:normal;font-style:normal;font-display:swap;
  src:url("../webfonts/OSMellySansv0.88-Irregular.woff2") format("woff2"),
      url("../webfonts/OSMellySansv0.88-Irregular.woff") format("woff");}

:root{
  --blue:#0000FF; --blue-dark:#0000D7; --yellow:#FFFF00; --pink:#FEDAFE;
  --black:#000; --white:#fff; --grey:#DADADA; --grey-mid:#999;
  --space:40px; --maxw:1600px;
  --fs:20px; --lh:26px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--black);
  font:normal var(--fs)/var(--lh) "Melly Sans",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}

/* ---------- links: pure blue, yellow on active ---------- */
a,a:link,a:visited{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-dark);text-decoration:underline;text-underline-offset:.18em}
a:active{background:var(--yellow);color:var(--black);text-decoration:none}
a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- header: yellow block ---------- */
header{background:var(--yellow);padding:0;border-bottom:2px solid var(--black)}
.site-title{padding:calc(var(--space)/2) var(--space) 0}
.site-title a{color:var(--black);font-size:32px;line-height:1.1;display:inline-block}
.site-title a:hover{color:var(--blue);text-decoration:none}
.site-title img{max-height:70px;width:auto}
header h1{margin:0;font-size:32px;font-weight:normal}

nav#top-nav,#top-nav{padding:calc(var(--space)/2) var(--space)}
.navigation{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 1.6em}
.navigation li{margin:0}
.navigation a{color:var(--black);display:inline-block;padding:.15em 0;border-bottom:2px solid transparent}
.navigation a:hover{color:var(--blue);text-decoration:none;border-bottom-color:var(--blue)}
.navigation li.active>a{border-bottom-color:var(--black);font-style:italic}
.navigation a:active{background:var(--blue);color:var(--yellow)}
#mobile-nav-toggle{display:none}

/* ---------- layout ---------- */
#content{max-width:var(--maxw);margin:0 auto;padding:var(--space);min-height:60vh}
h1,h2,h3,h4,h5,h6{font-weight:normal;line-height:1.15;margin:0 0 .5em}
h1{font-size:38px;margin-bottom:.6em}
h2{font-size:30px}
h3{font-size:23px}
p{margin:0 0 1em;max-width:46em}
hr{border:0;border-top:2px solid var(--black);margin:2em 0}

/* ---------- resource lists (browse) ---------- */
.resource-list{list-style:none;margin:0;padding:0}
.resource-list li.resource{padding:1em 0;border-bottom:1px solid var(--grey);
  display:grid;grid-template-columns:120px 1fr;gap:1.4em;align-items:start}
.resource-list li.resource:has(.resource-link:not(:has(img))){grid-template-columns:1fr}
.resource-list .resource-link{display:contents;color:var(--blue)}
.resource-list img{width:120px;height:auto;background:var(--grey)}
.resource-name{font-size:23px;line-height:1.2;display:block;margin-bottom:.25em}
.resource-list .description{grid-column:2;color:var(--black);font-size:17px;line-height:23px;
  max-width:52em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.resource-list li.resource:has(.resource-link:not(:has(img))) .description{grid-column:1}

/* ---------- record pages ---------- */
.property{margin:0 0 1.1em;padding:0 0 1.1em;border-bottom:1px solid var(--grey)}
.property dt{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--grey-mid);
  margin:0 0 .35em;font-style:normal}
.property dd{margin:0 0 .2em;max-width:52em}
.property dd.value{word-break:break-word}
.value-content{}
#content>h2,.resource-title{font-size:32px}
.media-list{display:flex;flex-wrap:wrap;gap:12px;margin:1em 0}
.media-list .property{border:0;padding:0;margin:0}
.media-list img{background:var(--grey)}
.item-sets,.media-render{margin:1.5em 0}
audio,video{width:100%;max-width:820px;background:var(--black)}

/* ---------- browse controls / pagination ---------- */
.browse-controls{display:flex;flex-wrap:wrap;gap:1em;align-items:center;justify-content:space-between;
  padding:.6em 0;border-bottom:2px solid var(--black);margin-bottom:.5em;font-size:17px}
.pagination{display:flex;gap:.5em;align-items:center;margin:0}
.pagination input{border:1px solid var(--black);padding:.2em .4em;font:inherit;font-size:16px;width:4em}
.search-filters{font-size:16px;color:var(--grey-mid);margin:.5em 0}

/* ---------- forms ---------- */
input[type=text],input[type=search],input[type=email],select,textarea{
  font:inherit;font-size:17px;padding:.4em .6em;border:2px solid var(--black);background:var(--white);
  color:var(--black);border-radius:0;max-width:100%}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue)}
button,input[type=submit],.button{font:inherit;font-size:17px;background:var(--blue);color:var(--white);
  border:2px solid var(--blue);padding:.4em 1em;cursor:pointer;border-radius:0}
button:hover,input[type=submit]:hover,.button:hover{background:var(--yellow);color:var(--black);
  border-color:var(--black);text-decoration:none}

/* ---------- footer: yellow block ---------- */
footer{background:var(--yellow);border-top:2px solid var(--black);
  padding:var(--space);margin-top:4em;font-size:17px;line-height:24px}
footer a{color:var(--blue)}
footer p{max-width:none;margin:0 0 .4em}

/* ---------- index-page components (A–Z, years, tags) ---------- */
.intro{font-size:23px;line-height:31px;max-width:44em}
.stats{display:flex;flex-wrap:wrap;gap:2em;margin:2em 0;padding:1.2em 0;
  border-top:2px solid var(--black);border-bottom:2px solid var(--black)}
.stats div{min-width:6.5rem}
.stats .n{display:block;font-size:34px;line-height:1.05;color:var(--blue)}
.stats .l{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--black)}
.az-nav{font-size:23px;line-height:1.9;word-spacing:.25rem;border-bottom:2px solid var(--black);
  padding-bottom:.5em;margin-bottom:1em}
.az-list{columns:3;column-gap:2.5rem;list-style:none;padding:0;margin:0 0 2em}
.az-list li{break-inside:avoid;padding:.1rem 0;font-size:18px;line-height:25px}
.year-grid{line-height:2.1;word-spacing:.2rem;border-bottom:2px solid var(--black);
  padding-bottom:.5em;margin-bottom:1em}
.year-grid .c{color:var(--grey-mid);font-size:15px}
.year-list{list-style:none;padding:0;margin:0 0 2em}
.year-list li{padding:.3rem 0;border-bottom:1px solid var(--grey);font-size:18px;line-height:25px}
.year-list .d,.az-list .d{color:var(--grey-mid);font-size:15px;margin-left:.4rem}
.box{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--pink);color:var(--black);padding:.05em .45em;margin-left:.4rem;vertical-align:.08em}
.av{display:inline-block;font-size:13px;background:var(--blue);color:var(--yellow);
  padding:.05em .45em;margin-left:.3rem;vertical-align:.08em}
#content h3{margin:1.8em 0 .5em;padding-bottom:.2em;border-bottom:2px solid var(--black);font-size:23px}

/* ---------- preview blocks ---------- */
.preview-block{margin:2.5em 0}
.preview-block h3{margin-top:0}
.preview-block .resource-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.6em}
.preview-block .resource-list li.resource{display:block;border:0;padding:0}
.preview-block .resource-list img{width:100%;aspect-ratio:4/3;object-fit:cover}
.preview-block .resource-name{font-size:18px;line-height:24px;margin-top:.5em}
.preview-block .description{display:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){ .az-list{columns:2} }
@media (max-width:767px){
  :root{--space:20px;--fs:16px;--lh:22px}
  h1{font-size:28px} h2{font-size:24px} .site-title a{font-size:24px}
  .intro{font-size:18px;line-height:25px}
  .az-list{columns:1}
  .navigation{gap:0 1em;font-size:16px}
  .resource-list li.resource{grid-template-columns:80px 1fr;gap:1em}
  .resource-list img{width:80px}
  .stats{gap:1.2em}.stats .n{font-size:26px}
}
@media print{ header,footer,nav,.browse-controls{display:none} a{color:#000} }

/* ---------- search box in header ---------- */
#search{padding:0 var(--space) calc(var(--space)/2)}
#search form{display:flex;gap:.5em;flex-wrap:wrap}
#search input[type=text],#search input[type=search]{background:var(--white);min-width:min(320px,100%)}
#search button,#search input[type=submit]{background:var(--black);border-color:var(--black)}
#search button:hover,#search input[type=submit]:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}

/* ---------- skip link + admin bar ---------- */
#skipnav{position:absolute;left:-9999px;background:var(--blue);color:var(--white);padding:.6em 1em;z-index:100}
#skipnav:focus{left:0;top:0}
#user-bar,.user-bar{font-size:15px}
.banner img{width:100%;object-fit:cover;max-height:340px}

/* ---------- embedded video (YouTube) ---------- */
.media-render iframe,iframe[src*="youtube"]{width:100%;max-width:900px;aspect-ratio:16/9;height:auto;
  border:2px solid var(--black);background:var(--black);display:block}
.resource-list .media-render iframe{max-width:100%}
.yt{display:inline-block;font-size:13px;background:#FF0000;color:#fff;padding:.05em .45em;
  margin-left:.3rem;vertical-align:.08em}