/* The Gardener's Cottage — Victorian cottage-garden gift shop (Cass 2026-07-18).
   Charcoal-blue-grey + cornflower + botanical greenery. Prata serif display + Lato body.
   Victorian-botanical, welcoming, gift-charming. clamp()/calc() whitespace-safe. */
:root {
  --charcoal-blue: #32363A;
  --slate: #676D7A;
  --cornflower: #8197BB;
  --leaf: #6E7E58;
  --sage: #9BA886;
  --cream: #F1EDE3;
  --paper: #FBFAF4;
  --ink: #2A2E33;
  --line: rgba(50, 54, 58, .13);
  --line-cf: rgba(129, 151, 187, .28);
  --wrap: 74rem;
  --gut: clamp(1.15rem, 4vw, 2.6rem);
  --rad: 4px;
  --f-disp: "Prata", Georgia, "Times New Roman", serif;
  --f-body: "Lato", system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--f-body); background: var(--paper); color: var(--ink); line-height: 1.68; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 44rem; }
.center { text-align: center; }
.center-x { margin-inline: auto; }
.accent { color: var(--cornflower); }

/* fig = image box; fig--ph = clean placeholder (no dev text, no dashed label) */
.fig { overflow: hidden; border-radius: var(--rad); background: var(--cream); }
.fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fig--ph { background: linear-gradient(135deg, #E8E4DA, var(--cream)); border: 1px solid var(--line); }

.eyebrow { font-family: var(--f-body); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--leaf); }
.h2 { font-family: var(--f-disp); font-weight: 400; font-size: clamp(1.9rem, 1.2rem + 2.9vw, 3.1rem); line-height: 1.1; margin-top: .45rem; color: var(--charcoal-blue); letter-spacing: -.01em; }
.lede { font-size: clamp(1rem, .95rem + .32vw, 1.18rem); color: var(--slate); max-width: 40rem; margin-top: .9rem; }
.body { font-size: 1.05rem; margin-top: .9rem; color: var(--slate); }
.body + .body { margin-top: .65rem; }

/* botanical seam — cornflower + leaf gradient */
.seam { height: 2px; width: 100%; max-width: 13rem; transform-origin: left center; background: linear-gradient(90deg, var(--cornflower) 0%, var(--leaf) 60%, transparent); }
.seam--center { margin-inline: auto; transform-origin: center; }
.js-ready .seam { opacity: 0; }
.js-ready .seam.is-in { opacity: 1; animation: seamdraw .9s cubic-bezier(.42, 0, .18, 1) both; }
@keyframes seamdraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .js-ready .seam { opacity: 1 !important; animation: none !important; } }

/* reveal */
.js-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js-ready [data-reveal].reveal-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .js-ready [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-family: var(--f-body); font-weight: 700; font-size: .79rem; letter-spacing: .06em; text-transform: uppercase; padding: .95rem 1.9rem; border-radius: 3px; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .12s; }
.btn:active { transform: translateY(1px); }
.btn--cf { background: var(--charcoal-blue); color: var(--cream); }
.btn--cf:hover { background: var(--slate); }
.btn--ghost { border-color: var(--cornflower); color: var(--cornflower); }
.btn--ghost:hover { background: var(--cornflower); color: var(--paper); }
.btn--lg { padding: 1.1rem 2.2rem; font-size: .84rem; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(251, 250, 244, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: background .24s; }
.nav[data-nav-state="solid"] { background: var(--paper); }
.nav__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding: .8rem var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav__brand { min-width: 0; }
.nav__word { display: inline-flex; align-items: baseline; gap: .4rem; min-width: 0; }
.nav__word-a { font-family: var(--f-disp); font-weight: 400; font-size: 1.4rem; letter-spacing: -.01em; color: var(--charcoal-blue); white-space: nowrap; }
.nav__word-b { font-family: var(--f-body); font-weight: 700; font-size: .52rem; letter-spacing: .28em; text-transform: uppercase; color: var(--leaf); }
.nav__links { display: none; list-style: none; gap: 1.6rem; }
.nav__links a { font-family: var(--f-body); font-size: .8rem; font-weight: 600; color: var(--slate); transition: color .2s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--cornflower); }
.nav__cta { padding: .6rem 1.2rem; font-size: .7rem; }

