/* ============================================================
   Almost Fruit — Editorial Heritage Stylesheet
   ============================================================ */

:root {
  /* Palette */
  --cream: #faf4e8;
  --cream-deep: #f1e7d3;
  --plum: #5b1a34;
  --plum-deep: #3f0f22;
  --gold: #c19a3a;
  --gold-soft: #d8b664;
  --ink: #2c1e18;
  --ink-soft: #5b4a3f;
  --stone: #8a7d6f;
  --stone-line: #d7c9b3;
  --white: #ffffff;
  --berry: #7a1f3c;

  /* Typography */
  --font-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Scale */
  --step--1: clamp(0.83rem, 0.81rem + 0.10vw, 0.89rem);
  --step-0: clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1: clamp(1.20rem, 1.10rem + 0.50vw, 1.41rem);
  --step-2: clamp(1.44rem, 1.25rem + 0.95vw, 1.76rem);
  --step-3: clamp(1.73rem, 1.42rem + 1.53vw, 2.20rem);
  --step-4: clamp(2.07rem, 1.60rem + 2.36vw, 2.75rem);
  --step-5: clamp(2.49rem, 1.77rem + 3.58vw, 3.43rem);
  --step-6: clamp(2.99rem, 1.92rem + 5.35vw, 4.29rem);

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;

  /* Layout */
  --max: 1200px;
  --max-text: 68ch;
  --radius: 2px;
  --radius-lg: 6px;
  --transition: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --------- Reset --------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--plum); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold); }

/* --------- Typography --------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--plum-deep);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { max-width: var(--max-text); }
.lede { font-size: var(--step-1); color: var(--ink-soft); font-weight: 300; line-height: 1.55; }
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--gold);
}
.script {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--berry);
}

hr.ornament {
  border: 0;
  height: 24px;
  width: 120px;
  margin: var(--s-6) auto;
  background-image: radial-gradient(circle, var(--gold) 2px, transparent 2px);
  background-size: 12px 12px;
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.7;
}

/* --------- Layout --------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--s-5); }
.container-narrow { max-width: 820px; margin-inline: auto; padding-inline: var(--s-5); }
.section { padding-block: var(--s-8); }
.section-sm { padding-block: var(--s-7); }
.section-lg { padding-block: var(--s-9); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.split {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 820px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .split.left-narrow { grid-template-columns: 5fr 7fr; }
  .split.right-narrow { grid-template-columns: 7fr 5fr; }
}

/* --------- Announcement bar --------- */
.announce {
  background: var(--plum-deep);
  color: var(--cream);
  text-align: center;
  padding: var(--s-2) var(--s-5);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.announce a { color: var(--gold-soft); text-decoration: underline; }

/* --------- Navigation --------- */
.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--stone-line);
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(140%) blur(6px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-4);
}
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  color: var(--plum-deep);
}
.brand .word {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}
.brand .sub {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
}
.nav-links {
  display: none;
  list-style: none;
  padding: 0;
  gap: var(--s-6);
  align-items: center;
}
.nav-links a {
  color: var(--ink);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--s-2) 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--plum);
  border-bottom-color: var(--gold);
}
.nav-toggle {
  background: transparent;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  color: var(--plum);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav-toggle svg { width: 18px; height: 18px; }
@media (min-width: 880px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}
.mobile-menu {
  display: none;
  border-top: 1px solid var(--stone-line);
  background: var(--cream);
  padding: var(--s-4) var(--s-5) var(--s-5);
}
.mobile-menu[aria-hidden="false"] { display: block; }
.mobile-menu ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.mobile-menu a {
  display: block;
  font-size: var(--step-1);
  font-family: var(--font-serif);
  color: var(--ink);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--stone-line);
}

