/* ==========================================================================
   start-with-photo.css — Start With a Photo (intake/conversion page)
   + Thank You page
   Hinsch Portrait Studio

   Self-contained per project convention (see about.css / how-it-works.css
   header notes): duplicates shared design tokens + the established light-
   chrome header/footer rather than importing a shared base stylesheet, so
   this file can be understood and edited in isolation. Header/footer rules
   below are copied verbatim from about.css (source of truth) rather than
   recreated from memory.
   ========================================================================== */

:root {
  --color-brown-dark: #3a2f24;
  --color-brown-darker: #241c15;
  --color-olive-brown: #423a2c;
  --color-cream: #ede4d3;
  --color-cream-alt: #f2ead9;
  --color-black-strip: #191510;
  --color-red-seal: #7c1c20;
  --color-gold: #a9822f;
  --color-gold-light: #cdb173;
  --color-ivory: #f7f2e7;
  --color-text: #2c2419;
  --color-text-muted: #5a5041;

  --font-display: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  --font-body: 'EB Garamond', Garamond, Georgia, serif;
  --font-label: 'Barlow Condensed', sans-serif;

  --max-width: 1360px;
}

/* ---------- box-sizing reset ----------
   NOTE: none of the other page stylesheets (about.css, gallery.css, etc.)
   define this either, but this page is the first to combine 100%-width
   flex/grid children with padding at narrow viewports, which exposed the
   gap (content-box padding added on top of width, overflowing the
   container). Scoped here since this file only loads on this page and
   its thank-you counterpart, so it can't regress anything else. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ---------- base ---------- */
.swp-page {
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.swp-page .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.swp-page img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.swp-page :focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

/* ==========================================================================
   HEADER (light "editorial" chrome — copied verbatim from about.css)
   ========================================================================== */

.story-page-header {
  background: var(--color-cream);
  border-bottom: 1px solid rgba(43, 28, 20, 0.15);
  position: relative;
  z-index: 40;
}

.story-page-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 40px;
  gap: 24px;
}

.story-page-header .wordmark-block { display: flex; flex-direction: column; gap: 6px; }

.story-page-header .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}

.story-page-header .wordmark-flourish { width: 150px; height: 10px; color: var(--color-gold); }
.story-page-header .wordmark-flourish svg { width: 100%; height: 100%; display: block; }

.story-page-header__nav { display: flex; }

.story-page-header__nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
}

.story-page-header__nav a {
  font-family: var(--font-label);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.story-page-header__nav a:hover { color: var(--color-gold); }

.story-page-header__nav li.is-active a {
  color: var(--color-gold);
  border-bottom-color: var(--color-gold);
}

.story-page-header__menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-text);
  border-radius: 2px;
  width: 42px;
  height: 38px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.story-page-header__menu-toggle span { display: block; width: 20px; height: 1.5px; background: var(--color-text); }

.story-page-header__mobile-nav {
  display: none;
  background: var(--color-cream);
  border-top: 1px solid rgba(43, 28, 20, 0.15);
}

.story-page-header__mobile-nav.is-open { display: block; }

.story-page-header__mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 8px 24px 20px;
  display: flex;
  flex-direction: column;
}

.story-page-header__mobile-nav a {
  display: block;
  padding: 12px 0;
  font-family: var(--font-label);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 1px solid rgba(43, 28, 20, 0.08);
}

.story-page-header__mobile-nav li.is-active a { color: var(--color-gold); }

/* ==========================================================================
   HERO / INTRO
   ========================================================================== */

.swp-hero {
  display: grid;
  grid-template-columns: minmax(320px, 42%) 1fr;
  align-items: center;
  gap: 56px;
  max-width: var(--max-width);
  margin: 0 auto;
  /* Was relying on a nested .container div with `display:contents` for
     horizontal padding — display:contents removes the box (and its
     padding) entirely, leaving this section with zero left/right padding
     and the copy jammed against the viewport edge. Fixed by giving the
     section its own padding/max-width/centering directly, matching the
     .container convention used everywhere else on this page. */
  padding: 68px 40px 72px;
}