/* hero */
.hero { position: relative; overflow: hidden; min-height: clamp(26rem, 72vh, 38rem); display: flex; align-items: center; background: linear-gradient(150deg, #E8E4DA 0%, var(--cream) 55%, #DFE5D4); }
.hero--has-photo { min-height: clamp(32rem, 80vh, 46rem); }
.hero__photo { position: absolute; inset: 0; z-index: 0; }
.hero__photo picture, .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42, 46, 51, .62) 0%, rgba(42, 46, 51, .28) 55%, transparent); }
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin-inline: auto; padding: 0 var(--gut); }
.hero__panel { max-width: 38rem; }
.hero--has-photo .hero__panel .eyebrow { color: rgba(255, 255, 255, .82); }
.hero--has-photo .hero__panel .h1 { color: #fff; }
.hero--has-photo .hero__panel .lede { color: rgba(255, 255, 255, .88); }
.h1 { font-family: var(--f-disp); font-weight: 400; font-size: clamp(2.6rem, 1.5rem + 5.2vw, 5.2rem); line-height: 1.04; letter-spacing: -.015em; margin-top: .55rem; color: var(--charcoal-blue); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero__where { font-family: var(--f-body); margin-top: 1.4rem; font-size: .82rem; letter-spacing: .03em; color: var(--cream); }
.hero--has-photo .hero__where { color: rgba(255, 255, 255, .68); }

/* sections */
.section { padding-block: clamp(3.2rem, 8vw, 5.5rem); }
.band-cream { background: var(--cream); }
.band-charcoal { background: var(--charcoal-blue); color: var(--cream); }
.band-charcoal .h2 { color: #fff; }
.band-charcoal .eyebrow { color: var(--sage); }
.band-charcoal .lede, .band-charcoal .body { color: rgba(241, 237, 227, .82); }

.split { display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }

/* shop category cards */
.cards { display: grid; grid-template-columns: 1fr; gap: clamp(1.2rem, 3vw, 1.8rem); margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; display: flex; flex-direction: column; }
.card__fig { aspect-ratio: 4 / 3; background: var(--cream); }
.card__fig.fig--ph { }
.card__body { padding: clamp(1.1rem, 3vw, 1.6rem); flex: 1; display: flex; flex-direction: column; }
.card__title { font-family: var(--f-disp); font-size: clamp(1.15rem, 1rem + .65vw, 1.45rem); font-weight: 400; color: var(--charcoal-blue); margin-bottom: .5rem; }
.card__body p { font-size: .97rem; color: var(--slate); }

/* botanical vine divider (CSS, no gen) */
.vine-divider { text-align: center; padding-block: 1.6rem; color: var(--sage); font-size: 1.2rem; letter-spacing: .6em; user-select: none; }

/* visit / FAQ */
.visit-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); margin-top: clamp(1.6rem, 4vw, 2.4rem); }
.info-block { background: var(--cream); border: 1px solid var(--line); border-radius: var(--rad); padding: clamp(1.4rem, 4vw, 2rem); }
.info-label { font-family: var(--f-body); font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--leaf); margin-bottom: .3rem; }
.info-val { font-family: var(--f-disp); font-size: clamp(1.05rem, .95rem + .4vw, 1.2rem); color: var(--charcoal-blue); margin-bottom: .1rem; }
.info-note { font-size: .88rem; color: var(--slate); margin-top: .3rem; }
.cta-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 700; color: var(--cornflower); margin-top: .8rem; letter-spacing: .02em; }
.cta-link:hover { color: var(--leaf); }

/* FAQ */
.faq { margin-top: clamp(2rem, 5vw, 3rem); }
.faq__item { border-top: 1px solid var(--line); padding-block: 1.2rem; }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__q { font-family: var(--f-disp); font-size: clamp(1rem, .92rem + .34vw, 1.14rem); color: var(--charcoal-blue); margin-bottom: .45rem; }
.faq__a { font-size: .97rem; color: var(--slate); line-height: 1.62; }

/* footer */
.footer { background: var(--charcoal-blue); color: var(--cream); padding-block: clamp(2.4rem, 6vw, 3.8rem); }
.footer__inner { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 2.4rem); }
.footer__brand-name { font-family: var(--f-disp); font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); color: #fff; }
.footer__tagline { font-size: .88rem; color: rgba(241, 237, 227, .6); margin-top: .3rem; }
.footer__col-label { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); margin-bottom: .5rem; }
.footer__col p, .footer__col a { font-size: .92rem; color: rgba(241, 237, 227, .78); line-height: 1.72; }
.footer__col a:hover { color: #fff; }
.footer__bottom { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .76rem; color: rgba(241, 237, 227, .42); display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }

/* mobile bar */
.mobar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: var(--charcoal-blue); display: flex; align-items: stretch; border-top: 1px solid rgba(255, 255, 255, .1); padding-bottom: env(safe-area-inset-bottom, 0); }
.mobar__btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .22rem; padding: .7rem .4rem; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(241, 237, 227, .65); transition: color .18s; }
.mobar__btn svg { width: 1.3rem; height: 1.3rem; stroke: currentColor; fill: none; stroke-width: 1.8; }
.mobar__btn:hover, .mobar__btn.is-active { color: var(--cornflower); }
.mobar__btn--cta { background: var(--cornflower); color: var(--paper); flex: 1.2; }
.mobar__btn--cta:hover { background: #96AED0; }
body { padding-bottom: 4.5rem; }

/* about story */
.about-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; margin-top: clamp(1.6rem, 4vw, 2.4rem); }

/* signature mount */
.signature { display: block; }

/* ─── responsive ─── */
@media (min-width: 560px) {
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 760px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .visit-grid { grid-template-columns: 1.1fr 1fr; }
  .about-grid { grid-template-columns: 1.05fr 1fr; }
  .footer__inner { grid-template-columns: 1.6fr 1fr 1fr; }
}
@media (max-width: 849px) {
  .nav__cta { display: none; }
  /* Long wordmark + inline location tag collided with the Menu toggle at 375; stack the tag under the name (matches begonia/lone-star). Desktop header unchanged. */
  .nav__word { flex-direction: column; align-items: flex-start; gap: .05rem; }
  .nav__word-b { white-space: nowrap; }
}
@media (min-width: 850px) {
  .nav__links { display: flex; }
  .mnav { display: none; }
  .mobar { display: none; }
  body { padding-bottom: 0; }
}