/* Balance Inside and Out — POC stylesheet
   Tokens follow the "Design system" section of the master prompt.
   Laura's brand (logo ink #3b3855, canvas #fef9f4) overrides the reference's
   Espresso and Porcelain values; every other band colour is unchanged. */

/* Fonts: self-hosted Latin subsets (SIL Open Font License; see assets/fonts/OFL-NOTICE.txt) */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('../fonts/manrope-latin.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;
}
@font-face {
  font-family: 'Azeret Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/azeret-mono-500-latin.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 {
  /* Colour */
  --color-porcelain-cream: #fef9f4;  /* brand: page canvas, light cards */
  --color-espresso-ink: #3b3855;     /* brand: logo ink — text, dark bands, dark buttons */
  --color-soft-espresso: #555170;    /* captions, meta text: 7.2:1 on cream */
  --color-soft-cream: #c9c3d2;       /* meta text on ink bands: 6.5:1 */
  --color-parchment-border: #d3ccc3; /* decorative hairlines only */
  --color-stone-haze: #cec1b2;       /* hero field behind photos */
  --color-ivory-sand: #f4e8d7;       /* secondary band */
  --color-daylight-wash: #fdf0c7;    /* feature band */
  --color-burgundy: #800303;         /* Laura's burgundy (replaced the peach band, Oct 2026): cream text 10.4:1 */
  --color-blush: #efc9c0;            /* captions on burgundy: 7.1:1 */
  --gradient-sunlit-stone: linear-gradient(266.47deg, #c4b3a3 41.41%, #9f8e7a 97.58%);

  /* Brand overrides (from Laura's logo files) */
  --brand-primary: var(--color-espresso-ink);
  --brand-accent: var(--color-burgundy);

  /* Type */
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Azeret Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-caption: 13px;
  --text-body: 16px;
  --text-lead: clamp(18px, 2.2vw, 21px);
  --text-nav: 14px;
  --text-button: 14px;
  --text-heading: clamp(28px, 4.5vw, 36px);
  --text-display: clamp(40px, 7vw, 60px);
  --text-hero: clamp(52px, 8.2vw, 112px);
  --text-metric: clamp(88px, 20vw, 170px);
  --text-masthead: clamp(56px, 16vw, 240px);
  --leading-body: 1.5;
  --leading-display: 1;
  --weight-regular: 400;
  --weight-medium: 500;
  --tracking-label: 0.18em;          /* echoes the spaced capitals in the logo */

  /* Spacing */
  --space-5: 5px;  --space-10: 10px; --space-15: 15px; --space-20: 20px;
  --space-30: 30px; --space-40: 40px; --space-60: 60px; --space-100: 100px;
  --section-pad: clamp(48px, 10vw, 120px);
  --gutter: clamp(16px, 4vw, 40px);
  --content-max: 1200px;
  --header-h: 76px;

  /* Radius */
  --radius-card: 10px;
  --radius-button: 20px;
  --radius-pill: 9999px;
  --radius-input: 0;

  /* Motion */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(.33, 1, .68, 1);     /* ease-out cubic: settles gently, no snap */
  --ease-in-out: cubic-bezier(.37, 0, .63, 1);  /* ease-in-out sine: for fades and exits */
  --hero-delay: 100ms;
  --fade: 300ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--color-porcelain-cream);
  color: var(--color-espresso-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-regular); letter-spacing: -0.025em; line-height: 1.1; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: var(--weight-medium); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--color-burgundy); color: var(--color-porcelain-cream); }

:focus-visible { outline: 2px solid var(--color-espresso-ink); outline-offset: 2px; }
.band--ink :focus-visible, .band--burgundy :focus-visible, .site-footer :focus-visible, .menu-panel :focus-visible { outline-color: var(--color-porcelain-cream); }
.card:not(.card--ink, .card--outline, .card--plain) :focus-visible { outline-color: var(--color-espresso-ink); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--color-espresso-ink); color: var(--color-porcelain-cream);
  padding: 12px 20px; border-radius: var(--radius-button); text-decoration: none; font-weight: var(--weight-medium);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--content-max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(760px + var(--gutter) * 2); }
.section { padding-block: var(--section-pad); }
.section--tight { padding-block: clamp(32px, 6vw, 72px); }
.section--flush-top { padding-top: 0; }
.stack > * + * { margin-top: var(--space-20); }
.stack-lg > * + * { margin-top: clamp(28px, 5vw, var(--space-40)); }
.grid { display: grid; gap: var(--space-20); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 720px) and (max-width: 959px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 959px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.split { display: grid; gap: var(--space-40); align-items: center; }
@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-60); }
  .split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split--top { align-items: start; }
}

