/* NASD Market Makers — one day across the Mojave */

@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../assets/fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --night: #0C1118;
  --predawn: #18222E;
  --fog: #E8ECEF;
  --rock: #C8643F;
  --rock-deep: #A44D2E;
  --sage: #8FA89B;
  --ink: #0C1118;
  --fog-dim: #B9C2CA;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Grotesk", ui-monospace, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --pad: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(5rem, 12vw, 10rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--night);
  color: var(--fog);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }

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

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--fog); color: var(--ink); padding: .6rem 1rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rock-deep);
  margin-bottom: 1.5rem;
}
.eyebrow--ink { color: var(--ink); }
.eyebrow--sage { color: var(--sage); }

.h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 1.4rem + 4vw, 5rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.lead {
  margin-top: 1.5rem;
  font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem);
  line-height: 1.55;
  max-width: 34em;
  font-weight: 500;
}

.rule { border: 0; height: 1px; background: var(--rock); margin: 2.5rem 0; width: 100%; }
.rule--ink { background: var(--ink); opacity: .55; }

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--body); font-weight: 700; font-size: 1rem;
  text-decoration: none;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn--light { background: var(--fog); color: var(--ink); }
.btn--dark { background: var(--night); color: var(--fog); }

.textlink {
  display: inline-flex; gap: .5em; margin-top: 1.5rem;
  font-weight: 700; text-decoration: none;
  color: var(--rock-deep);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: .2rem;
  transition: background-size 240ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn--light:hover { background: #fff; }
  .btn--dark:hover { background: var(--predawn); }
  .textlink:hover { background-size: 40% 1px; }
}

/* ---------- header ---------- */
.site-head {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem var(--pad);
  font-family: var(--mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
}
.site-head__place { color: var(--sage); }
.site-head__nav { display: flex; gap: clamp(1rem, 3vw, 2.5rem); }
.site-head__nav a { text-decoration: none; color: var(--fog); opacity: .85; transition: opacity 200ms ease; }
@media (hover: hover) and (pointer: fine) { .site-head__nav a:hover { opacity: 1; } }
@media (max-width: 560px) { .site-head__nav a:not(:last-child) { display: none; } }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-start;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 50%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,17,24,.55) 0%, rgba(12,17,24,0) 38%),
    linear-gradient(0deg, rgba(12,17,24,.92) 0%, rgba(12,17,24,.6) 22%, rgba(12,17,24,0) 46%);
}
/* name up in the deep sky, the action down on the dark ground; the bush stands free between */
.hero__inner {
  width: 100%;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
  padding: clamp(6rem, 13vh, 8.5rem) var(--pad) clamp(2.5rem, 7vh, 4.5rem);
}
.hero__foot { max-width: 34rem; }
.wordmark {
  font-family: var(--display);
  line-height: .86;
  letter-spacing: -.04em;
  color: var(--fog);
}
.wordmark span { display: block; }
.wordmark__heavy { font-weight: 800; font-size: clamp(5rem, 2rem + 15vw, 15rem); }
.wordmark__light { font-weight: 400; font-size: clamp(2.2rem, 1rem + 5.4vw, 5.6rem); letter-spacing: -.03em; margin-top: .25em; }
@media (min-width: 1024px) {
  /* one baseline: heavy NASD, light Market Makers beside it, both in the deep sky */
  .wordmark { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .32em; }
  .wordmark__heavy { font-size: clamp(5rem, 14vw, 15rem); }
  .wordmark__light { font-size: clamp(2.2rem, 4.6vw, 4.8rem); margin-top: 0; }
}
.hero__line {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
  font-weight: 500;
  color: var(--fog);
  max-width: 24em;
}
.hero__cta { margin-top: 1.5rem; }
.hero__cue {
  position: absolute; right: var(--pad); bottom: 2rem;
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage);
}
.hero__cue i { display: block; width: 3.5rem; height: 1px; background: var(--rock); transform-origin: left; animation: cue 2.4s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); opacity: 0; } }
@media (max-width: 699px) { .hero__cue { display: none; } }

