/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body, h1, h2, h3, h4, p, figure, blockquote, ol, ul, dl, dd, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
a { color: inherit; }

/* ---------------------------------------------------------------- page canvas */
body {
  min-height: 100vh;
  background-color: var(--paper);
  background-image: var(--tex-paper);
  background-size: 384px 384px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
.js:not(.intro-done) body { overflow: hidden; }

::selection { background: rgba(162, 139, 185, 0.35); color: var(--ink); }

/* ---------------------------------------------------------------- accessibility helpers */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 1000;
  padding: 10px 16px; background: var(--green-deep); color: var(--paper-light);
  font-size: var(--fs-small); text-decoration: none; border-radius: 3px;
  transform: translateY(-160%); transition: transform var(--t-micro) var(--ease-out);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.noscript { max-width: 40ch; margin: 40px auto; padding: 0 var(--gutter); text-align: center; font-family: var(--font-serif); font-size: 1.25rem; }

/* ---------------------------------------------------------------- type */
.section-head { position: relative; z-index: 2; max-width: 680px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 0.9em;
  font-family: var(--font-sans); font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep);
}
.kicker::before, .kicker::after { content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0.55; }
.section-title {
  margin-top: 0.35em;
  font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h2);
  line-height: 1.04; letter-spacing: -0.005em; color: var(--green-deep);
  text-wrap: balance;
}
.section-title em {
  font-family: var(--font-script); font-style: normal; font-weight: 400;
  font-size: 1.28em; line-height: 0.8; color: var(--lilac-deep);
  margin-inline: 0.04em; position: relative; top: 0.06em;
}
.section-intro {
  max-width: 46ch; margin: 1em auto 0;
  font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  line-height: 1.45; color: var(--ink-soft); text-wrap: pretty;
}
.ornament { width: 168px; height: 20px; margin: 18px auto 0; color: var(--gold); }
.icon { width: 1.15em; height: 1.15em; flex: none; }