/* ---------- Bands ---------- */
.band--cream { background: var(--color-porcelain-cream); }
.band--stone { background: var(--color-stone-haze); }
.band--ivory { background: var(--color-ivory-sand); }
.band--daylight { background: var(--color-daylight-wash); }
.band--burgundy { background: var(--color-burgundy); color: var(--color-porcelain-cream); }
.band--burgundy .meta, .band--burgundy .caption { color: var(--color-blush); }
.band--burgundy .rule-line { border-top-color: rgba(254, 249, 244, 0.28); }
/* Buttons sitting straight on burgundy become cream pills (ink on burgundy is unreadable) */
.band--burgundy .btn:not(.card .btn) { background: var(--color-porcelain-cream); color: var(--color-espresso-ink); border-color: var(--color-porcelain-cream); }
.band--burgundy .btn:not(.card .btn):hover { background: var(--color-ivory-sand); }
.band--ink { background: var(--color-espresso-ink); color: var(--color-porcelain-cream); }
.band--ink .meta, .band--ink .caption { color: var(--color-soft-cream); }

/* ---------- Type ---------- */
.eyebrow {
  font-size: var(--text-caption); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1.4;
}
.display { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: -0.04em; }
.heading { font-size: var(--text-heading); line-height: 1.1; letter-spacing: -0.03em; }
.title { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.25; letter-spacing: -0.015em; }
.lead { font-size: var(--text-lead); line-height: 1.45; letter-spacing: -0.01em; }
.meta, .caption { color: var(--color-soft-espresso); }
.caption { font-size: var(--text-caption); line-height: 1.5; }
.measure { max-width: 34em; }
.prose > * + * { margin-top: 1em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.35em; }

/* Small utility copy sitting on a hairline divider */
.rule-line {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-10) var(--space-20);
  border-top: 1px solid var(--color-parchment-border); padding-top: var(--space-15);
}
.band--ink .rule-line { border-top-color: rgba(254, 249, 244, 0.28); }
.hairline { border: 0; border-top: 1px solid var(--color-parchment-border); margin: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-porcelain-cream);
  border-bottom: 1px solid var(--color-parchment-border);
}
.site-header--overlay { position: absolute; left: 0; right: 0; background: transparent; border-bottom-color: transparent; }
.js .site-header--overlay { position: fixed; transition: background-color 0.45s var(--ease-in-out), border-color 0.45s var(--ease-in-out); }
.js .site-header--overlay.is-scrolled { background: var(--color-porcelain-cream); border-bottom-color: var(--color-parchment-border); }
.js .no-js-only, .no-js .js-only { display: none !important; }
.header-inner { display: flex; align-items: center; gap: var(--space-20); min-height: var(--header-h); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; min-height: 44px; }
.logo-mark { position: relative; display: block; flex: none; aspect-ratio: 1; }
.logo-mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.wordmark .logo-mark { width: 52px; }
.logo-ring { transition: transform 1.6s var(--ease-in-out); }
.wordmark:hover .logo-ring, .footer-logo:hover .logo-ring { transform: rotate(360deg); }
.wordmark-text { font-size: 12px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1.3; white-space: nowrap; }
@media (max-width: 479px) { .wordmark-text { display: none; } .wordmark .logo-mark { width: 48px; } }

.primary-nav { display: none; }
.primary-nav ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.primary-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-size: var(--text-nav); font-weight: var(--weight-medium); text-decoration: none; border-radius: var(--radius-pill);
}
.primary-nav a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1px; background-position: 10px calc(50% + 0.85em); transition: background-size 0.5s var(--ease-out); }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { background-size: calc(100% - 20px) 1px; }
.btn.header-book-full { display: none; }
@media (min-width: 1080px) {
  .primary-nav { display: block; }
  .btn.header-book-full { display: inline-flex; }
  .header-book-compact, .menu-toggle { display: none !important; }
}

.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer;
  font-size: var(--text-nav); font-weight: var(--weight-medium);
}
.menu-toggle svg { width: 24px; height: 24px; }

