/* =============================================================
   Dr. Rallis — site stylesheet
   Cool Aegean palette · Cormorant Garamond × Inter × Roboto Mono
   ============================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Cool Aegean palette */
  --paper: #F3F0E6;
  --paper-warm: #EDE8DA;
  --paper-shade: #E5DFCF;
  --slate: #374351;
  --slate-deep: #2C3641;
  --ink: #12151A;
  --taupe: #A9A091;
  --taupe-soft: #C2BAAD;

  /* Typography */
  --font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Roboto Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (fluid) */
  --fs-hero:    clamp(3.5rem, 9vw + 1rem, 9rem);
  --fs-display: clamp(2.5rem, 5vw + 1rem, 5.5rem);
  --fs-h1:      clamp(2rem, 3vw + 1rem, 3.5rem);
  --fs-h2:      clamp(1.5rem, 1.6vw + 1rem, 2.25rem);
  --fs-h3:      1.375rem;
  --fs-lead:    clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --fs-mono:    0.75rem;
  --fs-mono-sm: 0.6875rem;

  /* Letter-spacing */
  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.06em;
  --ls-wider: 0.16em;
  --ls-widest: 0.22em;

  /* Line-height */
  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-normal: 1.55;
  --lh-loose: 1.75;

  /* Spacing scale */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;
  --sp-8: 9rem;
  --sp-9: 12rem;

  /* Layout */
  --maxw: 1440px;
  --maxw-prose: 36rem;
  --gutter: clamp(1.5rem, 4vw, 4rem);

  /* Lines */
  --rule: rgba(18, 21, 26, 0.18);
  --rule-strong: rgba(18, 21, 26, 0.32);
  --rule-light: rgba(243, 240, 230, 0.28);
  --rule-light-strong: rgba(243, 240, 230, 0.55);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
}

a { color: inherit; text-decoration: none; transition: opacity 200ms ease, color 200ms ease; }
a:hover { opacity: 0.65; }

::selection { background: var(--slate); color: var(--paper); }

/* ---------- 3. Typography utilities ---------- */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.t-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 0.95;
  letter-spacing: -0.025em;
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}
.t-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.t-lead { font-size: var(--fs-lead); line-height: 1.55; font-weight: 300; }
.t-body { font-size: var(--fs-body); line-height: var(--lh-normal); }
.t-sm { font-size: var(--fs-sm); line-height: 1.6; }

.t-eyebrow,
.t-mono-caps {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  font-weight: 400;
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-wide);
}
.t-greek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
}

/* ---------- 4. Rules ---------- */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  height: 0;
}
.rule--light { border-top-color: var(--rule-light); }
.rule--strong { border-top-color: var(--rule-strong); }
.rule--short { width: 3.5rem; }
.rule--center { margin-inline: auto; }
.rule--my-3 { margin-block: var(--sp-3); }
.rule--my-4 { margin-block: var(--sp-4); }

/* ---------- 5. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 1080px; }
.container--prose  { max-width: var(--maxw-prose); }

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-6); }
.section--xl { padding-block: var(--sp-9); }

.section--paper { background: var(--paper); color: var(--ink); }
.section--paper-warm { background: var(--paper-warm); color: var(--ink); }
.section--paper-shade { background: var(--paper-shade); color: var(--ink); }
.section--slate { background: var(--slate); color: var(--paper); }
.section--ink   { background: var(--ink); color: var(--paper); }

/* On dark sections, rules need to be light */
.section--slate .rule,
.section--ink .rule { border-top-color: var(--rule-light); }

/* Editorial 12-col grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: var(--sp-5);
}

/* Common asymmetric layouts */
.split-meta-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 800px) {
  .split-meta-content {
    grid-template-columns: 16rem 1fr;
    gap: var(--sp-6);
  }
}

.flow > * + * { margin-top: var(--sp-3); }
.flow-tight > * + * { margin-top: var(--sp-2); }
.flow-loose > * + * { margin-top: var(--sp-4); }

/* ---------- 6. Site header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 240, 230, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: 1rem;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: var(--ls-snug);
  line-height: 1;
}
.site-brand__mark { width: 36px; height: 36px; flex: none; }
.site-brand__text { font-weight: 400; }
.site-nav { display: none; }
.site-nav ul { display: flex; gap: var(--sp-4); align-items: center; }
.site-nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}
@media (min-width: 880px) {
  .site-nav { display: block; }
}

.site-cta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  border: 1px solid var(--ink);
  padding: 0.625rem 1rem;
  transition: background 200ms ease, color 200ms ease, opacity 200ms ease;
}
.site-cta:hover {
  background: var(--ink);
  color: var(--paper);
  opacity: 1;
}

/* ---------- 7. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  padding: 0.95rem 1.5rem;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  transition: background 200ms ease, color 200ms ease, opacity 200ms ease;
}
.btn:hover { opacity: 1; background: currentColor; }
.btn:hover > * { color: var(--paper); }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid:hover { background: var(--slate); border-color: var(--slate); }
.btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--paper:hover { background: transparent; color: var(--paper); }

/* ---------- 8. Media placeholders ---------- */
/* These sit in the layout where the user will drop in real photos & video.
   They should feel intentional — like a thoughtful art-direction note. */
