/* ============================================================
   MOCKUP-ONLY — NEVER PASTE INTO SQUARESPACE.
   Emulates just enough of Squarespace 7.1's base stylesheet and
   the by-hand Site Styles settings (palette, fonts, section
   themes, spacing) so mockups/*.html render the way the real site
   will once those clicks are made. The design layer lives in
   css/custom.css, which the mockups load unchanged.

   Site Styles values to set by hand (mirrored here):
     Palette  white=#FAFAF7 lightAccent=#F1ECE3 accent=#B28B4C
              darkAccent=#5C665B black=#303B34
     Fonts    headings: Canela Deck (trial here; licensed for prod);
              body: Inter
     Spacing  site max width 1320px, gutter 4vw
     Header   site title left, nav right, primary button right
   ============================================================ */

/* Canela Deck trial (Commercial Type, private/client-approval use).
   Files live in assets/fonts/trial (gitignored); mockups/fonts symlinks
   there. Production uses a purchased web license, self-hosted. */
@font-face { font-family: "Canela Deck"; font-weight: 300; font-style: normal; src: url("fonts/CanelaDeck-Light-Trial.otf") format("opentype"); }
@font-face { font-family: "Canela Deck"; font-weight: 300; font-style: italic; src: url("fonts/CanelaDeck-LightItalic-Trial.otf") format("opentype"); }
@font-face { font-family: "Canela Deck"; font-weight: 400; font-style: normal; src: url("fonts/CanelaDeck-Regular-Trial.otf") format("opentype"); }
@font-face { font-family: "Canela Deck"; font-weight: 400; font-style: italic; src: url("fonts/CanelaDeck-RegularItalic-Trial.otf") format("opentype"); }
@font-face { font-family: "Canela Deck"; font-weight: 500; font-style: normal; src: url("fonts/CanelaDeck-Medium-Trial.otf") format("opentype"); }
@font-face { font-family: "Canela Deck"; font-weight: 500; font-style: italic; src: url("fonts/CanelaDeck-MediumItalic-Trial.otf") format("opentype"); }

:root {
  --white-hsl: 60, 23%, 97%;
  --lightAccent-hsl: 39, 33%, 92%;
  --accent-hsl: 37, 40%, 50%;
  --darkAccent-hsl: 114, 5%, 38%;
  --black-hsl: 142, 10%, 21%;

  --heading-font-font-family: "Canela Deck", "Instrument Serif", Georgia, serif;
  --body-font-font-family: "Inter", system-ui, sans-serif;

  --sqs-site-gutter: 4vw;
  --sqs-site-max-width: 1320px;
  --sqs-fe-gap: 11px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: hsl(var(--white-hsl));
  color: hsl(var(--black-hsl));
  font-family: var(--body-font-font-family);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--heading-font-font-family); font-weight: 400; margin: 0 0 0.5em; line-height: 1.1; }