/* Full-screen mobile menu */
.menu-panel {
  position: fixed; inset: 0; z-index: 80; background: var(--color-espresso-ink); color: var(--color-porcelain-cream);
  display: flex; flex-direction: column; padding: 0 var(--gutter) var(--space-40); overflow-y: auto;
}
.menu-panel[hidden] { display: none; }
.menu-panel .header-inner { min-height: var(--header-h); }
.menu-panel nav ul { list-style: none; margin: var(--space-20) 0 0; padding: 0; }
.menu-panel nav li { border-top: 1px solid rgba(254, 249, 244, 0.22); }
.menu-panel nav li:last-child { border-bottom: 1px solid rgba(254, 249, 244, 0.22); }
.menu-panel nav a { display: flex; align-items: center; justify-content: space-between; min-height: 60px; font-size: 26px; letter-spacing: -0.02em; text-decoration: none; }
.menu-panel nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.menu-panel .menu-cta { margin-top: var(--space-30); }
.menu-panel .menu-meta { margin-top: auto; padding-top: var(--space-40); color: var(--color-soft-cream); font-size: var(--text-caption); }
body.menu-open { overflow: hidden; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 60px 10px 20px; border-radius: var(--radius-button);
  font-size: var(--text-button); font-weight: var(--weight-medium); line-height: 1.3; text-decoration: none; text-align: left;
  background: var(--color-espresso-ink); color: var(--color-porcelain-cream); border: 1px solid var(--color-porcelain-cream);
  cursor: pointer; transition: background-color var(--fade) var(--ease), color var(--fade) var(--ease);
}
.btn::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn:hover { text-decoration: none; }
.btn--ext::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}
/* Porcelain Order Pill: for dark bands */
.btn--light { background: var(--color-porcelain-cream); color: var(--color-espresso-ink); border-color: var(--color-espresso-ink); }
.btn--light:hover { background: var(--color-ivory-sand); }
.btn:not(.btn--light):hover { background: #2c2a40; }
.btn--sm { padding: 8px 44px 8px 16px; }
.btn--sm::after { right: 14px; width: 16px; height: 16px; margin-top: -8px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-15) var(--space-30); }

.text-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: var(--text-button); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 0.3em;
}
.text-link svg { width: 16px; height: 16px; flex: none; }

/* ---------- Cards ---------- */
.card {
  display: flex; flex-direction: column; gap: var(--space-15);
  background: var(--color-porcelain-cream); border-radius: var(--radius-card); padding: var(--space-20);
}
.card:not(.card--ink, .card--outline, .card--plain) { color: var(--color-espresso-ink); }
.card:not(.card--ink, .card--outline, .card--plain) .meta, .card:not(.card--ink, .card--outline, .card--plain) .caption { color: var(--color-soft-espresso); }
.card--ink { background: var(--color-espresso-ink); color: var(--color-porcelain-cream); }
.card--ink .meta, .card--ink .caption { color: var(--color-soft-cream); }
.card--outline { background: transparent; border: 1px solid var(--color-espresso-ink); }
.card .card-foot { margin-top: auto; padding-top: var(--space-10); }
.card-link { text-decoration: none; }
.card-link:hover .title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.card-media { border-radius: 6px; overflow: hidden; }

.price { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: clamp(40px, 6vw, 56px); letter-spacing: -0.06em; line-height: 1; }
.price .sym { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: 0.6em; letter-spacing: 0; margin-right: 0.04em; vertical-align: 0.42em; }