/* --------- Buttons --------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  background: var(--plum);
  color: var(--cream);
  border: 1px solid var(--plum);
  border-radius: var(--radius);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn:hover { background: var(--plum-deep); color: var(--cream); transform: translateY(-1px); }
.btn-ghost {
  background: transparent;
  color: var(--plum);
}
.btn-ghost:hover { background: var(--plum); color: var(--cream); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--plum-deep); }
.btn-gold:hover { background: var(--gold-soft); color: var(--plum-deep); }
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--plum);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--gold);
}
.btn-text:hover { color: var(--gold); }
.btn-text::after { content: "→"; transition: transform var(--transition); }
.btn-text:hover::after { transform: translateX(3px); }

/* --------- Hero --------- */
.hero {
  position: relative;
  padding-block: var(--s-9);
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(193,154,58,0.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(91,26,52,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: 6fr 5fr; gap: var(--s-9); }
}
.hero h1 {
  font-size: var(--step-6);
  line-height: 1.05;
  margin-top: var(--s-4);
}
.hero .lede { margin-top: var(--s-5); }
.hero-actions { margin-top: var(--s-6); display: flex; gap: var(--s-4); flex-wrap: wrap; }
.hero-art {
  display: grid;
  place-items: center;
  position: relative;
}
.hero-art .jar-frame {
  background: radial-gradient(circle at 50% 40%, var(--cream) 60%, transparent 72%);
  padding: var(--s-6);
}
.hero-art .jar-frame .jar-photo {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(91,26,52,0.35);
}
.jar-frame-ribbon {
  background: var(--cream);
  padding: 1.5rem;
  border-radius: 6px;
  text-align: center;
}
.jar-photo-ribbon {
  display: block;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}

/* --------- Cards --------- */
.card {
  background: var(--white);
  border: 1px solid var(--stone-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(91,26,52,0.2); }
.card-media {
  background: var(--cream-deep);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  border-bottom: 1px solid var(--stone-line);
}
.card-media svg { max-height: 260px; }
.card-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card-body h3 { font-size: var(--step-2); }
.card-body .meta { color: var(--stone); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; }
.card-body .summary { color: var(--ink-soft); font-size: var(--step-0); }
.card-footer {
  margin-top: auto;
  padding-top: var(--s-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Product tile — editorial */
.product-tile {
  background: var(--white);
  border: 1px solid var(--stone-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.product-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(91,26,52,0.2); }
.product-tile .jar-wrap {
  background: var(--cream);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--stone-line);
}
.product-tile .jar-wrap svg { max-height: 220px; }
.product-tile .jar-wrap .jar-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}
.product-tile:hover .jar-wrap .jar-photo { transform: scale(1.03); }
.product-tile .info { padding: var(--s-5); text-align: center; border-top: 1px solid var(--stone-line); }
.product-tile h3 { font-size: var(--step-2); color: var(--plum-deep); }
.product-tile .info .meta { color: var(--stone); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; }

/* Recipe/article media — real photography */
.photo {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--stone-line);
  background: var(--cream-deep);
  margin: 0;
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  transition: transform 600ms ease;
}
.card:hover .photo img,
a:hover > .photo img { transform: scale(1.03); }
.photo .caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-3) var(--s-4);
  background: rgba(250,244,232,0.92);
  border-top: 1px solid var(--stone-line);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: left;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
}
.photo.hero-image {
  border-radius: var(--radius-lg);
  border: 1px solid var(--stone-line);
  box-shadow: 0 20px 60px -30px rgba(91,26,52,0.28);
}
.photo.hero-image img {
  aspect-ratio: 16 / 9;
}

