/* 20 dollar draft pages (/20-dollar-draft/…, build/twenty-dollar-draft/generate.mjs): the hub, the rules, the
   category index, the category generator and the theme lists. Games group (body[data-accent="pink"]): the accent
   tints icons, markers, the 3px top strip and the one category CTA; headings and panels stay on the shared surfaces.
   Tokens only, logical properties (RTL needs no overrides), one easing, nothing moves under reduced motion. Published
   as /assets/site/twenty-dollar-draft.css. */

.draft-page { padding-block-end: var(--space-6); }
.draft-page.draft-page > * { margin-block: 0; }
.draft-page.draft-page > * + * { margin-block-start: var(--space-8); }
.draft-page--end { padding-block-end: var(--space-8); }
.draft-page [hidden] { display: none !important; }
.draft-page :is(h2, h3) { text-wrap: balance; }
.draft-page :where(p, li, dd) { line-break: strict; }
:lang(ja) .draft-page, :lang(zh) .draft-page { word-break: keep-all; overflow-wrap: anywhere; }

.draft-h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
}
.draft-lead { margin: 0; max-inline-size: 68ch; color: var(--text-muted); font-size: var(--step-0); line-height: 1.7; }
.draft-lead + .draft-lead { margin-block-start: var(--space-3); }
.draft-lead strong { color: var(--text); font-weight: 600; }
.draft-page a:not(.btn, .draft-chip, .draft-theme__deal, .draft-theme__more) {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--primary) 50%, transparent);
  text-underline-offset: 0.24em;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.draft-page a:not(.btn, .draft-chip, .draft-theme__deal, .draft-theme__more):hover { color: var(--primary-hover); text-decoration-color: currentColor; }

/* ── Play row: the one category CTA, then quiet secondaries ──────────────────────────────────────────── */
.draft-cta { display: flex; flex-direction: column; gap: var(--space-3); }
.draft-cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.draft-cta__row .btn { white-space: normal; min-block-size: 48px; }
.draft-cta__row .btn > i { color: var(--accent); }
.draft-cta__row .btn--primary > i { color: inherit; }
.draft-play { padding-inline: var(--space-6); font-size: var(--step-1); }
@media (max-width: 559.98px) {
  .draft-cta__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .draft-cta__row > .btn--primary { grid-column: 1 / -1; }
  .draft-cta__row > .btn:only-child, .draft-cta__row > .btn:nth-child(2):last-child { grid-column: 1 / -1; }
}
.draft-note { margin: 0; max-inline-size: 68ch; color: var(--text-muted); font-size: var(--step--1); line-height: 1.55; }
.draft-local {
  margin: 0;
  max-inline-size: 68ch;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  color: var(--text);
  font-size: var(--step--1);
  line-height: 1.55;
}
.draft-local:focus { outline: none; }
.draft-local:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Steps: a ruled sequence, not a card wall ──────────────────────────────────────────────────────── */
.draft-steps { counter-reset: draft-step; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--border); }
.draft-steps > li {
  counter-increment: draft-step;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--border);
}
.draft-steps > li::before {
  content: counter(draft-step);
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 0.9;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.draft-steps h3 { margin: 0; color: var(--text); font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.draft-steps p { margin: 0; color: var(--text-muted); line-height: 1.6; }
@media (min-width: 900px) {
  .draft-steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); border-block-end: 1px solid var(--border); }
  .draft-steps--four > li { grid-template-columns: minmax(0, 1fr); align-content: start; padding: var(--space-5) var(--space-5) var(--space-5) 0; border-block-end: 0; }
  .draft-steps--four > li + li { padding-inline-start: var(--space-5); border-inline-start: 1px solid var(--border); }
  .draft-steps--four > li::before { grid-row: auto; margin-block-end: var(--space-2); }
}

