/* Artist — Paige's statement, set as a manifesto on the blank page. */

.page-artist { background: var(--primer); }
/* stickers start oversized and tilted before they land; never let them widen a phone's page */
.artist { overflow-x: clip; }

.a-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(110px, 16vh, 170px) var(--gutter) clamp(40px, 8vh, 90px);
}
.a-portrait {
  position: relative;
  justify-self: center;
  width: min(100%, 400px);
  margin: 0;
  --pr: -3deg;
}
.a-portrait__frame {
  position: relative;
  aspect-ratio: 3 / 4.4;
  border: 5px solid var(--ink);
  background: #222;
  transform: rotate(-2.4deg);
}
.a-portrait__frame::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  background: var(--pink);
  border: 5px solid var(--ink);
  transform: translate(22px, 20px) rotate(4deg);
}
.a-portrait__frame::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -2;
  background: var(--ink);
  transform: translate(34px, 36px) rotate(4deg);
}
.a-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: contrast(1.06); }
.a-portrait .tape--a { top: -12px; left: 18%; transform: rotate(-8deg); }
.a-portrait .tape--b { bottom: -10px; right: 12%; transform: rotate(6deg); }
/* in the flow, below the stacked shadow layers (they hang ~46px under the frame) */
.a-portrait__note {
  position: relative;
  left: -6px;
  margin-top: 66px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.2rem;
}
.a-portrait__note svg { width: 54px; height: 40px; flex: none; }

.a-hero__text { padding-bottom: 10px; }
.a-title { margin: 0; }
.a-title .wm { font-size: clamp(4.6rem, 2rem + 11vw, 12.5rem); --lx: .55; --ly: .83; --step: clamp(1.2px, .2vw, 3px); }
.a-lead {
  margin-top: clamp(22px, 4vh, 44px);
  max-width: 13ch;
  font-weight: 760;
  font-size: clamp(2.3rem, 1.2rem + 4.2vw, 5rem);
  line-height: .98;
  letter-spacing: -.025em;
}

/* ---------- the statement ---------- */
.statement {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(40px, 10vh, 120px) var(--gutter) clamp(40px, 8vh, 90px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 5vw, 80px);
}
.statement > * { grid-column: 2; max-width: var(--measure); }
.ink {
  margin: 0 0 1.25em;
  font-size: clamp(1.2rem, 1.02rem + .55vw, 1.5rem);
  line-height: 1.55;
  font-weight: 460;
}
.ink .w { color: #b7b1c2; transition: color .45s var(--ease-out); }
.ink .w.on { color: var(--ink); }

.breakout {
  grid-column: 1 / -1 !important;
  max-width: none !important;
  position: relative;
  margin: clamp(50px, 10vh, 120px) 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 1.4rem + 7.2vw, 8.6rem);
  line-height: .86;
  text-transform: uppercase;
  text-align: center;
}
.breakout__text { position: relative; z-index: 1; }
.breakout svg {
  position: absolute;
  z-index: 0;
  left: 6%;
  width: 88%;
  height: .5em;
  top: 58%;
  overflow: visible;
}
.breakout svg path { fill: none; stroke: var(--halo); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }

.crooked {
  margin: clamp(48px, 9vh, 100px) 0 .7em;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 5rem);
  line-height: .92;
  text-transform: uppercase;
  max-width: 16ch !important;
}
.crooked .cw { display: inline-block; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); margin-right: .18em; }
.crooked--rules { color: var(--red); margin-left: clamp(-180px, -12vw, 0px); }
.crooked--rules .cw:nth-child(3n+2) { color: var(--ink); }
.crooked--explain { color: var(--violet); }
.crooked--explain .cw:nth-child(4n+3) { color: var(--ink); }

.interrupt .stop {
  display: inline-block;
  padding: 0 .22em;
  border-radius: 4px;
  color: var(--primer);
  background: var(--red-deep);
}
.interrupt .stop .w { color: inherit !important; }
.interrupt.is-in .stop { animation: jolt .6s var(--ease-pop) .2s both; }
@keyframes jolt { 0% { transform: none; } 30% { transform: scale(1.35) rotate(-7deg); } 100% { transform: rotate(-2deg); } }
.interrupt .twice { position: relative; display: inline-block; }
.interrupt.is-in .twice { animation: double 1.1s steps(1) .7s 2 both; }
@keyframes double {
  0%   { text-shadow: 5px -3px 0 rgba(255, 62, 138, .85), -4px 3px 0 rgba(36, 72, 230, .7); }
  50%  { text-shadow: none; }
  100% { text-shadow: 3px -2px 0 rgba(255, 62, 138, .6), -2px 2px 0 rgba(36, 72, 230, .5); }
}

