/* ==========================================================================
   Sandmark Capital
   Built to the Sandmark Branding Guidelines (01_Business_Foundation/Brand).
   Palette, type scale, and 8px spacing rhythm are taken directly from that file.
   ========================================================================== */

:root {
  --forest: #16352A;
  --gold:   #C9A84C;
  --sand:   #E7D9BE;
  --cream:  #F6F1E6;
  --stone:  #9A855C;

  /* Derived shades used for interaction states (design system tokens/colors.css) */
  --forest-900: #0D2119;
  --gold-700:   #A8892F;

  /* Line tokens. Gold (--line-accent) is emphasis and is spent once or twice
     per view; everything structural uses the forest hairline. */
  --line-hairline: rgba(22, 53, 42, 0.12);
  --line-accent:   var(--gold);

  /* 8px base unit: 8 / 16 / 24 / 32 / 40 / 48 / 64 / 96 */
  --u1: 8px;
  --u2: 16px;
  --u3: 24px;
  --u4: 32px;
  --u5: 40px;
  --u6: 48px;
  --u8: 64px;
  --u12: 96px;

  --measure: 64ch;
  --container: 1200px;

  /* Motion (design system tokens/motion.css) */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--forest);
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Balances ragged edges and prevents single-word orphans on wrapped headings. */
  text-wrap: pretty;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Focus ring: 2px gold at 2px offset. The one place gold appears
   without being an intentional accent. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::selection { background: #DCC585; color: var(--forest); }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  margin: 0;
}

/* Type scale and per-level line-height and tracking are taken from the design
   system (tokens/typography.css): 52 / 38 / 26 / 20, body 16, caption 11.
   Cormorant wants air at large sizes, so tracking opens as size grows. */
.display {
  font-size: clamp(38px, 5.4vw, 52px);
  line-height: 1.06;
  letter-spacing: 0.03em;
}
.h1 { font-size: clamp(30px, 4.2vw, 38px); line-height: 1.12; letter-spacing: 0.02em; }
.h2 { font-size: clamp(23px, 2.8vw, 26px); line-height: 1.18; letter-spacing: 0.015em; }
.h3 { font-size: 20px; line-height: 1.25; letter-spacing: 0.01em; }

.overline {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.3em;
  /* Tracking adds trailing space after the last letter, which optically shifts
     tracked-out labels left. The design system cancels it with a negative
     margin equal to the tracking. */
  margin: 0 -0.3em var(--u2) 0;
  text-transform: uppercase;
  /* DELIBERATE DEVIATION: the system's --text-overline is stone-600 (#836F4A),
     which measures 4.30:1 on cream and 3.47:1 on sand. Both fail WCAG AA for
     11px text, so overlines on light grounds stay Forest (11.82 / 9.56). */
  color: var(--forest);
}
.overline--gold { color: var(--gold); }

p { margin: 0 0 var(--u3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
/* 20px is the h3 step. The scale has no 18px, and dropping to 16px would make
   the hero subhead indistinguishable from body copy. */
.lead { font-size: 20px; }
.caption { font-size: 11px; line-height: 1.45; letter-spacing: 0.02em; }

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--u6);
}
.section { padding: var(--u12) 0; }
.section--tight { padding: var(--u8) 0; }
.prose { max-width: var(--measure); }

/* A subsection divider is structural, so it takes the hairline. Gold is
   available via .rule--accent for a genuine one-per-view emphasis. */
.rule {
  width: 56px;
  height: 1px;
  background: var(--line-hairline);
  border: 0;
  margin: 0 0 var(--u3);
}
.rule--accent { background: var(--line-accent); }
.rule--center { margin-left: auto; margin-right: auto; }

/* ---------- grounds ---------- */
.ground-forest { background: var(--forest); color: var(--sand); }
.ground-sand   { background: var(--sand);   color: var(--forest); }
.ground-cream  { background: var(--cream);  color: var(--forest); }
.ground-forest .overline { color: var(--gold); }
.ground-forest h1, .ground-forest h2, .ground-forest h3 { color: var(--sand); }