.swp-hero__copy { max-width: 46ch; }

.swp-hero__eyebrow {
  font-family: var(--font-label);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0 0 16px;
}

.swp-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 4.6vw, 3.8rem);
  line-height: 1.08;
  color: var(--color-text);
  margin: 0 0 18px;
}

.swp-hero__subhead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.4;
  color: var(--color-gold);
  margin: 0 0 24px;
}

.swp-hero__intro p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0 0 18px;
}

.swp-hero__reassure {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--color-text-muted);
  margin: 22px 0 30px;
}

.swp-hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; }

.swp-hero__image {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(43, 28, 20, 0.12);
  background: var(--color-cream-alt);
}

.swp-hero__image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- buttons (page-scoped; light chrome has no shared solid gold
   button yet — see about.css / how-it-works.css, which only define scoped
   outline variants within their own CTA bands) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  font-family: var(--font-label);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 32px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--gold {
  background: var(--color-gold);
  color: var(--color-ivory);
  border-color: var(--color-gold);
}
.btn--gold:hover { background: var(--color-gold-light); border-color: var(--color-gold-light); color: var(--color-brown-darker); }

.btn--gold-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-gold);
}
.btn--gold-outline:hover { background: var(--color-gold); color: var(--color-ivory); }

.btn--large { padding: 19px 44px; font-size: 1rem; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ==========================================================================
   FIVE-STEP PROCESS STRIP
   ========================================================================== */

.swp-process {
  background: var(--color-cream-alt);
  border-top: 1px solid rgba(43, 28, 20, 0.12);
  border-bottom: 1px solid rgba(43, 28, 20, 0.12);
  padding: 56px 0 60px;
}

.swp-process__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  text-align: center;
  color: var(--color-text);
  margin: 0 0 40px;
}

.swp-process__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.swp-process__item {
  padding: 0 22px;
  text-align: center;
  border-left: 1px solid var(--color-gold-light);
}

.swp-process__item:first-child { border-left: none; }

.swp-process__icon { width: 52px; height: 52px; margin: 0 auto 18px; }
.swp-process__icon img { width: 100%; height: 100%; object-fit: contain; }

.swp-process__step {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-gold);
  margin: 0 0 8px;
}

.swp-process__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-text);
  margin: 0 0 8px;
}

.swp-process__copy {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

/* ==========================================================================
   FORM
   ========================================================================== */

.swp-form { padding: 76px 0 40px; }

.swp-form__intro {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}

.swp-form__intro h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 2.8vw, 2.3rem);
  color: var(--color-text);
  margin: 0 0 14px;
}

.swp-form__intro p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.swp-section {
  max-width: 880px;
  margin: 0 auto 64px;
  padding-top: 44px;
  border-top: 1px solid rgba(43, 28, 20, 0.14);
}

.swp-section:first-of-type { border-top: none; padding-top: 0; }

/* Brief highlight when a style is carried in from gifts.html via
   ?medium=... (see js/start-with-photo.js) — draws the eye to Section 7
   without requiring the visitor to scroll and hunt for it. */
.swp-section--highlight {
  animation: swp-section-highlight 2.2s ease;
}
@keyframes swp-section-highlight {
  0% { background: rgba(169, 130, 47, 0.14); }
  100% { background: transparent; }
}

.swp-section__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
}

.swp-section__number {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.1rem;
  color: var(--color-gold-light);
  line-height: 1;
}

.swp-section__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  color: var(--color-text);
  margin: 0;
}

.swp-section__copy {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0 0 28px;
  max-width: 68ch;
}

/* ---------- form field basics ---------- */

.swp-field { margin-bottom: 26px; }

.swp-field label,
.swp-field__label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 10px;
}

.swp-field__hint {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 6px 0 0;
}

.swp-field input[type="text"],
.swp-field input[type="email"],
.swp-field input[type="tel"],
.swp-field input[type="date"],
.swp-field select,
.swp-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-ivory);
  border: 1px solid var(--color-gold-light);
  padding: 14px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.swp-field input:focus,
