/* Genesis Wellness: shared brand layer. Loaded after scrollcraft.css on every page. */
:root {
  --sc-canvas:     #EAE2D7;   /* her plaster walls */
  --sc-surface:    #E1D6C8;
  --sc-ink:        #2A1E16;   /* the team's chocolate */
  --sc-ink-soft:   #5C4A3C;
  --sc-accent:     #4A3426;   /* uniform brown */
  --sc-accent-ink: #F7F2EB;
  --sc-font-display: "Cormorant Garamond", "Cormorant", Garamond, serif;
  --sc-font-text:    "Jost", "Futura", system-ui, sans-serif;
  --plaster: #EAE2D7;
  --line: #3B2A1F;
  --night: #1C1511;
}
body { font-weight: 400; background: var(--plaster); }
.sc-display { font-weight: 300; letter-spacing: -0.015em; }
.sc-display em { font-style: italic; font-weight: 300; }

/* ---------- bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5);
  padding: max(var(--sc-3), env(safe-area-inset-top)) max(var(--sc-gutter), env(safe-area-inset-right)) var(--sc-3) max(var(--sc-gutter), env(safe-area-inset-left));
  background: color-mix(in oklab, var(--plaster) 88%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 10%, transparent);
  backdrop-filter: blur(10px);
  transform: translateZ(0);
}
/* Safari on iPhone/iPad flickers a blurred header over moving content: use a solid bar there */
@media (hover: none) and (pointer: coarse), (max-width: 1180px) {
  .bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--plaster); }
}
.bar__mark { display: block; width: clamp(128px, 12vw, 168px); line-height: 0; }
.bar__mark img { width: 100%; height: auto; }
.bar__right { display: flex; align-items: center; gap: var(--sc-5); }
.bar__links { display: flex; align-items: center; gap: var(--sc-5); font-size: var(--sc-t-sm); letter-spacing: 0.06em; }
.bar__links a { color: var(--sc-ink); text-decoration: none; padding-block: var(--sc-2); }
.bar__links a:hover, .bar__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.bar__menu { display: none; position: relative; }
.bar__menu summary {
  list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 var(--sc-3); font-size: var(--sc-t-sm); letter-spacing: 0.06em; color: var(--sc-ink);
}
.bar__menu summary::-webkit-details-marker { display: none; }
.bar__menu nav {
  position: absolute; right: 0; top: calc(100% + var(--sc-2)); min-width: 13rem;
  display: grid; padding: var(--sc-3); background: var(--plaster); border-radius: 14px;
  box-shadow: 0 18px 40px -20px rgba(42, 30, 22, 0.45); border: 1px solid color-mix(in oklab, var(--line) 12%, transparent);
}
.bar__menu nav a { color: var(--sc-ink); text-decoration: none; padding: var(--sc-3) var(--sc-3); font-size: var(--sc-t-base); }
.bar__menu nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
/* tablets: the full nav still fits on one line, with tighter gaps */
@media (max-width: 1024px) {
  .bar__links a { white-space: nowrap; }
  .bar__right, .bar__links { gap: var(--sc-4); }
}
@media (max-width: 760px) {
  .bar__links { display: none; }
  .bar__right { gap: var(--sc-2); }
  .bar__menu { display: block; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 var(--sc-5); border-radius: 999px; white-space: nowrap;
  background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none;
  font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.08em;
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:hover { background: #33241A; }
.btn:active { transform: translateY(1px); }
@media (max-width: 760px) { .btn { padding: 0 var(--sc-4); } }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

.eyebrow { margin: 0; font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft); }
.textlink { color: var(--sc-ink); text-underline-offset: 6px; text-decoration-thickness: 1px; }
.new-tag {
  display: inline-flex; align-items: center; gap: var(--sc-2); width: fit-content;
  font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink);
}
.new-tag::before { content: ""; width: 2.25rem; height: 1px; background: var(--line); }

/* Placeholder copy: visible on purpose so nothing unconfirmed ships unnoticed. */
.tbd { color: var(--sc-ink-soft); background: color-mix(in oklab, #d9b98f 26%, transparent); padding: 0 0.2em; border-radius: 3px; }

/* the Genesis U: arched-bottom frame used for portraits */
.u-frame { overflow: hidden; border-radius: 0 0 999px 999px / 0 0 30% 30%; background: var(--sc-surface); border: 1.5px solid var(--line); border-top: 0; }
.u-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* subpage footer */
.foot {
  padding: var(--sc-8) var(--sc-gutter) var(--sc-6); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-5);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft); border-top: 1px solid var(--sc-hairline-strong);
}
.foot strong { color: var(--sc-ink); font-weight: 500; letter-spacing: 0.06em; }
.foot a { color: var(--sc-ink); }