/* ==========================================================================
   HOME — after sawyerberson.com
   hero slideshow · statement · selected works (lit gallery walls) · inquire
   Type is set a step larger than the reference for older readers (client brief):
   labels 13–15px, captions 14px+, studio paragraphs 22px+.
   The hero only goes full-bleed (cover + Ken Burns) on landscape screens taller than 540px.
   Phones in either orientation, every portrait screen (tablets held upright) and short landscape
   windows get the "whole painting" hero instead: each painting hung whole on a lit wall, never cropped. On phones (< 768px,
   portrait) split rows stack into full-width images; on short landscape screens every stage
   fits the screen and a room photo keeps its own shape.
   ========================================================================== */

/* small text on the home slate (#474e52): the brighter mist keeps it above 4.5:1 */
.home-hero, .home-works, .home-inquire { --home-mist: #c9d6dd; }

/* ---------- hero: 100svh cross-fade + Ken Burns ---------- */
.home-hero {
  position: relative; height: 100vh; height: 100svh; min-height: 420px;
  overflow: hidden; background: var(--sb-bg-inner); color: var(--sb-ink);
}
/* soft top shade so the transparent header stays legible over pale paintings */
.home-hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 140px; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--sb-scrim-rgb), .34), rgba(var(--sb-scrim-rgb), 0));
}
.home-hero__slides, .home-hero__slide { position: absolute; inset: 0; }
.home-hero__slide { opacity: 0; z-index: 0; overflow: hidden; }
/* only the showing slide, the one fading out and the one queued next (.is-next, set by home.js after
   window load) are rendered: every other lazy image stays unrequested, so at most one slide downloads
   at a time and nothing competes with the LCP image */
.home-hero__slide:not(.is-active):not(.is-leaving):not(.is-next) { display: none; }
.home-hero__slide.is-leaving { opacity: 1; z-index: 1; }
.home-hero__slide.is-active { opacity: 1; z-index: 2; transition: opacity 1.2s var(--ease); }

.home-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; transform-origin: var(--kb-origin, 50% 50%);
}
.home-hero.is-live .is-active .home-hero__img,
.home-hero.is-live .is-leaving .home-hero__img { animation: home-kb 6.4s linear both; will-change: transform; }
.home-hero.is-paused .home-hero__img { animation-play-state: paused; }
@keyframes home-kb { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes home-breathe { from { transform: scale(1); } to { transform: scale(1.02); } }   /* whole-painting hero: painting only */

/* bottom scrim — sawyerberson's 120px eased gradient (one per slide, so cross-fades stay even),
   its lower stops deepened a little so the caption stays above 4.5:1 over the palest paintings */
.home-hero__slide::after {
  content: ""; position: absolute; inset: auto 0 0; height: 120px; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgb(35, 39, 41) 0%, rgba(35, 39, 41, .82) 19%, rgba(35, 39, 41, .62) 34%, rgba(35, 39, 41, .42) 47%,
    rgba(35, 39, 41, .3) 56.5%, rgba(35, 39, 41, .2) 65%, rgba(35, 39, 41, .13) 73%,
    rgba(35, 39, 41, .075) 80%, rgba(35, 39, 41, .04) 86%, rgba(35, 39, 41, 0) 100%);
}

/* caption: painting title (italic serif) + small VIEW label, bottom-left inside the scrim */
.home-hero__caption {
  position: absolute; z-index: 2; left: var(--gutter); bottom: 15px;
  display: inline-flex; align-items: baseline; gap: 14px; padding: 4px 0; max-width: calc(50% - 100px);
  color: var(--sb-ink); transition: opacity .25s;
}
.home-hero__title { font: italic 400 21px/1.2 var(--serif); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* VIEW: the brighter mist (not --sb-accent) keeps this small label above 4.5:1 on the scrim and on the slate band */
.home-hero__view { flex: none; font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--home-mist); transition: color .2s; }
.home-hero__caption:hover .home-hero__view { color: var(--sb-ink); }

.home-hero__scroll {
  position: absolute; z-index: 4; left: 50%; bottom: 13px; transform: translateX(-50%);
  padding: 10px 12px; white-space: nowrap;
  font: 600 14px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sb-ink);
  transition: opacity .2s;
}
.home-hero__scroll:hover { opacity: .72; }