/* Legacy placeholder (unused but kept for safety) */
.placeholder-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, rgba(91,26,52,0.12) 0%, rgba(193,154,58,0.18) 100%),
    repeating-linear-gradient(45deg, var(--cream-deep) 0 10px, var(--cream) 10px 20px);
  position: relative;
  display: grid;
  place-items: center;
  color: var(--plum);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-1);
  border-bottom: 1px solid var(--stone-line);
}
.placeholder-photo .caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-3) var(--s-4);
  background: rgba(250,244,232,0.92);
  border-top: 1px solid var(--stone-line);
  font-size: var(--step--1);
  font-style: normal;
  color: var(--ink-soft);
  text-align: left;
  letter-spacing: 0.04em;
}
.placeholder-photo.hero-image {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --------- Featured / ribbon --------- */
.ribbon {
  background: var(--plum);
  color: var(--cream);
  padding: var(--s-7) 0;
  position: relative;
}
.ribbon::before,
.ribbon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background-image: radial-gradient(circle, var(--gold) 1.5px, transparent 1.5px);
  background-size: 10px 6px;
}
.ribbon::before { top: 8px; }
.ribbon::after { bottom: 8px; }
.ribbon h2 { color: var(--cream); }
.ribbon .eyebrow { color: var(--gold-soft); }
.ribbon p { color: var(--cream-deep); }

/* --------- Quote / testimonials --------- */
.quote {
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
}
.quote blockquote {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  line-height: 1.3;
  font-style: italic;
  color: var(--plum-deep);
}
.quote cite {
  display: block;
  margin-top: var(--s-5);
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
}

/* --------- Article / long-form --------- */
.article-body {
  max-width: 68ch;
  margin-inline: auto;
}
.article-body p { margin-bottom: var(--s-5); line-height: 1.75; }
.article-body h2 { font-size: var(--step-3); margin-top: var(--s-7); margin-bottom: var(--s-4); }
.article-body h3 { font-size: var(--step-2); margin-top: var(--s-6); margin-bottom: var(--s-3); }
.article-body blockquote {
  border-left: 3px solid var(--gold);
  padding: var(--s-3) var(--s-5);
  margin: var(--s-6) 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--plum-deep);
}
.article-body ul, .article-body ol { padding-left: var(--s-5); margin-bottom: var(--s-5); }
.article-body li { margin-bottom: var(--s-2); }
.article-body img, .article-body .placeholder-photo { margin-block: var(--s-6); border-radius: var(--radius-lg); }

.byline {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  color: var(--stone);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: var(--s-4);
}
.byline::before { content: ""; display: block; width: 24px; height: 1px; background: var(--gold); }

/* --------- Recipe spec --------- */
.recipe-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--stone-line);
  border-radius: var(--radius-lg);
  margin-block: var(--s-6);
}
.recipe-meta dt {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--stone);
}
.recipe-meta dd { font-family: var(--font-serif); font-size: var(--step-2); color: var(--plum-deep); margin: var(--s-1) 0 0; }

.recipe-grid { display: grid; gap: var(--s-7); }
@media (min-width: 820px) { .recipe-grid { grid-template-columns: 5fr 7fr; } }

.ingredients {
  background: var(--cream-deep);
  padding: var(--s-6);
  border-radius: var(--radius-lg);
  position: sticky;
  top: 96px;
}
.ingredients h3 { margin-bottom: var(--s-4); font-size: var(--step-2); }
.ingredients ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.ingredients li {
  display: flex;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px dotted var(--stone-line);
  font-size: var(--step-0);
}
.ingredients li:last-child { border-bottom: 0; }
.ingredients .qty { font-family: var(--font-serif); color: var(--plum); font-weight: 500; min-width: 80px; }

.method { display: grid; gap: var(--s-5); }
.method h3 { font-size: var(--step-2); }
.method ol { list-style: none; counter-reset: step; padding: 0; display: grid; gap: var(--s-5); }
.method ol li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px dotted var(--stone-line);
}
.method ol li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-serif);
  font-size: var(--step-3);
  color: var(--gold);
  line-height: 1;
}
.method ol li:last-child { border-bottom: 0; }

/* --------- Product detail --------- */
.product-hero { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 820px) { .product-hero { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.product-hero .jar-stage {
  background: radial-gradient(circle at 50% 40%, var(--cream-deep) 40%, var(--cream) 72%);
  padding: var(--s-5);
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  border: 1px solid var(--stone-line);
}
.product-hero .jar-stage svg { max-height: 360px; }
.product-hero .jar-stage .jar-photo {
  display: block;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(91,26,52,0.3);
}
.product-fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--stone-line);
}
.product-fact .eyebrow { display: block; margin-bottom: var(--s-1); }
.product-fact strong { font-family: var(--font-serif); font-size: var(--step-1); font-weight: 500; color: var(--plum-deep); }

