:root {
  --color-canvas: #f7f0e8;
  --color-canvas-soft: #fbf7f1;
  --color-surface: #fffaf5;
  --color-surface-blush: #f4dfdf;
  --color-surface-rose: #ead0d1;
  --color-primary: #a95663;
  --color-primary-hover: #914451;
  --color-primary-pressed: #7c3845;
  --color-primary-subtle: #f0d8da;
  --color-leaf: #70816b;
  --color-leaf-deep: #4d604a;
  --color-leaf-soft: #c8d0bf;
  --color-text: #362d2b;
  --color-text-soft: #6b5b57;
  --color-border: #d9c1bd;
  --color-border-strong: #b9908d;
  --color-focus: #345d48;
  --color-success: #426a4a;
  --color-error: #9b3f43;
  --shadow-soft: 0 24px 70px rgba(92, 60, 58, 0.13);
  --shadow-card: 0 12px 36px rgba(92, 60, 58, 0.11);
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--color-text); background: var(--color-canvas); font-family: var(--font-body); line-height: 1.65; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
a { color: inherit; }
button, textarea, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: .75rem 1rem; background: var(--color-text); color: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.scene { min-height: 100svh; position: relative; display: grid; place-items: center; padding: clamp(5rem, 10vw, 9rem) max(1.25rem, 6vw); }
.eyebrow { margin: 0 0 1.25rem; color: var(--color-primary); font-size: .73rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
h1, h2 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 7vw, 6.7rem); }
h2 { font-size: clamp(2.2rem, 5vw, 5rem); }

