:root {
  --paper: #F1E4C6;
  --paper-2: #E9D29F;
  --ink: #17110C;
  --ink-soft: #5E4A33;
  --rust: #B3261C;
  --rust-deep: #861A12;
  --line: #7A5E3E;
  --film: #0D0A08;
  --bone: #F2E6CC;
  --blood: #B8261B;
  --mustard: #E3A21A;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #100C09;
    --paper-2: #1C1510;
    --ink: #F2E6CC;
    --ink-soft: #BFA982;
    --rust: #D8382A;
    --rust-deep: #F0604A;
    --line: #6E5A40;
  }
}

:root[data-theme="dark"] {
  --paper: #100C09;
  --paper-2: #1C1510;
  --ink: #F2E6CC;
  --ink-soft: #BFA982;
  --rust: #D8382A;
  --rust-deep: #F0604A;
  --line: #6E5A40;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Vollkorn', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.55;
}

h1, h2, h3, p { margin: 0; }
a { color: var(--rust-deep); }

.hero {
  text-align: center;
  color: var(--bone);
  background: linear-gradient(var(--blood) 0 8px, var(--film) 8px calc(100% - 6px), var(--mustard) calc(100% - 6px));
  padding: 48px 16px 56px;
}

.barrel {
  position: relative;
  width: min(220px, 56vw);
  aspect-ratio: 1;
  margin: 0 auto 22px;
  border-radius: 50%;
  overflow: hidden;
  background:
    repeating-conic-gradient(from 8deg, rgba(0, 0, 0, 0.22) 0 7deg, transparent 7deg 45deg),
    repeating-radial-gradient(circle, transparent 0 11%, rgba(0, 0, 0, 0.32) 11% 12.5%),
    radial-gradient(circle, #e2452f 0 24%, var(--blood) 58%, #3a0906 100%);
  animation: iris 0.7s ease-out both;
}
.barrel svg { width: 100%; height: 100%; display: block; animation: rise 0.6s ease-out 0.4s both; }
.barrel path { fill: var(--film); }

.credit, .cta, .cta-note, h2, h3, .step-n {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}
.credit {
  letter-spacing: 0.26em;
  font-size: 13px;
  color: color-mix(in srgb, var(--bone) 70%, transparent);
}
h1 {
  font-family: 'Rye', Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 11vw, 88px);
  line-height: 1.05;
  margin: 8px 0 14px;
  text-shadow: 4px 4px 0 var(--blood);
  animation: title-in 0.7s ease-out 0.6s both;
}
.tagline {
  font-style: italic;
  font-size: 20px;
  max-width: 30ch;
  margin: 0 auto 28px;
  color: var(--bone);
}

.cta {
  display: inline-block;
  background: var(--rust);
  color: var(--bone);
  border: 1px solid var(--rust-deep);
  text-decoration: none;
  letter-spacing: 0.18em;
  font-size: 18px;
  padding: 14px 34px;
  box-shadow: 5px 5px 0 var(--mustard);
  transition: transform 0.1s, box-shadow 0.1s;
}
.cta:hover { background: var(--rust-deep); color: var(--bone); }
.cta:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--mustard); }
.cta:focus-visible { outline: 2px solid var(--mustard); outline-offset: 4px; }
.cta-note {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--mustard);
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px;
}
section { padding: 48px 0 0; }

h2 {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.16em;
  color: var(--rust-deep);
  margin-bottom: 18px;
}
h3 {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.16em;
  margin-bottom: 4px;
}

.lede {
  font-size: 22px;
  line-height: 1.5;
  max-width: 36em;
}
.lede em { color: var(--rust-deep); }

.roles, .steps, .features { list-style: none; margin: 0; padding: 0; }

.roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.roles li {
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 5px 5px 0 var(--rust);
  padding: 16px;
  margin: 0 5px 5px 0;
}
.roles p { font-size: 16px; color: var(--ink-soft); }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px;
}
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.step-n {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--film);
  color: var(--mustard);
  border: 1px solid var(--mustard);
  font-size: 17px;
}
.steps p { font-size: 16px; }

.videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.videos figure { margin: 0; }
.video-frame {
  aspect-ratio: 16 / 9;
  background: var(--film);
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  color: var(--bone);
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
figcaption { font-size: 15px; font-style: italic; color: var(--ink-soft); margin-top: 8px; }

.features li {
  padding: 12px 0 12px 22px;
  border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  position: relative;
}
.features li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: var(--rust);
}
.features strong { color: var(--rust-deep); }

.closer {
  text-align: center;
  padding-bottom: 56px;
}
.fine {
  font-family: 'Rye', Georgia, serif;
  font-size: 64px;
  line-height: 1.1;
  margin-bottom: 20px;
  text-shadow: 4px 4px 0 var(--rust);
  color: var(--ink);
}

footer {
  background: var(--film);
  color: color-mix(in srgb, var(--bone) 70%, transparent);
  border-top: 6px solid var(--mustard);
  text-align: center;
  font-size: 15px;
  padding: 22px 16px;
}
footer a { color: var(--mustard); }

@keyframes iris { from { clip-path: circle(4% at 50% 50%); } to { clip-path: circle(71% at 50% 50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(8%); } to { opacity: 1; transform: none; } }
@keyframes title-in { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .barrel, .barrel svg, h1 { animation: none; }
}