/* ==================================================================
   SIERRA CAIRN — sierracairn.com

   Every page descends: Granite at altitude, where the survey is
   plotted; Paper at the treeline, where the reading happens; Granite
   again at the foot, across a ridge.

   Brand kit per the Sierra Cairn Capital Brand Book (May 2026):
   one mark, two typefaces, five colors. The hero line, the primary
   tagline's position at the foot, and the header lockup all follow
   the assignments in section 05 and 06 and mockup 07.

   The palette is committed rather than theme-following, so every
   colour is painted explicitly and the page holds on any host.
   ================================================================== */

:root{
  --moss:    #2C3E2D;
  --granite: #1C1F1C;
  --paper:   #FBF7EE;
  --stone:   #B8AD99;
  --rust:    #8B4A2B;

  /* Stone darkened until it carries as text on Paper (true Stone is
     ~1.9:1 there). True Stone stays on rules and dividers. */
  --stone-ink: #6B6252;
  --moss-soft: #4A5B48;

  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--granite);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.06rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

:focus-visible{ outline: 2px solid var(--rust); outline-offset: 3px; }
a{ color: inherit; }

.rail{ max-width: 1240px; margin-inline: auto; padding-inline: clamp(22px, 5vw, 70px); }

/* ============================ ALTITUDE ============================ */
.summit{ position: relative; background: var(--granite); overflow: hidden; }
.summit .survey{
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
  -webkit-mask-image: linear-gradient(200deg, #000 0%, rgba(0,0,0,.80) 42%, rgba(0,0,0,.16) 78%);
  mask-image: linear-gradient(200deg, #000 0%, rgba(0,0,0,.80) 42%, rgba(0,0,0,.16) 78%);
}
/* Two darker ranges along the foot of the home hero, per mockup 07. */
.summit .skyline{
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: clamp(150px, 30%, 320px);
  display: none; pointer-events: none;
}
.summit.is-home .skyline{ display: block; }
.summit .rail{ position: relative; z-index: 1; }

.masthead{
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-top: clamp(26px, 4.5vh, 46px);
}

/* Horizontal lockup — the memo's specified web-header form. */
.wordmark{
  --logo-size: 22px;
  display: inline-flex; align-items: center;
  gap: calc(var(--logo-size) * .62);
  line-height: 1; color: var(--paper); text-decoration: none;
}
/* Sized to mockup 07's approved proportion: the cairn's ink reads 1.28x the
   wordmark's type size. (1.045 merely preserved what the old padded box had
   been rendering, which was the mark undersized by the same headroom bug.) */
.wordmark .mk{ height: calc(var(--logo-size) * 1.36); width: auto; fill: currentColor; }
.wordmark .bar{ width: 1px; align-self: stretch; background: currentColor; opacity: .38; }
.wordmark .text{ display: flex; flex-direction: column; }
.wordmark .name{
  font-family: var(--f-display); font-weight: 400;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 20;
  font-size: var(--logo-size); letter-spacing: .14em; text-transform: uppercase;
}
.wordmark .desc{
  font-size: calc(var(--logo-size) * .27); font-weight: 500;
  letter-spacing: .48em; text-transform: uppercase;
  color: var(--stone); margin-top: calc(var(--logo-size) * .34); padding-left: .48em;
}

.masthead nav{ display: flex; gap: clamp(15px, 2.4vw, 32px); flex-wrap: wrap; }
.masthead nav a{
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(251,247,238,.45); text-decoration: none;
  transition: color .2s ease;
}
.masthead nav a:hover{ color: var(--paper); }
.masthead nav a[aria-current="page"]{ color: var(--paper); }

/* ---- Banners: one per page, only one shown ---- */
.banner{ display: none; }
.banner.is-on{ display: flex; flex-direction: column; justify-content: center; }

.banner .eyebrow{
  display: flex; align-items: center; gap: 13px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 clamp(16px, 2.6vh, 24px);
}
.banner .eyebrow .dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--rust); flex: none; }

.banner h1{
  font-family: var(--f-display); font-weight: 300;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 40;
  line-height: 1.06; letter-spacing: -.015em; margin: 0;
}
.banner .sub{
  margin: clamp(20px, 3.2vh, 32px) 0 0;
  max-width: 40ch; color: rgba(184,173,153,.92);
  font-size: clamp(.97rem, .93rem + .2vw, 1.06rem);
}

/* home banner — tall, clears the ranges */
.banner--home{
  min-height: min(88vh, 880px);
  padding-top: clamp(56px, 10vh, 110px);
  padding-bottom: clamp(160px, 26vh, 300px);
}
.banner--home h1{
  font-size: clamp(2.05rem, 1.05rem + 4.3vw, 4.7rem);
  max-width: 27ch;
}
.banner--home h1 em{ font-style: italic; color: var(--stone); }
.banner--home h1 .stop{ color: var(--rust); font-style: normal; }

/* inner banners — shorter, no ranges */
.banner--inner{
  min-height: min(42vh, 400px);
  padding-block: clamp(52px, 9vh, 96px) clamp(56px, 10vh, 104px);
}
.banner--inner h1{
  font-size: clamp(1.95rem, 1.2rem + 3.1vw, 3.5rem);
  max-width: 20ch; text-wrap: balance;
}

/* ============================ TREELINE ============================ */
.treeline{ background: var(--paper); color: var(--moss); }
.page{ display: none; }
.page.is-on{ display: block; }

.sec{ padding-block: clamp(52px, 8.5vh, 100px); }
.page .sec:last-of-type{ padding-bottom: clamp(30px, 4.5vh, 56px); }
.sec + .sec{ border-top: 1px solid rgba(44,62,45,.14); }