.swp-field select:focus,
.swp-field textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(169, 130, 47, 0.15);
}

.swp-field textarea { resize: vertical; min-height: 120px; }
.swp-field textarea.swp-field--tall { min-height: 190px; }

.swp-field .swp-charcount {
  display: block;
  text-align: right;
  font-family: var(--font-label);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 6px;
}

.swp-field--error input,
.swp-field--error textarea,
.swp-field--error select { border-color: var(--color-red-seal); }

.swp-field__error-msg {
  display: none;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-red-seal);
  margin-top: 6px;
}

.swp-field--error .swp-field__error-msg { display: block; }

.swp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.swp-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px 26px; }

.swp-checkbox-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
}

.swp-checkbox-inline input { width: 18px; height: 18px; accent-color: var(--color-gold); }

/* ---------- selectable option cards (subject / medium / occasion / changes) ---------- */

.swp-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.swp-option-card {
  position: relative;
  display: block;
  background: var(--color-ivory);
  border: 1px solid var(--color-gold-light);
  padding: 16px 20px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.swp-option-card input { position: absolute; opacity: 0; width: 0; height: 0; }

.swp-option-card__label {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  padding-left: 30px;
  position: relative;
  display: block;
}

.swp-option-card__label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-gold);
  background: var(--color-ivory);
}

.swp-option-card input[type="radio"] + .swp-option-card__label::before { border-radius: 50%; }
.swp-option-card input[type="checkbox"] + .swp-option-card__label::before { border-radius: 2px; }

.swp-option-card input:checked + .swp-option-card__label::before {
  background: var(--color-gold);
  box-shadow: inset 0 0 0 3px var(--color-ivory);
}

.swp-option-card:has(input:checked) {
  border-color: var(--color-gold);
  background: #fbf7ee;
}

.swp-option-card:has(input:focus-visible) { outline: 2px solid var(--color-gold); outline-offset: 2px; }

.swp-option-card--reveal {
  margin-top: 12px;
  display: none;
}
.swp-option-card--reveal.is-visible { display: block; }

/* ---------- upload area ---------- */

.swp-upload {
  display: block;
  position: relative;
  border: 2px dashed var(--color-gold-light);
  background: var(--color-ivory);
  padding: 44px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.swp-upload:hover,
.swp-upload.is-dragover { border-color: var(--color-gold); background: #fbf7ee; }

.swp-upload__icon { width: 44px; height: 44px; margin: 0 auto 14px; color: var(--color-gold); }
.swp-upload__icon svg { width: 100%; height: 100%; }

.swp-upload__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 0 0 8px;
}

.swp-upload__sub {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0 0 18px;
}

.swp-upload input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }

.swp-upload__browse {
  display: inline-flex;
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  border: 1px solid var(--color-gold);
  padding: 12px 26px;
  background: transparent;
}

.swp-upload__browse:hover { background: var(--color-gold); color: var(--color-ivory); }

.swp-upload__limit {
  display: block;
  margin-top: 14px;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.swp-upload__msg {
  display: none;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-red-seal);
}
.swp-upload__msg.is-visible { display: block; }

.swp-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 22px;
}

.swp-thumb {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--color-gold-light);
  overflow: hidden;
  background: var(--color-cream-alt);
}

.swp-thumb img { width: 100%; height: 100%; object-fit: cover; }

.swp-thumb__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(36, 28, 21, 0.75);
  color: var(--color-ivory);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
.swp-thumb__remove:hover { background: var(--color-red-seal); }

.swp-thumb__name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(36, 28, 21, 0.72);
  color: var(--color-ivory);
  font-family: var(--font-label);
  font-size: 0.68rem;
  padding: 4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swp-thumb.is-primary { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.swp-thumb__primary-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--color-gold);
  color: var(--color-ivory);
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  display: none;
}
.swp-thumb.is-primary .swp-thumb__primary-badge { display: block; }

