/* Marci.RMT — shared styles */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --sage: #5a6b4f;
  --sage-deep: #3f4a37;
  --sage-soft: #8a9a7d;
  --sage-pale: #c9d3bf;
  --sage-wash: #e8ebe1;
  --paper: #f4f1ea;
  --paper-light: #faf8f1;
  --paper-warm: #ede8dc;
  --ink: #2a2a26;
  --ink-soft: #4a4a44;
  --ink-mute: #7a7a72;
  --rule: #c8c2b3;
  --rule-soft: #ddd6c5;

  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --max: 1240px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sage-deep);
  color: var(--paper-light);
  padding: 12px 20px;
  z-index: 200;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
  color: var(--paper-light);
  outline: 2px solid var(--paper-light);
  outline-offset: -4px;
}
:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: 2px;
}
button:focus-visible, .btn:focus-visible, .nav-cta:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

/* Subtle paper grain on body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(90,107,79,0.025) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(90,107,79,0.02) 0, transparent 50%);
  mix-blend-mode: multiply;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--sage-deep); text-decoration: none; }
a:hover { color: var(--sage); }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  position: relative;
  z-index: 2;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
}

.diamond {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--sage);
  transform: rotate(45deg);
  margin: 0 14px;
  vertical-align: middle;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 241, 234, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--sage-deep);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.brand .dot { color: var(--sage); }
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 8px 0;
  position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--sage-deep); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--sage);
}
.nav-cta {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--sage-deep);
  color: var(--paper-light);
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--sage-deep);
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--sage); border-color: var(--sage); color: var(--paper-light); }

.menu-toggle { display: none; background: none; border: 0; font-size: 1.4rem; color: var(--sage-deep); cursor: pointer; }

@media (max-width: 880px) {
  .nav-links, .nav-cta { display: none; }
  .menu-toggle { display: block; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    background: var(--paper-light);
    border-bottom: 1px solid var(--rule-soft);
    padding: 24px var(--pad) 32px;
    gap: 18px;
    align-items: flex-start;
    box-shadow: 0 12px 24px rgba(31,41,29,0.08);
  }
  .nav-links.open a {
    font-size: 1.1rem;
    letter-spacing: 0;
    text-transform: none;
    font-family: var(--serif);
    color: var(--ink);
    font-weight: 400;
  }
  .nav-links.open ~ .nav-cta { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid var(--sage-deep);
  background: var(--sage-deep);
  color: var(--paper-light);
  cursor: pointer;
  transition: all 0.2s;
}
.btn:hover { background: var(--sage); border-color: var(--sage); color: var(--paper-light); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--sage-deep); }
.btn--ghost:hover { background: var(--sage-deep); color: var(--paper-light); }
.btn .arr { font-family: var(--serif); font-size: 1.05rem; transition: transform 0.2s; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- Sections ---------- */
section { padding: clamp(64px, 10vw, 128px) 0; position: relative; z-index: 2; }

.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 72px);
}
@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; }
}
.section-head h2 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.05;
}
.section-head h2 em { font-style: italic; color: var(--sage); }
.section-head .lede {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--sage-deep);
  color: var(--paper);
  padding: 96px 0 32px;
  position: relative;
  z-index: 2;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-top: 64px;
  margin-top: 48px;
  border-top: 1px solid rgba(244,241,234,0.18);
}
@media (max-width: 760px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.site-footer h5 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-pale);
  margin: 0 0 14px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--paper); opacity: 0.85; font-size: 0.92rem; }
.site-footer a:hover { opacity: 1; color: var(--paper-light); }
.footer-fine {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.74rem;
  color: var(--sage-pale);
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(244,241,234,0.12);
  letter-spacing: 0.04em;
}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero {
  padding: clamp(80px, 12vw, 160px) 0 clamp(48px, 8vw, 96px);
  border-bottom: 1px solid var(--rule-soft);
}
.page-hero .eyebrow { display: block; margin-bottom: 24px; }
.page-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: 1;
  margin-bottom: 24px;
}
.page-hero h1 em { font-style: italic; color: var(--sage); }
.page-hero .lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 60ch;
  color: var(--ink-soft);
}

