/* ============================================================
   Homepage (V6 scrolling redesign) — promoted live 2026-08-27
   ============================================================
   Everything on the homepage lives under the .home2 wrapper class,
   so nothing in this file can leak onto any other page. Loaded
   AFTER /css/page.css, which already provides the design tokens
   (--bg, --ink, fonts) and a handful of components this page
   reuses as-is: .eyebrow, .display, .lede, .rule, .page__menu,
   .menu-toggle, .wordmark, .placeholder-note, .shop-grid, .product
   (+ children), .project-feature-style patterns. Only genuinely
   new layout — header bar, hero, studio split, collection tiles,
   project spotlight banner, footer — gets new rules below.

   The previous homepage (3D hand-nav) is preserved, unlinked, at
   /archive/ — see the HTML comment at the top of /index.html.
   ============================================================ */

:root {
  /* V6.1 — one shared size budget for every section on the scrolling
     homepage (hero included), so nothing balloons far past its
     neighbours. Alex's feedback: the hero was "massive" next to the
     much shorter CTA sections below. Same clamp() everywhere: grows
     with viewport height up to a sane desktop cap, shrinks gracefully
     on short mobile screens instead of forcing a fixed tall block. */
  --home2-section-h: clamp(26rem, 68vh, 40rem);
  /* V6.6 — moved here from `.home2` (was `.home2 { --home2-max: 100rem; }`).
     Custom properties only inherit to DESCENDANTS of where they're
     declared, and .home2-topbar / .home2-hero both sit OUTSIDE the
     .home2 wrapper (siblings of it, not children) — so every
     `max-width: var(--home2-max)` on the nav and hero overlay was
     silently resolving to an invalid value and being ignored. That's
     why the hero title still didn't line up with the sections below
     after the previous alignment fix. Declaring it on :root makes it
     available everywhere on the page. */
  --home2-max: 100rem;
}

.home2 {
  min-height: 100vh;
}

/* ---------------------------------------------------------------
   Defensive overrides — page.css defines .eyebrow / .lede with
   clamp() values tuned for subpages; this pins the shop-style
   sections below to that sizing explicitly rather than relying on
   cascade order, in case another stylesheet ever redefines them.
   (No .display override needed:
   nothing in here uses the bare .display class — section headings
   use .home2-section__title instead, specifically to sidestep this
   exact collision.)
   --------------------------------------------------------------- */
.home2 .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  margin: 0 0 1.5rem;
}
.home2 .lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  max-width: 36ch;
}

/* Logotype — "Alexandra Neville" in the footer. Distinct from the
   nav links: set in the display font (like every .display headline
   on the site) rather than the small mono nav style, but capped
   well below headline size so it reads as a logo, not a heading. */
.home2-logotype {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.home2-cart {
  flex: 0 0 auto;
  /* .site-header (style.css) assigns explicit flex `order` to its
     wordmark (0) and nav (1) children so they sort correctly
     regardless of DOM position. This badge has no such assignment of
     its own by default, which would sort it (order:0) right next to
     the wordmark, ahead of the nav — order:2 keeps it after the nav,
     on the right where it visually belongs, on both desktop and the
     mobile header layout. */
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
  cursor: default;
}
.home2-cart__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--ink);
  display: inline-block;
}

/* ---------------------------------------------------------------
   CTA button — no longer used for a static hero (the 3D panel is the
   hero now), but still used by the two side-by-side buttons in the
   Contact section further down.
   --------------------------------------------------------------- */
.home2-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  padding: 0.9rem 1.6rem;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.home2-hero__cta:hover { background: transparent; color: var(--ink); opacity: 1; }
.home2-hero__cta--outline {
  background: transparent;
  color: var(--ink);
}
.home2-hero__cta--outline:hover { background: var(--ink); color: var(--bg); }

/* Row of two CTAs side by side, used by the Contact/Instagram
   section that replaced the old Journal placeholder. */
.home2-cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.home2-cta-row .home2-hero__cta { margin-top: 0; }

/* ---------------------------------------------------------------
   Generic section wrapper, reused by Featured / Studio-adjacent
   copy blocks / the Contact section.
   --------------------------------------------------------------- */
.home2-section {
  max-width: var(--home2-max);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem) clamp(2.5rem, 6vw, 4rem);
}
.home2-section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.home2-section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}

/* V6.1 — Contact is the one plain .home2-section used as a full
   top-level section on its own (not nested inside a .home2-band like
   Shop's is) — see .home2-band comment for the shared-scale idea.
   Scoped to this modifier class specifically so it doesn't also grow
   the Shop band's *inner* .home2-section wrapper. */
