:root {
  color-scheme: light;
  --ink: #171717;
  --paper: #f2f0e8;
  --paper-2: #fff8d8;
  --line: #22201d;
  --red: #e02b2b;
  --green: #dfff4f;
  --cyan: #4ed3c4;
  --blue: #1d4ed8;
  --shadow: 0 22px 70px rgba(16, 16, 16, 0.2);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(23, 23, 23, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(23, 23, 23, 0.08) 1px, transparent 1px),
    var(--paper);
  background-size: 36px 36px;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

button,
a.as-link {
  min-height: 48px;
}

.app-frame,
.person-frame {
  min-height: 100vh;
}

.hero-band {
  min-height: 82vh;
  padding: 16px 24px 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  border-bottom: 3px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

.hero-band::before {
  content: none;
}

.hero-band::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 58px;
  z-index: 0;
  width: 260px;
  height: 360px;
  background:
    linear-gradient(135deg, transparent 0 43%, rgba(29, 78, 216, 0.78) 43% 53%, transparent 53%),
    linear-gradient(45deg, transparent 0 42%, rgba(255, 222, 89, 0.88) 42% 52%, transparent 52%);
  transform: translateX(42%) rotate(9deg);
}

.app-frame::before {
  content: "";
  position: absolute;
  left: 0;
  top: 118px;
  width: 250px;
  height: 360px;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(224, 43, 43, 0.86) 42% 52%, transparent 52%),
    linear-gradient(45deg, transparent 0 43%, rgba(78, 211, 196, 0.72) 43% 53%, transparent 53%);
  transform: translateX(-45%) rotate(-7deg);
  pointer-events: none;
}

.app-frame {
  position: relative;
}

.brand-rail {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.brand-rail.compact {
  padding: 24px;
}

.brand,
.mini-nav,
.quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 36px;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
}

.mini-nav {
  gap: 8px;
}

.mini-nav a,
.quiet-link {
  padding: 10px 12px;
  border: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.36);
}

.generator-layout {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 58px 0 8px;
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(340px, 1.08fr);
  align-items: center;
  gap: 42px;
  position: relative;
  z-index: 1;
}

.generator-panel {
  max-width: 560px;
  position: relative;
}

.generator-panel::before {
  content: "";
  position: absolute;
  left: -18px;
  top: -22px;
  width: 74px;
  height: 74px;
  border: 3px solid var(--line);
  background:
    linear-gradient(90deg, transparent 46%, var(--line) 46% 54%, transparent 54%),
    linear-gradient(0deg, transparent 46%, var(--line) 46% 54%, transparent 54%),
    #ffde59;
  transform: rotate(-8deg);
  z-index: -1;
}

.kicker {
  margin: 0 0 14px;
  font-size: 0.86rem;
  font-weight: 900;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: 4rem;
  line-height: 0.9;
  font-weight: 950;
}