/* ---------- tide-line motif ----------
   Brand guide, tide-line spec: repeating rows of a low sine-like wave.
   Geometry is fixed, not eyeballed: 48px crest-to-crest cycle, amplitude +/-10px,
   24px between row baselines, 2px stroke with round caps, two rows by default.
   Row 2 recedes at 45% opacity in the lighter tone of the pairing.
   Height is always 8 + rows x 24 = 56px. The motif stretches horizontally
   (preserveAspectRatio="none") but is never scaled vertically.
   Used once per page only, as the full-bleed band at the top of the forest footer.
   Pairings: forest ground -> gold lead, sand trail. Light ground -> forest lead,
   stone trail (kept available below for a future section divider).             */
.tideline {
  height: 56px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1152 56' preserveAspectRatio='none' fill='none' stroke-linecap='round'%3E%3Cpath d='M0 10 C12 0 36 20 48 10 C60 0 84 20 96 10 C108 0 132 20 144 10 C156 0 180 20 192 10 C204 0 228 20 240 10 C252 0 276 20 288 10 C300 0 324 20 336 10 C348 0 372 20 384 10 C396 0 420 20 432 10 C444 0 468 20 480 10 C492 0 516 20 528 10 C540 0 564 20 576 10 C588 0 612 20 624 10 C636 0 660 20 672 10 C684 0 708 20 720 10 C732 0 756 20 768 10 C780 0 804 20 816 10 C828 0 852 20 864 10 C876 0 900 20 912 10 C924 0 948 20 960 10 C972 0 996 20 1008 10 C1020 0 1044 20 1056 10 C1068 0 1092 20 1104 10 C1116 0 1140 20 1152 10' stroke='%2316352A' stroke-width='2' opacity='1'/%3E%3Cpath d='M0 34 C12 24 36 44 48 34 C60 24 84 44 96 34 C108 24 132 44 144 34 C156 24 180 44 192 34 C204 24 228 44 240 34 C252 24 276 44 288 34 C300 24 324 44 336 34 C348 24 372 44 384 34 C396 24 420 44 432 34 C444 24 468 44 480 34 C492 24 516 44 528 34 C540 24 564 44 576 34 C588 24 612 44 624 34 C636 24 660 44 672 34 C684 24 708 44 720 34 C732 24 756 44 768 34 C780 24 804 44 816 34 C828 24 852 44 864 34 C876 24 900 44 912 34 C924 24 948 44 960 34 C972 24 996 44 1008 34 C1020 24 1044 44 1056 34 C1068 24 1092 44 1104 34 C1116 24 1140 44 1152 34' stroke='%238C8477' stroke-width='2' opacity='0.45'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 56px;
}
.tideline--gold {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1152 56' preserveAspectRatio='none' fill='none' stroke-linecap='round'%3E%3Cpath d='M0 10 C12 0 36 20 48 10 C60 0 84 20 96 10 C108 0 132 20 144 10 C156 0 180 20 192 10 C204 0 228 20 240 10 C252 0 276 20 288 10 C300 0 324 20 336 10 C348 0 372 20 384 10 C396 0 420 20 432 10 C444 0 468 20 480 10 C492 0 516 20 528 10 C540 0 564 20 576 10 C588 0 612 20 624 10 C636 0 660 20 672 10 C684 0 708 20 720 10 C732 0 756 20 768 10 C780 0 804 20 816 10 C828 0 852 20 864 10 C876 0 900 20 912 10 C924 0 948 20 960 10 C972 0 996 20 1008 10 C1020 0 1044 20 1056 10 C1068 0 1092 20 1104 10 C1116 0 1140 20 1152 10' stroke='%23C9A84C' stroke-width='2' opacity='1'/%3E%3Cpath d='M0 34 C12 24 36 44 48 34 C60 24 84 44 96 34 C108 24 132 44 144 34 C156 24 180 44 192 34 C204 24 228 44 240 34 C252 24 276 44 288 34 C300 24 324 44 336 34 C348 24 372 44 384 34 C396 24 420 44 432 34 C444 24 468 44 480 34 C492 24 516 44 528 34 C540 24 564 44 576 34 C588 24 612 44 624 34 C636 24 660 44 672 34 C684 24 708 44 720 34 C732 24 756 44 768 34 C780 24 804 44 816 34 C828 24 852 44 864 34 C876 24 900 44 912 34 C924 24 948 44 960 34 C972 24 996 44 1008 34 C1020 24 1044 44 1056 34 C1068 24 1092 44 1104 34 C1116 24 1140 44 1152 34' stroke='%23E7D9BE' stroke-width='2' opacity='0.45'/%3E%3C/svg%3E");
  opacity: 0.9;
}

