:root {
  --black: #050505;
  --black-2: #0a0a09;
  --black-3: #11100e;
  --ink: #16120f;
  --bone: #efe6d8;
  --bone-soft: #d8cdbc;
  --bone-dim: #9b8f80;
  --paper: #eee5d8;
  --red: #bd111b;
  --red-hot: #e12631;
  --gold: #b99a67;
  --line: rgba(239, 230, 216, 0.16);
  --line-strong: rgba(239, 230, 216, 0.32);
  --panel: rgba(239, 230, 216, 0.045);
  --shadow: rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 75% 18%, rgba(120, 20, 22, 0.16), transparent 28rem),
    radial-gradient(circle at 18% 8%, rgba(239, 230, 216, 0.045), transparent 32rem),
    var(--black);
  color: var(--bone);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.5;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(239, 230, 216, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 230, 216, 0.028) 1px, transparent 1px);
  background-size: 58px 58px;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  background: radial-gradient(rgba(239,230,216,0.2) 0.55px, transparent 0.55px);
  background-size: 4px 4px;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--red-hot); }
img, svg { max-width: 100%; }

.skip-link {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--bone);
  color: var(--black);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
}
.skip-link:focus { top: 14px; }

.topbar, .site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 24px;
  min-height: 82px;
  padding: 0 3.2vw;
  border-bottom: 2px solid rgba(189,17,27,0.72);
  background: rgba(5, 5, 5, 0.96);
  backdrop-filter: blur(14px);
}
.masthead, .brand {
  display: inline-grid;
  width: fit-content;
  color: var(--bone);
}
.masthead span, .brand-name {
  font-size: clamp(1.75rem, 2.4vw, 2.55rem);
  line-height: 0.9;
  letter-spacing: -0.055em;
  font-weight: 500;
}
.masthead small, .brand-subtitle {
  margin-top: 8px;
  color: var(--red-hot);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.dot { color: var(--red-hot); }
.brand-kicker { display: none; }
.topnav, .nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2.4vw, 34px);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-soft);
}
.search-link {
  font-size: 1.5rem;
  line-height: 1;
}
.subscribe-btn, .red-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 22px;
  background: var(--red);
  color: #fff;
  border: 1px solid var(--red);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.subscribe-btn:hover, .red-button:hover { background: var(--red-hot); color: #fff; }
.light-button, .outline-link, .button, .filter-chip, .fake-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  color: var(--bone);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.light-button:hover, .outline-link:hover, .button:hover { border-color: var(--red-hot); color: var(--red-hot); }

.magazine-shell { padding: 0 3.2vw 0; }
.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 28px;
  align-items: start;
  border-left: 1px solid rgba(239,230,216,0.08);
  border-right: 1px solid rgba(239,230,216,0.08);
}
.main-column { min-width: 0; }
.right-rail {
  position: sticky;
  top: 102px;
  display: grid;
  gap: 18px;
  padding: 26px 0 36px 0;
  border-left: 1px solid var(--line);
}
.lead-hero {
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(340px, 0.42fr);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(0,0,0,0.96), rgba(0,0,0,0.72));
}
.lead-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 72px) clamp(24px, 4vw, 48px);
}
.section-label, .card-topline, .red-note, .page-kicker, .rail-title, .news-card p, .ad-band span, .issue-cover b {
  color: var(--red-hot);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
h1, h2, h3, blockquote {
  margin: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  line-height: 0.98;
}
h1 {
  margin-top: 20px;
  font-size: clamp(3.9rem, 6.7vw, 7.8rem);
  letter-spacing: -0.075em;
  font-weight: 500;
}
h2 { font-size: clamp(1.55rem, 2.4vw, 3rem); letter-spacing: -0.045em; font-weight: 500; }
h3 { font-size: clamp(1.25rem, 1.8vw, 2rem); letter-spacing: -0.035em; font-weight: 500; }
.lead-subtitle {
  margin: 18px 0 0;
  color: var(--bone);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.lead-dek, .dek, .hero-text {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--bone-soft);
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
}
.outline-link { width: fit-content; margin-top: 34px; min-width: 260px; justify-content: space-between; }
.outline-link span { color: var(--red-hot); margin-left: 28px; }

.lead-art, .thumb, .issue-cover, .partner-box {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 62% 28%, rgba(239,230,216,0.18), transparent 11rem),
    linear-gradient(140deg, rgba(189,17,27,0.22), transparent 42%),
    #0b0b0a;
}
.lead-art::before, .thumb::before, .issue-cover::before, .partner-box::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(239,230,216,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,230,216,0.08) 1px, transparent 1px);
  background-size: 26px 26px;
}
.lead-art::after {
  content: "";
  position: absolute;
  inset: 18% 12% 8% 18%;
  border: 2px solid rgba(189,17,27,0.75);
  border-radius: 50%;
  transform: rotate(-8deg);
  box-shadow: 0 0 70px rgba(189,17,27,0.18);
}
.art-face { min-height: 520px; }
.art-face { background:
  linear-gradient(90deg, rgba(5,5,5,0.15), rgba(5,5,5,0.75)),
  radial-gradient(circle at 25% 38%, rgba(239,230,216,0.23), transparent 10rem),
  radial-gradient(circle at 66% 54%, rgba(189,17,27,0.18), transparent 13rem),
  #0b0b0a;
}
.art-face .scribble {
  position: absolute;
  z-index: 2;
  color: var(--red-hot);
  font-family: 'Comic Sans MS', 'Bradley Hand', cursive;
  font-size: 1.05rem;
  transform: rotate(-10deg);
  opacity: 0.9;
}
.s1 { left: 12%; top: 42%; }
.s2 { right: 14%; top: 22%; }
.s3 { right: 8%; bottom: 22%; }

