/* 1238 St. James Place — site styles.
   Linked from "1238 St James Place.dc.html". The base layer holds fonts, keyframes and shared
   components; everything after it is per-element layout, grouped by page. Unlayered rules win
   over the base layer regardless of specificity, the same way the old inline styles did. */

@layer base {
  /* Brand display faces: use the licensed files when installed, fall back to the closest Google faces. */
  @font-face { font-family: "Dripping Marker"; src: local("A Dripping Marker"), local("ADrippingMarker"); }
  @font-face { font-family: "Tag"; src: url("../../assets/type/aAnotherTag.otf") format("opentype"), url("../../assets/type/aAnotherTag.ttf") format("truetype"), local("Another Tag"); font-display: swap; }
  html, body { margin: 0; padding: 0; background: #F4F4F0; color: #040A00; font-family: "Josefin Sans", sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: #040A00; }
  a:hover { color: #2D4649; }
  @keyframes sjpDraw { to { stroke-dashoffset: 0; } }
  @keyframes sjpRatio { 0% { opacity: 0; color: #ffffff; } 18% { opacity: 1; color: #ffffff; } 100% { opacity: 1; color: #040A00; } }
  @keyframes sjpWrite { from { clip-path: inset(-40% 100% -40% -15%); } 22% { clip-path: inset(-40% 74% -40% -15%); } 46% { clip-path: inset(-40% 46% -40% -15%); } 68% { clip-path: inset(-40% 30% -40% -15%); } 86% { clip-path: inset(-40% 10% -40% -15%); } to { clip-path: inset(-40% -15% -40% -15%); } }
  @keyframes sjpSwipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes sjpNib { from { opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } to { opacity: 0; } }
  @keyframes sjpNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
  /* Writer pages: a 16x9 artboard that fits the window. Positions come straight off the
     1920x1080 mock-ups: 1cqw = 19.2px of the mock, so px / 19.2 = cqw. */
  .wr-stage { position: absolute; inset: 0; margin: auto; width: min(100vw, 177.78vh); height: min(56.25vw, 100vh); container-type: size; }
  .wr-stage > img, .wr-stage > svg, .wr-stage > h2, .wr-stage > div, .wr-stage > p, .wr-stage > span, .wr-ph { position: absolute; margin: 0; }
  .wr-label { font-family: 'Architects Daughter', cursive; font-style: italic; font-size: 1.035cqw; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: #040A00; }
  .wr-body { font-family: 'Josefin Sans', sans-serif; font-weight: 400; font-size: 1.094cqw; line-height: 1.05; letter-spacing: 0.025em; color: #040A00; white-space: nowrap; }
  .wr-hand { font-family: 'Architects Daughter', cursive; font-size: 1.146cqw; line-height: 1.72; color: #040A00; white-space: nowrap; transform-origin: left top; }
  .wr-body a, .wr-hand a { text-decoration: underline; text-underline-offset: 0.15em; }
  .wr-hl { background: url('../../assets/sections/Writer-Section/highlight-cyan.png') 0 0 / 100% 100% no-repeat; mix-blend-mode: multiply; clip-path: inset(0 100% 0 0); pointer-events: none; }
  .wr-ph { box-sizing: border-box; display: grid; place-items: center; outline: 2px dashed rgba(25,39,41,0.35); outline-offset: -2px; font-family: 'Architects Daughter', cursive; font-size: 0.8cqw; color: #192729; opacity: 0.8; }
  /* Media icons: tell the visitor what kinds of media a project holds. */
  .wr-rail { position: absolute; inset: 0; pointer-events: none; }
  .wr-media { position: absolute; display: block; pointer-events: auto; }
  .wr-media img { display: block; width: 100%; height: 100%; }
  .wr-media::after { content: attr(data-tip); position: absolute; left: calc(100% + 0.8cqw); top: 50%; transform: translateY(-50%) rotate(-2deg) scale(0.9); transform-origin: left center; opacity: 0; transition: opacity .18s, transform .18s; pointer-events: none; white-space: nowrap; font-family: 'Architects Daughter', cursive; font-size: 0.95cqw; line-height: 1.2; color: #040A00; background: #F4F4F0; border: 1.5px solid #040A00; padding: 0.2em 0.6em; }
  .wr-media:hover::after, .wr-media:focus-visible::after { opacity: 1; transform: translateY(-50%) rotate(-2deg); }
  /* Medium cards: one card flips per scroll step; its arrow draws out from the description. */
  .wr-card { position: absolute; display: block; width: 9.0625cqw; height: 12.552cqw; perspective: 60cqw; mix-blend-mode: multiply; }
  .wr-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4,.1,.25,1); }
  .wr-flip img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }
  .wr-flip .wr-back { transform: rotateY(180deg); }
  [data-step="1"] [data-card="1"] .wr-flip, [data-step="2"] [data-card="2"] .wr-flip, [data-step="3"] [data-card="3"] .wr-flip { transform: rotateY(180deg); }
  /* Rollover: a linked card flips to its back while hovered (or keyboard-focused). */
  a.wr-card:hover .wr-flip, a.wr-card:focus-visible .wr-flip { transform: rotateY(180deg); }
  .wr-arrow { z-index: 2; pointer-events: none; clip-path: circle(0% at var(--ox) var(--oy)); transition: clip-path .3s ease-in; }
  [data-step="1"] [data-arrow="1"], [data-step="2"] [data-arrow="2"], [data-step="3"] [data-arrow="3"],
  :has(> [data-card="1"]:hover, > [data-card="1"]:focus-visible) > [data-arrow="1"], :has(> [data-card="2"]:hover, > [data-card="2"]:focus-visible) > [data-arrow="2"], :has(> [data-card="3"]:hover, > [data-card="3"]:focus-visible) > [data-arrow="3"] { clip-path: circle(150% at var(--ox) var(--oy)); transition: clip-path .8s cubic-bezier(.5,.1,.3,1) .3s; }
  .wr-desc { display: grid; }
  .wr-desc > span { grid-area: 1 / 1; opacity: 0; transition: opacity .3s; }
  [data-step="0"] .wr-desc > [data-desc="0"], [data-step="1"] .wr-desc > [data-desc="1"], [data-step="2"] .wr-desc > [data-desc="2"], [data-step="3"] .wr-desc > [data-desc="3"] { opacity: 1; }
  /* A card's blurb shows with its roll-over (flip and arrow) */
  :has(> [data-card]:hover, > [data-card]:focus-visible) > .wr-desc > span { opacity: 0; }
  :has(> [data-card="1"]:hover, > [data-card="1"]:focus-visible) > .wr-desc > [data-desc="1"] { opacity: 1; }
  :has(> [data-card="2"]:hover, > [data-card="2"]:focus-visible) > .wr-desc > [data-desc="2"] { opacity: 1; }
  :has(> [data-card="3"]:hover, > [data-card="3"]:focus-visible) > .wr-desc > [data-desc="3"] { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .wr-flip, .wr-arrow, .wr-desc > span { transition-duration: 0.01ms !important; transition-delay: 0s !important; } }
}

/* ===================== Page ===================== */
.page__box { height: 100vh; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; background: #F4F4F0; color: #040A00; font-family: 'Josefin Sans', sans-serif; position: relative; }

/* ===================== 00 Cover ===================== */
.cover__fold { box-sizing: border-box; position: relative; height: 100vh; overflow: hidden; display: grid; grid-template-columns: 62.5fr 37.5fr; transform-origin: top center; background: #ffffff url('../../assets/textures/paper.png') 0 0 / 256px 256px repeat; }
.cover__box { position: relative; overflow: hidden; background: #ffffff; }
.cover__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cover__mask { mask-type: alpha; }
.cover__path { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.cover__box-2 { position: absolute; left: 2.6vw; top: 0; bottom: 0; display: flex; gap: 0.5vw; align-items: center; }
.cover__box-3 { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; gap: 0.5em; white-space: nowrap; text-align: center; font-family: 'Josefin Sans', sans-serif; font-size: clamp(8px, 0.62vw, 12px); letter-spacing: 0.04em; color: #ffffff; line-height: 1.3; }
.cover__box-4 { align-self: center; height: 66vh; border-left: 0.5px solid #ffffff; }
.cover__box-5 { align-self: center; height: 66vh; border-left: 1px solid #ffffff; }
.cover__box-6 { display: grid; grid-template-rows: 30fr 70fr; min-width: 0; }
.cover__box-7 { background: #ffffff; padding: 0 5% 2vh 5%; display: flex; flex-direction: column; justify-content: flex-end; }
.cover__h1 { margin: 0; font-size: min(3.6vw, 6.4vh); line-height: 1.08; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; text-wrap: balance; font-family: 'Josefin Sans', sans-serif; }
.cover__box-8 { background: #FFFF02; position: relative; padding: 2.4vh 5% 5vh 5%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; column-gap: 2vw; }
.cover__box-9 { position: relative; width: 21vw; height: 21vh; display: grid; place-items: center; }
.cover__svg-2 { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: transform 0.6s cubic-bezier(.4,.1,.2,1); }
.cover__box-10 { position: relative; text-align: center; font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: min(2.2vw, 4vh); line-height: 1.1; color: #040A00; }
.cover__box-11 { opacity: 0; color: #ffffff; }
.cover__box-12 { writing-mode: vertical-rl; transform: rotate(180deg); align-self: start; font-family: 'Josefin Sans', sans-serif; font-size: min(1.6vw, 2.9vh); letter-spacing: 0.04em; text-transform: uppercase; color: #040A00; height: 201px; text-align: left; width: 26px; }
.cover__nav { grid-column: 1 / -1; grid-row: 3; align-self: end; display: grid; gap: min(1.2vh, 14px); font-family: 'Josefin Sans', sans-serif; font-size: min(2.2vw, 4vh); line-height: 1.15; }
.cover__link { display: block; width: 17vw; text-decoration: none; color: #040A00; cursor: pointer; border-bottom: 2px solid #040A00; line-height: 1; }
/* Scroll down */
.cover__button { position: absolute; right: 3vw; bottom: 5vh; background: none; border: 0; padding: 0; cursor: pointer; animation: sjpNudge 2.4s ease-in-out; }
.cover__scroll-arrow-mulhyu1x { display: block; width: min(8.6vw, 15vh); height: auto; }

/* ===================== 01 Welcome ===================== */
/* On the 1920x1080 artboard (.wr-stage), measured from welcome-section-16x9: 1cqw = 19.2px. */
.welcome__fold { box-sizing: border-box; position: relative; height: 100vh; overflow: hidden; transform-origin: top center; background: #F4F4F0 url('../../assets/textures/paper.png') 0 0 / 256px 256px repeat; }
/* Background: the dirty paper edge gives the page edge its texture: flush to the top-left corner of the page, full height. */
.welcome__dirty { position: absolute; left: 0; top: 0; height: 100%; width: auto; mix-blend-mode: multiply; pointer-events: none; }
/* Pencil sketch, waving */
.welcome__sketch { left: 68.542cqw; top: 12.396cqw; width: 30.729cqw; height: 29.635cqw; mix-blend-mode: multiply; opacity: 0.85; pointer-events: none; z-index: 0; }
/* Welcome */
.welcome__welcome { left: 7.552cqw; top: 5.365cqw; width: 11.406cqw; height: 4.844cqw; clip-path: inset(0 100% -18% 0); }
.welcome__stroke { left: 36.401cqw; top: 11.234cqw; width: 36.438cqw; height: 5.224cqw; background: url('../../marker-stroke-mulhshi1-dhrm.png') center / 100% 100% no-repeat; transform: rotate(1.32deg); opacity: 0.9; clip-path: inset(0 100% 0 0); pointer-events: none; z-index: 96; mix-blend-mode: multiply; }
/* YEEERP! */
.welcome__header { left: 29.688cqw; top: 2.865cqw; width: 33.75cqw; height: 12.865cqw; clip-path: inset(0 100% -18% 0); z-index: 97; }
.welcome__header img { display: block; width: 100%; height: 100%; }
/* yurp! */
.welcome__yurp { left: 55.313cqw; top: 12.76cqw; width: 6.927cqw; height: 4.115cqw; clip-path: inset(0 100% -18% 0); z-index: 98; }
/* Hi! */
.welcome__hi { left: 73.542cqw; top: 17.604cqw; width: 5.724cqw; height: 4.958cqw; clip-path: inset(0 100% -18% 0); }
.welcome__note { left: 60.932cqw; top: 39.683cqw; font-family: 'Architects Daughter', cursive; font-style: italic; font-size: 1.5701cqw; line-height: 1; letter-spacing: 0.04em; color: #F2584A; white-space: nowrap; transform: rotate(-3deg); clip-path: inset(0 100% -18% 0); }
.welcome__copy { left: 17.704cqw; top: 25.96cqw; font-family: 'Architects Daughter', cursive; font-size: 1.8873cqw; line-height: 1.356; color: #040A00; white-space: nowrap; transform: rotate(-1.5deg); transform-origin: left top; }
.welcome__box { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.welcome__copy-2 { position: absolute; margin: 0; font-family: 'Architects Daughter', cursive; font-size: 1.25cqw; line-height: 0.91; color: #040A00; white-space: nowrap; transform: rotate(-1.1deg); transform-origin: left top; pointer-events: auto; }
.welcome__copy-2:nth-child(1) { font-size: 1.2561cqw; left: 9.63cqw; top: 31.902cqw; }
.welcome__copy-2:nth-child(2) { font-size: 1.2445cqw; left: 8.698cqw; top: 37.918cqw; }
.welcome__copy-2:nth-child(3) { font-size: 1.25cqw; left: 7.912cqw; top: 42.588cqw; }
.welcome__copy-2:nth-child(4) { font-size: 1.2476cqw; left: 7.344cqw; top: 46.628cqw; }

/* ===================== 02 History ===================== */
/* On the 1920x1080 artboard (.wr-stage), measured from history 16x9. */
.history__fold { box-sizing: border-box; position: relative; height: 100vh; overflow: hidden; transform-origin: top center; background: #F4F4F0 url('../../assets/textures/paper.png') 0 0 / 256px 256px repeat; }
/* Background: the page edge sits in the top-left corner of the page itself, full height. */
.history__page { position: absolute; left: 0; top: 0; height: 100%; width: auto; mix-blend-mode: multiply; pointer-events: none; }
/* Pencil sketch, floating in a bedroom studio: native size */
.history__young-me-sketch { left: 3.021cqw; top: 7.865cqw; width: 56.979cqw; height: 45.573cqw; mix-blend-mode: multiply; opacity: 0.55; pointer-events: none; }
.history__stroke { left: 5.042cqw; top: 17.813cqw; width: 48.417cqw; height: 7.969cqw; background: url('../../marker-stroke-mulhdku0-zjrv.png') center / 100% 100% no-repeat; transform: rotate(-3.64deg); clip-path: inset(0 100% 0 0); pointer-events: none; z-index: 98; mix-blend-mode: multiply; }
/* Back in Da Dayz */
.history__header { left: 4.479cqw; top: 11.51cqw; width: 49.271cqw; height: 11.823cqw; clip-path: inset(0 100% -18% 0); z-index: 97; }
.history__header img { display: block; width: 100%; height: 100%; }
/* How it all started */
.history__how-it-all-started { left: 52.552cqw; top: 13.229cqw; width: 14.479cqw; height: 7.396cqw; clip-path: inset(0 100% -18% 0); }
.history__note { left: 23.471cqw; top: 20.49cqw; font-family: 'Architects Daughter', cursive; font-style: italic; font-size: 1.6548cqw; line-height: 1; color: #6B6B6B; white-space: nowrap; transform: rotate(-3deg); clip-path: inset(0 100% -18% 0); z-index: 99; }
/* The path */
.history__the { left: 37.5cqw; top: 19.375cqw; width: 7.604cqw; height: 4.427cqw; clip-path: inset(0 100% -18% 0); z-index: 99; }
.history__copy { left: 56.31cqw; top: 20.454cqw; font-family: 'Architects Daughter', cursive; font-size: 1.8858cqw; line-height: 1.38; color: #040A00; white-space: nowrap; transform: rotate(-4deg); transform-origin: left top; }
.history__copy-2 { left: 4.56cqw; top: 34.175cqw; font-family: 'Architects Daughter', cursive; font-size: 1.8167cqw; line-height: 1.6; color: #040A00; white-space: nowrap; transform: rotate(-22deg); transform-origin: left top; }
.history__box { left: 36.993cqw; top: 35.222cqw; display: grid; gap: 0.68em; font-family: 'Architects Daughter', cursive; font-size: 1.1511cqw; line-height: 1.357; color: #040A00; white-space: nowrap; transform: rotate(-0.5deg); transform-origin: left top; }
.history__copy-3 { margin: 0; }
.history__box-2 { left: 75.696cqw; top: 51.372cqw; font-family: 'Tag', 'Sedgwick Ave Display', cursive; font-size: 3.3398cqw; line-height: 1; color: #040A00; text-transform: uppercase; white-space: nowrap; transform: rotate(-6deg); clip-path: inset(0 100% -18% 0); }

/* ===================== 03 Writer · Intro ===================== */
.writer__fold { box-sizing: border-box; position: relative; height: 100vh; overflow: hidden; transform-origin: top center; background: #F4F4F0 url('../../assets/textures/paper.png') 0 0 / 256px 256px repeat; }
.writer__copy { left: 38.3cqw; top: 4.45cqw; font-size: 1.72cqw; font-style: italic; color: #4A4A4A; transform: rotate(-3deg); clip-path: inset(0 100% -18% 0); }
.writer__copy-2 { left: 3.7cqw; top: 14.1cqw; font-size: 1.16cqw; line-height: 1.85; transform: rotate(1.2deg); }
.writer__note { display: block; }
.writer__note-2 { display: block; padding-left: 0.26cqw; }
.writer__note-3 { display: block; padding-left: 0.47cqw; }
.writer__note-4 { display: block; padding-left: 0.78cqw; margin-top: -0.625cqw; }
.writer__copy-3 { left: 50.51cqw; top: 19.565cqw; font-size: 1.17cqw; line-height: 1.85; transform: rotate(-1.5deg); }
.writer__title { left: 4.276cqw; top: 20.891cqw; width: 57.344cqw; height: 23.594cqw; clip-path: inset(0 100% -18% 0); z-index: 1; }
.writer__title img { display: block; width: 100%; height: 100%; }
/* Cyan swash across the tag */
.writer__swash { left: 5.417cqw; top: 34.583cqw; width: 67.552cqw; height: 13.49cqw; background: url('../../assets/sections/Writer-Section/highlight-cyan.png') 0 0 / 100% 100% no-repeat; mix-blend-mode: multiply; clip-path: inset(0 100% 0 0); z-index: 2; pointer-events: none; }
.writer__box { left: 10.677cqw; top: 38.281cqw; width: 5.938cqw; height: 4.167cqw; clip-path: inset(0 100% -18% 0); z-index: 3; }
.writer__box-2 { left: 29.531cqw; top: 38.438cqw; width: 4.844cqw; height: 2.656cqw; clip-path: inset(0 100% -18% 0); z-index: 3; }
.writer__box-3 { left: 44.01cqw; top: 39.167cqw; width: 7.031cqw; height: 3.802cqw; clip-path: inset(0 100% -18% 0); z-index: 3; }
.writer__copy-4 { left: 50.95cqw; top: 45cqw; font-size: 1.172cqw; font-style: italic; line-height: 1.8; transform: rotate(-1.4deg); }
.writer__note-6 { padding-left: 0cqw; }
/* Line breaks that belong to one layout only (br-169: 16x9, br-43: 4x3) */
.br-43 { display: none; }
.br-916 { display: none; }

/* ===================== 03 Writer · Memoir ===================== */
.writer-memoir__fold { box-sizing: border-box; position: relative; height: 100vh; overflow: hidden; transform-origin: top center; background: #F4F4F0 url('../../assets/textures/paper.png') 0 0 / 256px 256px repeat; }
.writer-memoir__note { left: 2.5cqw; top: 3.56cqw; }
.writer-memoir__stroke { left: 8.08cqw; top: 22.1cqw; width: 31.04cqw; height: 9.43cqw; }
.writer-memoir__copy { left: 10.99cqw; top: 16.96cqw; }
.writer-memoir__copy-2 { left: 10.99cqw; top: 24.61cqw; }
.writer-memoir__copy-3 { left: 10.99cqw; top: 33.01cqw; }
/* SH!T — Living on the L.A.M */
.writer-memoir__memoir { left: 46.875cqw; top: 4.64cqw; width: 30cqw; height: 40cqw; mix-blend-mode: multiply; }
/* Audio */
.writer-memoir__link { left: 2.55cqw; top: 39.22cqw; width: 3.49cqw; height: 3.49cqw; }
/* Written */
.writer-memoir__link-2 { left: 2.55cqw; top: 43.65cqw; width: 3.125cqw; height: 4.27cqw; }
/* Art */
.writer-memoir__link-3 { left: 2.92cqw; top: 48.65cqw; width: 2.24cqw; height: 4.53cqw; }

/* ===================== 03 Writer · Blak Pulp ===================== */
.writer-blak-pulp__fold { box-sizing: border-box; position: relative; height: 100vh; overflow: hidden; transform-origin: top center; background: #F4F4F0 url('../../assets/textures/paper.png') 0 0 / 256px 256px repeat; }
.writer-blak-pulp__note { left: 2.81cqw; top: 2.95cqw; }
/* Blak Pulp — Illustrated Entertainment */
.writer-blak-pulp__blak-pulp { left: 13.75cqw; top: 4.64cqw; width: 30cqw; height: 40cqw; mix-blend-mode: multiply; }
.writer-blak-pulp__stroke { left: 48.54cqw; top: 28.85cqw; width: 28.39cqw; height: 6.29cqw; }
.writer-blak-pulp__copy { left: 51.51cqw; top: 11.11cqw; font-size: 0.9375cqw; line-height: 1; letter-spacing: 0.005em; }
.writer-blak-pulp__copy-2 { left: 51.51cqw; top: 30.64cqw; font-size: 0.9375cqw; line-height: 1; letter-spacing: 0.005em; }
.writer-blak-pulp__copy-3 { left: 51.51cqw; top: 36.48cqw; font-size: 0.9375cqw; line-height: 1; letter-spacing: 0.005em; }
/* Audio */
.writer-blak-pulp__link { left: 2.55cqw; top: 39.22cqw; width: 3.49cqw; height: 3.49cqw; }
/* Written */
.writer-blak-pulp__link-2 { left: 2.55cqw; top: 43.65cqw; width: 3.125cqw; height: 4.27cqw; }
/* Art */
.writer-blak-pulp__link-3 { left: 2.92cqw; top: 48.65cqw; width: 2.24cqw; height: 4.53cqw; }

/* ===================== 03 Writer · Medium ===================== */
.writer-medium__fold { box-sizing: border-box; position: relative; height: 100vh; overflow: hidden; transform-origin: top center; background: #F4F4F0 url('../../assets/textures/paper.png') 0 0 / 256px 256px repeat; }
.writer-medium__note { left: 2.13cqw; top: 3cqw; }
.writer-medium__copy { left: 25.89cqw; top: 3.24cqw; letter-spacing: 0.02em; }
/* Medium — Select Articles */
.writer-medium__medium { left: 42.34cqw; top: 8.07cqw; width: 17.45cqw; height: 24.375cqw; mix-blend-mode: multiply; }
.writer-medium__svg { left: 42.81cqw; top: 31.67cqw; width: 23.54cqw; height: 2.19cqw; overflow: visible; }
.writer-medium__copy-2 { left: 37.34cqw; top: 33.78cqw; }
.writer-medium__copy-3 { left: 43.07cqw; top: 33.7cqw; font-size: 0.963cqw; font-style: italic; letter-spacing: 0.04em; line-height: 1.2; transform: rotate(-1.8deg); }
/* The article blurbs wrap in a set measure (em, so the lines break the same at every breakpoint) */
.writer-medium__copy-3 > [data-desc]:not([data-desc="0"]) { white-space: normal; width: 46em; }
.writer-medium__arrow-good-projects { --ox: 80.7%; --oy: 21.3%; left: 2.1cqw; top: 29.5cqw; width: 43.27cqw; height: 28.49cqw; }
.writer-medium__arrow-self-regard { --ox: 60%; --oy: 16%; left: 46.56cqw; top: 31.92cqw; width: 19.38cqw; height: 21.94cqw; }
.writer-medium__arrow-vincent { --ox: 19.5%; --oy: 23.3%; left: 56.935cqw; top: 25.98cqw; width: 60.3cqw; height: 32.67cqw; }
.writer-medium__link { left: 16.25cqw; top: 42.5cqw; }
.writer-medium__link-2 { left: 45.83cqw; top: 37.4cqw; }
.writer-medium__link-3 { left: 81.315cqw; top: 42.5cqw; }
/* Written */
.writer-medium__link-4 { left: 3.28cqw; top: 49.01cqw; width: 3.125cqw; height: 4.27cqw; }

/* ===================== 04 Artist ===================== */
/* One long page: the stage keeps the mock-ups' 1920 x 5208 proportions, so 1cqw = 19.2px of the mock. */
.artist__fold { box-sizing: border-box; position: relative; min-height: 100vh; overflow: clip; background: #F4F4F0 url('../../assets/textures/paper.png') 0 0 / 256px 256px repeat; }
.ar-stage { position: relative; margin: 0 auto; width: min(100vw, 177.78vh); aspect-ratio: 1920 / 5208; container-type: inline-size; }
.ar-stage > img, .ar-stage > p, .ar-stage > h2, .ar-stage > span, .ar-stage > svg, .ar-stage > div { position: absolute; margin: 0; }
.ar-stage > img { display: block; }
.artist__mouf > * { position: absolute; display: block; max-width: none; }
.ar-defs { width: 0; height: 0; overflow: hidden; }
.artist__tag img { display: block; width: 100%; height: 100%; }
.ar-hand { font-family: 'Architects Daughter', cursive; color: #040A00; white-space: nowrap; transform-origin: left top; }
.artist__xfr-cue { pointer-events: none; }
.ar-line { opacity: 0.8; mix-blend-mode: multiply; pointer-events: none; }
/* XFR annotation: once the image has landed (data-annot-on on the Artist fold) the notes are
   added by hand, in order: name writes in, description writes itself line by line, the tombstone
   is doodled, and the arrow is drawn last, from the tombstone to the image. */
@keyframes arWriteUp { from { clip-path: inset(-15% -40% 100% -40%); } 22% { clip-path: inset(-15% -40% 74% -40%); } 46% { clip-path: inset(-15% -40% 46% -40%); } 68% { clip-path: inset(-15% -40% 30% -40%); } 86% { clip-path: inset(-15% -40% 10% -40%); } to { clip-path: inset(-15% -40% -15% -40%); } }
@keyframes arFill { to { fill-opacity: 1; } }
@keyframes arShow { to { opacity: 1; } }
[data-annot="name"] { clip-path: inset(-15% -40% 100% -40%); }
[data-annot="desc"] > span { display: block; clip-path: inset(-40% 100% -40% -15%); }
[data-annot="grave"] path { stroke-dasharray: 1000; stroke-dashoffset: 1000; fill-opacity: 0; }
[data-annot="grave"] text { opacity: 0; }
[data-annot="arrow"] .ar-arrow-pen { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
[data-annot-on] [data-annot="name"] { animation: arWriteUp 0.6s cubic-bezier(.35,.1,.25,1) 0.1s forwards; }
[data-annot-on] [data-annot="desc"] > span { animation: sjpWrite 0.4s cubic-bezier(.35,.1,.25,1) forwards; }
[data-annot-on] [data-annot="desc"] > span:nth-child(1) { animation-delay: 0.5s; }
[data-annot-on] [data-annot="desc"] > span:nth-child(2) { animation-delay: 0.8s; }
[data-annot-on] [data-annot="desc"] > span:nth-child(3) { animation-delay: 1.1s; }
[data-annot-on] [data-annot="desc"] > span:nth-child(4) { animation-delay: 1.4s; }
[data-annot-on] [data-annot="desc"] > span:nth-child(5) { animation-delay: 1.7s; }
[data-annot-on] [data-annot="grave"] .g-stone { animation: sjpDraw 0.6s cubic-bezier(.5,.1,.4,1) 2s forwards, arFill 0.3s ease 2.5s forwards; }
[data-annot-on] [data-annot="grave"] .g-line { animation: sjpDraw 0.25s ease 2.5s forwards; }
[data-annot-on] [data-annot="grave"] text { animation: arShow 0.3s ease 2.6s forwards; }
[data-annot-on] [data-annot="grave"] .g-grass { animation: sjpDraw 0.3s ease 2.7s forwards, arFill 0.25s ease 2.95s forwards; }
[data-annot-on] [data-annot="arrow"] .ar-arrow-pen { animation: sjpDraw 0.9s cubic-bezier(.5,.05,.35,1) 2.6s forwards; }
@media (prefers-reduced-motion: reduce) { [data-annot], [data-annot] > span { clip-path: none !important; } [data-annot] path, [data-annot] .ar-arrow-pen { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; } [data-annot] text { opacity: 1 !important; } }
/* Media rail: sticks to the bottom-left of the screen while the page scrolls; switches to Written over the XFR. */
.ar-rail { position: sticky; top: 0; height: 0; z-index: 6; }
.ar-rail .wr-media { position: absolute; top: calc(100vh - 6.51cqw); }
.ar-rail__art { left: 2.708cqw; width: 2.24cqw; height: 4.531cqw; }
.ar-rail__written { left: 2.604cqw; width: 3.125cqw; height: 4.271cqw; display: none !important; }
[data-media="written"] .ar-rail__art { display: none !important; }
[data-media="written"] .ar-rail__written { display: block !important; }
/* Mouf: video fades out and the finished character fades in once the time-lapse runs out. */
/* Only a 40%-wide window of the frame shows, centred on the Mouf sketch (45-85% of the frame); the app's tool wheel, top bar and labels sit outside it. */
.artist__mouf-video { -webkit-mask-image: linear-gradient(to right, transparent 43%, #000 47%, #000 83%, transparent 87%), linear-gradient(to bottom, transparent 11%, #000 15%, #000 82%, transparent 86%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 43%, #000 47%, #000 83%, transparent 87%), linear-gradient(to bottom, transparent 11%, #000 15%, #000 82%, transparent 86%); mask-composite: intersect; }
[data-mouf][data-done] .artist__mouf-video { opacity: 0; }
[data-mouf][data-done] .artist__mouf-final { opacity: 1; }
/* Scroll reveals (folds.js adds .is-in when each piece comes into view). */
[data-reveal="swipe"] { clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.3,.6,.25,1); }
[data-reveal="swipe-left"] { clip-path: inset(0 0 0 100%); transition: clip-path 1s cubic-bezier(.4,.1,.3,1) .5s; }
[data-reveal="fade"] { opacity: 0; transition: opacity .9s ease .6s; }
[data-reveal="draw"] path { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset .9s cubic-bezier(.6,.05,.3,1); }
[data-reveal="draw"] path + path { transition-delay: .8s; transition-duration: .3s; }
[data-reveal="turn"] { opacity: 0.35; transform: translate(0.286cqw, -8.802cqw) rotate(-90deg) scale(1.099); transition: transform 1.4s cubic-bezier(.4,.1,.2,1), opacity 1.4s ease; }
[data-reveal="swipe"].is-in, [data-reveal="swipe-left"].is-in { clip-path: inset(0 0 0 0); }
[data-reveal="fade"].is-in { opacity: 1; }
[data-reveal="draw"].is-in path { stroke-dashoffset: 0; }
[data-reveal="turn"].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal] path, .artist__mouf-video, .artist__mouf-final { transition-duration: 0.01ms !important; transition-delay: 0s !important; } }
/* Mouf shape-design video, faded into the paper on every side */
.artist__mouf { left: 0cqw; top: 0cqw; width: 67.708cqw; height: 56.25cqw; }
/* brightness lifts the video's off-white paper to pure white, so multiply leaves no grey patch under it */
.artist__mouf-video { left: -44.943cqw; top: -3.244cqw; width: 108.181cqw; height: 81.136cqw; object-fit: fill; mix-blend-mode: multiply; filter: brightness(1.04); transition: opacity 1.6s ease; }
/* Final Mouf: crossfades in as the video ends */
.artist__mouf-final { left: 4.688cqw; top: 7.344cqw; width: 40.781cqw; height: 61.719cqw; opacity: 0; transition: opacity 1.6s ease; pointer-events: none; z-index: 2; }
/* ARTIST tag */
.artist__tag { left: 6.667cqw; top: 1.042cqw; width: 21.302cqw; height: 10.208cqw; clip-path: inset(0 100% -18% 0); z-index: 3; }
.artist__swash { left: -0.729cqw; top: 7.078cqw; width: 38.698cqw; height: 6cqw; background: url('../../assets/sections/Writer-Section/highlight-cyan.png') 0 0 / 100% 100% no-repeat; transform: rotate(-6.6deg); clip-path: inset(0 100% 0 0); mix-blend-mode: multiply; z-index: 2; pointer-events: none; }
.artist__line-hero { left: 5.625cqw; top: 10.677cqw; width: 0.729cqw; height: 16.146cqw; }
.artist__tagline { left: 39.479cqw; top: 7.813cqw; font-size: 1.547cqw; color: #4A4A4A; transform: rotate(-2.5deg); clip-path: inset(0 100% -18% 0); }
.artist__body { left: 52.604cqw; top: 12.135cqw; font-family: 'Josefin Sans', sans-serif; font-size: 0.818cqw; line-height: 1.28; letter-spacing: 0.01em; color: #040A00; white-space: nowrap; }
.artist__cap-mouf { left: 46.667cqw; top: 26.042cqw; font-size: 0.828cqw; }
.artist__cap-tools { left: 46.354cqw; top: 35.938cqw; font-size: 0.911cqw; line-height: 1.35; transform: rotate(-4deg); }
/* Epoch Primordial wraparound cover (cropped from the top, as in the mock-up) */
.artist__epoch { left: 40.833cqw; top: 52.5cqw; width: 54.688cqw; height: 34.844cqw; object-fit: cover; object-position: 50% 100%; }
.artist__bracket-epoch { left: 8.385cqw; top: 67.656cqw; width: 29.948cqw; height: 6.719cqw; }
.artist__copy-epoch { left: 11.719cqw; top: 71.25cqw; font-size: 0.854cqw; line-height: 1.34; }
.artist__copy-epoch-2 { left: 11.771cqw; top: 75.625cqw; font-size: 0.854cqw; line-height: 1.34; }
.artist__cap-epoch { left: 38.333cqw; top: 72.656cqw; font-size: 0.833cqw; writing-mode: vertical-rl; }
.artist__label { left: 2.604cqw; top: 115.417cqw; }
/* Godfist: Black Light poster */
.artist__godfist { left: 6.615cqw; top: 106.146cqw; width: 31.042cqw; height: 40.729cqw; object-fit: cover; object-position: 50% 100%; mix-blend-mode: multiply; }
.artist__line-god-l { left: 5.729cqw; top: 103.646cqw; width: 0.729cqw; height: 48.073cqw; }
.artist__line-god-r { left: 37.083cqw; top: 103.646cqw; width: 0.729cqw; height: 41.875cqw; }
.artist__cap-godfist { left: 37.865cqw; top: 125.99cqw; font-size: 0.885cqw; writing-mode: vertical-rl; }
.artist__note-godfist { left: 24.896cqw; top: 146.875cqw; font-size: 1.042cqw; line-height: 1.4; transform: rotate(12deg); }
.artist__arrow-godfist { left: 17.188cqw; top: 148.177cqw; width: 14.323cqw; height: 9.896cqw; overflow: visible; }
.artist__copy-brooklyn { left: 48.021cqw; top: 132.083cqw; font-size: 1.031cqw; line-height: 1.5; }
.artist__cap-brooklyn { left: 42.448cqw; top: 148.542cqw; font-size: 1.094cqw; writing-mode: vertical-rl; transform: rotate(180deg); transform-origin: center; }
/* Brooklyn Bat: alternate cover */
.artist__brooklyn { left: 44.427cqw; top: 138.542cqw; width: 47.813cqw; height: 73.906cqw; z-index: 2; }
.artist__line-brook-l { left: 43.646cqw; top: 132.552cqw; width: 0.729cqw; height: 36.875cqw; }
.artist__line-brook-r { left: 91.823cqw; top: 132.292cqw; width: 0.729cqw; height: 6.25cqw; }
.artist__cap-tech { left: 46.667cqw; top: 212.969cqw; font-size: 0.885cqw; line-height: 1.25; }
/* XFR column: pinned from Artist03 to the end of the page, so once it rotates into place it stays put */
.artist__xfr-hold { left: 0cqw; top: 171.354cqw; width: 46.875cqw; height: 99.896cqw; pointer-events: none; z-index: 1; }
.artist__xfr-pin { position: sticky; top: -18.49cqw; width: 100%; height: 68.229cqw; }
.artist__xfr-pin > * { position: absolute; margin: 0; display: block; }
.artist__cap-xfr, .artist__cap-xfr-2, .artist__cap-tech-2 { left: 2.865cqw; top: 26.25cqw; font-size: 0.964cqw; letter-spacing: 0.04em; writing-mode: vertical-rl; transform: rotate(180deg); transform-origin: center; }
/* Once the XFR starts to turn, its caption reads as in the landed mock-up (Artist04-5) */
.artist__cap-tech-2 { display: none; }
.artist__cap-xfr-2 { left: 2.292cqw; top: 29.219cqw; font-size: 0.99cqw; letter-spacing: 0; display: none; }
[data-turning] > .artist__cap-xfr { display: none; }
[data-turning] > .artist__cap-xfr-2 { display: block; }
/* Xfaktor Revolutions 2003: starts on its side at 35%, rotates into place at 100% as the column releases */
.artist__xfr { left: 3.906cqw; top: 24.844cqw; width: 60.573cqw; height: 45.26cqw; z-index: 1; pointer-events: auto; }
.artist__xfr-h1 { left: 2.865cqw; top: 1.875cqw; width: 39.427cqw; height: 0.729cqw; }
.artist__xfr-h2 { left: 2.865cqw; top: 56.094cqw; width: 39.427cqw; height: 0.729cqw; }
.artist__xfr-v1 { left: 4.323cqw; top: 1.823cqw; width: 0.729cqw; height: 36.875cqw; }
.artist__xfr-v2 { left: 40.208cqw; top: 1.927cqw; width: 0.729cqw; height: 36.875cqw; }
.artist__xfr-v3 { left: 38.333cqw; top: 2.188cqw; width: 0.729cqw; height: 24.219cqw; }
.artist__xfr-v4 { left: 4.688cqw; top: 30.104cqw; width: 0.729cqw; height: 37.031cqw; }
.artist__xfr-v5 { left: 39.063cqw; top: 25.99cqw; width: 0.729cqw; height: 41.823cqw; }
.artist__xfr-v6 { left: 40.208cqw; top: 23.281cqw; width: 0.729cqw; height: 36.823cqw; }
/* Cue near the bottom: the XFR turn, credit, arrow and tombstone play once this scrolls into view */
.artist__xfr-cue { left: 52.083cqw; top: 234.8cqw; width: 0.521cqw; height: 0.521cqw; }
.artist__credit { left: 65cqw; top: 239.687cqw; font-size: 0.99cqw; font-style: italic; line-height: 1.62; transform: rotate(-2deg); }
.artist__bracket-xfr { left: 68.401cqw; top: 245.912cqw; width: 30.283cqw; height: 6.794cqw; }
.artist__copy-xfr { left: 74.635cqw; top: 250.208cqw; font-size: 0.984cqw; line-height: 1.6; }
/* Black arrow: tombstone to the XFR site */
.artist__arrow-xfr { left: 58.187cqw; top: 249.882cqw; width: 31.374cqw; height: 20.223cqw; z-index: 4; }
/* Macromedia R.I.P */
.artist__grave { left: 77.75cqw; top: 259.451cqw; width: 7.109cqw; height: 7.492cqw; overflow: visible; }
.artist__media-zone { left: 0cqw; top: 171.354cqw; width: 100cqw; height: 99.896cqw; pointer-events: none; }

/* ===================== 05 Designer ===================== */
/* One long page: the stage keeps the mock-ups' 1920 x 8478 proportions, so 1cqw = 19.2px of the mock. */
.designer__fold { box-sizing: border-box; position: relative; min-height: 100vh; overflow: clip; background: #F4F4F0 url('../../assets/textures/paper.png') 0 0 / 256px 256px repeat; }
.dz-stage { position: relative; margin: 0 auto; width: min(100vw, 177.78vh); aspect-ratio: 1920 / 8052; container-type: inline-size; }
.dz-stage > * { position: absolute; margin: 0; }
.dz-stage > img { display: block; }
.dz-stage .wr-ph { box-sizing: border-box; display: grid; place-items: center; outline: 2px dashed rgba(25,39,41,0.35); outline-offset: -2px; font-family: 'Architects Daughter', cursive; font-size: 0.938cqw; color: #192729; opacity: 0.8; }
/* Luenell spread: lands flat once the bottom of the page is reached, and stays. */
/* Moved like a page in a scrapbook: lifted (shadow grows, slight tilt), carried, set down flat. */
@keyframes dzPaperLand {
  0% { z-index: 1; transform: perspective(2400px) translate(-15.208cqw, -47.865cqw) rotate(9deg) rotateX(0deg) rotateY(0deg) scale(1); filter: drop-shadow(0.3cqw 0.4cqw 0.4cqw rgba(4,10,0,0.18)); }
  49.9% { z-index: 1; }
  50% { z-index: 3; transform: perspective(2400px) translate(-7.604cqw, -23.932cqw) rotate(4.5deg) rotateX(4deg) rotateY(-4deg) scale(1.04); filter: drop-shadow(1.2cqw 1.8cqw 2cqw rgba(4,10,0,0.35)); }
  100% { z-index: 3; transform: perspective(2400px) translate(0cqw, 0cqw) rotate(0deg) rotateX(0deg) rotateY(0deg) scale(1); filter: drop-shadow(0.3cqw 0.4cqw 0.4cqw rgba(4,10,0,0.18)); }
}

[data-reveal="turn-luen"] { transform-origin: 0 0; transform: perspective(2400px) translate(-15.208cqw, -47.865cqw) rotate(9deg) rotateX(0deg) rotateY(0deg) scale(1); filter: drop-shadow(0.3cqw 0.4cqw 0.4cqw rgba(4,10,0,0.18)); }
/* Swapped like CoWright / The Write Her: a short pause, one ease-in-out, and it comes from under
   Tomboy Chic (Designer06) to on top of it (Designer07-2) at the halfway point. */
[data-reveal="turn-luen"].is-in { animation: dzPaperLand 1.8s cubic-bezier(.65,0,.35,1) .4s forwards; }
@media (prefers-reduced-motion: reduce) { [data-reveal="turn-luen"].is-in { animation-duration: 0.01ms !important; } }
/* Tag lockup: DESIGNER in the Tag face, cyan swash, and Web / Story / Print set in display faces (stand-ins until the lettering art arrives) */
.designer__swash { left: 8.021cqw; top: 13.75cqw; width: 41.823cqw; height: 5.573cqw; background: url('../../assets/sections/Writer-Section/highlight-cyan.png') 0 0 / 100% 100% no-repeat; mix-blend-mode: multiply; clip-path: inset(0 100% 0 0); z-index: 1; pointer-events: none; }
.designer__tag { left: 10.56cqw; top: 8.06cqw; font-size: 13.169cqw; line-height: 1; font-family: 'Tag', 'Permanent Marker', cursive; color: #040A00; text-transform: uppercase; white-space: nowrap; clip-path: inset(-40% 100% -40% 0); z-index: 2; }
.designer__web { left: 15.625cqw; top: 7.188cqw; font-size: 3.281cqw; line-height: 1; transform: rotate(-6deg); font-family: 'Sedgwick Ave Display', cursive; color: #5B2BF0; white-space: nowrap; clip-path: inset(-40% 100% -40% 0); z-index: 3; }
.designer__story { left: 35.208cqw; top: 12.917cqw; font-size: 3.021cqw; line-height: 1; transform: rotate(-9deg); font-family: 'Sedgwick Ave Display', cursive; color: #FFE81A; -webkit-text-stroke: 1px #C9A800; white-space: nowrap; clip-path: inset(-40% 100% -40% 0); z-index: 3; }
.designer__print { left: 25.521cqw; top: 15.104cqw; font-size: 3.333cqw; line-height: 1; transform: rotate(3deg); font-family: 'Sedgwick Ave Display', cursive; color: #040A00; text-shadow: 0 0 1px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; white-space: nowrap; clip-path: inset(-40% 100% -40% 0); z-index: 3; }
/* Wireframe sketches, stacked exactly as the stand-ins were and as Designer 16x9 shows: a second
   landing-page sheet under the first, turned 5.5deg about (1037, 725); the phone on top. On 9x16 the
   middle sheet is the gallery sketch (Designer-hero-9x16). */
.designer__wire-gallery img { display: block; width: 100%; height: 100%; }
.designer__wire-gallery { left: 39.583cqw; top: 36.354cqw; width: 46.406cqw; height: 27.708cqw; transform: rotate(5.5deg); transform-origin: 14.427cqw 1.406cqw; pointer-events: none; }
.designer__wire-landing { left: 7.604cqw; top: 22.396cqw; width: 46.406cqw; height: 27.708cqw; pointer-events: none; }
.designer__wire-mobile { left: 66.979cqw; top: 34.740cqw; width: 12.969cqw; height: 23.177cqw; pointer-events: none; }
.designer__bracket-intro { left: 53.385cqw; top: 10.26cqw; width: 40.052cqw; height: 8.958cqw; }
.designer__intro { left: 60.365cqw; top: 14.792cqw; font-size: 0.844cqw; line-height: 0.95; transform: rotate(0.6deg); }
.designer__intro-2 { left: 62.083cqw; top: 20.208cqw; font-size: 0.844cqw; line-height: 1.65; transform: rotate(0.5deg); }
.designer__intro-3 { left: 60.156cqw; top: 25.156cqw; font-size: 0.844cqw; line-height: 0.95; transform: rotate(0.6deg); }
/* CoWright's Neighborhood of Excellence */
.designer__cowright { left: 6.198cqw; top: 62.76cqw; width: 34.531cqw; height: 44.063cqw; }
.designer__line-cow { left: 40.521cqw; top: 62.5cqw; width: 0.156cqw; height: 44.063cqw; background: #040A00; }
.designer__cap-cow { left: 4.167cqw; top: 77.917cqw; font-size: 0.99cqw; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); transform-origin: center; }
.designer__bracket-cow { left: 43.594cqw; top: 70.417cqw; width: 29.948cqw; height: 6.719cqw; }
.designer__getby { left: 47.292cqw; top: 74.635cqw; font-size: 0.833cqw; line-height: 1.22; transform: rotate(-1.2deg); }
/* The Write Her */
.designer__writeher { left: 44.167cqw; top: 88.854cqw; width: 49.167cqw; height: 27.813cqw; object-fit: cover; object-position: 50% 0; }
.designer__cap-wh { left: 37.083cqw; top: 112.448cqw; z-index:99; font-size: 1.094cqw; line-height: 1.1; transform: rotate(14deg); }
.designer__affinity { left: 56.875cqw; top: 117.813cqw; font-size: 1.094cqw; line-height: 1; transform: rotate(-3deg); }
.designer__mack { left: 11.875cqw; top: 135.521cqw; font-size: 1.021cqw; line-height: 1.12; transform: rotate(-2.2deg); }
/* Najwa Dance Corps */
.designer__najwa { left: 3.073cqw; top: 142.24cqw; width: 61.823cqw; height: 34.167cqw; object-fit: cover; object-position: 50% 0; }
.designer__cap-najwa { left: 68.854cqw; top: 150.99cqw; font-size: 1.016cqw; line-height: 1; }
.designer__wphtml { left: 44.063cqw; top: 188.906cqw; font-size: 0.885cqw; line-height: 1; }
/* We Care Elle */
.designer__wecare { left: 10.729cqw; top: 194.427cqw; width: 76.458cqw; height: 40.104cqw; object-fit: cover; object-position: 50% 0; }
.designer__cap-wecare { left: 4.375cqw; top: 238.125cqw; font-size: 1.198cqw; line-height: 1; transform: rotate(-5.4deg); }
.designer__firstsite { left: 47.813cqw; top: 228.75cqw; font-size: 1.094cqw; line-height: 1.2; transform: rotate(3deg); }
/* ebe: I Am An Evolving Woman (LAM article) */
.designer__lam { left: 1.458cqw; top: 256.718cqw; width: 46.198cqw; height: 29.948cqw; }
.designer__ebe { left: 54.01cqw; top: 268.958cqw; font-size: 2.396cqw; line-height: 1; font-family: 'Architects Daughter', cursive; color: #5B2BF0; }
.designer__ebe-text { left: 59.01cqw; top: 270.000cqw; font-size: 1.302cqw; line-height: 1; }
/* ebe: Tomboy Chic */
.designer__tomboy { left: 40.629cqw; top: 281.041cqw; width: 46.771cqw; height: 60.104cqw; object-fit: cover; object-position: 50% 0; z-index: 2; }
/* ebe: Luenell interview. Starts tilted and larger (Designer06/07), turns flat into place (Designer07-2) and stays */
.designer__luenell { left: 10.417cqw; top: 370.364cqw; width: 64.583cqw; height: 41.823cqw; z-index: 1; background: #F4F4F0; }
.designer__luenell-cue { left: 52.083cqw; top: 389.166cqw; width: 0.521cqw; height: 0.521cqw; pointer-events: none; }
.designer__cap-luen { left: 54.427cqw; top: 366.354cqw; font-size: 1.094cqw; line-height: 1; }

/* Colour-in: design images start levelled to grayscale line art; the colour copy above is
   scribbled in (folds.js spSketch). */
.dz-lineart { filter: grayscale(1) contrast(1.9) brightness(1.12); mix-blend-mode: multiply; }

/* ===================== 06 Back cover ===================== */
.backcover__fold { box-sizing: border-box; position: relative; height: 100vh; overflow: hidden; background: #0A0A0A; }
.backcover__fold .wr-stage { inset: auto 0 0 0; }
.backcover__fold .wr-stage > * { position: absolute; margin: 0; }
.backcover__card { left: 18.802cqw; top: 23.177cqw; width: 62.135cqw; height: 33.073cqw; background: #43F0FF; border-radius: 2.396cqw 2.396cqw 0 0; }
.backcover__white { left: 18.802cqw; top: 25.938cqw; width: 28.906cqw; height: 9.896cqw; background: #FFFFFF; }
.backcover__yellow { left: 47.708cqw; top: 25.938cqw; width: 33.229cqw; height: 9.896cqw; background: #FFFF02; border-left: 0.104cqw solid #040A00; box-sizing: border-box; }
.backcover__icon { left: 23.49cqw; top: 27.396cqw; width: 5.833cqw; height: 7.865cqw; object-fit: contain; }
.backcover__wordmark { left: 30.365cqw; top: 27.292cqw; width: 13.021cqw; height: 8.125cqw; object-fit: contain; object-position: 0 50%; }
.backcover__badge { left: 20.104cqw; top: 39.844cqw; width: 10.781cqw; height: 9.583cqw; transform: rotate(180deg); display: block; cursor: pointer; }
/* Lead-the-eye arrow: drawn in both Process and Result; its head lands once the line arrives. */
.backcover__arrow path + path { opacity: 0; transition: opacity .2s ease .8s; }
.backcover__arrow.is-in path + path { opacity: 1; }
.backcover__badge img { display: block; width: 100%; height: 100%; object-fit: contain; }
.backcover__head { left: 31.458cqw; top: 37.604cqw; font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 2.708cqw; line-height: 1.04; letter-spacing: 0.03em; text-transform: uppercase; color: #FFFFFF; white-space: nowrap; }
.backcover__q { left: 60.938cqw; top: 36.927cqw; font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 9.115cqw; line-height: 1; color: #FFFFFF; }
.backcover__download { left: 31.458cqw; top: 44.896cqw; font-family: 'Josefin Sans', sans-serif; font-weight: 400; font-size: 1.615cqw; letter-spacing: 0.06em; text-transform: uppercase; color: #FFFFFF; text-decoration: none; white-space: nowrap; }
.backcover__download:hover { color: #040A00; }
.backcover__projects { left: 31.458cqw; top: 46.875cqw; font-family: 'Josefin Sans', sans-serif; font-weight: 400; font-size: 2.292cqw; letter-spacing: 0.03em; text-transform: uppercase; color: #FFFFFF; white-space: nowrap; }
.backcover__arrow { left: 43.125cqw; top: 47.552cqw; width: 27.083cqw; height: 5.729cqw; overflow: visible; z-index: 2; pointer-events: none; }
.backcover__tiles { left: 33.333cqw; top: 49.531cqw; width: 31.25cqw; height: 5cqw; }
.backcover__tile { position: absolute; top: 0; width: 6.563cqw; height: 4.948cqw; box-sizing: border-box; border: 0.208cqw solid #040A00; background: #43F0FF; clip-path: polygon(0 0, 82% 0, 100% 19%, 100% 100%, 0 100%); display: grid; align-content: start; justify-items: center; padding-top: 0.938cqw; color: #040A00; text-decoration: none; font-family: 'Josefin Sans', sans-serif; text-align: center; }
.backcover__tile::after { content: ''; position: absolute; right: -0.208cqw; top: -0.208cqw; width: 1.458cqw; height: 1.146cqw; background: linear-gradient(to bottom left, transparent calc(50% - 0.13cqw), #040A00 calc(50% - 0.13cqw), #040A00 calc(50% + 0.13cqw), transparent calc(50% + 0.13cqw)); }
.backcover__tile:nth-child(1) { left: 0; } .backcover__tile:nth-child(2) { left: 7.708cqw; } .backcover__tile:nth-child(3) { left: 15.417cqw; } .backcover__tile:nth-child(4) { left: 23.125cqw; }
.backcover__tile strong { font-weight: 700; font-size: 0.99cqw; letter-spacing: 0.04em; white-space: nowrap; }
.backcover__tile span { margin-top: 0.729cqw; font-size: 0.677cqw; line-height: 1.05; letter-spacing: 0.03em; }
.backcover__tile:hover { background: #FFFF02; }

/* ===================== Motion: Process | Result =====================
   Process: a ghost artist builds each page as it arrives (folds.js spill). Ink drops: the page's
   header bleeds up first as the big drop, the pieces around it follow at once as smaller drops,
   nearest first. Copy bleeds up from under the paper, images draw in as line art and their colour
   bleeds up under it, page icons bleed up flat and then tear up off the page, marks are drawn by a
   wet pen, and the hand-written notes come last. Full by 3s, 3.5s with notes.
   Result: the finished, static site. The Medium hold, card flips, arrow draws and hovers stay. */
@property --sp-r { syntax: '<percentage>'; inherits: false; initial-value: 140%; }
/* Waiting to spill: hidden until its page or block arrives. */
.page__box[data-motion="process"] [data-sp-wait] { opacity: 0; }
/* While bleeding up: an ink drop spreading from the piece's own centre. */
[data-sp-run] { -webkit-mask-image: radial-gradient(#000 calc(var(--sp-r) - 40%), transparent var(--sp-r)); mask-image: radial-gradient(#000 calc(var(--sp-r) - 40%), transparent var(--sp-r)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* Sketch-in canvas over an image or the Mouf video while its colour is scribbled in (removed when done). */
.sp-sketch { pointer-events: none; }
/* Line-art copy of a pencil sketch (Welcome, History), drawn in before its colour bleeds up (removed when done). */
.sp-line { filter: grayscale(1) contrast(1.9) brightness(1.12); mix-blend-mode: multiply; pointer-events: none; }
/* Strike-through synonyms, drawn through after the word is written. */
.welcome__note::after, .history__note::after { content: ''; position: absolute; left: 0; right: 0; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .35s cubic-bezier(.4,.1,.3,1); }
.welcome__note::after { top: 0.627em; height: 2px; }
.history__note::after { top: 0.63em; height: 1.5px; }
[data-struck]::after { transform: none; }

/* Process | Result switch on the cover, in the nav's type (active in ink, the other lighter). */
.cover__mode { grid-column: 1 / -1; grid-row: 2; align-self: stretch; display: grid; grid-template-rows: 1fr auto 3fr; font-family: 'Josefin Sans', sans-serif; font-size: min(1.1vw, 2vh); line-height: 1; color: #040A00; }
.cover__mode-row { grid-row: 2; display: flex; align-items: baseline; gap: 0.5em; }
.cover__mode-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; opacity: 0.4; transition: opacity .2s; }
.cover__mode-btn[aria-pressed="true"] { opacity: 1; }
.cover__mode-btn:hover { color: #2D4649; opacity: 1; }

/* Result: every page shows finished. */
.page__box[data-motion="result"] :is([data-ink], [data-write], [data-stroke], .wr-hl, [data-reveal="swipe"], [data-reveal="swipe-left"], [data-annot="name"], [data-annot="desc"] > span, [data-sp="note"], [data-sp="note"] > span) { clip-path: none !important; animation: none !important; }
.page__box[data-motion="result"] .cover__path { stroke-dashoffset: 0 !important; animation: none !important; }
.page__box[data-motion="result"] .cover__box-11 { opacity: 1; color: #040A00; animation: none !important; }
.page__box[data-motion="result"] [data-annot="grave"] path { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; animation: none !important; }
.page__box[data-motion="result"] [data-annot="grave"] text { opacity: 1 !important; animation: none !important; }
.page__box[data-motion="result"] [data-annot-on] [data-annot="arrow"] .ar-arrow-pen { animation-delay: 0.2s; }
.page__box[data-motion="result"] [data-reveal="turn-luen"] { animation: none !important; transform: none; z-index: 3; filter: drop-shadow(0.3cqw 0.4cqw 0.4cqw rgba(4,10,0,0.18)); }
.page__box[data-motion="result"] .dz-lineart { filter: none !important; }
.page__box[data-motion="result"] .sp-sketch, .page__box[data-motion="result"] .sp-line { display: none; }
.page__box[data-motion="result"] :is(.welcome__note, .history__note)::after { transform: none; transition: none; }
.page__box[data-motion="result"] .cover__button { animation: none; }

/* ===================== 4x3 landscape =====================
   Screens from square up to 3:2 use the 4x3 mock-ups (1600 x 1200). The 4x3 frame is the largest
   4:3 box that fits the screen, centred. The 4x3 mocks keep the 16x9 pieces at the same size and
   show the 1920 x 1080 artboard through a 1600 x 1200 window that starts 60px above it, so a page
   that is the same in both needs no changes: its stage is the 16x9 artboard, 1.2x the frame wide,
   pinned to the frame's left edge, 60px down, and cut at the frame's right edge. Pieces the 4x3
   mocks move get their own position, in the same units: 1cqw = 19.2px of either mock, so
   left = x / 19.2 and top = (y - 60) / 19.2 for a 4x3 mock point (x, y). */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 31/20), (min-aspect-ratio: 1/1) and (max-aspect-ratio: 5/3) and (pointer: coarse) {
  :root { --fw: min(100vw, 133.333vh); --fh: min(75vw, 100vh); --fl: calc((100vw - var(--fw)) / 2); --ft: calc((100vh - var(--fh)) / 2); }
  :is([data-fold^="writer"], [data-fold="welcome"], [data-fold="history"]) .wr-stage { inset: auto; left: var(--fl); top: calc(var(--ft) + var(--fh) * 0.05); width: calc(var(--fw) * 1.2); height: calc(var(--fh) * 0.9); margin: 0; }
  .br-169 { display: none; }
  .br-43 { display: inline; }

  /* Cover (cover 4x3): the art takes 55%, the cyan runs across the top of the white and yellow
     column, and the ratio box, nav, layout label and badge are larger. Sizes are in vw/vh of the
     4x3 mock-up (1600 x 1200: 1vw = 16px, 1vh = 12px). */
  .cover__fold { grid-template-columns: 55fr 45fr; background: rgb(133, 245, 255); }
  .cover__box-6 { margin-top: 5vh; }
  .cover__box-8 { padding: 0.833vh 1.25vw 10.2vh 5.125vw; }
  .cover__box-9 { width: 25vw; height: 19.333vh; }
  .cover__box-10 { font-size: min(2.53vw, 3.37vh); }
  .cover__box-7 { padding-bottom: 2.25vh; }
  .cover__h1 { letter-spacing: 0.03em; line-height: 1.37; }
  .cover__box-12 { position: absolute; right: 2.625vw; top: 25.333vh; width: auto; height: 17.833vh; font-size: min(2.875vw, 3.833vh); font-weight: 700; line-height: 1.04; }
  .cover__nav { margin-left: 1vw; font-size: min(2.77vw, 3.69vh); }
  .cover__link { width: 28.625vw; }
  .cover__button { right: 0.5vw; bottom: 8.6vh; }
  .cover__scroll-arrow-mulhyu1x { width: min(11.25vw, 15vh); }

  /* Writer · Intro (writer 4x3) */
  .writer__copy { left: 29.81cqw; top: 4.63cqw; transform: rotate(-4deg); }
  .writer__copy-2 { left: 5.21cqw; top: 10.2cqw; line-height: 2; }
  .writer__swash { left: -1.927cqw; top: 33.3cqw; width: 63.23cqw; height: 16.86cqw; transform: rotate(-1.1deg); transform-origin: 5% 50%; }
  .writer__copy-3 { left: 54.94cqw; top: 16.125cqw; }
  .writer__copy-4 { left: 42.46cqw; top: 45.1cqw; }
  .writer__title { left: 2.245cqw; }
  .writer__box { left: 2.344cqw; }
  .writer__box-2 { left: 21.198cqw; }
  .writer__box-3 { left: 35.677cqw; }

  /* Writer · Medium (writer4-4x3): the cards and copy move in */
  .writer-medium__copy { left: 10.369cqw; }
  .writer-medium__medium { left: 34.475cqw; }
  .writer-medium__svg { left: 27.289cqw; }
  .writer-medium__copy-2 { left: 21.819cqw; }
  .writer-medium__copy-3 { left: 27.549cqw; }
  .writer-medium__link { left: 13.281cqw; }
  .writer-medium__link-2 { left: 38.799cqw; }
  .writer-medium__link-3 { left: 64.075cqw; }
  /* Arrows move with the card they point to */
  .writer-medium__arrow-good-projects { left: -0.869cqw; }
  .writer-medium__arrow-self-regard { left: 39.529cqw; }
  .writer-medium__arrow-vincent { left: 39.695cqw; }

  /* Artist (Artist-hero-01/02, Artist01-03 4x3, Artist04-5-1..3 transitions): one long page on the
     same 1920-wide artboard, 60px of paper above and below it */
  .artist__fold { padding: calc(var(--fw) * 0.0375) 0; }
  .ar-stage { margin: 0 0 0 var(--fl); width: calc(var(--fw) * 1.2); aspect-ratio: 1920 / 4611; }
  .artist__epoch { left: 25.469cqw; top: 68.646cqw; width: 54.792cqw; height: 41.458cqw; }
  .artist__godfist { top: 112.266cqw; height: 46.406cqw; }
  .artist__brooklyn { left: 44.427cqw; top: 150.677cqw; width: 34.167cqw; height: 52.813cqw; }
  /* XFR (Artist03-4x3, Artist04-5-1..3): the column stays at Brooklyn's midpoint (Artist02-4x3) and
     pins 114px below the top of the screen (Artist03-4x3). The page ends on the transition screen. */
  .artist__xfr-hold { height: 72cqw; }
  .artist__xfr-pin { top: 5.938cqw; height: 56.563cqw; }
  /* Lands upright at full size with its top at the last 3% of the Brooklyn Bat (where it starts), inside the page */
  .artist__xfr { left: 3.906cqw; top: 15.208cqw; width: 53.542cqw; height: 40cqw; }
  .artist__cap-xfr-2 { top: 7.917cqw; }
  .artist__xfr-pin > .ar-line { transition: opacity .6s; }
  [data-turning] > .ar-line { opacity: 0; }
  .artist__copy-epoch { left: 2.917cqw; top: 77.292cqw; }
  .artist__copy-epoch-2 { left: 2.917cqw; top: 81.563cqw; }
  .artist__cap-epoch { left: 33.125cqw; top: 86.458cqw; font-size: 0.807cqw; color: #FFFFFF; }
  .artist__label { top: 122.5cqw; }
  .artist__line-god-l { top: 115.729cqw; }
  .artist__line-god-r { top: 115.833cqw; }
  .artist__cap-godfist { left: 4.617cqw; top: 298.519cqw; font-size: 1.5524cqw; }
  .artist__note-godfist { left: 19.896cqw; top: 159.323cqw; }
  .artist__arrow-godfist { left: 11.667cqw; top: 160.156cqw; }
  .artist__copy-brooklyn { left: 42.656cqw; top: 144.115cqw; }
  .artist__cap-brooklyn { left: 42.031cqw; top: 160.26cqw; }
  .artist__line-brook-l { top: 144.688cqw; }
  .artist__line-brook-r { display: none; }
  .artist__media-zone { height: 68.802cqw; }
  /* Supporting copy, refit to the column right of the landed XFR (x 1120-1590 of the last screen) */
  .artist__cap-tech { left: 58.594cqw; top: 204.323cqw; }
  .artist__xfr-cue { top: 217.24cqw; }
  .artist__credit { left: 59.375cqw; top: 207.865cqw; }
  .artist__bracket-xfr { left: 58.594cqw; top: 217.24cqw; width: 23.438cqw; height: 5.262cqw; }
  .artist__copy-xfr { left: 59.896cqw; top: 220.573cqw; }
  .artist__arrow-xfr { left: 52.552cqw; top: 224.427cqw; width: 27.188cqw; height: 18.49cqw; }
  .artist__grave { left: 68.698cqw; top: 233.177cqw; }
  .ar-rail .wr-media { top: calc(var(--ft) + var(--fh) - 8.917cqw); }

  /* Welcome (welcome 4x3) and History (history 4x3): the 1600 x 1080 mock-ups are the artboard
     inside the 1600 x 1200 frame, 60px of background above and below. */
  .welcome__welcome { left: 10.833cqw; top: 2.083cqw; width: 11.51cqw; height: 4.74cqw; }
  .welcome__header { left: 18.125cqw; }
  .welcome__stroke { left: 18.099cqw; top: 10.922cqw; width: 39.464cqw; height: 6.516cqw; transform: rotate(-0.37deg); }
  .welcome__yurp { left: 34.063cqw; top: 11.875cqw; width: 6.927cqw; height: 4.271cqw; }
  .welcome__hi { left: 59.115cqw; }
  .welcome__sketch { left: 47.76cqw; top: 12.396cqw; width: 41.458cqw; height: 40cqw; }
  .welcome__note { top: 35.777cqw; left: 58.692cqw; }
  .welcome__copy { top: 25.908cqw; }
  .welcome__copy-2:nth-child(1) { font-size: 1.2546cqw; top: 31.849cqw; left: 9.682cqw; }
  .welcome__copy-2:nth-child(2) { font-size: 1.2605cqw; top: 37.878cqw; left: 8.49cqw; }
  .welcome__copy-2:nth-child(3) { top: 43.681cqw; left: 7.704cqw; }
  .welcome__copy-2:nth-child(4) { font-size: 1.2566cqw; top: 47.676cqw; left: 6.823cqw; }
  .history__stroke { left: 4.995cqw; top: 17.781cqw; width: 49.771cqw; height: 8.068cqw; transform: rotate(-3.43deg); }
  .history__how-it-all-started { left: 49.635cqw; top: 14.063cqw; height: 7.484cqw; }
  .history__copy { font-size: 1.8708cqw; top: 20.535cqw; left: 56.464cqw; }
  .history__box { font-size: 1.1653cqw; top: 35.118cqw; left: 36.68cqw; }
  .history__box-2 { font-size: 3.3192cqw; top: 51.421cqw; left: 62.127cqw; }

  /* Designer: the same 4x3 frame as Writer and Artist (the 1920 artboard at 1:1 in a 1600 x 1200
     frame, 60px of paper above). Image sizes at 1600 x 1200 from Omar: CoWright 661.5 x 845,
     The Write Her 914.2 x 517. */
  .designer__fold { padding-top: calc(var(--fw) * 0.0375); }
  .dz-stage { margin: 0 0 0 var(--fl); width: calc(var(--fw) * 1.2); }
  .designer__cowright { width: 34.453cqw; height: 44.01cqw; }
  /* Measured from Designer01 4x3 Transition start / 02 / Final (the shuffle keyframes are in the markup) */
  /* Tomboy: whole piece on screen, 12.6% of the screen clear to its right */
  .designer__tomboy { left: 26.062cqw; }
  .designer__writeher { left: 30.807cqw; top: 89.583cqw; width: 47.615cqw; height: 26.927cqw; }
  .designer__line-cow { top: 62.76cqw; height: 26.771cqw; }
  .designer__cap-cow { font-size: 0.943cqw; }
  .designer__getby { top: 74.843cqw; }
  /* The Write Her notes move with it (not in the 4x3 frames) */
  .designer__cap-wh { left: 23.724cqw; top: 113.177cqw; }
  .designer__affinity { left: 43.516cqw; top: 118.542cqw; }
}

@keyframes dzPaperLand916 {
  0% { z-index: 1; transform: perspective(2400px) translate(-2.222cqw, -3.889cqw) rotate(7.1deg) rotateX(0deg) rotateY(0deg) scale(1); filter: drop-shadow(0.3cqw 0.4cqw 0.4cqw rgba(4,10,0,0.18)); }
  49.9% { z-index: 1; }
  50% { z-index: 3; transform: perspective(2400px) translate(0.926cqw, -7.963cqw) rotate(10deg) rotateX(4deg) rotateY(-4deg) scale(1.03); filter: drop-shadow(1.2cqw 1.8cqw 2cqw rgba(4,10,0,0.35)); }
  100% { z-index: 3; transform: perspective(2400px) translate(0cqw, 0cqw) rotate(0deg) rotateX(0deg) rotateY(0deg) scale(1); filter: drop-shadow(0.3cqw 0.4cqw 0.4cqw rgba(4,10,0,0.18)); }
}
/* ===================== 9x16 portrait (phones) =====================
   Portrait screens use the 9x16 boards (assets/9x16, 1080 x 1920). Each page's artboard is the
   largest 9:16 box that fits the screen, centred; 1cqw = 10.8px of a board, so a board point
   (x, y) is left = x / 10.8, top = y / 10.8. br-916 line breaks belong to these boards only (hidden
   elsewhere by the base rule beside .br-43). */
@media (max-aspect-ratio: 1/1) {
  :root { --mw: min(100vw, 56.25vh); --mh: min(177.778vw, 100vh); }
  .wr-stage { inset: 0; margin: auto; width: var(--mw); height: var(--mh); }
  .br-169, .br-43 { display: none; }
  .br-916 { display: inline; }

  /* Welcome (welcome 9x16): same line breaks as 4x3; the Welcome tag is light (about a third opacity) */
  .welcome__sketch { left: 10.648cqw; top: 42.778cqw; width: 102.037cqw; height: 98.333cqw; }
  .welcome__welcome { left: 19.352cqw; top: 9.074cqw; width: 20.556cqw; height: 7.593cqw; transform: rotate(-11.5deg); opacity: 0.4; }
  .welcome__stroke { left: 32.315cqw; top: 25.370cqw; width: 73.148cqw; height: 11.111cqw; transform: rotate(0.17deg); }
  .welcome__header { left: 32.222cqw; top: 10.648cqw; width: 60.046cqw; height: 22.870cqw; }
  .welcome__yurp { left: 60.648cqw; top: 26.852cqw; width: 12.500cqw; height: 7.593cqw; }
  .welcome__hi { left: 38.981cqw; top: 57.685cqw; width: 10.370cqw; height: 8.981cqw; }
  .welcome__note { left: 40.741cqw; top: 100.532cqw; font-size: 2.9253cqw; }
  .welcome__copy { left: 31.388cqw; top: 125.838cqw; font-size: 3.3624cqw; }
  .welcome__copy-2 { font-size: 2.2cqw; }
  .welcome__copy-2:nth-child(1) { font-size: 2.2227cqw; left: 17.243cqw; top: 137.144cqw; }
  .welcome__copy-2:nth-child(2) { font-size: 2.2453cqw; left: 15.093cqw; top: 147.802cqw; }
  .welcome__copy-2:nth-child(3) { font-size: 2.2243cqw; left: 13.724cqw; top: 158.179cqw; }
  .welcome__copy-2:nth-child(4) { font-size: 2.2376cqw; left: 12.037cqw; top: 165.106cqw; }

  /* History (history 9x16): same line breaks as 4x3; How it all started slopes down here */
  .history__young-me-sketch { left: -43.611cqw; top: 47.87cqw; width: 198.426cqw; height: 158.704cqw; }
  .history__stroke { left: 7.500cqw; top: 38.241cqw; width: 93.426cqw; height: 12.222cqw; transform: rotate(-2.83deg); }
  .history__header { left: 7.963cqw; top: 26.019cqw; width: 87.778cqw; height: 20.833cqw; }
  .history__how-it-all-started { left: 13.796cqw; top: 21.065cqw; width: 26.111cqw; height: 13.796cqw; transform: rotate(34deg); }
  .history__the { left: 42.130cqw; top: 39.815cqw; width: 9.259cqw; height: 5.370cqw; }
  .history__note { left: 26.39cqw; top: 42.269cqw; font-size: 2.8315cqw; }
  .history__copy { left: 39.043cqw; top: 75.47cqw; font-size: 3.3264cqw; }
  .history__copy-2 { left: 8.178cqw; top: 66.26cqw; font-size: 3.2273cqw; }
  .history__box { left: 15.834cqw; top: 127.22cqw; font-size: 2.0775cqw; }
  .history__box-2 { left: 65.356cqw; top: 164.246cqw; font-size: 5.906cqw; }

  /* Cover (cover 9x16): art on top, then the white band and the yellow band stacked under it.
     Sizes in vw of the 1080-wide board (1vw = 10.8px); the art takes the height that is left. The
     Process | Result switch isn't on the board. */
  .cover__fold { grid-template-columns: 1fr; grid-template-rows: 1fr 15.463vw 25.648vw; }
  .cover__box { grid-row: 1; }
  .cover__box-6 { grid-row: 2 / 4; grid-template-rows: 15.463vw 25.648vw; margin: 0; }
  .cover__dab { x: -10%; y: -5%; width: 120%; height: 110%; }
  .cover__logo-mask { x: 22.87%; y: 9.96%; width: 61.76%; height: 86.79%; }
  .cover__box-2 { left: 2.593vw; }
  .cover__box-3 { font-size: 1.111vw; }
  .cover__box-7 { position: relative; padding: 0; display: block; }
  .cover__h1 { position: absolute; left: 6.296vw; top: 1.296vw; font-size: 5.287vw; line-height: 1.42; letter-spacing: 0.04em; }
  .cover__box-8 { display: block; position: relative; padding: 0; }
  .cover__nav { position: absolute; left: 7.593vw; top: 3.148vw; gap: 0.694vw; font-size: 2.685vw; }
  .cover__link { width: 36.667vw; }
  .cover__box-9 { position: absolute; left: 45.602vw; top: 7.083vw; width: 20.833vw; height: 12.222vw; }
  .cover__svg-2 { transform: rotate(90deg) scale(-1, 1.02) !important; }
  .cover__box-10 { font-size: 2.130vw; }
  .cover__box-12 { position: absolute; left: 87.500vw; top: 10.556vw; width: auto; height: 13.148vw; font-size: 3.194vw; font-weight: 700; line-height: 1.52; }
  .cover__mode { display: none; }
  .cover__button { right: 16.759vw; bottom: 0.556vw; }
  .cover__scroll-arrow-mulhyu1x { width: 15.991vw; }

  /* Back cover (Back cover 9x16): the card spans the screen; cyan band, then the white logo band
     and the yellow band stacked; copy and arrow in ink on the yellow; the tiles are yellow. Tiles
     keep their desktop proportions at the board size (1 desktop cqw = 1.792cqw). */
  /* The sticker sits 150px higher; the 150px added at its bottom is the card blue */
  .backcover__card { left: 0; top: 98.148cqw; width: 100cqw; height: 79.722cqw; border-radius: 5.556cqw 5.556cqw 0 0; }
  .backcover__white { left: 0; top: 112.037cqw; width: 100cqw; height: 15.741cqw; }
  .backcover__white::after { content: ""; position: absolute; left: 43.333cqw; top: -0.185cqw; width: 0.185cqw; height: 16.759cqw; background: #040A00; }
  .backcover__yellow { left: 0; top: 127.778cqw; width: 100cqw; height: 36.204cqw; border-left: 0; }
  .backcover__icon { left: 30.741cqw; top: 113.889cqw; width: 10.185cqw; height: 13.556cqw; }
  .backcover__wordmark { left: 44.815cqw; top: 113.148cqw; width: 23.759cqw; height: 14.630cqw; }
  .backcover__badge { left: 0.926cqw; top: 135.555cqw; width: 20.278cqw; height: 17.963cqw; }
  .backcover__head { left: 21.3cqw; top: 131.298cqw; font-size: 4.536cqw; color: #040A00; }
  .backcover__q { left: 74.156cqw; top: 129.629cqw; font-size: 15.8695cqw; color: #040A00; }
  .backcover__projects { left: 21.416cqw; top: 145.008cqw; font-size: 3.9536cqw; color: #040A00; }
  .backcover__arrow { left: 41.667cqw; top: 145.880cqw; width: 48.796cqw; height: 9.565cqw; }
  .backcover__arrow path:first-child { stroke: #040A00; }
  .backcover__arrow path + path { fill: #040A00; }
  .backcover__tiles { left: 21.111cqw; top: 150.000cqw; width: 52.963cqw; height: 8.704cqw; }
  .backcover__tile { width: 11.759cqw; height: 8.704cqw; border-width: 0.373cqw; padding-top: 1.681cqw; background: #FFFF02; }
  .backcover__tile:hover { background: #43F0FF; }
  .backcover__tile::after { right: -0.373cqw; top: -0.373cqw; width: 2.613cqw; height: 2.054cqw; background: linear-gradient(to bottom left, transparent calc(50% - 0.233cqw), #040A00 calc(50% - 0.233cqw), #040A00 calc(50% + 0.233cqw), transparent calc(50% + 0.233cqw)); }
  .backcover__tile:nth-child(2) { left: 13.611cqw; } .backcover__tile:nth-child(3) { left: 27.315cqw; } .backcover__tile:nth-child(4) { left: 41.111cqw; }
  .backcover__tile strong { font-size: 1.774cqw; }
  .backcover__tile span { margin-top: 1.306cqw; font-size: 1.213cqw; }

  /* Artist (Artist-hero-01 / -02, Artist01, Artist03, Artist04 9x16): one long page of four 1080 x 1920
     screens (hero, Artist01, Artist03, then the pinned XFR screen of Artist04). Hero: the video state
     is hero-01; once the time-lapse turns into the final Mouf the tagline and captions move to hero-02.
     Pieces with no place on these boards are hidden here (see decisions.md). */
  .ar-stage { width: var(--mw); aspect-ratio: 1080 / 7680; }
  .artist__mouf { left: 0; top: 0; width: 100cqw; height: 177.778cqw; }
  .artist__mouf-video { mask-composite: intersect; -webkit-mask-composite: source-in; left: -53.185cqw; top: -12.528cqw; width: 242.870cqw; height: 182.167cqw; -webkit-mask-image: linear-gradient(to right, transparent 17%, #000 21%), linear-gradient(to bottom, transparent 14%, #000 20%, #000 80%, transparent 86%); mask-image: linear-gradient(to right, transparent 17%, #000 21%), linear-gradient(to bottom, transparent 14%, #000 20%, #000 80%, transparent 86%); }
  .artist__mouf-final { left: 5.648cqw; top: 21.944cqw; width: 88.241cqw; height: 133.611cqw; }
  .artist__tag { left: 17.963cqw; top: 2.407cqw; width: 60.593cqw; height: 29.037cqw; }
  .artist__swash { left: -6.481cqw; top: 19.417cqw; width: 115.167cqw; height: 18.287cqw; transform: rotate(-7.22deg); }
  .artist__line-hero { display: none; }
  .artist__tagline { z-index: 3; left: 19.079cqw; top: 147.766cqw; font-size: 2.7768cqw; transform: rotate(-2deg); transition: left 1.6s ease, top 1.6s ease, transform 1.6s ease; }
  .artist__body { left: 9.513cqw; top: 153.124cqw; font-size: 2.895cqw; line-height: 1.13; }
  .artist__cap-mouf { z-index: 3; left: 68.772cqw; top: 64.384cqw; font-size: 1.5937cqw; transform: rotate(12deg); transition: left 1.6s ease, top 1.6s ease, transform 1.6s ease; }
  .artist__cap-tools { z-index: 3; left: 62.312cqw; top: 131.5cqw; font-size: 1.6313cqw; transform: rotate(-8deg); transition: left 1.6s ease, top 1.6s ease, transform 1.6s ease; }
  .ar-stage:has([data-mouf][data-done]) .artist__tagline { left: 17.41cqw; top: 141.1cqw; transform: rotate(-3deg); }
  .ar-stage:has([data-mouf][data-done]) .artist__cap-mouf { left: 72.778cqw; top: 47.3cqw; transform: rotate(0deg); }
  .ar-stage:has([data-mouf][data-done]) .artist__cap-tools { left: 63.98cqw; top: 107.96cqw; transform: rotate(-5deg); }
  .artist__epoch { left: 4.722cqw; top: 178.426cqw; width: 90.648cqw; height: 68.611cqw; }
  .artist__cap-epoch { left: 89.259cqw; top: 222.222cqw; font-size: 1.6cqw; color: #FFFFFF; }
  .artist__copy-epoch { left: 80.833cqw; top: 288.933cqw; font-size: 1.55cqw; line-height: 1.24; }
  .artist__copy-epoch-2 { left: 80.833cqw; top: 302.259cqw; font-size: 1.55cqw; line-height: 1.24; }
  .artist__godfist { left: 11.944cqw; top: 252.963cqw; width: 68.796cqw; height: 102.685cqw; }
  .artist__cap-godfist { left: 4.444cqw; top: 298.148cqw; font-size: 1.7cqw; }
  .artist__line-god-l { left: 2.037cqw; top: 253.704cqw; height: 98.148cqw; }
  .artist__brooklyn { left: 7.037cqw; top: 369.352cqw; width: 86.019cqw; height: 132.870cqw; }
  .artist__xfr-hold, .artist__media-zone { top: 355.556cqw; height: 355.556cqw; }
  .artist__xfr-hold { width: 100cqw; }
  .artist__xfr-pin { top: 0; height: 177.778cqw; }
  .artist__xfr { left: 10.000cqw; top: 44.074cqw; width: 85.833cqw; height: 64.167cqw; }
  .artist__cap-xfr { left: 4.630cqw; top: 57.407cqw; font-size: 1.9cqw; }
  .artist__cap-tech-2 { display: block; left: 95.556cqw; top: 64.815cqw; font-size: 1.65cqw; line-height: 1.35; }
  .artist__cap-xfr-2, [data-turning] > .artist__cap-xfr-2 { display: none !important; }
  [data-turning] > .artist__cap-xfr { display: block; }
  .artist__xfr-h1 { left: 5.093cqw; top: 12.593cqw; width: 69.907cqw; height: 0.926cqw; }
  .artist__xfr-v1 { left: 6.481cqw; top: 12.963cqw; width: 0.926cqw; height: 66.204cqw; }
  .artist__xfr-v4 { left: 7.593cqw; top: 12.963cqw; width: 0.926cqw; height: 66.204cqw; }
  .artist__xfr-v2 { left: 69.630cqw; top: 12.963cqw; width: 0.926cqw; height: 66.204cqw; }
  .artist__xfr-v5 { left: 68.333cqw; top: 12.963cqw; width: 0.926cqw; height: 66.204cqw; }
  .artist__xfr-h2, .artist__xfr-v3, .artist__xfr-v6 { display: none; }
  .artist__swash, .artist__tag { z-index: 3; }
  .ar-rail .wr-media { top: calc(100vh - 13.519cqw); }
  .ar-rail__art { left: 4.815cqw; width: 3.704cqw; height: 7.500cqw; }
  .ar-rail__written { left: 4.630cqw; width: 5.093cqw; height: 6.944cqw; }
  .artist__bracket-epoch, .artist__label, .artist__line-god-r, .artist__note-godfist, .artist__arrow-godfist,
  .artist__copy-brooklyn, .artist__cap-brooklyn, .artist__line-brook-l, .artist__line-brook-r, .artist__cap-tech,
  .artist__xfr-cue, .artist__credit, .artist__bracket-xfr, .artist__copy-xfr, .artist__arrow-xfr, .artist__grave { display: none !important; }

  /* Designer (Designer-hero-9x16, Designer01 9x16 transition, Designer02, Designer05/06 transitions).
     Screens on the page: hero 0, Designer01 1954, Designer02 3612, Designer05 5532 (Final-full runs
     2950 to the page end). The lettering lockup is the same pixel size and place as on 16x9. */
  .dz-stage { width: var(--mw); aspect-ratio: 1080 / 8166; }
  /* Half the space between the XFR and the Designer hero (890 -> 445 board px) */
  .designer__fold { margin-top: calc(var(--mw) * -0.412); }
  .designer__tag { left: 18.773cqw; top: 14.329cqw; font-size: 23.412cqw; }
  .designer__web { left: 27.778cqw; top: 12.779cqw; font-size: 5.833cqw; }
  .designer__story { left: 62.592cqw; top: 22.964cqw; font-size: 5.371cqw; }
  .designer__print { left: 45.371cqw; top: 26.852cqw; font-size: 5.925cqw; }
  .designer__swash { left: 14.260cqw; top: 24.444cqw; width: 74.352cqw; height: 9.908cqw; }
  .designer__bracket-intro { display: none; }
  .designer__intro { left: 6.672cqw; top: 46.463cqw; font-size: 1.4733cqw; }
  .designer__intro-2 { left: 9.834cqw; top: 52.285cqw; font-size: 1.4756cqw; }
  .designer__intro-3 { left: 6.111cqw; top: 61.48cqw; font-size: 1.4733cqw; }
  /* Designer01 (Designer01 9x16 Transition Start / 02 / Final, page y 1954) */
  .designer__bracket-cow { left: 33.704cqw; top: 175.926cqw; width: 54.907cqw; height: 1.667cqw; }
  .designer__getby { left: 34.248cqw; top: 178.211cqw; font-size: 2.2265cqw; }
  .designer__cowright { left: 7.037cqw; top: 194.167cqw; width: 61.296cqw; height: 78.333cqw; }
  .designer__cap-cow { left: 3.704cqw; top: 197.871cqw; font-size: 1.608cqw; }
  .designer__line-cow { left: 68.333cqw; top: 194.167cqw; width: 0.370cqw; height: 78.333cqw; }
  .designer__writeher { left: 10.926cqw; top: 252.222cqw; width: 84.630cqw; height: 47.870cqw; }
  .designer__cap-wh { left: 11.729cqw; top: 298.084cqw; font-size: 1.8329cqw; }
  .designer__affinity { left: 47.04cqw; top: 306.041cqw; font-size: 1.835cqw; }
  .designer__mack { left: 21.022cqw; top: 316.884cqw; font-size: 1.8218cqw; }
  /* Designer02 (page y 3612) */
  .designer__najwa { left: 0; top: 322.778cqw; width: 100cqw; height: 55.833cqw; }
  .designer__wecare { left: 0; top: 384.908cqw; width: 100cqw; height: 52.870cqw; }
  .designer__cap-wecare { left: 8.369cqw; top: 441.426cqw; font-size: 2.2631cqw; }
  .designer__firstsite { left: 50.555cqw; top: 441.575cqw; font-size: 1.9906cqw; }
  .designer__ebe { left: 4.639cqw; top: 457.341cqw; font-size: 18.2292cqw; }
  .designer__ebe-text { left: 32.094cqw; top: 468.492cqw; font-size: 4.2522cqw; line-height: 1.3; }
  .designer__cap-najwa, .designer__wphtml { display: none; }
  /* Designer05 (Designer05 9x16 start / Transition / Final, page y 5532): ebe LAM spread and
     Tomboy Chic swap; Luenell lies tilted under Tomboy (Final-full), lifts (Designer06 transition 02)
     and lands flat across the page (Designer06 transition 03). */
  .designer__lam { left: 2.593cqw; top: 489.722cqw; width: 82.130cqw; height: 53.148cqw; z-index: 3; }
  .designer__tomboy { left: 12.037cqw; top: 532.963cqw; width: 82.685cqw; height: 107.037cqw; z-index: 1; }
  .designer__luenell { left: 0; top: 653.519cqw; width: 100cqw; height: 64.815cqw; }
  .designer__luenell-cue { top: 671.852cqw; } /* 400px sooner */
  .designer__cap-luen { display: none; }
  [data-reveal="turn-luen"] { transform-origin: 0 0; transform: perspective(2400px) translate(-2.222cqw, -3.889cqw) rotate(7.1deg); }
  [data-reveal="turn-luen"].is-in { animation-name: dzPaperLand916; }

  /* Designer hero (Designer-hero-9x16): the sketches stack down the page */
  /* Hero sketches as Omar's stacking image: gallery behind, landing tilted in front at left, mobile in front at right */
  .designer__wire-gallery { left: 34.352cqw; top: 77.130cqw; width: 63.611cqw; height: 38.148cqw; transform: rotate(0.5deg); transform-origin: 50% 50%; }
  .designer__wire-landing { left: 5.926cqw; top: 94.167cqw; width: 63.704cqw; height: 38.148cqw; transform: rotate(-16.1deg); transform-origin: 50% 50%; }
  .designer__wire-mobile { left: 69.907cqw; top: 115.370cqw; width: 17.500cqw; height: 31.111cqw; transform: rotate(12deg); transform-origin: 50% 50%; }

  /* Writer · Intro (writer 9x16) */
  .writer__copy { font-size: 3.0761cqw; left: 24.986cqw; top: 23.069cqw; }
  .writer__copy-2 { left: 9.537cqw; top: 120.106cqw; font-size: 2.0718cqw; }
  .writer__copy-3 { left: 13.894cqw; top: 85.301cqw; font-size: 2.0594cqw; }
  .writer__copy-4 { left: 8.805cqw; top: 147.202cqw; font-size: 2.1045cqw; }
  .writer__title { left: 4.333cqw; top: 45.741cqw; width: 93.194cqw; height: 37.861cqw; }
  .writer__swash { opacity: 0.75; mix-blend-mode: normal; left: -14.731cqw; top: 64.833cqw; width: 126.852cqw; height: 30.648cqw; transform: rotate(-3.27deg); }
  .writer__box { mix-blend-mode: multiply; left: 4.185cqw; top: 73.444cqw; width: 10.454cqw; height: 7.426cqw; }
  .writer__box-2 { mix-blend-mode: multiply; left: 37.593cqw; top: 73.611cqw; width: 8.611cqw; height: 4.722cqw; }
  .writer__box-3 { mix-blend-mode: multiply; left: 63.241cqw; top: 74.593cqw; width: 12.5cqw; height: 6.481cqw; }

  .no-916 { display: none; }
  /* Writer · Blak Pulp (writer3-9x16): same line breaks as 16x9 */
  .writer-blak-pulp__note { left: 5cqw; top: 10.831cqw; font-size: 1.8007cqw; }
  .writer-blak-pulp__blak-pulp { left: 24.352cqw; top: 13.704cqw; width: 61.111cqw; height: 81.296cqw; }
  .writer-blak-pulp__copy { left: 27.319cqw; top: 108.42cqw; font-size: 2.077cqw; }
  .writer-blak-pulp__stroke { left: 24.815cqw; top: 143.796cqw; width: 44.907cqw; height: 3.241cqw; }
  .writer-blak-pulp__copy-2 { left: 27.32cqw; top: 143.698cqw; font-size: 2.0744cqw; }
  .writer-blak-pulp__copy-3 { left: 27.319cqw; top: 154.254cqw; font-size: 2.0763cqw; }
  .writer-blak-pulp__link { left: 4.537cqw; top: 148.426cqw; width: 6.019cqw; height: 6.019cqw; }
  .writer-blak-pulp__link-2 { left: 4.537cqw; top: 156.296cqw; width: 5.463cqw; height: 7.407cqw; }
  .writer-blak-pulp__link-3 { left: 5.370cqw; top: 165.370cqw; width: 4.074cqw; height: 7.963cqw; }

  /* Writer · Medium (writer4-9x16). The flip arrows aren't on the board: each keeps its 16x9 offset from its card. */
  .writer-medium__note { left: 3.796cqw; top: 3.333cqw; font-size: 1.8cqw; }
  .writer-medium__copy { left: 23.622cqw; top: 8.333cqw; font-size: 1.9343cqw; }
  .writer-medium__medium { left: 19.352cqw; top: 20.093cqw; width: 61.852cqw; height: 84.907cqw; }
  .writer-medium__svg { left: 31.389cqw; top: 108.611cqw; width: 41.759cqw; height: 3.889cqw; }
  .writer-medium__copy-2 { left: 21.578cqw; top: 112.311cqw; font-size: 1.9189cqw; }
  .writer-medium__copy-3 { left: 31.71cqw; top: 112.181cqw; font-size: 1.733cqw; }
  .writer-medium__copy-3 > [data-desc]:not([data-desc="0"]) { width: 37.4em; }
  .wr-card { width: 15.463cqw; height: 21.204cqw; }
  .writer-medium__link { left: 13.056cqw; top: 136.667cqw; }
  .writer-medium__link-2 { left: 41.944cqw; top: 136.667cqw; }
  .writer-medium__link-3 { left: 71.019cqw; top: 136.667cqw; }
  .writer-medium__link-4 { left: 5.926cqw; top: 162.593cqw; width: 5.370cqw; height: 7.407cqw; }
  .writer-medium__arrow-good-projects { left: -11.088cqw; top: 114.485cqw; width: 73.830cqw; height: 48.611cqw; }
  .writer-medium__arrow-self-regard { left: 43.190cqw; top: 127.316cqw; width: 33.067cqw; height: 37.435cqw; }
  .writer-medium__arrow-vincent { left: 29.420cqw; top: 108.479cqw; width: 102.887cqw; height: 55.743cqw; }

  /* Writer · Memoir (writer2 9x16): same line breaks as 16x9 */
  .writer-memoir__note { left: 4.561cqw; top: 11.85cqw; font-size: 1.8236cqw; }
  .writer-memoir__copy { left: 26.294cqw; top: 20.371cqw; font-size: 2.3527cqw; }
  .writer-memoir__stroke { left: 21.574cqw; top: 35.185cqw; width: 59.167cqw; height: 3.333cqw; }
  .writer-memoir__copy-2 { left: 26.294cqw; top: 37.037cqw; font-size: 2.3563cqw; }
  .writer-memoir__copy-3 { left: 26.294cqw; top: 55.556cqw; font-size: 2.3593cqw; }
  .writer-memoir__memoir { left: 23.704cqw; top: 88.704cqw; width: 61.019cqw; height: 81.389cqw; }
  .writer-memoir__link { left: 4.630cqw; top: 75.278cqw; width: 6.019cqw; height: 6.019cqw; }
  .writer-memoir__link-2 { left: 4.630cqw; top: 83.333cqw; width: 5.370cqw; height: 7.222cqw; }
  .writer-memoir__link-3 { left: 5.185cqw; top: 92.037cqw; width: 4.074cqw; height: 7.963cqw; }
}