/* =====================================================================
   creators.css — /creators (For artists). Page-owned styles only.
   ===================================================================== */

.cr { --photo-bg: #d0ced0; --stage-h: calc(100svh - var(--header-h)); }

/* ---------------------------------------------------------------- hero */
.cr-hero { display: grid; }
.cr-hero__media { position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; background: #1a1a1a; }
.cr-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; animation: cr-settle 1.6s var(--ease) both; }
.cr-hero__text { padding: var(--s-6) var(--gutter) var(--s-4); display: grid; gap: var(--s-4); justify-items: start; }
.cr-hero__text h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.6rem); }
.cr-hero__lead { text-wrap: balance; font-size: var(--fs-lg); line-height: 1.4; color: var(--ink-2); max-width: 22rem; }
.cr-hero__text .btn { margin-top: var(--s-2); min-width: 9rem; }
@keyframes cr-settle { from { transform: scale(1.05); opacity: 0.001; } to { transform: none; opacity: 1; } }

@media (min-width: 900px) {
  .cr-hero { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); height: var(--stage-h); min-height: 560px; max-height: 1080px; }
  .cr-hero__media { order: 2; aspect-ratio: auto; height: 100%; }
  .cr-hero__text { order: 1; align-content: end; padding: var(--s-8) var(--s-7) var(--s-9) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); gap: var(--s-5); }
  .cr-hero__lead { max-width: 24rem; }
}

/* ---------------------------------------------------------------- shared sticky stage
   A tall section; the stage sticks under the header while the page scrolls
   past it. Never traps: it is ordinary scrolling, the stage just follows. */
.cr-why { margin-top: var(--section); height: calc(var(--stage-h) + 100svh); }
/* How: a plain heading, then the pinned stage. 4 stages over 180svh of
   scrolling = one stage per ~45svh (about half a screen, one gesture). */
.cr-how { margin-top: calc(var(--section) * 0.6); }
.cr-how__head { padding: 0 var(--gutter) var(--s-4); }
.cr-how__head h2 { font-size: var(--fs-xl); }
.cr-how__pin { height: calc(var(--stage-h) + 180svh); }
@media (min-width: 900px) {
  .cr-how__head { padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 0; }
  .cr-how__head h2 { font-size: var(--fs-2xl); }
}
.cr-stage {
  position: sticky; top: var(--header-h); height: var(--stage-h);
  display: grid; grid-template-rows: auto minmax(0, 1fr); align-content: start;
}
.cr-stage__figure { order: 1; margin: 0; }
.cr-stage__text { order: 2; padding: var(--s-5) var(--gutter) 0; min-height: 0; }
.cr-stage__text h2 { font-size: var(--fs-xl); }

