/*
 * SerasMac V4 — Controlled Passage
 * Homepage-only final art-direction layer.
 * Purpose: replace the stacked meeting/v3 showcase overrides with one owned system.
 */

:root {
  --sm-v4-porcelain: #f3efe6;
  --sm-v4-paper: #fffcf6;
  --sm-v4-limestone: #ddd5c8;
  --sm-v4-forest: #102724;
  --sm-v4-forest-soft: #1c3430;
  --sm-v4-mineral: #176e66;
  --sm-v4-mineral-deep: #0f574f;
  --sm-v4-brass: #b48652;
  --sm-v4-oxide: #a34f3e;
  --sm-v4-mist: #dce7e2;
  --sm-v4-ink: #142724;
  --sm-v4-ink-soft: #53635f;
  --sm-v4-line: rgba(16, 39, 36, .14);
  --sm-v4-line-strong: rgba(16, 39, 36, .25);
  --sm-v4-paper-shadow: 0 22px 70px rgba(16, 39, 36, .11);
  --sm-v4-deep-shadow: 0 34px 90px rgba(5, 20, 18, .28);
  --sm-v4-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

body.home {
  background: var(--sm-v4-porcelain);
}

body.home .sm-site-header {
  background: color-mix(in srgb, var(--sm-v4-paper) 90%, transparent);
  border-bottom-color: rgba(16, 39, 36, .09);
  backdrop-filter: blur(18px) saturate(1.1);
}

body.home .sm-site-header__inner {
  min-height: 86px;
}

body.home .sm-brand {
  letter-spacing: -.04em;
}

.sm-v4-home {
  overflow: clip;
  color: var(--sm-v4-ink);
  background: var(--sm-v4-porcelain);
}

.sm-v4-home *,
.sm-v4-home *::before,
.sm-v4-home *::after {
  box-sizing: border-box;
}

.sm-v4-home h1,
.sm-v4-home h2,
.sm-v4-home h3,
.sm-v4-home p,
.sm-v4-home dl,
.sm-v4-home dd,
.sm-v4-home ol,
.sm-v4-home ul {
  margin-top: 0;
}

.sm-v4-home h1,
.sm-v4-home h2,
.sm-v4-home h3 {
  color: inherit;
  font-family: var(--sm-font-display);
}

.sm-v4-home a {
  text-underline-offset: .22em;
}

.sm-v4-home .sm-container {
  width: min(100% - clamp(2rem, 5vw, 5rem), 1420px);
}

.sm-v4-eyebrow,
.sm-v4-kicker,
.sm-v4-section-index {
  font-family: var(--sm-font-body);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sm-v4-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.15rem;
  align-items: center;
  color: var(--sm-v4-mineral);
  font-size: .7rem;
}

.sm-v4-eyebrow span:first-child {
  color: var(--sm-v4-ink);
}

.sm-v4-eyebrow span + span::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  margin-right: 1.15rem;
  vertical-align: middle;
  background: var(--sm-v4-brass);
}

.sm-v4-kicker {
  margin-bottom: 1rem;
  color: var(--sm-v4-mineral);
  font-size: .68rem;
}

.sm-v4-section-index {
  color: rgba(16, 39, 36, .44);
  font-size: .66rem;
  white-space: nowrap;
}

.sm-v4-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: .95rem 1.2rem .95rem 1.35rem;
  color: var(--sm-v4-paper);
  border: 1px solid var(--sm-v4-forest);
  border-radius: 2px;
  background: var(--sm-v4-forest);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.sm-v4-button--primary {
  color: var(--sm-v4-paper);
  border-color: var(--sm-v4-forest);
  background: var(--sm-v4-forest);
}

.sm-v4-button .sm-icon {
  width: 17px;
  height: 17px;
  transition: transform .25s ease;
}

.sm-v4-button:hover,
.sm-v4-button:focus-visible {
  color: #fff;
  border-color: var(--sm-v4-mineral);
  background: var(--sm-v4-mineral);
  transform: translateY(-2px);
}

.sm-v4-button:hover .sm-icon,
.sm-v4-button:focus-visible .sm-icon {
  transform: translate(3px, -3px);
}

.sm-v4-button--light {
  color: var(--sm-v4-forest);
  border-color: var(--sm-v4-paper);
  background: var(--sm-v4-paper);
}

.sm-v4-button--light:hover,
.sm-v4-button--light:focus-visible {
  color: var(--sm-v4-paper);
  border-color: var(--sm-v4-brass);
  background: var(--sm-v4-brass);
}

.sm-v4-button--outline {
  color: var(--sm-v4-forest);
  border-color: var(--sm-v4-line-strong);
  background: transparent;
}

.sm-v4-button--outline:hover,
.sm-v4-button--outline:focus-visible {
  color: var(--sm-v4-paper);
  border-color: var(--sm-v4-forest);
  background: var(--sm-v4-forest);
}

.sm-v4-button--paper {
  color: var(--sm-v4-forest);
  border-color: var(--sm-v4-paper);
  background: var(--sm-v4-paper);
}

.sm-v4-button--paper:hover,
.sm-v4-button--paper:focus-visible {
  color: var(--sm-v4-forest);
  border-color: var(--sm-v4-brass);
  background: var(--sm-v4-brass);
}

.sm-v4-text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--sm-v4-ink);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.sm-v4-text-link::after {
  content: "↗";
  color: var(--sm-v4-mineral);
  font-size: 1rem;
  transition: transform .25s ease;
}

.sm-v4-text-link:hover::after,
.sm-v4-text-link:focus-visible::after {
  transform: translate(3px, -3px);
}

.sm-v4-text-link--inverse {
  color: var(--sm-v4-paper);
}

.sm-v4-text-link--inverse::after {
  color: var(--sm-v4-brass);
}