/* ---------- Metric display ---------- */
.metric { display: flex; flex-direction: column; gap: var(--space-10); }
.metric-value { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-metric); line-height: 0.85; letter-spacing: -0.08em; white-space: nowrap; }
.metric-value .sym { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: 0.42em; letter-spacing: -0.02em; vertical-align: 0.95em; margin-right: 0.06em; }
.metric-caption { font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.metric-row { display: grid; gap: var(--space-40); }
@media (min-width: 640px) { .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Media & placeholders ---------- */
.media { position: relative; overflow: hidden; border-radius: var(--radius-card); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-1x1 { aspect-ratio: 1 / 1; }

.ph {
  display: flex; align-items: flex-end; padding: var(--space-15);
  border-radius: var(--radius-card); background: var(--color-stone-haze); color: var(--color-espresso-ink);
  font-size: var(--text-caption); line-height: 1.4;
}
.ph--ivory { background: var(--color-ivory-sand); }
.ph--daylight { background: var(--color-daylight-wash); }
.ph--cream { background: var(--color-porcelain-cream); }
.ph span { max-width: 26em; }

/* [PENDING: …] markers — dashed so nothing slips through */
.pending {
  display: inline-block; border: 1.5px dashed currentColor; border-radius: 6px; padding: 2px 8px;
  font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: 0.02em; line-height: 1.5;
}
.pending-block { display: block; padding: var(--space-15) var(--space-20); }
.ph .pending { background: rgba(254, 249, 244, 0.7); }

/* ---------- Hero (Home): the whole lemon photo, faded into its own wall colour ---------- */
.hero {
  --hero-wall: #c1bfb2;                    /* sampled from the photo's wall */
  --hero-wall-0: rgba(193, 191, 178, 0);
  --hero-wash: #d3d0c5;                    /* a lighter wash behind the headline: ink is 7:1 on it, 5.9:1 on the wall */
  position: relative; display: grid; background: var(--hero-wall); overflow: hidden;
}
.hero-copy {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 4vw, var(--space-30));
  padding: calc(var(--header-h) + clamp(28px, 8vw, 72px)) var(--gutter) clamp(12px, 3vw, 80px);
  background: linear-gradient(180deg, var(--hero-wash), var(--hero-wall));
}
.hero-title { font-size: var(--text-hero); line-height: 0.95; letter-spacing: -0.05em; }
.hero-title .line { display: block; }
.hero-title .line > span { display: block; }
.hero-sub { font-size: var(--text-lead); line-height: 1.4; max-width: 24em; }
/* Phones and tablets: headline first, then the whole photo edge to edge, its top fading out of the wall colour */
.hero-media { position: relative; order: 2; aspect-ratio: 3528 / 4141; overflow: hidden; } /* top 18% of the photo is plain wall: trimmed */
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--hero-wall) 0%, var(--hero-wall-0) 11%);
}
@media (min-width: 880px) {
  /* Desktop: the photo runs the full height of the first screen, flush right, with the plain wall above the
     lemons trimmed so the lemons, hands and Laura's face all show. Its left side fades into the wall colour,
     where the headline sits. */
  .hero { min-height: max(640px, min(100svh, 1100px)); background: linear-gradient(90deg, var(--hero-wash) 0%, var(--hero-wash) 16%, var(--hero-wall) 40%); }
  .hero-copy { background: none; padding-bottom: clamp(44px, 8vw, 80px); padding-left: max(var(--gutter), calc((100vw - var(--content-max)) / 2)); padding-right: 0; max-width: max(520px, 42vw); }
  .hero-title { font-size: clamp(56px, 6.6vw, 104px); }
  .hero-media { position: absolute; top: 0; right: 0; bottom: 0; order: 0; aspect-ratio: 3528 / 4292; }
  .hero-media::after {
    background:
      linear-gradient(90deg, var(--hero-wall) 0%, rgba(193, 191, 178, 0.7) 12%, var(--hero-wall-0) 40%),
      linear-gradient(180deg, rgba(193, 191, 178, 0.55) 0, var(--hero-wall-0) 14%);
  }
}

/* ---------- Page header (inner pages) ---------- */
.page-head { padding-block: clamp(36px, 9vw, 112px) clamp(28px, 6vw, 72px); }
.page-head .display { max-width: 14em; }
.page-head .lead { max-width: 30em; margin-top: var(--space-20); }

/* ---------- Quote ---------- */
.quote { font-size: clamp(24px, 3.6vw, 40px); line-height: 1.25; letter-spacing: -0.025em; }
.quote::before { content: "\201C"; }
.quote::after { content: "\201D"; }
.quote-cite { margin-top: var(--space-30); font-style: normal; }

/* ---------- Pillars ---------- */
.pillar { position: relative; display: flex; flex-direction: column; gap: var(--space-15); padding-top: var(--space-20); }
.pillar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(254, 249, 244, 0.28); transform-origin: left; }
.band--cream .pillar::before, .band--ivory .pillar::before { background: var(--color-parchment-border); }
.pillar-num { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-caption); letter-spacing: 0.04em; }

