/*
Theme Name: Goldenlay Wireframe
Theme URI: 
Author: Thrive Media
Description: Hand-drawn wireframe theme for Goldenlay Agri Limited — 13-page marketing site (Goldenlay eggs, NaNkoko, GreenGold, Cropping). Faithful reproduction of the approved wireframe prototype. Content is currently hardcoded per page; recipes ready to wire to WP Recipe Maker.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: goldenlay-wireframe
*/

/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/66a8ab00-b23f-412b-a746-074939570a16.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/31d338cf-cf9a-4be8-8dbd-04ead500843d.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ea0a356f-3aef-4c1d-83f1-502410e5257b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/7ca667dc-309a-4667-b55e-c6491c173772.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/66a8ab00-b23f-412b-a746-074939570a16.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/31d338cf-cf9a-4be8-8dbd-04ead500843d.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ea0a356f-3aef-4c1d-83f1-502410e5257b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/7ca667dc-309a-4667-b55e-c6491c173772.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/66a8ab00-b23f-412b-a746-074939570a16.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/31d338cf-cf9a-4be8-8dbd-04ead500843d.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ea0a356f-3aef-4c1d-83f1-502410e5257b.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/7ca667dc-309a-4667-b55e-c6491c173772.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/73fd9dae-8dbd-498a-b5e8-0cd52674f33d.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/ac87fc27-f331-4699-b933-2e692e808a85.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/6f48b3ec-8826-44f4-b5c3-330da8056885.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/4b38c05b-4128-4e5d-bba1-e7c54c36dd40.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/58603e72-7ba8-4f1a-80e4-30b6739364b2.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/c295b4f3-2fc0-4bee-a0f6-25b231c9e0e2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/dbee4156-13f5-4991-b64c-010d0efecdc3.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/9f3afc5a-1aea-49d7-9b2e-6fdb70d533d3.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/100b293e-0825-4791-a9d8-706af3d865b3.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



  :root {
    --gold: #b8860b;
    --gold-soft: #f3e9cf;
    --ink: #2b2b2b;
    --ink-soft: #5a5752;
    --line: #2b2b2b;
    --paper: #f7f5ef;
    --paper-2: #efece3;
    --slot: #e7e4da;
    --chrome: #2a2724;
    --hand: 'Caveat', cursive;
    --body: 'Kalam', 'Caveat', cursive;
    --wob: 255px 15px 225px 15px / 15px 225px 15px 255px;
    --wob2: 15px 225px 15px 255px / 255px 15px 225px 15px;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--paper);
    font-family: var(--body);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }

  /* ===================== TOOL CHROME (page-switcher) ===================== */
  .chrome {
    position: sticky; top: 0; z-index: 100;
    background: var(--chrome);
    color: #efece3;
    border-bottom: 2px solid #000;
    box-shadow: 0 3px 0 rgba(0,0,0,0.25);
  }
  .chrome-top {
    display: flex; align-items: center; gap: 16px;
    padding: 9px 18px 7px;
  }
  .chrome-brand {
    font-family: var(--hand); font-weight: 700; font-size: 22px;
    letter-spacing: .3px; white-space: nowrap;
    display: flex; align-items: center; gap: 9px;
  }
  .chrome-brand .dot { width: 13px; height: 13px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(184,134,11,.3); }
  .chrome-brand small { font-family: var(--body); font-weight: 300; font-size: 12px; color: #b7b2a6; letter-spacing: 1.5px; text-transform: uppercase; }
  .chrome-spacer { flex: 1; }
  .chrome-meta { font-family: var(--hand); font-size: 19px; color: #d8cfa0; white-space: nowrap; }
  .chrome-nav-btn {
    font-family: var(--hand); font-size: 20px; cursor: pointer;
    background: transparent; color: #efece3; border: 2px solid #5a564f;
    border-radius: 50%; width: 34px; height: 34px; line-height: 1; padding: 0;
    display: grid; place-items: center;
  }
  .chrome-nav-btn:hover { border-color: var(--gold); color: var(--gold); }

  /* viewport toggle */
  .vp-toggle { display: flex; border: 2px solid #5a564f; border-radius: 12px; overflow: hidden; }
  .vp-btn {
    font-family: var(--hand); font-size: 17px; line-height: 1; cursor: pointer;
    background: transparent; color: #cfcabf; border: 0; padding: 7px 14px 6px;
  }
  .vp-btn + .vp-btn { border-left: 2px solid #5a564f; }
  .vp-btn:not(.on):hover { color: #fff; }
  .vp-btn.on { background: var(--gold); color: #1f1c18; }

  .chrome-tabs {
    display: flex; align-items: stretch; gap: 4px;
    padding: 0 14px 10px; overflow-x: auto; scrollbar-width: thin;
  }
  .tab-group { display: flex; align-items: stretch; gap: 4px; padding-right: 8px; border-right: 1px dashed #56524b; margin-right: 4px; }
  .tab-group:last-child { border-right: none; }
  .tab-group-label {
    font-family: var(--body); font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase;
    color: #8a857b; align-self: center; white-space: nowrap; padding: 0 6px 0 2px;
  }
  .tab {
    font-family: var(--hand); font-size: 16px; line-height: 1.05;
    background: #3a3631; color: #cfcabf; border: 1.5px solid #4d493f;
    border-radius: 10px 9px 11px 8px; padding: 6px 11px; cursor: pointer;
    white-space: nowrap; display: flex; flex-direction: column; gap: 1px; min-width: max-content;
    transition: transform .08s ease;
  }
  .tab .tnum { font-size: 11px; color: #8f8a7f; font-family: var(--body); }
  .tab:hover { transform: translateY(-1px); border-color: var(--gold); color: #fff; }
  .tab.active { background: var(--gold); color: #1f1c18; border-color: #8a6608; }
  .tab.active .tnum { color: #4a3a06; }

  /* ===================== PAGE STAGE ===================== */
  .stage { padding: 0; display: block; }
  .page {
    width: 100%; max-width: none; background: var(--paper);
    overflow: visible;
  }
  .page-tag {
    font-family: var(--body); font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--ink-soft); background: var(--paper-2); border-bottom: 1.5px dashed #bdb8aa;
    padding: 7px 22px; display: flex; gap: 10px; align-items: center;
  }
  .page-tag b { font-weight: 700; color: var(--ink); font-family: var(--hand); font-size: 16px; letter-spacing: 0; text-transform: none; }
  .page-tag .pill { margin-left: auto; font-family: var(--hand); font-size: 14px; color: var(--gold); border: 1.5px solid var(--gold); border-radius: 20px; padding: 1px 10px; letter-spacing: 0; }

  /* mock site header */
  .site-head {
    display: flex; align-items: center; gap: 18px; padding: 14px max(30px, calc((100% - 1240px) / 2));
    border-bottom: 2px solid var(--line); background: var(--paper);
  }
  .logo-slot {
    display: grid; place-items: center start;
    background: transparent; border: none;
  }
  .logo-slot img { display: block; height: 52px; width: auto; }
  .logo-slot.foot img { height: 64px; }
  /* text logo (the prototype's logo image was never supplied — hand-lettered fallback) */
  .logo-text { font-family: var(--hand); font-weight: 700; font-size: 34px; line-height: 1; color: var(--gold); letter-spacing: .3px; white-space: nowrap; }
  .logo-slot.foot .logo-text { font-size: 40px; color: var(--ink); }
  .site-nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .nav-item { position: relative; }
  .nav-top { font-family: var(--hand); font-size: 18px; color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 8px 12px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .nav-top:hover { color: var(--ink); }
  .nav-item.active > .nav-top { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .caret { font-style: normal; font-size: 13px; opacity: .55; transform: rotate(90deg); display: inline-block; transition: transform .15s ease; }
  .nav-item:hover .caret { transform: rotate(90deg) translateX(2px); opacity: .8; }
  /* invisible hover bridge so the menu doesn't close in the header gap */
  .nav-item::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
  .nav-drop { position: absolute; top: calc(100% + 8px); left: 0; min-width: 215px; background: var(--paper); border: 2px solid var(--line); border-radius: 14px; box-shadow: 5px 6px 0 rgba(43,43,43,.12); padding: 8px; display: none; z-index: 60; }
  .nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { display: block; }
  .nav-link { display: block; width: 100%; text-align: left; font-family: var(--hand); font-size: 17px; color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 8px 12px; border-radius: 9px; white-space: nowrap; }
  .nav-link:hover { background: var(--gold-soft); color: var(--ink); }
  .nav-link.on { color: var(--ink); font-weight: 700; }
  .logo-slot { cursor: pointer; }
  button.logo-slot { background: none; border: none; padding: 0; }
  .site-head .head-cta { margin-left: auto; }
  .burger {
    display: none; margin-left: auto; width: 40px; height: 40px;
    border: 2px solid var(--line); border-radius: var(--wob2); background: var(--paper); cursor: pointer;
    place-items: center; font-family: var(--hand); font-size: 21px; color: var(--ink);
  }

  /* hide the old wireframe tool chrome — the site nav is the real navigation now */
  .chrome { display: none !important; }

  /* real responsive header (driven by screen width, not a toggle) */
  @media (max-width: 760px) {
    .site-head { flex-wrap: wrap; position: relative; }
    .burger { display: grid; }
    .site-nav { display: none; flex-direction: column; align-items: stretch; width: 100%; order: 3; gap: 2px; margin-top: 6px; }
    .site-nav.open { display: flex; }
    .nav-item { width: 100%; }
    .nav-item::after { display: none; }
    .nav-top { width: 100%; justify-content: space-between; font-size: 20px; }
    .nav-top .caret { display: none; }
    .nav-drop { position: static; display: block; border: none; box-shadow: none; padding: 0 0 8px 16px; min-width: 0; background: none; }
    .nav-link { font-size: 18px; }
  }

  /* ===================== BLOCKS ===================== */
  .wrap { padding: 0 30px; }
  section.block { padding: 44px max(30px, calc((100% - 1240px) / 2)); position: relative; --sec: var(--paper); }
  /* refined hand-inked divider — thin, fades at the ends, faint organic wobble */
  section.block:not(:last-child)::after {
    content: ''; position: absolute; left: 8%; right: 8%; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, transparent 0%, #c2ad84 14%, #c2ad84 86%, transparent 100%);
    filter: url(#rough-a); opacity: .75; pointer-events: none; z-index: 1;
  }
  /* alternating warm section backgrounds for rhythm */
  .page section.block:nth-of-type(3n+2) { background: #f3eddd; --sec: #f3eddd; }
  .page section.block:nth-of-type(3n+3) { background: #edf0e6; --sec: #edf0e6; }
  /* loop sections carry a baked cream illustration — match the section to its background */
  .page section.block:has(.loop) { background: #f6f4ec; --sec: #f6f4ec; }
  .eyebrow { font-family: var(--body); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; font-weight: 700; }
  h1.wf { font-family: var(--hand); font-weight: 700; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; margin: 0 0 16px; color: var(--ink); }
  h2.wf { font-family: var(--hand); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; margin: 0 0 14px; color: var(--ink); position: relative; display: inline-block; padding-bottom: 7px; }
  h2.wf::after { content: ''; position: absolute; left: 0; right: 6%; bottom: 0; height: 4px; background: var(--gold); border-radius: 4px; opacity: .85; }
  h3.wf { font-family: var(--hand); font-weight: 700; font-size: 24px; line-height: 1.14; margin: 0 0 6px; color: var(--ink); }
  p.wf { font-family: var(--body); font-weight: 300; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 12px; max-width: 62ch; text-wrap: pretty; }
  .lede { font-size: 19px; color: var(--ink); font-weight: 400; }
  .body-subhead { font-family: var(--hand); font-weight: 700; font-size: 21px; line-height: 1.18; color: var(--ink); margin: 22px 0 8px; }

  /* image slots — clean hi-fi frames (rounded rectangles) */
  .imgslot {
    position: relative; background: var(--slot);
    border: 1.5px solid #d7d2c6; border-radius: 16px;
    min-height: 200px; overflow: hidden;
  }
  .imgslot image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* once a real image is in the slot, drop the placeholder fill but keep a thin rounded box */
  .imgslot:has(image-slot[data-filled]) { background: none; }
  .imgslot.hero:has(image-slot[data-filled]), .imgslot.contain:has(image-slot[data-filled]) { border-color: transparent; }
  .imgslot image-slot::part(empty) { font-family: var(--hand); font-size: 17.5px; color: #6f6b61; line-height: 1.15; }
  .imgslot image-slot::part(ring) { display: none; }
  .imgslot.tall { min-height: 360px; }
  .imgslot.hero { min-height: 440px; border-radius: 0; }
  /* homepage hero: taller than the default sliver so faces fit, but capped so it's not overwhelming */
  .imgslot.hero:has(image-slot[id^="p01-eggs-in-the-carton"]) { min-height: 0; width: 100%; height: clamp(440px, 38vw, 620px); }
  .imgslot.hero, .imgslot.hero image-slot::part(frame),
  .imgslot.is-hero, .imgslot.is-hero image-slot::part(frame) { border-radius: 0 !important; }
  /* contain slots: show the whole image (e.g. wide process strips); blend into the section */
  .imgslot.contain { min-height: 0; border-color: transparent; background: none; align-self: center; }
  .imgslot.contain image-slot::part(frame) { background: var(--paper); }

  /* hand-drawn ink frames on content + split-hero images (not full-bleed heroes or wide strips) */
  .col-img .imgslot:not(.contain),
  .stack-figure > .imgslot { overflow: visible; border-color: transparent; }
  .col-img .imgslot:not(.contain)::after,
  .stack-figure > .imgslot::after {
    content: ''; position: absolute; inset: -5px;
    border: 2.5px solid var(--ink); border-radius: 18px;
    filter: url(#rough-a); pointer-events: none; z-index: 3;
  }

  /* hero overlay card */
  .hero-card {
    position: absolute; left: 34px; bottom: 34px; max-width: 640px;
    background: rgba(247,245,239,.93); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    border: 2.5px solid var(--line); border-radius: var(--wob2);
    padding: 24px 26px; box-shadow: 5px 5px 0 rgba(0,0,0,.12);
  }
  .hero-card.right { left: auto; right: 34px; }
  .hero-card.center { left: 50%; right: auto; transform: translateX(-50%); max-width: 680px; text-align: center; }
  .hero-card.center .eyebrow { margin-left: auto; margin-right: auto; }
  .hero-card.center h1.wf, .hero-card.center p.wf { margin-left: auto; margin-right: auto; }
  .hero-card.center .btnrow { justify-content: center; }

  /* buttons — hand-drawn, tactile, on-brand */
  .btnrow { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
  .btn {
    font-family: var(--hand); font-weight: 700; font-size: 19px; line-height: 1; color: var(--ink);
    border: 2.5px solid var(--ink); border-radius: 22px 18px 24px 16px / 16px 24px 18px 22px;
    padding: 11px 20px; background: var(--paper); cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    box-shadow: 3px 4px 0 rgba(43,43,43,.16);
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
  }
  .btn::after { content: '\2192'; font-size: 18px; opacity: .8; transition: transform .16s ease; }
  .btn:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 5px 7px 0 rgba(43,43,43,.18); }
  .btn:hover::after { transform: translateX(4px); opacity: 1; }
  .btn:active { transform: translateY(1px); box-shadow: 2px 2px 0 rgba(43,43,43,.16); }
  .btn:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 3px; }
  .btn.solid { background: var(--gold); color: #fff; box-shadow: 3px 4px 0 rgba(120,86,4,.4); }
  .btn.solid:hover { box-shadow: 5px 7px 0 rgba(120,86,4,.45); }
  .btn.ghost { background: var(--paper); }

  /* layout helpers */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .split.flip .col-text { order: 2; }
  .split.narrow-img { grid-template-columns: 1.1fr .9fr; }
  /* stacked split: headline → image → body, single centred column */
  .stack { max-width: 1000px; margin: 0 auto; text-align: center; }
  .stack > h2.wf, .stack > h1.wf, .stack > .eyebrow { text-align: center; }
  .stack .stack-figure { margin: 18px 0 22px; width: 100%; }
  .stack .stack-figure .imgslot { min-height: 380px; }
  .stack .stack-figure .imgslot.stack-img { min-height: 380px; }
  /* center the body by padding the full-width column symmetrically (1000 → ~760 of text),
     rather than an auto-margin max-width block (which some renderers/captures left-align) */
  .stack .stack-body { width: 100%; padding: 0 120px; box-sizing: border-box; text-align: center; }
  .stack .stack-body p { margin-left: auto; margin-right: auto; }
  .stack .stack-body .checklist { display: inline-block; text-align: left; }
  .stack .stack-body .btnrow { justify-content: center; }
  .stat-strip { overflow: hidden; padding: 16px 0; background: var(--gold); border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); }
  .stat-track { display: flex; width: max-content; animation: stat-marquee 38s linear infinite; }
  .stat-strip:hover .stat-track { animation-play-state: paused; }
  .stat-run { display: flex; align-items: center; gap: 44px; padding-right: 44px; flex: none; }
  .stat-strip .s { font-family: var(--hand); font-size: 18px; color: #fff; display: flex; align-items: center; gap: 44px; white-space: nowrap; }
  .stat-strip .s::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; }
  @keyframes stat-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .stat-track { animation: none; } }

  .checklist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
  .checklist li { font-family: var(--body); font-weight: 300; font-size: 16.5px; color: var(--ink-soft); display: flex; gap: 12px; align-items: flex-start; max-width: 60ch; }
  .checklist li::before { content: '✓'; font-family: var(--hand); font-weight: 700; color: var(--gold); font-size: 22px; line-height: 1; flex: none; margin-top: 1px; }

  .cards { display: grid; gap: 22px; }
  .cards.c2 { grid-template-columns: repeat(2, 1fr); }
  .cards.c3 { grid-template-columns: repeat(3, 1fr); }
  .cards.c4 { grid-template-columns: repeat(4, 1fr); }
  .card { border: 1.5px solid #d7d2c6; border-radius: 16px; background: var(--paper); padding: 0 0 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
  .card .imgslot { border: none; border-radius: 0; min-height: 150px; }
  .card .imgslot image-slot::part(frame) { border-radius: 0 !important; }
  .card .imgslot image-slot::part(empty) { font-size: 15px; }
  /* square-image card variant */
  .cards-square .card .imgslot { aspect-ratio: 1 / 1; min-height: 0; }
  .card .card-body { padding: 12px 16px 2px; }
  .card .card-tag { font-family: var(--body); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 700; }
  .card h3.wf { margin: 4px 0 6px; }
  .card p.wf { font-size: 14.5px; margin: 0; }
  .card-link { cursor: pointer; transition: transform .22s cubic-bezier(.34,1.4,.5,1), box-shadow .22s ease, border-color .22s ease; }
  .card-link:hover { transform: translateY(-6px) rotate(-0.7deg); box-shadow: 0 12px 26px rgba(0,0,0,.12); border-color: var(--gold); }
  .card-link .imgslot { transition: transform .35s ease; }
  .card-link:hover .imgslot { transform: scale(1.06); }
  .card-link .card-tag { transition: transform .22s ease; }
  .card-link:hover .card-tag { transform: translateY(-2px) rotate(-2deg); }
  .card-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .card-go { display: inline-block; margin-top: 10px; font-family: var(--hand); font-size: 16px; color: var(--gold); opacity: .9; transition: transform .16s ease; }
  .card-link:hover .card-go { transform: translateX(5px); }
  @media (prefers-reduced-motion: reduce) {
    .card-link:hover { transform: none; }
    .card-link:hover .imgslot { transform: none; }
  }

  .gallery { display: grid; gap: 16px; }
  .gallery.g3 { grid-template-columns: repeat(3, 1fr); }
  .gallery.g4 { grid-template-columns: repeat(4, 1fr); }
  .gallery.g5 { grid-template-columns: repeat(5, 1fr); }
  .gallery .imgslot { min-height: 180px; border: 1.5px solid #d7d2c6; border-radius: 12px; }
  /* stacked-row galleries: square containers so they fit evenly next to each other */
  .stack-figure .gallery .imgslot { aspect-ratio: 1 / 1; min-height: 0; }
  /* keep the border once a photo is dropped, and clip the image to the same corners */
  .gallery .imgslot:has(image-slot[data-filled]) { border-color: #d7d2c6; }
  .gallery .imgslot image-slot::part(frame) { border-radius: 12px !important; }

  .center { text-align: center; }
  .center h2.wf { display: inline-block; }
  .center .btnrow { justify-content: center; }
  .center p.wf { margin-left: auto; margin-right: auto; }

  .cta-band {
    position: relative; overflow: hidden;
    background:
      radial-gradient(circle at 13% 24%, rgba(78,122,62,.12) 0 7px, transparent 8px),
      radial-gradient(circle at 86% 28%, rgba(184,134,11,.18) 0 9px, transparent 10px),
      radial-gradient(circle at 80% 80%, rgba(78,122,62,.11) 0 6px, transparent 7px),
      radial-gradient(circle at 19% 78%, rgba(184,134,11,.16) 0 6px, transparent 7px),
      linear-gradient(180deg, #fdf7e6 0%, var(--gold-soft) 100%);
    border: 2.5px solid var(--ink);
    border-radius: 28px 22px 30px 20px / 20px 30px 22px 28px;
    padding: 46px 40px 42px; text-align: center;
    box-shadow: 6px 7px 0 rgba(184,134,11,.30);
  }
  .cta-band h2.wf::after { display: none; }
  .cta-band p.wf { margin-left: auto; margin-right: auto; }
  .cta-band .btnrow { justify-content: center; margin-top: 22px; }

  /* loop diagram */
  .loop-wrap { display: grid; place-items: center; margin: 26px auto 4px; }
  .loop {
    position: relative; width: 540px; max-width: 100%; aspect-ratio: 1; margin: 0 auto;
  }
  .loop .ring { position: absolute; inset: 14%; border: 2.5px dashed var(--gold); border-radius: 50%; }
  /* orbit marker — injected as the last child so it sits above the illustration; runs always */
  .loop-orbit { position: absolute; inset: 7%; z-index: 50; pointer-events: none; transform-origin: 50% 50%; animation: loop-spin 9s linear infinite; }
  .loop-orbit .loop-dot { position: absolute; top: -11px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--gold); border: 3px solid var(--paper); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
  @keyframes loop-spin { to { transform: rotate(360deg); } }
  .loop .hub {
    position: absolute; inset: 33%; border: 2.5px solid var(--line); border-radius: 50%;
    display: grid; place-items: center; text-align: center; background: var(--sec, var(--paper));
    font-family: var(--hand); font-size: 20px; color: var(--ink); padding: 10px;
  }
  .loop .node {
    position: absolute; width: 168px; transform: translate(-50%, -50%);
    background: var(--sec, var(--paper)); border: 2px solid var(--line); border-radius: var(--wob);
    padding: 9px 12px; text-align: center; font-family: var(--hand); font-size: 17px; color: var(--ink); line-height: 1.08;
  }
  .loop .node b { display: block; font-family: var(--body); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; font-weight: 700; }
  .loop .n-top { left: 50%; top: 4%; }
  .loop .n-right { left: 96%; top: 50%; }
  .loop .n-bottom { left: 50%; top: 96%; }
  .loop .n-left { left: 4%; top: 50%; }
  .loop .arc { position: absolute; font-family: var(--hand); font-size: 30px; color: var(--gold); transform: translate(-50%,-50%); }
  /* the loop diagram doubles as a drop zone for the final artwork */
  .loop > image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
  .loop > image-slot::part(ring) { display: none; }
  .loop > image-slot::part(empty) {
    opacity: 0; transition: opacity .15s;
    justify-content: center; background: rgba(247,245,239,.88);
    font-family: var(--hand); font-size: 18px; color: #6f6b61;
  }
  .loop:hover > image-slot::part(empty) { opacity: 1; }
  .loop:has(image-slot[data-filled]) .ring,
  .loop:has(image-slot[data-filled]) .arc,
  .loop:has(image-slot[data-filled]) .hub,
  .loop:has(image-slot[data-filled]) .node { visibility: hidden; }
  /* when the final artwork is dropped in, match the loop box to the artwork's
     aspect ratio so there is no letterbox, and blend any remainder into the section */
  .loop:has(image-slot[data-filled]) { aspect-ratio: 1080 / 815; }
  .loop > image-slot::part(frame) { background: var(--paper); }

  /* form */
  .form-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: start; }
  .fields { display: flex; flex-direction: column; gap: 14px; }
  .field { display: flex; flex-direction: column; gap: 5px; }
  .field label, .field .flabel { font-family: var(--hand); font-size: 17px; color: var(--ink); }
  .field .input { border: 2px solid var(--line); border-radius: var(--wob2); background: var(--paper); min-height: 40px; padding: 7px 12px; font-family: var(--body); font-size: 15px; color: var(--ink); width: 100%; box-sizing: border-box; }
  .field .input::placeholder { color: #9b968b; }
  .field .input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,134,11,.18); }
  .field textarea.input.area { min-height: 92px; resize: vertical; line-height: 1.5; }
  .field select.input.select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
    font-family: var(--hand); font-size: 17px; color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath d='M1 1 L7 8 L13 1' fill='none' stroke='%232b2b2b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
  }
  .field select.input.select:invalid { color: #9b968b; }
  .radio-row { display: flex; flex-direction: column; gap: 9px; }
  .radio-row .opt { display: flex; gap: 10px; align-items: center; font-family: var(--body); font-weight: 300; font-size: 15.5px; color: var(--ink-soft); cursor: pointer; }
  .radio-row .opt input { appearance: none; -webkit-appearance: none; margin: 0; width: 17px; height: 17px; border: 2px solid var(--line); border-radius: 50%; flex: none; cursor: pointer; display: grid; place-content: center; }
  .radio-row .opt input::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .12s ease; }
  .radio-row .opt input:checked { border-color: var(--gold); }
  .radio-row .opt input:checked::before { transform: scale(1); }
  .radio-row .opt:has(input:checked) .otext { color: var(--ink); }
  .form-thanks { font-family: var(--hand); font-size: 22px; color: var(--green-deep, #38592c); border: 2.5px solid var(--green, #4e7a3e); border-radius: var(--wob2); background: #edf2e6; padding: 22px 24px; }

  .note-box { border: 2px dashed var(--gold); border-radius: var(--wob); padding: 16px 18px; background: var(--paper); }
  .note-box h3.wf { margin-bottom: 8px; }

  /* footer */
  .site-foot { background: var(--paper-2); border-top: 2px solid var(--line); padding: 36px max(30px, calc((100% - 1240px) / 2)); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 26px; }
  .site-foot .fcol { display: flex; flex-direction: column; gap: 8px; }
  .site-foot .fcol .fh { font-family: var(--hand); font-size: 18px; color: var(--ink); }
  .site-foot .fcol span { font-family: var(--body); font-weight: 300; font-size: 13px; color: var(--ink-soft); }
  .site-foot .fcol button.flink, .site-foot .fcol a.flink { display: block; text-align: left; background: none; border: none; cursor: pointer; font-family: var(--body); font-weight: 300; font-size: 13px; color: var(--ink-soft); text-decoration: none; padding: 2px 0; }
  .site-foot .fcol button.flink:hover, .site-foot .fcol a.flink:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
  button.logo-slot.foot { background: none; border: none; padding: 0; cursor: pointer; }
  .site-foot .logo-slot { margin-bottom: 10px; }

  .ann { font-family: var(--hand); font-size: 15px; color: var(--gold); margin: 0 0 4px; }

  @media (max-width: 820px) {
    .split, .form-grid { grid-template-columns: 1fr; }
    .cards.c4 { grid-template-columns: repeat(2,1fr); }
    .cards.c3 { grid-template-columns: 1fr; }
    .site-foot { grid-template-columns: 1fr 1fr; }
  }

  /* ===================== MOBILE VIEWPORT (toggle) ===================== */
  body.vp-mobile .page { max-width: 100%; }
  body.vp-mobile .page-tag { padding: 7px 14px; }
  body.vp-mobile .site-head { padding: 12px 16px; gap: 12px; }
  /* nav → burger is handled by the @media(max-width:860px) block above */
  body.vp-mobile section.block { padding: 26px 16px; }
  body.vp-mobile h1.wf { font-size: 35px; }
  body.vp-mobile h2.wf { font-size: 27px; }
  body.vp-mobile .lede { font-size: 17px; }
  body.vp-mobile .form-grid,
  body.vp-mobile .cards.c2, body.vp-mobile .cards.c3, body.vp-mobile .cards.c4 { grid-template-columns: 1fr; }
  /* pack-size (square-image) cards stay two-up on mobile */
  body.vp-mobile .cards-square.c4, body.vp-mobile .cards-square.c3, body.vp-mobile .cards-square.c2 { grid-template-columns: 1fr 1fr; }
  /* cards explicitly opted into a two-column mobile layout */
  body.vp-mobile .cards.m2col.c4, body.vp-mobile .cards.m2col.c3, body.vp-mobile .cards.m2col.c2 { grid-template-columns: 1fr 1fr; }
  /* mobile splits: image first, text panel overlapping on a translucent card */
  body.vp-mobile .split { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  body.vp-mobile .split .col-img { order: 0; }
  body.vp-mobile .split .col-img .imgslot { min-height: 300px !important; }
  body.vp-mobile .split .col-text {
    order: 1; position: relative; z-index: 2;
    margin: 16px 0 0; padding: 18px 18px 14px;
    background: var(--sec, var(--paper));
    border: 2px solid var(--line); border-radius: var(--wob);
    box-shadow: 4px 4px 0 rgba(0,0,0,.10);
  }
  body.vp-mobile .gallery.g3, body.vp-mobile .gallery.g4, body.vp-mobile .gallery.g5 { grid-template-columns: 1fr 1fr; }
  /* a lone last gallery item on mobile (3rd of 3, 5th of 5): center it at the same width as the others */
  body.vp-mobile .gallery.g5 .imgslot:last-child:nth-child(odd),
  body.vp-mobile .gallery.g3 .imgslot:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc((100% - 16px) / 2); justify-self: center; }
  body.vp-mobile .imgslot.hero { min-height: 430px !important; }
  body.vp-mobile .hero-card, body.vp-mobile .hero-card.right { left: 13px; right: 13px; bottom: 13px; padding: 15px 17px; max-width: none; }
  /* hero whose card should drop below the image on mobile, matching the Our Eggs split hero:
     shorter image, text card overlapping the bottom edge */
  body.vp-mobile div:has(> .hero-card.stack-mobile) .imgslot.hero { min-height: 300px !important; }
  body.vp-mobile .hero-card.stack-mobile {
    position: relative; left: auto; right: auto; bottom: auto;
    margin: -56px 10px 0; padding: 18px 16px 10px; z-index: 2;
  }
  body.vp-mobile .stat-strip { padding: 12px 0; }
  body.vp-mobile .stat-strip .s { font-size: 15.5px; gap: 28px; }
  body.vp-mobile .stat-run { gap: 28px; padding-right: 28px; }
  body.vp-mobile .loop { width: 100%; aspect-ratio: auto; display: flex; flex-direction: column; gap: 12px; }
  body.vp-mobile .loop .ring, body.vp-mobile .loop .arc, body.vp-mobile .loop-orbit { display: none; }
  body.vp-mobile .loop .hub { position: static; inset: auto; border-radius: 16px; padding: 13px 16px; }
  body.vp-mobile .loop .node { position: static; transform: none; width: 100%; }
  /* statement sections read left-aligned on mobile (centered on desktop) */
  body.vp-mobile .center.statement { text-align: left; }
  body.vp-mobile .center.statement > div { margin-left: 0; margin-right: 0; }
  /* stacked split body reads left-aligned on mobile (centered only on desktop) */
  body.vp-mobile .stack { text-align: left; }
  body.vp-mobile .stack > h2.wf, body.vp-mobile .stack > h1.wf, body.vp-mobile .stack > .eyebrow { text-align: left; }
  body.vp-mobile .stack .stack-body { padding: 0; text-align: left; }
  body.vp-mobile .site-foot { grid-template-columns: 1fr; padding: 24px 16px; }



#page .stack-body >:is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,label,span,a,em,strong,small,td,th,caption) :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,label,span,a,em,strong,small,td,th,caption) { font-size: 17px !important }