/* ============ se-arts.dk — Magasin × Væg ============ */
:root{
  --paper:#FAF7F2; --pink:#E8BFC0; --brown:#4A3028;
  --butter:#FADD8B; --olive:#93823A;
  --head:"Bricolage Grotesque",sans-serif;
  --body:"Cormorant Garamond",serif;
}
*{box-sizing:border-box; margin:0;}
body{ background:var(--paper); color:var(--brown); font-family:var(--body); }

/* ---------- masthead ---------- */
.mast{ text-align:center; padding:38px 20px 22px; border-bottom:3px solid var(--brown); }
.issue{ font-style:italic; letter-spacing:.14em; font-size:1rem; }
.mast h1{
  font-family:var(--head); font-weight:800;
  font-size:clamp(3.4rem,11vw,7.5rem); letter-spacing:.02em; line-height:.95;
}
.subtitle{ font-style:italic; font-size:1.2rem; margin-top:8px; }

/* torn paper divider */
.torn{
  height:16px; background:var(--pink);
  clip-path:polygon(0 0,100% 0,100% 45%,96% 90%,91% 40%,86% 95%,80% 50%,74% 100%,
    68% 55%,61% 90%,55% 45%,49% 100%,43% 60%,37% 95%,30% 40%,24% 90%,18% 50%,12% 100%,6% 55%,0 90%);
}

/* ---------- front page grid ---------- */
.frontpage{
  max-width:1080px; margin:0 auto; padding:44px 24px;
  display:grid; grid-template-columns:1.6fr 1fr; gap:48px;
}
.kicker{
  font-family:var(--head); font-weight:700; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.22em; color:var(--olive);
}
.cover-link{ display:block; text-decoration:none; }
.cover-img{
  position:relative; margin:14px 0 20px; aspect-ratio:16/10;
  background:
    radial-gradient(circle at 70% 20%, var(--butter) 0 18%, transparent 19%),
    linear-gradient(200deg, #b9c7d8 0 55%, var(--pink) 55%);
  background-size:cover; background-position:center;
  transform:rotate(-1deg);
  box-shadow:5px 6px 0 rgba(74,48,40,.15);
  transition:transform .25s;
}
.cover-link:hover .cover-img{ transform:rotate(0); }
.tape{
  position:absolute; top:-13px; left:38px; width:100px; height:28px; rotate:-5deg;
  background-color:var(--pink);
  background-image:radial-gradient(var(--brown) 1.4px, transparent 1.5px);
  background-size:11px 11px; opacity:.95;
}
.cover-story h2{
  font-family:var(--head); font-weight:800; font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1;
}
.deck{ font-size:1.35rem; font-style:italic; margin:14px 0 20px; max-width:36ch; }
.deck em{ color:var(--olive); }
.readmore{
  font-family:var(--head); font-weight:700; color:var(--brown);
  text-decoration:none; border-bottom:3px solid var(--butter);
  transition:border-color .2s;
}
.readmore:hover{ border-color:var(--olive); }
.arrow{ display:inline-block; transition:translate .2s; }
.readmore:hover .arrow{ translate:6px 0; }

/* teaser column */
.columns{ border-left:1.5px solid var(--brown); padding-left:32px;
  display:flex; flex-direction:column; gap:30px; }
.teaser a{ text-decoration:none; color:var(--brown); }
.teaser h3{ font-family:var(--head); font-weight:700; font-size:1.4rem; margin-top:10px; }
.teaser p{ font-size:1.15rem; font-style:italic; }
.t-img{
  aspect-ratio:16/9; transform:rotate(1.2deg);
  box-shadow:3px 4px 0 rgba(74,48,40,.12);
  background:repeating-linear-gradient(90deg,var(--paper) 0 12px,var(--butter) 12px 24px);
  background-size:cover; background-position:center;
  transition:transform .25s;
}
.teaser:nth-child(2) .t-img{ transform:rotate(-1.5deg); }
.teaser:hover .t-img{ transform:rotate(0); }

/* ---------- nav strip + colophon ---------- */
.strip{
  border-top:3px double var(--brown); border-bottom:3px double var(--brown);
  text-align:center; padding:14px; font-family:var(--head); font-weight:700;
  letter-spacing:.04em; font-size:.95rem;
}
.strip a{ color:var(--brown); text-decoration:none; }
.strip a:hover{ text-decoration:underline wavy var(--olive); }
.heart{ width:20px; vertical-align:-4px; margin-right:6px;
  animation:beat 2.6s ease-in-out infinite; display:inline-block; }
.heart path{ fill:var(--pink); stroke:var(--brown); stroke-width:1.5; }
@keyframes beat{ 0%,100%{transform:scale(1);} 12%{transform:scale(1.18);} 24%{transform:scale(1);} }
.colophon{ text-align:center; padding:26px; font-style:italic; font-size:1.05rem; }

@media (max-width:760px){
  .frontpage{ grid-template-columns:1fr; gap:36px; }
  .columns{ border-left:none; padding-left:0; border-top:1.5px solid var(--brown); padding-top:28px; }
}