/* =============================================================================
   home.css — Home page (index.html) overrides

   Desktop column width: index.html wraps breadcrumb/page-header/main in
   .content-container (content-container.css) — the same shared component
   pages/commission.html ("Turn your route into art") uses — but on THIS
   page .content-container's own 760px cap and left-aligned align-self are
   both overridden further down this file (see "Desktop editorial column"
   below) to make room for a narrower, centered 700px column living on
   .page-main instead, per explicit request for a calmer, more comfortable
   reading size — the artworks were still reading too large on a typical
   laptop screen at the previous 880px pass, so this tightens it further.
   .content-container keeps its original 760px, left-aligned behavior on
   every OTHER page that reuses it — this override lives entirely in
   home.css, which only ever loads on index.html. .content-container's own
   cap is still lifted (not just narrowed to 700px directly) so .page-main
   can center within .content-area's full available width rather than
   within that now-wider-than-700px leftover box — see step 1 below.
   Breadcrumb and the page title inside .content-container are both empty/
   inert on this page (no page-header.css link, breadcrumb never populated
   here), so widening their shared ancestor has no visible side effect on
   them. The scroll-reveal section further down is NOT width-restricted,
   since nothing about a fade/parallax effect is viewport-specific.

   Structure — all direct children of <main class="page-main" id="main-content">
   in index.html, in this exact order (do not reorder — see index.html's
   own markup comment for the full content-block-by-content-block
   breakdown, this is just the class-level skeleton). Every image +
   text-group pair (7 total) is wrapped in its own .home-hero__block div —
   that wrapper, not .home-hero__image-wrap/.home-hero__text-group
   directly, is the actual direct child of .page-main in each of those
   spots (see "Desktop: side-by-side content blocks" further down this
   file for why: it's what forms the 3-column grid on desktop, matching
   .process__stage on pages/the-artistic-process.html):

     .home-hero__lead   → lead sentence (single line, rose/pink, centered)
     .home-hero__block  → Pair 1: hero-01-mobile.webp + "Refined textile compositions" title + body
     .home-hero__block  → Pair 2: hero-02-mobile.webp + Block 2 title + body
     .home-hero__block  → Pair 3: hero-03-rock-mobile.webp + Block 3 title + body
     .home-hero__block  → Pair 4: hero-04-example-mobile.webp (image only, no text)
     .home-hero__block  → Pair 5: hero-route.webp + "Turn your route into art" title + body + inline "Learn more" .artwork-cta
     .home-hero__block  → Pair 6: hero-03-mobile.webp + Block 5 title + body
     .home-hero__block  → Pair 7: hero-05-artisan.webp + Block 6 title + body
     .artwork-cta        → shared CTA component (final instance — unchanged "Contact the artist")

   .artwork-cta — shared CTA component from css/components/artwork-cta.css
   + artwork-card.css (see index.html) — no rule for it lives in this file
   beyond the "CTA spacing" override and the "left-align the inline 'Learn
   more' CTA" override, both near the end, and no scroll-reveal effect is
   applied to it either (kept fully unchanged, per explicit request).
   Appears twice: Pair 5's instance is nested inside its own text-group
   (see that block's own comment further down and index.html), repurposed
   as a "Learn more" button linking to pages/commission.html#main-content
   (the full "Turn your route into art" page); the final instance,
   further down as a direct child of .page-main, is the original,
   unmodified "Contact the artist" CTA — neither carries an id any more,
   since the first no longer scrolls to the second.

   Component ownership:
     .home-hero__lead       — single-line lead sentence, page's first
                              element, rose/pink accent, 14px Regular,
                              centered — see its own rule below.
     .home-hero__block      — desktop-only 3-column grid wrapper (700px
                              image | 40px gap | 264px text, vertically
                              centered) around one image (± its paired
                              text-group) — 7 total, see "Desktop:
                              side-by-side content blocks" further down
                              this file. Inert on mobile (bare, unstyled
                              div; image and text simply stack inside it).
     .home-hero__text-group — wrapper around a block's heading + body (and,
                              for Pair 5 only, the inline "Learn more" CTA
                              too — see index.html) — on desktop, becomes
                              the 264px-wide, left-aligned text column of
                              its .home-hero__block grid; on mobile, inert
                              (bare, unstyled div). See its own rule below.
     .home-hero__title      — section title per content block, 16px
                              SemiBold White — see its own rule below.
     .home-hero__text       — body copy per content block (14px/Regular)
                              — same class/rule whether paired with a
                              title or standing alone.
     .home-hero__image-wrap — plain positioning/spacing wrapper around each
                              image (see its own comment below for why it
                              exists) + owns the scroll-reveal transition.
     .home-hero__image      — the photo itself, own aspect ratio preserved
                              (same "no forced crop" treatment as
                              .artwork-story__gallery-image, artwork-
                              story.css) + owns the JS-driven scroll-
                              parallax transform (js/home-reveal.js).
                              Mobile: breaks out of .content-area's own
                              24px (--layout-margin) side padding to reach
                              both edges of the viewport. Desktop: fills
                              100% of .page-main's own 700px editorial
                              column instead (see both rules' own comments
                              below, and "Desktop editorial column" further
                              down this file).

   Spacing: image→text transitions stay 24px (--space-6, .home-hero__title/
   .home-hero__text's own margin-top), but text→image transitions are 40px
   (--space-10, .home-hero__image-wrap's own margin-top) — widened by
   +16px from the original shared 24px rhythm, per explicit request to
   increase only the gap between a text block and the image that follows
   it, leaving the gap above text blocks untouched. Applied as margin-top
   on whichever element comes second in each pair (this codebase's existing
   convention — see e.g. .artwork-story__text's own "32px below the credit
   caption" comment, artwork-story.css, for the same pattern at a different
   value). The very first text block has nothing above it inside
   .page-main, so its own margin-top is zeroed via :first-child rather than
   left to accumulate on top of nothing. One exception: the gap directly
   below .home-hero__lead (the page's very first element) back down to
   24px — see ".home-hero__lead + .home-hero__image-wrap" near that rule,
   per a later explicit request.

   Desktop only (min-width: 1024px), that 24px/40px stacked rhythm is
   replaced entirely by a side-by-side 3-column grid — image | 40px gap |
   text, vertically centered, text left-aligned in a 264px column — the
   same grid system as .process__stage on pages/the-artistic-process.html,
   except vertically centered here rather than bottom-aligned (a Home-only
   difference — see "Desktop: side-by-side content blocks" further down
   this file). A single 56px gap separates one .home-hero__block from the next,
   matching Process's own image-to-image rhythm exactly. See "Desktop:
   side-by-side content blocks" further down this file for the full
   rationale and mechanics. Mobile is completely unaffected — none of
   those rules exist outside that media query.

   Both .artwork-cta blocks ARE spaced by this file (see the "CTA spacing"
   section near the end) — a Home-scoped override reduces their shared
   component's own 48px (--space-12, artwork-cta.css) margin-top to 32px
   (--space-8) here specifically, per explicit request; every other page
   reusing .artwork-cta (Artwork Detail pages, etc.) keeps the unmodified
   48px, since that override never leaves this file.
   ============================================================================= */

