/* ═══════════════════════════════════════════════════════════════════════
   High Pines — case study page
   ───────────────────────────────────────────────────────────────────────
   The exports are 1920px wide on the brand cream (#FFFAD6), so they run
   full-bleed edge to edge and meet the page background seamlessly. Every
   section heading and every piece of body copy on this page is real HTML
   text — nothing typographic is left baked into a PNG.

   Palette (read off the supplied UI-kit slide):
     #0D210D  #646F55  #9EA385  #C44317  #E65929  #EB7C57
     #F0A084  #F3B19B  #F5BA91  #FDEAC5  #FFFAD6

   Nav, footer and .page-nav / .page-nav-btn come from shared.css.
   Everything here is scoped to .high-pines-page.
   ═══════════════════════════════════════════════════════════════════════ */

body.high-pines-page {
  --hp-cream:  #fffad6;
  --hp-ink:    #0d210d;   /* darkest green — headings */
  --hp-moss:   #646f55;   /* muted green — labels, 5.0:1 on cream */
  --hp-orange: #c44317;   /* accent + rules, 4.8:1 on cream */

  /* one value aligns every text block on the page, as in the-society.html */
  --h-margin: max(1.5rem, 7vw);

  background: var(--hp-cream);
}

body.high-pines-page .nav { background: #fffad6b3; }

/* ── FULL-BLEED CANVAS ─────────────────────────────────────────────────
   No max-width and no side padding, so the slides span the whole viewport.
   width:100% (not 100vw) — 100vw includes the scrollbar gutter and would
   push a horizontal scrollbar onto the page. */
body.high-pines-page .hp-case {
  display: block;
  width: 100%;
  /* clears the fixed nav; the band is cream on cream so it reads as
     breathing room above the header artwork, not as a gap */
  padding-top: 4rem;
}

body.high-pines-page .hp-section { display: block; width: 100%; }

body.high-pines-page .hp-slide,
body.high-pines-page .hp-trim img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── HIDING TITLES BAKED INTO THE ARTWORK ──────────────────────────────
   Masked with CSS rather than by cropping the source PNGs. The offset is a
   percentage, which resolves against the CONTAINER WIDTH, so the crop stays
   proportional to the image at every viewport width.

   --final : high_pines_1.png is 1920x2160 with the words "Final design"
             occupying rows 134-184 and the browser mock-up starting at row
             247. Hiding the top 200px => 200/1920 = 10.4167%. Leaves 47px
             (2.45%) of the artwork's own cream above the mock-up.
   --wires : high_pines_wireframes.png is 1920x1554 with no baked text at
             all; its content simply starts at row 279. Trimming 148px
             (7.7%) leaves 131px (6.8%) so the wireframes sit the same
             distance below their HTML heading as every other section. */
body.high-pines-page .hp-trim { display: block; overflow: hidden; }
body.high-pines-page .hp-trim--final img { margin-top: -10.4167%; }
body.high-pines-page .hp-trim--wires img { margin-top: -7.7%; }

/* ═══ HERO ═════════════════════════════════════════════════════════════
   The header export fades to empty cream across its left half. The title
   block is overlaid into that gap on one grid cell, capped at 43vw so it
   can never reach the photograph (which only starts to appear at ~49vw). */
body.high-pines-page .hp-hero { display: grid; }

body.high-pines-page .hp-hero-img {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  display: block;
  /* never let grid stretch distort it if the overlaid text is the taller item */
  align-self: start;
  /* the export carries a 1px pale-orange sliver at x=0 (rows 522-582), a
     stray edge fragment from Figma. Clipped away rather than retouching the
     PNG; the exposed strip is the page's own cream, so it is invisible. */
  clip-path: inset(0 0 0 0.3%);
}

body.high-pines-page .hp-hero-text {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: start;
  /* margin, not padding: box-sizing is border-box site-wide, so padding here
     would eat the column instead of offsetting it. Left edge 7vw + 38vw of
     text puts the right edge at 45vw, clear of the photograph. */
  margin-left: var(--h-margin);
  width: min(38%, 34rem);
}

body.high-pines-page .project-logo-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.35rem;
}
body.high-pines-page .hp-logo { width: auto; height: clamp(2.75rem, 4vw, 4rem); }

body.high-pines-page .project-title {
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--hp-ink);
}

