:root {
  --ink: #0F0F0F;
  --paper: #F8F8F8;
  --white: #FFFFFF;
  --green: #5DD62C;
  --muted: #5C5C5C;
  --display: "Avenir Next Condensed", Impact, "Helvetica Neue", sans-serif;
  --body: "Avenir Next", "Trebuchet MS", sans-serif;
  --gap: clamp(24px, 5vw, 56px);
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: var(--paper); color: var(--ink); font: 500 1rem/1.65 var(--body); }
header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px var(--gap); background: var(--ink); color: var(--white); }
.mark { display: inline-flex; align-items: center; gap: 3px; color: inherit; text-decoration: none; font: 900 1.5rem/1.2 var(--display); text-transform: uppercase; }
.mark span:last-child { background: var(--green); color: var(--ink); padding: 3px 5px; }
.label, .eyebrow, .badge { font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
a:focus-visible { outline: 3px solid var(--green); outline-offset: 6px; }
main { max-width: 1060px; margin: auto; padding: clamp(48px, 8vw, 100px) var(--gap) 64px; }
.eyebrow { margin: 0 0 18px; color: var(--muted); }
h1 { margin: 0; font: 900 clamp(3rem, 7.5vw, 6rem)/1 var(--display); letter-spacing: -.025em; text-transform: uppercase; }
.filmstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 16px 8px; margin: 38px 0; background: var(--ink); border-block: 6px dotted var(--paper); }
.filmstrip li { padding: 18px 12px; background: var(--white); font: 800 1rem/1.25 var(--display); text-transform: uppercase; }
.filmstrip li:first-child { background: var(--green); }
.filmstrip li span { display: block; font-size: 1.75rem; margin-bottom: 8px; }
.notice { background: var(--white); border: 2px solid var(--ink); padding: clamp(22px, 4vw, 36px); box-shadow: 5px 5px 0 var(--ink); }
.badge { display: inline-block; padding: 4px 9px; background: var(--green); }
h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); line-height: 1.3; margin: 18px 0 12px; }
.notice p { max-width: 66ch; margin: 10px 0 0; color: var(--muted); }
footer { max-width: 1060px; margin: auto; padding: 24px var(--gap); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .75rem; }
@media (max-width: 540px) {
  header { padding-block: 18px; }
  .label { font-size: .625rem; letter-spacing: .04em; text-align: right; }
  .filmstrip { gap: 4px; padding-inline: 6px; }
  .filmstrip li { padding: 12px 5px; font-size: .6875rem; }
  .filmstrip li span { font-size: 1.5rem; }
}