/** Shopify CDN: Minification failed

Line 347:27 Unexpected "*"

**/
/* ============================================================
   THE FLORAL STUDIO — Phase 2 additions
   Header behavior + full-screen hero styling
   Loaded AFTER floral-studio.css (Phase 1)
   ============================================================ */

/* ============================================================
   HEADER — fixed, transparent over hero, fades on scroll
   ============================================================ */

/* Fix the whole header group (announcement + header) to viewport top */
.shopify-section-group-header-group {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
}

/* Header default: transparent, no background */
.header-wrapper {
  background-color: transparent !important;
  transition: background-color 0.28s ease-out, box-shadow 0.28s ease-out !important;
  border: none !important;
}

/* SCROLLED state - JS adds .fs-header-scrolled to <body> */
body.fs-header-scrolled .header-wrapper {
  background-color: rgba(219, 216, 174, 0.95) !important;
  box-shadow: 0 1px 0 rgba(26, 17, 16, 0.08);
}

/* NO-HERO state (interior pages) - always solid parchment */
body.fs-header-no-hero .header-wrapper {
  background-color: #F2E9D5 !important;
  box-shadow: 0 1px 0 rgba(26, 17, 16, 0.08);
}

/* Header text/nav parchment when transparent (over dark hero) */
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header *,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header a,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header__heading-link,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header__menu-item,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header__icon {
  color: #F2E9D5 !important;
}
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header__icon svg,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header .icon {
  color: #F2E9D5 !important;
  fill: #F2E9D5 !important;
}

/* Ink text when scrolled or on interior pages */
body.fs-header-scrolled .header,
body.fs-header-scrolled .header *,
body.fs-header-scrolled .header a,
body.fs-header-no-hero .header,
body.fs-header-no-hero .header *,
body.fs-header-no-hero .header a {
  color: #1A1110 !important;
}

/* Nav layout: right-aligned */
.header__inline-menu,
.list-menu--inline {
  justify-content: flex-end !important;
}

/* Hide search + account icons per spec */
.header .header__search,
.header details[open].header__search,
.header .header__icon--search,
.header .header__icon--account,
.header a[href*="/account"] {
  display: none !important;
}

/* Interior pages need padding to clear the fixed header */
body.fs-header-no-hero #MainContent {
  padding-top: 9rem !important;
}

/* Homepage: NO padding on main - hero is 100vh flush with top */
body:not(.fs-header-no-hero) #MainContent {
  padding-top: 0 !important;
}

@media (max-width: 749px) {
body.fs-header-no-hero #MainContent {
    padding-top: 7rem !important;
  }
}

/* Dawn's base.css contains `div:empty { display: none }

/* Force header text parchment when over dark hero */
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header *,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header a,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header a *,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header svg {
  color: #F2E9D5 !important;
  fill: #F2E9D5 !important;
}

/* Ensure header group always visible */
.shopify-section-group-header-group {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure header contents visible when over hero (parchment text) */
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper * {
  color: #F2E9D5 !important;
}
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper svg,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper .icon {
  fill: #F2E9D5 !important;
  color: #F2E9D5 !important;
}

/* Announcement bar text always visible */
.utility-bar, .utility-bar * {
  color: #F2E9D5 !important;
}

/* Undo fixed positioning - header sits above hero in normal flow */
.shopify-section-group-header-group {
  position: static !important;
}
body:not(.fs-header-no-hero) #MainContent {
  padding-top: 0 !important;
}

/* CLEAN header/announcement bar colors */
.utility-bar {
  background-color: #1A1110 !important;
}
.utility-bar, .utility-bar *, .announcement-bar, .announcement-bar * {
  color: #F2E9D5 !important;
}

.header-wrapper {
  background-color: #F2E9D5 !important;
}
.header-wrapper, .header-wrapper *, .header, .header * {
  color: #1A1110 !important;
}
.header svg, .header .icon {
  color: #1A1110 !important;
  fill: #1A1110 !important;
}

