/* Memory Bears — "Stitched Letter" stylesheet
   Layout: single centered column, dashed "stitch" borders as the recurring motif,
   handwritten accents used sparingly for warmth. */

:root {
  --paper: #FBF8F3;      /* page ground */
  --card: #FFFFFF;       /* raised surfaces */
  --blush: #F5EDF0;      /* alternate section ground */
  --photo: #F0E6EA;      /* image backdrop */
  --stitch: #D9C7CF;     /* dashed borders */
  --ink: #3B2A33;        /* main text */
  --ink-soft: #5E4B55;   /* body copy */
  --ink-faint: #7A6570;  /* captions */
  --accent: #8A4A6C;     /* plum: buttons, script accents */
  --accent-dark: #6B3A55;
  --night: #3B2A33;      /* contact band */
  --night-deep: #2E2128; /* footer */
  --on-night: #FBF8F3;
  --on-night-soft: #CDBBC4;
  --rose: #E9C9D9;

  --font-script: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --font-body: "Lora", Georgia, "Times New Roman", serif;

  --wrap: 1120px;
  --gutter: 24px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.7;
}

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

a { color: var(--accent-dark); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

h1, h2, h3 { font-weight: 500; line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.9rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 720px; margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.center { text-align: center; align-items: center; }
.soft { color: var(--ink-soft); }
.script { font-family: var(--font-script); font-weight: 500; color: var(--accent); font-size: 1.75rem; line-height: 1.2; }
.script-lg { font-size: 2.1rem; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: var(--card); padding: 8px 14px; z-index: 10; }

/* ---------- Header ---------- */
.site-header { border-bottom: 2px dashed var(--stitch); padding-block: 18px; }
.site-header .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.logo { font-family: var(--font-script); font-weight: 600; font-size: 2.25rem; line-height: 1; color: var(--ink); text-decoration: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 1rem; }
.site-nav a { text-decoration: none; padding-block: 10px; display: inline-block; }
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-style: dashed; text-decoration-color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  padding: 14px 32px; min-height: 48px; border-radius: 12px; border: 0;
  background: var(--accent); color: #FFFFFF; font: inherit; font-weight: 500;
}
.btn:hover { background: var(--accent-dark); color: #FFFFFF; }
.btn-ghost { background: transparent; color: var(--accent-dark); border: 2px dashed var(--accent); }
.btn-ghost:hover { background: var(--card); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Sections ---------- */
.section { padding-block: 88px; }
.section-blush { background: var(--blush); }
.section-card { background: var(--card); border-block: 2px dashed var(--stitch); }
.section-head { margin-bottom: 40px; }

/* ---------- Hero ---------- */
.hero { padding-block: 72px 88px; }
.hero-card {
  max-width: 900px; margin-inline: auto; background: var(--card);
  border: 2px dashed var(--accent); border-radius: 32px; padding: 56px 28px;
}
.hero-card .lead { max-width: 560px; }
.page-hero { padding-block: 64px 48px; }

/* ---------- Two-column feature ---------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 56px; align-items: center; }
.split > * { min-width: 0; }
.framed { border-radius: 24px; border: 2px dashed var(--stitch); overflow: hidden; background: var(--photo); }
.framed img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Gallery ---------- */
.polaroids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 28px; }
.polaroid {
  margin: 0; background: var(--card); padding: 14px 14px 16px; border-radius: 6px;
  box-shadow: 0 2px 10px rgba(59, 42, 51, 0.08); display: flex; flex-direction: column; gap: 10px;
}
/* height:auto lets aspect-ratio win over the height attribute in the HTML */
.polaroid img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; background: var(--photo); }
.polaroid figcaption { font-family: var(--font-script); font-size: 1.5rem; line-height: 1.2; text-align: center; }
.polaroid figcaption small { display: block; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink-faint); margin-top: 4px; }
.polaroid:nth-child(4n+1) { transform: rotate(-1deg); }
.polaroid:nth-child(4n+3) { transform: rotate(0.8deg); }
@media (prefers-reduced-motion: no-preference) {
  .polaroid { transition: transform 0.25s ease; }
  .polaroid:hover { transform: rotate(0) translateY(-4px); }
}

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; }
.step { border: 2px dashed var(--stitch); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 10px; background: var(--paper); }
.step .num { font-family: var(--font-script); font-size: 2.4rem; line-height: 1; color: var(--accent); }
.step p { font-size: 1rem; color: var(--ink-soft); }

/* ---------- Letter ---------- */
.letter .signature { font-family: var(--font-script); font-size: 2.1rem; line-height: 1.2; }
.portrait { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; background: var(--photo); border: 2px dashed var(--stitch); }

/* ---------- Quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px; }
.quote { margin: 0; background: var(--blush); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.quote blockquote { margin: 0; font-style: italic; font-size: 1.2rem; }
.quote figcaption { font-family: var(--font-script); font-size: 1.5rem; color: var(--accent); }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 14px; }
.faq details { background: var(--card); border: 2px dashed var(--stitch); border-radius: 16px; padding: 4px 24px; }
.faq summary { cursor: pointer; font-weight: 500; padding-block: 16px; list-style-position: outside; }
.faq details[open] summary { color: var(--accent-dark); }
.faq details p { padding-bottom: 18px; color: var(--ink-soft); }

/* ---------- Contact band & form ---------- */
.band { background: var(--night); color: var(--on-night); }
.band .script { color: var(--rose); }
.band a { color: var(--rose); }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 1rem; }
.field input, .field textarea, .field select {
  font: inherit; padding: 14px; border-radius: 10px; border: 2px solid var(--stitch);
  background: var(--card); color: var(--ink); width: 100%;
}
.band .field input, .band .field textarea, .band .field select { border-color: transparent; }
.hint { font-size: 0.9rem; color: var(--ink-faint); }
.band .hint { color: var(--on-night-soft); }
.form-status { grid-column: 1 / -1; text-align: center; min-height: 1.7em; }
.form .btn { justify-self: center; grid-column: 1 / -1; }
.band .btn { background: var(--rose); color: var(--ink); }
.band .btn:hover { background: var(--card); color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--night-deep); color: var(--on-night-soft); padding-block: 32px; font-size: 0.95rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--on-night); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }