/* ==========================================================================
   Julie's Stillroom — styles
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Components (nav, buttons, eyebrows, dashed callout, ornaments)
   6.  Footer
   7.  Page · Home
   8.  Animations & reveals
   9.  Responsive
   10. Reduced motion
   ========================================================================== */


/* 1. Design tokens =========================================================*/

:root {
  /* Neutrals */
  --cream: #f6efe2;
  --cream-deep: #ede4d2;
  --warm-white: #fbf6ec;
  --ink: #4a3d33;
  --ink-soft: #6e5f53;
  --muted: #98897b;
  --rule: #c8b99e;
  --signed: #8a6a4e;
  --signed-warm: #c9a47a;

  /* Flavour accents — per brief, sparing use only */
  --acc-rose: #c8405a;
  --acc-honeysuckle: #d4a73e;
  --acc-sage: #7a9e60;
  --acc-amber: #c8960a;
  --acc-quince: #b7822e;
  --acc-violet: #8868a8;

  /* Typography */
  --font-serif: "Petrona", Georgia, "Times New Roman", serif;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --max-content: 1240px;
  --max-prose: 62ch;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(5rem, 10vw, 8rem);

  /* Motion */
  --ease: cubic-bezier(.4, .2, .2, 1);
  --slow: 600ms;
  --med: 400ms;
}


/* 2. Reset & base ==========================================================*/

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }

a {
  color: var(--signed);
  text-decoration: none;
  transition: color var(--med) var(--ease), opacity var(--med) var(--ease);
}
a:hover { color: var(--ink); }

button { font: inherit; cursor: pointer; }

::selection { background: var(--signed-warm); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--signed);
  outline-offset: 3px;
  border-radius: 2px;
}


/* 3. Typography ============================================================*/

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  color: var(--ink);
}

/* Display sizes: upright Petrona (per brief — avoid italic at 60px+) */
.display, .display-xl {
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.display-xl {
  font-size: clamp(2.5rem, 1.5rem + 4.5vw, 4.5rem);
  line-height: 1.1;
}

.display {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  line-height: 1.15;
}

.title {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem);
  line-height: 1.25;
  font-style: italic;
}

.subtitle {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink-soft);
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.55;
}

/* Tagline / quote-like serif moments */
.tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
}

/* Eyebrow labels — Poppins 500, tracked, uppercase */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}


/* 4. Layout primitives =====================================================*/

.container {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.prose {
  max-width: var(--max-prose);
  margin-left: auto;
  margin-right: auto;
}

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.section-tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

.centred { text-align: center; }

/* Hairline rule */
.rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--rule);
  margin: 1.5rem auto;
  border: 0;
}


/* 5. Components ============================================================*/

/* --- Nav ----------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding: clamp(1rem, 2vw, 1.5rem) var(--gutter);
  background: transparent;
  transition: background var(--slow) var(--ease),
              padding var(--slow) var(--ease),
              box-shadow var(--slow) var(--ease);
}
/* The inline nav list sits naturally after the wordmark when shown
   (desktop scrolled state). The standalone .nav__cta with margin-left:
   auto pushes itself to the far right. */

.nav.is-scrolled {
  background: rgba(246, 239, 226, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  box-shadow: 0 1px 0 var(--rule);
}

.nav__wordmark {
  display: block;
  width: clamp(180px, 22vw, 320px);
  transition: width var(--slow) var(--ease);
}
.nav.is-scrolled .nav__wordmark { width: clamp(110px, 11vw, 140px); }

/* Links hidden by default at every viewport. The Menu button is the
   default mechanism; the inline list only appears on desktop once the
   nav scrolls into its compact state (see media query below). */
.nav__links {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Full-screen overlay when the Menu button is open · works at every size. */
.nav__links.is-open {
  display: flex;
  position: fixed;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: var(--cream);
  z-index: 100;
}

.nav__link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding: 0.25rem 0;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--signed);
}

/* Small superscript inside nav links — used for "Julie²". Kept proportional. */
.nav__link sup {
  font-size: 0.7em;
  letter-spacing: 0;
  margin-left: 0.05em;
  top: -0.4em;
}

/* Above the mobile breakpoint, when the user has scrolled past the hero,
   the inline nav list takes over and the Menu button disappears. */
@media (min-width: 880px) {
  .nav.is-scrolled .nav__toggle { display: none; }
  .nav.is-scrolled .nav__links {
    display: flex;
    position: static;
    background: transparent;
    flex-direction: row;
    z-index: auto;
  }
}

/* "Menu" toggle · the default nav mechanism at every viewport until the
   user scrolls past the hero on desktop, where the inline list appears. */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.5rem 0;
  cursor: pointer;
  transition: color var(--med) var(--ease);
}
.nav__toggle:hover { color: var(--ink); }
.nav__toggle::before {
  /* small two-line indicator drawn with linear-gradient,
     in keeping with the brand's hairline aesthetic. */
  content: "";
  display: inline-block;
  width: 18px;
  height: 7px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
.nav__toggle.is-open { position: fixed; top: 1rem; right: 1rem; z-index: 110; }

/* Always-visible Request a Bottle CTA on the far right of the nav, in
   every state. The in-list duplicate inside .nav__links is hidden when
   the inline list shows so we never render two Request buttons at once. */
.nav__cta {
  margin-left: auto;
}
@media (min-width: 880px) {
  /* In the inline-list desktop scrolled state, drop the duplicate
     Request item that lives at the end of the menu list. */
  .nav.is-scrolled .nav__links li:last-child { display: none; }
}


/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--signed);
  background: transparent;
  color: var(--signed);
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background var(--med) var(--ease),
              color var(--med) var(--ease),
              border-color var(--med) var(--ease);
}
.btn:hover {
  background: var(--signed);
  color: var(--cream);
  border-color: var(--signed);
}

.btn--soft {
  border-color: var(--rule);
  color: var(--ink-soft);
}
.btn--soft:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signed);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--med) var(--ease);
  letter-spacing: 0;
}
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover::after { transform: translateX(3px); }


/* --- Dashed callout (echoes bottle's dashed ring) ----------------------- */

.dashed-frame {
  border: 1px dashed var(--rule);
  border-radius: 6px;
  padding: clamp(2rem, 5vw, 3.5rem);
}


/* --- Ornaments ---------------------------------------------------------- */

.ornament {
  display: block;
  text-align: center;
  font-family: var(--font-serif);
  font-style: normal;
  color: var(--rule);
  letter-spacing: 0.6em;
  font-size: 0.95rem;
  margin: 0;
  padding: 0;
}

.ornament--star::before { content: "✻"; letter-spacing: 0; font-size: 1.1rem; color: var(--signed-warm); }
.ornament--dots::before { content: "·  ·  ·"; }


/* --- Flavour dot -------------------------------------------------------- */

.dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  vertical-align: 0.18em;
  margin-right: 0.55em;
  background: var(--rule);
}
.dot--rose { background: var(--acc-rose); }
.dot--honeysuckle { background: var(--acc-honeysuckle); }
.dot--sage { background: var(--acc-sage); }
.dot--amber { background: var(--acc-amber); }
.dot--quince { background: var(--acc-quince); }
.dot--violet { background: var(--acc-violet); }


/* Section background modifiers · reusable warmth shifts */
.section--cream { background: var(--cream); }
.section--warm  { background: var(--warm-white); }
.section--deep  { background: var(--cream-deep); }


/* 6. Footer ================================================================*/

.footer {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--rule);
  background: var(--cream-deep);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer__wordmark { width: 180px; }
.footer__place {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: right;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.footer__links a { color: var(--ink-soft); }
.footer__links a:hover { color: var(--ink); }

.footer__meta {
  margin-top: 2.5rem;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Tiny credit line under the meta. */
.footer__credit {
  margin: 0.75rem 0 0;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}
.footer__credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.footer__credit a:hover { color: var(--ink-soft); }


/* 7. Page · Home ===========================================================*/

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 var(--gutter);
  background:
    radial-gradient(ellipse at 70% 30%, var(--warm-white) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, var(--cream-deep) 0%, transparent 60%),
    var(--cream);
  overflow: hidden;
}

/* Watercolour ambient layer · serves as the fallback when the hero
   video isn't playing (reduced motion, load failure, or pre-play). */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-bg, none);
  background-repeat: no-repeat;
  background-position: 92% 50%;
  background-size: clamp(420px, 60vw, 780px);
  opacity: 0.42;
  filter: saturate(0.92);
  pointer-events: none;
}

/* Hero video · sits above the watercolour bg, below the text. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Soft cream glow behind the tagline so it stays readable against any
   frame of the moving video without resorting to a heavy overlay. */
.hero__tagline {
  text-shadow:
    0 1px 14px rgba(246, 239, 226, 0.75),
    0 0 48px rgba(246, 239, 226, 0.45);
}

/* Honour prefers-reduced-motion: don't autoplay the video; let the
   still watercolour bg show instead. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

.hero__tagline {
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4.25rem);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.005em;
  max-width: 16ch;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vw, 3rem);
  transform: translateX(-50%);
  z-index: 1;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--muted), transparent);
  animation: scroll-cue 2.4s ease-in-out infinite;
}

@keyframes scroll-cue {
  0%   { transform: scaleY(0.4); transform-origin: top; opacity: 0.6; }
  50%  { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0.4); transform-origin: bottom; opacity: 0.4; }
}


/* --- Section · The blurb ------------------------------------------------ */

.blurb {
  background: var(--warm-white);
}

/* The two prose lines (intro + heart) sit in Petrona italic at the same
   size. The "Made slowly" stamp drops to Poppins tracked caps — a clear
   change of register, sitting beneath as a label. */
.blurb__intro,
.blurb__heart {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 36ch;
  margin: 0 auto 1.75rem;
}

.blurb__heart {
  margin-bottom: 2.25rem;
}

.blurb__stamp {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 auto;
}


/* --- Section · What I make preview ------------------------------------- */

/* One unified grid for the home preview — 3 columns on desktop, falling
   to 2 then 1 as the viewport narrows. Nine items, equal weight. */
.flavour-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 3vw, 2.5rem);
}

@media (max-width: 880px) {
  .flavour-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .flavour-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
}

.flavour-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--med) var(--ease);
}
.flavour-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  margin-bottom: 1rem;
  transition: transform var(--slow) var(--ease);
}
.flavour-card:hover .flavour-card__img { transform: scale(1.025); }
.flavour-card__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ink);
}
.flavour-card__name strong {
  font-weight: 500;
  display: block;
}
.flavour-card__with {
  display: block;
  color: var(--ink-soft);
  font-size: 0.95em;
  margin-top: 0.1em;
}

.coming {
  text-align: center;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--rule);
}
.coming__list {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  margin-top: 0.75rem;
}

.section__cta { text-align: center; margin-top: 3.5rem; }


/* --- Section · Stillroom definition (dictionary-style) ----------------- */

.definition {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.definition__word {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.15rem);
  color: var(--ink);
  margin: 0 0 1.25rem;
  letter-spacing: 0.005em;
}
.definition__pos {
  font-size: 0.65em;
  font-style: italic;
  color: var(--muted);
  margin-left: 0.4em;
}
.definition__body {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0 auto;
}


/* --- Section · Julie tease --------------------------------------------- */

.julie-tease {
  background: var(--cream-deep);
}

.julie-tease__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.julie-tease__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
  filter: saturate(0.95);
}
.julie-tease__photo--square { aspect-ratio: 1 / 1; }
/* Slightly wider than square, for the ~1402x1122 watercolour.
   Soft radial mask feathers the edges into the cream ground so the
   watercolour blends rather than reading as a square crop. */
.julie-tease__photo--wide {
  aspect-ratio: 5 / 4;
  border-radius: 0;
  -webkit-mask-image: radial-gradient(ellipse 82% 82% at center, black 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 82% 82% at center, black 55%, transparent 100%);
}

.julie-tease__copy h2 {
  margin-bottom: 1.5rem;
}