/* ---------- Fold-out panels ---------- */
.folds { border-top: 1px solid var(--color-parchment-border); }
.fold { border-bottom: 1px solid var(--color-parchment-border); }
.fold summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-20);
  min-height: 60px; padding: var(--space-15) 0; cursor: pointer; list-style: none;
  font-size: clamp(17px, 2vw, 19px); font-weight: var(--weight-medium); letter-spacing: -0.01em;
}
.fold summary::-webkit-details-marker { display: none; }
.fold-icon { position: relative; flex: none; width: 20px; height: 20px; }
.fold-icon::before, .fold-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -0.75px 0 0 -8px; background: currentColor; border-radius: 1px; transition: transform 0.45s var(--ease-out); }
.fold-icon::after { transform: rotate(90deg); }
.fold[open] .fold-icon::after { transform: rotate(0deg) scaleX(0); }
.fold summary:hover .fold-icon::before { transform: rotate(180deg); }
.fold-body { padding-bottom: var(--space-20); max-width: 40em; }
.fold-body > * + * { margin-top: 0.75em; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-30); }
.form-row { display: grid; gap: var(--space-30); }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field legend { font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase; }
.field .req { text-transform: none; letter-spacing: 0; }
.input {
  width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-radius: var(--radius-input);
  border-bottom: 1px solid var(--color-espresso-ink); background: transparent; font-size: var(--text-body); line-height: 1.4;
  -webkit-appearance: none; appearance: none;
}
.input:focus { outline: none; border-bottom-width: 2px; padding-bottom: 7px; }
.input:focus-visible { outline: 2px solid var(--color-espresso-ink); outline-offset: 2px; }
textarea.input { min-height: 120px; resize: vertical; }
select.input {
  padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b3855' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 18px;
}
.input::placeholder { color: var(--color-soft-espresso); opacity: 1; }
.band--ink .input, .site-footer .input { border-bottom-color: var(--color-porcelain-cream); }
.band--ink .input::placeholder, .site-footer .input::placeholder { color: var(--color-soft-cream); }
.band--ink .input:focus-visible, .site-footer .input:focus-visible { outline-color: var(--color-porcelain-cream); }
.field-hint { font-size: var(--text-caption); color: var(--color-soft-espresso); }
.field-error { display: none; align-items: flex-start; gap: 6px; font-size: var(--text-caption); font-weight: var(--weight-medium); }
.field-error svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.field.has-error .field-error { display: flex; }
.field.has-error .input { border-bottom-width: 2px; padding-bottom: 7px; }
.choice-group { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.choice-group legend { padding: 0; }
.field .choice { text-transform: none; letter-spacing: 0; font-size: var(--text-nav); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--color-espresso-ink);
  border-radius: var(--radius-pill); font-size: var(--text-nav); font-weight: var(--weight-medium);
}
.choice input:checked + span { background: var(--color-espresso-ink); color: var(--color-porcelain-cream); }
.choice input:focus-visible + span { outline: 2px solid var(--color-espresso-ink); outline-offset: 2px; }
.form-status { font-size: var(--text-caption); font-weight: var(--weight-medium); }
.hp { display: none !important; }

/* ---------- Filter pills ---------- */
.filters { display: none; flex-wrap: wrap; gap: 8px; }
.js .filters { display: flex; }
.filter-pill {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-espresso-ink); background: transparent; cursor: pointer;
  font-size: var(--text-nav); font-weight: var(--weight-medium);
}
.filter-pill[aria-pressed="true"] { background: var(--color-espresso-ink); color: var(--color-porcelain-cream); }
.recipe-card[hidden] { display: none; }

