/*
  Design tokens pulled directly from the live Squarespace site's generated
  site.css (color HSL variables + real typography assignments) and
  custom.css (JOLY heading font, only the un-scoped `h1{font-family:'JOLY'}`
  rule — the rest of that file is scoped to `.vansale-page`, the dropped
  van-sale listing, and not part of the real site design).

  Real typography per site.css's --*-font-font-family variables:
    --body-font-font-family:      "adobe-garamond-pro" (weight 300)
    --heading-font-font-family:   "Cormorant Garamond" (weight 500) — h2/h3
    --meta-font-font-family:      "Poppins" — small metadata/nav text only
    h1 specifically:              JOLY (from custom.css's un-scoped override)

  "adobe-garamond-pro" is a paid Adobe Fonts/Typekit webfont tied to the
  owner's Typekit kit (loaded via use.typekit.net on the live site) — not
  something this migration can load without the owner's own Adobe Fonts
  account/kit ID. Substituting EB Garamond (a free, visually similar
  Garamond-family serif) as a placeholder until the owner can supply a
  real Adobe Fonts kit or self-hosted equivalent for the body font.
*/
@font-face {
  font-family: 'JOLY';
  src: url('/fonts/JOLY-Headline.otf') format('opentype');
  font-display: swap;
}

:root {
  --paper: #eae6e1;       /* --white-hsl */
  --ink: #583b1f;         /* --black-hsl */
  --accent: #7db9ca;      /* --accent-hsl */
  --accent-light: #c5b49d;/* --lightAccent-hsl */
  --accent-dark: #314927; /* --darkAccent-hsl */
  --rule: rgba(88, 59, 31, 0.2);
  --body-font: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; /* placeholder for adobe-garamond-pro */
  --serif: 'Cormorant Garamond', Georgia, serif; /* real heading-font (h2/h3) */
  --sans: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; /* meta text only */
  --h1-font: 'JOLY', var(--serif);
}

* { box-sizing: border-box; }

body {
  font-family: var(--body-font);
  font-weight: 300;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.8;
  font-size: 19px;
  overflow-x: hidden;
}

/* Constrains text/content width without limiting the body itself, so
   full-bleed sections (.hero-bg, .hero-video-wrap, .section-bg) can
   still break out to true edge-to-edge viewport width. */
.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Breaks an element out of its constrained parent to span the full
   viewport width, regardless of nesting depth — the parent just needs
   to be horizontally centered (margin: 0 auto) in the viewport. */
.full-bleed {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: 0.01em;
}
/* Base sizes match the live site's real --heading-1/2/3-size values
   (4rem / 2.8rem / 2.2rem) as the desktop maximum, clamped down for
   narrower viewports since Squarespace's own responsive scaling
   formula wasn't practical to reverse-engineer exactly. */
h1 { font-family: var(--h1-font); font-size: clamp(2.5rem, 6vw, 4rem); margin: 0.6em 0 0.4em; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 1.4em 0 0.6em; }
h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 1.2em 0 0.4em; }

em, i { font-style: italic; }

/* Squarespace's rich-text-editor "highlight" formatting — an underline
   in the section's accent color, not a text-color change. Verified via
   the live site's --text-highlight-color-on-background variable, which
   resolves to the dark-green accent on light/white section themes. */