/* ── Teaser: one theme, five options, fixed size ──────────────────────────────────────────────────── */
.draft-teaser {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--accent), var(--accent)) top / 100% 3px no-repeat padding-box,
    var(--surface-1);
  box-shadow: var(--shadow-1);
}
@media (min-width: 768px) {
  .draft-teaser { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: var(--space-5) var(--space-6); padding: var(--space-6); }
  .draft-teaser__head { grid-row: span 2; }
}
.draft-teaser__label { margin: 0 0 var(--space-2); color: var(--text-muted); font-size: var(--step--1); font-weight: 600; }
.draft-teaser__name {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-block-size: calc(2 * 1em);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
}
.draft-teaser__tagline {
  margin: var(--space-2) 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-block-size: calc(2 * 1.5em);
  color: var(--text-muted);
  line-height: 1.5;
}
.draft-teaser__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-start: var(--space-4); }
.draft-teaser__status { margin: 0; min-block-size: 1.45em; color: var(--text-faint); font-size: var(--step--1); line-height: 1.45; }

/* Option rows (teaser and generator): every row reserves two lines, so a new deal never changes the box height. */
.draft-options-list, .draft-deal {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: draft-lot;
  display: grid;
  gap: var(--space-2);
}
.draft-options-list > li, .draft-deal > li {
  counter-increment: draft-lot;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  box-sizing: border-box;
  block-size: calc(2 * 1.35em + 2 * var(--space-2) + 2px);
  padding: var(--space-2) var(--space-3);
  padding-inline-start: 2.75rem;
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  color: var(--text);
  font-weight: 500;
  line-height: 1.35;
}
.draft-options-list > li::before, .draft-deal > li::before {
  content: '$';
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 1.5rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.draft-deal > li::before { content: counter(draft-lot); font-variant-numeric: tabular-nums; }

/* ── Modes: ruled rows with an accent icon ────────────────────────────────────────────────────────── */
.draft-modes { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-block-start: 1px solid var(--border); }
@media (min-width: 768px) { .draft-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); } }
.draft-mode { padding-block: var(--space-4); border-block-end: 1px solid var(--border); }
.draft-mode dt { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--text); font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.draft-mode dt > i {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  color: var(--accent);
  font-size: 1.1rem;
}
.draft-mode dd { margin: var(--space-2) 0 0; padding-inline-start: calc(2.75rem + var(--space-3)); color: var(--text-muted); line-height: 1.6; }

/* ── Reading parts (rules, generator notes, theme tips) ───────────────────────────────────────────── */
.draft-prose { max-inline-size: 68ch; color: var(--text-muted); line-height: 1.7; }
.draft-prose > * { margin: 0; }
.draft-prose > * + * { margin-block-start: var(--space-4); }
.draft-prose > :is(h2, h3) + * { margin-block-start: var(--space-3); }
.draft-prose > h3 { margin-block-start: var(--space-6); color: var(--text); font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.draft-prose :is(ul, ol) { padding-inline-start: 1.4em; }
.draft-prose li + li { margin-block-start: var(--space-2); }
.draft-prose li::marker { color: var(--violet); font-weight: 600; }
.draft-prose strong { color: var(--text); font-weight: 600; }
:lang(ru) .draft-prose { max-inline-size: 74ch; }
.draft-note-well {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}
.draft-note-well > * { margin: 0; }
.draft-note-well > * + * { margin-block-start: var(--space-2); }
.draft-note-well__label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); font-weight: 600; }
.draft-note-well__label::before { content: ''; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); }

/* Variants: a ruled definition list. */
.draft-variants { margin: 0; border-block-start: 1px solid var(--border); }
.draft-variant { padding-block: var(--space-4); border-block-end: 1px solid var(--border); }
.draft-variant dt { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); color: var(--text); font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.draft-variant dt > i { color: var(--accent); font-size: 0.95em; }
.draft-variant dd { margin: 0; max-inline-size: 68ch; color: var(--text-muted); line-height: 1.7; }
.draft-variant dd + dd { margin-block-start: var(--space-2); }

/* ── Category index ───────────────────────────────────────────────────────────────────────────────── */
.draft-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.draft-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 36px;
  margin-block: 4px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.draft-chip::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); }
.draft-chip:hover { border-color: color-mix(in oklab, var(--accent) 55%, transparent); background: var(--surface-3); color: var(--text); }
.draft-chip .draft-n { color: var(--text-faint); font-variant-numeric: tabular-nums; }