.generator-form {
  margin-top: 26px;
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.field input {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  color: var(--ink);
  background: #fffef7;
  border: 3px solid var(--line);
  border-radius: 0;
  box-shadow: 8px 8px 0 var(--line);
  font-size: 1.35rem;
  font-weight: 850;
}

.style-grid {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.style-grid legend {
  margin-bottom: 10px;
  font-weight: 850;
}

.style-choice {
  min-height: 42px;
  position: relative;
  display: grid;
}

.style-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.style-choice span {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 8px;
  border: 2px solid var(--line);
  background: #fffef7;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.05;
  text-align: center;
  cursor: pointer;
}

.style-choice i {
  width: 22px;
  height: 22px;
  display: block;
  border: 2px solid currentColor;
  background: var(--swatch, #dfff4f);
}

.style-choice input:checked + span {
  color: var(--paper);
  background: var(--ink);
}

.option-classic { --swatch: #dfff4f; }
.option-noir { --swatch: #181818; }
.option-acid { --swatch: linear-gradient(135deg, #4ed3c4 0 45%, #e02b2b 45% 58%, #dfff4f 58%); }
.option-office { --swatch: repeating-linear-gradient(0deg, #fffef7 0 4px, #1d4ed8 4px 6px); }
.option-ransom { --swatch: linear-gradient(135deg, #fff3b8 0 30%, #fffef7 30% 62%, #e02b2b 62%); }
.option-blueprint { --swatch: linear-gradient(90deg, #143f88 0 48%, #e9fff8 48% 54%, #143f88 54%); }
.option-vhs { --swatch: linear-gradient(90deg, #4ed3c4 0 25%, #261447 25% 72%, #e02b2b 72%); }
.option-arcade { --swatch: repeating-linear-gradient(45deg, #ffde59 0 7px, #171717 7px 10px); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.primary-action,
.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  padding: 11px 16px;
  border: 3px solid var(--line);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--line);
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.primary-action {
  color: var(--paper);
  background: var(--red);
}

.secondary-action {
  color: var(--ink);
  background: var(--green);
}

.primary-action:hover,
.secondary-action:hover,
.primary-action:focus-visible,
.secondary-action:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 var(--line);
}

.primary-action[data-copied="true"],
.secondary-action[data-copied="true"] {
  background: var(--cyan);
}

.preview-stage {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.share-line {
  width: min(100%, 520px);
  min-height: 40px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 2px solid var(--line);
  background: rgba(255, 255, 255, 0.56);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.88rem;
  white-space: nowrap;
}

.share-line span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.poster {
  width: min(100%, 520px);
  height: min(58vh, 540px);
  min-height: 460px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 4px solid var(--line);
  background: var(--green);
  box-shadow: var(--shadow), 12px 12px 0 var(--line);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.poster::before,
.poster::after,
.poster-noise {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.poster::before {
  z-index: -1;
  background:
    linear-gradient(135deg, transparent 0 38%, rgba(255, 255, 255, 0.5) 38% 42%, transparent 42%),
    repeating-linear-gradient(0deg, rgba(23, 23, 23, 0.08) 0 1px, transparent 1px 11px);
}

.poster::after {
  border: 22px solid rgba(23, 23, 23, 0.06);
}

.poster-noise {
  mix-blend-mode: multiply;
  opacity: 0.18;
  background-image:
    radial-gradient(circle at 20% 30%, #171717 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, #171717 0 1px, transparent 1px);
  background-size: 18px 18px, 23px 23px;
}

.poster-stamp {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: var(--ink);
  border-radius: 50%;
  border: 4px solid var(--paper);
  font-size: 1.75rem;
  font-weight: 950;
  transform: rotate(12deg);
}

.poster-to,
.poster-main,
.poster-domain {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 32px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.poster-to {
  padding-top: 112px;
  font-size: 3.55rem;
  line-height: 0.94;
}

.poster-main {
  margin-top: 28px;
  font-size: 4.15rem;
  line-height: 0.9;
}

.poster-domain {
  margin-top: 18px;
  color: var(--red);
  font-size: 6.2rem;
  line-height: 0.82;
}

.poster-code {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.theme-noir.poster,
.poster.theme-noir,
.example-tile.theme-noir {
  color: #f6f1e5;
  border-color: #f1c84b;
  background:
    radial-gradient(circle at 20% 20%, rgba(241, 200, 75, 0.18) 0 7%, transparent 7% 100%),
    #181818;
}

.poster.theme-noir .poster-domain {
  color: #f1c84b;
}

.poster.theme-noir .poster-stamp {
  color: #181818;
  background: #f6f1e5;
  border-color: #f1c84b;
}

.poster.theme-noir::before {
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(241, 200, 75, 0.32) 42% 46%, transparent 46%),
    repeating-linear-gradient(0deg, rgba(246, 241, 229, 0.11) 0 1px, transparent 1px 13px);
}

.poster.theme-noir .poster-to,
.poster.theme-noir .poster-main {
  letter-spacing: 0;
  text-transform: uppercase;
}

.poster.theme-acid,
.example-tile.theme-acid {
  background:
    radial-gradient(circle at 80% 18%, #e02b2b 0 11%, transparent 11% 100%),
    linear-gradient(135deg, #4ed3c4 0 45%, #dfff4f 45% 64%, #ffde59 64% 100%);
  border-color: #172554;
}

.poster.theme-acid::before {
  background:
    repeating-linear-gradient(90deg, rgba(23, 37, 84, 0.2) 0 4px, transparent 4px 18px),
    repeating-linear-gradient(0deg, rgba(23, 37, 84, 0.12) 0 2px, transparent 2px 16px);
}

.poster.theme-acid .poster-domain {
  color: #172554;
  text-shadow: 6px 6px 0 #e02b2b;
}

.poster.theme-acid .poster-stamp {
  background: #e02b2b;
}

.poster.theme-office,
.example-tile.theme-office {
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(224, 43, 43, 0.8) 72% 73%, transparent 73%),
    repeating-linear-gradient(0deg, #fffef7 0 29px, rgba(29, 78, 216, 0.28) 29px 31px);
  border-color: #1d4ed8;
}

.poster.theme-office::before {
  background:
    linear-gradient(135deg, transparent 0 37%, rgba(29, 78, 216, 0.26) 37% 40%, transparent 40%),
    repeating-linear-gradient(90deg, rgba(29, 78, 216, 0.08) 0 1px, transparent 1px 36px);
}

.poster.theme-office .poster-domain {
  color: #1d4ed8;
}

.poster.theme-office .poster-stamp {
  background: #1d4ed8;
}

.poster.theme-ransom,
.example-tile.theme-ransom {
  border-color: #e02b2b;
  background:
    linear-gradient(115deg, rgba(23, 23, 23, 0.9) 0 21%, transparent 21% 100%),
    linear-gradient(9deg, rgba(224, 43, 43, 0.28) 0 18%, transparent 18% 100%),
    #fff3b8;
}

.poster.theme-ransom::before {
  background:
    linear-gradient(9deg, rgba(224, 43, 43, 0.18) 0 18%, transparent 18% 100%),
    repeating-linear-gradient(90deg, rgba(23, 23, 23, 0.08) 0 2px, transparent 2px 18px);
}

.poster.theme-ransom .poster-to,
.poster.theme-ransom .poster-main {
  display: inline-block;
  margin-left: 28px;
  padding: 6px 12px 8px;
  color: #171717;
  background: #fffef7;
  box-decoration-break: clone;
  transform: rotate(-2deg);
}

.poster.theme-ransom .poster-to {
  margin-top: 112px;
}

.poster.theme-ransom .poster-main {
  margin-top: 24px;
  background: #dfff4f;
  transform: rotate(1deg);
}

.poster.theme-ransom .poster-domain {
  color: #e02b2b;
  text-shadow: 5px 5px 0 #171717, -3px -3px 0 #fffef7;
  transform: rotate(-3deg);
}

.poster.theme-ransom .poster-stamp {
  color: #fff3b8;
  background: #e02b2b;
}

.poster.theme-blueprint,
.example-tile.theme-blueprint {
  color: #e9fff8;
  border-color: #e9fff8;
  background:
    radial-gradient(circle at 84% 78%, rgba(223, 255, 79, 0.22) 0 12%, transparent 12% 100%),
    #143f88;
}

.poster.theme-blueprint::before {
  background:
    linear-gradient(rgba(233, 255, 248, 0.16) 2px, transparent 2px),
    linear-gradient(90deg, rgba(233, 255, 248, 0.16) 2px, transparent 2px),
    linear-gradient(45deg, transparent 0 48%, rgba(233, 255, 248, 0.35) 48% 50%, transparent 50%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
}

.poster.theme-blueprint .poster-domain {
  color: #dfff4f;
}

.poster.theme-blueprint .poster-stamp {
  color: #143f88;
  background: #e9fff8;
  border-color: #dfff4f;
}

.poster.theme-blueprint .poster-code {
  color: #dfff4f;
}

.poster.theme-vhs,
.example-tile.theme-vhs {
  color: #f7f4ef;
  border-color: #4ed3c4;
  background:
    radial-gradient(circle at 72% 28%, rgba(224, 43, 43, 0.42) 0 12%, transparent 12% 100%),
    linear-gradient(135deg, #261447 0 58%, #101010 58% 100%);
}

.poster.theme-vhs::before {
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.1) 50%, transparent 50%),
    linear-gradient(135deg, transparent 0 40%, rgba(78, 211, 196, 0.35) 40% 43%, rgba(224, 43, 43, 0.35) 43% 46%, transparent 46%);
  background-size: 100% 8px, 100% 100%;
}

.poster.theme-vhs .poster-to,
.poster.theme-vhs .poster-main {
  text-shadow: -3px 0 #4ed3c4, 3px 0 #e02b2b;
  transform: skew(-4deg);
}

.poster.theme-vhs .poster-domain {
  color: #ffde59;
  text-shadow: -4px 0 #4ed3c4, 4px 0 #e02b2b;
}

.poster.theme-vhs .poster-stamp {
  color: #ffde59;
  background: #171717;
  border-color: #4ed3c4;
}

.poster.theme-arcade,
.example-tile.theme-arcade {
  color: #171717;
  border-color: #171717;
  background:
    radial-gradient(circle at 80% 20%, #4ed3c4 0 12%, transparent 12%),
    linear-gradient(90deg, rgba(23, 23, 23, 0.08) 50%, transparent 50%),
    #ffde59;
  background-size: 18px 18px;
}

.poster.theme-arcade::before {
  background:
    linear-gradient(135deg, transparent 0 38%, #4ed3c4 38% 42%, transparent 42%),
    linear-gradient(45deg, rgba(224, 43, 43, 0.24) 0 18%, transparent 18% 100%);
}

.poster.theme-arcade .poster-domain {
  color: #e02b2b;
  text-shadow: 6px 6px 0 #171717;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
}

.poster.theme-arcade .poster-stamp {
  color: #f2f0e8;
  background: #1d4ed8;
  border-color: #171717;
}

.index-band {
  padding: 24px 18px 42px;
  background: #171717;
}

.index-grid {
  width: 100%;
  max-width: 1530px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(8, minmax(128px, 1fr));
  gap: 12px;
}

.example-tile {
  min-height: 116px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--ink);
  background: var(--green);
  border: 3px solid #f2f0e8;
  text-decoration: none;
  font-weight: 950;
  overflow: hidden;
}

.example-tile span {
  overflow-wrap: anywhere;
}

.example-tile strong {
  color: var(--red);
  font-size: 2rem;
}

.person-frame {
  min-height: 100vh;
  position: relative;
  padding-bottom: 44px;
  isolation: isolate;
  overflow: hidden;
}

.person-frame::before,
.person-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.person-frame::before {
  left: -92px;
  bottom: 70px;
  width: 340px;
  height: 420px;
  background:
    linear-gradient(135deg, transparent 0 43%, rgba(224, 43, 43, 0.82) 43% 53%, transparent 53%),
    linear-gradient(45deg, transparent 0 42%, rgba(78, 211, 196, 0.66) 42% 52%, transparent 52%);
  transform: rotate(-8deg);
}

.person-frame::after {
  right: -80px;
  top: 150px;
  width: 300px;
  height: 360px;
  background:
    linear-gradient(45deg, transparent 0 42%, rgba(255, 222, 89, 0.86) 42% 52%, transparent 52%),
    linear-gradient(135deg, transparent 0 45%, rgba(29, 78, 216, 0.72) 45% 55%, transparent 55%);
  transform: rotate(11deg);
}

.person-layout {
  width: 100%;
  max-width: 1380px;
  margin: 12px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(min(100%, 560px), 760px) minmax(min(100%, 340px), 1fr);
  align-items: center;
  gap: 64px;
  overflow: hidden;
}

.person-poster-wrap {
  display: grid;
  justify-items: center;
}

.person-poster-wrap .poster {
  width: min(100%, 760px);
  max-width: calc(100vw - 48px);
  height: min(78vh, 720px);
  min-height: 620px;
  box-shadow: 0 30px 90px rgba(16, 16, 16, 0.24), 16px 16px 0 var(--line);
}

.person-poster-wrap .poster-stamp {
  width: 128px;
  height: 128px;
  font-size: 2.2rem;
}

.person-poster-wrap .poster-to {
  padding-top: 142px;
  font-size: 4.8rem;
}

.person-poster-wrap .poster-main {
  margin-top: 42px;
  font-size: 5.6rem;
}

.person-poster-wrap .poster-domain {
  margin-top: 28px;
  font-size: 8rem;
}

.response-panel {
  position: relative;
  padding: 28px 0;
}

.response-panel::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 0;
  width: 8px;
  height: 100%;
  background: var(--red);
  box-shadow: 12px 0 0 var(--green);
}

.response-panel h1 {
  font-size: 4.6rem;
  max-width: 620px;
}

.response-copy {
  max-width: 560px;
  margin: 22px 0 28px;
  font-size: 1.25rem;
  line-height: 1.45;
  font-weight: 700;
}

@media (max-width: 980px) {
  .generator-layout,
  .person-layout {
    grid-template-columns: 1fr;
  }

  .person-frame::before,
  .person-frame::after {
    display: none;
  }

  .person-layout {
    max-width: 760px;
    margin-top: 26px;
    gap: 30px;
    overflow: visible;
  }

  .generator-panel {
    max-width: none;
  }

  .preview-stage,
  .person-poster-wrap {
    justify-items: start;
  }

  .style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .index-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .person-poster-wrap .poster {
    width: min(100%, 680px);
    height: auto;
    min-height: 560px;
  }

  .person-poster-wrap .poster-stamp {
    width: 104px;
    height: 104px;
    font-size: 1.8rem;
  }

  .person-poster-wrap .poster-to {
    padding-top: 118px;
    font-size: 3.7rem;
  }

  .person-poster-wrap .poster-main {
    margin-top: 30px;
    font-size: 4.4rem;
  }

  .person-poster-wrap .poster-domain {
    margin-top: 22px;
    font-size: 6.4rem;
  }

  .response-panel {
    padding: 0 0 20px 18px;
  }

  .response-panel h1 {
    font-size: 3.4rem;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 680px) {
  .hero-band {
    min-height: auto;
    padding: 16px;
  }

  .brand-rail,
  .brand-rail.compact {
    padding: 0;
    align-items: flex-start;
  }

  .brand span:last-child {
    display: none;
  }

  .mini-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .mini-nav a[href="/sitemap.xml"] {
    display: none;
  }

  .generator-layout {
    padding-top: 36px;
    gap: 30px;
  }

  .generator-layout > *,
  .generator-panel,
  .preview-stage,
  .field,
  .style-grid,
  .actions {
    min-width: 0;
  }

  h1,
  .response-panel h1 {
    font-size: 2.9rem;
    line-height: 0.95;
    overflow-wrap: anywhere;
  }

  .style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .primary-action,
  .secondary-action {
    width: 100%;
  }

  .poster {
    width: calc(100% - 8px);
    height: auto;
    min-height: 510px;
    box-shadow: var(--shadow), 8px 8px 0 var(--line);
  }

  .person-poster-wrap .poster {
    min-height: 500px;
  }

  .poster-stamp {
    width: 86px;
    height: 86px;
    font-size: 1.45rem;
  }

  .poster-to {
    padding: 112px 22px 0;
    font-size: 3rem;
  }

  .poster-main {
    padding: 0 22px;
    font-size: 3.5rem;
  }

  .poster-domain {
    padding: 0 22px;
    font-size: 5rem;
  }

  .poster-code {
    left: 22px;
    right: 22px;
    bottom: 22px;
    display: grid;
  }

  .person-poster-wrap .poster-stamp {
    width: 86px;
    height: 86px;
    font-size: 1.45rem;
  }

  .person-poster-wrap .poster-to {
    padding-top: 112px;
    font-size: 3rem;
  }

  .person-poster-wrap .poster-main {
    margin-top: 28px;
    font-size: 3.5rem;
  }

  .person-poster-wrap .poster-domain {
    margin-top: 18px;
    font-size: 5rem;
  }

  .index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .person-layout {
    margin-top: 24px;
    padding: 0 16px;
    gap: 32px;
    max-width: 100vw;
  }

  .response-panel {
    padding-left: 14px;
    min-width: 0;
  }

  .response-panel::before {
    left: 0;
    width: 5px;
    box-shadow: 8px 0 0 var(--green);
  }

  .response-copy {
    font-size: 1.05rem;
  }
}

@media (max-width: 420px) {
  .app-frame::before,
  .hero-band::after {
    display: none;
  }

  .hero-band {
    overflow-x: hidden;
  }

  .brand-rail,
  .generator-layout {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }

  .person-frame .brand-rail {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    margin: 16px;
  }

  .brand-mark {
    width: 40px;
    height: 32px;
  }

  .mini-nav a,
  .quiet-link {
    padding: 8px 9px;
  }

  h1,
  .response-panel h1 {
    font-size: 2.55rem;
  }

  .response-panel h1 {
    max-width: calc(100vw - 46px);
    overflow-wrap: anywhere;
  }

  .field input,
  .primary-action,
  .secondary-action {
    width: calc(100% - 8px);
  }

  .field input {
    box-shadow: 5px 5px 0 var(--line);
  }

  .index-grid {
    grid-template-columns: 1fr;
  }

  .poster-to {
    font-size: 2.45rem;
  }

  .poster-main {
    font-size: 3rem;
  }

  .poster-domain {
    font-size: 4.35rem;
  }

  .person-poster-wrap .poster {
    width: calc(100vw - 40px);
    min-height: 460px;
  }

  .person-poster-wrap .poster-to {
    font-size: 2.45rem;
  }

  .person-poster-wrap .poster-main {
    font-size: 3rem;
  }

  .person-poster-wrap .poster-domain {
    font-size: 4.35rem;
  }
}