.highlight {
  text-decoration: underline;
  text-decoration-color: var(--accent-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.text-accent { color: var(--accent-dark); }

a { color: var(--accent-dark); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Header / nav */
.site-header {
  border-bottom: 1px solid var(--rule);
}
.site-header-inner {
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.site-title {
  font-family: var(--serif);
  font-size: 1.3rem;
  border-bottom: none;
  color: var(--ink);
}
.site-header nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.site-header nav a { border-bottom: none; }
.site-header nav ul ul {
  display: none;
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  flex-direction: column;
  gap: 0.5rem;
  text-transform: none;
  z-index: 10;
}
.site-header nav li:hover > ul { display: flex; }

/* Footer */
.site-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--rule);
  padding: 2rem 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
}
/* Live site's custom CSS: `footer.sections * { text-decoration:none; background-image:none }` — no underlines in the footer */
.site-footer a { border-bottom: none; text-decoration: none; }

/* Full-bleed hero background (matches the live site's section-background pattern) */
.hero-bg {
  min-height: 46vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  margin-bottom: 2rem;
  padding: 2rem;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(42, 27, 15, 0.38);
}
.hero-bg h1 {
  position: relative;
  color: var(--paper);
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  max-width: 26em;
}
.hero-video-wrap {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2rem;
}
.hero-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(42, 27, 15, 0.38);
}
.hero-video-wrap h1 {
  position: relative;
  color: var(--paper);
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  max-width: 26em;
  padding: 0 1.5rem;
}

/* Freeform grid sections — reproduces Squarespace Fluid Engine's own
   CSS Grid mechanism (24 content columns + gutters, N rows, each block
   placed via an explicit grid-area) so overlapping/layered sections
   can be rebuilt with the site's real coordinates. */
.gridwrap {
  /* Column widths are derived FROM the container width (not a fixed
     1500px basis) so the 24-column grid can never exceed 100% of its
     own box, regardless of viewport. Gutters are a fixed 4% each;
     the remaining 92% is split across 24 columns + 23 gaps between
     them. This trades exact replication of Squarespace's own (fixed-
     width-column, flexible-gutter) formula for a guarantee that
     content can never overflow/clip off the visible page. */
  /* viewport-based (not %): a % here resolves against the grid's own height, which made row heights vary unpredictably with window width */
  --container-width: min(1500px, 100vw);
  display: grid;
  position: relative;
  column-gap: 11px;
  row-gap: 11px;
  grid-template-columns:
    4%
    repeat(24, minmax(0, calc((92% - 11px * 25) / 24)))
    4%;
  grid-template-rows: repeat(var(--rows, 40), minmax(calc(var(--container-width) * 0.0215), auto));
  margin-top: 3rem;
  margin-bottom: 3rem;
  /* clip sideways only: text that runs slightly past the last row must stay visible, never cut off */
  overflow-x: clip;
  overflow-y: visible;
}
.gridwrap.full-bleed { padding: 3rem 0; }
.gridwrap.has-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }
.gridwrap .gblock { position: relative; }
.gridwrap .gblock img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gridwrap .gdecorative { pointer-events: none; }
.gridwrap .gdecorative img { width: 100%; height: 100%; object-fit: contain; }
.gridwrap .gcircle { border-radius: 50%; overflow: hidden; aspect-ratio: 1; align-self: center; justify-self: center; width: 100%; }
.gridwrap .gtext { align-self: center; padding: 0 0.5rem; }
.gridwrap .gboxed {
  /* background color/opacity set per-block via inline style, matching
     each block's real --tweak-text-block-background-color value */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6%;
}
.gridwrap .gtext h1, .gridwrap .gtext h2, .gridwrap .gtext h3 { margin: 0 0 0.4em; }
.gridwrap .gtext p, .gridwrap .gtext li {
  /* Most grid text blocks on the live site use Squarespace's rich-text-editor
     "large" size setting (.sqsrte-large, a 1.5x scale over base body size) —
     approximating its responsive clamp() formula here. */
  font-size: clamp(1.35rem, 1.1vw + 1rem, 1.75rem);
}
.gridwrap .gtext p { margin: 0 0 0.8em; }
.gridwrap .glabel {
  align-self: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.4rem, 0.9vw + 1.05rem, 1.75rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* The overlapping/layered grid positions were tuned against Squarespace's
   assumed ~1500px+ design width. Below that, the same coordinates can
   produce unintended overlaps between blocks that don't collide at full
   width (text overflowing its own box, boxes appearing to swap
   stacking order) — this isn't a single fixable bug so much as the
   layered design only holding up at the width it was designed for.
   Falling back to a simple single-column stack well before that,
   rather than chasing exact overlap geometry at every intermediate
   width. */
@media (max-width: 1400px) {
  .gridwrap {
    grid-template-columns: minmax(4vw, 1fr) repeat(8, minmax(0, 1fr)) minmax(4vw, 1fr);
    grid-template-rows: none;
    row-gap: 1.5rem;
  }
  .gridwrap .gblock {
    grid-column: 2 / 10 !important;
    grid-row: auto !important;
  }
  /* Stacked layout: keep pictures a sensible size instead of stretching to the whole window */
  .gridwrap .gimage { width: 100%; max-width: 480px; justify-self: center; }
  .gridwrap .gcircle { max-width: 340px; }
  /* decorative leaves/flowers: cap the HEIGHT (the tall sprig used to eat a lot of scrolling) and center them */
  .gridwrap .gdecorative { max-width: 100%; }
  .gridwrap .gdecorative img { width: auto; height: auto; max-height: 130px; max-width: 100%; margin: 0 auto; }
}

/* Offerings teaser (Squarespace's built-in 3-column "user items list" section) */
.offerings-teaser {
  background-size: cover;
  background-position: center;
  padding: 4rem 1.5rem;
  text-align: center;
  color: var(--paper);
}
.offerings-teaser::before { content: none; }
.offerings-teaser-inner {
  background: rgba(42, 27, 15, 0.55);
  padding: 3rem 1.5rem;
}
.offerings-teaser h2 { color: var(--paper); }
.offerings-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 2rem auto 0;
  text-align: left;
}
.offerings-teaser-item p { margin: 0.5rem 0 0; color: rgba(234,230,225,0.85); }
.offerings-teaser-item a {
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom-color: rgba(234,230,225,0.4);
}
@media (max-width: 720px) {
  .offerings-teaser-grid { grid-template-columns: 1fr; }
}

