/* ==========================================================================
   Nathaniel Stockwell
   Home
   styles/home.css

   Page-specific styles only. Tokens and primitives come from shared/site.css;
   header and footer come from shared/chrome.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--c-ink-900);
  color: var(--c-bone);
}

.hero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

/* Tall, narrow screens crop hard: pull the frame down so the ridgeline and
   the warm band stay visible instead of showing an empty sky. */
@media (max-width: 48rem) {
  .hero__art { object-position: 50% 76%; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__art {
    animation: heroDrift 42s var(--ease) infinite alternate;
    transform-origin: 55% 70%;
  }
}

@keyframes heroDrift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11); }
}

/* Two scrims: one anchors the type at the bottom, one protects the header. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(7, 11, 17, 0.9) 0%, rgba(7, 11, 17, 0.55) 26%, rgba(7, 11, 17, 0) 62%),
    linear-gradient(to right, rgba(7, 11, 17, 0.55) 0%, rgba(7, 11, 17, 0) 55%);
  pointer-events: none;
}

.hero__inner {
  align-self: end;
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
  z-index: 2;
}

.hero .eyebrow {
  color: rgba(246, 242, 233, 0.7);
  margin-bottom: var(--sp-5);
}

.hero h1 {
  max-width: 15ch;
  font-size: var(--step-5);
  font-weight: 600;
  color: var(--c-bone);
  text-shadow: 0 2px 40px rgba(7, 11, 17, 0.4);
}

.hero__lede {
  margin-top: var(--sp-5);
  max-width: 48ch;
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgba(246, 242, 233, 0.78);
}

.hero__actions {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.hero .btn--ghost {
  --btn-fg: var(--c-bone);
  border-color: rgba(246, 242, 233, 0.4);
}

.hero .btn--ghost:hover {
  border-color: var(--c-bone);
  background: rgba(246, 242, 233, 0.08);
  color: var(--c-bone);
}

.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(5.5rem, 11vw, 8rem);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(246, 242, 233, 0.45);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.scroll-cue:hover { color: var(--c-bone); }

.scroll-cue span {
  width: 1px;
  height: 2.75rem;
  background: linear-gradient(to bottom, rgba(246, 242, 233, 0.55), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue span {
    animation: cueDrop 2.6s var(--ease) infinite;
    transform-origin: top;
  }
}

@keyframes cueDrop {
  0%, 100% { transform: scaleY(0.45); opacity: 0.5; }
  50%      { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 40rem) {
  .scroll-cue { display: none; }
  /* Phone hero: hold the headline large, but stop the supporting copy and the
     buttons from crowding it off the first screen. */
  .hero h1 { max-width: 12ch; }
  .hero__lede { font-size: var(--step-0); max-width: 40ch; }
  .hero__actions { gap: var(--sp-3); }
  .hero .btn { padding: 0.8rem 1.25rem; }
}

/* --------------------------------------------------------------------------
   STANCE, the statement band
   -------------------------------------------------------------------------- */

.stance__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.stance__statement {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--text);
  max-width: 26ch;
  text-wrap: balance;
}

.stance__body {
  display: grid;
  gap: var(--sp-4);
  max-width: 54ch;
  color: var(--text-muted);
}

.pillars {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.pillar {
  padding: var(--sp-4) clamp(1rem, 2.5vw, 2rem) var(--sp-3) 0;
  border-right: 1px solid var(--line);
}

.pillar:last-child { border-right: 0; }

.pillar__idx {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  color: var(--accent-text);
}

.pillar h3 {
  margin-top: var(--sp-3);
  font-size: var(--step-2);
  font-weight: 600;
}

.pillar p {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 32ch;
}

@media (max-width: 52rem) {
  .stance__grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .pillar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
  }
  .pillar:last-child { border-bottom: 0; }
  .pillar p { max-width: none; }
}

/* --------------------------------------------------------------------------
   DESTINATIONS
   A ruled index, not a card grid.

   Cards were the wrong answer here: three rounded rectangles with cropped
   photographs and a shadow on hover is the look of every template, and it
   shares nothing with the header or the footer. The chrome is hairlines, mono
   labels and one accent bar, so this is too. Each row is a rule, a number, a
   name and a sliver of the same ridgeline artwork the footer ends on.
   -------------------------------------------------------------------------- */

.dests {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

/* The section head already ends on a rule. Two in a row reads as a mistake. */
.section-head + .dests { border-top: 0; }

.dests > li { border-bottom: 1px solid var(--line); }

.dest {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 10rem auto;
  grid-template-areas: "idx name art go" "idx note art go";
  align-items: baseline;
  gap: 0.3rem var(--sp-5);
  padding: var(--sp-4) 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--dur) var(--ease-out-soft);
}

.dest:hover { padding-left: var(--sp-4); }

.dest__idx {
  grid-area: idx;
  align-self: start;
  padding-top: 0.35em;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.dest__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  transition: color var(--dur-fast) var(--ease);
}

.dest:hover .dest__name { color: var(--accent-text); }

.dest__note {
  grid-area: note;
  max-width: 54ch;
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--text-muted);
}

/* A letterboxed sliver of the section's own artwork. Enough to carry the
   outdoor motif into the list without turning the row into a card. */
.dest__art {
  grid-area: art;
  align-self: center;
  width: 100%;
  height: 2.6rem;
  object-fit: cover;
  object-position: 50% 62%;
  filter: saturate(0.75);
  opacity: 0.85;
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.dest:hover .dest__art { opacity: 1; filter: saturate(1); }

.dest__go {
  grid-area: go;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
}

.dest__go .arrow { transition: transform var(--dur) var(--ease-out-soft); }
.dest:hover .dest__go .arrow { transform: translateX(5px); }

@media (max-width: 60rem) {
  .dest {
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    grid-template-areas: "idx name go" "idx note go";
  }
  .dest__art { display: none; }
}

@media (max-width: 40rem) {
  .dest {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "idx go" "name name" "note note";
    gap: 0.45rem var(--sp-4);
  }
  .dest__idx { padding-top: 0; }
  .dest__go { align-self: start; }
  .dest:hover { padding-left: var(--sp-2); }
}

/* --------------------------------------------------------------------------
   CLOSING
   -------------------------------------------------------------------------- */

.closing {
  position: relative;
  isolation: isolate;
  background: var(--c-ink-900);
  color: var(--c-bone);
  overflow: hidden;
  /* Tighter than a standard band: this one runs straight into the footer, and
     two full-height dark blocks read as dead space. Kept flat ink on purpose, the page has exactly one horizon and it belongs to the footer, so the two
     dark surfaces meet with no seam between them. */
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.closing__inner {
  display: grid;
  gap: var(--sp-6);
  max-width: 42rem;
}

.closing h2 {
  font-size: var(--step-4);
  color: var(--c-bone);
}

.closing p {
  color: rgba(246, 242, 233, 0.74);
  max-width: 46ch;
}

.closing .btn--ghost {
  --btn-fg: var(--c-bone);
  border-color: rgba(246, 242, 233, 0.4);
}

.closing .btn--ghost:hover {
  border-color: var(--c-bone);
  background: rgba(246, 242, 233, 0.08);
  color: var(--c-bone);
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}