/* ============================================================
   gregclement.com — V2 "Build / Grow" repositioning layer.
   Loads AFTER styles-v3.css and only contains deltas for the
   new master-brand platform: the two-worlds positioning, the
   farm as a real place, the build side kept visible on purpose.
   Original index.html is untouched; this file is linked only
   from index-v2.html.
   ============================================================ */

/* ============================================================
   HERO — sticky scroll-reveal over a full-bleed background video.
   .hero is a tall scroll track; .hero__sticky pins natively (CSS sticky)
   while three text beats reveal; the next section then rises up OVER it
   (z-index + negative margin) as the hero gently recedes. No GSAP pin and
   no counter-translate → nothing fights the scroll, so it can't peek.
   ============================================================ */
.hero--cinematic {
  position: relative;
  background: #0a0806;
  padding: 0;            /* override v3 .hero padding so the video is full-bleed
                            under the (transparent) nav — no gap above it */
  overflow: visible;     /* let .hero__sticky stick to the viewport */
}

.hero__sticky {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #0a0806;
}

/* Video layer — full-bleed cover, behind the beats. */
.hero__video {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; background: #0a0806;
}
.hero__video wistia-player {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, 177.7778svh);
  height: max(56.25vw, 100svh);
  pointer-events: none;
}

/* Kill the inherited v3 `.hero::after` LIGHT paper wash — it was painting over
   the dark scrim and washing the hero out. */
.hero--cinematic::after { content: none; display: none; background: none; }

/* Strong, even darken + vignette so the text is always clearly legible. */
.hero__sticky::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,5,3,0.66) 0%, rgba(6,5,3,0.70) 50%, rgba(6,5,3,0.78) 100%),
    radial-gradient(120% 95% at 50% 48%, rgba(6,5,3,0.20) 0%, rgba(6,5,3,0.48) 68%, rgba(6,5,3,0.78) 100%);
}

/* Nav over the dark hero (homepage only). */
.home-v2 .nav:not(.scrolled) .wordmark,
.home-v2 .nav:not(.scrolled) .nav__link { color: var(--paper); }
.home-v2 .nav:not(.scrolled) .nav__link:hover { color: #f0a878; }
.home-v2 .nav:not(.scrolled) .nav__burger span { background: var(--paper); }
/* …but once the menu is open it sits over the light paper overlay, so the
   close (X) must be dark to stay visible. */
.home-v2 .nav:not(.scrolled) .nav__burger.is-open span { background: var(--ink); }

/* ---- Stage + text beats ---- */
.hero__stage { position: relative; z-index: 2; width: 100%; }
.hero__beat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
  padding-inline: var(--edge);
}

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 0.6rem + 5vw, 5.4rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin: 0;
  color: var(--paper);
  text-shadow: 0 2px 34px rgba(0,0,0,0.45);
}
.hero__title em { font-style: italic; color: #f0a878; }
.hero__br-m { display: none; }   /* mobile-only line break (after "can") */

.hero--video .hero__psst {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.35rem, 0.9rem + 1.7vw, 2.45rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin: 0;
  color: rgba(244,236,221,0.95);
  text-shadow: 0 1px 22px rgba(0,0,0,0.45);
}

.hero__book {
  width: clamp(150px, 17vw, 225px);
  height: auto;
  border-radius: 3px;
  box-shadow: 0 32px 72px -26px rgba(0,0,0,0.85);
}
.hero__cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.25rem);
}

