:root {
  --paper:#fff5dc;
  --ink:#16253a;
  --red:#ac302c;
  --gold:#ebba5b
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif
}
a {
  color:inherit
}
header {
  max-width:1280px;
  margin:auto;
  padding:22px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:2px solid var(--ink)
}
.brand {
  font-weight:900;
  font-size:28px;
  letter-spacing:-1px;
  text-decoration:none
}
.brand span {
  color:var(--red)
}
nav {
  display:flex;
  gap:24px;
  font-size:14px;
  font-weight:bold
}
nav a {
  text-decoration:none
}
main {
  overflow:hidden
}
.hero {
  max-width:1280px;
  margin:auto;
  padding:65px 5% 75px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:55px;
  align-items:center
}
.eyebrow {
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:2px;
  font-weight:800;
  color:var(--red)
}
h1 {
  font-family:Georgia,serif;
  font-size:clamp(60px,7.8vw,108px);
  line-height:.94;
  letter-spacing:-5px;
  margin:22px 0
}
h1 em {
  color:var(--red)
}
.intro {
  font-size:19px;
  line-height:1.6;
  max-width:490px
}
.button {
  display:inline-block;
  background:var(--ink);
  color:var(--paper);
  padding:17px 23px;
  border:2px solid var(--ink);
  text-decoration:none;
  font-weight:bold;
  box-shadow:5px 5px 0 var(--gold);
  margin:12px 0 25px
}
.fine {
  font-size:12px;
  line-height:1.6;
  max-width:450px
}
.cover {
  position:relative;
  transform:rotate(2deg);
  border:3px solid var(--ink);
  box-shadow:13px 13px 0 var(--gold);
  background:white
}
.cover img {
  width:100%;
  display:block
}
.stamp {
  position:absolute;
  bottom:25px;
  left:-25px;
  background:var(--red);
  color:white;
  font-weight:900;
  padding:14px 18px;
  transform:rotate(-7deg);
  border:2px solid var(--ink)
}
.ticker {
  background:var(--red);
  color:var(--paper);
  padding:20px;
  text-align:center;
  line-height:1.7;
  font-weight:900;
  letter-spacing:2px;
  border-block:2px solid var(--ink)
}
section {
  padding:65px 5%;
  max-width:1280px;
  margin:auto
}
h2 {
  font:700 clamp(35px,4vw,55px)/1.1 Georgia,serif;
  letter-spacing:-1px;
  margin:12px 0 20px
}
.section-intro {
  max-width:650px;
  line-height:1.7
}
.grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:35px
}
.card {
  border:2px solid var(--ink);
  background:#fffcf3;
  box-shadow:5px 5px 0 #e7d8b6
}
.image-link {
  display:block;
  overflow:hidden;
  border-bottom:2px solid var(--ink)
}
.card img {
  width:100%;
  display:block;
  transition:transform .2s
}
.card a:hover img {
  transform:scale(1.025)
}
.copy {
  padding:22px
}
.number {
  font-size:11px;
  letter-spacing:2px;
  font-weight:bold;
  color:var(--red)
}
h3 {
  font:700 25px Georgia,serif;
  margin:12px 0
}
.copy p {
  line-height:1.6;
  font-size:14px
}
.copy a {
  font-size:13px;
  font-weight:bold;
  text-underline-offset:4px
}
.about {
  border-top:2px solid var(--ink);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px
}
.about p {
  line-height:1.8
}
.note {
  background:var(--ink);
  color:var(--paper);
  padding:28px;
  border-top:5px solid var(--gold)
}
.note strong {
  color:var(--gold)
}
footer {
  border-top:2px solid var(--ink);
  padding:28px 5%;
  font-size:12px;
  line-height:1.7;
  max-width:1280px;
  margin:auto
}
a:focus-visible {
  outline:3px solid var(--red);
  outline-offset:5px
}
@media(max-width:760px) {
  .hero {
  grid-template-columns:1fr;
  padding-top:35px;
  gap:30px
}
h1 {
  letter-spacing:-3px
}
.cover {
  max-width:450px;
  margin:0 auto
}
.stamp {
  left:-8px
}
.grid {
  grid-template-columns:1fr
}
.card {
  max-width:490px;
  margin:auto
}
.about {
  grid-template-columns:1fr;
  gap:15px
}
nav {
  gap:16px
}
.ticker {
  font-size:12px
}
section {
  padding-block:45px
}

}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
.card img {
  transition:none
}

}

summary {
  cursor:pointer;
  font-size:14px;
  font-weight:bold;
  text-decoration:underline;
  text-underline-offset:4px;
  padding:10px 0
}
summary:focus-visible {
  outline:3px solid var(--red);
  outline-offset:3px
}
.story {
  border-top:1px solid #d5c8aa;
  margin-top:10px;
  padding-top:8px
}
.story h4 {
  font:700 22px Georgia,serif
}
.story p {
  font-size:15px;
  line-height:1.75
}
.grid {
  align-items:start
}

/* Episode library and interactive summit game */
nav { flex-wrap: wrap; }
.library-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.episode-link { padding: 25px; border: 2px solid var(--ink); text-decoration: none; }
.episode-link:hover { background: #f3dfad; }
.episode-link p { line-height: 1.7; }
.episode-title { font-size: clamp(36px, 6vw, 72px); letter-spacing: -2px; }
.episode-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.episode-art { width: 100%; border: 2px solid var(--ink); }
.episode-story { font-family: Georgia, serif; font-size: 18px; line-height: 1.8; }
.episode-story h2 { font-size: 32px; }
.game-section { border-top: 2px solid var(--ink); }
#summit-form { max-width: 680px; margin-top: 30px; }
label { display: block; font-weight: bold; margin-bottom: 12px; }
select { display: block; width: 100%; padding: 16px; font: inherit;
  background: #fffcf3; border: 2px solid var(--ink); color: var(--ink); }
button { font: inherit; cursor: pointer; }
.summit-result { background: #fffcf3; border: 2px solid var(--ink);
  border-top: 8px solid var(--red); padding: 28px; max-width: 780px; margin-block: 20px; }
.summit-result h3 { font-size: 32px; }
.summit-result p { line-height: 1.8; }
#result-actions button { padding: 12px 18px; margin: 0 10px 10px 0;
  background: transparent; color: var(--ink); border: 2px solid var(--ink); }
button:focus-visible, select:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
@media(max-width:760px) {
  .library-list, .episode-layout { grid-template-columns: 1fr; }
  header { gap: 20px; align-items: flex-start; }
  nav { gap: 12px; }
}