/* =====================================================================
   home.css — home page only (hero, works carousel, featured artists,
   salon wall, the blank). Uses base.css tokens.
   ===================================================================== */

/* Header: on the home page the big wordmark lives in the hero; the
   header's small one appears once the page has scrolled. */
body[data-page='home'] .site-header .site-header__inner > .wordmark { transition: opacity 0.4s var(--ease); }
body[data-page='home'] .site-header:not(.is-scrolled) .site-header__inner > .wordmark { opacity: 0; pointer-events: none; }
body[data-page='home'] .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* =====================================================================
   A · HERO
   ===================================================================== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  max-height: 1400px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding-top: var(--header-h);
  background:
    radial-gradient(60% 52% at 50% 46%, #fbf8f2 0%, rgba(251, 248, 242, 0) 70%),
    linear-gradient(180deg, var(--ivory) 0%, #efe9dd 100%);
  overflow: hidden;
}
.hero__stage {
  position: relative;
  display: block;
  min-height: 0;
  margin-inline: auto;
  width: 100%;
  max-width: 1100px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  view-transition-name: canvas-hoodie;
}
.hero__viewer.viewer { position: absolute; inset: 0; width: auto; aspect-ratio: auto; touch-action: auto; }
.hero__viewer .turn { cursor: pointer !important; }
/* painted: sideways swipes turn it (front / back), up-down still scrolls */
.hero[data-state='painted'] .hero__viewer.viewer { touch-action: pan-y; }
.hero[data-state='painted'] .hero__viewer .turn { cursor: grab !important; }
.hero[data-state='painted'] .hero__viewer .turn.is-dragging { cursor: grabbing !important; }
.hero__stage:focus-visible { outline-offset: -6px; }
.hero__fb-paint { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__fb-paint.is-on { opacity: 1; }

.hero__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s-3) var(--s-5);
  padding-bottom: max(var(--s-5), env(safe-area-inset-bottom));
  padding-top: var(--s-3);
}
.hero__name { display: grid; gap: var(--s-2); min-width: 0; }
.hero__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: 0.035em;
  margin-left: -0.04em;
}
.hero__label {
  min-height: 1.6em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.hero.is-painted .hero__label { opacity: 1; transform: none; transition-delay: 0.15s; }
.hero__piece { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.1em; text-decoration: none; }
.hero__piece .wall-label__title { font-size: var(--fs-md); }
.hero__piece .wall-label__meta { font-size: var(--fs-sm); }
.hero__dash { color: var(--muted); }
.hero__piece:hover .wall-label__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* "Swipe to turn": shows once it is painted, gone after the first turn */
.hero__hint {
  display: flex; align-items: center; gap: var(--s-3); min-height: 44px; margin: 0;
  font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; pointer-events: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.hero__hint-line { position: relative; width: 28px; height: 1px; background: currentColor; overflow: hidden; }
.hero__hint-line::after {
  content: ''; position: absolute; inset: 0; background: var(--ink);
  transform: translateX(-100%); animation: hero-hint 2.6s var(--ease-inout) 0.8s infinite;
}
@keyframes hero-hint { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.hero__hint.is-gone { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .hero__hint-line::after { animation: none; } }

/* scroll cue: one thin line, quiet; gone after the intro */
.hero__cue {
  position: absolute; left: 50%; bottom: calc(var(--s-5) + 64px);
  width: 1px; height: 40px; margin-left: -0.5px; overflow: hidden;
  background: var(--line);
  transition: opacity 0.5s var(--ease);
}
.hero__cue > span { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--ink); animation: cue 2.2s var(--ease-inout) infinite; }
.hero__cue.is-gone, .hero[data-state='loading'] .hero__cue { opacity: 0; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .hero__cue > span { animation: none; transform: translateY(0); } }

/* phone: wordmark as a masthead on top, hoodie in the middle, caption + hint below */
@media (max-width: 599px) {
  .hero { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .hero__text, .hero__name { display: contents; }
  .hero__wordmark { grid-row: 1; padding: var(--s-3) var(--gutter) 0; }
  .hero__stage { grid-row: 2; width: 116%; max-width: none; margin-left: -8%; }
  .hero__label { grid-row: 3; padding-inline: var(--gutter); }
  .hero__hint { grid-row: 4; justify-self: start; margin: var(--s-2) var(--gutter) max(var(--s-6), env(safe-area-inset-bottom)); }
  .hero__cue { display: none; }
}
@media (min-width: 900px) {
  .hero__text { padding-bottom: var(--s-6); }
  .hero__cue { bottom: var(--s-7); }
}

/* the hoodie expands into the product page */
::view-transition-group(canvas-hoodie) { animation-duration: 0.6s; animation-timing-function: var(--ease); }

/* =====================================================================
   B1 · THE WORKS
   ===================================================================== */
.works { padding-top: var(--section); }
.works__head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.works__title { font-size: var(--fs-2xl); }
.works__line { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--muted); }
.works__nav { display: flex; align-items: center; gap: var(--s-1); }
.works__count { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--muted); margin-right: var(--s-3); }
.works__sep { margin-inline: 0.35em; }
.works__arrow { transition: opacity 0.25s; }
.works__arrow:disabled { opacity: 0.25; cursor: default; }
@media (max-width: 599px) { .works__arrow { display: none; } .works__count { margin-right: 0; } }

.works__track {
  --slide-w: 86vw;
  --slide-gap: 12px;
  display: flex;
  gap: var(--slide-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-inline: calc((100vw - var(--slide-w)) / 2);
  padding-bottom: var(--s-2);
  scrollbar-width: none;
  cursor: grab;
}
.works__track::-webkit-scrollbar { display: none; }
.works__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.works__track.is-dragging a { pointer-events: none; }
.works__track:focus-visible { outline-offset: -2px; }
@media (min-width: 900px) { .works__track { --slide-w: min(74vw, 1180px); --slide-gap: clamp(32px, 4vw, 64px); } }

.slide {
  --off: 0;
  flex: 0 0 var(--slide-w);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
/* Slides off-centre: only the pictures dim. Their labels stay readable
   (muted text, still AA contrast on ivory). */
.slide__link { opacity: 0.45; transition: opacity 0.6s var(--ease); }
.slide.is-active .slide__link { opacity: 1; }
.slide .slide__label .wall-label__title { color: var(--muted); transition: color 0.6s var(--ease); }
.slide.is-active .slide__label .wall-label__title { color: var(--fg); }
.slide__link { display: grid; gap: var(--s-3); text-decoration: none; color: inherit; }

/* the wall: front painting big, back painting smaller beside/below it */
.slide__wall {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: var(--s-4);
  padding: 9% 8% 10%;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
    var(--bone);
  overflow: hidden;
}
.slide__hang { margin: 0; will-change: transform; }
.slide__hang img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--oat);
  box-shadow: 0 1px 1px rgba(40, 30, 15, 0.12), 0 22px 30px -18px rgba(40, 30, 15, 0.55);
}
.slide__hang--front { transform: translate3d(calc(var(--off) * -26px), 0, 0); }
.slide__hang--back { width: 56%; justify-self: end; transform: translate3d(calc(var(--off) * 18px), 0, 0); }

/* the piece on the hoodie */
.slide__garment { position: relative; aspect-ratio: 1122 / 1402; background: #d4d2d5; overflow: hidden; }
.slide__garment img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s var(--ease), transform 1.2s var(--ease); }
.slide__garment-back { opacity: 0; }
@media (hover: hover) {
  .slide__link:hover .slide__garment-back { opacity: 1; }
  .slide__link:hover .slide__garment img { transform: scale(1.02); }
}
.slide__label { margin-top: var(--s-3); }
.slide__label a { text-decoration: none; }

/* phone: wall on top; garment and label side by side under it */
@media (max-width: 899px) {
  .slide__link { grid-template-columns: 1fr 1fr; }
  .slide__wall { grid-column: 1 / -1; }
  .slide__garment { grid-column: 1; }
  .slide { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-3); }
  .slide__link { grid-column: 1 / -1; grid-row: 1; }
  .slide__label { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 var(--s-1); }
  .slide__hang--back { width: 54%; }
}
/* desktop: wall | garment, label under */
@media (min-width: 900px) {
  .slide__link { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); }
  .slide__wall {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    align-items: center;
    gap: 7%;
    padding: 0 8%;
  }
  .slide__hang--back { width: 100%; justify-self: stretch; }
}