/* the list: every line is a sticker slapped on the wall */
.doing {
  grid-column: 1 / -1 !important;
  max-width: none !important;
  display: grid;
  grid-template-columns: subgrid;
  margin: clamp(56px, 10vh, 120px) 0;
}
.doing__title {
  grid-column: 2;
  max-width: var(--measure);
  font-weight: 760;
  font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.doing__list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 22px 20px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.doing__list li {
  --bg: var(--halo);
  --fg: var(--ink);
  padding: .32em .6em .4em;
  font-family: var(--display);
  font-weight: 850;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 3.2rem);
  line-height: .95;
  color: var(--fg);
  background: var(--bg);
  border: 4px solid var(--ink);
  border-radius: 8px;
  box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(var(--r, -1deg)) translateY(var(--y, 0));
}
.doing__list li:nth-child(8n+1) { --bg: var(--halo); --r: -2.2deg; }
.doing__list li:nth-child(8n+2) { --bg: var(--pink); --r: 1.6deg; --y: 8px; }
.doing__list li:nth-child(8n+3) { --bg: var(--teal); --r: -.8deg; }
.doing__list li:nth-child(8n+4) { --bg: var(--cobalt); --fg: var(--primer); --r: 2.4deg; --y: -6px; }
.doing__list li:nth-child(8n+5) { --bg: #ffb35c; --r: -1.8deg; --y: 10px; }
.doing__list li:nth-child(8n+6) { --bg: var(--jungle); --r: 1deg; }
.doing__list li:nth-child(8n+7) { --bg: var(--violet); --fg: var(--primer); --r: -2.6deg; --y: 4px; }
.doing__list li:nth-child(8n+8) { --bg: var(--primer); --r: 1.4deg; --y: -4px; }
.js .doing__list li { opacity: 0; transform: rotate(calc(var(--r) - 9deg)) translateY(-30px) scale(1.4); }
.js .doing.is-in .doing__list li {
  opacity: 1;
  transform: rotate(var(--r, -1deg)) translateY(var(--y, 0));
  transition: transform .55s var(--ease-pop) var(--d, 0ms), opacity .15s var(--d, 0ms);
}

/* ---------- finale: three beats ---------- */
.finale {
  position: relative;
  padding: clamp(90px, 18vh, 200px) var(--gutter);
  background: var(--ink);
  color: var(--primer);
  overflow: hidden;
  --focus: var(--halo);
}
.finale__lines {
  display: grid;
  gap: .04em;
  max-width: 1320px;
  margin: 0 auto;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.4rem, 1.4rem + 9vw, 11rem);
  line-height: .86;
  text-transform: uppercase;
}
.finale__lines span { display: block; }
.finale__lines span:nth-child(2) { color: var(--pink); padding-left: 8vw; }
.finale__lines span:nth-child(3) {
  padding-left: 16vw;
  color: var(--ink);
  -webkit-text-stroke: .025em var(--primer);
  transition: color .6s var(--ease-out) 1.3s;
}
.finale.is-in .finale__lines span:nth-child(3) { color: var(--halo); -webkit-text-stroke-color: var(--halo); }
.js .finale__lines span { opacity: 0; transform: translateX(-60px) skewX(-8deg); }
.js .finale.is-in .finale__lines span { opacity: 1; transform: none; transition: transform .6s var(--ease-pop) var(--d), opacity .2s var(--d); }
.finale__lines span:nth-child(1) { --d: 0ms; }
.finale__lines span:nth-child(2) { --d: 287ms; }
.finale__lines span:nth-child(3) { --d: 430ms; }
.finale__ctas { display: flex; flex-wrap: wrap; gap: 18px; max-width: 1320px; margin: clamp(40px, 7vh, 70px) auto 0; }
.finale__ctas .sticker { --sh: var(--halo); }

@media (max-width: 860px) {
  .a-hero { grid-template-columns: 1fr; padding-top: 104px; }
  .a-hero__text { order: -1; }
  .a-portrait { width: min(78%, 360px); margin-bottom: 12px; }
  .statement { grid-template-columns: 1fr; }
  .statement > * { grid-column: 1; }
  .crooked--rules { margin-left: 0; }
  .doing__title { grid-column: 1; }
  .finale__lines span:nth-child(2) { padding-left: 4vw; }
  .finale__lines span:nth-child(3) { padding-left: 8vw; }
}

@media (prefers-reduced-motion: reduce) {
  .ink .w { color: var(--ink); }
  .js .doing__list li, .js .finale__lines span { opacity: 1; transform: rotate(var(--r, 0deg)); }
  .finale__lines span:nth-child(3) { color: var(--halo); }
}