@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..700;1,400..700&display=swap');

:root{
  --bg:#fbf9f4;
  --ink:#11141a;
  --muted:#535a66;
  --accent:#9e2a2b;
  --rule:#11141a;
  --hi:#ffe266;
}
*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"EB Garamond", Georgia, serif;
  font-weight:500;
  font-size:20px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:680px;
  margin:0 auto;
  padding:0 20px;
  border-left:1px dashed rgba(0,0,0,0.08);
  border-right:1px dashed rgba(0,0,0,0.08);
}

header{
  border-bottom:4px solid var(--ink);
  padding:36px 0 18px;
  position:relative;
}

.title{
  font-family:Righteous,Impact,"Arial Black",sans-serif;
  font-weight:400;
  font-size:clamp(2.4rem,9vw,3.8rem);
  line-height:1;
  margin:0;
  letter-spacing:.01em;
  display:inline-block;
  transform:rotate(-1.2deg);
  text-transform:uppercase;
}

.title a{
  color:var(--ink);
  text-decoration:none;
  background:linear-gradient(transparent 58%,var(--hi) 58%,var(--hi) 90%,transparent 90%);
  padding:0 .1em;
}

header p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:1.05rem;
}

nav{
  font-family:Righteous,Impact,"Arial Black",sans-serif;
  display:flex;
  gap:18px;
  padding:10px 0;
  border-bottom:2px solid var(--ink);
}

nav a{
  color:var(--ink);
  text-decoration:none;
  padding:2px 6px;
  font-weight:600;
}

nav a[aria-current="page"]{
  background:var(--ink);
  color:var(--bg);
}

nav a:hover,nav a:focus-visible{
  color:var(--bg);
  background:var(--accent);
  outline:none;
}

main{padding:28px 0 56px}

/* REQUIRED UNTOUCHED H2 RULE */
h2{font-family:Righteous,Impact,"Arial Black",sans-serif;font-weight:400;font-size:1.6rem;margin:36px 0 10px;letter-spacing:.01em}

h2:first-child{margin-top:0}

p{margin:0 0 1em}

a{
  color:var(--accent);
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}

.issue{
  border:2px solid var(--ink);
  background:#fff;
  padding:18px 20px;
  margin:0 0 24px 0;
  box-shadow:6px 6px 0 var(--ink);
  position:relative;
}

.issue:nth-of-type(even){
  transform:rotate(.4deg);
}

.issue h3{
  margin:0;
  font-size:1.35rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.issue .meta{
  color:var(--muted);
  font-size:.9rem;
  font-style:italic;
  margin:2px 0 12px;
}

.buy{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  padding:6px 16px;
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:none;
}

.buy:hover,.buy:focus-visible{
  background:var(--ink);
  color:var(--bg);
  box-shadow:1px 1px 0 var(--ink);
  transform:translate(2px, 2px);
}

ul.links{
  list-style:none;
  padding:0;
  margin:0;
}

ul.links li{
  border-top:1px dashed var(--ink);
  padding:12px 0;
}

ul.links li span{
  display:block;
  color:var(--muted);
  font-size:.9rem;
  font-style:italic;
  margin-top:2px;
}

footer{
  border-top:2px solid var(--ink);
  padding:20px 0 40px;
  color:var(--muted);
  font-size:.85rem;
  letter-spacing:.02em;
}