:root{
  --bg:#F7F3EC;
  --paper:#E6E0D8;
  --card:#FFFCF7;
  --ink:#2A2926;
  --text:#4F4B42;
  --line:#D1C9BE;
  --sage:#7D7B55;
  --sage-ink:#565437;
  --terra:#B4623B;
  --terra-ink:#8F4A2B;
  --wood:#7A5334;
  --wood-dark:#4E3320;
  --wood-light:#9A6E45;
  --shelf-thick:15px;
  --lip:7px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--card);color:var(--ink);padding:10px 16px;z-index:50}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--terra-ink);outline-offset:3px;border-radius:2px}

/* ---------- top bar ---------- */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px clamp(16px,4vw,48px);
  font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sage-ink);
  border-bottom:1px solid var(--line);
}
.top-mid{display:none}
.top-right{color:var(--terra-ink);text-decoration:none;border-bottom:1px solid rgba(180,98,59,.45)}
@media (min-width:620px){
  .wordmark{letter-spacing:.2em}
}
@media (min-width:760px){
  .top-mid{display:block;flex:1;text-align:center}
  .top-left,.top-right{flex:0 0 auto}
}

main{max-width:1340px;margin:0 auto;padding:0 clamp(14px,3.4vw,40px) 40px}

/* ---------- identity ---------- */
.identity{text-align:center;padding:clamp(34px,6vw,64px) 0 clamp(18px,3vw,26px)}
.wordmark{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(23px,6.6vw,58px);
  letter-spacing:.14em;
  line-height:1;
  color:var(--ink);
  text-indent:.2em;
}
.wordmark-heeft-beeld{line-height:0}
.wordmark-beeld{
  width:var(--wm-tel,250px);max-width:82vw;height:auto;margin:0 auto;
}
@media (min-width:620px){ .wordmark-beeld{width:var(--wm,330px)} }
.byline{
  margin-top:14px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage-ink);
}