/* Maximum specificity header text fix */
html body .header-wrapper .header,
html body .header-wrapper .header *,
html body .header-wrapper .header a,
html body .header-wrapper .header span,
html body .header-wrapper .header .header__heading-link,
html body .header-wrapper .header .header__menu-item,
html body .header-wrapper .header .header__menu-item *,
html body .header-wrapper .header .list-menu__item,
html body .header-wrapper .header .list-menu__item * {
  color: #1A1110 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html body .header-wrapper .header svg,
html body .header-wrapper .header .icon {
  color: #1A1110 !important;
  fill: #1A1110 !important;
  opacity: 1 !important;
}

/* NUCLEAR — override earlier parchment-color rule with matching specificity */
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper *,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper a,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper span,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper .header__heading,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper .header__heading *,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper .header__heading-link,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper .header__heading-link *,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper .header__icon,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper .header__icon svg {
  color: #1A1110 !important;
  fill: #1A1110 !important;
}

/* Header FIXED again, transparent by default */
.shopify-section-group-header-group {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
}
.header-wrapper {
  background-color: transparent !important;
  transition: background-color 0.28s ease-out !important;
}

/* Announcement bar always dark */
.utility-bar {
  background-color: #1A1110 !important;
}

/* Scrolled or interior page = parchment header */
body.fs-header-scrolled .header-wrapper,
body.fs-header-no-hero .header-wrapper {
  background-color: #F2E9D5 !important;
  box-shadow: 0 1px 0 rgba(26, 17, 16,0.08);
}

/* Text color: parchment over hero, ink when scrolled/interior */
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header * {
  color: #F2E9D5 !important;
}
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header svg,
body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header .icon {
  color: #F2E9D5 !important;
  fill: #F2E9D5 !important;
}
body.fs-header-scrolled .header,
body.fs-header-scrolled .header *,
body.fs-header-no-hero .header,
body.fs-header-no-hero .header * {
  color: #1A1110 !important;
}
body.fs-header-scrolled .header svg,
body.fs-header-scrolled .header .icon,
body.fs-header-no-hero .header svg,
body.fs-header-no-hero .header .icon {
  color: #1A1110 !important;
  fill: #1A1110 !important;
}

/* HEADER v3 - slightly translucent black over hero, bone when scrolled */
body.fs-header-scrolled .header-wrapper,
body.fs-header-no-hero .header-wrapper {
  background-color: #F2E9D5 !important;
  box-shadow: 0 1px 0 rgba(26, 17, 16,0.08);
}

/* Right-align nav with padding from edge */
.header {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}
.header__inline-menu,
.list-menu--inline {
  justify-content: flex-end !important;
  margin-right: 2rem !important;
}

/* SHOW cart icon */
.header__icon--cart,
a[href*="/cart"].header__icon,
.header .header__icons {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.header__icons {
  gap: 0.5rem !important;
}

/* Remove active-page underline on nav */
.header__menu-item,
.header__menu-item span,
.header__active-menu-item,
.header__menu-item .header__active-menu-item {
  text-decoration: none !important;
  border-bottom: none !important;
}
.header__menu-item span::after,
.header__menu-item::after {
  display: none !important;
  content: none !important;
}

/* Header translucent black over hero (more visible) */
body.fs-header-scrolled .header-wrapper,
body.fs-header-no-hero .header-wrapper {
  background-color: #F2E9D5 !important;
}

/* Nav spacing */
.header__menu-item {
  padding: 0.5rem 1.5rem !important;
}

/* Override Dawn's sticky-header behavior - use our own */
sticky-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
}

/* Force translucent unless OUR scroll class is on body */

/* FORCE header transparent black when body has NO scroll class - most specific selector */

/* SHOW header icons container and all icons */
.header__icons,
.header__icons--localization,
.header__icon,
.header__icon--cart,
a.header__icon {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* TEXT: bone white over hero (transparent state), ink when scrolled */
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper *,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper a,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper span {
  color: #F2E9D5 !important;
}
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper svg,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper .icon {
  color: #F2E9D5 !important;
  fill: #F2E9D5 !important;
}

/* Announcement bar always visible, sits above header */
.utility-bar {
  position: relative !important;
  z-index: 101 !important;
  background-color: #1A1110 !important;
}

/* HIDE announcement bar entirely */
.utility-bar,
#shopify-section-sections--*__announcement-bar,
[id*="announcement-bar"] {
  display: none !important;
}

/* Right-align header nav */
.header {
  grid-template-columns: auto 1fr auto !important;
}
.header__inline-menu,
.header nav,
.list-menu--inline {
  justify-content: flex-end !important;
  text-align: right !important;
}
.header__inline-menu ul {
  margin-left: auto !important;
  justify-content: flex-end !important;
}


/* ------------------------------------------------------------------
   Header wordmark over the hero
   The hero already sets "The Floral Studio" in display type, so the
   header repeat is both redundant and — now that there's a photograph
   behind it — hard to read. Fade it in only once the hero title has
   scrolled away.
   ------------------------------------------------------------------ */
.header__heading,
.header__heading-link {
  transition: opacity 0.45s ease;
}

/* Keyed to .fs-hero-gone, NOT .fs-header-scrolled. The bone bar arrives
   100px in; the wordmark waits until the hero has left the screen, so the
   header never repeats a name the hero is still showing. */
/* `html … .header-wrapper …` is not padding. A rule further up this file
   sets `html body .header-wrapper .header .header__heading-link { opacity:
   1 !important }` at (0,3,2); the plain-body form of this selector is
   (0,3,1) and LOSES to it. It only looked right because the <h1> wrapper
   — which that rule does not name — was hiding the group from above, and
   Dawn only emits that <h1> on the index page. This form is (0,4,2) and
   hides the link on its own merits. */
html body:not(.fs-hero-gone):not(.fs-header-no-hero) .header-wrapper .header__heading,
html body:not(.fs-hero-gone):not(.fs-header-no-hero) .header-wrapper .header__heading-link {
  opacity: 0 !important;
  pointer-events: none;
}

/* --- the town, beside the header wordmark --------------------------
   Inside .header__heading-link, so the opacity rule above hides and
   reveals the whole lockup as one thing — the name and the town arrive
   together on scroll.

   The colour needs this specificity: two rules further up this file set
   `.header-wrapper .header span { color: #1A1110 !important }` at (0,2,3),
   and a flat ink mark beside the name is exactly what this should not be.
   Naming the class instead of `span` gets to (0,3,2) and wins.
   ------------------------------------------------------------------- */
html body .header-wrapper .header .header__heading-link {
  display: inline-flex;
  /* NOT `baseline`. This is an inline-flex box whose first flex item is the
     empty rule span, and a flex container takes its baseline from that first
     item — so baseline alignment lined the header up on the DASH's bottom
     edge, which sits near the middle of the mark, and dropped the whole
     thing half its own height. Centre, then correct optically below. */
  align-items: center;
  gap: 1rem;
}

.fs-header__location {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.06em;
}

html body .header-wrapper .header .fs-header__location-text {
  display: block;
  color: rgba(26, 17, 16, 0.55) !important;
}

.fs-header__location-rule {
  display: block;
  flex: none;
  width: 1.5rem;
  height: 1px;
  background-color: var(--fs-gold, #642C2F);
}

/* No room for a second string beside the wordmark until the bar is
   wide enough for the six-item menu as well. Below 990 the mobile bar
   centres the wordmark and there is no space at all; between 990 and
   1199 the menu is already tightened to fit on one line and the town
   is the ~75px that decides whether "Contact" wraps. It comes back at
   1200, where everything fits at full spacing. */
@media (max-width: 1199px) {
  .fs-header__location {
    display: none;
  }
}


/* ==================================================================
   HERO
   Full-bleed still photograph, type anchored lower-left.
   Consolidated — this is the only place .fs-hero is styled.
   ================================================================== */

.fs-hero {
  position: relative;
  width: 100%;
  /* Full viewport, at Matt's request. This is what makes the hero
     photograph's resolution critical: a full-screen frame upscales any
     image narrower than the display. svh keeps mobile browser chrome from
     making the hero jump as the URL bar hides. */
  height: 100vh;
  height: 100svh;
  min-height: 52rem;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #F2E9D5;
}

/* Dawn's base.css carries `div:empty { display: none }`, and both layers
   below are empty divs. Without this they vanish and the hero renders as
   a flat rectangle. */
.fs-hero__image,
.fs-hero__overlay {
  display: block !important;
}

.fs-hero__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  /* The arrangement occupies the right 31% of the frame and the rest is
     plain drapery, so the crop is taken off the LEFT — anchoring the photo
     to the right edge keeps the whole arrangement in shot at every width
     and spends the cropping on the part with nothing in it. */
  background-position: 100% center;
  background-repeat: no-repeat;
  filter: saturate(1.02) contrast(1.02);
  /* Parallax. The only transform allowed on this layer, and it is driven
     by SCROLL POSITION, not a timer — the photograph is still whenever the
     page is. (The autonomous `fs-hero-breathe` scale animation that was
     removed at Matt's request is a different thing. Don't bring it back.)

     It costs no resolution. The layer keeps exactly the size `cover` gives
     it and slides DOWN inside the frame; the extra travel is clipped off
     the bottom by .fs-hero's `overflow: hidden`, and because the depth is
     below 1 the layer's top edge always stays above the visible part of
     the hero, so no gap can open at the top. Nothing is scaled up to make
     room — which matters, since this photograph is already upscaled on
     large displays.

     JS writes the translate; see floral-studio-phase2.js. */
  will-change: transform;
}

/* Anchoring right only works while the frame is wider than it is tall.
   As the viewport squares up, `cover` crops more and more off the sides,
   and a right anchor marches the arrangement across the screen until it
   is behind the type. Below 16:10 the anchor walks back toward the middle
   so drapery keeps the lower left clear. */
@media (max-aspect-ratio: 16/10) {
  .fs-hero__image {
    background-position: 82% center;
  }
}
@media (max-aspect-ratio: 5/4) {
  .fs-hero__image {
    background-position: 64% center;
  }
}

.fs-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* The photograph is light, so the scrim lifts rather than darkens —
     a wash of bone white under the ink type at the foot of the frame.

     There used to be a second layer under this one: a full-width
     `linear-gradient(180deg …)` fading to 0.5 alpha at the bottom edge.
     Removed at Matt's request — it read as a white glow banding across
     the foot of the frame, most visibly over the arrangement on the
     right, where there is no type for it to serve. The radial below is
     anchored to the bottom LEFT and does the actual contrast work under
     the wordmark, subtitle and link. */
  background:
    radial-gradient(
      120% 62% at 0% 100%,
      rgba(242, 233, 213, 0.6) 0%,
      rgba(242, 233, 213, 0.22) 46%,
      rgba(242, 233, 213, 0) 72%
    );
}

.fs-hero__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 4rem 8rem 5rem;
  color: #1A1110;
}