.home-hero__text {
  margin-top: var(--space-6);          /* 24px below the image (or title) above */
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px, per spec */
  font-weight: 400;                    /* Regular, per spec */
  color: var(--color-gray-50);         /* #D2D2D2 — the existing "light white" body-text
                                           token (same one used by
                                           .private-collection-notice__body,
                                           private-collection-notice.css) */
  line-height: 1.6;                    /* sitewide body default (globals.css), restated for clarity */
  text-align: center;
}

/* First element on the page — nothing above it inside .page-main. */
.home-hero__text:first-child {
  margin-top: 0;
}


/* ── Lead sentence ────────────────────────────────────────────────────────
 * Replaces two former elements — the pink .home-hero__intro line and
 * Block 1's separate white .home-hero__title heading — with a single
 * introductory sentence, per explicit request. Sizing/spacing (14px/
 * Regular/24px line-height) still matches the footer's own body text
 * (.site-footer__description, footer.css), with text-align overridden to
 * center since that source is left-aligned by default — but the color is
 * the brand rose/pink (var(--color-rose-400), same accent used sitewide
 * for taglines/labels — see .page-subtitle, page-header.css) rather than
 * that source's Gray-100, per a later explicit request restoring the pink
 * accent while keeping this smaller 14px size (not the original 16px
 * intro's size).
 * ────────────────────────────────────────────────────────────────────── */

