:root {
  --mustard: #dca64a;
  --mustard-deep: #c98f2e;
  --ink: #1c1a17;
  --ink-soft: #4a443b;
  --paper: #f6ecd6;
  --paper-edge: #e8d9b5;
  --red: #b8382b;
  --link: #8f2a20;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1f1c18;
    --paper-edge: #3a342b;
    --ink: #f3e7cc;
    --ink-soft: #c9bc9f;
    --link: #f0a35e;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mustard);
  color: var(--ink);
  font: 17px/1.6 "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--link); }
header.top {
  max-width: 960px; margin: 0 auto; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
header.top .brand {
  font-family: "Anton", Impact, sans-serif; letter-spacing: .02em;
  font-size: 22px; color: #1c1a17; text-decoration: none; text-transform: uppercase;
}
header.top nav a {
  color: #1c1a17; text-decoration: none; font-weight: 600; margin-left: 16px; font-size: 15px;
}
header.top nav a:hover { text-decoration: underline; }
.banner {
  display: block; width: 100%; max-width: 960px; margin: 0 auto; height: auto;
  border-top: 3px solid #1c1a17; border-bottom: 3px solid #1c1a17;
}
main {
  max-width: 960px; margin: 0 auto 40px; padding: 0 16px;
}
.file {
  background: var(--paper);
  border: 2px solid #1c1a17;
  border-radius: 4px 18px 4px 4px;
  box-shadow: 6px 6px 0 #1c1a17;
  padding: 28px clamp(18px, 4vw, 44px);
  margin-top: 28px;
  position: relative;
}
.file .tab {
  position: absolute; top: -16px; left: 22px;
  background: var(--red); color: #fff3df;
  font: 600 12px/1 "Work Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 12px; border: 2px solid #1c1a17; border-radius: 4px;
}
h1, h2 { font-family: "Anton", Impact, sans-serif; font-weight: 400; letter-spacing: .01em; line-height: 1.15; }
h1 { font-size: clamp(30px, 6vw, 46px); margin: 6px 0 10px; text-transform: uppercase; }
h2 { font-size: 24px; margin: 30px 0 8px; text-transform: uppercase; }
.lede { font-size: 19px; color: var(--ink-soft); margin-top: 0; }
.host { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.host img {
  width: 132px; height: 132px; border-radius: 50%;
  border: 3px solid #1c1a17; background: var(--mustard); flex: none;
}
.host div { flex: 1 1 260px; }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; padding: 0; list-style: none; }
.links a {
  display: inline-block; padding: 10px 16px; border: 2px solid #1c1a17; border-radius: 999px;
  background: var(--mustard); color: #1c1a17; font-weight: 600; text-decoration: none;
  box-shadow: 3px 3px 0 #1c1a17;
}
.links a:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #1c1a17; }
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 10px; }
.channel { border: 2px dashed var(--ink-soft); border-radius: 8px; padding: 14px 16px; }
.channel h3 { margin: 0 0 4px; font-size: 18px; }
.channel p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.stamp {
  display: inline-block; transform: rotate(-4deg);
  border: 3px solid var(--red); color: var(--red); padding: 2px 10px;
  font: 400 18px/1.3 "Anton", Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.meta { color: var(--ink-soft); font-size: 14px; }
.legal p, .legal li { max-width: 72ch; }
.legal ul { padding-left: 22px; }
footer {
  max-width: 960px; margin: 0 auto; padding: 0 16px 36px;
  font-size: 14px; color: #1c1a17;
}
footer a { color: #1c1a17; margin-right: 14px; }
@media (max-width: 520px) {
  header.top { flex-direction: column; align-items: flex-start; gap: 4px; }
  header.top nav a { margin: 0 14px 0 0; }
  .host img { width: 104px; height: 104px; }
}