body.high-pines-page .project-label {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-moss);
}

body.high-pines-page .project-tags {
  display: flex;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--hp-orange);
  margin: 0.9rem 0 1.1rem;
}
body.high-pines-page .project-tags span + span::before {
  content: '|';
  margin: 0 0.6rem;
  opacity: 0.55;
}

body.high-pines-page .project-desc {
  font-size: 1rem;
  line-height: 1.8;
  max-width: 34rem;
}
body.high-pines-page .project-desc strong {
  font-weight: 700;
  color: var(--hp-ink);
}

/* ═══ TEXT BLOCKS ══════════════════════════════════════════════════════ */
body.high-pines-page .hp-text {
  padding-top: 5.5rem;
  padding-right: var(--h-margin);
  padding-bottom: 0;
  padding-left: var(--h-margin);
}

/* Every export carries a different amount of its own cream above its first
   mark. These modifiers top each one up to the same 6.8%-of-page-width gap
   between the HTML heading and the artwork, and because they are percentages
   they stay in step with the artwork as the page is resized.
     overview  1.30% built in + 5.50%
     wireframes 6.83% built in (after the trim above) + 0
     branding   6.56% built in + 0.25%
     final      2.45% built in (after the trim above) + 4.35%          */
body.high-pines-page .hp-text--overview { padding-bottom: 5.5%; }
body.high-pines-page .hp-text--wires    { padding-bottom: 0; }
body.high-pines-page .hp-text--brand    { padding-bottom: 0.25%; }
body.high-pines-page .hp-text--final    { padding-bottom: 4.35%; }

body.high-pines-page .section-heading {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--hp-ink);
}

body.high-pines-page .hp-copy {
  font-size: 1rem;
  line-height: 1.8;
  max-width: 46rem;
  margin-top: 1.1rem;
}

/* ── PROBLEM / SOLUTION — built as HTML, no image ─────────────────────── */
body.high-pines-page .hp-ps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  padding: 6rem var(--h-margin) 1rem;
}

body.high-pines-page .hp-ps-col { border-top: 2px solid var(--hp-orange); padding-top: 1.4rem; }

body.high-pines-page .hp-ps-title {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 700;
  color: var(--hp-orange);
  letter-spacing: 0.04em;
  margin-bottom: 0.9rem;
}

body.high-pines-page .hp-ps .hp-copy { margin-top: 0; }

/* ── PROTOTYPE BUTTONS ────────────────────────────────────────────────── */
body.high-pines-page .hp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  padding: 5rem var(--h-margin) 0;
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════ */

@media (max-width: 800px) {
  body.high-pines-page .hp-ps { grid-template-columns: minmax(0, 1fr); }
}

/* Below 700px the cream gap in the header artwork is too narrow to hold a
   readable measure, so the hero stops overlaying: artwork first, then the
   title block beneath it at the page's normal gutters. 700px is also where
   shared.css tightens the nav, so the whole page changes gear at once. */
@media (max-width: 700px) {
  body.high-pines-page .hp-hero { display: flex; flex-direction: column; }

  /* Once the text moves out from under it, the artwork's empty left half is
     just a dead cream band with the photograph squashed against the right
     edge. Crop to the photographic side instead: object-position sits at the
     right so the cabin and lake fill the frame, and the portrait ratio keeps
     the hero from eating the whole screen. clip-path is dropped here because
     the left sliver it hid is now cropped away anyway. */
  body.high-pines-page .hp-hero-img {
    order: -1;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 88% center;
    clip-path: none;
  }
  body.high-pines-page .hp-hero-text {
    width: 100%;
    margin-left: 0;
    padding: 2.75rem var(--h-margin) 0;
  }
  body.high-pines-page .project-desc { max-width: 46rem; }

  body.high-pines-page .hp-case { padding-top: 3.25rem; }
  /* only the top gap needs winding in; the bottom gaps are percentages and
     have already scaled themselves down with the artwork */
  body.high-pines-page .hp-text { padding-top: 4rem; }
  body.high-pines-page .hp-ps { padding: 4.5rem var(--h-margin) 0.5rem; }
  body.high-pines-page .hp-actions { padding-top: 3.5rem; }
  body.high-pines-page .hp-actions .page-nav-btn {
    width: 100%;
    max-width: 22rem;
    text-align: center;
  }
}