/* ═══════════════════════════════════════════════════════════════════════
   Home — landing page hero
   ───────────────────────────────────────────────────────────────────────
   Home and about have no project of their own to draw a bespoke palette
   from, so both borrow the SITE's own identity instead: the black
   new_logo_candidate.svg mark, the neutral nav/footer, #231f20 ink. A single
   rust/terracotta accent is shared between this file and about-theme.css —
   it echoes the orange/rust family that already recurs across the case
   studies (High Pines #C44317, Restaurant redesign #BB3204, Raduzhniy
   #AA5A34) without copying any one of them, so home + about read as one
   voice while every project keeps its own bespoke palette.

   Scoped to body.home-page. The PROJECTS GRID below the hero is untouched:
   its rules are relocated verbatim from the old inline <style> block
   (same selectors, same values) so moving them off index.html changes
   nothing about how the grid looks or behaves.
   ═══════════════════════════════════════════════════════════════════════ */

body.home-page {
  --home-cream:  rgb(247, 241, 233);
  --home-ink:    #231f20;
  --home-accent: #a04521; /* 5.6:1 on --home-cream, 6.2:1 on white */
  --h-margin: max(1.5rem, 7vw); /* mobile projects-grid gutter, matches the case-study pages' own convention */

  font-family: 'Exo', sans-serif;
  /* whole page beige, not white — the hero's own cream (below) used to be
     the only coloured patch, with plain white showing everywhere else
     (projects grid, footer). Per feedback, the entire page is now this
     same cream, so there's no white anywhere. */
  background: var(--home-cream);
  color: var(--home-ink);
}