.home-hero__toggle {
  position: absolute; z-index: 4; right: calc(var(--gutter) - 14px); bottom: 8px;
  display: grid; place-items: center; width: 44px; height: 44px; color: var(--sb-ink); opacity: .7;
  transition: opacity .2s;
}
.home-hero__toggle:hover, .home-hero__toggle:focus-visible { opacity: 1; }
.home-hero__icon { width: 14px; height: 14px; }
.home-hero__icon--play, .home-hero.is-user-paused .home-hero__icon--pause { display: none; }
.home-hero.is-user-paused .home-hero__icon--play { display: block; }

/* ---------- statement: the h1, set as 51/64 display text ---------- */
.home-statement { padding-top: 70px; }
.home-statement__text { max-width: 1260px; font-size: clamp(32px, 3.55vw, 51px); }
.home-statement__mark {
  font-size: .8em; letter-spacing: .2em; gap: .5em; margin-right: .2em;
  vertical-align: baseline; position: relative; top: -.04em;
}
.home-statement__mark .wordmark__bar { height: 1em; opacity: .85; }

/* ---------- selected works ---------- */
.home-title-row { flex-wrap: wrap; row-gap: 6px; }
.home-works .arrow-link, .home-inquire .arrow-link { color: var(--home-mist); }
.home-works .arrow-link:hover, .home-inquire .arrow-link:hover { color: var(--sb-ink); }
.home-works__list { display: grid; gap: clamp(48px, 3.6vw, 56px); }
.home-work { position: relative; }

.home-work__stage {
  position: relative; aspect-ratio: 1353 / 769; overflow: hidden;
  background: #e6e1d8;
}
.home-work__stage--split { display: grid; grid-template-columns: 1fr 1fr; }
.home-work__stage--flip .home-work__pane--room { order: 2; }
.home-work__pane { position: relative; overflow: hidden; height: 100%; }
.home-work__stage:not(.home-work__stage--split) .home-work__pane { position: absolute; inset: 0; }

/* the gallery wall: a warm off-white tinted by the painting's own dominant colour,
   washed by a spotlight from above and falling off towards the floor
   (the phone hero reuses this wall behind each slide) */
.home-work__wall, .home-hero__slide::before {
  background-color: #e8e3da;
  background-image:
    radial-gradient(ellipse 58% 78% at 50% -12%, rgba(255, 250, 238, .7) 0%, rgba(255, 250, 238, .22) 45%, rgba(255, 250, 238, 0) 72%),
    radial-gradient(ellipse 125% 95% at 50% 42%, rgba(24, 20, 14, 0) 52%, rgba(24, 20, 14, .2) 100%),
    linear-gradient(to bottom, rgba(24, 20, 14, 0) 76%, rgba(24, 20, 14, .07) 90%, rgba(24, 20, 14, .13) 100%);
}
@supports (background-color: color-mix(in oklab, red 50%, blue)) {
  .home-work__wall, .home-hero__slide::before { background-color: color-mix(in oklab, var(--tone, #b9ae9c) 26%, #efebe3); }
}
.home-work__wall { position: absolute; inset: 0; container-type: size; transition: transform 3s var(--ease-out); }

/* the painting, hung at true relative scale (--hp = % of wall height) with a layered gallery shadow */
.home-work__art, .home-hero__img { --hang-shadow:
    0 0 0 1px rgba(20, 16, 10, .06),
    0 1px 1px rgba(30, 24, 16, .1),
    0 2px 3px rgba(30, 24, 16, .1),
    0 6px 9px -2px rgba(30, 24, 16, .13),
    0 14px 22px -6px rgba(30, 24, 16, .17),
    0 30px 46px -14px rgba(30, 24, 16, .24); }
.home-work__art {
  position: absolute; left: 50%; top: 47%; z-index: 1;
  height: calc(var(--hp) * 1%); aspect-ratio: var(--ar);
  transform: translate3d(-50%, -50%, 0);
  box-shadow: var(--hang-shadow);
  transition: transform 1.1s var(--ease-out);
}
@supports (height: 1cqh) {
  .home-work__art { height: min(calc(var(--hp) * 1cqh), calc(86cqw / var(--ar))); }
}
.home-work__img { width: 100%; height: 100%; object-fit: cover; }
/* canvas edge + light falling from above */
.home-work__art::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 250, 240, .1), rgba(255, 250, 240, 0) 38%, rgba(20, 16, 10, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 2px rgba(0, 0, 0, .16),
              inset 1px 0 0 rgba(255, 255, 255, .1), inset -1px 0 0 rgba(0, 0, 0, .1);
}
/* deeper lifted shadow, faded in on hover (cheaper than animating box-shadow) */
.home-work__art::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  box-shadow: 0 22px 34px -10px rgba(30, 24, 16, .3), 0 46px 70px -20px rgba(30, 24, 16, .28);
  transition: opacity 1.1s var(--ease-out);
}

.home-work__room { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 3s var(--ease-out); }

/* hover / keyboard focus: the stage drifts in (sawyerberson's 3s zoom) and the painting lifts */
.home-work:hover .home-work__wall, .home-work:focus-within .home-work__wall,
.home-work:hover .home-work__room, .home-work:focus-within .home-work__room { transform: scale(1.03); }
.home-work:hover .home-work__art, .home-work:focus-within .home-work__art { transform: translate3d(-50%, calc(-50% - 4px), 0); }
.home-work:hover .home-work__art::after, .home-work:focus-within .home-work__art::after { opacity: 1; }

/* title left, tags right; when the larger tags no longer fit beside the title they drop to their own line */
.home-work__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 32px;
  margin-top: 14px;
}
.home-work__title { flex: 0 1 auto; font-size: clamp(27px, 2.5vw, 36px); transition: color .3s; }
/* whole row is one link: the title link stretches over stage + meta */
.home-work__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.home-work__link:focus-visible { outline: none; }
.home-work:has(.home-work__link:focus-visible) .home-work__stage { outline: 1px solid var(--sb-accent); outline-offset: 5px; }
.home-work:hover .home-work__title { color: var(--sb-accent); }
.home-work__tags { flex: 0 1 auto; font-size: 14px; line-height: 1.6; letter-spacing: .1em; color: var(--home-mist); }