/* ---------- header ---------- */
.site-header {
  background: var(--cream);
  border-bottom: 1px solid rgba(22, 53, 42, 0.12);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u5);
  padding-top: var(--u3);
  padding-bottom: var(--u3);
}
.brand img { height: 66px; width: auto; }
.nav { display: flex; gap: var(--u5); align-items: center; }
.nav a {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-right: -0.3em;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav a:hover { border-bottom-color: var(--gold); }
.nav a[aria-current="page"] { border-bottom-color: var(--gold); }

/* ---------- hero ---------- */
.hero { padding: var(--u12) 0 var(--u8); }
.hero .display { max-width: 24ch; margin-bottom: var(--u3); }
/* Controlled line breaks in the hero headline so no word is orphaned.
   Suppressed on narrow screens, where the headline wraps naturally.
   NOTE: each <br class="brk"> must be preceded by a space in the markup.
   display:none removes the break without substituting whitespace, so without
   that space the surrounding words collide ("thesmall") on mobile. */
.brk { display: inline; }
.hero .lead { max-width: 56ch; color: var(--sand); opacity: 0.88; }

.page-head { padding: var(--u8) 0; }
.page-head .h1 { max-width: 20ch; }
.page-head p { color: var(--sand); opacity: 0.88; margin-top: var(--u2); }

/* ---------- panels ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--u8) var(--u5);
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--u5);
}
.panel h3 { margin-bottom: var(--u2); }
.panel p { max-width: none; }
/* Panels repeat 3-4 times per view, so their top edge is structural, not
   emphasis: a full-width forest hairline, the same job the hairline border
   does on a card in the design system. Gold here would spend the accent
   three times on one screen and stop reading as an accent at all. */
.panel::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line-hairline);
  margin-bottom: var(--u3);
}

/* ---------- criteria table ---------- */
.spec { width: 100%; border-collapse: collapse; margin: 0; }
.spec th, .spec td {
  text-align: left;
  vertical-align: top;
  padding: var(--u3) 0;
  border-bottom: 1px solid rgba(22, 53, 42, 0.15);
}
.spec th {
  width: 26%;
  padding-right: var(--u5);
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-right: -0.3em;
  color: var(--forest);
  line-height: 1.7;
}
.spec td { font-weight: 300; }
.spec tr:first-child th, .spec tr:first-child td { border-top: 1px solid rgba(22, 53, 42, 0.15); }

/* ---------- exclusion list ---------- */
.marked { list-style: none; padding: 0; margin: 0 0 var(--u3); max-width: var(--measure); }
.marked li {
  position: relative;
  padding-left: var(--u3);
  margin-bottom: var(--u2);
}
/* The brand sheet's bullet is a small gold diamond, drawn here as a rotated
   4px square so it needs no glyph or icon font. */
.marked li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ---------- button ---------- */
.btn {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-indent: 0.2em;
  text-decoration: none;
  padding: var(--u2) var(--u5);
  border: 1px solid var(--gold);
  color: var(--sand);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--gold); color: var(--forest); }
