:root {
  --red: #ee293d;
  --navy: #1729e9;
  --blue: #40c2ff;
  --orange: #f36e3e;
  --pink: #ff96ca;
  --light-pink: #fab8ff;
  --yellow: #fee74b;
  --green: #8fdf7a;
  --off-white: #fff0ed;
  --black: #000000;
  --shell: min(1800px, calc(100vw - 2.2rem));
  --display-font: "ringold-sans", "Arial Black", "Helvetica Neue", sans-serif;
  --body-font: "national-park", "Avenir Next", "Segoe UI", sans-serif;
  --shadow-hard: 8px 8px 0 var(--black);
  --shadow-hard-sm: 5px 5px 0 var(--black);
  --transition-fast: 140ms ease;
  --transition-med: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --focus-left-x: 26%;
  --focus-right-x: 74%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  color: var(--black);
  font-family: var(--body-font);
  line-height: 1.24;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header,
.page-shell,
.site-footer {
  height:100%
}

.site-header {
  background: var(--pink);
}

.site-header-shell,
.page-shell,
.site-footer {
  width: var(--shell);
  margin: 0 auto;
}
.site-footer{
  margin-bottom:20px;
}

.site-header-shell {
  display: grid;
  gap: 1.4rem;
  padding: 0.7rem 0 0.75rem;
  align-items: center;
}

.brand-block {
  display: block;
}

.header-meta {
  display: grid;
  gap: 0.8rem;
  align-items: start;
}

.brand-mark {
  display: inline-block;
  width: min(470px, 27vw);
}

.brand-mark img {
  width: 100%;
  height: auto;
}

.site-intro {
  margin: 0;
  max-width: 36ch;
  color: var(--off-white);
  font-size: clamp(0.92rem, 1vw, 1.2rem);
  line-height: 1.1;
}

.top-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.85rem 1.7rem;
  align-items: center;
}

.mobile-menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 3rem;
  height: 3rem;
  align-content: center;
  justify-items: center;
  gap: 0.4rem;
}

.mobile-menu-bar {
  display: block;
  width: 2.15rem;
  height: 0.26rem;
  background: var(--off-white);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--red);
  font-family: var(--body-font);
  font-weight: 700;
  text-align: left;
  transition: transform var(--transition-fast), opacity var(--transition-fast), color var(--transition-fast);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
  color: var(--off-white);
}

.nav-link:hover,
.nav-link:focus-visible {
  transform: translate(3px, 3px);
}

.nav-link:focus-visible,
.action-button:focus-visible,
.card-arrow:focus-visible,
.stamp-button:focus-visible,
.tone-card:focus-visible,
.story-card:focus-visible,
.focus-nav:focus-visible,
.dialog-close-button:focus-visible,
.hint-button:focus-visible,
.closeness-option:focus-within,
.check-option:focus-within,
.tone-option:focus-within,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 0px solid var(--navy);
  outline-offset: 4px;
}

.nav-link-icon {
  position: relative;
  width: 3.45rem;
  height: 2.45rem;
  flex: 0 0 auto;
  margin-right: -0.08rem;
}

.nav-link-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--transition-fast);
}

.nav-link-icon-open {
  opacity: 0;
}

.nav-link:hover .nav-link-icon-closed,
.nav-link:focus-visible .nav-link-icon-closed,
.nav-link.is-active .nav-link-icon-closed {
  opacity: 0;
}

.nav-link:hover .nav-link-icon-open,
.nav-link:focus-visible .nav-link-icon-open,
.nav-link.is-active .nav-link-icon-open {
  opacity: 1;
}

.nav-link-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.42rem 0.5rem 0.5rem;
  font-size: clamp(1.12rem, 1.02vw, 1.55rem);
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.nav-link:hover .nav-link-text,
.nav-link:focus-visible .nav-link-text,
.nav-link.is-active .nav-link-text {
  background: var(--red);
  color: var(--off-white);
  transform: translateY(2px);
}

body[data-view="home"] .site-header-shell {
  grid-template-columns: minmax(360px, 620px) minmax(620px, 1fr);
}

body[data-view="home"] .brand-block {
  display: block;
}

body[data-view="home"] .header-meta {
  justify-items: end;
  align-content: center;
  gap: 1rem;
}

body[data-view="home"] .site-intro {
  justify-self: end;
  width: min(100%, 52rem);
  max-width: 52ch;
  font-size: clamp(1rem, 1.1vw, 1.45rem);
  line-height: 1.08;
  text-align: right;
}

body[data-view="home"] .top-nav {
  padding-top: 0;
  justify-content: flex-end;
  gap: 0.95rem 1.75rem;
  width: fit-content;
  justify-self: end;
}

body[data-view="home"] .brand-mark {
  width: min(600px, 31vw);
}

body[data-view="home"] .nav-link-icon {
  width: 3.7rem;
  height: 2.65rem;
}

body[data-view="home"] .nav-link-text {
  font-size: clamp(1.18rem, 1.12vw, 1.7rem);
}

body:not([data-view="home"]) .site-header-shell {
  grid-template-columns: minmax(220px, 320px) minmax(480px, 1fr);
  align-items: center;
  padding-block: 0.35rem;
  gap: 0.8rem;
}

body:not([data-view="home"]) .brand-block {
  display: block;
}

body:not([data-view="home"]) .header-meta {
  display: grid;
  justify-items: end;
}

body:not([data-view="home"]) .brand-mark {
  width: min(280px, 22vw);
}

body:not([data-view="home"]) .site-intro {
  display: none;
}

body:not([data-view="home"]) .top-nav {
  justify-content: flex-end;
  gap: 0.85rem 1.5rem;
}

body:not([data-view="home"]) .nav-link-icon {
  width: 3.1rem;
  height: 2.2rem;
}

body:not([data-view="home"]) .nav-link-text {
  font-size: clamp(1rem, 0.92vw, 1.35rem);
}

.page-shell {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  padding: 1.1rem 0 1.6rem;
  overflow: visible;
}

.view-panel {
  display: grid;
  gap: 1rem;
  animation: view-in 180ms ease;
}