.media {
  position: relative;
  background: var(--paper-shade);
  color: var(--slate);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.section--slate .media,
.section--ink .media {
  background: rgba(243, 240, 230, 0.06);
  color: var(--paper);
  border-color: var(--rule-light-strong);
}
.media::before,
.media::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.media::before {
  inset: 12px;
  border: 1px dashed currentColor;
  opacity: 0.18;
}
.media__label {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--sp-3);
}
.media__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  opacity: 0.7;
}
.media__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.2;
}
.media__note {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--ls-wide);
  opacity: 0.55;
}

/* Aspect ratios */
.media--16-9 { aspect-ratio: 16 / 9; }
.media--4-5  { aspect-ratio: 4 / 5; }
.media--3-4  { aspect-ratio: 3 / 4; }
.media--1-1  { aspect-ratio: 1 / 1; }
.media--cinema { aspect-ratio: 21 / 9; }
.media--portrait { aspect-ratio: 2 / 3; }
.media--video::after {
  /* small play-mark */
  inset: auto;
  width: 56px; height: 56px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.35;
  background:
    linear-gradient(transparent 24px, currentColor 24px 32px, transparent 32px) center / 14px 8px no-repeat;
}
.media--video .media__label { display: none; }
.media--video .media__caption {
  position: absolute;
  z-index: 2;
  bottom: 1rem; left: 1rem; right: 1rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  opacity: 0.65;
}

/* ---------- 9. Hero (olive oil) ---------- */
.hero {
  position: relative;
  background: var(--slate);
  color: var(--paper);
  min-height: min(100vh, 920px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-block: var(--sp-4) var(--sp-5);
  overflow: hidden;
}
.hero__top, .hero__center, .hero__bottom {
  position: relative;
  z-index: 2;
}
.hero__top {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  opacity: 0.85;
}
.hero__center {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--sp-6);
}
.hero__mark { width: clamp(110px, 14vw, 180px); margin-bottom: var(--sp-3); opacity: 0.95; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.hero__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 1.6vw + 1rem, 2rem);
  margin-top: var(--sp-2);
  opacity: 0.92;
}
.hero__rule {
  width: 4rem; margin: var(--sp-3) auto;
  border: 0; border-top: 1px solid var(--rule-light-strong);
}
.hero__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  opacity: 0.85;
}
.hero__bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  opacity: 0.8;
}
@media (min-width: 720px) {
  .hero__bottom { grid-template-columns: 1fr auto 1fr; align-items: end; }
  .hero__bottom > :nth-child(3) { text-align: right; }
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.18;
  background: var(--ink);
}
.hero__media .media {
  height: 100%;
  width: 100%;
  border: 0;
  background: transparent;
}
.hero__media .media::before { display: none; }

/* Scroll cue */
.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}
.hero__cue::before {
  content: "";
  display: inline-block;
  width: 1px; height: 24px;
  background: currentColor;
  opacity: 0.5;
}

/* ---------- 10. Section heading ---------- */
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
@media (min-width: 800px) {
  .section-head { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--sp-5); }
}
.section-head__kicker { display: flex; flex-direction: column; gap: var(--sp-2); }
.section-head__title { max-width: 36rem; }

/* ---------- 11. Quote / pull-quote ---------- */
.pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.8vw + 1rem, 2.5rem);
  line-height: 1.25;
  font-style: italic;
}
.pullquote-cite {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  margin-top: var(--sp-3);
}
.pullquote-role {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  opacity: 0.7;
  margin-top: 0.25rem;
}

/* ---------- 12. Specs panel (mirrors the label data block) ---------- */
.specs {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-light);
  border-bottom: 1px solid var(--rule-light);
}
.specs__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--rule-light);
}
.specs__row:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .specs__row { grid-template-columns: 14rem 1fr; align-items: baseline; gap: var(--sp-3); }
}
.specs__key {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  opacity: 0.7;
}
.specs__val {
  font-family: var(--font-display);
  font-size: 1.5rem;
}
.specs__val em { font-style: italic; opacity: 0.7; font-size: 1.125rem; margin-left: 0.25rem; }

/* Big stat (like 482 mg/kg on the label) */
.bigstat {
  display: flex; flex-direction: column; gap: 0.25rem;
}
.bigstat__num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 0.9;
  font-weight: 400;
}
.bigstat__unit {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  opacity: 0.7;
}
.bigstat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  opacity: 0.55;
}