/* --- Section · Markets ------------------------------------------------- */

.market-card {
  max-width: 720px;
  margin: 2.5rem auto 0;
  text-align: center;
}
.market-card__when {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  color: var(--ink);
}
.market-card__when strong { font-weight: 500; }
.market-card__where {
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.market-card__empty {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}


/* --- Section · Field notes preview ------------------------------------ */

.fn-preview {
  background: var(--warm-white);
}
.fn-preview__entry {
  max-width: 720px;
  margin: 2.5rem auto 0;
  text-align: center;
}
.fn-preview__date {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.fn-preview__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin-bottom: 1rem;
}
.fn-preview__excerpt {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.fn-preview__empty {
  font-style: italic;
  color: var(--ink-soft);
}


/* 8. Animations & reveals ==================================================*/

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--slow) var(--ease),
              transform var(--slow) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Page-load orchestrated reveal — hero elements stagger */
.hero .reveal { transition-duration: 900ms; }
.hero .reveal:nth-child(1) { transition-delay: 60ms; }
.hero .reveal:nth-child(2) { transition-delay: 220ms; }
.hero .reveal:nth-child(3) { transition-delay: 380ms; }

/* Staggered reveal inside a section (uses --i index set via inline style) */
.stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--slow) var(--ease),
              transform var(--slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}


/* 9. Responsive ============================================================*/

@media (max-width: 880px) {
  /* Nav defaults already handle the Menu/overlay pattern at every size. */

  .julie-tease__inner { grid-template-columns: 1fr; }
  .julie-tease__photo { max-width: 420px; margin: 0 auto; }

  .footer__inner { grid-template-columns: 1fr; text-align: center; }
  .footer__brand { align-items: center; }
  .footer__links { text-align: center; align-items: center; }
}

@media (max-width: 520px) {
  .hero__tagline { max-width: 12ch; }
  .blurb__lines { font-size: 1.15rem; }
}


/* ==========================================================================
   PAGES BEYOND HOME
   --------------------------------------------------------------------------
   Shared: page-header, section-divider
   /what-i-make · /julie · /come-say-hello · /field-notes · /request
   ========================================================================== */


/* --- Shared page hero (full-fold, mirrors home) ------------------------
   The watercolour sits as an ambient background — left-aligned, ~62vw
   wide, 42% opacity — and the page eyebrow / title / intro float over
   it centred. First fold of every non-home page. */

.page-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  /* No gutter padding here — the background bleeds to all four edges. */
  background:
    radial-gradient(ellipse at 80% 70%, var(--warm-white) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 20%, var(--cream-deep) 0%, transparent 60%),
    var(--cream);
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-bg, none);
  background-repeat: no-repeat;
  /* Hug the right wall and the ceiling. "contain" preserves the
     watercolour's aspect — no crop, no distortion. The image extends
     down and to the left as far as the aspect allows, with the
     cream gradient showing through where the image stops. */
  background-position: 100% 0%;
  background-size: contain;
  opacity: 0.42;
  filter: saturate(0.92);
  pointer-events: none;
}

/* On mobile / portrait viewports, switch to "cover" so the landscape
   watercolour fills the entire hero instead of leaving empty space
   below it. The right edge stays anchored, the left edge crops. */
@media (max-width: 760px) {
  .page-hero__bg {
    background-size: cover;
    background-position: 100% 50%;
  }
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  /* No constraint on the inner — let the title breathe to its own width. */
  /* Padding lives on the inner so the bg can hit the edges. */
  padding: 0 var(--gutter);
}

/* Cap the hero title at ~720px so short titles stay on one line on desktop
   ("Named for two Julies", "From the stillroom", "Come say hello", "Field
   Notes") while longer ones still wrap cleanly ("Tell me what you'd like"
   on /request). On narrow viewports the type clamps down and lines wrap
   naturally regardless. */
.page-hero .display-xl {
  max-width: 720px;
}

.page-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vw, 3rem);
  transform: translateX(-50%);
  z-index: 1;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.page-hero__scroll::after {
  content: "";
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--muted), transparent);
  animation: scroll-cue 2.4s ease-in-out infinite;
}

