:root {
  --ink: #222820;
  --ink-soft: #555b52;
  --line: #aaa598;
  --lavender: #c9955b;
  --paper: #fffaf0;
  --paper-blue: #f1eadb;
  --berry: #c74432;
  --berry-dark: #8f3026;
  --mint: #b7c9ad;
  --mint-dark: #4e6854;
  --lemon: #ddb94b;
  --sky: #cad9d5;
  --postal-blue: #4b7283;
  --night: #26342d;
  --shadow: 0 18px 35px rgba(66, 45, 23, 0.24);
  --display: "Bookman Old Style", "URW Bookman", Georgia, serif;
  --body: "Atkinson Hyperlegible", Aptos, "Segoe UI", Arial, sans-serif;
  --utility: ui-monospace, "Cascadia Mono", "SFMono-Regular", "Roboto Mono", "DejaVu Sans Mono", Consolas, monospace;
}

body {
  background-color: var(--lavender);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(91, 56, 24, 0.1) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 65%, rgba(255, 255, 255, 0.12) 0 1px, transparent 1.5px),
    linear-gradient(90deg, rgba(119, 75, 35, 0.035), transparent 28%, rgba(255, 255, 255, 0.04) 62%, transparent);
  background-size: 17px 19px, 23px 29px, 100% 100%;
  color: var(--ink);
  font-size: 17px;
  letter-spacing: 0.003em;
}

body::before {
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 245, 219, 0.32), transparent 55%),
    linear-gradient(rgba(255, 255, 255, 0.02), rgba(86, 51, 20, 0.05));
}

::selection {
  background: #f1dc82;
  color: var(--ink);
}

:focus-visible {
  outline-color: #842f2b;
}