/* ---- Inline opt-in form in the hero (dark-hero styling) ---- */
.hero__cta-form {
  width: min(34rem, 100%);
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 2vw, 1.3rem);
}
.hero--cinematic .hero__cta-form .hero__monday { margin: 0; max-width: none; width: 100%; text-align: center; }
.hero__cta-form .optin { width: 100%; }
/* hide labels on the hero — placeholders carry it for a clean look */
.hero--cinematic .field label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero--cinematic .field input {
  background: rgba(244,236,221,0.10);
  border-color: rgba(244,236,221,0.30);
  color: var(--paper);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.hero--cinematic .field input::placeholder { color: rgba(244,236,221,0.55); }
.hero--cinematic .field input:focus {
  background: rgba(244,236,221,0.16);
  border-color: #f0a878;
  box-shadow: 0 0 0 3px rgba(240,168,120,0.20);
}
.hero--cinematic .field input[aria-invalid="true"] { border-color: #f0a878; background: rgba(240,168,120,0.14); }
.hero--cinematic .form-actions { flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 0.9rem; }
.hero--cinematic .form-actions .btn-orange { width: 100%; }
.hero--cinematic .fineprint { color: rgba(244,236,221,0.6); }
.hero--cinematic .form-error { color: #f0a878; text-align: center; }
.hero--cinematic .form-success { color: var(--paper); text-align: center; font-size: 1.3rem; }
.hero--cinematic .form-success strong { color: #f0a878; }
.hero--video .hero__monday {
  margin: 0;
  padding: 0;
  border: none;
  max-width: 32ch;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  color: rgba(244,236,221,0.9);
}

/* Scroll cue — label + bobbing arrow. */
.hero__scrollcue {
  display: none;
  position: absolute; left: 50%; bottom: clamp(1.1rem, 3.2vh, 2.2rem);
  z-index: 3; transform: translateX(-50%);
  flex-direction: column; align-items: center; gap: 0.45rem;
  color: rgba(244,236,221,0.72);
}
.hero__scrollcue-label {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
}
.hero__scrollcue-arrow { display: block; }

/* Headline intro — rises + brightens into place on load as the video starts.
   Uses a clip-reveal + drift (opacity stays 1 so it can NEVER get stuck hidden,
   even if the load animation is frozen/backgrounded). */
@media (min-width: 921px) {
  .hero__beat--head .hero__title {
    animation: heroHeadIntro 1.3s var(--ease) 0.3s backwards;
  }
}
@keyframes heroHeadIntro {
  from { transform: translateY(42px); filter: blur(6px); opacity: 0.55; }
  to   { transform: translateY(0);    filter: blur(0);   opacity: 1; }
}

/* DESKTOP: tall scroll track + sticky stage; beats overlap-centered (JS scrubs). */
@media (min-width: 921px) {
  .hero--cinematic { height: 320vh; }                 /* scroll-track length */
  .hero__sticky { position: sticky; top: 0; min-height: 0; height: 100vh; z-index: 1; }
  .hero__stage { position: absolute; inset: 0; }
  /* Each beat fills the stage and flex-centers its content, so GSAP can move it
     with a plain pixel `y` (no transform-based centering to fight). */
  .hero__beat {
    position: absolute; inset: 0;
    justify-content: center;
    will-change: transform, opacity;
  }
  /* Pre-JS / hidden until revealed. */
  .hero__beat--sub, .hero__beat--cta { opacity: 0; visibility: hidden; }
  .hero__beat--cta { gap: clamp(1.6rem, 3vw, 2.4rem); }
  .hero__scrollcue { display: flex; }
  .hero__scrollcue-arrow { animation: heroCueBob 1.8s var(--ease) infinite; }
  @keyframes heroCueBob {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50%      { transform: translateY(6px); opacity: 1; }
  }

  /* The next section rises UP OVER the hero across the last viewport of the
     track. z-index keeps it above; an opaque bg means it actually covers. */
  .home-v2 #book {
    position: relative;
    z-index: 2;
    margin-top: -100vh;
    background: var(--paper);
  }
}

/* MOBILE: no track — static stacked hero, all beats visible, no overlap. */
@media (max-width: 920px) {
  .hero--cinematic { height: auto; }
  .hero__sticky { min-height: 100svh; display: flex; align-items: center; padding: clamp(7rem, 16vh, 9rem) 0 clamp(3rem, 8vh, 5rem); }
  .hero__stage { display: flex; flex-direction: column; align-items: center; gap: clamp(2rem, 6vh, 3.2rem); }
  .hero__beat { width: 100%; }
  .hero__scrollcue { display: none; }
  .hero__br-m { display: inline; }   /* show the after-"can" break on mobile */
  /* The stacked hero can be taller than the viewport, so cover the FULL sticky
     (not just 100svh) — otherwise the video leaves a black bar at the top. */
  .hero__video wistia-player {
    width: auto; height: auto;
    min-width: 100%; min-height: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* Fallback (JS/GSAP unavailable or reduced motion): show everything stacked. */
.hero--static { height: auto !important; }
.hero--static .hero__sticky { position: static; min-height: 100svh; display: flex; align-items: center; padding: clamp(7rem, 16vh, 9rem) 0 clamp(3rem, 8vh, 5rem); }
.hero--static .hero__stage { position: static; display: flex; flex-direction: column; align-items: center; gap: clamp(2rem, 6vh, 3.2rem); }
.hero--static .hero__beat { position: static; transform: none; opacity: 1; visibility: visible; width: min(64rem, 92vw); }
.hero--static .hero__scrollcue { display: none; }
.hero--static ~ #book { margin-top: 0 !important; }

/* ============================================================
   OPT-IN MODAL — opened by every "Read Part One" trigger except the
   bottom (last-call) form, which stays inline.
   ============================================================ */
body.modal-open { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;                 /* above nav (50/60) and menu (55) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease);
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,8,6,0.64);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.modal__dialog {
  position: relative;
  z-index: 1;
  width: min(34rem, 100%);
  max-height: 90svh;
  overflow-y: auto;
  background: var(--paper);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.65);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.35s var(--ease);
}
.modal[aria-hidden="false"] .modal__dialog { transform: none; }
.modal__close {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink-55);
  border-radius: 50%;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.modal__close:hover { color: var(--ink); background: var(--divider); }
.modal #modal-form .optin__label { margin-top: 0.2rem; }

/* ---- Split modal: book image + copy (left) | form (right) ---- */
.modal__dialog--split {
  width: min(54rem, 100%);
  max-height: 92svh;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
}
.modal__aside {
  background: var(--dark);
  color: var(--paper);
  padding: clamp(1.5rem, 2.8vw, 2.3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
  justify-content: center;
}
.modal__cover {
  width: 210px;
  height: 210px;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  align-self: center;
  box-shadow: 0 20px 44px -18px rgba(0,0,0,0.75);
}
.modal__title {
  font-family: var(--serif);
  font-weight: 460;
  font-size: clamp(1.3rem, 1rem + 0.8vw, 1.7rem);
  line-height: 1.1;
  color: var(--paper);
}
.modal__sub {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--paper-70);
}
.modal__main {
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 640px) {
  .modal__dialog--split {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .modal__aside {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: clamp(1.3rem, 5vw, 1.7rem);
    padding-right: 3rem;          /* clear the close button */
    gap: 1.1rem;
  }
  .modal__cover { width: 92px; height: 92px; flex: 0 0 auto; align-self: flex-start; }
  /* Close sits over the dark aside when stacked — light it up. */
  .modal__dialog--split .modal__close { color: var(--paper-70); }
  .modal__dialog--split .modal__close:hover { color: var(--paper); background: rgba(244,236,221,0.16); }
}

@media (prefers-reduced-motion: reduce) {
  .modal, .modal__dialog { transition: none; }
}

/* Pivot pull-quote ("I build companies and I grow a farm…") — darken the
   photo, weighted to the bottom-left where the quote sits, for legibility. */
.pivot__frame::after {
  background:
    linear-gradient(90deg, rgba(12,9,6,0.86) 0%, rgba(12,9,6,0.48) 42%, rgba(12,9,6,0.14) 72%, rgba(12,9,6,0) 100%),
    linear-gradient(0deg, rgba(12,9,6,0.72) 0%, rgba(12,9,6,0.22) 30%, rgba(12,9,6,0) 56%);
}

/* ============================================================
   THE FARM — the "come to the land" door + the inciting beat.
   Warm, image-forward, short. The real Mapleside photographs do
   the work; no stock farmcore.
   ============================================================ */
.farm { position: relative; z-index: 1; background: var(--paper); padding: clamp(4rem, 8vw, 8rem) 0; }

.farm__lede {
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(1.45rem, 1rem + 1.7vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  max-width: 24ch;
  color: var(--ink);
}
.farm__lede em { font-style: italic; color: var(--orange); }

.farm__intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.farm__intro p {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem);
  font-weight: 340;
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 50ch;
}

/* Full-bleed-ish aerial of the 145 acres. */
.farm__aerial {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  margin: clamp(2rem, 4.5vw, 3.5rem) 0;
}

/* Three real photographs, hairline-ruled like the rest of the grid. */
.farm__trio.ruled { grid-template-columns: repeat(3, 1fr); }
/* Clip the frame so the hover effect can never spill over neighbouring cards. */
.farm__shot { display: block; overflow: hidden; }
.farm__shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  filter: saturate(0.94) brightness(0.96);
  transition: filter 0.5s var(--ease), transform 0.7s var(--ease);
}
/* Contained zoom + the photo "comes alive" — no overlap. */
.farm__shot:hover img { filter: saturate(1.06) brightness(1.04); transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .farm__shot img, .farm__shot:hover img { transform: none; }
}
.farm__cap {
  display: block;
  padding: 0.85rem clamp(0.9rem, 1.4vw, 1.3rem) 1.1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink-55);
}

.farm__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: var(--line);
}
.farm__foot-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem);
  line-height: 1.3;
  color: var(--ink-70);
  flex: 1 1 24ch;
  min-width: 18ch;
}
.farm__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.farm__soon {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding: 0.4rem 0.2rem;
}

/* Ghost button — outlined sibling to .btn-orange (matched height). */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
  padding: calc(0.95em - 1px) calc(1.6em - 1px);
  border: 1px solid var(--ink-40); border-radius: var(--radius); line-height: 1;
  transition: transform 160ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }
}
.btn-ghost:active { transform: scale(0.97); transition-duration: 110ms; }
.btn-ghost .arw { transition: transform 0.3s var(--ease); }
.btn-ghost:hover .arw { transform: translate(3px, -3px); }

