/* ============================================================
   Soma Sensation Studio · Base & shared components
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: rgba(217, 164, 65, 0.3); color: var(--cream); }

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

/* --- Typography ------------------------------------------- */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; margin: 0; }
.display {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
.h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-dim);
  font-weight: 400;
}
.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  color: var(--gold-400);
  margin: 0 0 var(--space-md);
  display: inline-block;
}
.prose p { margin: 0 0 var(--space-md); max-width: 38em; }
.prose p:last-child { margin-bottom: 0; }
.text-grad {
  background: var(--river-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
em, .italic { font-style: italic; }

/* --- Layout ----------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.center { text-align: center; }
.measure { max-width: 40rem; }
.stack > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }

/* --- Header / nav ----------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left group · centered wordmark · right group */
  align-items: center;
  gap: var(--space-md);
  padding: clamp(0.95rem, 0.75rem + 0.8vw, 1.5rem) var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-med) var(--ease-out),
    backdrop-filter var(--dur-med), border-color var(--dur-med), padding var(--dur-med);
}
.site-header.is-scrolled {
  background: rgba(11, 8, 7, 0.9); /* ink-900, matches the footer */
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.brand-mark {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.brand-logo {
  display: block;
  height: clamp(2.2rem, 1.7rem + 1.4vw, 3rem);
  width: auto;
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 0.5rem + 1.5vw, 2.2rem); }
.nav-left { justify-self: start; }
.nav-right { justify-self: end; }
.nav a {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav a:hover { color: var(--gold-300); }
.nav-link-cta {
  color: var(--gold-400) !important;
  border: 1px solid rgba(217, 164, 65, 0.5);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.95rem;
  white-space: nowrap;
}
/* Editor-only: shown only in preview/draft mode (see index.astro) so an editor
   who previewed always has a clear way back to the live site. */
.preview-exit {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  background: rgba(11, 8, 7, 0.92);
  border: 1px solid rgba(217, 164, 65, 0.45);
  color: var(--gold-400);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.preview-exit:hover { color: var(--gold-300); border-color: var(--gold-400); }
@media (max-width: 64rem) {
  /* Section links collapse to the rail; the header becomes a standard
     wordmark-left + CTA-right bar (a lone centered wordmark reads as broken). */
  .nav .nav-hide { display: none; }
  .site-header { grid-template-columns: auto 1fr; }
  .nav-left { display: none; }
  .brand-mark { justify-self: start; }
}
@media (max-width: 30rem) {
  /* Phones: tighten the gap and shrink the CTA so it and the wordmark share
     one line. .nav .nav-link-cta outranks .nav a on font-size. */
  .site-header { gap: 0.75rem; }
  .nav .nav-link-cta {
    white-space: nowrap;
    flex-shrink: 0;
    text-align: center;
    padding: 0.5rem 0.8rem;
    font-size: 0.72rem;
  }
}
@media (max-width: 26rem) {
  .brand-mark { font-size: 1.1rem; }
}

/* --- Mobile section rail (scroll-spy) ---------------------- */
/* Shown only where the header's section links hide (<=64rem). Lives inside
   the right gutter, mirroring the left margin, so content stays centered.
   Current section is marked by tint + opacity, in the studio's own gold. */
.rail {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 40;
  width: var(--gutter);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  pointer-events: none;
}
.rail-item {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 100%;
  height: 2rem;
  color: var(--cream);
  opacity: 0.32;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rail-item svg { width: 20px; height: 20px; }
.rail-item[aria-current="true"] { opacity: 1; color: var(--gold-400); }
.rail-item:hover { opacity: 0.62; }
.rail-item[aria-current="true"]:hover { opacity: 1; }
.rail-vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 64rem) {
  .rail { display: flex; }
}

/* --- Buttons ---------------------------------------------- */
.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 0.95em 1.8em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-500);
  color: var(--ink-900);
  background: var(--gold-500);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), filter var(--dur-fast);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); filter: brightness(1.06); }