.home2-contact {
  min-height: var(--home2-section-h);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* V6.4 — on mobile the short Contact copy was rattling around inside
   the full shared section height, reading as a lot of empty space
   above and below it (Alex's feedback). Let it size to its own
   content instead of forcing the shared min-height on small screens. */
@media (max-width: 720px) {
  .home2-contact {
    min-height: 0;
    padding-top: clamp(3rem, 14vw, 4rem);
    padding-bottom: clamp(3rem, 14vw, 4rem);
  }
}
.home2-section__more {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.15rem;
  white-space: nowrap;
}

/* Featured products reuses .shop-grid + .product from page.css
   verbatim in terms of layout — the dark-band colour overrides for
   it live below. */

/* ---------------------------------------------------------------
   Full-bleed dark band — used to wrap the Featured/Shop section in
   a black background per Alex's feedback. The band itself is full
   viewport width; the .home2-section inside it keeps the normal
   max-width + padding so content still lines up with every other
   section. Everything text/interactive inside gets a light-on-dark
   override since .product/.eyebrow/etc default to --ink (near-black)
   text, which would be invisible here.
   --------------------------------------------------------------- */
.home2-band {
  /* V6.1 — same shared scale as the hero + every other section below,
     so the dark Shop band isn't a comparatively thin strip. Centers
     its (shorter) inner .home2-section content vertically within the
     extra room rather than leaving dead space underneath. */
  min-height: var(--home2-section-h);
  display: flex;
  align-items: center;
}
.home2-band--dark {
  background: var(--ink);
}
.home2-band--dark .eyebrow,
.home2-band--dark .lede,
.home2-band--dark .home2-section__title,
.home2-band--dark .home2-section__more,
.home2-band--dark .home2-studio__more,
.home2-band--dark .product__title,
.home2-band--dark .product__title a,
.home2-band--dark .product__meta,
.home2-band--dark .product__price {
  color: var(--bg);
}
.home2-band--dark .home2-section__more,
.home2-band--dark .home2-studio__more {
  border-bottom-color: var(--bg);
}
.home2-band--dark .product__media {
  background: rgba(255, 255, 255, 0.08);
}
.home2-band--dark .product__buy {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}
.home2-band--dark .product__buy:hover {
  background: transparent;
  color: var(--bg);
}
.home2-band--dark .product__buy--enquire {
  background: transparent;
  color: var(--bg);
}
.home2-band--dark .product__buy--enquire:hover {
  background: var(--bg);
  color: var(--ink);
}

/* ---------------------------------------------------------------
   Studio split — real portrait photo + bio copy, links to /about/.
   V6.3 — now nested inside a .home2-band.home2-band--dark wrapper
   (per Alex's "About should have a black background" feedback), same
   pattern as Shop. The wrapper owns min-height + vertical centering
   now, so this inner grid just needs its own content layout — no
   border-top either, the band's own black fill is separation enough.
   --------------------------------------------------------------- */
.home2-studio {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: var(--home2-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
  width: 100%;
}
.home2-studio__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-deep);
}
.home2-studio__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Grey -> colour on hover, matching /projects/'s .project-feature__media
     treatment (Alex's feedback: same hover state across the homepage). */
  filter: grayscale(1);
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 500ms ease;
}
.home2-studio__media:hover img { transform: scale(1.04); filter: grayscale(0); }
.home2-studio__more {
  display: inline-flex;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.15rem;
}
@media (max-width: 900px) {
  .home2-studio { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Project spotlight — red banner highlighting the most recent real
   project (no fabricated "current exhibition" dates). Was a dark/
   ink band with red accent text (V6.1) — flipped per Alex's "Projects
   should have red background" feedback: red background, ink (near-
   black) text, matching the hero's own red/ink pairing.
   --------------------------------------------------------------- */
.home2-spotlight {
  background: var(--bg);
  /* V6.1 — see .home2-band comment; same shared section scale. */
  min-height: var(--home2-section-h);
  display: flex;
  align-items: center;
}
.home2-spotlight__inner {
  display: grid;
  /* Matches .home2-studio's 1fr / 1.15fr split — image, then copy —
     per Alex's "same content structure as About" feedback. */
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: var(--home2-max);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3rem);
}
.home2-spotlight .eyebrow { color: var(--ink); }
.home2-spotlight__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1rem;
}
.home2-spotlight__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  margin: 0 0 1rem;
}
.home2-spotlight__desc {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.92;
  max-width: 38ch;
  margin: 0 0 1.5rem;
}
.home2-spotlight__link {
  display: inline-flex;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.15rem;
}
.home2-spotlight__media { aspect-ratio: 4 / 3; overflow: hidden; }
.home2-spotlight__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Grey -> colour on hover, matching /projects/'s .project-feature__media
     treatment (Alex's feedback: same hover state across the homepage). */
  filter: grayscale(1);
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 500ms ease;
}
.home2-spotlight__media:hover img { transform: scale(1.04); filter: grayscale(0); }
@media (max-width: 900px) {
  .home2-spotlight__inner { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Footer — first real footer on the site (subpages currently just
   use .page__nav, a single link row). Only real destinations here;
   no fabricated newsletter form or unbuilt pages (FAQs / Care Guide
   / Returns from the mockup were left out for that reason — see the
   HTML comment above this section in index.html).
   --------------------------------------------------------------- */
.home2-footer { border-top: 1px solid var(--rule); margin-top: clamp(2rem, 5vw, 3rem); }
.home2-footer__inner {
  max-width: var(--home2-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
}
.home2-footer__brand {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home2-footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.home2-footer nav a,
.home2-footer__disabled {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
.home2-footer__disabled { opacity: 0.5; cursor: default; }
.home2-footer__bottom {
  max-width: var(--home2-max);
  margin: 0 auto;
  padding: 1rem clamp(1.5rem, 5vw, 3rem) clamp(2rem, 5vw, 3rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  opacity: 0.65;
}
/* V6.4 — mobile footer was "really long vertically": all 3 columns
   stacked full-width, each with its own gap, plus generous top/bottom
   padding. Compacted per Alex's feedback: brand blurb spans the top,
   the two link lists sit side-by-side underneath instead of stacking
   a third time, and paddings/gaps are all tightened. */
@media (max-width: 720px) {
  .home2-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
    padding: clamp(1.75rem, 7vw, 2.25rem) clamp(1.25rem, 5vw, 2rem) 0.75rem;
  }
  .home2-footer__brand-block {
    grid-column: 1 / -1;
    margin-bottom: 0.5rem;
  }
  .home2-footer nav ul {
    gap: 0.5rem;
  }
  .home2-footer__bottom {
    padding: 0.75rem clamp(1.25rem, 5vw, 2rem) clamp(1.25rem, 5vw, 2rem);
    font-size: 0.62rem;
  }
}

/* ---------------------------------------------------------------
   Top bar (V6.3) — reuses page.css's .page__top / .page__menu /
   .wordmark / .menu-toggle. Per Alex's feedback ("nav should stick
   to the top... and follow scroll"), this is now `position: fixed`
   at the page level (moved out of .home2-hero in the HTML) rather
   than scoped to just the hero. Since it scrolls over every section
   colour below (red hero, black bands, red spotlight), it carries
   its own translucent + blurred backing bar so the links stay legible
   regardless of what's under them, and its text is pinned to --paper
   rather than inheriting whatever a given section's ink colour is.
   --------------------------------------------------------------- */
.home2-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* V6.5 — raised well above every other z-index on this page (nothing
     else here goes past 6) and `isolation: isolate` so this always
     resolves as its own top-level stacking context, not something a
     descendant elsewhere could ever climb above (Alex: "nav is getting
     hidden under some assets"). */
  z-index: 999;
  isolation: isolate;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.home2-topbar .page__top {
  max-width: var(--home2-max);
  margin: 0 auto;
  padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1.5rem, 5vw, 3rem);
}
.home2-topbar .page__menu a,
.home2-topbar .wordmark {
  color: var(--paper);
}
.home2-topbar .menu-toggle__bar {
  background: var(--paper);
}
.home2-topbar .page__menu.is-open {
  background: rgba(10, 10, 10, 0.92);
}

/* ---------------------------------------------------------------
   Hero (V6) — placeholder image + WebGL distortion warp (js/home-
   hero.js) + 2D "fluid sim" particle trail (js/fluid-trail.js),
   replacing the old ArtworkScans.glb 3D scene. In-flow (not fixed)
   so it scrolls away naturally into the sections below — unlike
   /index.html's locked single screen, this page has content under
   the fold.
   --------------------------------------------------------------- */
.home2-hero {
  position: relative;
  /* V6.3 — back to full-screen per Alex's feedback (the V6.1 cap
     to --home2-section-h made every section, hero included, share one
     height; Alex now wants the hero specifically to fill the screen
     while the sections below keep the shared scale). `svh` is the
     stable small-viewport-height unit — same technique the live
     /index.html uses — so mobile browser chrome show/hide doesn't
     resize the hero out from under the fixed nav. Falls back to vh
     in browsers that don't support svh. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.home2-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 700ms ease;
  /* V6.7 — baseline: allow normal vertical scrolling everywhere on the
     canvas by default. js/home-hero.js only overrides this on a given
     touch via preventDefault(), and only when that touch actually hits
     the torus (raycast hit-test) — so touching the model blocks scroll,
     touching anywhere else on the hero scrolls the page as normal. */
  touch-action: pan-y;
}
.home2-hero.is-ready .home2-hero__canvas {
  opacity: 1;
}
.home2-hero__trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 2;
}
.home2-hero__overlay {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* V6.5 — same max-width + auto-margin centring every other section
     on the page uses (.home2-section, .home2-studio, .home2-spotlight
     __inner, etc). Without this, the hero text sat flush to the true
     viewport edge while every section below it was inset by however
     much extra space centred the shared var(--home2-max) column on
     wide screens — two different left margins going down the page
     (Alex's feedback). Padding stays the same clamp() as before. */
  max-width: var(--home2-max);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem);
  pointer-events: none;
}
/* Text is --ink (near-black) on the red bg, matching the live
   homepage's s1 panel — not --paper. Paper/cream only shows up on
   the dark bands further down the page. */
.home2-hero__overlay .eyebrow { color: var(--ink); }
.home2-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  /* V6.3 — 40% smaller per Alex's feedback (was clamp(3rem, 11vw, 8rem);
     every value scaled by 0.6). Mobile gets its own larger size below —
     at this viewport width the 0.6-scaled clamp reads too small next to
     the eyebrow line. */
  font-size: clamp(1.8rem, 6.6vw, 4.8rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

/* V6.4 — mobile hero pass (Alex: "make Alexandra Neville larger and
   slightly higher up", torus crowding the text). Title steps back up
   in size on small screens, and extra bottom padding lifts the whole
   overlay block off the bottom edge, clear of the scroll cue below it. */
@media (max-width: 720px) {
  .home2-hero__overlay {
    padding-bottom: clamp(4.5rem, 16vh, 6.5rem);
  }
  .home2-hero__title {
    font-size: clamp(2.6rem, 13vw, 3.75rem);
  }
}

/* Scroll prompt — bottom-right, mirrors the live homepage's
   .scroll-cue (label + drifting line). */
.home2-hero__scroll-cue {
  position: absolute;
  right: clamp(1.5rem, 5vw, 3rem);
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
  font-family: var(--font-mono);
}
.home2-hero__scroll-label {
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
}
.home2-hero__scroll-line {
  width: 1.4px;
  height: 36px;
  background: var(--ink);
  animation: home2-scroll-drift 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes home2-scroll-drift {
  0%   { transform: scaleY(0.3); opacity: 0.3; }
  50%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(0.3); opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .home2-hero__scroll-line { animation: none; }
}

/* ---------------------------------------------------------------
   Loading veil (V6.2) — mirrors the live homepage's #veil / bottom-
   right #veil-percent counter, scoped to the hero container only
   (this page's only up-front 3D asset). Sits above nav + overlay
   text so it fully hides the canvas while the GLB streams in.
   --------------------------------------------------------------- */
.home2-veil {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--bg);
  transition: opacity 600ms ease, visibility 600ms;
}
.home2-veil.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.home2-veil__percent {
  position: absolute;
  right: clamp(1.5rem, 5vw, 3rem);
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-transform: uppercase;
  line-height: 1;
}

/* ---------------------------------------------------------------
   Shop CTA — full-bleed dark band (reuses .home2-band--dark), a
   short pitch + Shopify CTA button, and a simple photo strip of
   available pieces (each links straight to that product on
   Shopify — no in-page cart here, the internal /shop/ pages still
   have layout bugs Alex is working through).
   --------------------------------------------------------------- */
.home2-shop-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.home2-shop-strip a {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.home2-shop-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Grey -> colour on hover, matching /projects/'s .project-feature__media
     treatment (Alex's feedback: same hover state across the homepage). */
  filter: grayscale(1);
  transition: transform 400ms ease, filter 500ms ease;
}
.home2-shop-strip a:hover img { transform: scale(1.04); filter: grayscale(0); }
@media (max-width: 720px) {
  .home2-shop-strip { grid-template-columns: repeat(2, 1fr); }
}