/* ---------- the spread (signature) ---------- */
.spread {
  position: relative;
  background: var(--night);
  overflow: hidden;
  --open: 22vw;       /* half width of the window */
  --gap: 1.5vw;
  --p: .45;           /* static midpoint: how far the spread has closed */
}
.spread__stage { position: relative; height: 100vh; height: 100svh; min-height: 34rem; }
.spread__window {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--open) * 2); height: 72%;
  translate: -50% -50%;
  overflow: hidden;
  clip-path: inset(0% 27% 0% 27%);
}
.spread__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
  transform: scale(1.14);
}
.spread__hair {
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: 72%;
  translate: -50% -50%;
  background: var(--rock);
  opacity: 0;
  z-index: 1;
}
.spread__word {
  position: absolute; top: 50%;
  translate: 0 -50%;
  display: flex; flex-direction: column;
  z-index: 2;
}
.spread__word--left { right: 50%; align-items: flex-end; transform: translateX(calc(-1 * (var(--gap) + var(--open) * (1 - var(--p))))); }
.spread__word--right { left: 50%; align-items: flex-start; transform: translateX(calc(var(--gap) + var(--open) * (1 - var(--p)))); }
.spread__big {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 8vw; line-height: .9; letter-spacing: -.04em;
  color: var(--fog);
}
.spread__label {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: .8rem;
}
.spread__word--left .spread__label { color: var(--sage); }
.spread__word--right .spread__label { color: var(--rock); }
.spread__line {
  position: absolute; left: 50%; bottom: 5%;
  translate: -50% 0;
  width: min(36rem, 88vw);
  text-align: center;
  font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); font-weight: 500;
  color: var(--fog);
  z-index: 3;
}

@media (max-width: 799px) {
  .spread { --open: 17svh; --gap: 1rem; }
  .spread__window {
    width: 88vw; height: calc(var(--open) * 2);
    clip-path: inset(27% 0% 27% 0%);
  }
  .spread__hair { width: 88vw; height: 2px; }
  .spread__word { top: 50%; left: 50%; right: auto; align-items: center; }
  .spread__word--left { translate: -50% -100%; transform: translateY(calc(-1 * (var(--gap) + var(--open) * (1 - var(--p))))); flex-direction: column; }
  .spread__word--right { translate: -50% 0; transform: translateY(calc(var(--gap) + var(--open) * (1 - var(--p))));  flex-direction: column-reverse; }
  .spread__word--right .spread__label { margin: .8rem 0 0; }
  .spread__big { font-size: 17vw; }
  .spread__line { bottom: 4%; }
}

/* ---------- two sides ---------- */
.sides { background: var(--fog); color: var(--ink); padding: var(--section) var(--pad); }
.sides__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 5rem);
  max-width: 82rem; margin: 0 auto;
}
.sides__strata img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sides__strata figcaption,
.program__b figcaption {
  margin-top: .9rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .06em;
  color: #3A4652;
}
.sides .lead { color: #26313C; }
.cards { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.card {
  padding: 1.75rem 1.5rem 2rem;
  border-top: 2px solid var(--ink);
  transition: transform 200ms var(--ease-out);
}
.card[data-tone="creosote"] { background: var(--sage); color: var(--ink); }
.card[data-tone="redrock"] { background: var(--rock); color: var(--ink); }
.card[data-tone="predawn"] { background: var(--predawn); color: var(--fog); border-top-color: var(--rock); }
.card__tag { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 2.5rem; }
.card__tag span { letter-spacing: 0; font-size: 1rem; line-height: 1; }
/* the spread card carries the hairline: two sides, one thin line between them */
.card__gap { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }
.card__gap i { flex: 1; height: 1px; background: var(--fog-dim); opacity: .5; }
.card__gap b { width: 2px; height: 1.4rem; background: var(--rock); }
.card__title { font-family: var(--display); font-weight: 800; font-size: 1.55rem; letter-spacing: -.02em; line-height: 1.05; margin-bottom: .75rem; }
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-3px); } }

@media (min-width: 960px) {
  .sides__grid { grid-template-columns: 5fr 7fr; align-items: start; }
  .sides__strata { position: sticky; top: 6rem; }
  .sides__strata img { aspect-ratio: 3 / 4; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .card { min-height: 17rem; display: flex; flex-direction: column; }
  .card__tag { margin-bottom: auto; padding-bottom: 2.5rem; }
}

/* ---------- program ---------- */
.program { background: var(--rock); color: var(--ink); padding: var(--section) var(--pad); }
.program__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); max-width: 82rem; margin: 0 auto; }
.program .h2 { font-size: clamp(2.3rem, 1.4rem + 3vw, 4.4rem); }
.program .lead { font-weight: 500; }
.program__note { font-size: 1rem; max-width: 30em; }
.program__a img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.program__b img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.program__b figcaption { color: var(--ink); }

