:root { --acid: #d7ff52; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #172019; color: white; font-family: "DM Sans", sans-serif; }
a { color: inherit; text-decoration: none; }
header { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; padding: 24px 30px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; mix-blend-mode: difference; }
.about-logo { font: 700 32px/1 "Syne", sans-serif; letter-spacing: -.08em; }
.about-logo span { color: var(--acid); }
header p, .back-link { margin: 0; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.back-link { justify-self: end; display: flex; gap: 12px; }
.about-film { position: relative; height: 100svh; min-height: 620px; overflow: hidden; }
video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,15,9,.65), rgba(7,15,9,.08) 65%), linear-gradient(0deg, rgba(7,15,9,.38), transparent 45%); }
.about-copy { position: absolute; z-index: 3; left: 6vw; bottom: 12vh; width: min(720px, 76vw); }
.eyebrow { margin: 0 0 18px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 0; font: 600 clamp(60px, 8.4vw, 125px)/.84 "Syne", sans-serif; letter-spacing: -.08em; }
em { font-family: Georgia, serif; font-weight: 400; }
.about-intro { max-width: 510px; margin: 30px 0 0; font-size: 14px; line-height: 1.65; }
.film-footer { position: absolute; z-index: 4; bottom: 25px; left: 30px; right: 30px; display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.film-footer span:nth-child(2) { justify-self: center; }
.progress { justify-self: end; width: 130px; height: 1px; background: rgba(255,255,255,.4); overflow: hidden; }
.progress i { display: block; width: 100%; height: 100%; background: var(--acid); transform-origin: left; animation: progress 30s linear infinite; }

.sculpture { position: absolute; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: multiply; }
.sculpture svg { width: 100%; height: 100%; overflow: visible; }
.sculpture path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 2200; stroke-dashoffset: 2200; }
.pencil-pencil path { stroke: #e4ff48; stroke-width: 3.2; opacity: .88; filter: drop-shadow(1px 1px 0 rgba(73,56,20,.28)); }
.pencil-echo path { stroke: #f0bd32; stroke-width: 1.25; opacity: .72; transform: translate(1px, -1px); }
.sculpture-one { width: 29vw; height: 35vw; min-width: 270px; min-height: 330px; right: 15vw; bottom: 7vh; animation: appear-one 30s ease-in-out infinite; }
.sculpture-one .pencil-pencil path { animation: draw-one 30s ease-in-out infinite; }
.sculpture-one .pencil-echo path { stroke: #d6a029; animation: draw-one-echo 30s ease-in-out infinite; }
.sculpture-two { width: 40vw; height: 28vw; min-width: 360px; min-height: 250px; right: 4vw; bottom: 14vh; animation: appear-two 30s ease-in-out infinite; }
.sculpture-two .pencil-pencil path { stroke: #df6949; animation: draw-two 30s ease-in-out infinite; }
.sculpture-two .pencil-echo path { stroke: #8f3e37; animation: draw-two-echo 30s ease-in-out infinite; }
.sculpture-three { width: 30vw; height: 30vw; min-width: 300px; min-height: 300px; right: 25vw; bottom: 5vh; animation: appear-three 30s ease-in-out infinite; }
.sculpture-three .pencil-pencil path { stroke: #6c72e9; animation: draw-three 30s ease-in-out infinite; }
.sculpture-three .pencil-echo path { stroke: #e18db8; animation: draw-three-echo 30s ease-in-out infinite; }

@keyframes appear-one { 0%,10%,34%,100% { opacity:0 } 16%,27% { opacity:.72 } }
@keyframes draw-one { 0%,10% { stroke-dashoffset:2200 } 22%,34%,100% { stroke-dashoffset:0 } }
@keyframes draw-one-echo { 0%,12% { stroke-dashoffset:2200 } 25%,100% { stroke-dashoffset:0 } }
@keyframes appear-two { 0%,39%,66%,100% { opacity:0 } 46%,59% { opacity:.72 } }
@keyframes draw-two { 0%,39% { stroke-dashoffset:2200 } 53%,100% { stroke-dashoffset:0 } }
@keyframes draw-two-echo { 0%,42% { stroke-dashoffset:2200 } 56%,100% { stroke-dashoffset:0 } }
@keyframes appear-three { 0%,68%,96%,100% { opacity:0 } 76%,89% { opacity:.6 } }
@keyframes draw-three { 0%,68% { stroke-dashoffset:2200 } 82%,100% { stroke-dashoffset:0 } }
@keyframes draw-three-echo { 0%,71% { stroke-dashoffset:2200 } 85%,100% { stroke-dashoffset:0 } }
@keyframes progress { from { transform: scaleX(0) } to { transform: scaleX(1) } }

.manifesto { padding: 95px 4vw 130px; background: #ede9dc; color: #172019; }
.manifesto-header { display: grid; grid-template-columns: 1fr 2fr; gap: 5vw; padding-bottom: 17px; border-bottom: 1px solid rgba(23,32,25,.28); text-transform: uppercase; font-size: 9px; letter-spacing: .17em; line-height: 1.6; }
.manifesto-header p { margin: 0; }
.manifesto-location { display: flex; justify-content: space-between; gap: 40px; }
.manifesto h2 { margin: 70px 0 85px; font: 600 clamp(90px, 17vw, 245px)/.78 "Syne", sans-serif; letter-spacing: -.09em; }
.manifesto h2 em { color: #bc4f32; }
.manifesto-body { margin-left: 25%; }
.manifesto-lead { max-width: 980px; margin: 0 0 80px; font: 500 clamp(26px, 4vw, 58px)/1.08 "Syne", sans-serif; letter-spacing: -.055em; }
.manifesto-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; max-width: 980px; }
.manifesto-columns p { margin: 0; font-size: 14px; line-height: 1.75; }
.manifesto-columns h3 { margin: 0 0 13px; font-size: 10px; letter-spacing: .17em; text-transform: uppercase; }
.intensity { margin: 130px 0 0 -33.333%; padding-top: 18px; border-top: 1px solid rgba(23,32,25,.28); }
.manifesto-index { margin: 0; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.intensity blockquote { margin: 70px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; font: 600 clamp(43px, 6.8vw, 100px)/.92 "Syne", sans-serif; letter-spacing: -.075em; }
.intensity blockquote em { color: #bc4f32; }
.artist-contact { margin: 130px 0 0 -33.333%; padding: 25px 0; border-top: 1px solid rgba(23,32,25,.65); border-bottom: 1px solid rgba(23,32,25,.65); display: flex; align-items: end; justify-content: space-between; gap: 30px; transition: padding .25s, color .25s; }
.artist-contact:hover { padding-left: 16px; color: #bc4f32; }
.artist-contact span { font: 600 clamp(28px, 4.5vw, 68px)/.98 "Syne", sans-serif; letter-spacing: -.065em; }
.artist-contact b { flex: 0 0 auto; padding-bottom: 5px; font-size: 9px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; }

@media (max-width: 700px) {
  header { padding: 18px; grid-template-columns: 1fr 1fr; }
  header p { display: none; }
  .about-copy { left: 18px; bottom: 16vh; width: calc(100vw - 36px); }
  h1 { font-size: clamp(54px, 17vw, 84px); }
  .about-intro { font-size: 12px; max-width: 90%; }
  .film-footer { left: 18px; right: 18px; grid-template-columns: 1fr 1fr; }
  .film-footer span:nth-child(2) { display: none; }
  .sculpture-one, .sculpture-two, .sculpture-three { right: -10vw; }
  .manifesto { padding: 70px 18px 90px; }
  .manifesto-header, .manifesto-columns, .intensity blockquote { grid-template-columns: 1fr; }
  .manifesto-location { flex-direction: column; gap: 8px; }
  .manifesto h2 { margin: 55px 0 65px; font-size: clamp(74px, 27vw, 125px); }
  .manifesto-body { margin-left: 0; }
  .manifesto-lead { margin-bottom: 55px; }
  .manifesto-columns { gap: 38px; }
  .intensity { margin: 80px 0 0; }
  .intensity blockquote { margin-top: 45px; gap: 40px; }
  .artist-contact { margin: 80px 0 0; align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .sculpture-one { opacity: .5; }
  .sculpture, .sculpture path, .sculpture circle, .progress i { animation: none; }
}