/* Page intro · the single-line subtitle that used to live inside the
   hero. Sits as a small quiet section below the hero. */
.page-intro {
  background: var(--warm-white);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.page-intro__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 52ch;
  margin: 0 auto;
  text-align: center;
}

/* In-page jump nav block · sits just below the hero on /what-i-make */
.page-jump-bar {
  padding: clamp(1.25rem, 3vw, 2rem) var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: var(--warm-white);
}
.page-jump-bar .page-jump { margin: 0 auto; }


/* --- Shared page header pattern ---------------------------------------- */

.page-header {
  text-align: center;
  padding-top: clamp(7rem, 14vw, 10rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.page-header .eyebrow { margin-bottom: 1rem; }
.page-header__intro {
  max-width: 56ch;
  margin: 1.25rem auto 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-style: italic;
  line-height: 1.55;
}

/* "— Section name —" divider with rule wings */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 0 auto 1.5rem;
  max-width: 760px;
}
.section-divider::before,
.section-divider::after {
  content: "";
  flex: 0 0 64px;
  height: 1px;
  background: var(--rule);
}
.section-divider__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: var(--ink);
}
.section-intro {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto clamp(3rem, 5vw, 4.5rem);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* In-page jump nav (lives under the page header on /what-i-make).
   Interpunct between links is inline (not absolute) so flex centring
   accounts for it correctly. */
.page-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 2.5rem auto 0;
}
.page-jump a {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.5rem 0;
}
.page-jump a:hover { color: var(--signed); }
.page-jump a:not(:last-child)::after {
  content: "·";
  margin: 0 1.25rem;
  color: var(--rule);
  letter-spacing: 0;
}

/* Quiet "back to top" anchor used at the end of each section */
.back-to-top {
  text-align: center;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}
.back-to-top a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.back-to-top a::before {
  content: "↑";
  letter-spacing: 0;
}
.back-to-top a:hover { color: var(--signed); }


/* --- What I Make · item rows ------------------------------------------- */

.item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  margin-bottom: clamp(5rem, 9vw, 8rem);
}
.item:last-child { margin-bottom: 0; }
.item--reverse .item__media { order: 2; }
.item--reverse .item__body  { order: 1; }

.item__img {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.item__body { padding-block: 1rem; }

.item__no {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
  display: block;
}

.item__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.4rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 1.2rem;
}
.item__name strong {
  font-weight: 400;
  display: block;
}
.item__name .item__with {
  display: block;
  font-size: 0.65em;
  color: var(--ink-soft);
  margin-top: 0.2em;
}

.item__descriptor {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.item__descriptor .dot { vertical-align: 0.12em; }

.item__ingredients {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.9;
  margin-bottom: 1.5rem;
}
.item__ingredients::before {
  content: "Ingredients: ";
  color: var(--ink-soft);
}

.item__serve {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 1.75rem;
}


/* --- Julie page -------------------------------------------------------- */

.julie-prose {
  max-width: var(--max-prose);
  margin: 0 auto;
  padding-block: clamp(2rem, 5vw, 4rem);
}

/* Imagery inside the Julie prose · the precious two-julies photo featured
   between paragraphs, plus a pair of "second Julie at work" photos. */
.julie-photo {
  display: block;
  margin: clamp(2rem, 5vw, 3.5rem) auto;
  max-width: 720px;
  width: 100%;
  border-radius: 2px;
}
.julie-photo--featured {
  filter: saturate(0.92);
}
.julie-photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin: clamp(2rem, 5vw, 3.5rem) auto;
  max-width: 820px;
}
.julie-photo-pair img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
}
@media (max-width: 600px) {
  .julie-photo-pair { grid-template-columns: 1fr; }
}
/* One uniform body size across the whole Julie² page · the larger one */
.julie-prose p {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.julie-stillroom {
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  max-width: var(--max-prose);
  text-align: center;
}
.julie-stillroom h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.julie-stillroom p {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0;
}

/* Julie sign-off: signed-julie SVG with "the 2nd" suffix beside it.
   Right-aligned within a prose-width column rather than the full page,
   so it sits slightly right of centre rather than floating to the edge. */
.julie-sign-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.65rem;
  max-width: var(--max-prose);
  margin: clamp(1rem, 2vw, 1.75rem) auto 0;
  padding-right: clamp(0rem, 4vw, 3rem);
}
.julie-sign-img {
  width: clamp(140px, 18vw, 220px);
  height: auto;
  display: block;
}
.julie-sign-suffix {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.5rem);
  color: var(--signed);
  padding-bottom: 0.7rem;
  line-height: 1;
}
.julie-sign-suffix sup {
  font-size: 0.6em;
  vertical-align: 0.45em;
  margin-left: 0.05em;
}