.btn:active { transform: translateY(0); }
.btn--ghost {
  background: transparent;
  color: var(--gold-300);
  border-color: rgba(217, 164, 65, 0.5);
}
.btn--ghost:hover { background: rgba(217, 164, 65, 0.08); box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.btn .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* --- River canvases & motion ------------------------------ */
.river-svg { width: 100%; height: 100%; overflow: visible; }
.river-band {
  position: relative;
  width: 100%;
  height: clamp(90px, 14vw, 200px);
  pointer-events: none;
  overflow: hidden;
}
.river-band[data-river] { display: block; }

@keyframes river-drift { from { transform: translateX(0); } to { transform: translateX(-1200px); } }
@keyframes stream-drift { from { transform: translateY(0); } to { transform: translateY(-1100px); } }
@keyframes vessel-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.03) rotate(1.2deg); }
}
@keyframes fade-rise { from { opacity: 0; transform: translateY(1.4rem); } to { opacity: 1; transform: none; } }

.river-flow { animation: river-drift var(--spd, 30s) linear infinite; }
.stream-flow { animation: stream-drift var(--spd, 24s) linear infinite; animation-delay: var(--dl, 0s); }
.vessel-breathe { transform-box: fill-box; transform-origin: center; animation: vessel-breathe 14s var(--ease-in-out) infinite; }
.vessel-svg path { animation: fade-rise 1.4s var(--ease-out) backwards; animation-delay: var(--dl, 0s); }

@media (prefers-reduced-motion: reduce) {
  .river-flow, .stream-flow, .vessel-breathe, .vessel-svg path { animation: none !important; }
}

/* --- Reveal on scroll ------------------------------------- */
.reveal { opacity: 0; transition: opacity 1.4s var(--ease-out); }
.reveal.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; } }

/* --- Meet / bio ------------------------------------------- */
.bio { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 52rem) { .bio { align-items: start; } }
@media (min-width: 52rem) { .bio { grid-template-columns: 1.15fr 0.85fr; } }
.bio-portrait {
  position: relative;
  aspect-ratio: 1035 / 1851; /* portrait-cropped.JPG, shown whole */
  border-radius: var(--radius-pill); /* vertical mirror capsule */
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, var(--ink-500), var(--ink-800));
  display: grid;
  place-items: center;
}
.bio-portrait .placeholder-note {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--cream-faint);
}
.bio-portrait .vessel-mini { position: absolute; inset: 8% ; opacity: 0.6; }

/* --- Credentials list ------------------------------------- */
.creds { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.creds li { position: relative; padding-left: 1.6em; color: var(--text-dim); }
.creds li::before {
  content: ""; position: absolute; left: 0;
  top: calc(0.5em * var(--lh-body)); transform: translateY(-50%);
  width: 0.54em; height: 0.06em;
  background: var(--river-grad);
}

/* --- Certifications reveal (hover / focus; open on touch) -- */
/* Same gold triangle as the toolkit rows leads the label: right when closed,
   down when revealed (always down on touch, where the list is always open).
   The label is small (eyebrow size), so the marker, its column and the list
   indent scale to that text (em here = the eyebrow size), not to the toolkit's. */
.certs { cursor: default; }
.certs .eyebrow { margin-bottom: 0; }
.certs-label { display: grid; grid-template-columns: 1.6em 1fr; align-items: center; }
.certs-mark { display: block; width: 0.8em; height: 0.8em; color: var(--gold-400); }
.certs-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transition: transform var(--dur-fast) var(--ease-out);
}
.certs:hover .certs-mark svg, .certs:focus .certs-mark svg, .certs:focus-within .certs-mark svg { transform: rotate(90deg); }
.certs .creds { padding-left: calc(0.8 * var(--fs-eyebrow)); } /* half the label's marker column */
.certs .creds {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out), margin-top var(--dur-med) var(--ease-out);
}
.certs:hover .creds, .certs:focus .creds, .certs:focus-within .creds {
  max-height: 44rem;
  opacity: 1;
  margin-top: var(--space-sm);
}
@media (hover: none) {
  .certs .creds { max-height: none; opacity: 1; margin-top: var(--space-sm); }
  .certs-mark svg { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .certs-mark svg { transition: none; } }

/* --- What I bring (accordion) ------------------------------ */
/* Four hairline rows. A small gold triangle leads each title in place of a
   number or a "+": it points right when closed and turns to point down when
   the row opens. Native <details>, one open at a time via the shared name. */
.toolkit {
  --toolkit-title-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --toolkit-indent: var(--disclosure-col); /* marker column (shared with the certifications); the open list nests by half of it */
  border-bottom: 1px solid var(--line);
}
.toolkit-group { border-top: 1px solid var(--line); }
.toolkit-group > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: var(--toolkit-indent) 1fr;
  align-items: start;
  padding-block: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--toolkit-title-size);
  line-height: var(--lh-snug);
}
.toolkit-group > summary::-webkit-details-marker { display: none; }
.toolkit-mark {
  position: relative;
  height: calc(1em * var(--lh-snug)); /* one title line, so the mark centres on the first line */
  color: var(--gold-400);
}
.toolkit-mark svg {
  position: absolute;
  left: 0;
  top: calc(50% - var(--disclosure-size) / 2);
  width: var(--disclosure-size);
  height: var(--disclosure-size);
  transform-origin: 50% 50%;
  transition: transform var(--dur-fast) var(--ease-out);
}
.toolkit-group[open] .toolkit-mark svg { transform: rotate(90deg); }
.toolkit-title { transition: color var(--dur-fast) var(--ease-out); }
.toolkit-group > summary:hover .toolkit-title { color: var(--gold-300); }
.toolkit-items { padding-left: calc(var(--toolkit-indent) / 2); padding-bottom: var(--space-md); margin-top: var(--space-2xs); }
@media (prefers-reduced-motion: reduce) { .toolkit-mark svg { transition: none; } }