.home-hero__lead {
  margin-top: 0;                       /* first element on the page — nothing above it */
  font-family: var(--font-family-base);
  font-size: 0.875rem;                 /* 14px — matches .site-footer__description */
  font-weight: 400;                    /* Regular — matches .site-footer__description */
  color: var(--color-rose-400);        /* brand rose/pink accent, per explicit request */
  line-height: 1.5rem;                 /* 24px — matches .site-footer__description */
  text-align: center;                  /* override — footer text is left-aligned by default */
}

/* Tighter gap to the first image directly below the lead sentence — 24px
   (--space-6) instead of the page's standard 40px (--space-10) text→image
   rhythm (.home-hero__image-wrap's own base rule below), per explicit
   request ("so the first image starts closer to it"). Scoped to only the
   image-wrap that immediately follows .home-hero__lead via the adjacent-
   sibling combinator, so every other text→image gap on the page is
   unaffected. */
.home-hero__lead + .home-hero__image-wrap {
  margin-top: var(--space-6);          /* 24px — was 40px, reduced by 16px per spec */
}


/* ── Section titles ───────────────────────────────────────────────────────
 * One per content block, sitting directly beside that block's image (see
 * index.html for exactly which side, per block). Same values already
 * established sitewide for this exact "section heading" role — 16px
 * Semibold White — see .commission__heading / .commission__lead
 * (commission.css) on pages/commission.html ("Turn your route into art");
 * reused here as the same visual pattern, not a new one, just a
 * page-scoped class since this page has its own home.css.
 * ────────────────────────────────────────────────────────────────────── */

.home-hero__title {
  margin-top: var(--space-6);          /* 24px below the image above — same rhythm as .home-hero__text */
  font-family: var(--font-family-base);
  font-size: 1rem;                     /* 16px, per spec */
  font-weight: 600;                    /* SemiBold, per spec */
  color: var(--color-white);           /* brighter than the gray-50 body copy, for title/body hierarchy */
  line-height: 1.6;                    /* matches .home-hero__text so paired title+body read as one consistent block */
  text-align: center;
  margin-bottom: 0;
}

/* Guards against a title ever being .page-main's first element with
   nothing above it — not currently true (.home-hero__lead holds that
   position now, see index.html), but kept as a harmless safety rule,
   mirroring .home-hero__text:first-child above, in case a title ever ends
   up first again. */
.home-hero__title:first-child {
  margin-top: 0;
}