/* Stillroom def · image grid on /julie² · sketches reveal to photos
   on hover (desktop), focus (keyboard) or tap (mobile, via .is-revealed) */
.stillroom-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 1000px) { .stillroom-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .stillroom-grid { grid-template-columns: repeat(2, 1fr); } }

.stillroom-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  /* button reset (we use <button> for accessibility) */
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}
.stillroom-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 700ms var(--ease), transform 900ms var(--ease);
}
.stillroom-card__photo { opacity: 0; }
.stillroom-card__sketch { opacity: 1; }

.stillroom-card:hover .stillroom-card__photo,
.stillroom-card:focus-visible .stillroom-card__photo,
.stillroom-card.is-revealed .stillroom-card__photo { opacity: 1; }

.stillroom-card:hover .stillroom-card__sketch,
.stillroom-card:focus-visible .stillroom-card__sketch,
.stillroom-card.is-revealed .stillroom-card__sketch { opacity: 0; }

/* Tiny affordance hint for mobile-only · a small dot in the corner */
.stillroom-card::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 6px;
  height: 6px;
  background: var(--signed);
  border-radius: 50%;
  opacity: 0.55;
  transition: opacity 400ms var(--ease);
}
.stillroom-card:hover::after,
.stillroom-card.is-revealed::after { opacity: 0; }
@media (hover: hover) {
  .stillroom-card::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stillroom-card img { transition: opacity 0.01ms; }
}


/* --- Come Say Hello ---------------------------------------------------- */

.market-next {
  max-width: 720px;
  margin: 3rem auto 0;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  background: var(--warm-white);
}
.market-next__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.market-next__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 1rem;
}
.market-next__when {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.market-next__note {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 44ch;
  margin: 0 auto;
}

.market-list {
  list-style: none;
  padding: 0;
  margin: 4rem auto 0;
  max-width: 720px;
}
.market-list__item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 1.5rem;
  align-items: baseline;
}
.market-list__item:first-child { border-top: 1px solid var(--rule); }
.market-list__date {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.market-list__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
}
.market-list__where {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

.soft-cta {
  margin: clamp(4rem, 7vw, 6rem) auto 0;
  text-align: center;
  max-width: 60ch;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}
.soft-cta a { font-style: normal; }


/* --- Field Notes ------------------------------------------------------- */

.fn-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(4rem, 7vw, 6rem);
  align-items: center;
}
.fn-entry--reverse .fn-entry__media { order: 2; }
.fn-entry--reverse .fn-entry__body  { order: 1; }

.fn-entry__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

.fn-entry__meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.fn-entry__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  line-height: 1.2;
  margin: 0 0 1rem;
  color: var(--ink);
}
.fn-entry__title a { color: inherit; }