body.home-page .nav { background: #f7f2eab3; }

/* ═══ HERO ══════════════════════════════════════════════════════════════
   Full-width color block (not the plain white page bg) so the hero reads
   as a considered scene rather than empty page with text dropped on it.
   Kept near-fullscreen on purpose — a confident, singular first read —
   but now filled with a color shape, the site's own mark and a portrait
   instead of a sliver of pale illustration. */
body.home-page .hero {
  position: relative;
  overflow: hidden;
  background: var(--home-cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 6vw, 6rem);
  min-height: 100vh;
  padding: clamp(6rem, 11vw, 9rem) clamp(1.75rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
}

body.home-page .hero-text {
  position: relative;
  z-index: 2;
  max-width: 34rem;
}

body.home-page .hero-text h1 { color: var(--home-ink); }

/* handwriting accent, reserved for personal-voice words only (her first
   name here; "approach" on about-theme.css) */
body.home-page .hero-script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: var(--home-accent);
  font-size: 1.25em;
  line-height: 1;
}

body.home-page .hero-role { font-weight: 700; }

body.home-page .hero-loc { font-weight: 300; }
body.home-page .hero-loc i {
  color: var(--home-accent);
  font-size: 0.65em;
  margin-right: 0.6rem;
  vertical-align: 0.15em;
}

body.home-page .hero-cta {
  display: inline-block;
  margin-top: 2.75rem;
  transition: transform 0.25s ease;
}
body.home-page .hero-cta:hover { transform: translateY(-2px) rotate(-1deg); }

/* ── visual column: plain axis-aligned portrait with a circular cutout at
   the bottom-left corner holding the mark, like a seal. Replaces the
   earlier blob + floating-dots + signed-corner-mark treatment per
   feedback: no lines, no rotation, no ornamental dots. Own idea, from a
   reference photo prepared by the site's owner (a plain portrait with a
   white circle cut into one corner, holding a mark) — the circle is
   simply a solid disc coloured to match this page's own flat background,
   so it reads as a literal cutout rather than a sticker on top. */
body.home-page .hero-visual {
  position: relative;
  flex-shrink: 0;
  width: clamp(16rem, 30vw, 25rem);
  aspect-ratio: 4 / 5;
  z-index: 1;
}

body.home-page .hero-portrait {
  /* fills the wrapper exactly, so the wrapper's own corner IS the photo's
     corner — needed below so the cutout can be positioned with plain
     percentages instead of chasing an inset offset. */
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.1rem;
}

body.home-page .hero-cutout {
  position: absolute;
  z-index: 2;
  left: -8%;
  bottom: -8%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--home-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.home-page .hero-mark {
  display: block;
  width: 54%;
  height: auto;
}

@media (max-width: 900px) {
  body.home-page .hero {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-height: auto;
    padding: clamp(7rem, 22vw, 9rem) 1.5rem 3.5rem;
  }
  body.home-page .hero-text { max-width: 30rem; }
  body.home-page .hero-visual { width: min(75vw, 20rem); }
}

/* ═══ PROJECTS ═════════════════════════════════════════════════════════
   Unchanged. Relocated verbatim from index.html's old inline <style>
   block — same selectors, same declarations, same values. Not restyled;
   out of scope for this pass. */
.projects-section { padding-bottom: 4rem; display: flex; flex-direction: column; gap: clamp(0.75rem, 3vw, 3rem); }

.projects-heading {
  text-align: center;
  /* Was a fixed 3rem with no mobile scaling at all — at phone widths it
     rendered noticeably oversized relative to everything else on the page.
     Floor matches the shared section-heading scale's own minimum
     (clamp(1.9rem,3vw,2.5rem)); ceiling stays 3rem so desktop is unchanged. */
  font-size: clamp(1.9rem, 7vw, 3rem);
  font-weight: 300;
  padding: 2rem 0 1.5rem;
}

.project-card {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  aspect-ratio: 6 / 2;
  background-size: cover;
  background-position: left center;
  padding: 6rem 3rem 2rem 0;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  position: relative;
}

.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  pointer-events: none;
}

.project-card:hover::after {
  background: rgba(0.15, 0, 0, 0.15);
}

.card-the-society   { background-image: url('../images/the_society_card.png'); }
.card-high-pines    { background-image: url('../images/high_pines_card.png'); }
.card-psyfind       { background-image: url('../images/psyfind_card.png'); }
.card-madison       { background-image: url('../images/madison_and_beyond_card.png'); }
.card-restaurant    { background-image: url('../images/restaurant_card.png'); }
.card-raduzhniy     { background-image: url('../images/rainbow_homecard.png'); }
.card-research      { background-image: url('../images/core_homecard.png'); }

/* ── Pizza & pasta: bespoke split layout, per reference mockup ──────────
   Every other card is one full-bleed photo with the info box floated over
   a corner. This one is different on purpose: a photo panel on the left,
   flat cream on the right with the info box centred in it — so it can't
   reuse the shared .project-card background-image approach. Text/tags
   are unchanged from the other cards, only the layout differs.

   .card-pizza-photo is a real element (not a background on the <a>)
   sized to 56% of the card width specifically so the cover-scaled photo's
   own crop math lands the swirl mark inside this panel instead of at the
   photo/cream seam — measured off the source file: swirl centre sits at
   50.6% of the export's width, 49.1% of its height, and because the
   export (1187x939) is nearly square while the panel is wide, `cover`
   crops the export's height and shows its FULL width — so at 56% panel
   width the swirl lands at 50.6% x 56% ≈ 28% across the whole card,
   comfortably inside the left panel rather than at its right edge. */
.card-pizza {
  background-image: none;
  /* matches the Trulli project page's own cream (css/pizza-theme.css
     --pp-cream) — not a shared variable, just the same literal value, so
     the card and the page it links to read as one continuous colour. */
  background-color: #f2eef0;
  align-items: center;
  padding: 2rem 3rem;
  position: relative;
}

.card-pizza-photo {
  position: absolute;
  inset: 0 auto 0 0;
  width: 56%;
  background-image: url('../images/trulli_header_logo.png');
  background-size: cover;
  background-position: 50% 49%;
}

.card-info-box {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  width: 30%;
  max-width: 30rem;
  height: fit-content;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.project-card:hover .card-info-box {
  transform: translateY(-20px);
}

.card-logo-row {
  display: flex;
  align-items: top;
  gap: 1rem;
  margin-bottom: 2rem;
}

.card-logo-row img {
  height: 3rem;
  width: auto;
}

.card-title {
  font-size: 2rem;
  font-weight: 600;
}

.card-tags {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: #231F20;
}

.card-tags span + span::before {
  content: '|';
  margin: 0.5rem;
  opacity: 0.4;
}

/* ═══ PROJECTS — MOBILE ════════════════════════════════════════════════
   Below 700px the desktop overlay (a 30%-wide info box floated over a
   full-bleed background photo) has nowhere near enough room for real
   titles ("Research Core Facility", "Restaurant website redesign") — the
   text was clipping into unreadable slivers. Mobile drops the overlay and
   stacks each card the same way the rebuilt case-study pages stack their
   own hero below 700px: full-width photo on top, a clean text block
   underneath at the site's own --h-margin gutter (see pizza-theme.css /
   research-theme.css / raduzhniy-theme.css's own @media (max-width:700px)
   hero rules). Each pair is wrapped in one rounded, shadowed tile so eight
   stacked cards still read as distinct clickable rows — without a shadow
   the text block's white background would blend straight into the white
   page background beneath it. */
@media (max-width: 700px) {
  .projects-section {
    gap: 1.5rem;
    padding: 0 var(--h-margin) 1.5rem;
  }

  .project-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    aspect-ratio: auto;
    padding: 0;
    background-image: none;
    border-radius: 1rem;
    box-shadow: 0 0.4rem 1.5rem rgba(35, 31, 32, 0.12);
  }

  /* Photo strip: stands in for the desktop background-image, which now
     needs to fill only the card's top portion, not the whole box. Reuses
     each card's existing image and background-position — only the sizing
     context changes. */
  .project-card::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: left center;
  }

  /* the_society_card.png, high_pines_card.png and psyfind_card.png are all
     the same kind of composite: a photo occupying only the left portion,
     a flat colour panel filling the rest. The shared `cover` crop shows
     55.9% of each image's width (box ratio 1.5 / image ratio 2.682) — past
     each one's own photo/panel seam (~29.5%, ~44%, ~50.3% respectively),
     revealing a sliver of flat colour. Sized up per card so the visible
     slice stays inside the photo — checked visually against each seam,
     not just computed, since the-society's seam is a diagonal cut rather
     than a hard vertical line. Madison, Restaurant, Raduzhniy and Research
     don't need this: their own seams sit further right than 55.9%/59.5%
     already, or the "panel" side has its own designed content (Raduzhniy's
     stickers) so a sliver doesn't read as broken. */
  .card-the-society::before {
    background-image: url('../images/the_society_card.png');
    background-size: 260% auto;
  }
  .card-high-pines::before {
    background-image: url('../images/high_pines_card.png');
    background-size: 250% auto;
  }
  .card-psyfind::before {
    background-image: url('../images/psyfind_card.png');
    background-size: 215% auto;
  }
  .card-madison::before     { background-image: url('../images/madison_and_beyond_card.png'); }
  .card-restaurant::before  { background-image: url('../images/restaurant_card.png'); }
  .card-raduzhniy::before   { background-image: url('../images/rainbow_homecard.png'); }
  .card-research::before    { background-image: url('../images/core_homecard.png'); }

  /* Pizza & pasta already carries a real photo element (the desktop
     split-layout's left-hand panel) instead of a background-image on the
     card itself — reuse that element as the same top photo strip rather
     than generating a redundant ::before. */
  .card-pizza::before { content: none; }
  .card-pizza {
    align-items: stretch;
    padding: 0;
  }
  .card-pizza-photo {
    position: static;
    inset: auto;
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  .card-info-box {
    width: 100%;
    max-width: none;
    border-radius: 0;
    padding: 1.5rem var(--h-margin) 1.75rem;
  }

  .project-card:hover .card-info-box { transform: none; }

  .card-logo-row { margin-bottom: 1rem; }
  .card-logo-row img { height: 2.25rem; }

  .card-title { font-size: 1.5rem; line-height: 1.25; }

  .card-tags {
    flex-wrap: wrap;
    row-gap: 0.35rem;
    font-size: 0.9rem;
  }
}