/* ============================================================
   Eternal Blooms & Co. — brand tokens
   Colors are sampled from the logo artwork (logo.png / logo-alternate.jpg).
   See BRAND.md for the full identity writeup and reasoning.
   ============================================================ */
:root {
  --ink: #332e2b;        /* body copy, footer background */
  --taupe: #94877e;      /* primary brand color — logo fill, hero background */
  --taupe-dark: #70635b; /* buttons, links, eyebrow labels — darker for AA contrast on white */
  --ivory: #f2f1ed;      /* logo reverse, hero-art background */
  --paper: #faf9f6;      /* page background — slightly warmer/lighter than ivory */
  --sand: #eae5df;       /* alternate section background (Our Approach) */
  --line: #d8d0c9;       /* hairline borders */
  --ink-soft: #615750;   /* ledes: hero, intro, inquiry copy */
  --ink-muted: #625b55;  /* offer-card copy */
  --on-dark-soft: #f4f0ed; /* body copy on taupe-dark (inquiry section) */

  /* Display font for headings/wordmark. Brown Sugar (the Canva Brand Kit's
     named heading font) has no licensed web-font file we can embed, so this
     project uses Italiana — a free Google Font that's a close visual match
     to the logo's high-contrast serif lettering. If you ever buy/receive a
     licensed Brown Sugar web font file, add its @font-face rule above this
     line and change ONLY the line below; every heading updates at once. */
  --font-display: 'Italiana', Georgia, serif;
  --radius-button: 12px; /* owner-approved soft button corners */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h-condensed); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Josefin Sans', Arial, sans-serif; font-size: 16px; line-height: 1.65; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--taupe-dark); outline-offset: 5px; }
.skip-link { position: absolute; left: -999px; top: 0; background: white; padding: 1rem; z-index: 20; }
.skip-link:focus { left: 1rem; }
/* Header: logo centered, section links left, Inquire right. Ivory matches the logo file's baked-in background.
   Sticky + shrinking, animated with transform/opacity only (no layout work per frame, so it stays smooth):
   - the header box is fixed at full height (body padding reserves it, so content never jumps) and ignores clicks;
   - its ivory background (::before) slides up so only the slim bar shows; the nav slides up half as far to stay centered;
   - the full lockup scales down and fades while the EB monogram fades in. .is-condensed is toggled by site.js. */