.fs-hero__name {
  margin: 0;
  /* Bodoni Moda, the client's mockup face (2026-09-29). A didone, not a
     garalde: the hairlines are far thinner than Cormorant's, so the
     wordmark reads lighter at the same size and can afford to be set
     larger. 400 rather than 300 — Bodoni's thin strokes are already
     the contrast, and a lighter weight just breaks them up on screen. */
  font-family: var(--fs-display) !important;
  font-weight: 400 !important;
  /* 6.2vw, not 7.8vw. The wordmark is ~10.2em wide on one line, and the
     arrangement in the hero photograph starts at 74% across the frame.
     At 7.8vw the tail of "STUDIO" sat on the foliage. Measured: on a
     1512x900 frame the flowers begin at x=1094 and the wordmark now ends
     at ~1030. The 11.7rem cap is unchanged, so anything 1900px and wider
     is exactly the size it was before. */
  /* 8vw / 15rem, up from 6.2vw / 11.7rem (Matt, 2026-09-16). Title case
     made the LINE 28% shorter at the same letter size, and that reads as
     "the text shrunk" — so the letters grow to put the line back near the
     width the all-caps version had.

     Both numbers move by the same 1.29x, which keeps the crossover where
     it was: the cap still takes over at ~1875px, so the wordmark stops
     growing at the same viewport width it always did. Moving only the vw
     rate would silently change that. */
  /* 9.2vw / 17rem, up from 8vw / 15rem. Bodoni sets narrower than
     Cormorant at the same point size and the mockup runs the wordmark
     most of the way across the frame, so the rate rises to match. The
     cap moves by the same 1.15x, which keeps the crossover at ~1850px. */
  /* 8.6vw, trimmed back from 9.2vw after measuring: at 9.2 the final "o"
     of Studio sat on the amaranthus at 1280px (wordmark ended x=976, the
     82% anchor puts the first foliage near x=832). 8.6vw clears it at
     1280 and still runs most of the frame at 1512, which is the
     proportion the mockup shows. */
  font-size: min(8.6vw, 16rem);
  line-height: 1.02;
  /* Down from 0.03em. A didone's rhythm comes from the stroke contrast,
     not from air between the letters; tracking it out reads as a logo
     rather than a masthead. */
  letter-spacing: 0.005em;
  white-space: nowrap;
  /* Title case, not caps (Matt, 2026-09-16). The setting already holds
     "The Floral Studio" — this just stops the CSS shouting it.

     Note what this does to the composition: at the same font-size the
     line is 28% narrower (956px -> 689px at 1512), because the letters
     are the same size and fewer of them are capitals. The clearance to
     the arrangement grows from 88px to ~355px. */
  text-transform: none;
  /* The site's navy, the palette's third colour — 11.2:1 on bone against
     ink's 15.5:1, so it is a colour change with no legibility cost. The
     tagline and button stay ink on purpose: it makes the wordmark the one
     coloured element rather than tinting the whole block. */
  color: var(--fs-navy, #2C1608);
}

.fs-hero__name-line {
  display: block;
}

/* The maker's mark: a short gold rule and the town, in italic Cormorant
   at a fraction of the wordmark's size, sitting above it.

   Deliberately quiet. Matt asked for the town without it taking anything
   away from the wordmark or the tagline, so it is sized to read as a
   caption on the composition rather than a third line of copy — roughly
   an eighth of the wordmark's height. It was previously 2.2–3.1rem and
   set BELOW the wordmark, where it competed head-on with the tagline;
   that is why the setting was left empty. Don't put it back there. */
.fs-hero__location {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 1.15vw, 1.7rem);
  letter-spacing: 0.08em;
  color: rgba(26, 17, 16, 0.62);
}