h1 { font-size: 3.6rem; }
h2 { font-size: 2.4rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { padding-left: 1.2em; margin: 0 0 1em; }

/* ---- section themes (Site Styles "Colors" themes) ---- */
.page-section, [data-section-theme=""] {
  --siteBackgroundColor: hsl(var(--white-hsl));
  --sectionBackgroundColor: hsl(var(--white-hsl));
  --headingColor: hsl(var(--black-hsl));
  --paragraphColor: hsl(var(--black-hsl));
}
[data-section-theme="light"] {
  --sectionBackgroundColor: hsl(var(--lightAccent-hsl));
}
[data-section-theme="black"] {
  --sectionBackgroundColor: hsl(var(--black-hsl));
  --headingColor: hsl(var(--white-hsl));
  --paragraphColor: hsl(var(--white-hsl));
}
.page-section { position: relative; background: var(--sectionBackgroundColor); color: var(--paragraphColor); }
.page-section h1, .page-section h2, .page-section h3, .page-section h4 { color: var(--headingColor); }
.section-border, .section-background { position: absolute; inset: 0; pointer-events: none; }

/* ---- header ---- */
.header { position: relative; z-index: 10; background: hsl(var(--white-hsl)); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4vw var(--sqs-site-gutter);
  max-width: calc(var(--sqs-site-max-width) + 2 * var(--sqs-site-gutter));
  margin: 0 auto;
}
.header-display-desktop { display: flex; align-items: center; flex: 1; }
.header-title-nav-wrapper { display: flex; align-items: center; gap: 3vw; flex: 1; }
.header-title-text a { text-decoration: none; font-family: var(--heading-font-font-family); font-size: 1.9rem; white-space: nowrap; }
.header-nav { margin-left: auto; }
.header-nav-list { display: flex; gap: 2.2em; }
.header-nav-item a { text-decoration: none; }
.header-actions { margin-left: 2.2em; display: flex; align-items: center; }
.header-actions .btn { text-decoration: none; display: inline-block; }
.header-burger { display: none; }

/* ---- sections + fluid engine ---- */
.content-wrapper {
  position: relative;
  padding: 6vw var(--sqs-site-gutter);
  max-width: calc(var(--sqs-site-max-width) + 2 * var(--sqs-site-gutter));
  margin: 0 auto;
}
.section-height--small .content-wrapper { padding-top: 3vw; padding-bottom: 3vw; }
.section-height--large .content-wrapper { padding-top: 9vw; padding-bottom: 9vw; }

/* 24 content columns, gutter columns either side (Squarespace's 26-track
   grid). Rows: Squarespace uses fixed 11px row units with explicit
   placement; the mockup uses auto rows in DOM order, which any 7.1
   layout can reproduce. */
.fluid-engine {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  column-gap: var(--sqs-fe-gap);
  row-gap: var(--sqs-fe-gap);
  align-items: start;
}
.fe-block { min-width: 0; }
.fe-block .sqs-block { padding: 0; }

/* classic layout engine (blog post bodies) */
.sqs-layout .sqs-row { display: flex; flex-wrap: wrap; }
.sqs-layout .sqs-col-12 { width: 100%; }
.sqs-layout .sqs-block { padding: 17px; }

/* image block */
.sqs-block-image .image-block-outer-wrapper { position: relative; }
.sqs-block-image img { width: 100%; height: auto; object-fit: cover; }
.sqs-block-image figure { margin: 0; }
.sqs-block-image figcaption { font-size: 0.8rem; opacity: 0.75; margin-top: 0.7em; }

/* button block */
.sqs-block-button-container { display: flex; }
.sqs-block-button-container--center { justify-content: center; }
.sqs-block-button-element { display: inline-block; text-decoration: none; cursor: pointer; }

/* quote block */
.quote-block figure { margin: 0; }
.quote-block blockquote { margin: 0; }

/* ---- blog item ---- */
.blog-item-wrapper { max-width: var(--sqs-site-max-width); margin: 0 auto; }
.blog-item-top-wrapper { }
.blog-item-meta-wrapper, .blog-item-author-date-wrapper { display: flex; gap: 0.6em; flex-wrap: wrap; align-items: baseline; }
.blog-item-category-wrapper a { text-decoration: none; }
.blog-item-content-wrapper { }
.item-pagination { display: none; }
.blog-item-comments { display: none; }

/* ---- footer ---- */
footer.sections .page-section { }

/* ---- mobile (Squarespace collapses the fluid grid under 768px) ---- */
@media (max-width: 767px) {
  .fluid-engine { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .fe-block { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .header-inner { flex-wrap: wrap; }
  .header-nav, .header-actions { display: none; }
  .header-burger { display: block; margin-left: auto; width: 26px; height: 18px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
  .content-wrapper { padding-top: 12vw; padding-bottom: 12vw; }
  .sqs-layout .sqs-block { padding: 12px 0; }
}

/* ---- mockup-only annotation: draft copy awaiting Jamie's review ---- */
.jf-draft { display: inline-block; font: 500 11px/1 Inter, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #7C5B29; background: #F3E6CF; border: 1px solid #E2CFA6; padding: 5px 8px; margin: 0 0 1em; border-radius: 2px; }