/* ---------- Tags ---------- */
.tag {
  display: inline-flex; align-items: center; align-self: flex-start; min-height: 26px; padding: 0 12px;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---------- Recipe page ---------- */
.recipe-body { display: grid; gap: var(--space-40); }
@media (min-width: 880px) { .recipe-body { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-60); } }
.ingredients { list-style: none; padding: 0; margin: 0; }
.ingredients li { padding: 12px 0; border-bottom: 1px solid var(--color-parchment-border); }
.ingredients li:first-child { border-top: 1px solid var(--color-parchment-border); }
.method { padding-left: 0; list-style: none; counter-reset: step; margin: 0; }
.method li { counter-increment: step; position: relative; padding: 0 0 var(--space-20) 48px; }
.method li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-caption); }
.recipe-sub + .ingredients, .recipe-sub + .method { margin-top: var(--space-15); }
.recipe-sub:not(:first-child) { margin-top: var(--space-30); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-espresso-ink); color: var(--color-porcelain-cream); }
.site-footer .meta, .site-footer .caption { color: var(--color-soft-cream); }
.footer-signup { padding-block: var(--section-pad) clamp(48px, 7vw, 80px); display: grid; gap: var(--space-30); }
@media (min-width: 880px) { .footer-signup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-60); } }
.signup-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-20); }
.signup-inline .field { flex: 1 1 220px; }
.footer-logo { display: inline-block; }
.footer-mark { width: 104px; }
.footer-cols { display: grid; gap: var(--space-30); align-items: start; padding-block: var(--space-40); border-top: 1px solid rgba(254, 249, 244, 0.22); }
@media (min-width: 720px) { .footer-cols { grid-template-columns: auto 1fr 1fr 1fr; gap: var(--space-40); } }
.footer-cols h2 { font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-soft-cream); margin-bottom: var(--space-10); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; }
@media (min-width: 720px) { .footer-cols a { min-height: 36px; } }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-10) var(--space-20); padding-block: var(--space-20) var(--space-30); border-top: 1px solid rgba(254, 249, 244, 0.22); font-size: var(--text-caption); color: var(--color-soft-cream); }
.footer-base a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Misc ---------- */
.notice { border-left: 2px solid currentColor; padding-left: var(--space-20); }
.icon { width: 20px; height: 20px; flex: none; }
.tier-card .tier-label { display: flex; justify-content: space-between; gap: var(--space-10); }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { border-top: 1px solid var(--color-parchment-border); }
.contact-list li:last-child { border-bottom: 1px solid var(--color-parchment-border); }
.contact-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); min-height: 56px; text-decoration: none; }
.contact-list a:hover span:first-child { text-decoration: underline; }
.badge-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }

/* ==========================================================================
   Motion
   Everything below runs only when the visitor hasn't asked for reduced motion.
   html.motion-ready is set by the inline boot script in <head>; if main.js
   never arrives, the boot script drops it after 4s so nothing stays hidden.
   The curves are deliberately soft: things fade and drift into place rather
   than snap, nothing wipes in with a hard edge, and nothing moves far.
   ========================================================================== */

/* ---------- Logo intro (first page of a visit, and every refresh) ---------- */
.intro { display: none; }
.is-intro { --hero-delay: 1850ms; }
.intro-skip { --hero-delay: 350ms; }

@media (prefers-reduced-motion: no-preference) {
  .is-intro .intro {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
    background: var(--color-porcelain-cream); color: var(--color-espresso-ink);
    animation: intro-out 0.85s var(--ease-in-out) 1.65s forwards;   /* dissolves into the page */
    cursor: pointer;
  }
  .intro-skip .intro { animation: intro-out 0.6s var(--ease-in-out) forwards; }
  .intro-mark { width: clamp(150px, 36vw, 220px); }
  .is-intro .intro-mark { animation: intro-content-out 0.85s var(--ease-in-out) 1.6s forwards; }
  /* The ring of lettering turns gently into place */
  .is-intro .intro .logo-ring { animation: ring-in 1.3s var(--ease-out) 0.05s both; }
  /* The "B" is drawn on left to right behind a feathered edge, like ink */
  .is-intro .intro .logo-mono {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
    -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    animation: mono-draw 1.15s var(--ease-in-out) 0.3s both;
  }
  .intro-line {
    font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: 0.32em; text-transform: uppercase;
    margin-right: -0.32em; /* optically centre the tracked line */
  }
  .is-intro .intro-line { animation: tag-in 0.9s var(--ease-out) 0.65s both, intro-content-out 0.85s var(--ease-in-out) 1.6s forwards; }
  .intro-lock, .intro-lock body { overflow: hidden; }
}