.hero { min-height: 100svh; overflow: hidden; text-align: center; background: var(--color-canvas-soft); }
.hero::before, .hero::after { content: ""; position: absolute; border: 1px solid var(--color-border); border-radius: 50%; opacity: .55; }
.hero::before { width: min(76vw, 1000px); aspect-ratio: 1.75; }
.hero::after { width: min(63vw, 820px); aspect-ratio: 1.45; }
.hero__content { max-width: 1080px; position: relative; z-index: 2; }
.hero h1 { margin: 0; }
.hero__lead { max-width: 610px; margin: 2rem auto 0; color: var(--color-text-soft); font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.scroll-cue { position: absolute; bottom: 2.2rem; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .2rem; color: var(--color-text-soft); font-size: .78rem; letter-spacing: .1em; text-decoration: none; animation: cue 2.2s ease-in-out infinite; }
.botanical-corner { position: absolute; width: 360px; height: 320px; left: -4rem; top: -2rem; transform: rotate(-8deg); z-index: 2; }
.stem { position: absolute; width: 260px; height: 170px; border: 3px solid var(--color-leaf); border-color: transparent transparent var(--color-leaf) transparent; border-radius: 50%; transform: rotate(35deg); top: 40px; left: 20px; }
.leaf, .decor-leaf { position: absolute; width: 65px; height: 30px; background: var(--color-leaf-soft); border-radius: 100% 0 100% 0; }
.leaf--a { top: 105px; left: 145px; transform: rotate(35deg); }.leaf--b { top: 175px; left: 230px; transform: scaleX(-1) rotate(18deg); }
.rose { width: 95px; aspect-ratio: 1; display: block; border-radius: 48% 52% 45% 55%; background: radial-gradient(circle at 46% 48%, var(--color-primary) 0 8%, var(--color-surface-rose) 9% 20%, var(--color-primary) 21% 29%, var(--color-surface-blush) 30% 47%, var(--color-primary-subtle) 48% 64%, transparent 65%), conic-gradient(from 20deg, var(--color-primary-subtle), var(--color-surface-rose), var(--color-primary-subtle)); box-shadow: 0 10px 28px rgba(126, 63, 73, .13); }
.rose--large { position: absolute; left: 55px; top: 55px; }
.blossom { display: block; width: 42px; aspect-ratio: 1; background: radial-gradient(circle, #ba7c81 0 15%, transparent 16%), radial-gradient(ellipse at 50% 15%, var(--color-surface-blush) 0 28%, transparent 30%), radial-gradient(ellipse at 85% 50%, var(--color-surface-blush) 0 28%, transparent 30%), radial-gradient(ellipse at 50% 85%, var(--color-surface-blush) 0 28%, transparent 30%), radial-gradient(ellipse at 15% 50%, var(--color-surface-blush) 0 28%, transparent 30%); }
.blossom--small { position: absolute; left: 260px; top: 190px; }

.stories { position: relative; }
.photo-story { min-height: 120svh; position: relative; display: grid; align-items: center; grid-template-columns: minmax(300px, 560px) minmax(260px, 480px); justify-content: center; gap: clamp(2rem, 8vw, 8rem); padding: clamp(6rem, 12vw, 12rem) max(1.25rem, 6vw); }
.photo-story:nth-child(odd) { background: var(--color-canvas); }.photo-story:nth-child(even) { background: var(--color-surface-blush); }
.photo-story__media { position: relative; z-index: 2; width: 100%; }
.photo-story__media::before { content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 1px solid var(--color-border-strong); z-index: -1; }
.photo-story__note { position: relative; z-index: 3; max-width: 470px; padding: clamp(1.7rem, 4vw, 3rem); background: rgba(255, 250, 245, .94); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
.photo-story__number { display: block; margin-bottom: 1.2rem; color: var(--color-leaf-deep); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.photo-story__note p { margin: 0 0 1.6rem; font-family: var(--font-display); font-size: clamp(1.5rem, 2.7vw, 2.25rem); line-height: 1.3; }
.photo-story__note a { color: var(--color-primary-pressed); font-size: .83rem; font-weight: 600; text-underline-offset: .3em; }
.photo-story--reverse .photo-story__media { order: 2; }.photo-story--reverse .photo-story__note { order: 1; }
.photo-story--center { grid-template-columns: minmax(320px, 650px); text-align: center; }
.photo-story--center .photo-story__note { margin: -3.5rem auto 0; }.photo-story--center .photo-story__media { z-index: 1; }
.photo-story--wide { grid-template-columns: minmax(320px, 760px); }
.photo-story--overlap { grid-template-columns: minmax(340px, 620px) minmax(260px, 420px); gap: 0; }
.photo-story--overlap .photo-story__note { margin-left: -3rem; }.photo-story--overlap.photo-story--reverse .photo-story__note { margin: 0 -3rem 0 0; }
.photo-story--final { grid-template-columns: minmax(320px, 620px); text-align: center; background: var(--color-surface-rose); }
.photo-story--final .photo-story__note { margin: 2rem auto 0; }
.photo-story__decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.decor-leaf { width: 150px; height: 70px; right: 4%; top: 18%; opacity: .55; transform: rotate(-22deg); }
.decor-flower { position: absolute; width: 220px; aspect-ratio: 1; left: -70px; bottom: 5%; border: 1px solid var(--color-border-strong); border-radius: 50% 45% 55% 47%; opacity: .24; }

.instagram-shell { min-height: 620px; width: 100%; position: relative; display: grid; place-items: center; overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-soft); }
.instagram-target { width: 100%; display: grid; place-items: center; overflow: hidden; }
.instagram-target .instagram-media { min-width: 0 !important; width: calc(100% - 2px) !important; max-width: 540px !important; margin: 0 auto !important; }
.instagram-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--color-text-soft); font-size: .85rem; }
.loading-flower { width: 32px; aspect-ratio: 1; display: block; border: 3px dotted var(--color-primary); border-radius: 50%; animation: spin 3s linear infinite; }
.instagram-loading[hidden] { display: none; }
.instagram-fallback { width: calc(100% - 2rem); min-height: 560px; padding: 3rem; place-content: center; text-align: center; background: var(--color-primary-subtle); border: 1px solid var(--color-border); }
.instagram-fallback:not([hidden]) { display: grid; }
.fallback-flower { color: var(--color-primary); font-size: 3rem; }.instagram-fallback a { display: inline-block; margin: 1rem auto 0; padding: .8rem 1.1rem; color: var(--color-surface); background: var(--color-primary-pressed); text-decoration: none; }

.transition { min-height: 85svh; background: var(--color-canvas-soft); text-align: center; align-content: center; gap: 4rem; }
.transition__text { max-width: 900px; margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4.7rem); line-height: 1.2; }
.floral-divider { display: flex; align-items: center; gap: .8rem; color: var(--color-leaf); }
.floral-divider span { width: 110px; height: 1px; background: var(--color-leaf-soft); }.floral-divider i { width: 26px; height: 13px; border-radius: 100% 0; background: var(--color-leaf-soft); transform: rotate(25deg); }.floral-divider b { width: 22px; aspect-ratio: 1; border: 6px double var(--color-primary); border-radius: 50%; }
.friendship { overflow: hidden; background: var(--color-leaf-soft); }
.friendship__card { max-width: 900px; padding: clamp(2rem, 7vw, 6rem); background: var(--color-surface); box-shadow: var(--shadow-soft); text-align: center; z-index: 2; }
.friendship__card h2 { margin: 0 0 2rem; font-size: clamp(2.2rem, 5.3vw, 4.8rem); }.friendship__card > p:last-child { color: var(--color-text-soft); font-size: 1.1rem; }
.wildflowers { position: absolute; inset: auto 0 0; height: 25%; display: flex; justify-content: space-around; opacity: .45; }.wildflowers i { width: 2px; height: 100%; background: var(--color-leaf-deep); transform-origin: bottom; transform: rotate(var(--r, 3deg)); }.wildflowers i::before { content: ""; position: absolute; width: 30px; aspect-ratio: 1; border: 7px dotted var(--color-primary); border-radius: 50%; transform: translate(-14px, -5px); }.wildflowers i:nth-child(2) { --r: -7deg; height: 70%; }.wildflowers i:nth-child(3) { --r: 5deg; height: 82%; }.wildflowers i:nth-child(4) { --r: -3deg; height: 56%; }

.message { grid-template-columns: minmax(250px, 470px) minmax(320px, 620px); gap: clamp(3rem, 9vw, 9rem); background: var(--color-canvas); }
.message__intro h2 { margin: 0 0 1.5rem; }.message__intro > p:last-child { color: var(--color-text-soft); font-size: 1.08rem; }
.message-form { padding: clamp(1.5rem, 5vw, 3.5rem); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
.message-form > label { display: block; margin-bottom: .7rem; font-weight: 600; }
textarea { width: 100%; resize: vertical; min-height: 190px; padding: 1rem; color: var(--color-text); background: var(--color-canvas-soft); border: 1px solid var(--color-border-strong); border-radius: 0; }
textarea::placeholder { color: #887670; }.form-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; }.form-meta > span { color: var(--color-text-soft); font-size: .78rem; }
button { border: 0; cursor: pointer; }.message-form button, .admin-login button { display: inline-flex; gap: 1.7rem; align-items: center; padding: .9rem 1.2rem; color: var(--color-surface); background: var(--color-primary-pressed); font-weight: 600; }.message-form button:hover, .admin-login button:hover { background: var(--color-primary-hover); }.message-form button:disabled { cursor: wait; opacity: .62; }
.form-status { min-height: 1.6rem; margin: 1rem 0 0; font-size: .9rem; }.form-status[data-kind="success"] { color: var(--color-success); }.form-status[data-kind="error"] { color: var(--color-error); }.honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.goodbye { min-height: 100svh; text-align: center; background: var(--color-canvas-soft); overflow: hidden; }.goodbye h2 { margin: 0; }.goodbye p { margin: 2rem 0 0; color: var(--color-primary-pressed); font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 3rem); }.goodbye__flowers { position: absolute; bottom: -3rem; left: 50%; width: 420px; height: 230px; transform: translateX(-50%); opacity: .75; }.goodbye__flowers .rose { position: absolute; left: 160px; top: 30px; }.goodbye__flowers .leaf { left: 85px; top: 120px; transform: rotate(22deg); }.goodbye__flowers .blossom { position: absolute; right: 95px; top: 115px; }

.petal-field { position: fixed; inset: 0; pointer-events: none; z-index: 15; overflow: hidden; }.petal { position: absolute; top: -8%; width: 13px; height: 21px; border-radius: 80% 20% 70% 30%; background: var(--color-surface-rose); opacity: .68; animation: fall 16s linear infinite; }.petal--one { left: 12%; animation-delay: -4s; }.petal--two { left: 72%; animation-delay: -10s; animation-duration: 21s; }.petal--three { left: 90%; animation-delay: -15s; animation-duration: 18s; }
.reveal { opacity: 0; transform: translateY(35px); transition: opacity .9s ease, transform .9s ease; }.reveal.is-visible { opacity: 1; transform: translateY(0); }

.admin-page { min-height: 100vh; background: var(--color-canvas-soft); }.admin-shell { width: min(900px, calc(100% - 2rem)); margin: 0 auto; padding: 5rem 0; }.admin-shell header { margin-bottom: 3rem; }.admin-shell h1 { margin: 0; font-size: clamp(2.7rem, 7vw, 5rem); }.admin-shell header > p:last-child { color: var(--color-text-soft); }.admin-login { padding: 2rem; background: var(--color-surface); border: 1px solid var(--color-border); }.admin-login label { display: block; margin-bottom: .6rem; font-weight: 600; }.admin-login > div { display: flex; }.admin-login input { min-width: 0; flex: 1; padding: .8rem; border: 1px solid var(--color-border-strong); }.admin-login p { color: var(--color-error); }.admin-toolbar { display: flex; align-items: center; justify-content: space-between; }.admin-toolbar h2 { font-size: 2rem; }.admin-toolbar button { color: var(--color-primary-pressed); background: transparent; text-decoration: underline; }.admin-messages article { padding: 1.5rem; margin: 1rem 0; background: var(--color-surface); border-left: 4px solid var(--color-primary); box-shadow: var(--shadow-card); }.admin-messages article p { white-space: pre-wrap; overflow-wrap: anywhere; }.admin-messages time { color: var(--color-text-soft); font-size: .8rem; }.admin-empty { padding: 3rem; text-align: center; background: var(--color-surface); }

@keyframes fall { to { transform: translate3d(60px, 112vh, 0) rotate(540deg); } }
@keyframes cue { 50% { transform: translateY(8px); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 800px) {
  .botanical-corner { width: 250px; height: 220px; left: -6rem; top: -3rem; transform: scale(.75); }
  .hero::before { width: 120vw; }.hero::after { width: 95vw; }
  .photo-story, .photo-story--overlap, .message { min-height: auto; grid-template-columns: minmax(0, 1fr); gap: 2.2rem; padding-block: 7rem; }
  .photo-story--reverse .photo-story__media, .photo-story--reverse .photo-story__note { order: initial; }
  .photo-story--overlap .photo-story__note, .photo-story--overlap.photo-story--reverse .photo-story__note, .photo-story--center .photo-story__note { margin: -1rem 1rem 0; }
  .instagram-shell { min-height: 600px; }.instagram-fallback { min-height: 540px; }
  .message__intro { text-align: center; }.floral-divider span { width: 50px; }
  .friendship__card { padding-block: 4rem; }.admin-login > div { flex-direction: column; gap: .7rem; }
}

@media (max-width: 430px) {
  .scene { padding-inline: 1rem; }.hero h1 { font-size: clamp(2.5rem, 12vw, 3.35rem); }.hero__lead { font-size: 1rem; }
  .photo-story { padding-inline: .85rem; }.photo-story__note { padding: 1.5rem; }.photo-story__note p { font-size: 1.45rem; }
  .instagram-shell { min-height: 580px; }.instagram-fallback { min-height: 520px; padding: 2rem 1rem; }
  .friendship { padding-inline: .75rem; }.friendship__card h2 { font-size: 2.25rem; }.message-form { padding: 1.25rem; }.form-meta { align-items: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .petal-field { display: none; }
}