/* Mobile only: the image→title gap (below each image, above its title) is
   set to 40px so it visually balances the existing 40px text→image gap
   (.home-hero__image-wrap's own margin-top, var(--space-10) — "the space
   below the text block before the next image"), per explicit request that
   the two gaps read as approximately equal instead of stacking 32px on top
   of the previous 24px base value (which produced an unbalanced 56px).
   Reuses the same --space-10 token as that other gap rather than a new
   value, so both are guaranteed to stay in sync if the rhythm is ever
   revisited. Every .home-hero__block's title is the first (and only) child
   of its .home-hero__text-group, and that wrapper carries no margin-top of
   its own, so the title's own margin-top is what visually separates it
   from the image-wrap above (the two margins collapse into one gap).
   Selector specificity (.home-hero__text-group > .home-hero__title)
   deliberately exceeds the base .home-hero__title rule above so this wins
   regardless of source order. Desktop is untouched: .home-hero__block's
   own ">*:first-child" rule (see "Desktop: side-by-side content blocks"
   below) already zeroes this same margin-top out entirely there, and this
   override is additionally scoped to max-width: 1023px so it can never
   apply past that breakpoint anyway — belt and suspenders. */
@media (max-width: 1023px) {
  .home-hero__text-group > .home-hero__title {
    margin-top: var(--space-10);        /* 40px — matches the text→image gap below, for a balanced rhythm */
  }
}

/* Tight pairing: when a title is immediately followed by a body paragraph
   (i.e. this block has both — see index.html), 24px reads as too loose a
   gap between a heading and its own supporting copy, so it's tightened to
   8px (--space-2) here specifically. Titles with no body (Block 1, and
   Block 4's title before its image) are untouched — the following
   sibling there is an image-wrap or nothing, never a bare .home-hero__text,
   so this selector simply never matches for them. Block 4's own body
   (after its image, before the CTA) isn't adjacent to its title either
   (the image sits between them), so it correctly keeps the standard 24px
   image→text gap instead of this tighter one. */
.home-hero__title + .home-hero__text {
  margin-top: var(--space-2);          /* 8px, tighter than the standard 24px rhythm */
}


/* ── Desktop: side-by-side content blocks ──────────────────────────────────
 * Reuses the same 3-column grid established on pages/the-artistic-
 * process.html (.process__stage, css/components/process.css) — image |
 * 40px gap | text, text left-aligned inside its own column — instead of
 * the original stacked-and-centered treatment (image above, a 560px
 * centered text block below it). This section supersedes the old
 * ".home-hero__text-group — desktop only" rule that used to live here
 * (560px max-width, margin-inline: auto, text-align: center, its own 32px
 * margin-top) and the old desktop-only .home-hero__image-wrap 32px
 * margin-top override — both replaced by the grid-scoped rules below.
 *
 * .home-hero__block wraps one image (± its paired text-group — 7 blocks,
 * 6 carry a text-group, see index.html) so the two form one grid item —
 * exactly like .process__stage wraps one stage's image +
 * .process__stage-content on the Process page. grid-template-columns:
 * 700px 40px 264px — identical values to Process's own grid. The image
 * column stays fixed at 700px, the exact scale Home's images already
 * rendered at (.page-main's own 700px cap, unchanged below) — per
 * explicit request not to reduce image size. 700 + 40 + 264 = 1004px,
 * wider than .page-main's 700px column, so .home-hero__block's own width is
 * set to match (1004px), overflowing .content-container's right edge while
 * its left edge stays exactly where it was — the same accepted trade-off
 * already documented on process.css (can cause horizontal scroll on
 * narrower desktop viewports).
 *
 * align-items: center vertically centers the text column relative to the
 * image — a deliberate, Home-only difference from Process's own
 * bottom-aligned (align-items: end) version of this same grid; per
 * explicit request, scoped entirely to this file, so process.css and every
 * page that reuses .process__stage keeps its own bottom-aligned behavior
 * untouched.
 *
 * margin-top: 56px (--space-14) lives on .home-hero__block itself — a
 * single, explicit source for the gap between one block and the next.
 * Both children are zeroed out below so this 56px is never duplicated with
 * either child's own mobile-carried base margin-top (24px / 40px).
 *
 * .home-hero__block .home-hero__text-group > *:first-child is zeroed so
 * whichever element opens a text-group (a title, in every case — see
 * index.html) doesn't pick up its own 24px base margin-top inside the
 * grid cell. The tight 8px title→body pairing (.home-hero__title +
 * .home-hero__text, above) is untouched, since it only ever targets
 * adjacent siblings, not the group's own first child. Pair 5 ("Turn your
 * route into art") additionally carries an .artwork-cta as its
 * text-group's last child, below the body copy — see "Desktop: left-align
 * the inline 'Learn more' CTA" further down this file for that specific
 * override.
 *
 * Mobile is entirely unaffected: .home-hero__block has no rule outside
 * this media query, so it's a plain, unstyled wrapper there — image and
 * text-group flow normally inside it exactly as if it didn't exist (image
 * on top, text stacked below, centered), same 40px/24px rhythm as before.
 * ────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {

  .home-hero__block {
    display: grid;
    grid-template-columns: 700px 40px 264px;
    align-items: center;
    width: 1004px;                     /* 700 + 40 + 264 */
    max-width: none;
    margin-top: var(--space-14);       /* 56px above every block — matches Process's own image-to-image rhythm (.process__stage-image-wrap's desktop margin-top, process.css) exactly */
  }

  .home-hero__block .home-hero__image-wrap {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;                     /* the block above now owns the "before this pair" gap */
  }

  .home-hero__block .home-hero__text-group {
    grid-column: 3;
    grid-row: 1;
    width: auto;
    max-width: none;
    margin-inline: 0;
    text-align: left;
    margin-top: 0;                     /* positioned via align-items: center, not stacked below the image */
  }

  .home-hero__block .home-hero__text-group > *:first-child {
    margin-top: 0;
  }

  .home-hero__block .home-hero__text-group .home-hero__title,
  .home-hero__block .home-hero__text-group .home-hero__text {
    text-align: left;
  }

}