/* ---------- Subtle paper texture block ---------- */
.paper-block {
  background: var(--paper-light);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(90,107,79,0.04) 0, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(90,107,79,0.03) 0, transparent 60%);
}

/* ---------- Cards ---------- */
.card {
  background: var(--paper-light);
  border: 1px solid var(--rule-soft);
  padding: 32px;
  transition: all 0.3s ease;
}
.card:hover { border-color: var(--sage-soft); }

/* tables */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 8px; text-align: left; border-bottom: 1px solid var(--rule-soft); }
th { font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }

/* ---------- "What I treat" grid ---------- */
/* 260px min gives four columns at full width, so twelve items make three even
   rows. Lines are drawn per cell, so a short last row leaves no grey block. */
.treat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 1px;
}
.treat-cell {
  box-shadow: 0 0 0 1px var(--rule-soft);
  background: var(--paper-light);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.2s;
  text-decoration: none;
  color: inherit;
  position: relative;
}
/* Cells are a plain list for now. A cell that becomes a link (<a class="treat-cell">,
   e.g. to a condition page) picks up the hover and the arrow. */
a.treat-cell:hover { background: var(--paper); }
a.treat-cell:hover .name { color: var(--sage-deep); }
a.treat-cell::after {
  content: '→';
  position: absolute;
  top: 22px;
  right: 22px;
  color: var(--ink-mute);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  font-family: var(--serif);
  font-size: 1.05rem;
}
a.treat-cell:hover::after { opacity: 1; transform: translateX(3px); color: var(--sage); }
.treat-cell .name {
  font-family: var(--serif);
  font-size: 1.18rem;
  color: var(--ink);
  line-height: 1.3;
  transition: color 0.2s;
}

/* ---------- Sticky mobile Book CTA ---------- */
.mobile-book {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: none;
  background: var(--sage-deep);
  color: var(--paper-light);
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(31,41,29,0.28);
  text-decoration: none;
  align-items: center;
  gap: 8px;
}
.mobile-book:hover { background: var(--sage); color: var(--paper-light); }
.mobile-book .arr { font-family: var(--serif); font-size: 1.05rem; }
@media (max-width: 880px) {
  .mobile-book { display: inline-flex; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
}
.breadcrumbs a {
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.breadcrumbs a:hover { color: var(--sage-deep); }
.breadcrumbs .sep { opacity: 0.45; }
.breadcrumbs .current { color: var(--sage-deep); text-transform: uppercase; letter-spacing: 0.12em; }

/* ---------- Mobile layout ----------
   The design prototype set its grid columns with inline style attributes,
   which outrank stylesheet media queries no matter how specific those get.
   Collapsing those layouts on phones therefore needs !important. Rows that
   should stay side by side are restored underneath. */

/* Tablets: four and three column rows get cramped well before phone width. */
@media (max-width: 980px) and (min-width: 761px) {
  [style*="repeat(4"], [style*="repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 760px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Grid and flex children default to min-width:auto, which lets a long word
     or a wide image push the whole row past the edge of the screen. */
  [style*="grid-template-columns"] > * { min-width: 0; }

  /* A sticky column (the About photo) only works beside the text it follows.
     Once the columns stack, it would ride down the page on top of the copy,
     so on phones it scrolls with everything else. */
  [style*="position: sticky"] { position: static !important; }

  /* Short label/value rows read worse stacked, so keep these two-up. */
  [style*="140px 1fr"] { grid-template-columns: 140px 1fr !important; }

  .site-footer .footer-grid { grid-template-columns: 1fr 1fr !important; }

  img, svg, video, figure, table { max-width: 100%; }
  figure { margin-left: 0; margin-right: 0; }
}