/* --- Approach pillars ------------------------------------- */
.pillars { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { padding-top: var(--space-md); border-top: 1px solid var(--line); }
.pillar .num { font-family: var(--font-heading); font-size: 0.8rem; color: var(--gold-400); letter-spacing: 0.1em; }
.pillar h3 { margin: var(--space-2xs) 0 var(--space-xs); }
.pillar p { color: var(--text-dim); margin: 0; }

/* --- Offerings -------------------------------------------- */
.offerings { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 50rem) { .offerings { grid-template-columns: repeat(3, 1fr); } }
/* offerings: open, no card box; bounded by top and bottom hairlines */
.offering {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-md);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.offering .kicker { font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.05em; color: var(--gold-400); }
.offering h3 { margin: var(--space-xs) 0; }
.offering p { color: var(--text-dim); margin: 0 0 var(--space-md); flex: 1; }
.offering .link {
  font-family: var(--font-heading); font-size: 0.78rem; letter-spacing: 0.08em;
  text-decoration: none; color: var(--gold-300);
  display: inline-flex; align-items: center; gap: 0.5em;
}
.offering .link .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.offering:hover .link .arrow { transform: translateX(4px); }

/* --- CTA band --------------------------------------------- */
.cta-band { position: relative; text-align: center; overflow: hidden; }
.cta-band .container { position: relative; z-index: 2; }
.cta-band .river-band { position: absolute; inset: auto 0 0 0; height: 60%; opacity: 0.5; z-index: 1; }

.section-ornament {
  display: block;
  height: auto;
  margin: 0 auto var(--space-lg);
}

/* --- Footer ----------------------------------------------- */
.site-footer {
  padding-block: var(--space-lg);
  background: var(--ink-900);
}
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); align-items: center; justify-content: space-between; }
.footer-icons { display: flex; gap: var(--space-md); align-items: center; }
.footer-icons a { color: var(--cream-dim); display: inline-flex; transition: color var(--dur-fast) var(--ease-out); }
.footer-icons a:hover { color: var(--gold-300); }
.footer-grid h4 { font-family: var(--font-heading); font-size: 0.8rem; letter-spacing: 0.05em; color: var(--cream-faint); margin: 0 0 var(--space-sm); font-weight: 400; }
.footer-grid a { color: var(--text-dim); text-decoration: none; transition: color var(--dur-fast); }
.footer-grid a:hover { color: var(--gold-300); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.footer-brand .display { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); margin: 0; }
.footer-meta { margin-top: var(--space-sm); text-align: right; color: var(--cream-faint); font-size: var(--fs-small); }
.footer-credit {
  display: block;
  margin-bottom: var(--space-3xs);
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-credit:hover { color: var(--gold-300); }
.footer-credit-src { white-space: nowrap; }
.footer-credit-arrow {
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  vertical-align: -0.05em;
}

/* --- Placeholder ribbon (dev only) ------------------------ */
.ph {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--ink-900);
  background: var(--gold-400);
  padding: 0.1em 0.5em;
  border-radius: 3px;
  vertical-align: middle;
  opacity: 0.85;
}

/* --- Section labels for the gallery ----------------------- */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--gold-400); color: var(--ink-900);
  padding: 0.6em 1em; z-index: 100; border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--font-heading); font-size: 0.8rem; text-decoration: none;
}
.skip-link:focus { left: 0; }