/* ---------- 13. Process steps ---------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2rem;
  opacity: 0.6;
}
.step__title { margin-top: var(--sp-2); margin-bottom: var(--sp-1); }
.step__body { font-size: var(--fs-sm); line-height: 1.65; opacity: 0.85; }

/* ---------- 14. Reserve form ---------- */
.reserve-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  max-width: 32rem;
}
@media (min-width: 560px) { .reserve-form { grid-template-columns: 1fr auto; } }
.reserve-form input {
  font: inherit;
  font-size: var(--fs-body);
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0.95rem 0.25rem;
  color: inherit;
  outline: none;
}
.reserve-form input::placeholder {
  color: currentColor;
  opacity: 0.45;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1.125rem;
}
.reserve-form input:focus { border-bottom-color: currentColor; }

/* ---------- 15. Project tiles (umbrella) ---------- */
.projects {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
@media (min-width: 720px) {
  .projects { grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); }
}
.project {
  position: relative;
  display: block;
  background: var(--paper-warm);
  color: var(--ink);
  overflow: hidden;
  border: 1px solid var(--rule);
  transition: transform 400ms ease, box-shadow 400ms ease;
}
.project:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 24px 60px -30px rgba(18,21,26,0.25); }
.project--feature { grid-column: span 1; }
.project--small { grid-column: span 1; }
@media (min-width: 720px) {
  .project--feature { grid-column: span 8; }
  .project--small { grid-column: span 4; }
}
.project__media { aspect-ratio: 16 / 11; background: var(--slate); position: relative; overflow: hidden; }
.project--small .project__media { aspect-ratio: 4 / 5; }
.project__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.project__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  opacity: 0.6;
}
.project__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.2vw + 1rem, 3rem);
  line-height: 1.05;
  letter-spacing: var(--ls-snug);
}
.project__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  opacity: 0.78;
  max-width: 38ch;
}
.project__cta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-top: var(--sp-2);
}
.project__cta::after {
  content: " →";
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 200ms ease;
}
.project:hover .project__cta::after { transform: translateX(4px); }
.project--coming {
  background: transparent;
  border-style: dashed;
  pointer-events: none;
}
.project--coming .project__media {
  background: var(--paper-shade);
}
.project--coming .project__title { opacity: 0.5; }

/* ---------- 16. Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--sp-6) var(--sp-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-5); }
}
.footer-mark { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; }
.footer-tagline { font-family: var(--font-display); font-style: italic; opacity: 0.7; margin-top: 0.5rem; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  opacity: 0.7;
  margin-bottom: var(--sp-2);
  font-weight: 400;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col a { font-size: var(--fs-sm); }
.footer-bottom {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-light);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  opacity: 0.55;
}
@media (min-width: 720px) {
  .footer-bottom { grid-template-columns: 1fr 1fr; }
  .footer-bottom > :last-child { text-align: right; }
}

/* ---------- 17. Misc helpers ---------- */
.center-text { text-align: center; }
.muted { opacity: 0.65; }
.cap-w { max-width: 60ch; }
.span-prose { max-width: 38rem; }
.divider-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  text-align: center;
  opacity: 0.4;
}

/* tighten on small screens */
@media (max-width: 720px) {
  :root { --sp-8: 5.5rem; --sp-9: 7rem; --sp-7: 4.5rem; --sp-6: 3.25rem; }
}

/* Print niceties (just in case) */
@media print {
  .site-header, .site-footer, .hero__cue, .reserve-form { display: none; }
}

/* ============================================================
   Mobile fixes — Olive Oil page (added 2026-05)
   ============================================================ */
@media (max-width: 720px) {
  /* Force grid-column inline styles to behave on narrow screens */
  .grid > * { grid-column: 1 / -1 !important; }
  
  /* Make the metadata definition lists readable */
  .grid > .flow > dl.t-mono {
    grid-template-columns: 1fr !important;
    gap: 0.4rem !important;
  }
  .grid > .flow > dl.t-mono dt {
    font-weight: 600;
    opacity: 0.7;
    margin-top: 0.5rem;
  }
  .grid > .flow > dl.t-mono dd {
    margin: 0;
    padding-left: 0;
  }
  
  /* Polyphenol bigstat — keep number and unit on same line */
  .bigstat {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 0.5rem !important;
    flex-wrap: wrap;
  }
  .bigstat__num { font-size: clamp(3rem, 14vw, 5rem); line-height: 1; }
  .bigstat__unit { font-size: 0.95rem; opacity: 0.85; white-space: nowrap; }
  
  /* Flavour profile rule alignment — make sure short rule starts at left edge */
  .rule.rule--short { margin-left: 0 !important; margin-right: 0 !important; }
  
  /* Add visual breathing room between flow columns when they stack */
  .grid > .flow + .flow { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,0.08); }
}