/* ---------- inquire ---------- */
.home-inquire__lead { margin-bottom: 20px; font-size: clamp(28px, 2.5vw, 36px); }
.home-inquire__text { margin-bottom: 36px; font-size: clamp(22px, 1.85vw, 27px); line-height: 1.5; }
.home-inquire__links { display: flex; flex-wrap: wrap; gap: 16px 44px; }

/* ---------- whole-painting hero ----------
   Phones in either orientation, every portrait screen (tablets held upright) and short landscape
   screens (phones turned sideways, zoomed-in laptops): a full-bleed cover crop would show only
   45-65% of a painting there, so each one hangs whole on a wall lit in its own dominant colour.
   The header rides on a slate band above the wall; caption / SCROLL DOWN sit on a band below it.
   Defaults here suit tablets; the phone and short-landscape blocks below tune the spacing. */
@media (max-width: 767px), (orientation: portrait), (orientation: landscape) and (max-height: 540px) {
  .home-hero {
    --wall-top: var(--sb-header-h, 64px); --wall-foot: 64px;
    --hang-x: 48px; --hang-t: 40px; --hang-b: 52px;   /* breathing room around the painting */
    background: var(--sb-bg);
  }
  .home-hero::before, .home-hero__slide::after { display: none; }
  .home-hero__slides { container-type: size; }
  .home-hero__slide::before { content: ""; position: absolute; inset: var(--wall-top) 0 var(--wall-foot); z-index: 0; }
  /* the whole painting, contained at its natural ratio, centred a touch above the middle of the wall */
  .home-hero__img {
    inset: calc(var(--wall-top) + var(--hang-t)) var(--hang-x) calc(var(--wall-foot) + var(--hang-b));
    z-index: 1; margin: auto; width: auto; height: auto;
    max-width: calc(100% - 2 * var(--hang-x));
    max-height: calc(100% - var(--wall-top) - var(--wall-foot) - var(--hang-t) - var(--hang-b));
    object-fit: contain; transform-origin: 50% 50%;
    box-shadow: var(--hang-shadow);
  }
  @supports (width: 1cqh) {
    .home-hero__img {
      width: min(calc(100cqw - 2 * var(--hang-x)),
                 calc((100cqh - var(--wall-top) - var(--wall-foot) - var(--hang-t) - var(--hang-b)) * var(--ar, 1)));
      aspect-ratio: var(--ar, auto); max-width: none; max-height: none;
    }
  }
  /* no Ken Burns here: the painting alone breathes from 1.0 to 1.02 */
  .home-hero.is-live .is-active .home-hero__img,
  .home-hero.is-live .is-leaving .home-hero__img { animation-name: home-breathe; }
}