/* ── Desktop: left-align the inline "Learn more" CTA ────────────────────────
 * Pair 5 ("Turn your route into art") is the one text-group that also
 * contains an .artwork-cta (see index.html) — the "Learn more" button now
 * sits below the body copy, inside the same 264px text column, instead of
 * as a separate full-width block beneath the image, per explicit request.
 * .artwork-cta's own base rule (artwork-cta.css) is unconditionally
 * text-align: center, and its desktop button rule adds margin-left/right:
 * auto — both center it, correct everywhere else it's reused (Artwork
 * Detail pages, the OTHER "Contact the artist" CTA at the bottom of this
 * page) but wrong here, where it should hug the body text's own left edge.
 * Scoped to `.home-hero__block .home-hero__text-group .artwork-cta` (and
 * its own children) so only this one CTA instance is affected — the
 * "Contact the artist" CTA (a direct child of .page-main, never nested
 * inside a .home-hero__block) and every CTA on every other page keep their
 * existing centered styling untouched. Desktop only, matching the rest of
 * this request — on mobile .artwork-cta's own unconditional text-align:
 * center still renders it centered, unchanged from before.
 *
 * Width and vertical spacing are NOT touched here — `.page-main
 * .artwork-cta { width: 100% }` (this file, "Desktop editorial column")
 * already matches this CTA to its container's width regardless of nesting
 * depth (100% of the 264px text-group now, instead of 100% of .page-main),
 * and `.page-main .artwork-cta { margin-top: 32px }` ("CTA spacing — Home
 * only", further down) still supplies the gap below the body paragraph —
 * both selectors match at any depth, so nesting the CTA one level deeper
 * doesn't change either value.
 * ────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {

  .home-hero__block .home-hero__text-group .artwork-cta {
    text-align: left;
  }

  .home-hero__block .home-hero__text-group .artwork-cta .artwork-card__cta {
    margin-left: 0;
    margin-right: 0;
  }

  .home-hero__block .home-hero__text-group .artwork-cta__hint {
    text-align: left;
  }

}


/* ── Images: base (every viewport) ───────────────────────────────────────
 * .home-hero__image-wrap: added so the scroll-reveal transition below and
 * the scroll-parallax transform (js/home-reveal.js) never fight over the
 * same `transform` property on the same element — exactly the same split
 * already used sitewide for this reason (.artwork-zoom + its own
 * .artwork-detail__image, artwork-reveal.js; .reveal-block--image + its
 * own <img>, content-reveal.js): the wrapper owns the CSS-driven
 * entrance/exit slide, the bare <img> inside it owns the JS-driven
 * parallax offset. The wrap is a plain, unstyled block (no padding/
 * border/background of its own) — sized to the image via normal flow.
 * ────────────────────────────────────────────────────────────────────── */