@media (min-width: 960px) {
  .program__grid {
    grid-template-columns: 6fr 1fr 4fr 3fr;
    grid-template-rows: auto auto;
    align-items: start;
  }
  .program__text { grid-column: 1 / 2; grid-row: 1 / 3; padding-top: 2rem; position: sticky; top: 6rem; }
  .program__a { grid-column: 3 / 5; grid-row: 1; }
  .program__b { grid-column: 2 / 4; grid-row: 2; margin-top: -8rem; position: relative; z-index: 1; box-shadow: 0 30px 60px -30px rgba(12,17,24,.55); }
}

/* ---------- weather ---------- */
.weather {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh;
  display: flex; align-items: flex-start;
  background: var(--night);
}
.weather__media { position: absolute; inset: -10% 0; z-index: -2; }
.weather__img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; }
.weather__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,17,24,.78) 0%, rgba(12,17,24,.35) 45%, rgba(12,17,24,0) 70%);
}
.weather__inner { padding: var(--section) var(--pad); max-width: 46rem; }
.weather__title { color: var(--fog); }
.weather .lead { color: var(--fog); }

/* ---------- place ---------- */
.place { background: var(--fog); color: var(--ink); padding-top: var(--section); }
.place__head {
  display: grid; gap: 1rem;
  padding: 0 var(--pad) clamp(3rem, 6vw, 5rem);
  max-width: 82rem; margin: 0 auto;
}
.place__title { font-size: clamp(2.8rem, 1.2rem + 7vw, 8rem); }
.place .lead { margin-top: 0; }
/* contact set like a label: mono key over a plain value, hairlines between */
.contact { margin: 2rem 0 0; display: grid; border-top: 1px solid rgba(12,17,24,.25); }
.contact div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid rgba(12,17,24,.25); }
.contact dt { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #3A4652; }
.contact dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; text-wrap: balance; }
/* underlined at rest so the links never lean on colour alone; padded to a thumb-sized target without moving the rows */
.contact a {
  display: inline-block; padding: .55rem 0; margin: -.55rem 0;
  color: var(--rock-deep); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
}
@media (hover: hover) and (pointer: fine) { .contact a:hover { text-decoration-thickness: 2px; } }
.place__pano { overflow: hidden; }
/* anchored high so the whole sun, the far range and the cracks all stay in the crop */
.place__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 0%; transform: scale(1.08); }

@media (min-width: 960px) {
  .place__head { grid-template-columns: 1fr auto; align-items: end; column-gap: 4rem; }
  .place__head .eyebrow { grid-column: 1 / -1; margin-bottom: .5rem; }
  .place__side { padding-bottom: .8rem; max-width: 22rem; }
  .place__img { aspect-ratio: 21 / 9; }
}

/* ---------- cta ---------- */
.cta { background: var(--rock); color: var(--ink); padding: clamp(4rem, 9vw, 7rem) var(--pad); border-top: 1px solid var(--night); }
.cta__inner {
  max-width: 82rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem;
}
.cta__title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.2rem, 1.2rem + 4.4vw, 5.2rem);
  line-height: .98; letter-spacing: -.035em;
  max-width: 13em;
}
.cta__hair { display: none; }
@media (min-width: 960px) {
  /* the spread once more: a line between the words and the way there */
  .cta__inner { flex-wrap: nowrap; align-items: center; gap: clamp(2rem, 4vw, 4rem); }
  .cta__title { max-width: 9.5em; flex: 0 1 auto; font-size: clamp(2.6rem, 1rem + 3.6vw, 4.8rem); }
  .cta__hair { display: block; flex: 1 1 4rem; height: 1px; background: var(--ink); opacity: .6; transform-origin: left; }
  .cta .btn { flex: none; }
}

/* ---------- footer ---------- */
.foot { background: var(--night); color: var(--fog-dim); padding: 3.5rem var(--pad) 3rem; }
.foot__inner {
  max-width: 82rem; margin: 0 auto;
  display: grid; gap: .75rem;
  border-top: 1px solid var(--rock); padding-top: 2rem;
}
.foot__name { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--fog); letter-spacing: -.02em; }
.foot__name span { font-weight: 400; color: var(--fog-dim); }
.foot__contact { font-weight: 500; color: var(--fog); }
.foot__contact a { display: inline-block; padding: .55rem 0; margin: -.55rem 0; color: var(--fog); text-decoration: none; }
.foot__contact span { color: var(--fog-dim); }
@media (hover: hover) and (pointer: fine) { .foot__contact a:hover { text-decoration: underline; text-underline-offset: .2em; } }
.foot__small { font-size: .9rem; }
.foot__top { justify-self: start; margin-top: 1rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--sage); }

/* ---------- reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .hero__cue i { transform: scaleX(1); }
}