.is-placeholder { color: var(--ink-soft); font-style: italic; }
.preview-tag, .demo-banner {
  display: inline-block; margin-top: 18px; padding: 6px 12px;
  font-size: 0.8125rem; line-height: 1.4; color: var(--lilac-deep);
  background: rgba(205, 187, 220, 0.28); border: 1px dashed rgba(111, 90, 146, 0.45); border-radius: 3px;
}
.demo-banner { display: block; margin: 0 0 20px; }
.demo-banner strong { font-weight: 600; }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: transparent; --btn-fg: var(--green-deep);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; padding: 0.85em 1.7em;
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.2; text-decoration: none; text-align: center;
  color: var(--btn-fg); background: var(--btn-bg);
  border-radius: 3px 6px 4px 7px / 7px 4px 6px 3px;
  transition: transform var(--t-micro) var(--ease-out), box-shadow var(--t-micro) var(--ease-out), background-color var(--t-micro), color var(--t-micro);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn--primary {
  --btn-bg: var(--green-deep); --btn-fg: #FBF8EF;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.06));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 4px var(--green-deep), inset 0 0 0 5px rgba(216, 197, 151, 0.55), 0 8px 18px -10px rgba(61, 73, 53, 0.7);
}
.btn--primary:hover { --btn-bg: #3F4C37; transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 4px #3F4C37, inset 0 0 0 5px rgba(216, 197, 151, 0.7), 0 12px 22px -10px rgba(61, 73, 53, 0.75); }
.btn--ghost {
  --btn-bg: rgba(252, 249, 241, 0.72);
  box-shadow: inset 0 0 0 1px rgba(73, 87, 64, 0.7), inset 0 0 0 4px rgba(252, 249, 241, 0.72), inset 0 0 0 5px rgba(182, 154, 98, 0.5);
}
.btn--ghost:hover { --btn-bg: rgba(252, 249, 241, 0.98); transform: translateY(-1px); }
.btn--text {
  min-height: 44px; padding: 0.6em 0.4em; letter-spacing: 0.12em;
  text-decoration: underline; text-decoration-color: rgba(182, 154, 98, 0.7); text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.btn--text:hover { color: var(--pink-deep); }
.btn--small { min-height: 44px; padding: 0.7em 1.25em; font-size: 0.75rem; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------- sections */
.quiet, .scene { position: relative; padding: var(--section-pad) var(--gutter); }
.scene { isolation: isolate; }
.scene__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* ---------------------------------------------------------------- watercolor layers */
.art { position: absolute; max-width: none; height: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.wash {
  position: absolute; display: block; pointer-events: none;
  background: var(--wash-color);
  -webkit-mask: var(--wash-mask, url('../assets/textures/wash-1.webp')) center / 100% 100% no-repeat;
          mask: var(--wash-mask, url('../assets/textures/wash-1.webp')) center / 100% 100% no-repeat;
  opacity: var(--wash-opacity, 0.55);
}
.wash--gold  { --wash-color: radial-gradient(60% 70% at 40% 45%, #E8CF92, #EEDDB0 60%, #F0E3BE); }
.wash--lilac { --wash-color: radial-gradient(60% 70% at 55% 40%, #C3ADDA, #D6C7E6 70%); --wash-mask: url('../assets/textures/wash-2.webp'); --wash-opacity: 0.42; }
.wash--green { --wash-color: radial-gradient(60% 70% at 50% 50%, #B5C59A, #CCD8B6 70%); --wash-mask: url('../assets/textures/wash-3.webp'); --wash-opacity: 0.38; }
.wash--pink  { --wash-color: radial-gradient(60% 70% at 50% 50%, #E9AFC2, #F1CCD7 70%); --wash-mask: url('../assets/textures/wash-2.webp'); --wash-opacity: 0.4; }
.wash--blue  { --wash-color: radial-gradient(60% 70% at 50% 50%, #9FD0CF, #C3E2E0 70%); --wash-mask: url('../assets/textures/wash-3.webp'); --wash-opacity: 0.4; }

/* ---------------------------------------------------------------- paper stationery */
.paper {
  position: relative;
  background: var(--tex-sheet-wide) center / 100% 100% no-repeat;
  /* the sheet texture carries ~8% of shadow + deckle on each side, so content sits well inside it */
  padding: clamp(40px, 9%, 84px) clamp(34px, 12%, 104px);
}
.paper--tall { background-image: var(--tex-sheet-tall); padding: clamp(46px, 11%, 90px) clamp(34px, 13%, 92px); }
.paper--square { background-image: var(--tex-sheet-square); }

/* photo print */
.print {
  position: relative; margin: 0; padding: 9px 9px 12px;
  background: #FFFDF8;
  box-shadow: var(--shadow-print);
  border-radius: 1px;
}
.print img { width: 100%; height: 100%; object-fit: cover; background: var(--photo-color, var(--paper-deep)); }
.print--taped::before {
  content: ''; position: absolute; z-index: 2; left: 50%; top: -12px; width: 88px; height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(90deg, rgba(205, 187, 220, 0.75), rgba(220, 205, 230, 0.6));
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0), repeating-linear-gradient(180deg, #000 0 3px, rgba(0,0,0,.75) 3px 5px);
  box-shadow: 0 1px 2px rgba(61, 73, 53, 0.12);
}
.photo-placeholder {
  display: grid; place-items: center; align-content: center; gap: 10px; height: 100%; min-height: 160px;
  padding: 18px; text-align: center;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(233, 219, 185, 0.65), transparent 72%),
    var(--paper-light);
  border: 1px dashed rgba(182, 154, 98, 0.6);
  font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; line-height: 1.3; color: var(--ink-soft);
}
.photo-placeholder img { position: static; width: 46px; height: auto; object-fit: contain; background: none; opacity: 0.9; }

/* ---------------------------------------------------------------- forms */
.form-title { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.15; color: var(--green-deep); margin-bottom: 14px; }
.field { display: grid; gap: 6px; margin-bottom: 20px; }
.field label, .field legend { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }
.field__hint { font-weight: 400; color: var(--ink-soft); }
.field input[type='text'], .field input[type='number'], .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.45; color: var(--ink);
  background: rgba(255, 253, 247, 0.85);
  border: 1px solid rgba(96, 120, 77, 0.38); border-bottom-width: 2px; border-radius: 3px;
  transition: border-color var(--t-micro), box-shadow var(--t-micro), background-color var(--t-micro);
}
.field textarea { resize: vertical; min-height: 112px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); background: #FFFEFA; box-shadow: 0 0 0 3px rgba(182, 154, 98, 0.35); }
.field [aria-invalid='true'] { border-color: var(--pink-deep) !important; }
.field__error { min-height: 0; font-size: 0.8125rem; color: var(--pink-deep); }
.field__error:empty { display: none; }
.field__meta { font-size: 0.75rem; color: var(--ink-soft); text-align: right; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form-status { margin-top: 14px; font-size: 0.9375rem; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--pink-deep); }
.form-status.is-success { color: var(--green-deep); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.nowrap { white-space: nowrap; }