.view-panel[data-view="home"] {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.view-panel[data-view="home"] > :not(.mail-rain) {
  position: relative;
  z-index: 1;
}

.mail-rain {
  position: absolute;
  inset: -22rem 0 -10rem;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.mail-rain-item {
  position: absolute;
  top: 0;
  width: 12rem;
  height: 8.6rem;
  opacity: 0.52;
  --mail-rot: 0deg;
  --mail-scale: 1;
  background: center / contain no-repeat url("./assets/icon-envelope-closed.svg");
  filter: saturate(1.2);
  animation: mail-rain-fall linear infinite;
}

.mail-rain-item:nth-child(1) {
  left: 4%;
  animation-duration: 18s;
  animation-delay: -3s;
  --mail-scale: 0.9;
  --mail-rot: -8deg;
}

.mail-rain-item:nth-child(2) {
  left: 12%;
  animation-duration: 23s;
  animation-delay: -12s;
  --mail-scale: 1.15;
  --mail-rot: 7deg;
}

.mail-rain-item:nth-child(3) {
  left: 20%;
  animation-duration: 20s;
  animation-delay: -6s;
  --mail-scale: 0.8;
  --mail-rot: -10deg;
}

.mail-rain-item:nth-child(4) {
  left: 29%;
  animation-duration: 26s;
  animation-delay: -16s;
  --mail-scale: 1.05;
  --mail-rot: 12deg;
}

.mail-rain-item:nth-child(5) {
  left: 39%;
  animation-duration: 19s;
  animation-delay: -8s;
  --mail-scale: 0.95;
  --mail-rot: -6deg;
}

.mail-rain-item:nth-child(6) {
  left: 48%;
  animation-duration: 24s;
  animation-delay: -14s;
  --mail-scale: 1.2;
  --mail-rot: 9deg;
}

.mail-rain-item:nth-child(7) {
  left: 57%;
  animation-duration: 21s;
  animation-delay: -5s;
  --mail-scale: 0.85;
  --mail-rot: -12deg;
}

.mail-rain-item:nth-child(8) {
  left: 65%;
  animation-duration: 27s;
  animation-delay: -18s;
  --mail-scale: 1.1;
  --mail-rot: 5deg;
}

.mail-rain-item:nth-child(9) {
  left: 73%;
  animation-duration: 17s;
  animation-delay: -9s;
  --mail-scale: 0.78;
  --mail-rot: -7deg;
}

.mail-rain-item:nth-child(10) {
  left: 81%;
  animation-duration: 25s;
  animation-delay: -13s;
  --mail-scale: 1.18;
  --mail-rot: 11deg;
}

.mail-rain-item:nth-child(11) {
  left: 89%;
  animation-duration: 22s;
  animation-delay: -2s;
  --mail-scale: 0.88;
  --mail-rot: -9deg;
}

.mail-rain-item:nth-child(12) {
  left: 95%;
  animation-duration: 28s;
  animation-delay: -20s;
  --mail-scale: 1.05;
  --mail-rot: 8deg;
}

.mail-rain-item:nth-child(13) {
  left: 8%;
  animation-duration: 30s;
  animation-delay: -11s;
  --mail-scale: 1.28;
  --mail-rot: -5deg;
  opacity: 0.62;
}

.mail-rain-item:nth-child(14) {
  left: 17%;
  animation-duration: 16s;
  animation-delay: -7s;
  --mail-scale: 0.92;
  --mail-rot: 10deg;
  opacity: 0.42;
}

.mail-rain-item:nth-child(15) {
  left: 33%;
  animation-duration: 29s;
  animation-delay: -19s;
  --mail-scale: 1.22;
  --mail-rot: -11deg;
  opacity: 0.56;
}

.mail-rain-item:nth-child(16) {
  left: 52%;
  animation-duration: 18s;
  animation-delay: -4s;
  --mail-scale: 0.88;
  --mail-rot: 6deg;
  opacity: 0.4;
}

.mail-rain-item:nth-child(17) {
  left: 69%;
  animation-duration: 31s;
  animation-delay: -23s;
  --mail-scale: 1.25;
  --mail-rot: -8deg;
  opacity: 0.58;
}

.mail-rain-item:nth-child(18) {
  left: 86%;
  animation-duration: 15s;
  animation-delay: -10s;
  --mail-scale: 0.84;
  --mail-rot: 12deg;
  opacity: 0.46;
}

.page-title,
.choice-card h3,
.receive-step-copy h3,
.review-postcard h4,
.confirmation-card h3,
.form-section-heading h3,
.empty-state h4,
.story-dialog h2 {
  margin: 0;
  font-family: var(--display-font);
  font-weight: 900;
  text-transform: uppercase;
}

.page-title {
  color: var(--red);
  letter-spacing: 0.01em;
  line-height: 0.98;
  width: 100%;
  max-width: none;
}

.page-title:focus {
  outline: none;
}

.home-title {
  max-width: 30ch;
  font-size: clamp(2.85rem, 4.6vw, 6.1rem);
}

.page-lead,
.results-meta,
.selection-note,
.submit-intro,
.form-section-heading p,
.hint-row p,
.empty-state p,
.confirmation-card p,
.site-footer p,
.site-intro {
  font-size: clamp(0.98rem, 1.05vw, 1.35rem);
}

.page-lead {
  max-width: 100%;
  margin: 0.3rem 0 0;
  line-height: 1.14;
}

.home-copy {
  display: grid;
  gap: 0.25rem;
  max-width: min(1280px, 88vw);
  width: min(1280px, 88vw);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.choice-card,
.paper-panel,
.receive-step,
.story-card,
.admin-card,
.confirmation-card,
.story-dialog .letter-sheet {
  position: relative;
  border: 0;
  box-shadow: none;
}

.choice-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  min-height: 300px;
  padding: 1.05rem 1rem 0.95rem;
  background: var(--pink);
  border: 0;
  box-shadow: none;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.choice-card:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

.choice-card-art {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  grid-column: 1 / -1;
}

.choice-number {
  font-family: var(--display-font);
  font-size: clamp(4rem, 4.4vw, 5.4rem);
  line-height: 0.85;
  color: var(--off-white);
}

.choice-icon {
  width: min(190px, 34%);
  height: auto;
  object-fit: contain;
}

.choice-icon-stack {
  position: relative;
  display: inline-block;
  width: min(190px, 34%);
  flex: 0 0 auto;
}

.choice-icon-stack .choice-icon {
  width: 100%;
  transition: opacity var(--transition-fast);
}

.choice-icon-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.choice-card:hover .choice-icon-default,
.choice-card:focus-within .choice-icon-default {
  opacity: 0;
}

.choice-card:hover .choice-icon-hover,
.choice-card:focus-within .choice-icon-hover {
  opacity: 1;
}

.choice-card-body {
  display: grid;
  gap: 0.75rem;
  align-content: center;
  grid-column: 1;
  grid-row: 2;
  padding-right: 1rem;
  width: fit-content;
  max-width: 100%;
}

.choice-card h3 {
  font-size: clamp(2.2rem, 2.15vw, 3.1rem);
  color: var(--red);
  line-height: 0.9;
}

.choice-card p {
  margin: 0;
  color: var(--off-white);
  font-size: clamp(1.05rem, 1.02vw, 1.35rem);
  line-height: 1.06;
  max-width: 100%;
}

.card-arrow {
  position: relative;
  justify-self: center;
  align-self: center;
  grid-column: 2;
  grid-row: 2;
  width: 5rem;
  height: 5rem;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: transparent;
  box-shadow: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.card-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 28%;
  width: 1.9rem;
  height: 0.52rem;
  background: var(--off-white);
  transform: translateY(-50%);
}

.card-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 28%;
  width: 1rem;
  height: 1rem;
  border-top: 0.52rem solid var(--off-white);
  border-right: 0.52rem solid var(--off-white);
  transform: translateY(-50%) rotate(45deg);
}

.card-arrow:hover,
.card-arrow:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: none;
}

.receive-shell,
.submit-view,
.gallery-view,
.admin-view {
  display: grid;
  gap: 0.95rem;
}

.receive-shell {
  position: relative;
  min-height: calc(100vh - 7.8rem);
  grid-template-rows: auto auto 1fr;
  overflow: visible;
}

.receive-title,
.gallery-title {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: clamp(2rem, 3vw, 4.1rem);
}
.gallery-desc{
  text-align: center;
}
.stepper {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.stepper-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 66px;
  padding: 0.65rem 0.7rem 0.6rem 0.65rem;
  background: rgba(247, 111, 188, 0.32);
  color: rgba(255, 240, 237, 0.85);
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.stepper-item span {
  font-family: var(--display-font);
  font-size: clamp(1.7rem, 1.9vw, 2.45rem);
  line-height: 0.8;
}

.stepper-item strong {
  font-family: var(--body-font);
  font-size: clamp(0.84rem, 0.9vw, 1.05rem);
  line-height: 0.98;
}

.stepper-item.is-current {
  background: var(--red);
  color: var(--off-white);
}

.stepper-item.is-complete {
  background: rgba(247, 111, 188, 0.52);
  color: rgba(255, 240, 237, 0.95);
}

.receive-step,
.paper-panel {
  padding: 0.95rem;
  background: var(--off-white);
}

.receive-step {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.75rem;
  min-height: 58vh;
}

.receive-step-stage {
  border: 0;
  box-shadow: none;
}

.receive-step-copy {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  text-align: center;
  width: 100%;
}

.receive-step-copy h3 {
  font-size: clamp(1.35rem, 1.6vw, 2rem);
  line-height: 0.95;
  text-transform: none;
  font-family: var(--body-font);
  font-weight: 800;
}

.receive-step-copy p {
  margin: 0;
  max-width: 48ch;
}

.receive-step-copy-center {
  justify-items: center;
}

.receive-step[data-receive-step="1"] {
  overflow: visible;
}

.receive-step[data-receive-step="1"] .receive-step-copy,
.receive-step[data-receive-step="1"] .step-actions,
.receive-step[data-receive-step="1"] .focus-stage {
  position: relative;
  z-index: 1;
}

.focus-stage {
  position: static;
  display: grid;
  grid-template-columns: 82px minmax(520px, 620px) 82px;
  justify-content: center;
  align-items: center;
  gap: 0.15rem;
  min-height: 460px;
  padding: 0.5rem 0 0;
  overflow: visible;
}

.focus-orb {
  position: absolute;
  top: 54%;
  width: min(46vw, 760px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  opacity: 0.22;
  transform: translate(-50%, -50%);
}

.focus-orb-left {
  left: var(--focus-left-x);
  background: var(--light-pink);
}

.focus-orb-right {
  left: var(--focus-right-x);
  background: var(--blue);
}

.focus-nav {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: fit-content;
  gap: 0.25rem;
  align-content: center;
  border: 0;
  background: transparent;
  color: var(--black);
  font-family: var(--body-font);
  font-weight: 800;
  font-size: clamp(0.88rem, 0.85vw, 1.05rem);
}

.focus-nav[disabled] {
  opacity: 0.4;
  cursor: default;
}

.focus-nav-left {
  justify-self: end;
}

.focus-nav-right {
  justify-self: start;
}

.focus-arrow {
  width: 0;
  height: 0;
  border-top: 38px solid transparent;
  border-bottom: 38px solid transparent;
}

.focus-arrow-left {
  border-right: 66px solid #2a30e8;
}

.focus-arrow-right {
  border-left: 66px solid #ea63b7;
}

.family-stage-display {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.55rem;
  width: min(620px, 100%);
  justify-items: center;
}

.family-stage-frame {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1.72 / 1;
  background: transparent;
  overflow: hidden;
}

.family-stage-fallback {
  display: none;
}

.family-photo-frames {
  position: absolute;
  inset: 0;
}

.family-photo-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-med);
}

.family-photo-layer.is-active {
  opacity: 1;
}

.family-photo-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.closeness-readout {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  text-align: center;
}

.closeness-readout h4 {
  margin: 0;
  font-family: var(--body-font);
  font-size: clamp(1.55rem, 1.7vw, 2.15rem);
  font-weight: 900;
}

.closeness-readout p {
  margin: 0;
  max-width: 32ch;
  font-size: clamp(0.86rem, 0.9vw, 1rem);
}

.step-actions,
.empty-actions,
.form-actions,
.hint-row,
.letter-meta,
.story-card-top-tags,
.focus-tag-row,
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.step-actions-wide {
  justify-content: center;
}

.step-actions-end {
  justify-content: center;
}

.receive-results-actions {
  justify-content: center;
}

.receive-step-stage .action-button {
  border: 0;
  box-shadow: none;
}

.receive-step-stage .action-button:hover,
.receive-step-stage .action-button:focus-visible {
  box-shadow: none;
}

.action-button,
.dialog-close-button,
.footer-link,
.hint-button {
  border: 0;
  background: var(--red);
  color: var(--off-white);
  box-shadow: none;
  padding: 0.8rem 1.3rem;
  font-family: var(--body-font);
  font-weight: 800;
  font-size: clamp(1rem, 1vw, 1.3rem);
  line-height: 0.95;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.action-button:hover,
.action-button:focus-visible,
.dialog-close-button:hover,
.dialog-close-button:focus-visible,
.footer-link:hover,
.footer-link:focus-visible,
.hint-button:hover,
.hint-button:focus-visible,
.stamp-button:hover,
.stamp-button:focus-visible,
.tone-card:hover,
.tone-card:focus-visible,
.story-card:hover,
.story-card:focus-visible,
.admin-action:hover,
.admin-action:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: none;
}

.action-button:disabled {
  opacity: 0.32;
  transform: none;
  cursor: not-allowed;
}

.action-button-secondary,
.footer-link {
  background: #f7b4de;
  color: var(--off-white);
}

.footer-link {
  border: 0;
  box-shadow: none;
  padding: 0.45rem 0.8rem;
  font-size: clamp(0.82rem, 0.8vw, 1rem);
  line-height: 0.9;
}

.footer-link:hover,
.footer-link:focus-visible {
  box-shadow: none;
}

.submit-button {
  min-width: 295px;
  justify-content: center;
}

.stamp-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.stamp-button {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--black);
  text-align: center;
  opacity: 0.42;
  transition: transform var(--transition-fast), opacity var(--transition-fast), filter var(--transition-fast);
}