.draft-group { scroll-margin-block-start: calc(var(--header-stuck) + var(--space-4)); }
.draft-group + .draft-group { margin-block-start: var(--space-8); }
.draft-group__head { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-4); }
.draft-group__head::before { content: ''; flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); }
.draft-group__head h2 { margin: 0; font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.05; text-transform: uppercase; color: var(--text); }
.draft-group__head::after { content: ''; flex: 1 1 auto; block-size: 1px; background: var(--border); }
.draft-group__n { order: 2; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.draft-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.draft-theme {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}
.draft-theme h3 { margin: 0; color: var(--text); font-size: var(--step-1); font-weight: 600; line-height: 1.25; }
.draft-theme__tagline { margin: 0; color: var(--text-muted); font-size: var(--step--1); line-height: 1.5; }
.draft-theme__samples { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.draft-theme__samples > li {
  max-inline-size: 100%;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  color: var(--text);
  font-size: var(--step--1);
  line-height: 1.35;
}
.draft-theme__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-block-start: auto; padding-block-start: var(--space-2); }
.draft-theme__deal, .draft-theme__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
  text-underline-offset: 0.24em;
}
.draft-theme__deal > i, .draft-theme__more > i { color: var(--accent); }
.draft-theme__deal:hover, .draft-theme__more:hover { text-decoration-color: var(--accent); }

/* ── Generator: the Tool Workspace (controls beside the result) ──────────────────────────────────── */
.draft-gen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-block-start-color: var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}
.draft-gen::before { content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 1; block-size: 2px; background: var(--accent); pointer-events: none; }
@media (min-width: 860px) { .draft-gen { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.draft-gen__controls { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.draft-field { display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }
.draft-field label { color: var(--text); font-size: 0.95rem; font-weight: 500; line-height: 1.25; }
.draft-select {
  appearance: none;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--tap);
  padding: 10px var(--space-4);
  padding-inline-end: 2.75rem;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%) no-repeat right 18px center / 6px 6px,
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%) no-repeat right 12px center / 6px 6px,
    var(--bg-raised);
  color: var(--text);
  color-scheme: dark;
  font: inherit;
  font-size: max(16px, var(--step-0));
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
[dir="rtl"] .draft-select { background-position: left 12px center, left 18px center, 0 0; }
.draft-select:hover, .draft-select:focus-visible { border-color: var(--primary); }
.draft-select option, .draft-select optgroup { background: var(--surface-1-solid); color: var(--text); }
.draft-gen__deal {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: 52px;
  padding-inline: var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: var(--step-0);
  font-weight: 700;
  box-shadow: var(--shadow-1);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.draft-gen__deal:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 86%, white); }
.draft-gen__deal:active:not(:disabled) { transform: translateY(1px); }
.draft-help { margin: 0; color: var(--text-muted); font-size: var(--step--1); line-height: 1.5; }
.draft-gen__result { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; padding: var(--space-5); border-block-start: 1px solid var(--border); background: var(--bg-raised); }
@media (min-width: 860px) { .draft-gen__result { border-block-start: 0; border-inline-start: 1px solid var(--border); } }
.draft-gen__theme {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}
@media (max-width: 479.98px) { .draft-gen__theme { font-size: var(--step-2); } }
.draft-gen__tagline {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-block-size: 3em;
  color: var(--text-muted);
  line-height: 1.5;
}
.draft-gen__meta { margin: 0; color: var(--text-faint); font-size: var(--step--1); font-weight: 600; }
.draft-gen__result { container-type: inline-size; }
@container (min-width: 520px) {
  .draft-deal { grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--draft-rows, 5), auto); }
}
.draft-deal[data-count="15"] { --draft-rows: 8; }
.draft-deal[data-count="20"] { --draft-rows: 10; }
.draft-deal[data-count="25"] { --draft-rows: 13; }
.draft-deal > li { background: var(--surface-1); }
.draft-gen__status { margin: 0; min-block-size: 1.45em; color: var(--text-muted); font-size: var(--step--1); line-height: 1.45; }
.draft-gen__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.draft-gen__actions .btn { flex: 1 1 9rem; min-inline-size: 0; white-space: normal; }
.draft-gen__actions .btn > i { color: var(--accent); }
.draft-gen__play { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-block-start: var(--space-2); border-block-start: 1px solid var(--border); }
.draft-gen__play p { flex: 1 1 14rem; margin: 0; color: var(--text-muted); font-size: var(--step--1); line-height: 1.5; }