.btn:active { transform: scale(0.985); }
.btn--dark { border-color: var(--forest); color: var(--forest); }
.btn--dark:hover { background: var(--forest); color: var(--cream); }

/* ---------- links in prose ---------- */
.link {
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
/* System rule is "hover darkens" and "never lighten on hover". Its own
   --text-link-hover (gold-700) measures 2.97:1 on cream, so on light grounds
   the text darkens to forest-900 and gold stays the accent in the underline.
   On forest, gold is both correct and compliant at 5.83:1. */
.link:hover { color: var(--forest-900); }
.ground-forest .link:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- principal ---------- */
.bio {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--u8);
  align-items: start;
}
.portrait {
  border: 1px solid var(--gold);
  padding: var(--u1);
  background: var(--cream);
}
.portrait img { width: 100%; height: auto; }
.portrait figcaption {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: -0.12em;
  color: var(--forest);
  padding: var(--u2) 0 4px;
  text-align: center;
}

/* ---------- affiliations / service (stacked) ---------- */
.stack { list-style: none; padding: 0; margin: 0; }
.stack li {
  position: relative;
  padding-left: var(--u3);
  margin-bottom: var(--u1);
  line-height: 1.7;
}
.stack li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ---------- contact ---------- */
/* Body size, on scale. The old 18px/line-height-2 was off the system scale
   entirely; the air between lines now comes from an 8px gap rather than from
   an inflated line-height, which keeps the type matching the rest of the page. */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--u1);
  font-size: 16px;
  line-height: 1.6;
}
.contact-details a { text-decoration: none; border-bottom: 1px solid var(--gold); }

/* ---------- CTA band ---------- */
.cta { text-align: center; }
.cta .h2 { margin-bottom: var(--u3); }
.cta p { margin-left: auto; margin-right: auto; max-width: 52ch; }
.cta .btn { margin-top: var(--u5); }

/* ---------- footer ---------- */
.site-footer { background: var(--forest); color: var(--sand); }
.site-footer .container { padding-top: var(--u8); padding-bottom: var(--u8); }
/* Footer lockup uses the trimmed transparent asset, so the stated height is the
   height of the mark itself (the old asset baked in ~40% forest padding). 60px
   here is the same visible size as 112px of the padded file. */
.site-footer img { height: 60px; width: auto; margin-bottom: var(--u5); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--u5);
  align-items: end;
}
.site-footer a { text-decoration: none; border-bottom: 1px solid rgba(201, 168, 76, 0.6); }
.site-footer .caption { opacity: 0.72; margin-top: var(--u3); }
.footer-nav { display: flex; gap: var(--u3); flex-wrap: wrap; justify-content: flex-end; }
.footer-nav a {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-right: -0.3em;
  border-bottom: none;
}
.footer-nav a:hover { color: var(--gold); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; gap: var(--u8); }
  .grid-2 { grid-template-columns: 1fr; gap: var(--u8); }
  .bio { grid-template-columns: 1fr; gap: var(--u5); }
  .portrait { max-width: 280px; }
}

@media (max-width: 720px) {
  .container { padding: 0 var(--u3); }
  .section { padding: var(--u8) 0; }
  .hero { padding: var(--u8) 0 var(--u5); }
  .site-header .container {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--u3);
  }
  .brand img { height: 54px; }
  .site-footer img { height: 45px; }
  .brk { display: none; }
  .hero .display { max-width: 20ch; }
  .nav { gap: var(--u3); flex-wrap: wrap; }
  .nav a { font-size: 10px; letter-spacing: 0.22em; }
  .spec th, .spec td { display: block; width: 100%; padding-right: 0; }
  .spec th { border-bottom: none; padding-bottom: var(--u1); }
  .spec td { padding-top: 0; }
  .spec tr:first-child td { border-top: none; }
  .footer-grid { grid-template-columns: 1fr; align-items: start; }
  .footer-nav { justify-content: flex-start; }
}