/* ---------- phones (any orientation) ---------- */
@media (max-width: 767px) {
  .home-statement { padding-top: 48px; }

  .home-work__meta { flex-direction: column; align-items: flex-start; margin-top: 12px; overflow: hidden; }
  /* every tag carries its own leading pipe in a fixed slot; the list is pulled left by one slot and the
     meta box clips it, so a wrapped line never starts with a stray "|" */
  .home-work__tags { margin-left: -1.9em; }
  .home-work__meta .home-work__tags li::before { content: "|"; display: inline-block; width: 1.9em; margin: 0; text-align: center; }
}

/* ---------- phones held upright (and narrow windows taller than 540px) ---------- */
@media (max-width: 767px) and (orientation: portrait), (max-width: 767px) and (min-height: 541px) {
  /* hero: tighter wall margins, caption on its own line above the SCROLL DOWN row */
  .home-hero { --wall-foot: 104px; --hang-x: 24px; --hang-t: 26px; --hang-b: 36px; }
  .home-hero__caption { bottom: 58px; max-width: calc(100% - 2 * var(--gutter)); }
  .home-hero__title { font-size: 20px; }
  .home-hero__scroll { bottom: 10px; }
  .home-hero__toggle { bottom: 6px; }

  /* selected works: every painting whole; small panels get a floor so they stay legible on a phone */
  .home-work__stage { aspect-ratio: 4 / 5; }
  @supports (height: 1cqh) {
    .home-work__art { height: min(calc(max(var(--hp), 50) * 1cqh), calc(86cqw / var(--ar))); }
  }
  /* split rows stack: the hung painting, then the whole room mockup at its natural ratio */
  .home-work__stage--split {
    display: flex; flex-direction: column; gap: 10px;
    aspect-ratio: auto; overflow: visible; background: none;
  }
  .home-work__stage--split .home-work__pane { height: auto; }
  .home-work__stage--split .home-work__pane--wall { order: 1; aspect-ratio: 4 / 5; }
  .home-work__stage--split .home-work__pane--room { order: 2; }
  .home-work__stage--split .home-work__room { position: static; display: block; height: auto; object-fit: contain; }
}

/* ---------- short landscape screens (phones turned sideways, zoomed-in laptops) ---------- */
@media (orientation: landscape) and (max-height: 540px) {
  /* hero fits the screen exactly (no 420px floor pushing the caption below the fold) */
  .home-hero { min-height: 0; --hang-x: 24px; --hang-t: 14px; --hang-b: 20px; }

  /* selected works: each stage fits under the header, painting whole on its wall */
  .home-work__stage {
    --stage-h: min(calc((100vw - 2 * var(--gutter)) * 769 / 1353), calc(100vh - var(--sb-header-h, 64px) - 32px));
    aspect-ratio: auto; height: var(--stage-h);
  }
  @supports (height: 1svh) {
    .home-work__stage { --stage-h: min(calc((100vw - 2 * var(--gutter)) * 769 / 1353), calc(100svh - var(--sb-header-h, 64px) - 32px)); }
  }
  @supports (height: 1cqh) {
    .home-work__art { height: min(calc(max(var(--hp), 50) * 1cqh), calc(86cqw / var(--ar))); }
  }
  /* split rows: the room pane takes the room photo's own shape, so the photo shows whole (never cover-cropped);
     the hung painting gets the rest of the row */
  .home-work__stage--split { display: flex; }
  .home-work__stage--split .home-work__pane--wall { flex: 1 1 0; min-width: 0; }
  .home-work__stage--split .home-work__pane--room { flex: none; width: calc(var(--stage-h) * var(--room-ar, 1)); max-width: 50%; }
  .home-work__room { object-fit: contain; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__img { animation: none !important; transform: none !important; }
  .home-work__wall, .home-work__room, .home-work__art { transition: none; }
  .home-work:hover .home-work__wall, .home-work:focus-within .home-work__wall,
  .home-work:hover .home-work__room, .home-work:focus-within .home-work__room { transform: none; }
}