:root {
  --color-canvas: #eadfce;
  --color-canvas-soft: #f4eadb;
  --color-surface: #fffaf1;
  --color-surface-blush: #ddb4b3;
  --color-surface-rose: #c98f93;
  --color-primary: #984c59;
  --color-primary-hover: #7d3946;
  --color-primary-pressed: #662f3a;
  --color-primary-subtle: #e8c8c6;
  --color-leaf: #62705a;
  --color-leaf-deep: #344438;
  --color-leaf-soft: #a9b49c;
  --color-text: #302321;
  --color-text-soft: #5f4b46;
  --color-border: #bd8e89;
  --color-border-strong: #8d5c5b;
  --color-focus: #274d38;
  --color-success: #365f40;
  --color-error: #8f3038;
  --shadow-soft: 0 22px 55px rgba(75, 40, 39, .14);
  --shadow-card: 0 12px 32px rgba(75, 40, 39, .12);
}

body { background: var(--color-canvas); }
main { width: 100%; min-width: 0; overflow: clip; }
.eyebrow { color: var(--color-primary-pressed); }

/* Real floral photography */
.real-floral, .story-floral { display: block; object-fit: cover; pointer-events: none; user-select: none; }
.real-floral { position: absolute; z-index: 1; }
.real-floral--hero-left { left: -5rem; bottom: -6rem; width: clamp(260px, 30vw, 470px); height: clamp(330px, 42vw, 600px); clip-path: ellipse(56% 53% at 44% 53%); filter: saturate(.78) contrast(1.04); }
.real-floral--hero-right { right: -7rem; top: -7rem; width: clamp(290px, 34vw, 520px); height: clamp(350px, 43vw, 650px); clip-path: ellipse(54% 50% at 54% 48%); filter: saturate(.72) contrast(1.05); opacity: .88; }

.hero { isolation: isolate; background: var(--color-canvas-soft); border-bottom: 1px solid var(--color-border); }
.hero::before { display: block; width: min(80vw, 1050px); aspect-ratio: 1.8; border-color: rgba(152, 76, 89, .35); }
.hero::after { display: block; width: min(68vw, 850px); aspect-ratio: 1.55; border-color: rgba(98, 112, 90, .28); }
.hero__content { width: min(940px, 100%); min-width: 0; padding: clamp(2rem, 5vw, 4rem); background: rgba(255, 250, 241, .9); border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); }
.hero h1 { color: var(--color-text); }
.hero__lead { color: var(--color-text-soft); }
.scroll-cue { color: var(--color-primary-pressed); font-weight: 600; }