.native-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 6px 4vw;
}
.native-gallery img { width: 100%; height: 260px; object-fit: cover; display: block; }
@media (max-width: 720px) {
  .native-gallery { grid-template-columns: repeat(2, 1fr); }
  .native-gallery img { height: 180px; }
}

.section-bg {
  min-height: 40vh;
  background-size: cover;
  background-position: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Images */
img { max-width: 100%; height: auto; display: block; }
.hero-image { margin: 1.5rem 0; border-radius: 2px; }
article img, .content img { margin: 1.5rem 0; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; margin-right: 0.75rem; }

/* Buttons */
.button {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background: var(--accent-dark);
  color: var(--paper) !important;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  border-radius: 1px;
  margin: 0.5rem 0;
}
.button:hover { background: var(--ink); }

/* Decorative accent divider (foliage/flower images used between sections on the live site) */
.divider {
  text-align: center;
  margin: 3rem 0;
}
.divider img { display: inline-block; max-width: 60px; margin: 0 auto; opacity: 0.85; }

/* Listing pages */
.listing { list-style: none; padding: 0; }
.listing li { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); display: flex; align-items: center; }
.listing a { border-bottom: none; display: flex; align-items: center; color: var(--ink); }
.listing .meta { margin-left: auto; font-family: var(--serif); font-style: italic; color: var(--accent-dark); }

.meta { font-family: var(--serif); font-style: italic; color: var(--accent-dark); }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 1rem; }
  .site-header-inner { flex-direction: column; align-items: flex-start; }
}


/* Newsletter signup (Sequenzy native form) */
.signup-form { position: relative; max-width: 640px; }
.signup-label { position: absolute; left: -9999px; }
.signup-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.signup-input {
  flex: 1 1 260px; min-width: 0; font: inherit; font-size: 1.1rem; padding: 0.8rem 1rem;
  border: 1px solid var(--ink); border-radius: 4px; background: rgba(255,255,255,0.85); color: var(--ink);
}
.signup-input:focus { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.signup-button {
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.8rem 1.6rem; border: 0; border-radius: 4px; background: var(--accent-dark); color: #fff; cursor: pointer;
}
.signup-button:hover { background: var(--ink); }
.signup-note { margin: 0.6rem 0 0; font-size: 0.95rem; opacity: 0.8; }
.signup-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 0.5rem; padding: 4px 10px;
  border: 1px solid rgba(88,59,31,0.2); border-radius: 9999px; background: #fff;
  font: 12px/16px var(--sans); color: #6b7280; text-decoration: none; white-space: nowrap;
}
.signup-badge span { font-weight: 700; color: #1f2937; }


/* Light text for blocks sitting on dark photos (set `light: true` on the block in data/pages/*.yaml) */
.gridwrap .glight, .gridwrap .glight h1, .gridwrap .glight h2, .gridwrap .glight h3, .gridwrap .glight p {
  color: var(--paper);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}


/* Photo-background sections that should touch their neighbours with no paper-colored gap
   (set `flush: true` on the section in data/pages/*.yaml). Cancels the 3rem margins that
   normally separate grid sections. */
.gridwrap.gflush { margin-top: -3rem; margin-bottom: -3rem; }


/* No paper-colored gap between a page banner and the grid section right below it */
.hero-bg:has(+ .gridwrap) { margin-bottom: 0; }
.hero-bg + .gridwrap { margin-top: 0; }


/* Join a section to the one above it with no paper-colored gap (set `joinTop: true` on the section). */
.gridwrap.gjoin { margin-top: -3rem; }

/* Same for the homepage video banner */
.hero-video-wrap:has(+ .gridwrap) { margin-bottom: 0; }
.hero-video-wrap + .gridwrap { margin-top: 0; }