/* Shared chrome for the two ad-layout pages. Same palette as the hub. */
:root {
  --surround: #0a1a13;
  --felt-base: #1a4a32;
  --felt-high: #2e7049;
  --felt-mid: #1d4f35;
  --felt-low: #0f3221;
  --ink: #e8efe9;
  --dim: #9fb3a5;
  --gold: #ffdf9a;
  --card: #fffefb;
  --free: #7fd39b;
  --cost: #ffb0a0;
  --warn: #a81f2d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surround);
  color: var(--ink);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.55;
}

.sheet {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) clamp(14px, 4vw, 32px) 56px;
}

.crumbs {
  font-size: 13px;
  color: var(--dim);
  margin: 0 0 18px;
}

.crumbs a {
  color: var(--dim);
}

h1 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(26px, 5.5vw, 44px);
  line-height: 1.1;
  text-wrap: balance;
}

h1 .and {
  color: var(--gold);
}

.lede {
  margin: 12px 0 0;
  max-width: 62ch;
  color: var(--dim);
  font-size: clamp(14px, 2vw, 16px);
  text-wrap: pretty;
}

.felt {
  border-radius: 16px;
  padding: clamp(16px, 3vw, 30px);
  margin-top: clamp(22px, 4vw, 36px);
  background-color: var(--felt-base);
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
    radial-gradient(115% 85% at 50% -12%, var(--felt-high) 0%, var(--felt-mid) 42%, var(--felt-low) 100%);
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.4);
}

.note {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--gold);
  background: rgba(0, 0, 0, 0.24);
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  color: var(--ink);
  max-width: 74ch;
}

.note.danger {
  border-left-color: var(--warn);
}

.note strong {
  color: var(--gold);
}

footer {
  text-align: center;
  padding: 8px 16px 40px;
  color: var(--dim);
  font-size: 12px;
}

footer a {
  color: var(--dim);
}