@keyframes ring-in { from { opacity: 0; transform: rotate(-40deg) scale(0.94); } }
@keyframes mono-draw { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes tag-in { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@keyframes intro-content-out { to { opacity: 0; transform: translateY(-12px) scale(0.98); } }

/* ---------- Shared keyframes (only "from" is given, so each lands on the element's own resting style) ---------- */
@keyframes soft-rise { from { opacity: 0; transform: translateY(0.3em); filter: blur(6px); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes settle { from { transform: translateY(10px); } }
@keyframes settle-soft { from { transform: translateY(0.25em); filter: blur(6px); } }
@keyframes fade-up-soft { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
@keyframes zoom-out { from { transform: scale(1.06); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Home hero entrance: each line comes into focus as it rises ---------- */
  .motion-ready .hero-title .line > span { animation: soft-rise 1.4s var(--ease-out) both; animation-delay: var(--hero-delay); }
  .motion-ready .hero-title .line:nth-child(2) > span { animation-delay: calc(var(--hero-delay) + 140ms); }
  .motion-ready .hero-title .line:nth-child(3) > span { animation-delay: calc(var(--hero-delay) + 280ms); }
  .motion-ready .hero-sub { animation: fade-up 1.2s var(--ease-out) both; animation-delay: calc(var(--hero-delay) + 520ms); }
  .motion-ready .hero .btn-row { animation: fade-up 1.2s var(--ease-out) both; animation-delay: calc(var(--hero-delay) + 660ms); }
  .motion-ready .hero-media img { animation: zoom-out 3s var(--ease-out) both; animation-delay: calc(var(--hero-delay) - 400ms); }

  /* ---------- First section of inner pages ---------- */
  /* Small lines fade up in sequence; headings and photos stay painted (they're what the browser
     measures as the page's main content), so they only settle a few pixels into place. */
  .motion-ready .page-intro:not(.hero) :is(.eyebrow, .tag, .lead, .btn-row, .jump-links, .caption, p > .text-link) { animation: fade-up 1.1s var(--ease-out) both; animation-delay: var(--hero-delay); }
  .motion-ready .page-intro:not(.hero) :is(.eyebrow, .lead, .caption) { animation-name: fade-up-soft; }
  .motion-ready .page-intro:not(.hero) :is(.lead, .caption) { animation-delay: calc(var(--hero-delay) + 180ms); }
  .motion-ready .page-intro:not(.hero) :is(.btn-row, .jump-links) { animation-delay: calc(var(--hero-delay) + 300ms); }
  .motion-ready .page-intro:not(.hero) :is(.media, .ph) { animation: settle 1.3s var(--ease-out) both; animation-delay: var(--hero-delay); }
  .motion-ready .page-intro:not(.hero) h1 { animation: settle-soft 1.4s var(--ease-out) both; animation-delay: var(--hero-delay); }
  .motion-ready .page-intro:not(.hero) .media img { animation: zoom-out 2.6s var(--ease-out) both; animation-delay: calc(var(--hero-delay) - 200ms); }
  .motion-ready .page-intro:not(.hero) .prose > * { animation: fade-up 1.1s var(--ease-out) both; animation-delay: calc(var(--hero-delay) + 240ms); }

  /* ---------- Reveal on scroll ---------- */
  .motion-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease-in-out), transform 1.3s var(--ease-out), filter 1.3s var(--ease-out); }
  .motion-ready .reveal:is(h2, p, figure, .cta-row, .stack) { filter: blur(6px); }
  /* A section label arrives with the heading or content directly under it, a beat ahead of it */
  .motion-ready .eyebrow:has(+ :is(.reveal, .reveal-stagger)) { opacity: 0; transform: translateY(12px); filter: blur(4px); transition: opacity 0.9s var(--ease-in-out), transform 1.2s var(--ease-out), filter 1.2s var(--ease-out); }
  .motion-ready .eyebrow:has(+ :is(.reveal, .reveal-stagger).is-visible) { opacity: 1; transform: none; filter: none; }
  .motion-ready .eyebrow + .reveal { transition-delay: 0.12s; }
  .motion-ready .reveal.is-visible { opacity: 1; transform: none; filter: none; }
  .motion-ready .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease-in-out), transform 1.25s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
  .motion-ready .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
  .motion-ready .reveal-stagger > [hidden] { display: none; }
  /* Pillar hairlines draw left to right */
  .motion-ready .reveal-stagger > .pillar { transform: none; }
  .motion-ready .reveal-stagger > .pillar::before { transform: scaleX(0); transition: transform 1.5s var(--ease-out); transition-delay: inherit; }
  .motion-ready .reveal-stagger.is-visible > .pillar::before { transform: none; }
  /* Photos fade up while the picture eases out of a slight zoom */
  .motion-ready .reveal-media { opacity: 0; transform: translateY(24px); transition: opacity 1.1s var(--ease-in-out), transform 1.4s var(--ease-out); }
  .motion-ready .reveal-media img { transform: scale(1.08); transition: transform 2.2s var(--ease-out); }
  .motion-ready .reveal-media.is-visible { opacity: 1; transform: none; }
  .motion-ready .reveal-media.is-visible img { transform: none; }
  /* Recipe filter: cards that come back drift in */
  .recipe-card.is-entering { animation: pop-in 0.7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }

  /* ---------- Hover details ---------- */
  .btn::after { transition: transform 0.5s var(--ease-out); }
  .btn:hover::after, .btn:focus-visible::after { transform: translateX(3px); }
  .btn--ext:hover::after, .btn--ext:focus-visible::after { transform: translate(2px, -2px); }
  .text-link svg { transition: transform 0.5s var(--ease-out); }
  .text-link:hover svg { transform: translateX(3px); }
  .card-link { transition: transform 0.6s var(--ease-out); }
  .card-link:hover { transform: translateY(-4px); }
  .card-link .ph { transition: background-color 0.6s var(--ease-in-out); }
  .card-link:hover .ph { background-color: var(--color-ivory-sand); }
  .filter-pill, .choice span { transition: background-color 0.35s var(--ease-in-out), color 0.35s var(--ease-in-out); }
  .menu-panel nav a svg { transition: transform 0.5s var(--ease-out); }
  .menu-panel nav a:hover svg { transform: translateX(4px); }

  /* ---------- Mobile menu: fades in, links drift up in sequence ---------- */
  .menu-panel:not([hidden]) { animation: menu-in 0.5s var(--ease-out) both; }
  .menu-panel.is-closing { animation: menu-out 0.35s var(--ease-in-out) both; }
  .menu-panel:not([hidden]) nav li, .menu-panel:not([hidden]) .menu-cta, .menu-panel:not([hidden]) .menu-meta { animation: fade-up 0.7s var(--ease-out) both; animation-delay: calc(100ms + var(--i, 0) * 45ms); }
  .menu-panel nav li:nth-child(2) { --i: 1; } .menu-panel nav li:nth-child(3) { --i: 2; } .menu-panel nav li:nth-child(4) { --i: 3; }
  .menu-panel nav li:nth-child(5) { --i: 4; } .menu-panel nav li:nth-child(6) { --i: 5; } .menu-panel nav li:nth-child(7) { --i: 6; }
  .menu-panel nav li:nth-child(8) { --i: 7; } .menu-panel .menu-cta { --i: 8; } .menu-panel .menu-meta { --i: 9; }

  /* ---------- Fold-outs open smoothly where the browser supports it ---------- */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .fold::details-content { height: 0; overflow: clip; transition: height 0.5s var(--ease-out), content-visibility 0.5s allow-discrete; }
    .fold[open]::details-content { height: auto; }
  }

  /* ---------- Page-to-page: a soft crossfade (Chrome, Edge, Safari 18.2+) ---------- */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 0.35s var(--ease-in-out) both; }
  ::view-transition-new(root) { animation: vt-in 0.5s var(--ease-in-out) both; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes menu-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; }
}

/* ---------- Print (recipes) ---------- */
@media print {
  .site-header, .site-footer, .no-print, .skip-link, .menu-panel, .intro { display: none !important; }
  /* Anything that hasn't animated in yet still prints */
  .reveal, .reveal-stagger > *, .reveal-media, .reveal-media img, .page-intro *, .hero *, .eyebrow { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .band--ivory, .band--daylight, .band--burgundy, .band--stone { background: none !important; }
  .band--burgundy, .band--ink { color: #000 !important; }
  .section, .page-head { padding-block: 12pt; }
  .recipe-body { grid-template-columns: 1fr 1.4fr !important; }
  a { text-decoration: none; }
}

/* ---------- Page-specific helpers ---------- */
.jump-links { margin-top: var(--space-30); }
.facts { display: grid; gap: var(--space-20); margin-inline: 0; margin-bottom: 0; }
.facts dd { margin: 0; font-size: var(--text-lead); }
.contact-static { display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); min-height: 56px; }
.card--plain { background: transparent; padding: 0; }
.online-classes { border-top: 1px solid var(--color-parchment-border); padding-top: var(--space-20); }
.online-classes > * + * { margin-top: var(--space-10); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-20) var(--space-40); }
@media (min-width: 880px) { .sticky-intro { position: sticky; top: calc(var(--header-h) + 32px); } }

/* ---------- Shop ---------- */
.product-card .media { aspect-ratio: 4 / 5; }
@media (min-width: 880px) { .product-card .media { aspect-ratio: 1 / 1; } }
.price .from { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: var(--text-body); letter-spacing: 0; margin-right: 0.5em; color: var(--color-soft-espresso); }
.product-card .price { margin-top: auto; }
.merch-points { list-style: none; margin: 0; padding: 0; }
.merch-points li { padding: 12px 0; border-top: 1px solid rgba(254, 249, 244, 0.28); }
.band--cream .merch-points li, .band--ivory .merch-points li { border-top-color: var(--color-parchment-border); }