.tablelike {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-5);
}
.tablelike th, .tablelike td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--stone-line);
  font-size: var(--step-0);
}
.tablelike th { color: var(--stone); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--step--1); }

/* --------- Forms --------- */
.form-field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.form-field label {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.form-field input, .form-field textarea, .form-field select {
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  font-size: var(--step-0);
  color: var(--ink);
  transition: border-color var(--transition);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none;
  border-color: var(--plum);
  box-shadow: 0 0 0 3px rgba(91,26,52,0.1);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: var(--step--1); color: var(--stone); }
.form-success {
  padding: var(--s-5);
  background: var(--cream-deep);
  border-left: 3px solid var(--gold);
  margin-top: var(--s-5);
  display: none;
}
.form-success.visible { display: block; }

.newsletter {
  padding: var(--s-7);
  background: var(--cream-deep);
  border-radius: var(--radius-lg);
  text-align: center;
}
.newsletter form {
  display: flex;
  gap: var(--s-3);
  max-width: 520px;
  margin: var(--s-5) auto 0;
  flex-wrap: wrap;
}
.newsletter input {
  flex: 1;
  min-width: 240px;
  padding: var(--s-4);
  border: 1px solid var(--stone-line);
  background: var(--white);
  border-radius: var(--radius);
}

/* --------- Breadcrumb --------- */
.breadcrumb {
  padding-block: var(--s-5);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}
.breadcrumb a { color: var(--stone); border-bottom: 1px dotted var(--stone); }
.breadcrumb a:hover { color: var(--plum); border-color: var(--plum); }
.breadcrumb span + span::before { content: " / "; color: var(--stone-line); margin: 0 var(--s-2); }

/* --------- FAQ --------- */
.faq details {
  border-bottom: 1px solid var(--stone-line);
  padding: var(--s-5) 0;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  color: var(--plum-deep);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: var(--step-3);
  color: var(--gold);
  font-family: var(--font-sans);
  font-weight: 200;
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: var(--s-4); color: var(--ink-soft); }

/* --------- Timeline --------- */
.timeline {
  border-left: 2px solid var(--gold);
  padding-left: var(--s-6);
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-6);
}
.timeline-item {
  position: relative;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-6) - 7px);
  top: 8px;
  width: 12px;
  height: 12px;
  background: var(--plum);
  border-radius: 50%;
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 2px var(--gold);
}
.timeline-item .year {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  color: var(--plum-deep);
}
.timeline-item h4 { margin: var(--s-1) 0; }

/* --------- Footer --------- */
.site-footer {
  background: var(--plum-deep);
  color: var(--cream-deep);
  padding: var(--s-8) 0 var(--s-5);
  margin-top: var(--s-9);
}
.site-footer a { color: var(--cream-deep); border-bottom: 1px solid transparent; }
.site-footer a:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }
.site-footer .eyebrow { color: var(--gold-soft); }
.footer-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: var(--s-7);
}
.footer-grid .brand .word { color: var(--cream); }
.footer-grid .brand .sub { color: var(--gold-soft); }
.footer-grid h4 { color: var(--cream); font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.18em; font-family: var(--font-sans); font-weight: 500; margin-bottom: var(--s-4); }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.footer-grid ul li { font-size: var(--step-0); }
.footer-grid p { font-size: var(--step--1); line-height: 1.7; color: rgba(250,244,232,0.8); }
.footer-bottom {
  padding-top: var(--s-5);
  border-top: 1px solid rgba(216,182,100,0.2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--step--1);
  color: rgba(250,244,232,0.6);
  letter-spacing: 0.08em;
}

/* --------- Utilities --------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mx-auto { margin-inline: auto; }
.max-text { max-width: var(--max-text); }
.hidden { display: none; }

/* --------- Motion --------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

.fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* Skip link */
.skip {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--plum);
  color: var(--cream);
  padding: var(--s-3) var(--s-4);
  z-index: 100;
}
.skip:focus { left: var(--s-4); top: var(--s-4); }