.site-header {
  position: relative;
  top: auto;
  width: min(1080px, calc(100% - 36px));
  min-height: 66px;
  margin: 12px auto 4px;
  padding: 8px 2px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.site-header .brand img {
  width: 38px;
  height: 38px;
  padding: 4px;
  border: 2px solid #2f2a22;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--berry);
  filter: none;
  image-rendering: pixelated;
  transform: rotate(-2deg);
}

.site-header .brand-copy strong,
.site-header .brand-copy small,
.site-header .site-nav a {
  color: #2f2a22;
}

.site-header .brand-copy strong {
  font-family: var(--utility);
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.site-header .brand-copy small {
  opacity: 0.82;
  font-size: 0.62rem;
  font-weight: 750;
}

.site-header .site-nav a {
  font-size: 0.76rem;
}

.site-header .button-ink {
  min-height: 42px;
  border: 2px solid #2f2a22;
  border-radius: 3px;
  background: #2f2a22;
  box-shadow: 3px 3px 0 rgba(255, 253, 247, 0.6);
  font-family: var(--utility);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.paypal-sandbox-banner {
  width: min(1040px, calc(100% - 36px));
  margin: 8px auto 14px;
  padding: 9px 14px;
  border: 2px dashed #5b321f;
  border-radius: 2px;
  background: #ffd55d;
  box-shadow: 3px 3px 0 #5b321f;
  color: #351b13;
  font-family: var(--utility);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.025em;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-0.15deg);
}

.paypal-sandbox-banner[hidden] {
  display: none;
}

.maker-hero {
  width: min(1040px, calc(100% - 36px));
  margin: 22px auto 0;
  padding: 0 0 84px;
}

.maker-board {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.maker-grid {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 540px);
  align-items: start;
  gap: 48px;
}

.address-sheet,
.goodie-sheet {
  min-width: 0;
  border: 0;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.address-sheet {
  position: sticky;
  top: 20px;
  overflow: hidden;
  padding: 0 22px 18px;
  border: 4px solid #222822;
  transform: rotate(-0.35deg);
}

.address-sheet::after {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(36, 51, 41, 0.28);
  content: "";
  pointer-events: none;
}

.shipping-label-head {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  margin: 0 -22px 18px;
  padding: 9px 16px 9px 20px;
  background: #222822;
  color: #fffdf7;
}

.shipping-label-head strong {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.shipping-label-head img {
  width: 42px;
  height: 42px;
  padding: 4px;
  border: 2px solid #222820;
  border-radius: 2px;
  background: #fffdf7;
  box-shadow: 2px 2px 0 var(--berry);
  image-rendering: pixelated;
  transform: rotate(2deg);
}

.delivery-stamp {
  position: absolute;
  z-index: 2;
  top: 86px;
  right: 17px;
  display: grid;
  padding: 7px 10px 5px;
  border: 3px double var(--berry);
  border-radius: 4px;
  color: var(--berry-dark);
  font-family: var(--utility);
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(5deg);
}

.delivery-stamp span {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.delivery-stamp b {
  font-size: 0.74rem;
}

.shipping-heading {
  position: relative;
  z-index: 1;
  max-width: 55%;
  margin: 0 0 16px;
}

.shipping-heading .utility-label,
.goodie-heading .utility-label {
  margin-bottom: 4px;
  color: #5f655e;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.shipping-heading h2 {
  margin: 0;
  font-family: var(--utility);
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.25;
  text-transform: uppercase;
}

.shipping-fields {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 2px solid #222822;
}

.shipping-fields label {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 66px;
  border-bottom: 2px dashed #77796f;
}

.shipping-fields label > span,
.cover-field > span,
.label-options label > span,
.label-options legend {
  color: #30372f;
  font-family: var(--utility);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.address-sheet input,
.address-sheet textarea,
.address-sheet select {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #30362f;
  font-family: var(--utility);
  font-weight: 650;
}

.address-sheet input {
  min-height: 48px;
  padding: 8px 5px;
  font-size: 1rem;
}

.address-sheet input::placeholder,
.address-sheet textarea::placeholder {
  color: #777b73;
  opacity: 1;
}

.address-sheet input:focus,
.address-sheet textarea:focus,
.address-sheet select:focus {
  box-shadow: inset 0 -3px 0 rgba(182, 79, 71, 0.35);
}

.cover-field {
  z-index: 1;
  margin-top: 17px;
  gap: 6px;
}

.address-sheet .cover-field textarea {
  min-height: 84px;
  padding: 10px 11px 20px;
  border: 1.5px solid #77796f;
  background: rgba(255, 255, 255, 0.45);
  font-size: 0.83rem;
}

.address-sheet .cover-field small {
  right: 7px;
  bottom: 5px;
  background: var(--paper);
  font-family: var(--utility);
}

.label-options {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: end;
  gap: 16px;
  margin-top: 15px;
}

.label-options > label {
  display: grid;
  gap: 5px;
}

.address-sheet select {
  min-height: 42px;
  padding: 7px 28px 7px 8px;
  border: 1.5px solid #77796f;
  font-size: 0.74rem;
}

.address-sheet .theme-fieldset {
  min-width: 0;
}

.address-sheet .theme-picker {
  min-height: 42px;
  gap: 7px;
  padding: 7px 8px;
  border: 1.5px solid #77796f;
  border-radius: 0;
  background: transparent;
}

.address-sheet .theme-dot {
  width: 22px;
  height: 22px;
  border-color: var(--paper);
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -999px;
}

.address-sheet .privacy-note {
  position: relative;
  z-index: 1;
  margin-top: 17px;
  padding-top: 13px;
  border-top: 1.5px dashed #77796f;
}

.address-sheet .privacy-note p {
  color: #4f554e;
  font-family: var(--utility);
  font-size: 0.69rem;
  line-height: 1.55;
}

.address-sheet .privacy-icon {
  width: 25px;
  height: 25px;
  border-radius: 2px;
  background: var(--mint);
  font-size: 0.8rem;
}

.parcel-barcode {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 17px -22px -18px;
  padding: 11px 24px 9px;
  border-top: 3px solid #222822;
  background: #f3f2ec;
}

.parcel-barcode i {
  display: block;
  width: min(260px, 82%);
  height: 37px;
  background: repeating-linear-gradient(90deg, #161a16 0 2px, transparent 2px 4px, #161a16 4px 8px, transparent 8px 11px, #161a16 11px 12px, transparent 12px 16px);
}

.parcel-barcode span {
  font-family: var(--utility);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.goodie-sheet {
  position: relative;
  overflow: hidden;
  padding: 27px 28px 34px;
  transform: rotate(0.16deg);
}

.goodie-sheet::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(83, 75, 61, 0.024) 1px, transparent 1px),
    radial-gradient(circle, rgba(77, 68, 55, 0.06) 0 0.7px, transparent 0.9px);
  background-size: 100% 26px, 12px 13px;
  content: "";
  pointer-events: none;
}

.goodie-sheet > * {
  position: relative;
  z-index: 1;
}

.packing-masthead {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 0 9px;
  border-bottom: 1.5px solid #7d8078;
  text-align: left;
}

.packing-masthead img {
  width: 39px;
  height: 39px;
  padding: 4px;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--berry);
  image-rendering: pixelated;
  transform: rotate(-2deg);
}

.packing-masthead p,
.packing-masthead h1,
.packing-masthead small {
  margin: 0;
  font-family: var(--utility);
}

.packing-masthead p {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.packing-masthead h1 {
  max-width: none;
  margin-top: 2px;
  color: #2b332d;
  font-size: clamp(1.14rem, 1.9vw, 1.4rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.1;
  text-transform: uppercase;
}

.packing-masthead small {
  display: block;
  margin-top: 5px;
  color: #555b52;
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.paper-intro {
  max-width: 440px;
  margin: 8px auto 0;
  color: #4e554e;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 560;
  line-height: 1.5;
  text-align: center;
}

.tuck-stamp {
  width: fit-content;
  margin: 9px auto 9px;
  padding: 6px 13px 4px;
  border: 4px double var(--berry);
  border-radius: 3px;
  color: var(--berry-dark);
  font-family: var(--utility);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(2deg);
}

.goodie-sheet .maker-ribbon {
  display: flex;
  min-height: 0;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  padding: 5px 0;
  border-block: 1px dashed #9d9c92;
  background: transparent;
}

.goodie-sheet .maker-ribbon span {
  min-width: 0;
  padding: 0;
  color: #5b6159;
  font-family: var(--utility);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.goodie-sheet .maker-ribbon span.is-current {
  color: var(--berry-dark);
}

.goodie-sheet .maker-ribbon b {
  display: inline;
  width: auto;
  height: auto;
  margin-right: 2px;
  border: 0;
  font-size: inherit;
}

.goodie-sheet .maker-ribbon .draft-status {
  margin-left: auto;
  padding: 0;
  color: var(--mint-dark);
}

.goodie-sheet .maker-ribbon .draft-status::before {
  width: 5px;
  height: 5px;
  margin-right: 5px;
  background: var(--mint-dark);
}

.goodie-heading {
  display: flex;
  align-items: end;
  gap: 12px;
  margin: 0 0 5px;
}

.goodie-heading .utility-label {
  display: none;
}

.goodie-heading h2 {
  margin: 0;
  font-family: var(--utility);
  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.goodie-sheet .item-count {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid #8c8d84;
  border-radius: 2px;
  background: transparent;
  font-size: 0.65rem;
  font-weight: 800;
}

.goodie-table-head,
.tray-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 2px;
  border-top: 2px solid #3a423c;
  border-bottom: 1px dashed #8c8d84;
  color: #555b55;
  font-family: var(--utility);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.goodie-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 18px;
}

.goodie-picker button {
  display: grid;
  min-height: 132px;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 11px 8px 10px;
  border: 0;
  border-bottom: 1px dashed #c0bdb2;
  border-radius: 0;
  background: transparent;
  color: #283229;
  text-align: center;
  transition: background 140ms ease, transform 140ms ease;
}

.goodie-picker button:nth-child(odd) {
  border-right: 1px dashed #c0bdb2;
}

.goodie-picker button:nth-child(3n + 1):hover,
.goodie-picker button:nth-child(3n + 2):hover,
.goodie-picker button:nth-child(3n):hover,
.goodie-picker button:hover:not(:disabled) {
  border-color: #a3a097;
  background: rgba(229, 201, 95, 0.12);
  transform: translateY(-2px) rotate(-0.35deg);
}

.goodie-picker button:disabled {
  opacity: 0.38;
}

.goodie-picker button svg {
  width: 74px;
  height: 74px;
  margin-bottom: 7px;
  filter: sepia(0.08) saturate(1.08) contrast(1.04) drop-shadow(3px 4px 0 rgba(91, 61, 31, 0.17));
  transition: transform 140ms ease;
}

.goodie-picker button:nth-child(even) svg {
  transform: rotate(1.8deg);
}

.goodie-picker button:nth-child(odd) svg {
  transform: rotate(-1.3deg);
}

.goodie-picker button:hover svg {
  transform: rotate(0) scale(1.04);
}

.goodie-picker b {
  font-family: var(--utility);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.goodie-picker small {
  color: #5d635b;
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 600;
}

.tray-heading {
  border-bottom-style: solid;
}

.tray-heading b {
  font: inherit;
}

.inside-tray {
  min-height: 126px;
  margin-top: 0;
  padding: 7px 0 12px;
  border: 0;
  border-bottom: 2px solid #3a423c;
  border-radius: 0;
  background: transparent;
}

.finishing-details {
  margin-top: 16px;
  padding: 14px 0 16px;
  border-block: 1px dashed #9d9c92;
}

.finishing-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.finishing-heading p,
.finishing-heading h3 {
  margin: 0;
  font-family: var(--utility);
  text-transform: uppercase;
}

.finishing-heading p {
  color: #71756e;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.finishing-heading h3 {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.finishing-details .cover-field {
  margin-top: 10px;
  gap: 5px;
}

.finishing-details .cover-field > span,
.finishing-details .label-options label > span,
.finishing-details .theme-fieldset legend {
  color: #555b55;
  font-family: var(--utility);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.finishing-details textarea,
.finishing-details select {
  border: 1.5px solid #77796f;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: none;
  font-family: var(--utility);
  color: #30362f;
  font-size: 0.78rem;
  font-weight: 650;
}

.finishing-details textarea {
  min-height: 78px;
  padding: 9px 10px 20px;
}

.finishing-details select {
  min-height: 42px;
  padding: 7px 28px 7px 8px;
}

.finishing-details .field-block small {
  right: 6px;
  bottom: 4px;
  background: var(--paper);
  font-family: var(--utility);
}

.finishing-details .label-options {
  margin-top: 11px;
}

.finishing-details .theme-fieldset {
  align-self: end;
}

.finishing-details .theme-picker {
  min-height: 42px;
  padding: 7px 8px;
  border: 1.5px solid #77796f;
  border-radius: 0;
  background: transparent;
}

.finishing-details .theme-dot {
  width: 22px;
  height: 22px;
  border-color: var(--paper);
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -999px;
}

.empty-tray {
  min-height: 106px;
  gap: 10px;
  color: #555c54;
  font-family: var(--utility);
  text-align: center;
}

.empty-tray > div {
  max-width: 300px;
}

.empty-tray strong {
  font-size: 0.74rem;
}

.empty-tray p {
  margin-top: 5px;
  font-family: var(--body);
  font-size: 0.7rem;
  line-height: 1.45;
}

.empty-scribble {
  color: var(--berry);
  font-family: var(--utility);
  font-size: 1.3rem;
}

.packed-list {
  gap: 0;
}

.packed-item {
  min-height: 54px;
  padding: 7px 2px;
  border: 0;
  border-bottom: 1px dashed #b8b6aa;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}

.packed-goodie-icon {
  width: 27px;
  height: 27px;
  margin-right: 3px;
}

.packed-copy strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--utility);
  font-size: 0.76rem;
}

.packed-copy small,
.packed-index {
  font-family: var(--utility);
  font-size: 0.64rem;
}

.packed-actions button {
  border-radius: 2px;
}

.packed-actions button:hover:not(:disabled) {
  background: #ece7dc;
}

.thank-you-line {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 17px 0 5px;
  font-family: var(--utility);
  text-transform: uppercase;
}

.thank-you-line strong {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
}

.thank-you-line span {
  color: #555c54;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
}

.goodie-sheet .maker-actions {
  grid-template-columns: 0.7fr 1.3fr;
  gap: 8px;
  padding-top: 13px;
}

.goodie-sheet .button {
  min-height: 48px;
  padding: 10px 13px;
  border: 2px solid #303831;
  border-radius: 2px;
  font-family: var(--utility);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.goodie-sheet .button-primary {
  background: var(--berry);
  box-shadow: 3px 3px 0 #303831;
  color: #fffdf7;
}

.goodie-sheet .button-quiet {
  background: var(--paper);
}

.maker-error {
  font-family: var(--utility);
  font-size: 0.7rem;
}

.promise-strip,
.story-section,
.ideas-section,
.alternative-section,
.faq-section,
.sent-hugs-section,
.final-cta {
  width: min(1040px, calc(100% - 36px));
  margin-inline: auto;
  border-radius: 2px;
  box-shadow: 0 14px 28px rgba(66, 45, 23, 0.16);
}

.promise-strip {
  margin-top: 0;
  border: 3px solid #303831;
  background: #f0dfac;
  transform: rotate(-0.25deg);
}

.promise-strip p {
  border-color: #303831;
}

.promise-strip span,
.promise-strip strong,
.promise-strip small,
.eyebrow,
.utility-label {
  font-family: var(--utility);
}

.story-section,
.ideas-section,
.alternative-section,
.faq-section,
.sent-hugs-section,
.final-cta {
  margin-top: 34px;
  border: 1px solid rgba(48, 56, 49, 0.45);
  background: rgba(255, 253, 247, 0.94);
}

.story-section h2,
.ideas-section h2,
.alternative-section h2,
.faq-section h2,
.sent-hugs-section h2,
.final-cta h2 {
  font-size: clamp(1.8rem, 3.8vw, 3.4rem);
}

.steps-grid article,
.faq-list details {
  border-color: rgba(48, 56, 49, 0.5);
}

.idea-card {
  border: 2px solid #303831;
  border-radius: 2px;
  box-shadow: 5px 6px 0 rgba(48, 56, 49, 0.8);
}

.alternative-section {
  background: #e5ece4;
}

.alternative-mark {
  border-radius: 2px;
  background: #b64f47;
  box-shadow: 8px 8px 0 #303831;
}

.faq-list summary span {
  border-color: #303831;
  border-radius: 2px;
}

.final-cta {
  background: #f0dfac;
}

.final-cta .button-primary {
  border-radius: 2px;
  background: #303831;
  box-shadow: 4px 4px 0 #b64f47;
}

.site-footer {
  width: min(1040px, calc(100% - 36px));
  margin: 42px auto 0;
  border-top: 2px solid rgba(48, 56, 49, 0.75);
  background: transparent;
  color: #302b24;
}

dialog {
  border: 2px solid #303831;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 10px 12px 0 #303831, 0 24px 80px rgba(43, 35, 28, 0.3);
}

dialog::backdrop {
  background: rgba(43, 35, 28, 0.7);
  backdrop-filter: blur(2px);
}

.dialog-shell,
.share-shell,
.preview-shell {
  border: 3px solid #303831;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 10px 12px 0 rgba(48, 56, 49, 0.75);
}

.dialog-shell .button,
.share-shell .button {
  border-radius: 2px;
}

.dialog-shell .button-primary,
.share-shell .button-primary {
  background: var(--berry);
  box-shadow: 3px 3px 0 #303831;
}

.support-card,
.ready-note,
.share-result {
  border-radius: 2px;
}

.support-card h3 {
  margin-bottom: 14px;
  font-family: var(--utility);
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.postage-delivery-note {
  border: 2px dashed var(--ink);
  background: var(--paper);
  box-shadow: 3px 3px 0 rgba(48, 56, 49, 0.26);
  transform: rotate(-0.35deg);
}

.postage-delivery-note small {
  color: var(--berry-dark);
  font-size: 0.64rem;
}

.postage-delivery-note strong {
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.88rem;
}

/* The recipient opens a real parcel silhouette before seeing the packing slip. */
.recipient-stage {
  --box: #a96e38;
  --box-light: #ce9859;
  --box-mid: #b77b3f;
  --box-dark: #5d3a20;
  --box-edge: #734821;
  --label-paper: #f8f3e6;
  --label-edge: #c7bda6;
  --packing-tape: #d7b574;
  --packing-tape-edge: #93663b;
  --wrap-ink: var(--ink);
  min-height: 680px;
  background-color: var(--lavender);
  background-image:
    radial-gradient(circle at 16% 18%, rgba(91, 56, 24, 0.12) 0 1px, transparent 1.6px),
    radial-gradient(circle at 78% 71%, rgba(255, 255, 255, 0.14) 0 1px, transparent 1.5px),
    linear-gradient(96deg, rgba(95, 58, 28, 0.045), transparent 31%, rgba(255, 249, 231, 0.08) 67%, transparent);
  background-size: 19px 21px, 27px 25px, 100% 100%;
}

.recipient-stage.theme-sunny { --wrap: #d7a42f; --wrap-soft: #f1d989; --wrap-ink: var(--ink); }
.recipient-stage.theme-mint { --wrap: #557762; --wrap-soft: #c8d8c4; --wrap-ink: var(--ink); }
.recipient-stage.theme-night { --wrap: var(--postal-blue); --wrap-soft: #becfd1; --wrap-ink: var(--ink); }

.sealed-note.sealed-parcel {
  display: grid;
  min-height: 520px;
  place-items: center;
  overflow: visible;
  padding: 68px 38px 42px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  perspective: 1100px;
  transition: opacity 180ms ease 580ms, transform 220ms ease 560ms;
}

.sealed-note.sealed-parcel::before,
.sealed-note.sealed-parcel::after {
  display: none;
}

.parcel-box {
  position: relative;
  width: min(650px, 100%);
  min-height: 510px;
  filter: drop-shadow(0 24px 22px rgba(60, 38, 21, 0.26)) drop-shadow(11px 15px 2px rgba(65, 39, 20, 0.18));
  transform: rotate(-0.25deg);
  transform-style: preserve-3d;
}

.parcel-ground-shadow {
  position: absolute;
  z-index: 0;
  right: -4%;
  bottom: -31px;
  left: 3%;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(55, 34, 19, 0.42), rgba(55, 34, 19, 0.13) 46%, transparent 72%);
  filter: blur(9px);
  pointer-events: none;
  transform: rotate(1.2deg);
  transition: opacity 220ms ease 260ms, transform 420ms ease 120ms;
}

.parcel-box::after {
  position: absolute;
  z-index: 1;
  top: 100px;
  left: 50%;
  width: max-content;
  color: var(--paper);
  content: "✉   ♥   ♫";
  font-family: var(--display);
  font-size: clamp(1.7rem, 5vw, 2.8rem);
  letter-spacing: 0.22em;
  opacity: 0;
  text-shadow: 3px 3px 0 var(--berry-dark);
  transform: translate(-50%, 28px) rotate(-2deg);
  transition: opacity 160ms ease 330ms, transform 360ms cubic-bezier(.15,.8,.25,1) 300ms;
}

.parcel-front {
  position: absolute;
  z-index: 3;
  inset: 91px 0 8px;
  min-height: 411px;
  overflow: visible;
  border: 1px solid var(--box-dark);
  border-radius: 1px 1px 3px 3px;
  background:
    linear-gradient(102deg, rgba(255, 226, 174, 0.2), transparent 22%, rgba(82, 46, 21, 0.07) 58%, rgba(255, 225, 169, 0.13) 82%, transparent),
    repeating-linear-gradient(3deg, rgba(72, 42, 20, 0.045) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 18% 23%, rgba(82, 46, 20, 0.16) 0 0.8px, transparent 1.3px),
    radial-gradient(ellipse at 73% 66%, rgba(255, 235, 195, 0.2) 0 0.9px, transparent 1.4px),
    linear-gradient(92deg, var(--box-light), var(--box-mid) 62%, #a76a35);
  background-size: 100% 100%, 100% 9px, 17px 19px, 23px 21px, 100% 100%;
  box-shadow:
    inset 0 12px 15px rgba(83, 48, 22, 0.22),
    inset 9px 0 12px rgba(255, 226, 172, 0.08),
    inset -10px 0 15px rgba(65, 37, 18, 0.13),
    inset 0 -5px 0 rgba(77, 44, 21, 0.19);
  transition: transform 380ms cubic-bezier(.2,.75,.25,1) 150ms;
}

.parcel-front::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(61, 36, 18, 0.14), transparent 2.8%, transparent 97%, rgba(60, 34, 17, 0.19)),
    repeating-linear-gradient(91deg, transparent 0 28px, rgba(77, 44, 20, 0.028) 29px 30px);
  content: "";
  mix-blend-mode: multiply;
  pointer-events: none;
}

.parcel-front::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(90deg, rgba(255, 227, 179, 0.08), rgba(75, 42, 19, 0.24), rgba(255, 225, 176, 0.09));
  box-shadow: 1px 0 rgba(255, 231, 190, 0.12);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.parcel-side {
  position: absolute;
  z-index: 2;
  top: 101px;
  right: -29px;
  bottom: 17px;
  width: 31px;
  border: 1px solid #58351d;
  background:
    repeating-linear-gradient(4deg, rgba(55, 31, 15, 0.12) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, #8c552d, #68401f 88%);
  box-shadow: inset 5px 0 8px rgba(255, 213, 154, 0.08), inset -4px 0 7px rgba(48, 26, 12, 0.22);
  clip-path: polygon(0 0, 100% 4%, 100% 95%, 0 100%);
  pointer-events: none;
  transform: skewY(6deg);
  transform-origin: left top;
  transition: transform 380ms cubic-bezier(.2,.75,.25,1) 150ms;
}

.parcel-bottom-edge {
  position: absolute;
  z-index: 2;
  right: 1px;
  bottom: -3px;
  left: 8px;
  height: 17px;
  border: 1px solid #5a351b;
  background:
    repeating-linear-gradient(90deg, rgba(57, 32, 15, 0.42) 0 1px, rgba(188, 126, 67, 0.26) 1px 4px),
    #81502a;
  box-shadow: inset 0 4px 5px rgba(46, 25, 11, 0.2);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 2% 100%);
  pointer-events: none;
  transition: transform 380ms cubic-bezier(.2,.75,.25,1) 150ms;
}

.parcel-lid {
  position: absolute;
  z-index: 4;
  top: 7px;
  right: -4px;
  left: -4px;
  height: 119px;
  border: 1px solid var(--box-dark);
  background:
    linear-gradient(106deg, rgba(255, 225, 174, 0.22), transparent 31%, rgba(76, 43, 20, 0.09) 69%, rgba(255, 226, 177, 0.12)),
    repeating-linear-gradient(2deg, rgba(68, 38, 18, 0.05) 0 1px, transparent 1px 5px),
    radial-gradient(circle, rgba(75, 43, 21, 0.14) 0 0.75px, transparent 1.2px),
    linear-gradient(180deg, #d9a365, var(--box));
  background-size: 100% 100%, 100% 8px, 15px 17px, 100% 100%;
  box-shadow: inset 0 -13px 13px rgba(82, 46, 20, 0.14), 0 7px 7px rgba(66, 38, 19, 0.2);
  clip-path: polygon(5.5% 0, 94.5% 0, 100% 100%, 0 100%);
  transform: rotateX(-5deg) translateZ(8px);
  transform-origin: 50% 6%;
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(.24,.78,.2,1), filter 300ms ease;
}

.parcel-lid::before,
.parcel-lid::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border-bottom: 1px solid rgba(91, 54, 25, 0.25);
  content: "";
  pointer-events: none;
}

.parcel-lid::before {
  left: 0;
  border-right: 1px dashed rgba(91, 54, 25, 0.38);
  background: linear-gradient(100deg, rgba(255, 232, 193, 0.08), transparent 60%);
}

.parcel-lid::after {
  right: 0;
  background: linear-gradient(260deg, rgba(75, 41, 18, 0.08), transparent 60%);
}

.parcel-lid-edge {
  position: absolute;
  z-index: 1;
  right: 3%;
  bottom: -8px;
  left: 3%;
  height: 9px;
  border: 1px solid #68401f;
  background:
    repeating-linear-gradient(90deg, rgba(63, 36, 17, 0.44) 0 1px, transparent 1px 4px),
    #9c6132;
  box-shadow: inset 0 3px 3px rgba(49, 27, 12, 0.18), 0 2px 2px rgba(56, 31, 14, 0.15);
  pointer-events: none;
}

.parcel-tape {
  position: absolute;
  z-index: 2;
  top: -3px;
  bottom: -3px;
  left: 50%;
  display: grid;
  width: 112px;
  place-items: center;
  border-inline: 1px solid var(--packing-tape-edge);
  background:
    linear-gradient(90deg, rgba(255, 248, 219, 0.21), transparent 12% 74%, rgba(87, 53, 27, 0.1) 88%, rgba(255, 245, 211, 0.15)),
    repeating-linear-gradient(1deg, rgba(107, 72, 39, 0.07) 0 1px, transparent 1px 5px),
    color-mix(in srgb, var(--wrap) 44%, var(--packing-tape));
  box-shadow: inset 8px 0 8px rgba(255, 238, 198, 0.1), inset -5px 0 6px rgba(76, 43, 23, 0.08), 0 1px 2px rgba(66, 38, 19, 0.18);
  color: #3b2921;
  font-family: var(--utility);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-orientation: mixed;
  text-transform: uppercase;
  transform: translateX(-50%) rotate(-0.8deg);
  transition: opacity 180ms ease 110ms, transform 320ms cubic-bezier(.2,.8,.2,1) 70ms;
  writing-mode: vertical-rl;
}

.parcel-tape::before,
.parcel-tape::after {
  position: absolute;
  right: -2px;
  left: -2px;
  height: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(81, 49, 26, 0.33) 4px 5px);
  content: "";
}

.parcel-tape::before { top: 0; }
.parcel-tape::after { bottom: 0; }

.parcel-front-tape {
  position: absolute;
  z-index: 2;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 112px;
  border-inline: 1px solid rgba(105, 69, 36, 0.44);
  background:
    linear-gradient(90deg, rgba(255, 246, 213, 0.18), transparent 14% 76%, rgba(77, 45, 23, 0.08)),
    repeating-linear-gradient(1deg, rgba(106, 72, 40, 0.06) 0 1px, transparent 1px 5px),
    color-mix(in srgb, var(--wrap) 38%, var(--packing-tape));
  box-shadow: inset 7px 0 7px rgba(255, 240, 205, 0.08), inset -5px 0 6px rgba(67, 38, 19, 0.07);
  opacity: 0.88;
  pointer-events: none;
  transform: translateX(-50%) rotate(-0.25deg);
  transition: opacity 160ms ease 100ms;
}

.parcel-receiver-label {
  position: relative;
  z-index: 4;
  width: min(76%, 482px);
  min-height: 304px;
  margin: 31px auto 0;
  padding: 17px clamp(20px, 5vw, 34px) 20px;
  border: 1px solid var(--label-edge);
  border-radius: 1px 2px 2px 1px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.68), transparent 22%, rgba(104, 94, 74, 0.06) 51%, rgba(255, 255, 255, 0.4) 73%, transparent),
    repeating-linear-gradient(2deg, rgba(76, 72, 61, 0.026) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 21% 28%, rgba(91, 82, 65, 0.09) 0 0.65px, transparent 1px),
    var(--label-paper);
  background-size: 100% 100%, 100% 9px, 15px 17px, 100% 100%;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72),
    2px 4px 3px rgba(65, 40, 22, 0.23),
    8px 13px 19px rgba(58, 35, 19, 0.18),
    -2px 2px 4px rgba(65, 40, 22, 0.08);
  text-align: left;
  transform: rotate(-0.8deg) translateZ(5px);
  transition: transform 420ms ease 120ms;
}

.parcel-receiver-label::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(97deg, transparent 0 47.8%, rgba(99, 89, 70, 0.08) 48.3%, rgba(255, 255, 255, 0.28) 49%, transparent 50.2%),
    linear-gradient(176deg, transparent 0 79%, rgba(94, 84, 66, 0.055) 79.6%, rgba(255, 255, 255, 0.24) 80.2%, transparent 81%);
  content: "";
  pointer-events: none;
}

.parcel-receiver-label::after {
  position: absolute;
  z-index: 2;
  right: -1px;
  bottom: -1px;
  width: 29px;
  height: 25px;
  background: linear-gradient(135deg, transparent 0 47%, #d8cfbc 49% 58%, #fffdf6 61% 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  content: "";
  filter: drop-shadow(-2px -1px 1px rgba(71, 48, 28, 0.18));
  pointer-events: none;
}

.parcel-receiver-label > * {
  position: relative;
  z-index: 1;
}

.parcel-label-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(48, 56, 49, 0.58);
  color: #42483f;
  font-family: var(--utility);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.parcel-label-head span:last-child {
  flex: 0 0 auto;
  padding: 3px 5px 2px;
  border: 1px solid currentColor;
}

.sealed-parcel .to-line {
  margin-bottom: 0;
  color: #3f463e;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.sealed-parcel h2 {
  max-width: 430px;
  margin: 12px 0 9px;
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 0.98;
}

.sealed-parcel .cover-message {
  max-width: 430px;
  margin: 0 0 14px;
  color: #4d554d;
  font-family: var(--body);
  font-size: 0.98rem;
  line-height: 1.5;
}

.sealed-parcel .open-package {
  width: 100%;
  min-height: 46px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--berry);
  box-shadow: 0 2px 0 var(--ink), 0 5px 8px rgba(47, 38, 29, 0.13);
  color: var(--paper);
  font-family: var(--utility);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.parcel-label-barcode {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto;
  align-items: end;
  gap: 11px;
  margin-top: 15px;
  padding-top: 9px;
  border-top: 1px solid rgba(48, 56, 49, 0.42);
}

.parcel-label-barcode i {
  display: block;
  height: 27px;
  background: repeating-linear-gradient(90deg, #282c27 0 1px, transparent 1px 3px, #282c27 3px 6px, transparent 6px 8px, #282c27 8px 9px, transparent 9px 13px);
  opacity: 0.86;
}

.parcel-label-barcode small {
  max-width: 104px;
  color: #4c5149;
  font-family: var(--utility);
  font-size: 0.49rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-align: right;
}

.parcel-private-stamp {
  position: absolute;
  z-index: 5;
  right: 18px;
  bottom: 15px;
  padding: 5px 9px 4px;
  border: 4px double var(--berry-dark);
  color: color-mix(in srgb, var(--berry-dark) 84%, transparent);
  font-family: var(--utility);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0.4px 0 currentColor;
  transform: rotate(-4deg);
}

.parcel-handling-marks {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 25px;
  color: rgba(57, 44, 31, 0.78);
  font-family: var(--utility);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.sealed-note.sealed-parcel.is-opening {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
}

.sealed-parcel.is-opening .parcel-tape {
  opacity: 0;
  transform: translate(-50%, -48px) rotate(-5deg);
}

.sealed-parcel.is-opening .parcel-lid {
  filter: brightness(0.86);
  transform: rotateX(142deg) translateY(-8px);
}

.sealed-parcel.is-opening .parcel-front {
  transform: translateY(15px);
}

.sealed-parcel.is-opening .parcel-side {
  transform: translateY(15px) skewY(6deg);
}

.sealed-parcel.is-opening .parcel-bottom-edge {
  transform: translateY(15px);
}

.sealed-parcel.is-opening .parcel-front-tape {
  opacity: 0;
}

.sealed-parcel.is-opening .parcel-receiver-label {
  transform: translateY(6px) rotate(0.6deg);
}

.sealed-parcel.is-opening .parcel-box::after {
  opacity: 1;
  transform: translate(-50%, -54px) rotate(1deg);
}

.sealed-parcel.is-opening .parcel-ground-shadow {
  opacity: 0.5;
  transform: translateY(10px) scaleX(0.92) rotate(1.2deg);
}

.recipient-header {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 2px;
  background:
    linear-gradient(rgba(66, 63, 52, 0.035) 1px, transparent 1px),
    var(--paper);
  background-size: 100% 26px, 100% 100%;
  box-shadow: 8px 9px 0 rgba(73, 45, 23, 0.36);
}

.recipient-header::before {
  display: block;
  width: fit-content;
  margin: -18px auto 20px;
  padding: 6px 12px 5px;
  border: 4px double var(--berry);
  color: var(--berry-dark);
  content: "PACKING SLIP · OPENED WITH CARE";
  font-family: var(--utility);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  transform: rotate(-1deg);
}

.recipient-header .to-line {
  color: #4e554d;
  font-size: 0.72rem;
}

.recipient-header h2 {
  font-size: clamp(2rem, 6vw, 3.8rem);
}

.recipient-header p {
  color: #4e554d;
  font-family: var(--body);
  font-size: 1rem;
}

.recipient-goodie {
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 5px 6px 0 rgba(73, 45, 23, 0.34);
}

.goodie-cover {
  background:
    radial-gradient(circle, rgba(49, 50, 43, 0.075) 0 0.8px, transparent 1px),
    var(--ticket, var(--sky));
  background-size: 12px 13px, 100% 100%;
}

.goodie-number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  font-size: 0.69rem;
}

.recipient-goodie-icon {
  width: 44px;
  height: 44px;
  filter: sepia(0.06) saturate(1.05) drop-shadow(2px 3px 0 rgba(66, 44, 24, 0.17));
}

.goodie-cover strong {
  font-family: var(--display);
  font-size: 1.2rem;
}

.goodie-cover small {
  color: #50574f;
  font-family: var(--utility);
  font-size: 0.65rem;
  font-weight: 750;
  text-transform: uppercase;
}

.open-goodie {
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--utility);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.goodie-content-inner {
  font-family: var(--body);
}

.recipient-signoff {
  font-size: 0.76rem;
}

.package-corner-brand {
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--berry);
  font-family: var(--utility);
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.package-corner-brand img {
  image-rendering: pixelated;
}

.recipient-goodie-icon {
  width: 44px;
  height: 44px;
}

.goodie-cover {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}

@media (max-width: 900px) {
  .site-header {
    width: min(720px, calc(100% - 28px));
  }

  .paypal-sandbox-banner {
    width: min(720px, calc(100% - 28px));
  }

  .maker-hero {
    width: min(720px, calc(100% - 28px));
    margin-top: 14px;
  }

  .maker-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .address-sheet {
    position: relative;
    top: auto;
    width: min(100%, 560px);
    justify-self: center;
  }

  .goodie-sheet {
    width: min(100%, 600px);
    justify-self: center;
  }

  .promise-strip,
  .story-section,
  .ideas-section,
  .alternative-section,
  .faq-section,
  .sent-hugs-section,
  .final-cta,
  .site-footer {
    width: min(720px, calc(100% - 28px));
  }
}

@media (max-width: 620px) {
  html {
    scroll-padding-top: 18px;
  }

  .site-header {
    grid-template-columns: 1fr auto;
    margin-top: 5px;
  }

  .paypal-sandbox-banner {
    width: min(100% - 18px, 520px);
    margin-block: 5px 12px;
    padding-inline: 10px;
    font-size: 0.64rem;
  }

  .site-nav {
    display: none;
  }

  .site-header > .button {
    display: inline-flex;
  }

  .site-header .brand-copy small {
    display: none;
  }

  .maker-hero {
    width: min(100% - 18px, 520px);
    padding-bottom: 48px;
  }

  .address-sheet {
    padding-inline: 16px;
    border-width: 3px;
    transform: none;
  }

  .shipping-label-head {
    margin-inline: -16px;
    padding-left: 14px;
  }

  .shipping-label-head strong {
    font-size: clamp(1.05rem, 6vw, 1.45rem);
  }

  .delivery-stamp {
    top: 82px;
    right: 11px;
    padding: 5px 7px 4px;
  }

  .shipping-heading {
    max-width: 60%;
  }

  .shipping-fields label {
    grid-template-columns: 91px minmax(0, 1fr);
  }

  .label-options {
    grid-template-columns: 1fr;
  }

  .parcel-barcode {
    margin-inline: -16px;
  }

  .goodie-sheet {
    padding: 21px 16px 26px;
    transform: none;
  }

  .packing-masthead {
    align-items: start;
  }

  .paper-intro {
    font-size: 0.64rem;
  }

  .goodie-sheet .maker-ribbon {
    flex-wrap: wrap;
  }

  .goodie-sheet .maker-ribbon .draft-status {
    width: 100%;
    margin-left: 0;
  }

  .goodie-picker button {
    min-height: 124px;
    padding-inline: 4px;
  }

  .goodie-picker button svg {
    width: 60px;
    height: 60px;
  }

  .goodie-sheet .maker-actions {
    position: sticky;
    z-index: 5;
    bottom: 0;
    grid-template-columns: 0.72fr 1.28fr;
    margin-inline: -8px;
    padding: 10px 8px 8px;
    background: rgba(255, 253, 247, 0.96);
    box-shadow: 0 -8px 16px rgba(70, 55, 36, 0.08);
    backdrop-filter: blur(8px);
  }

  .goodie-sheet .button {
    min-height: 50px;
    padding-inline: 8px;
    font-size: 0.61rem;
  }

  .goodie-cover {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 10px;
  }

  .goodie-cover .open-goodie {
    grid-column: 2 / -1;
  }

  .recipient-stage {
    min-height: 100dvh;
    padding: 40px 10px 54px;
  }

  .sealed-note.sealed-parcel {
    min-height: 555px;
    padding: 36px 14px 28px 0;
  }

  .parcel-box {
    min-height: 485px;
    filter: drop-shadow(0 17px 15px rgba(60, 38, 21, 0.24)) drop-shadow(7px 9px 1px rgba(71, 43, 22, 0.18));
  }

  .parcel-lid {
    height: 100px;
  }

  .parcel-front {
    inset-block-start: 75px;
    min-height: 397px;
  }

  .parcel-side {
    top: 83px;
    right: -14px;
    bottom: 17px;
    width: 16px;
  }

  .parcel-bottom-edge {
    height: 13px;
  }

  .parcel-tape {
    width: 88px;
    font-size: 0.59rem;
  }

  .parcel-front-tape {
    width: 88px;
  }

  .parcel-receiver-label {
    width: 88%;
    min-height: 270px;
    margin-top: 22px;
    padding: 14px 16px 16px;
  }

  .parcel-label-head {
    font-size: 0.49rem;
  }

  .parcel-label-barcode {
    gap: 7px;
  }

  .sealed-parcel h2 {
    font-size: clamp(1.75rem, 8.8vw, 2.4rem);
  }

  .sealed-parcel .cover-message {
    font-size: 0.92rem;
  }

  .parcel-private-stamp {
    right: 14px;
    bottom: 17px;
    font-size: 0.53rem;
  }

  .parcel-handling-marks {
    bottom: 18px;
    left: 15px;
    font-size: 0.5rem;
  }

  .recipient-header {
    padding: 32px 20px;
  }

  .recipient-header::before {
    margin-top: -14px;
    font-size: 0.56rem;
  }

  .promise-strip {
    grid-template-columns: 1fr 1fr;
  }

  .promise-strip p:nth-child(2) {
    border-right: 0;
  }

  .promise-strip p:nth-child(-n + 2) {
    border-bottom: 1.5px solid #303831;
  }
}

@media (max-width: 390px) {
  .site-header .brand-copy strong {
    font-size: 0.82rem;
  }

  .site-header .button-ink {
    min-height: 38px;
    padding-inline: 11px;
    font-size: 0.64rem;
  }

  .delivery-stamp {
    transform: rotate(3deg) scale(0.9);
    transform-origin: top right;
  }

  .shipping-fields label {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .address-sheet input {
    font-size: 0.9rem;
  }

  .goodie-picker button {
    min-height: 126px;
  }

  .goodie-picker button svg {
    width: 57px;
    height: 57px;
  }

  .parcel-private-stamp {
    display: none;
  }

  .parcel-handling-marks {
    right: 0;
    left: 0;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .goodie-picker button,
  .goodie-picker button svg,
  .sealed-note.sealed-parcel,
  .parcel-box::after,
  .parcel-ground-shadow,
  .parcel-side,
  .parcel-bottom-edge,
  .parcel-front,
  .parcel-lid,
  .parcel-lid-edge,
  .parcel-tape,
  .parcel-front-tape,
  .parcel-receiver-label {
    transition: none;
  }
}