.stamp-art {
  position: relative;
  min-height: 326px;
  display: grid;
  place-items: center;
}

.stamp-art img {
  width: 100%;
  max-width: 220px;
  height: auto;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.stamp-copy {
  display: grid;
  gap: 0.2rem;
  margin-top: -0.35rem;
}

.stamp-copy strong {
  font-family: var(--body-font);
  font-weight: 900;
  font-size: clamp(1.6rem, 1.7vw, 2.8rem);
}

.stamp-copy span {
  font-size: clamp(1rem, 1.2vw, 1.6rem);
  line-height: 1.08;
}

.stamp-button.is-selected {
  transform: translateY(-8px);
  opacity: 1;
  filter: none;
}

.stamp-button.is-selected .stamp-art {
  filter: drop-shadow(8px 8px 0 var(--black));
}

.stamp-button.is-selected .stamp-art img {
  transform: scale(1.06);
  filter: none;
}

.stamp-button:hover,
.stamp-button:focus-visible {
  opacity: 1;
  transform: none;
  box-shadow: none;
}

.stamp-button.is-selected:hover,
.stamp-button.is-selected:focus-visible {
  transform: translateY(-8px);
}

.tone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.tone-card {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 390px;
  padding: 1.25rem;
  border: 0;
  box-shadow: none;
  text-align: center;
  background: var(--yellow);
  opacity: 0.44;
  transition: transform var(--transition-fast), opacity var(--transition-fast), filter var(--transition-fast);
}

.tone-card strong {
  display: block;
  margin-top: 0;
  padding: 0.7rem 1rem 0.55rem;
  font-family: var(--display-font);
  font-size: clamp(2.5rem, 3vw, 4.1rem);
  line-height: 0.9;
  background: var(--navy);
}

.tone-card span {
  display: block;
  margin-top: 0.95rem;
  padding: 0.6rem 0.9rem 0.45rem;
  font-size: clamp(1.15rem, 1.3vw, 1.85rem);
}

.tone-card[data-tone="positive"] {
  background-color: var(--yellow);
  color: var(--navy);
  background-image: radial-gradient(var(--navy) 1.8px, transparent 1.8px);
  background-size: 48px 48px;
}

.tone-card[data-tone="positive"] strong {
  color: var(--yellow);
}

.tone-card[data-tone="positive"] span {
  background: var(--navy);
  color: var(--yellow);
}

.tone-card[data-tone="neutral"] {
  background-color: var(--light-pink);
  color: var(--navy);
  background-image: linear-gradient(180deg, transparent 0, transparent 36px, var(--navy) 36px, var(--navy) 39px, transparent 39px, transparent 75px);
  background-size: 100% 76px;
}

.tone-card[data-tone="neutral"] strong {
  color: var(--light-pink);
}

.tone-card[data-tone="neutral"] span {
  background: var(--navy);
  color: var(--light-pink);
}

.tone-card[data-tone="negative"] {
  background-color: #2432ec;
  color: var(--yellow);
  background-image: repeating-linear-gradient(135deg, transparent 0 18px, var(--yellow) 18px 21px);
}

.tone-card[data-tone="negative"] strong {
  background: var(--yellow);
  color: var(--navy);
}

.tone-card[data-tone="negative"] span {
  background: var(--yellow);
  color: var(--navy);
}

.tone-card.is-selected {
  transform: translateY(-6px);
  opacity: 1;
  filter: drop-shadow(9px 9px 0 var(--black));
}

.tone-card:hover,
.tone-card:focus-visible {
  opacity: 1;
  transform: none;
  box-shadow: none;
}

.tone-card.is-selected:hover,
.tone-card.is-selected:focus-visible {
  transform: translateY(-6px);
}

.review-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(760px, 940px) minmax(0, 1fr);
  align-items: center;
  min-height: 360px;
  margin-top: 0.25rem;
}

.review-photo-card {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  margin-top: 0.3rem;
  margin-left: 14rem;
  width: min(38vw, 430px);
  aspect-ratio: 1.72 / 1;
  transform: rotate(2deg);
  background: transparent;
  z-index: 0;
}

.review-photo-card-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.review-photo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-postcard {
  position: relative;
  grid-column: 2;
  justify-self: center;
  width: min(42vw, 520px);
  min-height: 300px;
  margin-right: 12rem;
  margin-top: -20%;
  padding: 1.2rem 8rem 1.2rem 1.35rem;
  background: var(--light-pink);
  z-index: 1;
}

.review-postcard[data-tone="positive"] {
  background-color: var(--yellow);
  color: var(--navy);
  background-image: radial-gradient(var(--navy) 1.8px, transparent 1.8px);
  background-size: 48px 48px;
}

.review-postcard[data-tone="neutral"] {
  background-color: var(--light-pink);
  color: var(--navy);
  background-image: linear-gradient(180deg, transparent 0, transparent 36px, var(--navy) 36px, var(--navy) 39px, transparent 39px, transparent 75px);
  background-size: 100% 76px;
}

.review-postcard[data-tone="negative"] {
  background-color: var(--navy);
  color: var(--yellow);
  background-image: repeating-linear-gradient(135deg, transparent 0 18px, var(--yellow) 18px 21px);
}

.review-stamp {
  position: absolute;
  right: 1.2rem;
  top: 1rem;
  width: min(128px, 24%);
}

.review-postcard h4 {
  margin-top: 0.55rem;
  display: inline-block;
  padding: 0.35rem 0.65rem 0.2rem;
  color: var(--black);
  font-size: clamp(2.2rem, 2.5vw, 3.8rem);
  line-height: 0.86;
  max-width: 30ch;
  background: rgba(255, 240, 237, 0.82);
}

.review-postcard[data-tone="negative"] h4,
.review-postcard[data-tone="negative"] .review-summary-block strong,
.review-postcard[data-tone="negative"] .review-summary-block p {
  color: var(--yellow);
}

.review-summary {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.review-summary-block {
  display: grid;
  gap: 0.25rem;
  padding: 0.45rem 0.7rem 0.5rem;
  background: rgba(255, 240, 237, 0.82);
}

.review-summary-block strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: clamp(1.3rem, 1.45vw, 2rem);
}

.review-summary-block p {
  margin: 0;
  font-size: clamp(1.05rem, 1.1vw, 1.45rem);
  line-height: 1.08;
}

.review-postcard[data-tone="positive"] h4,
.review-postcard[data-tone="positive"] .review-summary-block {
  background: var(--yellow);
}

.review-postcard[data-tone="neutral"] h4,
.review-postcard[data-tone="neutral"] .review-summary-block {
  background: var(--light-pink);
}

.review-postcard[data-tone="negative"] h4,
.review-postcard[data-tone="negative"] .review-summary-block {
  background: var(--navy);
}

.send-status {
  margin: 0;
  text-align: right;
  font-weight: 700;
}

.sending-stage {
  display: none;
  place-items: center;
  min-height: 230px;
  overflow: hidden;
}

.sending-stage.is-sending {
  display: grid;
}

.mailbox {
  position: relative;
  width: 190px;
  height: 160px;
  background: var(--navy);
  border: 3px solid var(--black);
  box-shadow: var(--shadow-hard-sm);
}

.mailbox::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -120px;
  width: 26px;
  height: 120px;
  transform: translateX(-50%);
  background: var(--black);
}

.mailbox-flag {
  position: absolute;
  right: -22px;
  top: 20px;
  width: 20px;
  height: 64px;
  background: var(--black);
}

.mailbox-flag::after {
  content: "";
  position: absolute;
  right: 4px;
  top: -4px;
  width: 58px;
  height: 22px;
  background: var(--red);
}

.mailbox-slot {
  position: absolute;
  left: 50%;
  top: 52px;
  width: 120px;
  height: 14px;
  transform: translateX(-50%);
  background: var(--black);
}