.swp-primary-select { display: none; margin-top: 26px; }
.swp-primary-select.is-visible { display: block; }

/* ---------- reference-use radio cards with images ---------- */

.swp-ref-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}

.swp-ref-card {
  position: relative;
  display: block;
  cursor: pointer;
  border: 1px solid var(--color-gold-light);
  background: var(--color-ivory);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.swp-ref-card input { position: absolute; opacity: 0; width: 0; height: 0; }

.swp-ref-card:has(input:checked) { border-color: var(--color-gold); box-shadow: 0 0 0 2px var(--color-gold); }
.swp-ref-card:has(input:focus-visible) { outline: 2px solid var(--color-gold); outline-offset: 2px; }

.swp-ref-card__image { aspect-ratio: 16/11; overflow: hidden; background: var(--color-cream-alt); }
.swp-ref-card__image img { width: 100%; height: 100%; object-fit: cover; }

.swp-ref-card__body { padding: 20px 22px 22px; }

.swp-ref-card__tag {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  padding: 3px 9px;
  margin-bottom: 10px;
}

.swp-ref-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-text);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.swp-ref-card__title::before {
  content: '';
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-ivory);
}

.swp-ref-card input:checked ~ .swp-ref-card__body .swp-ref-card__title::before {
  background: var(--color-gold);
  box-shadow: inset 0 0 0 3px var(--color-ivory);
}

.swp-ref-card__copy {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

.swp-ref-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 16px 0 0;
}

/* ---------- checkbox lists ---------- */

.swp-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-bottom: 8px;
}

/* ==========================================================================
   REASSURANCE PANEL + SUBMIT
   ========================================================================== */

.swp-reassure {
  max-width: 820px;
  margin: 8px auto 40px;
  background: var(--color-cream-alt);
  border: 1px solid var(--color-gold-light);
  padding: 40px 44px;
  text-align: center;
}

.swp-reassure__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--color-text);
  margin: 0 0 14px;
}

.swp-reassure__list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 34px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 0;
}

.swp-reassure__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text);
}

.swp-reassure__list svg { width: 18px; height: 18px; color: var(--color-gold); flex-shrink: 0; }

.swp-reassure__copy {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0 0 6px;
}

.swp-reassure__bold {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--color-text);
  margin: 0;
}

.swp-submit-wrap { text-align: center; padding: 8px 0 40px; }

.swp-submit-status {
  display: none;
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.swp-submit-status.is-visible { display: block; }
.swp-submit-status.is-error { color: var(--color-red-seal); }

.swp-privacy {
  max-width: 60ch;
  margin: 20px auto 0;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.6;
}

.swp-privacy a { color: var(--color-gold); border-bottom: 1px solid var(--color-gold-light); }

/* honeypot (accessibly hidden) */
.swp-hp { position: absolute; left: -9999px; top: -9999px; }

/* ==========================================================================
   FOOTER (light chrome — copied verbatim from about.css)
   ========================================================================== */

.story-footer { background: var(--color-brown-darker); color: var(--color-ivory); padding: 60px 0 0; }

.story-footer__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding-bottom: 40px;
}

.story-footer__brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--color-gold-light);
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}

.story-footer__brand-line {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(247, 242, 231, 0.78);
  margin: 0;
  max-width: 30ch;
}

.story-footer__monogram { display: flex; justify-content: center; }
.story-footer__monogram img { width: 90px; height: 90px; object-fit: contain; }

.story-footer__connect { text-align: right; }

.story-footer__connect-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 242, 231, 0.65);
  margin-bottom: 14px;
}

.story-footer__connect-icons { display: flex; gap: 12px; justify-content: flex-end; }

.story-footer__connect-icons a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-light);
  transition: background 0.2s ease, color 0.2s ease;
}

.story-footer__connect-icons a:hover { background: var(--color-gold); color: var(--color-brown-darker); }
.story-footer__connect-icons svg { width: 16px; height: 16px; }

.story-footer__divider { border: none; border-top: 1px solid rgba(247, 242, 231, 0.15); margin: 0; }