/* =====================================================================
   B2 · FEATURED ARTISTS (dark)
   ===================================================================== */
.artists { margin-top: var(--section); padding-block: var(--section); }
.artists__title { font-size: var(--fs-2xl); margin-bottom: var(--s-7); }
.artist + .artist { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--line); }
.artist__grid { display: grid; gap: var(--s-6); }
.artist__about { display: grid; gap: var(--s-3); align-content: start; max-width: 26rem; }
.artist__name { font-size: var(--fs-xl); }
.artist__name a { text-decoration: none; }
.artist__bio { color: var(--ivory); font-size: var(--fs-md); line-height: 1.45; }
.artist__bio span { display: block; }
.artist__meta { color: var(--muted); font-size: var(--fs-sm); }
.artist__more { justify-self: start; font-size: var(--fs-sm); margin-top: var(--s-2); }

.artists .artist__strip {
  display: flex; gap: var(--s-3);
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--s-2);
  list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.artist__strip::-webkit-scrollbar { display: none; }
.artist__strip.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.artist__strip.is-dragging a { pointer-events: none; }
.artist__work { flex: 0 0 min(62vw, 300px); scroll-snap-align: start; }
.artist__work a { display: grid; gap: var(--s-3); text-decoration: none; color: inherit; }
.artist__img { display: block; aspect-ratio: 1122 / 1402; background: #d4d2d5; overflow: hidden; }
.artist__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.artist__work a:hover .artist__img img { transform: scale(1.03); }
.artist__work .wall-label__title { color: var(--ivory); }
.artists__all { margin-top: var(--s-7); }

@media (min-width: 900px) {
  .artist__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: var(--s-7); align-items: start; }
  .artists .artist__strip { margin: 0 calc(var(--gutter) * -1) 0 0; padding-left: 0; cursor: grab; }
  .artist__work { flex-basis: clamp(240px, 21vw, 340px); }
}