.postcard-flight {
  position: absolute;
  width: 190px;
  height: 120px;
  transform: translateY(-22px);
}

.flight-card {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, transparent 0 26px, var(--navy) 26px 28px, transparent 28px 54px, var(--navy) 54px 56px, transparent 56px 82px, var(--navy) 82px 84px, transparent 84px 100%),
    var(--light-pink);
  border: 3px solid var(--black);
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--display-font);
  font-size: 2rem;
  color: var(--black);
}

.sending-stage.is-sending .postcard-flight {
  animation: postcard-send 1.2s ease forwards;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
}

.story-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  min-height: 340px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #f7d6f4;
  box-shadow: none;
  text-align: left;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.story-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center top / contain no-repeat url("./assets/GalleryItem_Background.png");
  opacity: 0.5;
}

.story-card > * {
  position: relative;
  z-index: 1;
}

.story-card:hover,
.story-card:focus-visible {
  transform: translateY(-4px);
}

.match-pill,
.story-tag,
.tone-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.35rem 0.75rem 0.2rem;
  border: 0;
  font-family: var(--body-font);
  font-size: clamp(0.95rem, 1.05vw, 1.4rem);
  font-weight: 800;
  line-height: 0.94;
}

.match-pill {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--red);
  color: var(--off-white);
}

.story-card-body {
  display: grid;
  align-content: center;
  min-height: 0;
  padding: 5.15rem 1.4rem 1rem;
}

.story-card-no-match .story-card-body {
  padding-top: 2.65rem;
}

.story-card-preview {
  margin: 0;
  font-size: clamp(1.2rem, 1.2vw, 1.75rem);
  line-height: 1.08;
  width: 100%;
}

.story-card-footer {
  position: relative;
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem 1rem 1rem;
  background: transparent;
}

.story-card-top-tags {
  gap: 0.4rem;
}

.story-tag-closeness {
  background: var(--black);
  color: var(--off-white);
}

.tone-badge {
  position: relative;
  overflow: hidden;
}

.tone-badge[data-tone="positive"] {
  background: var(--yellow);
  color: var(--black);
  background-image: radial-gradient(var(--navy) 1.6px, transparent 1.6px);
  background-size: 18px 18px;
}

.tone-badge[data-tone="neutral"] {
  background: var(--light-pink);
  color: var(--off-white);
  background-image: linear-gradient(180deg, transparent 0 10px, var(--navy) 10px 12px);
  background-size: 100% 15px;
}

.tone-badge[data-tone="negative"] {
  background: var(--navy);
  color: var(--yellow);
  background-image: repeating-linear-gradient(135deg, transparent 0 12px, var(--yellow) 12px 14px);
}

.focus-tag-row {
  gap: 0.4rem;
}

.story-tag-focus {
  background: var(--blue);
  color: var(--off-white);
}

.submit-hero {
  display: grid;
  grid-template-columns: minmax(280px, 0px) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding-inline: 0.95rem;
}

.submit-title {
  font-size: clamp(4.4rem, 4vw, 8rem);
}

.submit-intro {
  margin: 0;
  line-height: 1.5;
  width: min(100%, 80ch);
  padding-top: 0.8rem;
}

.submit-view[data-submit-step="2"] .submit-hero,
.submit-view[data-submit-step="3"] .submit-hero {
  grid-template-columns: 1fr;
  gap: 0.4rem;
  justify-items: center;
}

.submit-view[data-submit-step="2"] .submit-title,
.submit-view[data-submit-step="3"] .submit-title {
  width: 100%;
  max-width: none;
  text-align: center;
  font-size: clamp(2rem, 3vw, 4.1rem);
  line-height: 0.98;
}

.submit-view[data-submit-step="2"] .submit-title br,
.submit-view[data-submit-step="3"] .submit-title br {
  display: none;
}

.submit-view[data-submit-step="2"] .submit-intro,
.submit-view[data-submit-step="3"] .submit-intro {
  display: none;
}

.submit-panel {
  display: grid;
  gap: 1.55rem;
}

.submission-wizard {
  display: grid;
  gap: 1.6rem;
}

.submit-stepper {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.submit-stage {
  display: grid;
  gap: 1.4rem;
}

.submit-stage-copy,
.submit-choice-copy {
  display: grid;
  gap: 0.35rem;
}

.submit-stage-copy-centered {
  justify-items: center;
  text-align: center;
}

.submit-step-actions-center {
  justify-content: center;
}

.submit-stage-copy h3,
.submit-choice-copy h3 {
  margin: 0;
  color: var(--black);
  font-size: clamp(2.15rem, 2.3vw, 3.3rem);
  text-transform: none;
  font-family: var(--body-font);
  font-weight: 900;
}

.submit-decorate-grid .submit-choice-copy h3 {
  font-size: clamp(1.05rem, 1.1vw, 1.45rem);
}

.submit-choice-copy p,
.submit-stage-copy p {
  margin: 0;
}

.submit-decorate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.submit-choice-column,
.submit-choice-group,
.submit-preview-column,
.submission-review-copy,
.submission-review-preview,
.submission-success-copy,
.submission-success-preview {
  display: grid;
  gap: 1rem;
}

.submit-choice-column-right {
  padding-right: 1.2rem;
}

.submit-preview-column {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 1rem;
  align-content: start;
}

.submit-stage2-actions {
  justify-content: center;
}

.submit-mobile-carousel-nav {
  display: none;
}

.submit-closeness-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.submit-closeness-card {
  position: relative;
  display: grid;
  gap: 0.45rem;
  text-align: center;
  cursor: pointer;
}

.submit-closeness-card input,
.submit-stamp-option input,
.submit-tone-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.submit-closeness-card-art {
  display: block;
  aspect-ratio: 1.36;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.submit-closeness-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.submit-closeness-card-copy strong {
  display: block;
  font-size: clamp(1rem, 1vw, 1.25rem);
  line-height: 1;
}

.submit-closeness-card-copy span {
  display: block;
  margin-top: 0.18rem;
  font-size: clamp(0.64rem, 0.66vw, 0.82rem);
  line-height: 1.12;
}

.submit-closeness-card:hover .submit-closeness-card-art,
.submit-closeness-card:focus-within .submit-closeness-card-art,
.submit-closeness-card input:checked + .submit-closeness-card-art {
  opacity: 1;
}

.submit-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem 0.55rem;
}

.submit-stamp-option {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.submit-stamp-option > *:not(input) {
  opacity: 0.48;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.submit-stamp-art {
  display: grid;
  place-items: center;
  min-height: 92px;
}

.submit-stamp-art img {
  width: clamp(68px, 5.8vw, 102px);
  height: auto;
  display: block;
}

.submit-stamp-copy strong {
  display: block;
  font-size: clamp(0.95rem, 0.92vw, 1.15rem);
  line-height: 1;
}

.submit-stamp-copy span {
  display: block;
  margin-top: 0.14rem;
  font-size: clamp(0.62rem, 0.62vw, 0.78rem);
  line-height: 1.1;
}

.submit-stamp-option:hover,
.submit-stamp-option:focus-within > *:not(input),
.submit-stamp-option input:checked ~ .submit-stamp-art,
.submit-stamp-option input:checked ~ .submit-stamp-copy {
  opacity: 1;
}

.submit-stamp-option input:checked + .submit-stamp-art img {
  filter: drop-shadow(10px 10px 0 #000000);
}

.submit-tone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.submit-tone-option {
  position: relative;
  display: grid;
  gap: 0;
  justify-items: center;
  text-align: center;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.submit-tone-option > *:not(input) {
  opacity: 0.48;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.submit-tone-option:hover,
.submit-tone-option:focus-within > *:not(input),
.submit-tone-option input:checked ~ .submit-tone-swatch {
  opacity: 1;
}

.submit-tone-swatch {
  width: 100%;
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 0.55rem;
}

.submit-tone-swatch strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.65rem 0.18rem;
  font-size: clamp(1rem, 1.05vw, 1.4rem);
  line-height: 0.94;
  font-family: var(--display-font);
  font-weight: 900;
  text-transform: uppercase;
}

.submit-tone-option[data-tone="positive"] .submit-tone-swatch {
  background: var(--yellow);
  background-image: radial-gradient(var(--navy) 1.6px, transparent 1.6px);
  background-size: 18px 18px;
}

.submit-tone-option[data-tone="positive"] .submit-tone-swatch strong {
  background: var(--navy);
  color: var(--yellow);
}

.submit-tone-option[data-tone="neutral"] .submit-tone-swatch {
  background:
    linear-gradient(180deg, transparent 0 18px, var(--navy) 18px 20px, transparent 20px 44px, var(--navy) 44px 46px, transparent 46px 70px, var(--navy) 70px 72px, transparent 72px 100%),
    var(--light-pink);
}

.submit-tone-option[data-tone="neutral"] .submit-tone-swatch strong {
  background: var(--navy);
  color: var(--light-pink);
}

.submit-tone-option[data-tone="negative"] .submit-tone-swatch {
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, var(--yellow) 18px 20px),
    var(--navy);
}

.submit-tone-option[data-tone="negative"] .submit-tone-swatch strong {
  background: var(--yellow);
  color: var(--navy);
}

.submit-tone-option input:checked + .submit-tone-swatch {
  box-shadow: 10px 10px 0 #000000;
}

.submission-preview-shell {
  min-height: 100%;
}

.submission-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 500px;
  padding: 1rem 0.25rem;
}

.submission-preview-photo {
  position: absolute;
  top: 1.6rem;
  right: -0.35rem;
  width: min(72%, 460px);
  transform: rotate(4deg);
}

.submission-preview-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.submission-preview-card {
  position: relative;
  z-index: 1;
  width: min(82%, 500px);
  height: 300px;
  display: grid;
  grid-template-columns: minmax(0, 80%) minmax(88px, 20%);
  gap: 0.15rem;
  padding: 1rem 0.55rem 0.85rem 0.9rem;
  background: var(--light-pink);
  overflow: hidden;
  align-self: end;
  justify-self: start;
}

.submission-preview-card[data-tone="positive"] {
  background:
    radial-gradient(var(--navy) 1.6px, transparent 1.6px) 0 0 / 18px 18px,
    var(--yellow);
}

.submission-preview-card[data-tone="neutral"] {
  background:
    repeating-linear-gradient(180deg, transparent 0 30px, var(--navy) 30px 32px, transparent 32px 76px),
    var(--light-pink);
}

.submission-preview-card[data-tone="negative"] {
  background:
    repeating-linear-gradient(135deg, transparent 0 24px, var(--yellow) 24px 28px),
    var(--navy);
}

.submission-preview-story {
  min-width: 0;
  padding-right: 0.12rem;
}

.submission-preview-story p {
  width: 100%;
  margin: 0;
  font-size: clamp(1rem, 0.94vw, 1.35rem);
  line-height: 1.06;
  white-space: normal;
  word-break: break-word;
  max-height: 100%;
  overflow: hidden;
}

.submission-preview-card[data-tone="positive"] .submission-preview-story p {
  background: rgba(254, 231, 75, 0.92);
  color: var(--black);
  padding: 0.5rem 0.55rem;
}

.submission-preview-card[data-tone="neutral"] .submission-preview-story p {
  background: rgba(250, 184, 255, 0.92);
  color: var(--black);
  padding: 0.5rem 0.55rem;
}

.submission-preview-card[data-tone="negative"] .submission-preview-story p {
  background: rgba(23, 41, 233, 0.94);
  color: var(--off-white);
  padding: 0.5rem 0.55rem;
}

.submission-preview-stamps {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-content: stretch;
  justify-items: center;
  gap: 0.15rem;
  height: 100%;
  padding: 0.06rem 0 0;
}

.submission-preview-stamp-slot {
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
}

.submission-preview-stamp-slot.is-empty {
  visibility: hidden;
}

.submission-preview-stamp {
  width: min(92%, 88px);
  max-width: 88px;
  max-height: 76px;
  height: auto;
  display: block;
  object-fit: contain;
}

.submission-review-layout,
.submission-success-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1fr);
  gap: 1.8rem;
  align-items: center;
}

.submission-success-layout {
  background: var(--off-white);
  padding: 0;
}

.submission-success-copy h3 {
  margin: 0;
  font-size: clamp(2.2rem, 2.8vw, 4rem);
  color: var(--red);
}

.submission-success-copy p {
  margin: 0;
}

.submission-success-actions {
  justify-content: flex-start;
}

@media (max-width: 1200px) {
  .submit-decorate-grid,
  .submission-review-layout,
  .submission-success-layout {
    grid-template-columns: 1fr;
  }

  .submit-choice-column-right {
    order: 3;
  }

  .submit-preview-column {
    order: 2;
  }

  .submission-preview {
    min-height: 540px;
  }
}

.form-section {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.55rem;
}
fieldset.form-row {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.form-section-heading {
  display: grid;
  gap: 0.35rem;
  width: 100%;
}

.form-section-heading h3 {
  color: var(--black);
  font-size: clamp(2.15rem, 2.3vw, 3.3rem);
  text-transform: none;
  font-family: var(--body-font);
  font-weight: 900;
}

.form-section-heading p {
  margin: 0;
}

.hint-row p,
.results-meta {
  margin: 0;
  line-height: 1.06;
}

.hint-button {
  padding-inline: 1rem;
  background: var(--red);
}

.hint-output {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 0px solid var(--black);
  background: var(--yellow);
  box-shadow: var(--shadow-hard-sm);
  font-weight: 700;
  line-height: 1.08;
}

textarea,
select {
  width: 100%;
  border: 2px solid rgba(0, 0, 0, 1);
  background: transparent;
  color: var(--black);
}

textarea {
  min-height: 190px;
  padding: 1rem;
  resize: vertical;
  font-size: clamp(1.2rem, 1.3vw, 1.75rem);
  line-height: 1.1;
}

select {
  appearance: none;
  padding: 1rem 5rem 1rem 1rem;
  font-size: clamp(1.15rem, 1.3vw, 1.7rem);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--black) 50%),
    linear-gradient(135deg, var(--black) 50%, transparent 50%);
  background-position:
  calc(100% - 28px) calc(50% + 2px),
  calc(100% - 14px) calc(50% + 2px);
background-size: 14px 14px, 14px 14px;
  background-repeat: no-repeat;
}