/* ---------- intro ---------- */
.intro{
  display:grid;grid-template-columns:1fr;gap:26px;
  padding:clamp(20px,3.5vw,34px) 0 clamp(22px,3.5vw,32px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
@media (min-width:860px){
  .intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,80px);align-items:start}
}
.invite h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;font-size:clamp(21px,2.6vw,26px);
  color:var(--ink);line-height:1.25;
}
.suggest{margin-top:14px;position:relative;max-width:460px}
.suggest input[type=text]:not(.sr-only){
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:8px 92px 8px 0;font:inherit;font-size:14.5px;color:var(--ink);
}
.suggest input::placeholder{color:#9b948a}
.suggest input:focus{outline:none;border-bottom-color:var(--sage)}
.suggest button{
  position:absolute;right:0;bottom:7px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--terra-ink);
}
.suggest button[disabled]{color:#a49c91;cursor:not-allowed}
.suggest-uit{margin-top:12px;font-size:14px;color:var(--sage-ink)}
.suggest-state{margin-top:9px;font-size:13px;color:var(--sage-ink);min-height:1.2em}
.suggest-state.fout{color:var(--terra-ink)}
.about p{font-size:15.5px;max-width:52ch}
@media (min-width:860px){ .about{padding-top:6px} }

/* ---------- controls ---------- */
.controls{
  display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;
  padding:22px 0 18px;
}
.filters{display:flex;flex-wrap:wrap;gap:7px}
.filters button{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 13px;border:1px solid var(--line);border-radius:999px;
  color:var(--sage-ink);background:var(--card);
  min-height:36px;
}
.filters button[aria-pressed=true]{background:var(--sage-ink);border-color:var(--sage-ink);color:#F7F3EC}
.filters .telling{opacity:.65;margin-left:6px}
.sorting{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-ink)}
.sorting select{
  font:inherit;font-size:13px;letter-spacing:.02em;text-transform:none;
  color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:3px;padding:8px 10px;min-height:38px;
}

/* ---------- the rack ---------- */
.collection{padding-top:6px}
.loading{padding:40px 0;color:var(--sage-ink)}
.leeg{padding:44px 0;text-align:center;color:var(--sage-ink)}

.rij{position:relative;margin:0 0 clamp(34px,5.2vw,68px);padding-top:16px}
.rij-inner{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  gap:var(--gap,14px);
  padding:0 10px;
}
/* back rail behind the magazines */
.rij::before{
  content:"";position:absolute;left:0;right:0;
  bottom:calc(var(--shelf-thick) + var(--lip));
  height:var(--railh,120px);
  background-image:url(assets/worn-wood.svg);
  background-size:auto 340px;
  background-position:var(--woodx,0) var(--woody,0);
  opacity:.9;
  filter:brightness(.56) saturate(.78);
  box-shadow:inset 0 -8px 14px -8px rgba(0,0,0,.55);
  border-radius:2px;
}
.plank{
  position:relative;
  height:var(--shelf-thick);
  background-image:url(assets/worn-wood.svg);
  background-size:auto 260px;
  background-position:var(--woodx,0) center;
  border-radius:2px 2px 1px 1px;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,
             0 12px 22px -10px rgba(58,38,22,.55),
             0 2px 0 var(--wood-dark);
}
.plank::after{ /* front lip */
  content:"";position:absolute;left:-4px;right:-4px;top:calc(var(--shelf-thick) - 1px);
  height:var(--lip);
  background:linear-gradient(180deg,#8a6039,#5d3d23);
  border-radius:0 0 3px 3px;
  box-shadow:0 8px 16px -8px rgba(58,38,22,.6);
}
.plank .zij{display:block;position:absolute;bottom:0;width:10px;height:calc(var(--railh,120px) + var(--shelf-thick));background:linear-gradient(90deg,#4e3320,#7a5334);border-radius:2px}
.plank .zij.l{left:-9px}
.plank .zij.r{right:-9px;background:linear-gradient(270deg,#4e3320,#7a5334)}

/* ---------- a magazine ---------- */
.mag{
  position:relative;display:block;padding:0;
  width:var(--w);
  align-self:flex-end;
  border-radius:1px;
}
.mag-inner{
  display:block;
  position:relative;
  transform:rotate(var(--lean)) translateY(0);
  transform-origin:bottom center;
  transition:transform .28s ease, filter .28s ease;
  will-change:transform;
}
.mag:hover .mag-inner,.mag:focus-visible .mag-inner{transform:rotate(var(--lean)) translateY(-9px)}
.mag-cover{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:var(--ar);
  background:var(--paper);
  box-shadow:
    inset 0 2px 6px -3px rgba(255,255,255,.55),
    0 1px 1px rgba(42,41,38,.16),
    0 16px 22px -12px rgba(42,41,38,.55);
}
.mag-cover img{width:100%;height:100%;object-fit:cover;border-radius:1px}
/* page block on the outer edge */
.mag-cover::after{
  content:"";position:absolute;top:3px;bottom:1px;right:calc(-1 * var(--pages));
  width:var(--pages);
  background:repeating-linear-gradient(90deg,#f2ebe0 0 1px,#d6ccbd 1px 2px);
  box-shadow:1px 1px 2px rgba(42,41,38,.3);
  border-radius:0 1px 1px 0;
}
/* spine crease along the binding edge */
.mag-cover::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:14px;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.30) 0%,
    rgba(42,41,38,.26) 38%,
    rgba(42,41,38,.10) 68%,
    rgba(42,41,38,0) 100%);
  border-radius:1px 0 0 1px;
}
.mag-titel{
  position:absolute;left:0;right:0;bottom:100%;
  font-size:0;
}

@media (prefers-reduced-motion:reduce){
  .mag-inner,.mag:hover .mag-inner,.mag:focus-visible .mag-inner{transition:none;transform:rotate(var(--lean))}
  dialog{animation:none!important}
}

.count{
  margin-top:6px;padding-top:18px;border-top:1px solid var(--line);
  font-size:12.5px;letter-spacing:.06em;color:var(--sage-ink);
}

.foot{
  max-width:1340px;margin:0 auto;padding:22px clamp(14px,3.4vw,40px) 60px;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;color:var(--sage-ink);
}

/* ---------- preview dialog ---------- */
dialog{
  position:fixed;inset:0;margin:auto;
  border:0;padding:0;max-width:min(860px,94vw);width:100%;
  max-height:92dvh;overflow:auto;
  background:var(--card);color:var(--text);
  border-radius:4px;
  box-shadow:0 30px 70px -20px rgba(42,41,38,.5);
}
dialog::backdrop{background:rgba(42,41,38,.52)}
.preview-body{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:720px){ .preview-body{grid-template-columns:minmax(0,300px) minmax(0,1fr)} }
.preview-cover{background:var(--paper);display:flex;align-items:center;justify-content:center;padding:20px}
.preview-cover img{max-height:56vh;width:auto;box-shadow:0 12px 26px -12px rgba(42,41,38,.6)}
.preview-text{padding:clamp(20px,3.6vw,34px)}
.preview-meta{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage-ink)}
.preview-text h3{
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(23px,3.4vw,31px);line-height:1.22;color:var(--ink);margin:10px 0 0;
}
.preview-sub{margin-top:12px;font-size:15px}
.preview-tags{margin-top:14px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink)}
.preview-link{
  display:inline-block;margin-top:22px;
  background:var(--terra);color:#FDF6EE;text-decoration:none;
  padding:12px 20px;border-radius:3px;font-size:13.5px;letter-spacing:.06em;
  min-height:44px;line-height:20px;
}
.preview-link:hover{background:var(--terra-ink)}
.close{
  position:absolute;right:6px;top:4px;font-size:26px;line-height:1;
  width:44px;height:44px;color:var(--ink);opacity:.6;
}
.close:hover{opacity:1}