/* Zone2Nutrition — site styles.
   Measurements come from the live Squarespace site (12 Oct 2026); see docs/design-system.md.
   Breakpoints: phone layout < 768px, desktop grid >= 768px, desktop header >= 800px. */

:root {
  --text: #3f4a49;
  --accent: #d4967d;
  --light: #dcd9d0;
  --dark: #495a58;
  --white: #fff;

  --font-head: 'Marcellus', Georgia, serif;
  --font-body: 'PT Serif', Georgia, serif;

  --gap: 11px;
  --gutter: 6vw;                       /* page side margin on phones */
  --max: 1400px;
  --container: min(var(--max), calc(100vw - var(--gutter) * 2));
  /* Type scale: size = 1rem + (step - 1) * unit. Phones scale with the longer screen side, larger screens with the width (capped at the max width). */
  --unit: 1.2vmax;
  --unit-small: 1.2vmax;
  --header-h: calc(52px + 12vw);
}
@media (min-width: 768px) {
  :root {
    --gutter: 4vw;
    --unit: calc(min(100vw, var(--max)) * 0.012);
    --unit-small: max(16px, 1.2vw);
    --header-h: calc(188px + 12vw);
  }
}
@media (min-width: 800px) {
  :root { --header-h: calc(188px + 3vw); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 2rem 0;
  overflow-wrap: break-word;
}
h1 { font-size: calc(1rem + 3 * var(--unit)); line-height: 1.056; }
h2 { font-size: calc(1rem + 1.8 * var(--unit)); line-height: 1.1136; }
h3 { font-size: calc(1rem + 1.2 * var(--unit)); line-height: 1.1424; }
h4 { font-size: calc(1rem + 0.6 * var(--unit)); line-height: 1.1712; }
h1.as-h2 { font-size: calc(1rem + 1.8 * var(--unit)); line-height: 1.1136; }
p { margin: 1rem 0; }
/* An empty paragraph keeps one blank line, as in the original editor. */
p:empty::before { content: '\200b'; }
.large { font-size: calc(1rem + 0.4 * var(--unit)); line-height: 1.5; }
.small { font-size: calc(1rem - 0.1 * var(--unit-small)); line-height: 1.5; }
.blk--text > :first-child, .rte > :first-child { margin-top: 0; }
.blk--text > :last-child, .rte > :last-child { margin-bottom: 0; }
.center { text-align: center; }
.white { color: var(--white); }
p { overflow-wrap: break-word; }
ul { margin: 1rem 0; padding-left: 40px; }
li > p { margin: 8px 0; }
li::marker { font-size: 0.8em; }

.rte a, .blk--text a { color: var(--accent); text-decoration: underline 1px; text-underline-offset: 0.2em; }
.sec--dark .blk--text h2 a, .sec--black .blk--text h2 a { color: var(--light); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--white); color: var(--text); }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- fade-in (site.js adds .is-in as each block scrolls into view) ---------- */
.fade .site-header .logo,
.fade .site-header .nav-link,
.fade .site-header .burger,
.fade main .blk--text > *,
.fade main .blk--img,
.fade main .blk--btn,
.fade main .blk--acc,
.fade main .blk--form,
.fade .post-card > *,
.fade .post > h1,
.fade .post-meta,
.fade .post-hero,
.fade .post .rte > *,
.fade .pager h2,
.fade footer .blk--text > *,
.fade footer .blk--social,
.fade .is-in { transition: opacity 0.9s ease; }
.fade .site-header .logo:not(.is-in),
.fade .site-header .nav-link:not(.is-in),
.fade .site-header .burger:not(.is-in),
.fade main .blk--text > *:not(.is-in),
.fade main .blk--img:not(.is-in),
.fade main .blk--btn:not(.is-in),
.fade main .blk--acc:not(.is-in),
.fade main .blk--form:not(.is-in),
.fade .post-card > *:not(.is-in),
.fade .post > h1:not(.is-in),
.fade .post-meta:not(.is-in),
.fade .post-hero:not(.is-in),
.fade .post .rte > *:not(.is-in),
.fade .pager h2:not(.is-in),
.fade footer .blk--text > *:not(.is-in),
.fade footer .blk--social:not(.is-in),
.fade .is-in:not(.is-in) { opacity: 0; }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 20; color: var(--white); }
/* The header always blurs whatever scrolls behind it by 4px (as on the original). */
.site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; }
.site-header { isolation: isolate; }
/* Phones and tablets: tighter header once the page is scrolled (as on the original). */
@media (max-width: 799px) { .site-header.is-scrolled .header-inner { padding-top: 18px; padding-bottom: 18px; } }
.header-inner { display: flex; align-items: center; padding: 6vw; }
.logo img { width: 52px; height: 52px; }
.nav { display: none; }
.nav-link {
  text-decoration: none; padding: 1.6px 0; line-height: 24px;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 1.6px) / 0 1px no-repeat;
}
.nav-link.is-active, .nav-link:hover { background-size: 100% 1px; }
.burger {
  margin-left: auto; padding: 1px 6px; width: 47px; height: 37px; border: 0; background: none;
  color: inherit; cursor: pointer; position: relative; z-index: 30;
}
.burger-lines { position: absolute; left: 6px; right: 6px; top: 12px; height: 12px; }
.burger-lines span { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform .25s ease, top .25s ease; }
.burger-lines span:first-child { top: 0; }
.burger-lines span:last-child { top: 11px; }
.menu-open .burger-lines span:first-child { top: 5.5px; transform: rotate(45deg); }
.menu-open .burger-lines span:last-child { top: 5.5px; transform: rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 25; background: var(--white); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  padding: max(env(safe-area-inset-top), 100px) 6vw max(env(safe-area-inset-bottom), 40px);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu-nav { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.menu-nav .nav-link { font-size: 33.15px; line-height: 1; padding: 0; background: none; }
.menu-open { overflow: hidden; }
.menu-open .site-header { color: var(--text); }
.menu-open .logo { opacity: 0.2; }

@media (min-width: 768px) {
  .logo img { width: 188px; height: 188px; }
}
@media (min-width: 800px) {
  .header-inner { padding: 1.5vw 4vw; }
  .nav { display: flex; gap: 1.8vw; margin-left: 3vw; }
  .burger, .menu { display: none !important; }
}

/* ---------- sections ---------- */
.sec { position: relative; display: flex; align-items: center; isolation: isolate; }
.sec--large { min-height: 100vh; min-height: 100svh; }
.sec--medium { min-height: 66vh; min-height: 66svh; }
.sec--small { min-height: 33vh; min-height: 33svh; }
.sec--top { align-items: flex-start; }
.sec--first { padding-top: var(--header-h); }
.sec-content { position: relative; width: 100%; padding: 6.6vmax 0; }
.sec--small .sec-content { padding: 3.3vmax 0; }
.sec--large .sec-content { padding: 10vmax 0; }
.sec--top .sec-content { padding: 4vw 0 20vmax; }

.sec--dark { background: var(--dark); color: var(--white); }
.sec--black { color: var(--white); }
.sec--white { background: var(--white); color: var(--text); }
.sec-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.sec-bg picture { display: contents; }
.sec-bg img { width: 100%; height: 100%; object-fit: cover; }
.sec-overlay { position: absolute; inset: 0; z-index: -1; }

/* ---------- layout grid (8 columns on phones, 24 from 768px) ---------- */
.grid {
  --cell: calc((var(--max) - var(--gap) * 7) / 8);
  display: grid;
  grid-template-columns: minmax(calc(var(--gutter) - var(--gap)), 1fr) repeat(8, minmax(0, var(--cell))) minmax(calc(var(--gutter) - var(--gap)), 1fr);
  grid-template-rows: repeat(var(--rows-m), minmax(24px, auto));
  gap: var(--gap);
  overflow-x: clip;
}
.blk { grid-area: var(--m); display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
.blk--middle { justify-content: center; }
/* text blocks are plain blocks so heading and paragraph margins collapse as on the original site */
.blk--text { display: block; }
@media (min-width: 768px) {
  .grid {
    --cell: calc((var(--max) - var(--gap) * 23) / 24);
    grid-template-columns: minmax(calc(var(--gutter) - var(--gap)), 1fr) repeat(24, minmax(0, var(--cell))) minmax(calc(var(--gutter) - var(--gap)), 1fr);
    grid-template-rows: repeat(var(--rows-d), minmax(calc(var(--container) * 0.0215), auto));
  }
  .blk { grid-area: var(--d); }
}

/* image blocks fill their grid area */
.blk--img { position: relative; }
.blk--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blk--img.contain img { object-fit: contain; }

/* buttons fill their grid area */
.btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 100%; padding: 0 2.2em; border-radius: 300px;
  font-family: var(--font-body); font-size: 16px; line-height: normal; text-decoration: none;
  transition: opacity .2s ease;
}
.btn:hover { opacity: 0.8; }
.btn--primary { background: var(--accent); color: var(--white); }
.btn--secondary { border: 1px solid var(--accent); color: var(--accent); }

/* accordion (services) */
.accordion { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--text); }
.accordion details { border-top: 1px solid var(--text); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px 0; cursor: pointer; list-style: none;
  font-size: calc(1rem + 0.4 * var(--unit)); line-height: 1.32;
}
.accordion summary::-webkit-details-marker { display: none; }
.acc-title { padding-right: 14px; }
.acc-icon { position: relative; flex: none; width: 14px; height: 14px; }
.acc-icon::before, .acc-icon::after { content: ''; position: absolute; background: currentColor; }
.acc-icon::before { left: 0; right: 0; top: 50%; height: 1px; }
.acc-icon::after { top: 0; bottom: 0; left: 50%; width: 1px; transition: transform .2s ease; }
details[open] .acc-icon::after { transform: scaleY(0); }
.acc-body { padding: 0 0 30px; }
.acc-body p { margin: 0; }

/* rounded note (services) */
.note { background: rgba(220, 217, 208, 0.25); border-radius: 60px; padding: 0 3%; display: flex; flex-direction: column; justify-content: center; }
.note p { margin: 0; }

/* scaled heading with accent underline (services hero) */
.blk:has(> .fit-heading) { container-type: inline-size; }
.fit-heading { font-size: 7.6cqw; line-height: 1; margin: 0; text-align: center; font-weight: 700; white-space: nowrap; }
.highlight { background: linear-gradient(var(--accent), var(--accent)) 0 95% / 100% 0.1em no-repeat; }

/* social icon */
.social { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; margin: -10px; color: var(--white); }

/* footer links */
.site-footer .blk--text a { color: var(--accent); }

/* ---------- contact form ---------- */
.form { font-size: 16px; }
.form fieldset { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: 4px; line-height: 28px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form label { display: block; }
.form .lbl { display: block; line-height: 28px; }
.form .sub { font-size: 12px; line-height: normal; margin-bottom: 4px; }
.req { opacity: 0.7; font-size: 0.85em; }
.form input, .form textarea {
  display: block; width: 100%; margin: 0; padding: 10px; border: 1px solid #000; border-radius: 0;
  background: #fafafa; color: #000; font: inherit; font-size: 16px; line-height: 24px;
}
.form textarea { height: 100px; resize: vertical; }
.form .field { margin-bottom: 22px; }
.form button {
  padding: 24px 2.2em; border: 0; border-radius: 300px; cursor: pointer;
  background: var(--accent); color: var(--white); font: inherit; font-size: 16px; line-height: normal;
}
.form button:hover { opacity: 0.8; }
.form .hp { display: none; }
.form-error { color: var(--white); }
.form-done { font-size: 16px; color: var(--white); }

/* ---------- blog list ---------- */
/* Two masonry columns (left: posts 1 and 4, right: 2 and 3), one column in date order on phones.
   Spacing is a share of the list's content width (--w), as on the original. */
.blog-sec { display: block; padding-top: var(--header-h); }
.blog-list {
  --w: calc(min(1400px, 100vw) - var(--gutter) * 2);
  display: flex; flex-direction: column; row-gap: calc(var(--w) * 0.1045);
  max-width: 1400px; margin: 0 auto; padding: 4vw var(--gutter);
}
.blog-col { display: contents; }
.post-card { text-align: center; }
.post-card img { width: 100%; height: auto; }
.post-card time { display: block; margin-top: 20px; }
.post-card h2 { font-size: calc(1rem + 1.2 * var(--unit)); line-height: 1.2; margin: 8px 0 10px; padding: 0 2%; }
.post-card h2 a { text-decoration: none; }
.read-more { display: inline-block; margin-top: 7.8px; color: var(--accent); text-decoration: none; font-size: calc(1rem - 0.1 * var(--unit-small)); line-height: 1.5; }
@media (min-width: 768px) {
  .blog-list { flex-direction: row; align-items: flex-start; column-gap: calc(var(--w) * 0.075); }
  .blog-col { display: flex; flex-direction: column; row-gap: calc(var(--w) * 0.1045); flex: 1 1 0; min-width: 0; }
  .post-card time { margin-top: 23px; }
  .post-card h2 { margin-top: 20px; }
  .read-more { margin-top: 0; }
}

/* ---------- blog post ---------- */
/* Article column: full width on phones, half the content width from 768px (Squarespace "narrow" post width). */
.post-sec { display: block; padding: calc(var(--header-h) + var(--gutter)) 0 calc(17px + 9vw); }
.post { padding: 0 var(--gutter); }
.post h1 { font-size: calc(1rem + 3 * var(--unit)); line-height: 1.2; margin: 0 0 1.2rem; }
.post-meta { display: flex; }
.post-meta time { flex: 0 1 auto; min-width: 0; }
.post-meta time::after { content: '\2022'; padding: 0 8px; }
.post-meta span { flex: 0 1 auto; min-width: 0; }
.post-hero { margin: 69px 0 34px; }
.post-hero img { width: 100%; height: auto; }
.post .rte { color: var(--white); }
@media (min-width: 768px) {
  .post-sec { padding-bottom: calc(17px + 7vw); }
  .post { width: calc(var(--container) * 0.5); margin: 0 auto; padding: 0; }
  .post h1 { margin-bottom: 32px; }
  .post-hero { margin-top: 52px; }
}
.pager { display: flex; padding: 3vw var(--gutter); }
.pager a { display: flex; align-items: center; flex: 0 0 50%; min-width: 0; text-decoration: none; color: var(--white); }
.pager a > span { min-width: 0; }
.pager .next { justify-content: flex-end; text-align: right; margin-left: auto; }
.pager .pager-label { display: none; }
.pager h2 { font-size: calc(1rem + 1.2 * var(--unit)); line-height: 1; margin: 0; }
.pager svg { width: 18px; height: 32px; flex: none; fill: none; stroke: currentColor; }
.pager .prev svg { margin-right: 25px; }
.pager .next svg { margin-left: 25px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}