.photo-story { min-height: 110svh; border-bottom: 1px solid rgba(102, 47, 58, .2); }
.photo-story:nth-child(odd) { background: var(--color-canvas); }
.photo-story:nth-child(even) { background: var(--color-surface-blush); }
.photo-story:nth-child(3n) { background: #c9d0bd; }
.photo-story__media { padding: 0; background: transparent; box-shadow: var(--shadow-soft); }
.photo-story__media::before, .photo-story__media::after { display: none; }
.photo-story__note { background: var(--color-surface); border: 1px solid rgba(141, 92, 91, .65); box-shadow: var(--shadow-card); }
.photo-story__note p { color: var(--color-text); }
.photo-story__note a { color: var(--color-primary-pressed); font-weight: 700; }
.photo-story--center .photo-story__note, .photo-story--final .photo-story__note { margin: 2rem auto 0; }
.photo-story--overlap { gap: clamp(2rem, 7vw, 7rem); }
.photo-story--overlap .photo-story__note, .photo-story--overlap.photo-story--reverse .photo-story__note { margin: 0; }
.photo-story__decor { display: block; }
.story-floral { position: absolute; z-index: 1; width: clamp(150px, 18vw, 260px); height: clamp(190px, 23vw, 340px); opacity: .28; filter: saturate(.6); }
.story-floral--camellia { right: -4%; top: 4%; clip-path: ellipse(50% 46% at 52% 48%); }
.story-floral--roses { left: -4%; bottom: 2%; clip-path: ellipse(48% 46% at 48% 52%); }
.photo-story:nth-child(even) .story-floral--camellia { left: -4%; right: auto; }
.photo-story:nth-child(even) .story-floral--roses { left: auto; right: -4%; }

/* Instagram: official iframe is the visual subject. */
.instagram-shell { width: 100%; min-height: 680px; position: relative; display: grid; place-items: center; overflow: hidden; background: #fff; border: 1px solid rgba(48, 35, 33, .2); box-shadow: none; }
.instagram-frame-target { width: 100%; height: 680px; }
.instagram-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.instagram-loading { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 1rem; background: var(--color-surface); color: var(--color-text-soft); font-size: .86rem; }
.instagram-loading[hidden] { display: none; }
.embed-skeleton { width: min(340px, 72vw); height: 420px; border-radius: 3px; background: linear-gradient(100deg, #eee4d6 30%, #f8f0e5 48%, #eee4d6 66%); background-size: 250% 100%; animation: skeleton 1.8s ease-in-out infinite; }
.instagram-fallback { width: min(420px, calc(100% - 2rem)); min-height: 0; padding: 1.5rem; display: block; text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); }
.instagram-fallback[hidden] { display: none; }
.instagram-fallback > span { color: var(--color-leaf-deep); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.instagram-fallback p { margin: .7rem 0 1rem; font-family: var(--font-display); font-size: 1.25rem; }
.instagram-fallback a, .instagram-source-link { color: var(--color-primary-pressed); font-weight: 700; text-underline-offset: .25em; }
.instagram-fallback a { display: inline; margin: 0; padding: 0; color: var(--color-primary-pressed); background: transparent; box-shadow: none; text-decoration: underline; }
.instagram-shell:has(.instagram-fallback:not([hidden])) { min-height: 220px; box-shadow: none; }
.instagram-shell.has-local-image { min-height: 0; display: block; background: transparent; border: 0; box-shadow: none; }
.local-photo { display: block; width: 100%; height: auto; max-height: 820px; object-fit: contain; background: #fff; }
.instagram-source-link { display: inline-block; margin-top: .8rem; }

.transition { min-height: 85svh; background: var(--color-primary-pressed); color: #fff7ec; }
.real-floral-divider { width: min(640px, 86vw); display: grid; grid-template-columns: 100px 1fr 100px; align-items: center; gap: 1.2rem; }
.real-floral-divider img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; filter: saturate(.62); opacity: .85; }
.real-floral-divider span { height: 1px; background: rgba(255, 247, 236, .45); }
.friendship { overflow: hidden; background: var(--color-leaf-deep); color: #fff8ed; }
.friendship__card { background: #f7ead8; color: var(--color-text); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-soft); }
.friendship__card > p:last-child { color: var(--color-text-soft); }
.real-floral--friend-left, .real-floral--friend-right { width: clamp(220px, 28vw, 410px); height: clamp(280px, 36vw, 520px); opacity: .4; filter: saturate(.65); }
.real-floral--friend-left { left: -7%; bottom: -10%; clip-path: ellipse(50% 48%); }
.real-floral--friend-right { right: -8%; top: -10%; clip-path: ellipse(50% 48%); }
.message { background: var(--color-surface-rose); border-top: 1px solid var(--color-border-strong); }
.message-form { background: var(--color-surface); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-card); }
textarea { background: var(--color-canvas-soft); border: 1px solid var(--color-border-strong); }
.message-form button, .admin-login button { box-shadow: none; }
.goodbye { overflow: hidden; background: var(--color-canvas-soft); }
.real-floral--goodbye { left: 50%; bottom: -28%; width: min(760px, 92vw); height: min(560px, 65vw); transform: translateX(-50%); clip-path: ellipse(50% 44% at 50% 55%); opacity: .55; filter: saturate(.72); }
.goodbye > div:last-child { position: relative; z-index: 2; }

/* Quiet editorial entrance. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 680ms cubic-bezier(.22,1,.36,1), transform 680ms cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.photo-story__media.reveal { transform: translateY(6px) scale(.985); }
.photo-story__media.reveal.is-visible { transform: translateY(0) scale(1); }
.photo-story__note.reveal { transition-delay: 80ms; }

.petal { background-image: url("/assets/floral/garden-roses.webp"); background-size: 180px 220px; border: 0; opacity: .38; }

/* Admin remains visually related but is entirely English. */
.admin-page { background: var(--color-canvas-soft); }
.admin-login, .admin-messages article { border: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
.admin-status { min-height: 1.6rem; color: var(--color-error); }
.admin-toolbar > div { display: flex; gap: 1rem; }
.admin-toolbar button { color: var(--color-primary-pressed); }

@keyframes skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

@media (max-width: 800px) {
  .hero { width: 100%; max-width: 100vw; }
  .hero__content { width: calc(100vw - 2rem); max-width: calc(100vw - 2rem); }
  .real-floral--hero-left { left: -9rem; opacity: .55; }.real-floral--hero-right { right: -11rem; opacity: .45; }
  .photo-story, .photo-story--overlap, .message { grid-template-columns: minmax(0, 1fr); }
  .photo-story__note { margin-inline: 1rem; }
  .photo-story--center .photo-story__note, .photo-story--final .photo-story__note, .photo-story--overlap .photo-story__note, .photo-story--overlap.photo-story--reverse .photo-story__note { margin: 1.5rem 1rem 0; }
  .story-floral { opacity: .18; }
  .instagram-shell, .instagram-frame-target { min-height: 620px; height: 620px; }
  .instagram-shell:has(.instagram-fallback:not([hidden])) { min-height: 200px; height: auto; }
  .real-floral-divider { grid-template-columns: 72px 1fr 72px; }.real-floral-divider img { width: 72px; height: 72px; }
  .real-floral--friend-left, .real-floral--friend-right { opacity: .22; }
}

@media (max-width: 430px) {
  .scene { padding-inline: 1rem; }
  .instagram-shell, .instagram-frame-target { min-height: 580px; height: 580px; }
  .embed-skeleton { height: 360px; }
  .admin-toolbar { align-items: flex-start; gap: 1rem; }.admin-toolbar > div { flex-direction: column; gap: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .photo-story__media.reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .embed-skeleton { animation: none; }
}