.ad-band {
  display: grid;
  grid-template-columns: 0.9fr 1px 1fr;
  gap: 42px;
  align-items: center;
  min-height: 90px;
  padding: 22px 28px;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid rgba(0,0,0,0.24);
}
.ad-band::before { content: none; }
.ad-band p { margin: 0; color: var(--ink); }
.ad-band p:first-of-type { border-right: 1px solid rgba(22,18,15,0.22); padding-right: 42px; }
.content-block { padding: 34px 0 0; }
.block-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 0 0 18px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.block-heading a { color: var(--red-hot); font-family: Arial, Helvetica, sans-serif; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.card-row { display: grid; gap: 16px; padding: 0 16px 28px; }
.card-row.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.news-card {
  min-width: 0;
  border: 1px solid var(--line);
  background: rgba(239,230,216,0.035);
}
.thumb { min-height: 150px; border-bottom: 1px solid var(--line); }
.news-card p, .news-card h2, .news-card span { display: block; padding-left: 14px; padding-right: 14px; }
.news-card p { margin: 16px 0 0; }
.news-card h2 { margin: 8px 0 10px; font-size: 1.28rem; line-height: 1.08; }
.news-card span { padding-bottom: 16px; color: var(--bone-dim); font-family: Arial, Helvetica, sans-serif; font-size: 0.68rem; }
.art-stairs { background: linear-gradient(135deg, rgba(239,230,216,0.15), transparent), #141414; }
.art-docs { background: repeating-linear-gradient(0deg, rgba(239,230,216,0.1) 0 7px, transparent 7px 16px), #111; }
.art-statue { background: radial-gradient(circle at 50% 35%, rgba(239,230,216,0.26), transparent 8rem), #111; }
.art-text { background: repeating-linear-gradient(-8deg, rgba(239,230,216,0.11) 0 6px, transparent 6px 18px), #12100e; }
.art-city { background: linear-gradient(90deg, transparent 0 20%, rgba(189,17,27,0.28) 20% 32%, transparent 32%), #111; }

.newsletter-wide {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  margin: 0 0 0;
  padding: 26px 36px;
  background: var(--paper);
  color: var(--ink);
}
.newsletter-wide h2 { font-size: 1.4rem; color: var(--ink); }
.newsletter-wide p { margin: 6px 0 0; color: rgba(22,18,15,0.72); }
.mail-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(189,17,27,0.55);
  border-radius: 50%;
  color: var(--red);
  font-size: 1.5rem;
}
.right-rail .rail-box { margin-left: 28px; margin-right: 0; }
.rail-box {
  padding: 22px;
  border: 1px solid var(--line);
  background: rgba(239,230,216,0.025);
}
.rail-title {
  color: var(--bone-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.rail-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.issue-cover {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(circle at 72% 18%, rgba(239,230,216,0.26), transparent 9rem),
    linear-gradient(158deg, rgba(189,17,27,0.46), transparent 38%),
    #111;
}
.issue-cover .issue-kicker { font-size: 2.4rem; line-height: 0.9; letter-spacing: -0.07em; }
.issue-cover strong { font-size: 2.25rem; line-height: 0.93; letter-spacing: -0.055em; }
.issue-cover em { color: var(--bone-soft); font-style: normal; }
.issue-cover b {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: var(--red);
  color: white;
  font-size: 0.56rem;
  line-height: 1.15;
  transform: rotate(8deg);
}
.red-button, .light-button { width: 100%; margin-top: 10px; }
.partner-box { min-height: 210px; display: flex; flex-direction: column; justify-content: flex-end; }
.partner-box h2 { position: relative; z-index: 2; font-size: 1.55rem; }
.partner-box a { position: relative; z-index: 2; color: var(--red-hot); font-family: Arial, Helvetica, sans-serif; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 0.8fr) minmax(250px, 0.75fr);
  gap: 42px;
  align-items: start;
  padding: 36px 3.2vw;
  border-top: 1px solid var(--line);
  background: #050505;
}
.footer-grid p { margin: 0; color: var(--bone-dim); }
.footer-grid nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; font-family: Arial, Helvetica, sans-serif; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }

/* Legacy/page compatibility */
.site-footer { display: flex; justify-content: space-between; gap: 24px; padding: 30px 3.2vw; border-top: 1px solid var(--line); color: var(--bone-dim); font-family: Arial, Helvetica, sans-serif; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.site-footer p { margin: 0; }
.section { padding: 72px 3.2vw; border-top: 1px solid var(--line); }
.story-meta { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 0; color: var(--bone-dim); font-family: Arial, Helvetica, sans-serif; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.story-meta span { border: 1px solid var(--line); padding: 8px 10px; background: rgba(9,8,7,0.35); }
.button-primary { background: var(--red); border-color: var(--red); color: white; }
.button-secondary:hover { border-color: var(--red-hot); }

@media (max-width: 1180px) {
  .home-layout { grid-template-columns: 1fr; border: 0; }
  .right-rail { position: static; border-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 0 28px; }
  .right-rail .rail-box { margin-left: 0; }
  .card-row.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .topbar, .site-header { position: relative; display: block; min-height: 0; padding: 18px 22px; }
  .masthead, .brand { margin-bottom: 18px; }
  .masthead span, .brand-name { font-size: 2rem; }
  .masthead small, .brand-subtitle { font-size: 0.58rem; letter-spacing: 0.22em; }
  .topnav, .nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: start; gap: 10px 14px; font-size: 0.66rem; }
  .subscribe-btn { min-height: 38px; }
  .magazine-shell { padding: 0; }
  .lead-hero { grid-template-columns: 1fr; min-height: 0; }
  .lead-copy { padding: 36px 22px 28px; }
  h1 { font-size: clamp(3.05rem, 15vw, 5.2rem); letter-spacing: -0.055em; }
  h2 { font-size: clamp(1.8rem, 9vw, 3rem); }
  .lead-dek, .dek, .hero-text { font-size: 1rem; }
  .lead-art { min-height: 260px; order: -1; }
  .art-face .scribble { font-size: 0.86rem; }
  .ad-band { grid-template-columns: 1fr; gap: 8px; padding: 22px; }
  .ad-band p:first-of-type { border: 0; padding-right: 0; }
  .block-heading { padding: 0 22px; }
  .card-row { padding-left: 22px; padding-right: 22px; }
  .card-row.five { grid-template-columns: 1fr; }
  .thumb { min-height: 190px; }
  .right-rail { grid-template-columns: 1fr; padding: 0 22px 28px; }
  .issue-cover { min-height: 380px; }
  .newsletter-wide { grid-template-columns: 1fr; padding: 26px 22px; }
  .footer-grid { grid-template-columns: 1fr; padding: 30px 22px; }
  .site-footer { display: block; padding: 28px 22px; }
  .site-footer p + p { margin-top: 10px; }
}

@media (max-width: 390px) {
  .topnav, .nav { grid-template-columns: 1fr; }
  h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
  .section-label, .card-topline, .red-note, .page-kicker { font-size: 0.62rem; letter-spacing: 0.15em; }
}