.home-hero__image-wrap {
  display: block;
  margin-top: var(--space-10);         /* 40px below the text block above — 24px (--space-6) base rhythm +16px, per explicit request to widen only the text→image gap. Spacing above text blocks (.home-hero__title/.home-hero__text, both still var(--space-6)) is untouched. This value is mobile-only in practice now — desktop zeroes it back to 0 inside .home-hero__block, see "Desktop: side-by-side content blocks" further down this file. */
}

.home-hero__image {
  display: block;
  height: auto;                        /* preserves each photo's own aspect ratio — no cropping beyond the supplied asset, at any viewport */
  border: none;
  border-radius: 0;                    /* no rounded corners, per spec */
}


/* ── Images: mobile edge-to-edge breakout (unchanged from before) ────────
 * .content-area applies padding-inline: var(--layout-margin) (24px) on
 * mobile (layout.css) — .page-main and everything inside it, including
 * these images, inherit that 24px inset on both sides by default.
 *
 * To reach both edges of the mobile viewport instead, each image's own
 * width is extended by exactly that same 24px on each side
 * (calc(100% + 48px)) and pulled back into place with matching negative
 * side margins — a standard "breakout" technique that only touches this
 * component, not .content-area's padding itself (which the text blocks
 * directly above/below still rely on, per spec: "text blocks may retain
 * their horizontal padding").
 *
 * max-width is explicitly widened to match — reset.css's global rule
 * (`img, video, svg { max-width: 100% }`) would otherwise cap this
 * element's computed width back down to 100% of its own containing block
 * (i.e. right back to the padded, non-breakout width), silently undoing
 * the calc() above.
 *
 * Scoped to mobile only (max-width: 1023px, the sitewide breakpoint —
 * see reveal.css for the same threshold used elsewhere): at desktop,
 * .content-area's own padding isn't even symmetric (0 left / 72px right,
 * layout.css) so this exact formula was never correct there to begin
 * with — see the desktop rule below instead, which uses the readable-
 * width .content-container (content-container.css) rather than
 * .content-area's own padding.
 * ────────────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .home-hero__image {
    width: calc(100% + (var(--layout-margin) * 2));
    max-width: calc(100% + (var(--layout-margin) * 2));  /* overrides reset.css's img { max-width: 100% } */
    margin-left: calc(var(--layout-margin) * -1);
    margin-right: calc(var(--layout-margin) * -1);
  }
}