.closeness-line-selector {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: 1.5rem;
}

.closeness-line-selector::before {
  content: "";
  position: absolute;
  left: calc(8.333% - 10px);
  right: calc(8.333% - 10px);
  top: 2.1rem;
  height: 6px;
  background: var(--pink);
  
}

.closeness-option {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
  color: var(--black);
  
}

.closeness-option input {
  position: absolute;
  opacity: 0;
  inset: 0;
  
}

.closeness-option-node {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  border: 4px solid var(--pink);
  background: var(--pink);
  border-radius: 999px;
}

.closeness-option input:checked + .closeness-option-node {
  background: var(--off-white);
  box-shadow: 0 0 0 4px var(--pink);
  border-radius: 999px;
}

.closeness-option strong {
  display: block;
  font-size: clamp(1.1rem, 1.2vw, 1.65rem);
  line-height: 1.03;
  
  
}

.closeness-option span {
  display: block;
  font-size: clamp(1rem, 1.05vw, 1.35rem);
  line-height: 1.06;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}

.check-option,
.tone-option {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.8rem;
  align-items: start;
  padding-top: 0.2rem;
}

.check-option input,
.tone-option input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.check-box {
  width: 24px;
  height: 24px;
  border: 3px solid var(--light-pink);
  background: var(--light-pink);
  display: grid;
  place-items: center;
  font-family: var(--display-font);
  font-size: 1rem;
  line-height: 1;
}

.check-option input:checked + .check-box,
.tone-option input:checked + .check-box {
  color: var(--black);
}

.check-option input:checked + .check-box::before,
.tone-option input:checked + .check-box::before {
  content: "×";
}

.check-copy strong,
.tone-copy strong {
  display: block;
  font-size: clamp(1.2rem, 1.25vw, 1.75rem);
  line-height: 1.02;
}

.check-copy span,
.tone-copy span {
  display: block;
  margin-top: 0.35rem;
  font-size: clamp(1rem, 1.05vw, 1.4rem);
  line-height: 1.04;
}

.submission-tone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.submit-form-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
  gap: 2rem;
}

.consent-check {
  display: flex;
  justify-content: center;
  align-items: center;;
  grid-template-columns: 28px 1fr;
  gap: 0.8rem;
  align-items: start;
}

.consent-check input {
  width: 28px;
  height: 28px;
  margin: 0;
  accent-color: var(--light-pink);
}

.consent-check span {
  font-size: clamp(1.1rem, 1.2vw, 1.6rem);
  line-height: 1.05;
  font-weight: 700;
}

.form-actions-center {
  justify-content: center;
}

.confirmation-card {
  padding: 1.5rem;
  background: var(--yellow);
}

.confirmation-card.submission-success-layout {
  background: var(--off-white);
}

.confirmation-card h3 {
  font-size: clamp(2.2rem, 2.8vw, 4rem);
  color: var(--red);
}

.filters-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  align-items: end;
}

.gallery-filters-shell {
  display: grid;
  gap: 0.75rem;
}

.filters-toggle {
  justify-self: start;
}

.gallery-filters-wrap[hidden] {
  display: none !important;
}

.filters-bar label {
  display: grid;
  gap: 0.5rem;
}

.filters-bar span {
  font-size: clamp(1.1rem, 1.2vw, 1.55rem);
  font-weight: 800;
}

.gallery-panel,
.paper-panel {
  display: grid;
  gap: 1.3rem;
}

.admin-login-form {
  display: grid;
  gap: 1rem;
}

.admin-login-form label {
  display: grid;
  gap: 0.45rem;
}

.admin-login-form label > span,
.admin-toolbar-copy h3 {
  font-size: clamp(1.1rem, 1.2vw, 1.55rem);
  font-weight: 800;
}

.admin-login-form input {
  width: 100%;
  border: 2px solid rgba(0, 0, 0, 1);
  background: transparent;
  color: var(--black);
  padding: 0.9rem 1rem;
  font-size: clamp(1.05rem, 1.05vw, 1.3rem);
}

.admin-login-actions,
.admin-toolbar,
.admin-toolbar-actions,
.admin-toolbar-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.admin-toolbar {
  justify-content: space-between;
}

.admin-toolbar-controls label {
  display: grid;
  gap: 0.35rem;
}

.admin-toolbar-controls span,
.admin-editor-field span,
.admin-editor-field legend {
  font-size: clamp(1rem, 1vw, 1.2rem);
  font-weight: 800;
}