.cr-frame {
  position: relative; height: min(56svh, 125vw); background: var(--bone);
  overflow: hidden; contain: layout paint; transition: background-color 0.8s var(--ease);
}
.cr-plate { position: absolute; top: 0; bottom: 0; left: 50%; aspect-ratio: 1122 / 1402; transform: translateX(-50%); }
.cr-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.cr-photo {
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
}
@media (min-width: 900px) {
  .cr-photo {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
}
.cr-caption { margin-top: var(--s-3); padding-inline: var(--gutter); }
.cr-caption.wall-label { gap: 0; }
.cr-caption .wall-label__title { font-size: var(--fs-base); }

@media (min-width: 900px) {
  .cr-stage {
    grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    align-content: stretch; align-items: center; padding-block: var(--s-6);
  }
  .cr-stage__figure { order: 2; height: 100%; align-self: stretch; display: flex; flex-direction: column; padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .cr-stage__text { order: 1; padding: 0 var(--s-7) 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .cr-stage__text h2 { font-size: var(--fs-2xl); }
  .cr-frame { height: auto; flex: 1 1 auto; min-height: 0; }
  .cr-caption { padding-inline: 0; }
}

/* ---------------------------------------------------------------- why: wall -> worn (scroll-scrubbed) */
.cr-lines { margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.cr-line {
  font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.3; max-width: 26rem;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), visibility 0s linear 0.7s;
}
.cr-line.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (min-width: 900px) {
  .cr-lines { margin-top: var(--s-5); gap: var(--s-3); }
  .cr-line { font-size: var(--fs-xl); }
}
.cr-why [data-why-blank], .cr-why [data-why-done] { opacity: 0; }
.cr-why-art {
  position: absolute; left: 10%; top: 28.67%; width: 80%; height: 42.67%;
  overflow: hidden; background: var(--oat);
  box-shadow: 0 18px 36px -12px rgba(18, 18, 17, calc(0.35 * var(--shadow, 1)));
  will-change: left, top, width, height;
}
.cr-why-art img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- how: seven steps */
.cr-steps { display: grid; }
.cr-step {
  grid-area: 1 / 1; opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); visibility: hidden;
}
.cr-step.is-past { transform: translateY(-16px); }
.cr-step.is-on { opacity: 1; transform: none; visibility: visible; transition-delay: 0.12s; }
.cr-step__title { font-size: var(--fs-xl); line-height: 1.15; }
.cr-step__text { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-md); max-width: 24rem; }
.cr-ticks { display: flex; gap: 6px; margin-top: var(--s-5); max-width: 14rem; }
.cr-ticks i { flex: 1; height: 1px; background: var(--line-strong); transition: background-color 0.5s var(--ease); }
.cr-ticks i.is-on { background: var(--fg); }
@media (min-width: 900px) {
  .cr-step__title { font-size: var(--fs-2xl); }
  .cr-step__text { font-size: var(--fs-lg); }
  .cr-ticks { margin-top: var(--s-7); }
}

/* frame background per step: wall (bone), studio photo (grey), print (white) */
.cr-how .cr-frame[data-step='1'] { background: var(--photo-bg); }
.cr-how .cr-frame[data-step='2'], .cr-how .cr-frame[data-step='3'] { background: #fff; }

.cr-hw { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease); }
.cr-hw img { display: block; }

/* 0: four works hung 2x2 on a wall. Each cell's box is the "wall" size
   (8%, 27.6%, 84% x 44.8% of the plate), shrunk into place with transform. */
.cr-hw--grid { opacity: 1; }
.cr-cell {
  position: absolute; left: 8%; top: 27.6%; width: 84%; height: 44.8%;
  transform-origin: 0 0; transition: transform 0.9s var(--ease), opacity 0.7s var(--ease);
  box-shadow: 0 14px 30px -14px rgba(18, 18, 17, 0.4);
}
.cr-cell img { width: 100%; height: 100%; object-fit: cover; }
.cr-cell--a { transform: translate(-2.381%, -4.464%) scale(0.5); z-index: 1; }
.cr-cell--b { transform: translate(52.381%, -4.464%) scale(0.5); }
.cr-cell--c { transform: translate(-2.381%, 54.464%) scale(0.5); }
.cr-cell--d { transform: translate(52.381%, 54.464%) scale(0.5); }
.cr-frame:not([data-step='0']) .cr-hw--grid { opacity: 0; }

/* 1: the blank fades in and its canvas is painted in the same soft stroke */
.cr-frame[data-step='1'] .cr-hw--blank { opacity: 1; }
.cr-hw--paint {
  -webkit-mask-image: linear-gradient(100deg, #000 44%, transparent 56%);
  mask-image: linear-gradient(100deg, #000 44%, transparent 56%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: opacity 0.8s var(--ease), -webkit-mask-position 1.3s var(--ease-inout), mask-position 1.3s var(--ease-inout);
}
.cr-frame[data-step='1'] .cr-hw--paint { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; transition-delay: 0.25s; }

/* 2: prints in two colors */
.cr-print { position: absolute; width: 66%; margin: 0; transition: transform 0.9s var(--ease); mix-blend-mode: multiply; }
.cr-print img { width: 100%; height: auto; aspect-ratio: 1; }
.cr-print--1 { left: -4%; top: 3%; transform: translate(-6%, -4%); }
.cr-print--2 { right: -4%; top: 41%; transform: translate(6%, 4%); }

.cr-frame[data-step='2'] .cr-hw--prints { opacity: 1; }
.cr-frame[data-step='2'] .cr-print { transform: none; }

/* 3: your name on the label */
.cr-hw--earn img { position: absolute; left: 13%; top: 6%; width: 74%; height: auto; aspect-ratio: 1; }
.cr-earn-label { position: absolute; left: 13%; right: 13%; top: 68%; }
@media (min-width: 900px) {
  .cr-earn-label { font-size: var(--fs-base); top: 70%; }
  .cr-earn-label .wall-label__title { font-size: var(--fs-lg); }
}
.cr-frame[data-step='3'] .cr-hw--earn { opacity: 1; }

/* ---------------------------------------------------------------- what you get */
.cr-get { padding-top: calc(var(--section) * 1.1); }
.cr-get__grid { display: grid; gap: var(--s-6); }
.cr-get__media { margin: 0 calc(var(--gutter) * -1); }
.cr-get__media .media { --ratio: 4 / 4.4; }
.cr-get__media .media img { object-position: 50% 30%; }
.cr-get__media .cr-caption { padding-inline: var(--gutter); }
.cr-list { margin-top: var(--s-5); }
.cr-list li { padding-block: var(--s-4); border-top: 1px solid var(--line); }
.cr-list li:last-child { border-bottom: 1px solid var(--line); }
.cr-list h3 { font-size: var(--fs-lg); line-height: 1.25; }
.cr-list p { margin-top: var(--s-1); color: var(--muted); }
@media (min-width: 900px) {
  .cr-get__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-9); align-items: center; }
  .cr-get__media { margin: 0; }
  .cr-get__media .media { --ratio: 1122 / 1402; }
  .cr-get__media .cr-caption { padding-inline: 0; }
  .cr-list { margin-top: var(--s-7); }
  .cr-list li { padding-block: var(--s-5); }
  .cr-list h3 { font-size: var(--fs-xl); }
}

/* ---------------------------------------------------------------- who it is for */
.cr-who { margin-top: var(--section); }
.cr-who__media { margin: 0 calc(var(--gutter) * -1); }
.cr-who__media .media { background: #000; }
.cr-who__media .cr-caption .wall-label__meta { color: var(--faint); }
.cr-who__text { margin-top: var(--s-7); display: grid; gap: var(--s-5); }
.cr-who__lines { display: grid; gap: var(--s-3); }
.cr-who__lines li { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.25; }
.cr-who__lines li:not(:first-child) { color: #cfc8ba; }
@media (min-width: 900px) {
  .cr-who__media { margin: 0; }
  .cr-who__media .media { --ratio: 16 / 8.4; }
  .cr-who__media .media img { object-position: 50% 42%; }
  .cr-who__text { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-8); margin-top: var(--s-8); }
  .cr-who__lines li { font-size: var(--fs-2xl); line-height: 1.12; }
}

/* ---------------------------------------------------------------- apply */

.cr-apply__grid { display: grid; gap: var(--s-6); }
.cr-apply__lead { margin-top: var(--s-3); font-size: var(--fs-lg); color: var(--ink-2); max-width: 24rem; line-height: 1.4; }
.cr-apply__media { display: none; }
.cr-form { display: grid; gap: var(--s-5); max-width: 36rem; }
.cr-form__fields { display: grid; gap: var(--s-5); min-width: 0; margin: 0; padding: 0; border: 0; }
.cr-form__fields:disabled { opacity: 0.55; }
.cr-form__fields:disabled .btn { cursor: default; }
/* applications not open yet: said plainly above the form */
.cr-form__closed { font-size: var(--fs-lg); line-height: 1.4; color: var(--ink); max-width: 26rem; }
.cr-form__closed[hidden] { display: none; }
.cr-form__closed a { color: inherit; }
.cr-form__foot { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.cr-form .form-status { color: var(--ink-2); font-size: var(--fs-base); }
.cr-form .form-status a { color: inherit; }
.cr-form .input[aria-invalid='true'], .cr-form .select[aria-invalid='true'] { border-color: var(--danger); }
.cr-form ::placeholder { color: var(--faint); opacity: 1; }
@media (min-width: 900px) {
  .cr-apply__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); align-items: start; }
  .cr-apply__intro { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
  .cr-apply__media { display: block; margin-top: var(--s-7); max-width: 30rem; }
  .cr-apply__media .media { --ratio: 5 / 4; }
  .cr-apply__media img { object-position: 50% 55%; }
  .cr-form { padding-top: var(--s-2); }
}

/* ---------------------------------------------------------------- FAQ */
.cr-faq__title { font-size: var(--fs-xl); margin-bottom: var(--s-5); }
.cr-faq .accordion > summary { font-size: var(--fs-md); gap: var(--s-4); padding-block: var(--s-2); }
.cr-faq .accordion__body { font-size: var(--fs-base); max-width: var(--max-text); }
@media (min-width: 900px) { .cr-faq__title { font-size: var(--fs-2xl); margin-bottom: var(--s-6); } }

/* ---------------------------------------------------------------- no JS: plain flow */
.no-js .cr-why, .no-js .cr-how__pin { height: auto; }
.no-js .cr-stage { position: static; height: auto; }
.no-js .cr-line, .no-js .cr-step { opacity: 1; transform: none; visibility: visible; grid-area: auto; margin-bottom: var(--s-4); }
.no-js .cr-ticks { display: none; }
.no-js .cr-why-art { display: none; }
.no-js [data-why-done] { opacity: 1; }

/* even line breaks on short display lines */
.cr h1, .cr h2, .cr h3, .cr-line, .cr-who__lines li, .cr-step__text, .cr-apply__lead { text-wrap: balance; }