.fs-hero__location-rule {
  display: block;
  flex: none;
  width: 2.4rem;
  height: 1px;
  background-color: var(--fs-gold, #642C2F);
}

.fs-hero__location-text {
  display: block;
}

.fs-hero__tagline {
  /* The dramatic script from the client's mockup (2026-09-29). Italianno
     has a tiny x-height for its point size — set at the old 2.4rem it
     read as a caption, so the size roughly doubles to sit level with the
     wordmark above it. Line-height comes DOWN at the same time: a script
     carries its own vertical flourishes and 1.6 opened a canyon between
     the two lines on a phone. */
  margin: 1.6rem 0 0;
  max-width: none;
  white-space: nowrap;
  font-family: var(--fs-script);
  font-weight: 400;
  font-size: clamp(3.4rem, 3.1vw, 4.8rem);
  line-height: 1.15;
  /* Scripts are drawn to touch. Any positive tracking breaks the joins. */
  letter-spacing: 0;
  /* Fuller than the old 0.82 — the strokes are hairline-thin, and at 82%
     opacity they disappear against a light photograph. */
  color: rgba(26, 17, 16, 0.92);
}

.fs-hero__button {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-action-gap, 0.9rem);
  margin-top: 2.6rem;
  font-family: 'Manrope', -apple-system, sans-serif;
  font-weight: 400;
  /* the one action link that keeps its own size — display scale */
  font-size: clamp(1.5rem, 1.15vw, 1.75rem);
  letter-spacing: var(--fs-action-tracking, 0.2em);
  text-transform: uppercase;
  color: #1A1110 !important;
  text-decoration: none;
  padding-bottom: var(--fs-action-pad, 0.8rem);
  border-bottom: 1px solid rgba(26, 17, 16, 0.32);
  transition: border-color 0.5s ease;
}
.fs-hero__button:hover {
  border-color: #1A1110;
}
.fs-hero__button-arrow {
  display: inline-block;
  transition: transform 0.5s ease;
}
.fs-hero__button:hover .fs-hero__button-arrow {
  transform: translate(4px, -4px);
}