.story-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(247, 242, 231, 0.6);
}

.story-footer__legal-links { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
.story-footer__legal-links a:hover { color: var(--color-gold-light); }

/* ==========================================================================
   THANK YOU PAGE
   ========================================================================== */

.ty-hero {
  padding: 120px 0;
  text-align: center;
  background: var(--color-cream);
}

.ty-hero__icon { width: 64px; height: 64px; margin: 0 auto 28px; color: var(--color-gold); }
.ty-hero__icon svg { width: 100%; height: 100%; }

.ty-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  color: var(--color-text);
  margin: 0 0 14px;
}

.ty-hero__subhead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--color-gold);
  margin: 0 auto 24px;
  max-width: 40ch;
}

.ty-hero__copy {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 52ch;
  margin: 0 auto 12px;
}

.ty-hero__bold {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 auto 40px;
}

.ty-hero__ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Nav collapses to the mobile menu earlier than other breakpoints because
   the 7-item nav (after adding "What Can Be Created?") needs more horizontal
   room than the site's standard 1080px tablet breakpoint provides. Verified
   empirically against the widest label in the set. Isolated in its own query
   so it doesn't shift any other 1080px layout rules earlier than intended. */
@media (max-width: 1900px) {
  .story-page-header__nav { display: none; }
  .story-page-header__menu-toggle { display: flex; }
}

@media (max-width: 1080px) {
  .swp-hero { grid-template-columns: 1fr; gap: 36px; padding: 48px 40px 52px; }
  .swp-hero__copy { max-width: none; }
  .swp-hero__image { height: 320px; order: -1; }

  .swp-process__grid { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .swp-process__item:nth-child(3n+1) { border-left: none; }
  .swp-process__item:not(:nth-child(3n+1)) { border-left: 1px solid var(--color-gold-light); }

  .story-footer__top { grid-template-columns: 1fr; text-align: center; gap: 20px; }
  .story-footer__connect { text-align: center; }
  .story-footer__connect-icons { justify-content: center; }
  .story-footer__monogram { order: -1; }
}

@media (max-width: 860px) {
  .swp-page .container { padding: 0 24px; }
  .swp-hero { padding-left: 24px; padding-right: 24px; }

  .swp-options,
  .swp-grid-2,
  .swp-grid-3,
  .swp-check-grid,
  .swp-ref-choices { grid-template-columns: 1fr; }

  .swp-thumbs { grid-template-columns: repeat(3, 1fr); }

  .swp-process__grid { grid-template-columns: 1fr 1fr; }
  .swp-process__item:nth-child(3n+1) { border-left: 1px solid var(--color-gold-light); }
  .swp-process__item:nth-child(2n+1) { border-left: none; }

  .swp-reassure { padding: 32px 24px; }
  .swp-reassure__list { flex-direction: column; align-items: center; gap: 12px; }
}

@media (max-width: 640px) {
  .story-page-header .header-inner { padding: 20px 24px; }
  .story-page-header .wordmark { font-size: 1.3rem; }
  .story-page-header .wordmark-flourish { width: 100px; }
}

@media (max-width: 380px) {
  .story-page-header .wordmark { font-size: 1.05rem; }
  .story-page-header .wordmark-flourish { display: none; }
  .story-page-header .header-inner { padding: 16px 14px; gap: 12px; }
}

@media (max-width: 640px) {
  .swp-hero__ctas { flex-direction: column; }
  .swp-hero__ctas .btn { width: 100%; min-width: 0; }

  .swp-process__grid { grid-template-columns: 1fr; }
  .swp-process__item { border-left: none !important; border-top: 1px solid var(--color-gold-light); padding: 26px 12px 0; }
  .swp-process__item:first-child { border-top: none; padding-top: 0; }

  .swp-section { padding-top: 32px; margin-bottom: 48px; }
  .swp-section__head { flex-direction: column; gap: 6px; }

  .swp-thumbs { grid-template-columns: repeat(2, 1fr); }

  .swp-submit-wrap .btn { width: 100%; }
}