/* =====================================================================
   V3 — "Der Annahof-Bote"  ·  vintage crime newspaper / Extrablatt
   ===================================================================== */
:root{
  --news:#e8e3d5; --news-2:#efe9dc;
  --ink:#17130d; --ink-soft:#4b4438;
  --red:#a8231a; --rule:#17130d;
  --f-name:"UnifrakturMaguntia","Times New Roman",serif;
  --f-head:"Libre Franklin","Arial Narrow",sans-serif;
  --f-body:"PT Serif",Georgia,"Times New Roman",serif;
  --f-label:"Oswald",sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--news);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--ink); font-family:var(--f-body); line-height:1.5;
  padding:clamp(.4rem,2vw,2rem); -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

.back{
  position:fixed; top:.7rem; left:.8rem; z-index:20;
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.12em; font-size:.7rem;
  background:var(--ink); color:var(--news); padding:.45em .8em; text-decoration:none;
}
.back:hover{ background:var(--red); }

.paper{
  max-width:1000px; margin:0 auto; background:var(--news-2);
  padding:clamp(1rem,3.5vw,3rem) clamp(1rem,3.5vw,3.2rem) 2rem;
  border:1px solid rgba(23,19,13,.25);
  box-shadow:0 14px 40px -22px rgba(23,19,13,.6);
}

/* ---------- masthead ---------- */
.mast-top,.mast-bot{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.14em;
  font-size:.66rem; color:var(--ink-soft);
}
.mast-top{ border-bottom:1px solid var(--rule); padding-bottom:.5rem; }
.nameplate{
  font-family:var(--f-name); font-weight:400; text-align:center;
  font-size:clamp(2.6rem,9.5vw,6rem); line-height:1.04; margin:.5rem 0 .35rem; color:var(--ink);
}
.mast-bot{ border-top:3px double var(--rule); border-bottom:3px double var(--rule); padding:.4rem 0; }
.mast-bot__c{ font-family:var(--f-body); font-style:italic; text-transform:none; letter-spacing:0; font-size:.8rem; }
@media (max-width:620px){ .mast-top span:nth-child(3),.mast-bot span:nth-child(3){ display:none; } }

/* ---------- banner ---------- */
.banner{ text-align:center; padding:1.4rem 0 1rem; }
.kicker,.art-kicker{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.26em;
  font-size:.74rem; color:var(--red); font-weight:600;
}
.headline{
  font-family:var(--f-head); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.6rem,11vw,6.4rem); line-height:.92; letter-spacing:-.01em;
  margin:.5rem 0; color:var(--ink);
}
.deck{
  font-family:var(--f-body); font-style:italic; font-size:clamp(1.05rem,2.4vw,1.4rem);
  max-width:46ch; margin:.4rem auto 0; color:var(--ink);
}
.byline{
  font-family:var(--f-label); text-transform:uppercase; letter-spacing:.16em;
  font-size:.68rem; color:var(--ink-soft); margin-top:1rem;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:.5rem 0; display:inline-block; padding-inline:1.5rem;
}

/* ---------- photos ---------- */
figure{ margin:0; }
.lead-photo{ margin:1.2rem 0 1.6rem; }
.lead-photo img,.col-photo img,.strip figure img{ width:100%; border:1px solid var(--ink); filter:contrast(1.04); }
figcaption{
  font-family:var(--f-label); font-weight:300; font-size:.78rem; letter-spacing:.02em;
  color:var(--ink-soft); margin-top:.45rem; padding-bottom:.2rem; line-height:1.3;
}
.lead-photo figcaption{ border-bottom:1px solid var(--rule); padding-bottom:.5rem; }

/* ---------- story columns ---------- */
.story{ columns:3; column-gap:1.9rem; column-rule:1px solid rgba(23,19,13,.22); }
@media (max-width:820px){ .story{ columns:2; } }
@media (max-width:520px){ .story{ columns:1; } }
.story-body{
  font-family:var(--f-body); font-size:1.02rem; line-height:1.58; text-align:justify;
  hyphens:auto; margin-bottom:.85rem; color:var(--ink);
}
.story-body.small{ font-size:.96rem; }
.dropcap::first-letter{
  font-family:var(--f-head); font-weight:900; float:left; color:var(--red);
  font-size:3.6em; line-height:.74; padding:.04em .1em 0 0;
}

/* ---------- boxes ---------- */
.box{ border:2px solid var(--ink); padding:1.1rem 1.3rem 1.2rem; background:rgba(23,19,13,.025); }
.menu-box{ column-span:all; margin:1rem 0 .4rem; }
.box-h{ font-family:var(--f-head); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:1.25rem; text-align:center; }
.box-sub{ font-family:var(--f-body); font-style:italic; text-align:center; color:var(--ink-soft); font-size:.9rem; margin-bottom:.7rem; }
.menu-box ul{ list-style:none; max-width:540px; margin:0 auto; }
.menu-box li{ font-family:var(--f-body); font-size:1.02rem; padding:.3rem 0; border-bottom:1px dotted rgba(23,19,13,.3); }
.menu-box li b{ color:var(--red); }
.menu-box li i{ color:var(--ink-soft); }
.box-foot{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; text-align:center; margin-top:.8rem; color:var(--ink-soft); }

/* ---------- rules ---------- */
.rule{ border:none; border-top:1px solid var(--rule); margin:1.6rem 0; }
.rule--thick{ border-top:4px double var(--rule); }

/* ---------- two column article ---------- */
.two-col{ display:grid; grid-template-columns:1.6fr 1fr; gap:1.8rem; align-items:start; }
@media (max-width:680px){ .two-col{ grid-template-columns:1fr; } }
.art-h{ font-family:var(--f-head); font-weight:800; font-size:clamp(1.5rem,3.5vw,2.2rem); line-height:1.05; margin:.2rem 0 .6rem; }
.col-main .story-body{ columns:auto; }
.col-photo figcaption{ }

/* ---------- photo strip ---------- */
.art-kicker.center{ text-align:center; display:block; margin-bottom:1rem; }
.strip-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:760px){ .strip-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:440px){ .strip-grid{ grid-template-columns:1fr; } }

/* ---------- credits + footer ---------- */
.credits{ margin-top:1.6rem; }
.story-body.center{ text-align:center; max-width:60ch; margin:.4rem auto 0; }
.foot{ text-align:center; margin-top:1.5rem; }
.foot p{ font-family:var(--f-label); text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; color:var(--ink-soft); }