/* Optional top-right note — empty by default, set it in the theme editor */
.fs-hero__meta {
  position: absolute;
  top: 11rem;
  right: 4rem;
  z-index: 3;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: rgba(26, 17, 16, 0.75);
  text-align: right;
}
.fs-hero__meta-label {
  display: block;
  font-family: 'Manrope', -apple-system, sans-serif;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0.35rem;
}

@media (max-width: 749px) {
  /* Full bleed, type over the photograph — Matt, 2026-09-28: "I still want
     all the text to live on the hero background and not separate."
     The type shrinks to buy the clear ground the anchor cannot. */
  .fs-hero__image {
    /* Use the portrait crop when one is set. The element carries an
       inline background-image, so this needs !important to win. */
    background-image: var(--fs-hero-mobile-image) !important;
    background-position: 92% center;
  }

  /* Type-over-photo only works here because the scrim does the contrast
     work. Deeper and wider than the desktop wash: at this anchor the
     lower left is drapery and the pale amaranthus trail, not clean
     ground. Still anchored bottom-LEFT — it is not the full-width glow
     across the foot of the frame that was removed. */
  .fs-hero__overlay {
    /* Deeper and taller than it was, because the tagline changed face:
       Italianno's strokes are hairlines where Manrope 300 had real weight,
       and a hairline over a photographed leaf simply disappears. Reaching
       58% up the frame also covers the wordmark, which now sits higher. */
    background: radial-gradient(
      155% 58% at 0% 100%,
      rgba(242, 233, 213, 0.94) 0%,
      rgba(242, 233, 213, 0.72) 32%,
      rgba(242, 233, 213, 0.32) 60%,
      rgba(242, 233, 213, 0) 86%
    );
  }

  .fs-hero__content {
    padding: 0 1.6rem 5.5rem 1.6rem;
  }
  .fs-hero__name {
    /* Bodoni sets narrower than Cormorant did, so the same clear drapery
       carries a slightly larger rate. */
    font-size: 7.6vw;
  }
  .fs-hero__tagline {
    margin-top: 0.8rem;
    /* ~1.8x the sans size it replaced — Italianno's x-height is that much
       smaller for the same point size.

       The MEASURE is the load-bearing number here, not the size. At 66%
       the script wrapped to three lines, which pushed the whole block
       ~60px up the frame and put the wordmark in the middle of the
       arrangement. 88% keeps it to two lines and the block sits back down
       on the drapery where it belongs. Check the line count, not just the
       size, if this is ever re-tuned. */
    font-size: 2.6rem;
    line-height: 1.05;
    white-space: normal;
    max-width: 88%;
  }
  .fs-hero__button {
    margin-top: 1.8rem;
    font-size: 1.25rem;
  }
  .fs-hero__location {
    gap: 0.7rem;
    margin-bottom: 1.1rem;
    font-size: 1.3rem;
  }
  .fs-hero__location-rule {
    width: 1.8rem;
  }
  .fs-hero__meta {
    display: none;
  }
}

/* The smallest phones still in use (SE1 at 320px). The window opens on the
   arrangement's left edge at any anchor that keeps the plinth in shot, so
   the wordmark has to be short enough to stay inside the drapery fold at
   the far left — at 7vw its tail landed in the dark foliage. */
@media (max-width: 374px) {
  .fs-hero__image {
    background-position: 88% center;
  }
  .fs-hero__name {
    font-size: 6.8vw;
  }
  .fs-hero__tagline {
    font-size: 2.35rem;
    max-width: 94%;
  }
  .fs-hero__button {
    font-size: 1.15rem;
  }
}

/* 320 x 568 — an SE 1st gen, and the one frame where the two demands
   cannot both be met. Short AND narrow puts the type block inside the
   flower mass rather than below it, and no anchor that keeps the plinth
   in shot leaves drapery wide enough for the wordmark. Legibility wins
   here: the anchor walks back and the plinth goes out of frame.
   (375 x 667 — SE 2/3 and the 8 — is fine at the values above.) */
@media (max-width: 374px) and (max-height: 640px) {
  .fs-hero__image {
    background-position: 80% center;
  }
  .fs-hero__name {
    font-size: 6vw;
  }
  .fs-hero__tagline {
    font-size: 2.15rem;
  }
}