.sec h2{
  font-family: var(--f-display); font-weight: 400;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 20;
  font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.9rem);
  line-height: 1.15; letter-spacing: -.008em;
  margin: 0 0 .55em; max-width: 18ch; text-wrap: balance;
}
.sec p{ margin: 0 0 1.15em; color: var(--moss-soft); max-width: 60ch; }
.sec p:last-child{ margin-bottom: 0; }
.sec a{ text-decoration-color: rgba(44,62,45,.3); text-underline-offset: 3px; }
.sec a:hover{ text-decoration-color: rgba(44,62,45,.7); }

/* two-column editorial spread */
.cols{
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: start;
}
.cols h2{ margin-bottom: 0; max-width: 20ch; }
/* one drop cap per page — only on the opening spread */
.prose--lead p:first-child::first-letter{
  font-family: var(--f-display); font-weight: 400;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 20;
  float: left; font-size: 3.15em; line-height: .84;
  padding: .06em .1em 0 0; color: var(--moss);
}

/* Moss band — the one saturated surface */
.band{ background: var(--moss); color: var(--paper); position: relative; overflow: hidden; }
.band .rail{ position: relative; z-index: 1; padding-block: clamp(62px, 11vh, 132px); }
.band .watermark{
  position: absolute; right: clamp(20px, 5vw, 86px); top: 50%;
  transform: translateY(-50%);
  height: clamp(160px, 30vh, 300px); width: auto;
  fill: var(--paper); opacity: .055; pointer-events: none;
}
.band blockquote{
  margin: 0;
  font-family: var(--f-display); font-weight: 200;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 24;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.2rem);
  line-height: 1.2; letter-spacing: -.012em;
  max-width: 21ch; text-wrap: balance;
}
.band .src{
  margin: 26px 0 0; font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(251,247,238,.55);
}

/* principles */
.head{
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--stone-ink); margin: 0 0 32px;
}
.set{ display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: 36px 48px; }
.set h3{
  font-family: var(--f-display); font-weight: 500;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 20;
  font-size: 1.2rem; line-height: 1.24; margin: 0 0 7px;
  padding-top: 16px; border-top: 1px solid rgba(44,62,45,.2);
}
.set p{ font-size: .93rem; color: var(--stone-ink); margin: 0; max-width: 31ch; }

/* ---- the letter ---- */
.letter{ max-width: 33em; }
.letter p{
  font-family: var(--f-display); font-weight: 300;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 20;
  font-size: 1.14rem; line-height: 1.74; color: var(--moss-soft);
  margin: 0 0 1.3em; max-width: none;
}
.letter p.turn{ color: var(--moss); }
.letter .seal{
  display: flex; align-items: center; gap: 14px;
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid rgba(44,62,45,.18);
}
.letter .seal .wax{ width: 11px; height: 11px; border-radius: 50%; background: var(--rust); flex: none; }
.letter .seal .who{
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone-ink);
}

/* ---- leadership ---- */
.roster, .details{ max-width: 68em; }
.roster .person, .details .row{
  display: grid;
  grid-template-columns: minmax(0, 15.5em) minmax(0, 1fr);
  gap: 10px clamp(28px, 4vw, 56px);
  padding-block: 28px;
  border-bottom: 1px solid rgba(44,62,45,.16);
}
.roster .person:first-child, .details .row:first-child{ border-top: 1px solid rgba(44,62,45,.16); }
.roster .id, .details .id{ display: flex; flex-direction: column; gap: 7px; }
.roster .who, .details .who{
  font-family: var(--f-display); font-weight: 400;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 20;
  font-size: 1.24rem; line-height: 1.2; color: var(--moss);
}
.roster .role{
  font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  color: var(--stone-ink); line-height: 1.5;
}
.roster .bio, .details .val{ margin: 0; max-width: 60ch; color: var(--moss-soft); font-size: .97rem; }
.details .val a{ text-decoration-color: rgba(44,62,45,.35); text-underline-offset: 3px; }

/* ---- contact ---- */
.contact{ display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 34px 48px; max-width: 54em; }
.contact h3{
  font-family: var(--f-display); font-weight: 500;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 20;
  font-size: 1.15rem; margin: 0 0 .35em;
}
.contact p{ margin: 0; color: var(--stone-ink); max-width: none; }
.contact a{ color: var(--moss-soft); }

.sec .note{ max-width: 44em; }   /* beats the 42ch prose measure above */
.note{
  margin-top: 38px; padding: 15px 19px;
  border: 1px dashed rgba(44,62,45,.3); border-radius: 2px;
  font-size: 12.5px; line-height: 1.6; color: var(--stone-ink); max-width: 46em;
}

/* ============================== FOOT ============================== */
.horizon{ display: block; width: 100%; height: 168px; background: var(--paper); }

.foot{ position: relative; background: var(--granite); overflow: hidden; }
.foot .survey{
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.2) 70%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.2) 70%, transparent 100%);
}
.foot .rail{
  position: relative; z-index: 1;
  padding-block: clamp(56px, 10vh, 100px);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 28px; flex-wrap: wrap;
}
.foot .tag{
  font-family: var(--f-display); font-weight: 300;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 20;
  font-size: clamp(1.2rem, .92rem + .9vw, 1.75rem); line-height: 1.32; margin: 0;
}
.foot .fine{ font-size: 12px; color: rgba(184,173,153,.75); line-height: 1.85; text-align: right; }
.foot .fine a{ text-decoration-color: rgba(184,173,153,.4); text-underline-offset: 3px; }

/* ============================ RESPONSIVE ========================== */
@media (max-width: 860px){
  .cols{ grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .foot .fine{ text-align: left; }
  .horizon{ height: 104px; }
  .band .watermark{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}