/* ── Images: desktop — contained to .page-main's own 700px column ────────
 * .page-main (see "Desktop editorial column" below) now caps and centers
 * the whole content column at 700px — that wrapper alone already caps how
 * wide .home-hero__image-wrap and .home-hero__text can grow; this rule
 * only needs to cancel the mobile breakout above so the image fills 100%
 * of that column instead of overshooting it by 48px on each side, per
 * spec ("images simply filling that column proportionally instead of
 * expanding across most of the viewport").
 * ────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .home-hero__image {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}


/* ── Desktop editorial column ─────────────────────────────────────────────
 * A comfortably narrow 700px column, tightened down from an earlier 880px
 * pass that still read as too large on a typical laptop screen (artworks
 * occupying too much vertical space to appreciate comfortably).
 * Deliberately narrower than .content-container's own sitewide 760px
 * default, not wider.
 *
 * LEFT-ALIGNED, not centered — per explicit request: the left edge of
 * every 700px image must land on exactly the same vertical line as the
 * page title/breadcrumb and every other content page (Collection, "Turn
 * your route into art", The Artistic Process). An earlier pass centered
 * this column instead (.content-container: max-width:none; align-self:
 * stretch, then .page-main: max-width:700px; margin-inline:auto) — that
 * produced a 700px box centered within .content-area's full width, which
 * does NOT share Collection/Process's left edge (those pages sit flush
 * against .content-area's own left edge with no centering). Reverted to
 * the exact same mechanism pages/the-artistic-process.html and
 * pages/commission.html already use for this reason: cap
 * .content-container itself to 700px with align-self: flex-start
 * (content-container.css's own sitewide default, restated explicitly) —
 * scoped here since home.css only ever loads on index.html, so every
 * other page reusing .content-container keeps its own behavior untouched.
 * .page-main then simply fills 100% of that already-positioned 700px box
 * — no margin-inline: auto needed any more, since .content-container is
 * the one now providing both the cap and the left alignment.
 *
 * Most direct children of .page-main (.home-hero__lead, .artwork-cta) are
 * plain block boxes that already resolve to 100% of whatever contains
 * them (see each rule's own comments) — capping the parent here is enough
 * to cap and align them without repeating the same max-width/margin
 * individually. .home-hero__block is the deliberate exception, on desktop
 * only: it intentionally grows to 1004px, wider than this 700px column,
 * so its own 3-column grid can hold a fixed 700px image alongside a
 * 264px text column — see "Desktop: side-by-side content blocks" further
 * down this file for the full mechanics (same overflow trade-off already
 * used by .process__stage on pages/the-artistic-process.html). Because
 * this column is now left-aligned rather than centered, .home-hero__block
 * overflows further to the RIGHT only — its own left edge still lines up
 * exactly with .page-main's (and therefore Collection's) left edge.
 *
 * Breadcrumb and the page title inside .content-container are both empty/
 * inert on this page (see this file's own header comment), so this
 * change has no visible effect on them.
 * ────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {

  .content-container {
    max-width: 700px;
    align-self: flex-start;
  }

  .page-main {
    width: 100%;
    max-width: 700px;
  }

  /* .artwork-cta locks to a fixed 500px on desktop by default
     (artwork-cta.css — sized for the Artwork Detail page's own 500px
     photo column), which would leave this page's CTA narrower than the
     700px column above it. Overridden back to 100% of .page-main here,
     scoped to `.page-main .artwork-cta` (0,2,0) so it only ever applies
     inside this page's <main> — every other page reusing .artwork-cta
     (Artwork Detail pages, commission.html, the-artistic-process.html)
     keeps its own existing 500px width untouched. The button itself is
     unaffected either way — it already carries its own fixed 240px
     max-width with margin-inline: auto (artwork-cta.css), so it simply
     re-centers within the wider column instead of changing size. */
  .page-main .artwork-cta {
    width: 100%;
  }

}


/* ── CTA spacing — Home only ─────────────────────────────────────────────
 * .artwork-cta (artwork-cta.css) sets its own margin-top: 48px
 * (--space-12) — the "gap above the button" everywhere else it's reused
 * (Artwork Detail pages, etc.). Per explicit request, both instances of it
 * on THIS page ("Turn your route into art"'s "Learn more" button and the
 * final "Contact the artist" button) get that gap reduced by 16px to 32px
 * (--space-8) instead — scoped to `.page-main .artwork-cta` so this only
 * ever applies inside this page's <main>, never touching the shared
 * component's base rule or any other page that reuses it. `.page-main
 * .artwork-cta` (0,2,0) also outranks the base `.artwork-cta` (0,1,0)
 * regardless of stylesheet load order, so no !important is needed.
 * Nothing else about the CTA (button size, hint spacing, colors, hover/
 * focus states) is touched — only this one margin-top.
 * ────────────────────────────────────────────────────────────────────── */