/* Respect a reduced-motion preference for the button nudge */
@media (prefers-reduced-motion: reduce) {
  .fs-hero__button,
  .fs-hero__button-arrow {
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Header over the hero — a whisper of ink rather than a bar.
   ------------------------------------------------------------------ */
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper {
  /* A soft fade rather than a tinted bar — a flat tint leaves a visible
     seam where it stops against the photograph. */
  background-color: transparent !important;
  background-image: linear-gradient(
    180deg,
    rgba(242, 233, 213, 0.82) 0%,
    rgba(242, 233, 213, 0.44) 55%,
    rgba(242, 233, 213, 0) 100%
  ) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}


/* ------------------------------------------------------------------
   Header text over the hero.
   The hero photograph is light now, so the nav has to be ink rather
   than parchment. This block is last in the file and matches the
   specificity of the parchment rules above it, so it wins.
   ------------------------------------------------------------------ */
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper *,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper a,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper span,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper svg {
  color: #1A1110 !important;
}


/* ------------------------------------------------------------------
   Header background — single source of truth.
   Earlier passes left a backdrop blur and a slow cross-fade here. Over a
   busy photograph that combination smeared the image into a murky band
   for half a second before the bone white arrived. No blur, and a short
   ease-out so the solid colour lands almost immediately.
   ------------------------------------------------------------------ */
html body .header-wrapper {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background-color 0.28s ease-out, box-shadow 0.28s ease-out !important;
}

html body.fs-header-scrolled .header-wrapper,
html body.fs-header-no-hero .header-wrapper {
  background-color: #F2E9D5 !important;
  background-image: none !important;
}

/* The wordmark should arrive with the background, not ahead of it */
.header__heading,
.header__heading-link {
  transition: opacity 0.28s ease-out !important;
}

/* ==================================================================
   HEADER BACKGROUND — final word.
   The file above still carries several dark-hero leftovers, one of them
   scoped `... sticky-header .header-wrapper`, which outranked the
   transparent rule and kept an ink bar over the (now light) photograph.
   This block repeats that specificity, sits last, and therefore wins.
   Change header background HERE, not above.
   ================================================================== */

/* Over the hero: no bar, just a whisper of bone white fading out */
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) sticky-header.header-wrapper,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) sticky-header .header-wrapper,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper.scrolled-past-header,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper {
  background-color: transparent !important;
  background-image: linear-gradient(
    180deg,
    rgba(242, 233, 213, 0.82) 0%,
    rgba(242, 233, 213, 0.44) 55%,
    rgba(242, 233, 213, 0) 100%
  ) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* Scrolled past the hero, and every interior page: solid bone white */
html body.fs-header-scrolled sticky-header.header-wrapper,
html body.fs-header-scrolled sticky-header .header-wrapper,
html body.fs-header-scrolled .header-wrapper.scrolled-past-header,
html body.fs-header-scrolled .header-wrapper,
html body.fs-header-no-hero sticky-header.header-wrapper,
html body.fs-header-no-hero .header-wrapper {
  background-color: #F2E9D5 !important;
  background-image: none !important;
}


/* ------------------------------------------------------------------
   Header icons over the hero — the cart was rendering bone white.
   The ink block above sets `color` on header svgs but NOT `fill`, while
   an earlier dark-hero rule set both to bone. Dawn's cart path carries
   fill="currentColor", but a CSS `fill` on the <svg> beats that
   presentation attribute and inherits down, so the cart stayed bone
   while everything around it went ink. `fill` is the property that
   actually paints it — set it here, last, for every header icon.
   ------------------------------------------------------------------ */
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper svg,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper .icon,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper .header__icon svg,
html body:not(.fs-header-scrolled):not(.fs-header-no-hero) .header-wrapper .header__icon svg path {
  color: #1A1110 !important;
  fill: #1A1110 !important;
}

/* ------------------------------------------------------------------
   Header hover — the second accent
   The header's colour rules are a thicket of !important further up this
   file, so the hover has to be stated last and at the same weight.
   Applies in both header states: the type is ink either way, so rust
   reads the same over the hero and over bone.
   ------------------------------------------------------------------ */
html body .header-wrapper .header__menu-item:hover,
html body .header-wrapper .header__menu-item:hover span,
html body .header-wrapper a.header__menu-item:focus-visible,
html body .header-wrapper details:hover > summary.header__menu-item,
html body .header-wrapper details:hover > summary.header__menu-item span,
html body .header-wrapper details[open] > summary.header__menu-item,
html body .header-wrapper details[open] > summary.header__menu-item span {
  color: #642C2F !important;
}

/* The caret is an SVG that paints with `fill`, not `color` */
html body .header-wrapper details:hover > summary .icon-caret,
html body .header-wrapper details:hover > summary .icon-caret svg,
html body .header-wrapper details[open] > summary .icon-caret,
html body .header-wrapper details[open] > summary .icon-caret svg {
  color: #642C2F !important;
  fill: #642C2F !important;
  opacity: 1;
}

/* ==================================================================
   HEADER DIVIDER
   A gold hairline along the foot of the bar, fading out at both ends —
   the same divider language used above the shop rows and the About
   band, in the accent instead of ink. Colour does the separating, so
   the rule can stay a single subtle pixel.

   It exists ONLY while the bar is solid. Over the hero the header is a
   transparent wash over a photograph, and a rule drawn across the
   drapery reads as a scratch on the image. It fades on the same 0.28s
   as the background, so the bar and its rule arrive together.

   Peak alpha 0.16. It was 0.34 against the old gold, which Matt had already
   asked to make "a little less apparent". The new editorial oxblood is far
   darker than gold — 9.5:1 on bone against 2.46:1 — so the SAME alpha draws
   a much heavier line. 0.16 reproduces the weight he approved: blended over
   bone it lands at 1.31:1, where the old 0.34 gold landed at 1.33:1.

   The lesson for any future palette change: an alpha tuned by eye encodes a
   LIGHTNESS, not a number. Re-derive it, don't carry it across.

   `.header-wrapper` is `position: fixed`, which is already a containing
   block — no `position: relative` needed, and adding one would break
   the sticky behaviour.
   ================================================================== */
html body .header-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease-out;
  background-image: linear-gradient(
    90deg,
    rgba(100, 44, 47, 0) 0%,
    rgba(100, 44, 47, 0.16) 16%,
    rgba(100, 44, 47, 0.16) 84%,
    rgba(100, 44, 47, 0) 100%
  );
}