/* ============================================================
   Gentle quirks — the designer was doing their best
   ============================================================ */

/* Announce bar: small superscript footnote */
.announce .fn {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--gold-soft);
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.85;
}

/* "Heritage" stamp — hand-applied, very slightly crooked, a little off-center */
.stamp {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 2px solid var(--plum);
  color: var(--plum);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  transform: rotate(-5.2deg) translateY(-2px);
  background: rgba(250, 244, 232, 0.6);
  box-shadow: 0 1px 0 rgba(91, 26, 52, 0.08);
  opacity: 0.82;
  margin-left: -0.25rem; /* peeks slightly past its container */
}
.stamp.small { font-size: 0.75rem; padding: 0.3rem 0.75rem; transform: rotate(3.8deg); }
.stamp.tilt-right { transform: rotate(4.6deg) translateY(1px); }

/* A sticker that was supposed to come off but didn't — overlays one product tile */
.product-tile { position: relative; }
.product-tile .price-sticker {
  position: absolute;
  top: 14px;
  right: 10px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff4b4;
  color: #7a3c00;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.1;
  transform: rotate(8deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  z-index: 2;
  pointer-events: none;
}
.product-tile .price-sticker strong {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  color: #7a3c00;
  letter-spacing: -0.01em;
}

/* Asterisk footnote — for taglines and claims */
.fineprint {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--stone);
  font-style: italic;
  letter-spacing: 0.01em;
  max-width: 52ch;
}
.fineprint.center { margin-inline: auto; text-align: center; }

/* Timeline: one item has slightly different spacing because we changed the
   template once and didn't finish propagating the change */
.timeline-item.off {
  padding-left: 7px;
  letter-spacing: 0.003em;
}
.timeline-item.off h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.1rem;
}

/* Hero jar shadow: very subtle tilt */
.hero-art .jar-frame {
  transform: rotate(-0.6deg);
}

/* "Ornament" rule on one page is slightly left-pulled */
.ornament.nudge { margin-left: calc(50% - 80px); }

/* Footer: inconsistent spacing between the two bottom items (a small regression
   we keep meaning to address) */
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 2.75rem; }

/* Disclaimer strip — all the things our lawyer asked us to say */
.disclaimer-strip {
  background: var(--cream-deep);
  border-top: 1px dashed var(--stone-line);
  border-bottom: 1px dashed var(--stone-line);
  padding: 0.9rem 1rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--stone);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Callout badge in hero — "Voted almost the best" */
.award-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  margin-top: 1rem;
  background: rgba(193, 154, 58, 0.12);
  color: var(--plum-deep);
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  transform: rotate(-1.2deg);
}
.award-badge::before {
  content: "★";
  color: var(--gold);
}

/* A lone eyebrow with slightly off letter-spacing — the designer "refined" this
   one and forgot about it */
.eyebrow.refined { letter-spacing: 0.4em; }

/* Products-only: tiny "Net Wt." tag under each card */
.net-wt {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 6px;
}

/* An italicized parenthetical aside — used sparingly in product copy */
.aside {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
  opacity: 0.85;
}

/* One section heading nudged slightly to the right of the container baseline */
h2.nudge-right { margin-left: 1.5%; }

/* Slight rotation on the site-header brand — the original template was flat,
   but a redesign attempt left this at a fraction of a degree. Nobody has
   noticed enough to complain. */
.site-header .brand { transform: rotate(-0.18deg); }

/* A little typographical tell — quotes in blockquotes are not smart-quoted
   in one article because that string got escaped somewhere in the pipeline */
.article-body blockquote { position: relative; }

/* Print-only "rev. 4" mark in the footer, so readers know this is the fourth
   revision of the website. Or fifth. */
.rev {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-left: 0.5rem;
  vertical-align: middle;
  opacity: 0.7;
}