:root {
  --logo-w: clamp(140px, 12.5vw, 180px);
  --header-pad: 16px;
  --header-h: calc(var(--logo-w) * 420 / 580 + 2 * var(--header-pad) + 1px);
  --header-h-condensed: 61px;
  --header-shift: calc(var(--header-h-condensed) - var(--header-h));
  --header-ease: .35s cubic-bezier(.4, 0, .2, 1);
}
body { padding-top: var(--header-h); }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: var(--header-h); pointer-events: none; }
.site-header::before { content: ""; position: absolute; inset: 0; pointer-events: auto; background: var(--ivory); border-bottom: 1px solid var(--line); transition: transform var(--header-ease); will-change: transform; }
.site-header.is-condensed::before { transform: translateY(var(--header-shift)); }
.nav-primary { position: relative; height: 100%; padding: 0 clamp(22px, 5vw, 80px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; transition: transform var(--header-ease); will-change: transform; }
.is-condensed .nav-primary { transform: translateY(calc(var(--header-shift) / 2)); }
.nav-primary a, .menu-toggle, .mobile-menu { pointer-events: auto; }
.nav-group { display: flex; align-items: center; gap: clamp(18px, 3vw, 48px); }
.nav-group-right { justify-content: flex-end; }
.site-logo { position: relative; display: block; width: var(--logo-w); height: calc(var(--logo-w) * 420 / 580); }
.site-logo img { position: absolute; transition: opacity var(--header-ease), transform var(--header-ease); }
.logo-full { inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }
.logo-mono { --mono-h: 40px; left: 50%; top: 50%; height: var(--mono-h); width: calc(var(--mono-h) * .8); opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
.is-condensed .logo-full { opacity: 0; transform: scale(.4); }
.is-condensed .logo-mono { opacity: 1; transform: translate(-50%, -50%); }
/* The link box stays full-size (no layout change), so when slim only the monogram takes clicks — nothing hangs below the bar. */
.is-condensed .site-logo { pointer-events: none; }
.is-condensed .logo-mono { pointer-events: auto; }
.wordmark { text-decoration: none; font-family: var(--font-display); font-size: clamp(23px, 2.3vw, 32px); line-height: 1; white-space: nowrap; }
.wordmark span { font-size: .66em; }
nav a { text-decoration: none; font-size: 12px; text-transform: uppercase; letter-spacing: .13em; white-space: nowrap; }
/* Motion polish — one vocabulary: .2–.4s hovers/header, .6–.7s reveals, the same ease-out curve. All off for reduced motion.
   Underlines are a 1px currentColor line painted as a background, so they can grow without shifting layout.
   Plain links draw theirs in from the left on hover, focus, or when their section is on screen (.is-current, site.js). */
.nav-group a:not(.nav-cta), footer a { padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s cubic-bezier(.4, 0, .2, 1); }
.nav-group a:not(.nav-cta):hover, .nav-group a:not(.nav-cta):focus-visible, .nav-group a.is-current,
footer a:hover, footer a:focus-visible { background-size: 100% 1px; }
/* Links that always carry a rule (Inquire, the small uppercase text links) redraw it on hover: it slides out right, then back in from the left. */
.nav-cta { padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.nav-cta:hover, .nav-cta:focus-visible, .text-link:hover, .text-link:focus-visible { animation: line-redraw .7s cubic-bezier(.4, 0, .2, 1); }
@keyframes line-redraw {
  0% { background-size: 100% 1px; background-position: 100% 100%; }
  45% { background-size: 0 1px; background-position: 100% 100%; }
  55% { background-size: 0 1px; background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}
/* SVG arrows keep their thin outline on iOS instead of becoming emoji. */
.arrow-icon { width: 1.25em; height: 1.25em; vertical-align: -.15em; }
/* The arrow leans a little further out on hover. */
.text-link span[aria-hidden], footer a span[aria-hidden] { display: inline-block; transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
.text-link:hover span[aria-hidden], footer a:hover span[aria-hidden] { transform: translate(2px, -2px); }
/* Photos ease in once loaded instead of popping in (.js is set by an inline script in <head>, so without JS they just show). */
.js .fade-img { opacity: 0; transition: opacity .6s ease-out; }
.js .fade-img.is-loaded { opacity: 1; }
/* Section reveals: site.js adds .reveal only to content below the first screen, then .is-visible once as it scrolls in. */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s ease-out, transform .7s cubic-bezier(.2, .6, .2, 1); }
.reveal.is-visible { opacity: 1; transform: none; }
.menu-toggle { display: none; font-family: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: .13em; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink); padding: 0 0 6px; cursor: pointer; }
/* Mobile menu: drops down from under the header (full or slim), unfolding top-down with the links following in turn.
   Closed = visibility hidden, so it's out of the tab order and screen readers until opened. */
.mobile-menu { position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 4px 22px 18px; visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-6px); transition: clip-path .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, transform .4s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .4s; }
.is-condensed .mobile-menu { top: var(--header-h-condensed); }
.mobile-menu.is-open { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transform: none; transition-delay: 0s; }
.mobile-menu a { display: block; font-family: var(--font-display); font-size: 32px; line-height: 1.2; text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a.is-current { color: var(--taupe-dark); }
.mobile-menu.is-open a { opacity: 1; transform: none; transition-duration: .4s; }
.mobile-menu.is-open a:nth-child(1) { transition-delay: .06s; }
.mobile-menu.is-open a:nth-child(2) { transition-delay: .11s; }
.mobile-menu.is-open a:nth-child(3) { transition-delay: .16s; }
.mobile-menu.is-open a:nth-child(4) { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header::before, .nav-primary, .site-logo img, .mobile-menu, .mobile-menu a,
  .nav-group a, footer a, .text-link span, .fade-img, .reveal { transition: none !important; }
  .nav-cta, .text-link { animation: none !important; }
}
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 690px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 80px clamp(22px, 7vw, 110px); }
.eyebrow, .section-index { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe-dark); }
.eyebrow { display: flex; gap: 14px; align-items: center; }
.eyebrow-line { height: 1px; width: 31px; background: var(--taupe-dark); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.06; letter-spacing: -.018em; }
h1 { font-size: clamp(58px, 6.1vw, 105px); margin: 32px 0; }
h2 { font-size: clamp(49px, 5.2vw, 82px); margin: 16px 0 27px; }
h1 em, h2 em { font-weight: 400; color: var(--taupe-dark); }
.hero-copy p, .inquiry p { max-width: 475px; font-size: 16px; line-height: 1.9; color: var(--ink-soft); }
.button { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-button); text-decoration: none; padding: 17px 24px; min-width: 245px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-3px); }
.button-dark { color: white; background: var(--taupe-dark); margin-top: 26px; }
.button-dark:hover { background: var(--ink); }
.hero-note { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-top: 65px; color: var(--taupe-dark); }
.hero-note span { padding: 0 9px; }
/* Hero photos: one tall image beside two stacked, 6px paper gutters (design system photo grid). */
.hero-art { background: var(--paper); min-height: 610px; display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px; overflow: hidden; }
.hero-photo { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.hero-photo-main { grid-row: 1 / span 2; }

.section-pad { padding: 110px clamp(22px, 8vw, 130px); }
/* Sections are single-column (the "01 / SECTION" index labels and their 28% column were removed, Oct 2026). */
.inquiry { display: grid; grid-template-columns: minmax(0, 1fr); }
.text-link { display: inline-block; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 8px; margin-top: 20px; text-transform: uppercase; font-size: 11px; letter-spacing: .12em; font-weight: 600; }
.offerings { background: var(--sand); }
.offering-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 55px; }
.offering-grid article { border-top: 1px solid var(--line); padding-top: 17px; }
h3 { font-family: var(--font-display); font-size: 30px; font-weight: 400; margin: 28px 0 10px; }
.offering-grid p { font-size: 14px; color: var(--ink-muted); line-height: 1.8; }
.work { background: var(--ivory); }
.work-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.work-heading .text-link { margin-bottom: 33px; }
.ig-feed { margin-top: 30px; min-height: 1060px; } /* Reserve most of the Elfsight feed's height (it loads late) so the page doesn't jump much when it arrives.
   Its height depends on its column layout, not smoothly on width. Measured Sep 2026 (viewport → feed height):
   375 → 935 · 640 → 1162 · 768 → 1373 · 900 → 1095 · 1024 → 1181 · 1280+ → 1113. Each range reserves just under
   its smallest real height, so there's never an empty gap; site.js corrects menu jumps for the rest. */