html body.fs-header-scrolled .header-wrapper::after,
html body.fs-header-no-hero .header-wrapper::after {
  opacity: 1;
}

/* ==================================================================
   THE MENU BUTTON'S TWO GLYPHS
   ------------------------------------------------------------------
   Matt, 2026-09-28, looking at a phone: "the menu x and open looks
   like it is clashing." It was — literally. Both glyphs were drawn on
   top of each other.

   Dawn stacks the hamburger and the close X in the same 44px summary,
   absolutely positioned, and shows one by hiding the other with
   `visibility: hidden; opacity: 0`. Neither of those is !important.

   Further up this file, a blanket rule written to stop Dawn's own
   colours winning says:

     html body .header-wrapper .header * {
       color: …; opacity: 1 !important; visibility: visible !important;
     }

   `* ` matches both glyphs, and `!important` beats Dawn's plain
   declarations — so the hidden one was forced back on and the two drew
   over each other as an X crossed with two bars.

   This gives the state machine back, at a specificity that wins.
   **A blanket `!important` on a wildcard does not only affect the
   thing you were aiming at.** The colour rules above are the same
   shape; if anything else in the header starts ignoring its own
   show/hide logic, look there first.
   ================================================================== */
html body .header-wrapper details:not([open]) > .header__icon--menu .icon-close,
html body .header-wrapper details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Dawn re-shows the hamburger for the instant between `open` being set
   and the opening animation starting, so that state needs saying too. */
html.js body .header-wrapper details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden !important;
  opacity: 0 !important;
}
html.js body .header-wrapper details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible !important;
  opacity: 1 !important;
}


/* ==================================================================
   THE MOBILE HEADER'S GUTTERS
   ------------------------------------------------------------------
   The menu button sat 10px from the left edge while the cart sat 38px
   from the right, and neither lined up with the hero wordmark at 16px.
   Three different left edges in the top 84px of the page.

   Two causes, both Dawn's, both reasonable on their own:

   1. The hamburger glyphs are `position: absolute` inside a summary
      that is `position: initial`, so their containing block is the
      HEADER WRAPPER, not the button. Their placement then had nothing
      to do with the button they live in.
   2. The cart is inset by `.header__icons { padding-right: 0.8rem }`
      plus `.header__icon--cart { margin-right: -1.2rem }` — a net -4px
      — while nothing equivalent exists on the left.

   Fixed by making the geometry explicit rather than inherited: give
   the button a containing block of its own and centre the glyph in it,
   set the header's gutter to the SAME token the sections use, and pull
   each 44px button out by half its own padding so the GLYPH, not the
   tap target, lands on the gutter. Both icons then sit on the same line
   as the text below them.

   `inset: 0; margin: auto` centres rather than a transform, because
   Dawn animates `transform` on these glyphs and a centring transform
   would be animated away on hover.
   ================================================================== */
/* The two glyphs must overlap, so they stay absolute — but against the
   inner span, which is a real 44px box, rather than against whatever
   positioned ancestor happened to be up the tree.

   The SPAN, not the summary. Making the summary itself `position:
   relative` also works for the glyphs and breaks something else: Dawn
   hangs the drawer's dimming scrim off
   `.header__icon--menu[aria-expanded="true"]::before` with
   `top: 100%; left: 0; width: 100%`, counting on the summary being
   unpositioned so the scrim resolves against the header wrapper and
   covers the page. Position the summary and the scrim collapses to a
   44px-wide grey tab under the button. */
html body .header-wrapper .header__icon--menu > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
}
html body .header-wrapper .header__icon--menu .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