.fn-entry__excerpt {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.fn-empty {
  max-width: 600px;
  margin: clamp(3rem, 6vw, 5rem) auto;
  text-align: center;
  padding: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px dashed var(--rule);
  border-radius: 6px;
  background: var(--warm-white);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Single field note body */
.fn-single {
  max-width: var(--max-prose);
  margin: 0 auto;
  padding-block: clamp(2rem, 5vw, 4rem);
}
.fn-single p {
  font-size: 1.1rem;
  line-height: 1.75;
}
.fn-single p.lede {
  font-size: 1.3rem;
  line-height: 1.55;
  margin-bottom: 1.75rem;
}
/* Strong-led section labels inside a field note — upright Petrona 500,
   not synthetic bold. Reads as a quiet label within the italic body. */
.fn-single strong {
  font-weight: 500;
  font-style: normal;
  color: var(--ink);
}
.fn-single__hero {
  width: 100%;
  margin: 2rem 0;
  border-radius: 2px;
}

.fn-nav {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}


/* --- Request form ------------------------------------------------------ */

.form {
  max-width: 980px;
  margin: 3rem auto 0;
}

.form__group { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.form__label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.form__label--optional::after {
  content: " · optional";
  color: var(--muted);
  opacity: 0.7;
}

/* Small soft hint appended after a form label
   (e.g. "Your area · for shipping estimates") */
.form__label-hint {
  display: inline;
  letter-spacing: 0.16em;
  opacity: 0.7;
  margin-left: 0.4em;
  font-size: 0.95em;
  text-transform: none;
}
.form__label-hint::before {
  content: "· ";
  opacity: 0.6;
  margin-right: 0.15em;
}

/* Soft mailto line under the Send button */
.form__alt-cta {
  margin-top: 1.75rem;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}
.form__alt-cta a { color: var(--signed); }

.flavour-select {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}
.flavour-select__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.75rem 1rem 0.75rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--warm-white);
  transition: border-color var(--med) var(--ease);
}
.flavour-select__item:hover { border-color: var(--signed-warm); }
.flavour-select__icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain;
}
.flavour-select__name {
  flex: 1 1 auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.3;
}
.flavour-select__with {
  display: block;
  font-size: 0.88em;
  color: var(--ink-soft);
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}
.stepper button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--rule);
  background: transparent;
  border-radius: 50%;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  transition: all var(--med) var(--ease);
}
.stepper button:hover {
  background: var(--cream-deep);
  color: var(--ink);
  border-color: var(--signed-warm);
}
.stepper input {
  width: 32px;
  text-align: center;
  border: 0;
  background: transparent;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.pill-row label {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--warm-white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--med) var(--ease);
}
.pill-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pill-row label:hover {
  border-color: var(--signed);
  color: var(--ink);
}
.pill-row label:has(input:checked) {
  background: var(--signed);
  border-color: var(--signed);
  color: var(--cream);
}

.text-input,
.textarea {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--warm-white);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color var(--med) var(--ease),
              box-shadow var(--med) var(--ease);
}
.text-input::placeholder,
.textarea::placeholder { color: var(--muted); opacity: 0.7; }
.text-input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--signed);
  box-shadow: 0 0 0 3px rgba(138, 106, 78, 0.15);
}
.textarea { min-height: 120px; resize: vertical; }

.field-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.field-row > div .form__label { margin-bottom: 0.6rem; font-size: 0.65rem; }

.form__submit { text-align: center; margin-top: 3rem; }

.confirmation {
  display: none;
  text-align: center;
  max-width: 640px;
  margin: clamp(3rem, 6vw, 4rem) auto;
  padding: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px dashed var(--rule);
  border-radius: 6px;
  background: var(--warm-white);
}
.confirmation.is-visible { display: block; }
.confirmation__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);
  line-height: 1.2;
  margin: 0 0 1rem;
  color: var(--ink);
}
.confirmation__msg {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}
.confirmation__sign {
  display: block;
  width: 140px;
  margin: 1.5rem auto 0;
}


/* --- Responsive: page-level grids collapse on mobile ------------------- */

@media (max-width: 760px) {
  .item {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .item--reverse .item__media,
  .item--reverse .item__body { order: initial; }

  .fn-entry { grid-template-columns: 1fr; gap: 1.5rem; }
  .fn-entry--reverse .fn-entry__media,
  .fn-entry--reverse .fn-entry__body { order: initial; }

  .field-row { grid-template-columns: 1fr; }

  .market-list__item { grid-template-columns: 1fr; }
  .market-list__where { text-align: left; }

  .julie-sign { margin-left: 0; }
}


/* 10. Reduced motion =======================================================*/

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__scroll::after { animation: none; }
}