/* =====================================================================
   B3 · SALON WALL
   ===================================================================== */
.salon { padding-top: var(--section); }
.salon__head { margin-bottom: var(--s-6); }
.salon__head h2 { font-size: var(--fs-2xl); }
.salon__wall {
  --H: 70;
  position: relative;
  aspect-ratio: 100 / var(--H);
  background:
    radial-gradient(70% 45% at 30% 8%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 40% at 75% 50%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #ece6d9 0%, #e4dccb 100%);
  overflow: hidden;
}
.hang {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) / var(--H) * 100%);
  width: calc(var(--w) * 1%);
  display: block;
  text-decoration: none;
  color: inherit;
  will-change: transform;
}
.hang__inner {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--oat);
  box-shadow: 0 1px 1px rgba(40, 30, 15, 0.14), 0 26px 34px -20px rgba(40, 30, 15, 0.6);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.hang__inner img { width: 100%; height: 100%; object-fit: cover; }
.hang--black .hang__inner { border: clamp(4px, 0.45vw, 8px) solid #191816; }
.hang--oak .hang__inner { border: clamp(4px, 0.45vw, 8px) solid #b89c74; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(40, 30, 15, 0.14), 0 26px 34px -20px rgba(40, 30, 15, 0.6); }
.hang__label {
  position: absolute; left: 0; top: calc(100% + 10px);
  font-size: var(--fs-sm); white-space: nowrap;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.hang__label .wall-label__title { font-size: var(--fs-sm); }
@media (hover: hover) {
  .hang:hover .hang__inner { transform: translateY(-4px); box-shadow: 0 1px 1px rgba(40, 30, 15, 0.14), 0 34px 40px -22px rgba(40, 30, 15, 0.65); }
  .hang:hover .hang__label { opacity: 1; transform: none; }
}
.hang:focus-visible .hang__label { opacity: 1; transform: none; }

@media (max-width: 899px) {
  .salon__wall { aspect-ratio: 100 / var(--PH); }
  .hang { left: calc(var(--px) * 1%); top: calc(var(--py) / var(--PH) * 100%); width: calc(var(--pw) * 1%); }
  .hang--wide-only { display: none; }
  .hang--black .hang__inner, .hang--oak .hang__inner { border-width: 4px; }
}
.salon__foot { margin-top: var(--s-6); display: flex; justify-content: center; }

/* =====================================================================
   B4 · THE BLANK
   ===================================================================== */
.blank { padding-top: var(--section); }
.blank__link { display: grid; gap: var(--s-4); text-decoration: none; color: inherit; }
.blank__media { --k: 1; }
.blank__media img { transform: scale(calc(1.08 - var(--k) * 0.08)); transform-origin: 50% 60%; transition: opacity 0.6s var(--ease); will-change: transform; }
.blank__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); }
.blank__name { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: transparent; transition: text-decoration-color 0.3s; }
.blank__link:hover .blank__name { text-decoration-color: currentColor; }
.blank__price { color: var(--muted); }
@media (min-width: 900px) {
  .blank__link { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-7); align-items: end; }
  .blank__media { width: min(40vw, calc(76vh * 1122 / 1402)); }
  .blank__text { flex-direction: column; align-items: flex-start; padding-bottom: var(--s-2); }
}