@media (max-width: 989px) {
  html body .header-wrapper .header {
    padding-left: var(--fs-gutter, 1.6rem) !important;
    padding-right: var(--fs-gutter, 1.6rem) !important;
  }
  /* Both tap targets sit flush on the gutter and both glyphs are
     centred in them, so the two are mirror images. Dawn's -1.2rem pull
     on the cart is removed rather than matched on the left: pulling
     the 44px targets outward puts half of each one in the gutter,
     which is what made the menu button look like it was falling off
     the edge of the screen. */
  html body .header-wrapper .header__icons {
    padding-right: 0 !important;
  }
  html body .header-wrapper .header__icon--cart {
    margin-right: 0 !important;
  }
  /* `sections/header.liquid` carries an inline <style> block with
     `header-drawer { margin-left: -1.2rem }`. Found by measuring first
     — at `padding-left: 1.6rem` the button landed at 4.3px and at
     `padding-left: 5rem` at 37.5px, a constant 12.5px short both times
     — then by finding the declaration that matched. This puts it back,
     so the two buttons are mirror images. If that inline style ever
     goes, this becomes a 12px indent. */
  html body .header-wrapper .header__icon--menu {
    margin-left: 1.2rem;
  }

  /* The wordmark belongs in the middle of a drawer bar. Dawn's own
     mobile grid is `left-icons heading icons` at `1fr 2fr 1fr`, but by
     768px the heading was auto-placing next to the cart instead —
     hamburger far left, name and cart bunched at the right, half the
     bar empty. Stating the areas explicitly puts it back, and `auto`
     for the middle track keeps the name centred on the VIEWPORT rather
     than centred inside a track that the icons are pushing around. */
  html body .header-wrapper .header {
    grid-template-areas: 'left-icons heading icons' !important;
    grid-template-columns: 1fr auto 1fr !important;
  }
  html body .header-wrapper header-drawer {
    grid-area: left-icons !important;
    justify-self: start !important;
  }
  html body .header-wrapper .header__heading,
  html body .header-wrapper .header__heading-link {
    grid-area: heading !important;
    justify-self: center !important;
  }
  html body .header-wrapper .header__icons {
    grid-area: icons !important;
    justify-self: end !important;
  }
}


/* ==================================================================
   WHEN THE DESKTOP BAR IS ALLOWED TO APPEAR
   ------------------------------------------------------------------
   Dawn swaps the drawer for the inline menu at 990px. That was fine
   for the four-item bar this site launched with. The client's menu has
   SIX items and one of them is "Weddings and Events", and at 990-1150
   the bar wrapped onto a second line — the header turned into two rows
   with "About Contact" orphaned underneath.

   Swapping back to the drawer for that band was the first fix and it
   was worse: at 990+ the grid puts the wordmark and the drawer in the
   same column, so the hamburger ended up jammed against "King City".

   Measured instead. At 1000px the nav had 465px of room and wanted
   ~515px — fifty short. The six items carry 1.5rem of padding each
   side, so tightening that to 0.9rem in this band alone gives back
   6 x 12 = 72px, plus 15px off the menu's right margin. Comfortably
   enough, and the full menu stays visible at 990 rather than hiding
   six items behind a hamburger on a laptop.

   Above 1200px the normal spacing returns. If a seventh item is ever
   added, re-measure — the bar is the only thing on the site with a
   hard content-driven minimum width.
   ================================================================== */
@media (min-width: 990px) and (max-width: 1199px) {
  html body .header-wrapper .header__menu-item {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }
  html body .header-wrapper .header__inline-menu,
  html body .header-wrapper .list-menu--inline {
    margin-right: 0.5rem !important;
  }
}


/* ==================================================================
   THE HERO WORDMARK ON A 320px PHONE
   ------------------------------------------------------------------
   `claude/hero-image-spec.md` records a pixel scan proving the type
   never crosses the arrangement, measured down to 375px. Below that it
   does: at 320 the tail of "Studio" reaches 269px and the foliage
   starts at ~245.

   Two levers, and only one of them is safe to pull blind. Moving
   `background-position` changes what the scan measured and the scan
   cannot be re-run here, so the type shrinks instead. The mobile rate
   is 10.8vw (not the desktop 8vw — that is overridden at 749px), which
   at 320 sets a 253px line ending at x=269. Dropping to 9.6vw sets
   ~225px, ending at ~241, clear of the foliage at ~245. Strictly more
   clearance, never less, whatever the crop does — and small enough a
   step that the wordmark keeps its lead over the tagline beneath it.

   If the hero photograph is ever replaced, re-run the scan in that doc
   and this rule can probably go.
   ================================================================== */
@media (max-width: 360px) {
  /* DELETED: this used to set .fs-hero__name to 9.6vw. It sits later in
     the file than the <=374px guards above, so it was quietly overriding
     them and the smallest phones were getting the LARGEST rate. Caught
     2026-09-29 while re-sizing for Bodoni. The guards own the phone
     sizes now; don't reintroduce a size here. */
}