.story { background: var(--sand); }
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 16px; }
.story-photo { display: block; width: 100%; max-width: 520px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.story-copy { display: grid; gap: 18px; max-width: 560px; font-size: 16px; line-height: 1.9; color: var(--ink-soft); }
.story-copy p { margin: 0; }
.inquiry { background: var(--taupe-dark); color: white; row-gap: 34px; }
.inquiry .section-index, .inquiry h2 em { color: var(--ivory); }
.inquiry p { color: var(--on-dark-soft); }
.inquiry-form-row { grid-column: 1 / -1; width: 100%; max-width: 1000px; min-width: 0; margin-inline: auto; }
.embedded-form { width: 100%; min-height: 750px; overflow: hidden; background: var(--ivory); border-radius: 3px; }
.embedded-form iframe { display: block; width: 100%; border: 0; margin: 0 !important; border-radius: 0 !important; background: var(--ivory); }
.rental-process { margin-top: 70px; }
.rental-process > h3 { margin: 0 0 26px; }
.process-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.process-grid li { border-top: 1px solid var(--line); padding-top: 17px; }
.process-grid h4 { font-family: var(--font-display); font-size: 26px; line-height: 1.2; font-weight: 400; margin: 14px 0; }
.process-grid p { font-size: 14px; line-height: 1.8; color: var(--ink-muted); margin-bottom: 0; }
/* Annual subscription: paper band with its own how-it-works and a hairline delivery table. */
.subscription { background: var(--paper); }
.subscription > .eyebrow { margin-bottom: 4px; }
.subscription .section-lede { max-width: 630px; }
.season-schedule { margin-top: 70px; max-width: 860px; }
.season-schedule > h3 { margin: 0 0 18px; }
.season-schedule table { width: 100%; border-collapse: collapse; }
.season-schedule th, .season-schedule td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--line); }
.season-schedule thead th { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-dark); padding-top: 0; }
.season-schedule tbody th { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.2; }
.season-schedule td { font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.table-note { display: block; font-size: 13px; color: var(--ink-muted); }
.subscription > .text-link { margin-top: 34px; }
/* Seasonal arrangement gallery: 2x2 seasons, each with Standard and Premium photos side by side (square crops). */
.season-gallery-wrap { margin-top: 70px; }
.season-gallery-wrap > h3 { margin: 0 0 26px; }
.season-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px 34px; }
.season-card h4 { font-family: var(--font-display); font-size: 28px; font-weight: 400; line-height: 1.2; margin: 0 0 14px; padding-top: 17px; border-top: 1px solid var(--line); }
.season-card h4 span { display: block; margin-top: 6px; font-family: 'Josefin Sans', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe-dark); }
.season-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.season-photos figure { margin: 0; }
.season-photos img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--ivory); }
.season-photos figcaption { margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 36px clamp(22px, 5vw, 80px); background: var(--ink); color: var(--ivory); }
footer > div:last-child { display: flex; align-items: baseline; gap: 45px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
footer a { text-decoration: none; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 580px; }
  .hero-art { min-height: 0; height: 560px; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
  .season-gallery { grid-template-columns: 1fr; gap: 40px; }
  /* Four footer items (incl. Privacy policy) don't fit beside the wordmark below ~900px: stack and wrap. */
  footer { display: block; }
  footer > div:last-child { margin-top: 24px; flex-wrap: wrap; gap: 14px 32px; }
  .section-pad { padding: 85px 6vw; }
  .offering-grid { gap: 18px; }
}
@media (max-width: 1080px) {
  .ig-feed { min-height: 1080px; }
  /* Three section links left of a centered logo need ~1060px: below that, "Menu" (left) opens the full list, "Inquire" stays (right). */
  .nav-group a:not(.nav-cta) { display: none; }
  .menu-toggle { display: inline-block; }
}
@media (max-width: 760px) {
  .ig-feed { min-height: 1140px; }
  :root { --logo-w: 120px; }
}
@media (max-width: 600px) {
  :root { --header-pad: 12px; --header-h-condensed: 53px; }
  .ig-feed { min-height: 880px; }
  .nav-primary { padding: 0 20px; }
  .logo-mono { --mono-h: 36px; }
  .wordmark { font-size: 24px; }
  .hero-copy { min-height: 560px; padding: 65px 22px; }
  .hero-note { margin-top: 45px; letter-spacing: .05em; }
  .hero-note span { padding: 0 6px; }
  .hero-art { height: 440px; }
  .section-pad { padding: 75px 22px; }
  .offering-grid { grid-template-columns: 1fr; margin-top: 32px; }
  .process-grid { grid-template-columns: 1fr; gap: 28px; }
  .season-schedule th, .season-schedule td { padding-right: 10px; }
  .season-schedule tbody th { font-size: 20px; }
  .season-schedule td { font-size: 14px; }
  .work-heading { display: block; }
  .work-heading .text-link { margin-bottom: 5px; }
  footer { display: block; padding: 38px 22px; }
  footer > div:last-child { justify-content: space-between; margin-top: 28px; gap: 15px; flex-wrap: wrap; }
}

/* Privacy policy (privacy.html): static header with the logo, readable single column. */
.legal-page { padding-top: 0; }
.page-header { display: flex; justify-content: center; padding: 16px 22px; background: var(--ivory); border-bottom: 1px solid var(--line); }
.page-header-logo { display: block; line-height: 0; }
.page-header-logo img { width: clamp(120px, 12.5vw, 160px); height: auto; }
.legal { max-width: 760px; margin: 0 auto; }
.legal h1 { font-size: clamp(44px, 5vw, 72px); margin: 0 0 10px; }
.legal h2 { font-size: clamp(28px, 3vw, 36px); margin: 46px 0 14px; }
.legal p, .legal li { font-size: 16px; line-height: 1.85; color: var(--ink-soft); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a:not(.text-link) { text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { font-size: 13px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--taupe-dark) !important; }
.legal .text-link { margin-top: 40px; }