/* ── Theme pages: the full list, grouped ─────────────────────────────────────────────────────────── */
.draft-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6) var(--space-6); }
@media (min-width: 720px) { .draft-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.draft-list__group h3 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-3); padding-block-end: var(--space-2); border-block-end: 1px solid var(--border); color: var(--text); font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.draft-list__group h3 span { color: var(--text-faint); font-size: var(--step--1); font-weight: 500; font-variant-numeric: tabular-nums; }
.draft-list__group ol { margin: 0; padding-inline-start: 2.2em; color: var(--text); line-height: 1.5; columns: 2 12rem; column-gap: var(--space-5); }
.draft-list__group li { padding-block: 3px; break-inside: avoid; }
.draft-list__group li::marker { color: var(--text-faint); font-size: 0.85em; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .draft-page *, .draft-gen__deal { transition-duration: 1ms !important; }
}

/* Supporting guides use the page itself as their reading surface. */
main > .draft-article.content-page {
  max-inline-size: 1040px;
  margin: 18px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.draft-article > .draft-cta:first-child { margin-block: 0 24px; }
.draft-article.draft-page > .draft-gen { margin-block-start: 24px; }
.draft-article > section { margin-block: 36px; }
.draft-article .draft-prose { max-inline-size: 76ch; font-size: 1.05rem; line-height: 1.8; }
.draft-article .draft-h2 { text-transform: none; }
.draft-article :is(.draft-jump, .draft-themes, .draft-theme__samples, .draft-deal, .draft-steps) { padding-inline-start: 0; }
.draft-article .draft-gen {
  gap: 28px;
  padding: clamp(16px, 2vw, 28px);
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  box-shadow: none;
}
.draft-article .draft-gen::before { display: none; }
.draft-article :is(.draft-gen__controls, .draft-gen__result) { padding: 0; border: 0; background: transparent; }
.draft-article .draft-gen__tagline { min-block-size: 0; }
.draft-article .draft-deal { gap: 0 24px; }
.draft-article .draft-deal > li {
  display: block;
  block-size: auto;
  min-block-size: 44px;
  margin: 0;
  padding: 11px 0 11px 2.2rem;
  border: 0;
  border-block-end: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.draft-article .draft-deal > li::before { inset-inline-start: 0; font-family: inherit; font-size: .8rem; font-weight: 700; }
.draft-article .draft-theme { margin: 0; padding: 18px 0; border: 0; border-block-start: 2px solid var(--accent); border-radius: 0; background: transparent; }
.draft-article .draft-theme__samples > li { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.draft-article .draft-theme__samples > li:not(:last-child)::after { content: ' ·'; color: var(--text-faint); }
.draft-article .draft-note-well { border: 0; border-inline-start: 3px solid var(--accent); border-radius: 0; background: transparent; }

@font-face { font-family: 'Draft Lilita'; src: url('/assets/fonts/draft/lilita-one-latin-400-normal.woff2?v=3b71f6c2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
.draft-overview { --text: #fff3d8; --text-muted: #d5c2d6; display: grid; gap: 26px; padding: clamp(24px, 4vw, 46px); border: 3px solid #160f1c; border-radius: 24px; background: repeating-conic-gradient(#ffffff03 0% 25%, transparent 0% 50%) 0 / 38px 38px, #211629; box-shadow: 0 6px 0 #160f1c; }
.draft-overview__brand { align-self: center; text-align: center; color: #f2c56a; font: 400 clamp(3.5rem, 8vw, 6rem)/.9 'Draft Lilita', sans-serif; text-shadow: 0 5px #160f1c; transform: rotate(-3deg); }
.draft-overview__brand span { display: block; color: #f35da7; }
.draft-overview .draft-h2 { color: #fff3d8; text-transform: none; }
.draft-overview .draft-cta { margin-block-start: 24px; }
.draft-overview .btn { border: 2px solid #160f1c; border-radius: 13px; background: #49334f; color: #fff3d8; box-shadow: 0 4px #160f1c; }
.draft-overview .btn--primary { background: #82da83; color: #211629; }
@media (min-width: 800px) { .draft-overview { grid-template-columns: minmax(0, .6fr) minmax(0, 1fr); align-items: center; } }