/* ---- Build section: reframed as "the build side, kept visible" ---- */
.build__title .nowrap { white-space: nowrap; }

/* Homepage About → link to the full story page. */
.about__more { margin-top: clamp(1.4rem, 3vw, 2rem); }

/* ============================================================
   /about — the full story page (long-form, on the subpage/essay base).
   ============================================================ */
.story__lead { margin: clamp(1.6rem, 3.5vw, 2.8rem) 0 clamp(1.5rem, 4vw, 3rem); }
.story__lead img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.story__lead figcaption {
  margin-top: 0.75rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-55);
}
/* Two images side by side (e.g. the Apple Bill pair). */
.essay__fig--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.6rem, 1.6vw, 1.1rem);
}
.essay__fig--pair img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
@media (max-width: 600px) {
  .essay__fig--pair { grid-template-columns: 1fr; }
  .essay__fig--pair img { aspect-ratio: 4 / 3; }
}
.story .story__h {
  font-family: var(--serif);
  font-weight: 460;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 1rem;
}
.story__cta {
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  padding-top: clamp(1.8rem, 3.5vw, 2.4rem);
  border-top: var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.story__cta-note {
  flex: 1 1 24ch;
  min-width: 18ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink-70);
}

@media (max-width: 720px) {
  .farm__intro { grid-template-columns: 1fr; gap: 1.4rem; }
  .farm__trio.ruled { grid-template-columns: 1fr; }
  .farm__shot img { aspect-ratio: 16 / 10; }
  .hero__title { max-width: none; }
}