.page-main .artwork-cta {
  margin-top: var(--space-8);          /* 32px above the button — was 48px, per explicit request */
}


/* =============================================================================
   Scroll reveal — continuous fade + slight vertical movement, both as each
   block enters AND as it leaves the viewport (js/home-reveal.js toggles
   .is-visible on and off via IntersectionObserver, unlike the sitewide
   one-shot .reveal-block/.is-revealed system in reveal.css, which only
   ever reveals once and never fades back out — that system is scoped to
   the Artwork Detail/Collection pages only, so it's left untouched).

   pages/the-artistic-process.html now reuses this exact same js/home-
   reveal.js script (broadened to also query that page's classes, per
   explicit request that it match Home's animation behavior identically)
   — see css/components/process.css's own "Scroll reveal — matches Home
   exactly" section for that page's copy of the CSS rules below (same
   selectors' worth of values, just targeting .process__* classes instead
   of .home-hero__* ones).

   Direction and timing are now unified with that sitewide system, per
   explicit request ("single, consistent animation system throughout the
   website"): every block rises up from the same 16px-below starting point
   (.home-hero__image-wrap's translateY(16px), unchanged — reveal.css's
   own .reveal-block--image was the one updated to match THIS page's
   direction, not the other way around) and now reuses reveal.css's own
   duration/easing values too — 1000ms for images (matching
   .reveal-block--image), 750ms for text (matching the shared
   .reveal-block base, used there for title/meta) — replacing this file's
   own previous uniform 800ms. Same cubic-bezier(0.22, 1, 0.36, 1) easing
   as before (already matched reveal.css's, so unchanged). Blur and the
   veil overlay reveal.css layers onto ITS image role are deliberately NOT
   copied here — those are one-shot, "photo emerging once" effects that
   don't suit this page's continuous, replay-on-every-scroll-past
   behavior; only duration/easing/opacity/transform were requested.

   Applies to every .home-hero__image-wrap, .home-hero__lead,
   .home-hero__title and .home-hero__text — i.e. every image, intro
   sentence, section title and body paragraph, per spec. Each block is an
   independent reveal target rather than sharing one wrapper — with no
   wrapping element between them (see index.html), each is its own flat
   sibling, so this never double-applies opacity/transform the way nesting
   two animated elements would; being only ~8px apart (or immediately
   adjacent across an image, for Block 4) they cross the viewport edge
   close enough together to read as one continuous reveal in practice.

   Deliberately NOT applied to .artwork-cta (kept unchanged, per spec),
   the header, or navigation — this rule only ever targets Home-page-
   specific classes.
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {

  .home-hero__image-wrap,
  .home-hero__lead,
  .home-hero__title,
  .home-hero__text {
    opacity: 0;
    transform: translateY(16px);
  }

  .home-hero__lead,
  .home-hero__title,
  .home-hero__text {
    transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .home-hero__image-wrap {
    transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .home-hero__image-wrap.is-visible,
  .home-hero__lead.is-visible,
  .home-hero__title.is-visible,
  .home-hero__text.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

}

/* Reduced motion: still fades in (once, immediately, no observer, no
   parallax — see js/home-reveal.js) so nothing is left permanently
   invisible, but drops the slide and slows to a minimal, non-distracting
   fade — same reduced-motion treatment reveal.css already uses for the
   sitewide one-shot system. */
@media (prefers-reduced-motion: reduce) {

  .home-hero__image-wrap,
  .home-hero__lead,
  .home-hero__title,
  .home-hero__text {
    opacity: 0;
    transition: opacity 150ms ease;
  }

  .home-hero__image-wrap.is-visible,
  .home-hero__lead.is-visible,
  .home-hero__title.is-visible,
  .home-hero__text.is-visible {
    opacity: 1;
  }

}