.admin-toolbar-copy {
  display: grid;
  gap: 0.35rem;
}

.admin-toolbar-copy h3,
.admin-toolbar-copy p {
  margin: 0;
}

.admin-table-head,
.admin-row {
  display: grid;
  grid-template-columns: 110px 110px 150px 200px 110px 100px minmax(240px, 1fr) 260px;
  gap: 0.75rem;
  align-items: start;
}

.admin-table-head {
  padding: 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--red);
  text-transform: uppercase;
}

.admin-card {
  display: grid;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  background: var(--yellow);
}

.admin-row[data-status="pending"] {
  background: var(--yellow);
}

.admin-row[data-status="approved"] {
  background: var(--green);
}

.admin-row[data-status="rejected"] {
  background: var(--off-white);
}

.admin-row-cell {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.admin-row-label {
  display: none;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.58);
}

.admin-row-status strong {
  font-family: var(--display-font);
  color: var(--red);
  letter-spacing: 0.02em;
}

.admin-row-cell strong,
.admin-row-cell span,
.admin-card p {
  margin: 0;
  font-size: clamp(0.92rem, 0.95vw, 1.15rem);
  line-height: 1.08;
}

.admin-row-story span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-action {
  border: 0;
  background: var(--off-white);
  color: var(--black);
  box-shadow: none;
  padding: 0.7rem 0.95rem;
  font-weight: 800;
}

.admin-actions {
  gap: 0.5rem;
}

.admin-story-editor {
  width: min(920px, calc(100vw - 2rem));
}

.admin-editor-sheet {
  display: grid;
  gap: 1rem;
  padding-top: 4rem;
}

.admin-editor-header {
  display: grid;
  gap: 0.3rem;
}

.admin-editor-header h2,
.admin-editor-header p,
.admin-editor-field legend {
  margin: 0;
}

.admin-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.admin-editor-field {
  display: grid;
  gap: 0.45rem;
}

.admin-editor-field-wide {
  width: 100%;
}

.admin-toggle-check {
  margin: 0;
}

.admin-toggle-check input:disabled + span {
  opacity: 0.5;
}

.admin-editor-focus-grid {
  margin-top: 0.5rem;
}

.admin-check-option {
  min-width: 0;
}

.admin-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.site-footer {
  position: relative;
  z-index: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 0.8rem;
  align-items: center;
  padding: 0 0 0.2rem;
}

.site-footer p {
  margin: 0;
  font-size: clamp(0.82rem, 0.82vw, 1rem);
  line-height: 1;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.story-dialog {
  width: min(900px, calc(100vw - 1rem));
  padding: 0;
  border: 0;
  background: transparent;
}

.story-dialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

.dialog-close-form {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 2;
}

.dialog-close-button {
  padding: 0.8rem 1rem;
  font-size: 1rem;
}

.letter-sheet {
  padding: 2rem;
  background: var(--off-white);
}

.letter-header {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.letter-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 0.1rem;
}

.letter-body p {
  margin: 0 0 1rem;
  font-size: clamp(1.2rem, 1.3vw, 1.8rem);
  line-height: 1.12;
  white-space: pre-wrap;
}

.letter-prompt-section {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1.15rem;
  padding: 1rem 1.1rem;
  background: var(--yellow);
}

.letter-prompt-section h3,
.letter-prompt-section p {
  margin: 0;
}

.letter-prompt-section h3 {
  font-size: clamp(1rem, 1vw, 1.2rem);
}

.letter-prompt-section p {
  font-size: clamp(1rem, 1.05vw, 1.35rem);
  line-height: 1.15;
  white-space: pre-wrap;
}

.empty-state {
  display: grid;
  gap: 0.65rem;
  text-align: center;
}

[hidden] {
  display: none !important;
}

@keyframes view-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes postcard-send {
  0% {
    transform: translate(0, -22px) rotate(-8deg);
    opacity: 1;
  }

  72% {
    transform: translate(18px, 34px) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translate(24px, 110px) rotate(10deg) scale(0.68);
    opacity: 0;
  }
}

@keyframes mail-rain-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--mail-rot, 0deg)) scale(var(--mail-scale, 1));
  }

  100% {
    transform: translate3d(0, calc(100vh + 20rem), 0) rotate(var(--mail-rot, 0deg)) scale(var(--mail-scale, 1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mail-rain-item {
    animation: none;
  }
}

@media (max-width: 1400px) {
  body[data-view="home"] .site-header-shell,
  body[data-view="home"] .brand-block,
  body:not([data-view="home"]) .site-header-shell {
    grid-template-columns: 1fr;
  }

  body[data-view="home"] .top-nav,
  body:not([data-view="home"]) .top-nav {
    justify-content: flex-start;
    padding-top: 0;
  }

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

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

  .focus-stage {
    grid-template-columns: 82px minmax(420px, 520px) 82px;
  }

  .review-stage {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .review-photo-card {
    grid-column: auto;
    justify-self: center;
    margin-top: 0;
    margin-left: 0;
    width: min(100%, 430px);
  }

  .review-postcard {
    grid-column: auto;
    margin-right: 0;
    width: min(100%, 520px);
  }

  .submit-hero,
  .submit-form-split,
  .filters-bar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .site-header-shell,
  .page-shell,
  .site-footer {
    width: min(100vw - 1rem, 100%);
  }

  .choice-grid,
  .stamp-grid,
  .tone-grid,
  .story-grid,
  .submission-tone-grid,
  .checkbox-grid,
  .stepper {
    grid-template-columns: 1fr;
  }

  .focus-stage {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.2rem;
    min-height: 0;
  }

  .focus-nav {
    order: 2;
    grid-auto-flow: row;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
  }

  .family-stage-display {
    order: 1;
  }

  .focus-nav-right {
    order: 3;
  }

  .focus-arrow {
    border-top-width: 44px;
    border-bottom-width: 44px;
  }

  .focus-arrow-left {
    border-right-width: 72px;
  }

  .focus-arrow-right {
    border-left-width: 72px;
  }

  .closeness-line-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 0;
  }

  .closeness-line-selector::before {
    display: none;
  }

  .closeness-option {
    justify-items: start;
    text-align: left;
    grid-template-columns: 28px 1fr;
    align-items: start;
    gap: 0.7rem;
  }

  .closeness-option-node {
    margin-top: 0.1rem;
  }

  .step-actions-wide,
  .receive-results-actions,
  .empty-actions {
    justify-content: stretch;
  }

  .step-actions-wide > *,
  .receive-results-actions > *,
  .empty-actions > * {
    flex: 1 1 100%;
  }

  .choice-card {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .site-header-shell,
  .page-shell,
  .site-footer {
    width: min(100vw - 0.9rem, 100%);
  }

  .site-header-shell,
  body[data-view="home"] .site-header-shell,
  body:not([data-view="home"]) .site-header-shell {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 0.35rem;
    padding: 0.55rem 0 0.45rem;
  }

  .header-meta,
  body[data-view="home"] .header-meta,
  body:not([data-view="home"]) .header-meta {
    position: relative;
    justify-items: end;
    gap: 0;
  }

  .site-intro,
  body[data-view="home"] .site-intro,
  body:not([data-view="home"]) .site-intro {
    display: none;
  }

  .brand-mark,
  body[data-view="home"] .brand-mark,
  body:not([data-view="home"]) .brand-mark {
    width: min(250px, 60vw);
  }

  .mobile-menu-toggle {
    display: grid;
  }

  .top-nav,
  body[data-view="home"] .top-nav,
  body:not([data-view="home"]) .top-nav {
    display: none;
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    width: min(16rem, calc(100vw - 1rem));
    padding: 0.6rem;
    background: var(--pink);
    z-index: 10;
    gap: 0.25rem;
    justify-content: stretch;
  }

  body.mobile-nav-open .top-nav {
    display: grid;
  }

  .nav-link,
  body[data-view="home"] .nav-link,
  body:not([data-view="home"]) .nav-link {
    width: 100%;
    justify-content: flex-start;
    color: var(--red);
  }

  .nav-link-icon {
    display: none;
  }

  .nav-link-text,
  body[data-view="home"] .nav-link-text,
  body:not([data-view="home"]) .nav-link-text {
    width: 100%;
    justify-content: flex-start;
    min-height: 0;
    padding: 0.75rem 0.7rem 0.65rem;
    font-size: 1rem;
    line-height: 0.95;
  }

  .nav-link:hover .nav-link-text,
  .nav-link:focus-visible .nav-link-text,
  .nav-link.is-active .nav-link-text {
    transform: none;
  }

  .page-shell {
    padding: 0.7rem 0 1rem;
  }

  .view-panel,
  .receive-shell,
  .submit-view,
  .gallery-view,
  .admin-view {
    gap: 0.7rem;
  }

  .admin-toolbar,
  .admin-login-actions,
  .admin-editor-actions {
    justify-content: center;
  }

  .admin-toolbar-controls {
    justify-content: center;
  }

  .admin-editor-grid {
    grid-template-columns: 1fr;
  }

  .admin-table-head {
    display: none;
  }

  .admin-row {
    grid-template-columns: 1fr;
  }

  .admin-row-label {
    display: inline-block;
  }

  .home-copy {
    gap: 0.2rem;
    width: 100%;
    max-width: 100%;
  }

  .home-title {
    max-width: none;
    width: 100%;
    font-size: clamp(2.15rem, 8.7vw, 3.5rem);
    line-height: 0.95;
  }

  .page-lead {
    max-width: 95%;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    line-height: 1.08;
  }

  .choice-grid {
    gap: 0.55rem;
    margin-top: 0.4rem;
  }

  .choice-card {
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
    grid-template-rows: 1fr;
    min-height: 5.45rem;
    padding: 0.48rem 0.7rem;
    gap: 0.28rem;
    align-items: stretch;
  }

  .choice-card-art {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    align-items: stretch;
    gap: 0;
    min-width: 0;
  }

  .choice-number {
    position: absolute;
    top: 0.42rem;
    left: 0.7rem;
    font-size: 2.7rem;
  }

  .choice-icon-stack {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .choice-card-body {
    grid-column: 1;
    grid-row: 1;
    gap: 0.18rem;
    width: 100%;
    min-width: 0;
    padding: 3rem 0 0;
    align-content: center;
  }

  .choice-card h3 {
    font-size: 1.38rem;
  }

  .choice-card p {
    font-size: 0.7rem;
    line-height: 1.06;
    max-width: none;
  }

  .choice-icon-stack .choice-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
  }

  .card-arrow {
    display: none;
  }

  .submit-hero {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    justify-items: center;
    text-align: center;
  }

  .submit-title {
    width: 100%;
    font-size: 1.72rem;
    line-height: 0.95;
    white-space: nowrap;
    text-align: center;
  }

  .submit-title br {
    display: none;
  }

  .submit-intro {
    padding-top: 0;
    margin-top: 0;
    width: 100%;
    max-width: none;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.18;
  }

  .submit-view[data-submit-step="2"] .submit-title,
  .submit-view[data-submit-step="3"] .submit-title {
    font-size: clamp(1.72rem, 7.2vw, 2.95rem);
    line-height: 0.94;
    white-space: normal;
  }

  .receive-shell {
    min-height: auto;
    grid-template-rows: auto auto auto;
  }

  .receive-title,
  .gallery-title {
    max-width: none;
    width: 100%;
    justify-self: stretch;
    font-size: clamp(1.72rem, 7.2vw, 2.95rem);
    line-height: 0.94;
  }

  .receive-step-copy h3 {
    max-width: none;
    width: 100%;
    font-size: 0.8rem;
    line-height: 1.05;
  }

  .stepper {
    display: flex;
    gap: 0.42rem;
    overflow: hidden;
    padding-bottom: 0.15rem;
    width: 100%;
  }

  .stepper-item {
    flex: 0 0 12%;
    min-width: 0;
    min-height: 3rem;
    justify-content: center;
    padding: 0.32rem 0.26rem;
  }

  .stepper-item strong {
    display: none;
  }

  .stepper-item.is-current {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    gap: 0.35rem;
  }

  .stepper-item.is-current strong {
    display: block;
    font-size: 0.68rem;
    line-height: 0.96;
  }

  .receive-step {
    min-height: calc(100dvh - 14rem);
    padding: 0.15rem 0 0;
    gap: 0.55rem;
    align-content: start;
  }

  .focus-stage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "display display display"
      "left center right";
    gap: 0.45rem 0.35rem;
    min-height: 0;
    padding-top: 0;
  }

  .family-stage-display {
    display: contents;
  }

  .focus-orb {
    display: none;
  }

  .family-stage-frame {
    grid-area: display;
    width: 100%;
    max-width: none;
  }

  .focus-nav-left {
    grid-area: left;
    justify-self: start;
  }

  .focus-nav-right {
    grid-area: right;
    justify-self: end;
    flex-direction: row;
    justify-content: flex-start;
  }

  .focus-nav {
    position: static;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    justify-self: center;
    align-self: end;
    min-height: 0;
    gap: 0.28rem;
    font-size: 0.72rem;
    text-align: center;
  }

  .focus-nav span:last-child {
    display: inline-block;
    padding-left: 0;
    white-space: nowrap;
    text-align: center;
  }

  .focus-arrow {
    width: 52px;
    height: 56px;
    border: 0;
    display: block;
  }

  .focus-arrow-left {
    background: #2a30e8;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }

  .focus-arrow-right {
    background: #ea63b7;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

  .closeness-readout {
    grid-area: center;
    align-self: center;
    justify-self: center;
    gap: 0.1rem;
    width: 100%;
    text-align: center;
  }

  .closeness-readout h4 {
    font-size: 1.1rem;
  }

  .closeness-readout p {
    font-size: 0.74rem;
    max-width: none;
    width: 100%;
  }

  .receive-step[data-receive-step="1"] .step-actions-end {
    margin-top: 0.45rem;
  }

  .stamp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 0.5rem;
  }

  .stamp-art {
    min-height: 122px;
  }

  .stamp-art img {
    max-width: 112px;
  }

  .stamp-copy strong {
    font-size: 0.95rem;
    line-height: 1;
  }

  .stamp-copy span {
    font-size: 0.7rem;
    line-height: 1.06;
  }

  .tone-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .tone-card {
    min-height: 116px;
    padding: 0.75rem;
  }

  .tone-card strong {
    font-size: 2rem;
  }

  .tone-card span {
    display: none;
  }

  .review-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    gap: 0;
    padding-top: 0;
    margin-top: 0;
  }

  .review-postcard {
    width: min(86vw, 370px);
    min-height: 225px;
    margin-top: -5.8rem;
    margin-right: 1.2rem;
    padding: 0.8rem 5.5rem 0.9rem 0.95rem;
  }

  .review-postcard h4 {
    font-size: 1.8rem;
    max-width: 9ch;
  }

  .review-summary {
    gap: 0.55rem;
    margin-top: 0.6rem;
  }

  .review-summary-block strong {
    font-size: 0.95rem;
  }

  .review-summary-block p {
    font-size: 0.82rem;
  }

  .review-stamp {
    width: 86px;
  }

  .review-photo-card {
    width: min(72vw, 320px);
    margin-left: 2.2rem;
    margin-top: 0.2rem;
  }

  .story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .story-card {
    min-height: 215px;
  }

  .story-card-preview {
    font-size: 0.72rem;
    line-height: 1.08;
  }

  .story-card-body {
    padding: 3rem 0.7rem 0.55rem;
  }

  .story-card-no-match .story-card-body {
    padding-top: 1.6rem;
  }

  .match-pill,
  .story-tag,
  .tone-badge {
    min-height: 1.7rem;
    padding: 0.18rem 0.45rem 0.08rem;
    font-size: 0.62rem;
  }

  .match-pill {
    top: 0.45rem;
    left: 0.45rem;
  }

  .story-card-footer {
    gap: 0.3rem;
    padding: 0.55rem 0.65rem 0.65rem;
  }

  .focus-tag-row,
  .story-card-top-tags {
    gap: 0.25rem;
  }

  .step-actions-wide,
  .receive-results-actions,
  .empty-actions,
  .step-actions-end {
    justify-content: center;
  }

  .step-actions-wide,
  .step-actions-end {
    flex-wrap: nowrap;
  }

  .step-actions-wide > *,
  .empty-actions > *,
  .step-actions-end > * {
    flex: 0 1 calc(50% - 0.25rem);
  }

  .receive-results-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
  }

  .receive-results-actions > * {
    width: 100%;
    min-width: 0;
  }

  .step-actions-end > *:only-child {
    flex-basis: min(58vw, 14rem);
  }

  .action-button,
  .dialog-close-button,
  .footer-link,
  .hint-button {
    padding: 0.72rem 1rem;
    font-size: 0.88rem;
  }

  .send-status,
  .results-meta,
  .gallery-desc {
    font-size: 0.76rem;
    line-height: 1.08;
    text-align: center;
  }

  .submit-intro,
  .form-section-heading p,
  .hint-row p,
  .check-copy span,
  .tone-copy span,
  .consent-check span,
  .closeness-option span,
  .filters-bar span,
  textarea,
  select {
    font-size: 0.62rem;
    line-height: 1.08;
  }

  .submit-view[data-submit-step="1"] .submit-intro {
    font-size: 0.82rem;
    line-height: 1.18;
  }

  .filters-bar {
    gap: 0.45rem;
  }

  .story-dialog {
    width: min(92vw, 25rem);
  }

  .dialog-close-form {
    right: 0.75rem;
    top: 0.75rem;
  }

  .dialog-close-button {
    padding: 0.68rem 0.9rem;
  }

  .letter-sheet {
    padding: 3.35rem 0.95rem 1rem;
  }

  .letter-header {
    margin-bottom: 0.75rem;
    padding-right: 5.2rem;
  }

  .letter-meta {
    flex-wrap: wrap;
    gap: 0.35rem;
    overflow-x: visible;
  }

  .letter-body p {
    font-size: 0.94rem;
    line-height: 1.08;
  }

  .submit-stepper {
    gap: 0.5rem;
  }

  .submit-stage-copy h3,
  .submit-choice-copy h3 {
    width: 100%;
    font-size: 1rem;
    text-align: center;
  }

  .hint-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: stretch;
    text-align: left;
    gap: 0.55rem;
  }

  .submit-stage[data-submit-step="1"] textarea {
    min-height: 16.5rem;
    font-size: 1.18rem;
    line-height: 1.18;
  }

  .submit-stage[data-submit-step="2"] {
    gap: 0.8rem;
  }

  .submit-stage[data-submit-step="2"] .submit-decorate-grid {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr) 4.2rem;
    grid-template-areas:
      "preview preview preview"
      "leftnav panel rightnav"
      "actions actions actions";
    gap: 0.35rem 0.45rem;
    align-items: start;
  }

  .submit-stage[data-submit-step="2"] .submit-preview-column {
    display: contents;
  }

  .submit-stage[data-submit-step="2"] #submissionPreviewStage2 {
    grid-area: preview;
  }

  .submit-stage[data-submit-step="2"] .submit-stage2-actions {
    grid-area: actions;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-top: -0.1rem;
  }

  .submit-mobile-carousel-nav {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .submit-mobile-carousel-nav-left {
    grid-area: leftnav;
    justify-self: start;
  }

  .submit-mobile-carousel-nav-right {
    grid-area: rightnav;
    justify-self: end;
  }

  .submit-mobile-nav-button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    display: grid;
    gap: 0.35rem;
    justify-items: center;
    color: var(--black);
    cursor: pointer;
  }

  .submit-mobile-nav-label {
    font-family: var(--body-font);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 0.95;
    text-align: center;
    text-transform: none;
  }

  .submit-mobile-nav-arrow {
    width: 52px;
    height: 56px;
    display: block;
  }

  .submit-mobile-nav-arrow-left {
    background: #2a30e8;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }

  .submit-mobile-nav-arrow-right {
    background: #ea63b7;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

  .submit-stage[data-submit-step="2"] .submit-choice-column[data-submit-mobile-panel-section="closeness"],
  .submit-stage[data-submit-step="2"] .submit-choice-column-right {
    grid-area: panel;
    width: 100%;
    min-height: 23.5rem;
    align-content: start;
  }

  .submit-stage[data-submit-step="2"] .submit-choice-column-right {
    padding-right: 0;
  }

  .submit-stage[data-submit-step="2"][data-submit-mobile-panel="closeness"] .submit-choice-column[data-submit-mobile-panel-section="closeness"] {
    display: grid;
    gap: 0.65rem;
  }

  .submit-stage[data-submit-step="2"][data-submit-mobile-panel="closeness"] .submit-choice-column-right {
    display: none;
  }

  .submit-stage[data-submit-step="2"][data-submit-mobile-panel="focus"] .submit-choice-column[data-submit-mobile-panel-section="closeness"],
  .submit-stage[data-submit-step="2"][data-submit-mobile-panel="tone"] .submit-choice-column[data-submit-mobile-panel-section="closeness"] {
    display: none;
  }

  .submit-stage[data-submit-step="2"][data-submit-mobile-panel="focus"] .submit-choice-column-right,
  .submit-stage[data-submit-step="2"][data-submit-mobile-panel="tone"] .submit-choice-column-right {
    display: grid;
  }

  .submit-stage[data-submit-step="2"] .submit-choice-group[data-submit-mobile-panel-section="focus"],
  .submit-stage[data-submit-step="2"] .submit-choice-group[data-submit-mobile-panel-section="tone"] {
    display: none;
  }

  .submit-stage[data-submit-step="2"][data-submit-mobile-panel="focus"] .submit-choice-group[data-submit-mobile-panel-section="focus"],
  .submit-stage[data-submit-step="2"][data-submit-mobile-panel="tone"] .submit-choice-group[data-submit-mobile-panel-section="tone"] {
    display: grid;
    gap: 0.65rem;
    min-height: 23.5rem;
    align-content: start;
  }

  .submit-stage[data-submit-step="2"] .submit-choice-copy {
    text-align: center;
  }

  .submit-stage[data-submit-step="2"] .submit-closeness-grid,
  .submit-stage[data-submit-step="2"] .submit-focus-grid,
  .submit-stage[data-submit-step="2"] .submit-tone-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .submit-stage[data-submit-step="2"] .submit-closeness-grid {
    gap: 0.55rem;
  }

  .submit-stage[data-submit-step="2"] .submit-closeness-card-art {
    aspect-ratio: 1;
  }

  .submit-stage[data-submit-step="2"] .submit-focus-grid {
    gap: 0.35rem 0.2rem;
  }

  .submit-stage[data-submit-step="2"] .submit-stamp-option {
    gap: 0.08rem;
  }

  .submit-stage[data-submit-step="2"] .submit-stamp-art {
    min-height: 84px;
  }

  .submit-stage[data-submit-step="2"] .submit-stamp-copy span {
    margin-top: 0;
    line-height: 1.02;
  }

  .submit-stage[data-submit-step="2"] .submit-stamp-option input:checked + .submit-stamp-art img {
    filter: drop-shadow(4px 4px 0 #000000);
  }

  .submit-stage[data-submit-step="2"] .submit-tone-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .submit-stage[data-submit-step="2"] .submit-stage2-actions > * {
    flex: 0 1 calc(50% - 0.6rem);
  }

  .submit-stage[data-submit-step="2"] .submit-tone-option {
    width: 100%;
    min-width: 0;
  }

  .submit-stage[data-submit-step="2"] .submit-closeness-card-copy strong,
  .submit-stage[data-submit-step="2"] .submit-stamp-copy strong {
    font-size: 0.7rem;
    line-height: 0.94;
  }

  .submit-stage[data-submit-step="2"] .submit-closeness-card-copy span,
  .submit-stage[data-submit-step="2"] .submit-stamp-copy span,
  .submit-stage[data-submit-step="2"] .submit-choice-copy p {
    font-size: 0.62rem;
    line-height: 1.08;
  }

  .submit-stage[data-submit-step="2"] .submit-tone-swatch {
    min-height: 72px;
    padding: 0.32rem 0.3rem;
  }

  .submit-stage[data-submit-step="2"] .submit-tone-swatch strong {
    font-size: 0.9rem;
    padding: 0.24rem 0.36rem 0.14rem;
  }

  .submit-stage[data-submit-step="2"] .submit-stamp-art {
    min-height: 96px;
  }

  .submit-stage[data-submit-step="2"] .submit-stamp-art img {
    width: min(100%, 88px);
  }

  .submit-stage[data-submit-step="2"] .submission-preview {
    min-height: 220px;
    padding: 0.05rem 0 0.05rem;
  }

  .submit-stage[data-submit-step="2"] .submission-preview-photo {
    top: 0.1rem;
    right: -0.5rem;
    width: 64%;
  }

  .submit-stage[data-submit-step="2"] .submission-preview-card {
    width: min(58vw, 280px);
    height: 140px;
    padding: 0.5rem 0.35rem 0.4rem 0.5rem;
  }

  .submit-stage[data-submit-step="2"] .submission-preview-story p {
    font-size: 0.74rem;
    line-height: 1.16;
  }

  .submission-review-layout,
  .submission-success-layout {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .submission-review-preview,
  .submission-success-preview {
    order: 1;
  }

  .submission-review-copy,
  .submission-success-copy {
    order: 2;
  }

  .submission-review-copy {
    width: 100%;
  }

  .submission-review-copy .submit-choice-copy {
    text-align: left;
  }

  .submit-stage[data-submit-step="3"] #submissionPreviewStage3 .submission-preview,
  .submit-stage[data-submit-step="3"] #submissionPreviewSuccess .submission-preview {
    min-height: 300px;
    padding: 0.2rem 0 0.1rem;
  }

  .submit-stage[data-submit-step="3"] #submissionPreviewStage3 .submission-preview-photo,
  .submit-stage[data-submit-step="3"] #submissionPreviewSuccess .submission-preview-photo {
    top: 1rem;
    right: 0.4rem;
    width: 57%;
  }

  .submit-stage[data-submit-step="3"] #submissionPreviewStage3 .submission-preview-card,
  .submit-stage[data-submit-step="3"] #submissionPreviewSuccess .submission-preview-card {
    width: min(86vw, 420px);
    height: 205px;
    padding: 0.72rem 0.45rem 0.6rem 0.7rem;
  }

  .submit-stage[data-submit-step="3"] #submissionPreviewStage3 .submission-preview-story p,
  .submit-stage[data-submit-step="3"] #submissionPreviewSuccess .submission-preview-story p {
    line-height: 1.16;
  }

  .submit-stage[data-submit-step="3"] #submissionPreviewStage3 .submission-preview-stamps {
    transform: translateY(-8px);
  }

  .submission-preview {
    min-height: 390px;
    padding: 1rem 0;
  }

  .submission-preview-photo {
    top: 2.75rem;
    right: 0.5rem;
    width: 58%;
  }

  .submission-preview-card {
    min-height: 240px;
    padding: 0.9rem 0.8rem;
  }

  .submission-preview-story p {
    width: 100%;
    font-size: 0.9rem;
    line-height: 1.08;
  }

  .submission-preview-stamp {
    width: 76px;
  }

  .submission-success-actions {
    justify-content: center;
  }

  .form-section-heading h3 {
    width: 100%;
    font-size: 1rem;
  }

  .check-copy strong,
  .tone-copy strong,
  .closeness-option strong {
    font-size: 0.72rem;
    line-height: 1.02;
  }

  textarea {
    min-height: 112px;
    padding: 0.7rem 0.8rem;
  }

  select {
    padding: 0.8rem 2.4rem 0.8rem 0.8rem;
    background-position:
      calc(100% - 18px) calc(50% - 5px),
      calc(100% - 11px) calc(50% - 5px);
    background-size: 9px 9px, 9px 9px;
  }

  .submit-button {
    min-width: 0;
  }
}