/* 07 Lately + Work with me.
   LATELY: her feed flows along a wave (a marquee on a curved path, pushed by the scroll), a curved
   text loop rides above it, story highlights link into the page, a live-hearts follow badge and a
   film strip of more pictures close it.
   WORK: a black lacquer photo studio (softboxes, light cones, a glossy floor); three service cards
   whose photo fans open with the scroll and whose descriptions open on demand (disclosure buttons);
   crossed tapes; a polaroid collage with the business address beside the inquiry form (it prepares
   an email). Photos only move, scale and tilt flat (never in 3D). */

@property --hv { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ================================================================ LATELY */
.lately { padding: clamp(96px, 12vh, 150px) 0 0; overflow: hidden;
  background: radial-gradient(80% 60% at 82% 18%, rgba(255, 46, 136, 0.2), transparent 60%), radial-gradient(70% 55% at 12% 70%, rgba(233, 195, 138, 0.1), transparent 65%), linear-gradient(180deg, #0b0608 0%, #1a0812 48%, #0b0608 100%); }
.lt-bg { position: absolute; inset: 0; pointer-events: none; }
.lt-glow { position: absolute; border-radius: 50%; filter: blur(40px); }
.lt-g1 { left: -10vw; top: 30%; width: 50vw; height: 40vw; background: radial-gradient(closest-side, rgba(255, 46, 136, 0.28), transparent); }
.lt-g2 { right: -12vw; top: 48%; width: 46vw; height: 36vw; background: radial-gradient(closest-side, rgba(247, 168, 196, 0.18), transparent); }
.lt-word { position: absolute; left: 0; top: clamp(150px, 22vh, 230px); font: 400 clamp(180px, 30vw, 520px) / 0.8 var(--display); white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 214, 228, 0.09); letter-spacing: -0.02em; will-change: transform; }

.lt-head { position: relative; z-index: 40; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding: 0 var(--pad); }
.lt-title .h-display { margin-top: 18px; }
.lt-stories { display: flex; gap: clamp(12px, 1.6vw, 24px); padding-bottom: 6px; }
.lt-stories a { display: flex; flex-direction: column; align-items: center; gap: 9px; text-decoration: none; }
.lt-ring { --rs: clamp(64px, 5.6vw, 84px); position: relative; display: block; width: var(--rs); height: var(--rs); flex: none; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, #ffb36b, #ff2e88, #c2187a, #ff6aa8, #e9c38a, #ffb36b); transition: transform 0.6s var(--ease); }
.lt-ring::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: inherit; filter: blur(10px); opacity: 0; z-index: -1; transition: opacity 0.5s; }
.lt-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; border: 3px solid #12070c; }
.lt-st { font: 500 10.5px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); transition: color 0.3s; }
.lt-stories a:hover .lt-ring, .lt-stories a:focus-visible .lt-ring { transform: translateY(-4px) scale(1.06); }
.lt-stories a:hover .lt-ring::after { opacity: 0.8; }
.lt-stories a:hover .lt-st { color: #fff; }

/* the wave stage */
.lt-stage { position: relative; height: clamp(500px, 68vh, 680px); margin-top: clamp(30px, 5vh, 56px); --ch: clamp(168px, 25vh, 232px); }
.lt-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lt-glowline { fill: none; stroke: url(#lt-grad); stroke-width: calc(var(--ch) * 0.9); stroke-linecap: round; opacity: 0.16; filter: blur(26px); }
.lt-line { fill: none; stroke: url(#lt-grad); stroke-width: 2; stroke-dasharray: 2 12; stroke-linecap: round; opacity: 0.9; }
.lt-line-b { stroke: rgba(255, 214, 228, 0.35); stroke-width: 1.5; stroke-dasharray: 1 9; }
.lt-textline { fill: none; stroke: none; }
.lt-loop { font: italic 400 clamp(20px, 1.9vw, 30px) / 1 var(--serif); fill: var(--blush); letter-spacing: 0.02em; }
.lt-flow { list-style: none; margin: 0; padding: 0 var(--pad); display: flex; gap: 16px; overflow-x: auto; height: 100%; align-items: center; }
.lt-card { position: relative; flex: none; height: var(--ch); aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #1a0d13;
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.09); }
.lt-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.lt-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(140deg, rgba(255, 255, 255, 0.18), transparent 30%, transparent 75%, rgba(255, 46, 136, 0.12)); }
.lt-card.is-pola { padding: 7px 7px 28px; border-radius: 5px; background: #fbf8f5; box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.9); }
.lt-card.is-pola img { border-radius: 2px; }
.lt-card.is-pola::after { display: none; }
.lt-card.is-pola::before { content: "♥"; position: absolute; left: 10px; bottom: 6px; font: 14px/1 var(--sans); color: var(--hot); }
.js .lt-flow { position: absolute; inset: 0; display: block; overflow: visible; padding: 0; }
.js .lt-card { position: absolute; left: 0; top: 0; will-change: transform; }
.lt-heart { position: absolute; left: 50%; top: 46%; width: 44%; aspect-ratio: 1; margin: -22% 0 0 -22%; pointer-events: none; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45)); }
.lt-heart path { fill: #fff; }


/* follow */
.lt-cta { position: relative; z-index: 40; display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); padding: clamp(18px, 3vh, 40px) var(--pad) clamp(40px, 6vh, 70px); }
.lt-badge { position: relative; flex: none; display: grid; place-items: center; width: clamp(170px, 15vw, 220px); aspect-ratio: 1; border-radius: 50%; text-decoration: none; }
.lt-badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: lt-spin 22s linear infinite; overflow: visible; }
.lt-badge-ring text { font: 600 13.5px/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; fill: var(--ink); }
.lt-avatar { position: relative; width: 58%; aspect-ratio: 1; border-radius: 50%; padding: 4px; background: conic-gradient(from 200deg, #ffb36b, #ff2e88, #c2187a, #ff6aa8, #e9c38a, #ffb36b); box-shadow: 0 0 60px -6px rgba(255, 46, 136, 0.7); transition: transform 0.6s var(--ease); }
.lt-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 4px solid #12070c; }
.lt-badge:hover .lt-avatar { transform: scale(1.06); }
@keyframes lt-spin { to { transform: rotate(360deg); } }
.lt-live { position: absolute; left: 50%; top: 22%; width: 0; height: 0; pointer-events: none; }
.lt-live i { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; color: var(--hot); }
.lt-live svg { width: 100%; height: 100%; display: block; fill: currentColor; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); }
.lt-cta-copy { display: flex; flex-direction: column; gap: 14px; }
.lt-cta-copy .lede { max-width: 44ch; }
.lt-big { display: inline-flex; align-items: center; gap: 0.25em; width: fit-content; font: 400 clamp(46px, 6.4vw, 112px) / 1 var(--display); letter-spacing: -0.01em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.lt-big em { font: italic 400 0.8em/1 var(--serif); padding-right: 0.06em; background: linear-gradient(100deg, #ff2e88 10%, #ff8fb6 45%, #ffcf8a 75%, #ff2e88); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lt-shine 6s linear infinite; }
.lt-big i { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; margin-left: 0.3em; border-radius: 50%; font: 400 0.38em/1 var(--sans); font-style: normal; color: #fff; background: linear-gradient(120deg, #ff2e88, #ff6aa8 55%, #ffb36b); box-shadow: 0 14px 34px -12px rgba(255, 46, 136, 0.9); transition: transform 0.6s var(--ease); }
.lt-big:hover i { transform: rotate(45deg) scale(1.08); }
@keyframes lt-shine { to { background-position: -200% 0; } }
html:not(.js) .lt-strip { display: none; }

/* film strip */
.lt-strip { position: relative; z-index: 2; padding: 22px 0; gap: 0; overflow: hidden; transform: rotate(-1.6deg); margin: 0 -2vw; box-shadow: 0 -20px 60px -30px rgba(255, 46, 136, 0.4); }
.lt-strip-track { display: flex; gap: 10px; padding-left: 10px; will-change: transform; }
.lt-strip-track img { flex: none; height: clamp(92px, 11vh, 120px); width: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }

/* ================================================================ narrow screens */
@media (max-width: 1100px) {
  .lt-head { flex-direction: column; align-items: flex-start; gap: 26px; }
}
@media (max-width: 820px) {
  .lately { padding-top: 84px; }
  .lt-head { gap: 22px; }
  .lt-stories { width: calc(100% + var(--pad) * 2); margin: 0 calc(var(--pad) * -1); padding: 4px var(--pad) 8px; overflow-x: auto; scrollbar-width: none; gap: 14px; }
  .lt-stories::-webkit-scrollbar { display: none; }
  .lt-ring { width: 66px; }
  .lt-stage { height: 420px; --ch: 150px; margin-top: 4px; }
  .lt-loop { font-size: 19px; }
  .lt-cta { flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 6px; }
  .lt-badge { position: absolute; right: var(--pad); top: -40px; width: 132px; }
  .lt-badge-ring text { font-size: 15px; }
  .lt-cta-copy .lede { max-width: 58%; min-height: 132px; }
  .lt-big { font-size: clamp(34px, 9.6vw, 56px); gap: 0.2em; }
  .lt-big i { width: 1.6em; height: 1.6em; margin-left: 0.15em; }
  .lt-strip-track img { height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-badge-ring, .lt-big em { animation: none; }
}

/* ================================================================ WORK */
.work { padding: clamp(100px, 12vh, 150px) 0 clamp(70px, 9vh, 110px); overflow: hidden;
  background: radial-gradient(70% 45% at 50% 0%, rgba(255, 46, 136, 0.16), transparent 70%), radial-gradient(60% 40% at 50% 62%, rgba(74, 15, 38, 0.6), transparent 75%), linear-gradient(180deg, #0b0608, #060305 40%, #0a0507); }
.wk-bg { position: absolute; inset: 0; pointer-events: none; }
.wk-box { position: absolute; top: clamp(30px, 6vh, 70px); width: clamp(150px, 15vw, 260px); aspect-ratio: 1.35; border-radius: 16px; background: radial-gradient(70% 70% at 50% 50%, #fff, #ffe3ee 40%, #ff9cc4 80%, #e0577f); box-shadow: 0 0 0 6px #120a0e, 0 0 0 8px #2a1a21, 0 0 120px 20px rgba(255, 120, 180, 0.35); will-change: transform; }
.wk-box i { position: absolute; inset: 10%; border-radius: 8px; background: linear-gradient(90deg, transparent 49.5%, rgba(255, 255, 255, 0.5) 50%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgba(255, 255, 255, 0.5) 50%, transparent 50.5%); opacity: 0.6; }
.wk-box::after { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: 60vh; margin-left: -1.5px; background: linear-gradient(#3a2730, rgba(58, 39, 48, 0)); }
.wk-box-l { left: -11vw; top: -50px; transform: rotate(16deg); }
.wk-box-r { right: -4vw; transform: rotate(-14deg); }
.wk-cone { position: absolute; top: 0; width: 70vw; height: 120vh; mix-blend-mode: screen; filter: blur(8px); opacity: 0.9; }
.wk-cone-l { left: -14vw; background: conic-gradient(from 128deg at 12% 8%, transparent 0deg, rgba(255, 200, 225, 0.13) 12deg, rgba(255, 240, 246, 0.07) 30deg, transparent 44deg); }
.wk-cone-r { right: -14vw; background: conic-gradient(from 188deg at 88% 8%, transparent 0deg, rgba(255, 240, 246, 0.07) 14deg, rgba(255, 200, 225, 0.13) 32deg, transparent 44deg); }
.wk-sheen { position: absolute; left: -30%; top: -10%; width: 40%; height: 130%; background: linear-gradient(100deg, transparent, rgba(255, 214, 228, 0.06) 45%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 214, 228, 0.06) 55%, transparent); transform: translateX(calc(var(--sh, 0) * 320%)) skewX(-12deg); }
.wk-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; background: linear-gradient(180deg, transparent, rgba(255, 46, 136, 0.05) 30%, rgba(0, 0, 0, 0.4)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 120px); -webkit-mask: linear-gradient(transparent, #000 40%); mask: linear-gradient(transparent, #000 40%); }

.wk-head { position: relative; z-index: 40; padding: 0 var(--pad); max-width: 1100px; }
.wk-head .h-display { margin: 18px 0 18px; font-size: clamp(54px, 7.4vw, 124px); }
.wk-head .lede { max-width: none; }
.wk-head .lede em { display: block; }
.wk-cta { margin: 32px 0 0; }
.wk-cta .btn { padding: 18px 32px; }
.wk-cta .btn i, .wk-send .btn i { font-style: normal; }

/* service cards: the photo fans open with the scroll; the title is a disclosure button and the whole
   card toggles it; the description opens below the tags (grid rows 0fr -> 1fr) */
.wk-cards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; gap: clamp(18px, 2vw, 30px); padding: 0 var(--pad); margin-top: clamp(50px, 8vh, 90px); }
.wk-card { --sp: 0; --hv: 0; position: relative; display: flex; flex-direction: column; border-radius: 28px; padding: 16px 16px 24px; transition: --hv 0.7s var(--ease), box-shadow 0.6s var(--ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 46, 136, 0.16), transparent 60%), linear-gradient(165deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.01) 45%), #100810;
  box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.js .wk-card { cursor: pointer; }
.wk-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 120, 180, 0.95), rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.wk-card:hover, .wk-card.is-open { --hv: 1; box-shadow: 0 60px 110px -50px rgba(255, 46, 136, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.wk-fan { position: relative; height: clamp(250px, 30vh, 290px); border-radius: 20px; overflow: hidden; background: radial-gradient(90% 80% at 50% 100%, rgba(255, 46, 136, 0.28), transparent 70%), linear-gradient(180deg, #1b0c14, #12080e); }
.wk-fan::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 70%); }
.wk-ph { --s: calc(min(var(--sp), 1) * 0.82 + var(--hv) * 0.18); position: absolute; left: 50%; bottom: -18px; height: min(240px, 88%); aspect-ratio: 4 / 5; margin: 0; border-radius: 12px; overflow: hidden; background: #1a0d13; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.wk-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.wk-ph:nth-child(1) { transform: translate(calc(-50% - var(--s) * 62%), calc(var(--s) * 22px)) rotate(calc(var(--s) * -7.5deg)); }
.wk-ph:nth-child(3) { transform: translate(calc(-50% + var(--s) * 62%), calc(var(--s) * 22px)) rotate(calc(var(--s) * 7.5deg)); }
.wk-ph:nth-child(2) { z-index: 2; transform: translate(-50%, calc(var(--s) * -14px)) scale(calc(1 + var(--hv) * 0.04)); }
.wk-body { position: relative; z-index: 41; display: flex; flex-direction: column; gap: 12px; padding: 24px 12px 0; flex: 1; }
.wk-num { position: absolute; right: 10px; top: 14px; font: 400 64px/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(255, 46, 136, 0.55); transition: -webkit-text-stroke-color 0.5s; }
.wk-card.is-open .wk-num { -webkit-text-stroke-color: var(--hot); }
.wk-body h3 { margin: 0; font: 400 clamp(32px, 2.8vw, 46px) / 0.98 var(--display); padding-right: 70px; }
.wk-body h3 em { display: block; font: italic 400 0.86em/1.05 var(--serif); color: var(--hot); }
.wk-toggle { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wk-toggle:focus-visible { outline-offset: 8px; }
.wk-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.wk-tags li { padding: 7px 12px; border-radius: 999px; font: 500 10.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--blush); background: rgba(255, 46, 136, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 46, 136, 0.3); white-space: nowrap; }
.wk-more { display: grid; grid-template-rows: 1fr; }
.wk-more-in { min-height: 0; overflow: hidden; }
.wk-more p { margin: 8px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 38ch; text-wrap: pretty; }
.wk-ask { display: inline-flex; gap: 10px; align-items: center; margin: 18px 0 6px; padding-bottom: 7px; font: 600 11.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(90deg, var(--hot), #ffb36b) 0 100% / 100% 1px no-repeat; transition: background-size 0.5s var(--ease), color 0.3s; }
.wk-ask i { font-style: normal; color: var(--rose); transition: transform 0.5s var(--ease); }
.wk-ask:hover { color: var(--blush); background-size: 40% 1px; }
.wk-ask:hover i { transform: translateX(5px); }
.js .wk-more { grid-template-rows: 0fr; transition: grid-template-rows 0.75s var(--ease); }
.js .wk-more-in { visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity 0.3s, transform 0.6s var(--ease), visibility 0s 0.75s; }
.js .wk-card.is-open .wk-more { grid-template-rows: 1fr; }
.js .wk-card.is-open .wk-more-in { visibility: visible; opacity: 1; transform: none; transition: opacity 0.55s 0.15s, transform 0.8s 0.1s var(--ease), visibility 0s; }
/* the open / close mark: a round plus that turns to a cross, and a hairline that lights up */
.wk-pm { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 6px; }
html:not(.js) .wk-pm { display: none; }
.wk-pm i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); transition: background 0.4s, box-shadow 0.4s, transform 0.7s var(--ease); }
.wk-pm i::before, .wk-pm i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; border-radius: 1px; background: #fff; }
.wk-pm i::after { transform: rotate(90deg); }
.wk-pm::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)); }
.wk-pm::before { content: ""; position: absolute; left: 50px; right: 0; top: calc(50% + 3px); height: 1px; background: linear-gradient(90deg, var(--hot), #ffb36b 40%, rgba(255, 179, 107, 0)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease); }
.wk-pm { position: relative; }
.wk-card:hover .wk-pm i { background: rgba(255, 46, 136, 0.28); box-shadow: inset 0 0 0 1px rgba(255, 46, 136, 0.75); }
.wk-card.is-open .wk-pm i { transform: rotate(135deg); background: var(--hot); box-shadow: 0 10px 26px -8px rgba(255, 46, 136, 0.9); }
.wk-card.is-open .wk-pm::before { transform: scaleX(1); }

/* crossed tapes (scroll velocity) */
.wk-tapes { position: relative; height: clamp(170px, 20vw, 250px); margin: clamp(24px, 4vh, 50px) 0 clamp(10px, 3vh, 40px); pointer-events: none; }
.wk-tape { position: absolute; left: -6vw; right: -6vw; top: 50%; overflow: hidden; padding: clamp(10px, 1.1vw, 16px) 0; }
.wk-tape-a { transform: translateY(-62%) rotate(-4deg); background: linear-gradient(90deg, #ff2e88, #ff6aa8 50%, #ffb36b); box-shadow: 0 30px 60px -30px rgba(255, 46, 136, 0.8); z-index: 2; }
.wk-tape-b { transform: translateY(-38%) rotate(3.2deg); background: #0d070a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.12); }
.wk-tape-track { display: flex; align-items: center; gap: 0.5em; width: max-content; white-space: nowrap; font: 400 clamp(30px, 3.6vw, 58px) / 1 var(--display); will-change: transform; }
.wk-tape-track b { font: 400 0.6em/1 var(--sans); }
.wk-tape-a .wk-tape-track { color: #1c0911; }
.wk-tape-b .wk-tape-track span { color: transparent; -webkit-text-stroke: 1px var(--rose); font-style: italic; }
.wk-tape-b .wk-tape-track b { color: var(--hot); }

/* contact: collage (with the business address under it) + the inquiry form */
.wk-contact { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 5vw, 80px); align-items: center; padding: 0 var(--pad); }
.wk-collage { position: relative; height: clamp(580px, 78vh, 700px); }
.wk-pola { position: absolute; width: clamp(200px, 17vw, 260px); padding: 10px 10px 44px; will-change: transform; }
.wk-pola img { aspect-ratio: 4 / 5; object-position: 50% 22%; }
.wk-pola-2 img { aspect-ratio: 1360 / 1672; object-position: 50% 50%; }
.wk-pola-3 img { object-position: 50% 12%; }
.wk-pola figcaption { font-size: 20px; }
.wk-pola-2 figcaption { text-align: right; }
.wk-pola-1 { left: 2%; top: 5%; --r: -6deg; transform: rotate(var(--r)); }
.wk-pola-2 { left: 36%; top: 0; --r: 5deg; transform: rotate(var(--r)); z-index: 2; }
.wk-pola-3 { left: 18%; top: 37%; --r: -2deg; transform: rotate(var(--r)); z-index: 3; }
.wk-tape1 { left: 10%; top: 3%; transform: rotate(-18deg); z-index: 4; }
.wk-tape2 { left: 48%; top: -1%; transform: rotate(12deg); z-index: 4; }
.wk-tape3 { left: 28%; top: 35.5%; transform: rotate(-6deg); z-index: 4; }
.wk-collage .spark { z-index: 5; }
.wk-mail { position: absolute; z-index: 41; left: 0; right: 0; bottom: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.wk-mail span { font: 500 10.5px/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.wk-mail a { padding-bottom: 5px; font: italic 400 clamp(22px, 1.9vw, 30px) / 1.1 var(--serif); color: var(--ink); text-decoration: none;
  background: linear-gradient(90deg, var(--hot), #ffb36b) 0 100% / 100% 1px no-repeat; transition: color 0.3s, background-size 0.5s var(--ease); }
.wk-mail a:hover { color: var(--rose); background-size: 40% 1px; }

.wk-form { position: relative; z-index: 41; display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 3.4vw, 50px); border-radius: 30px;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255, 46, 136, 0.16), transparent 55%), linear-gradient(170deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 40%), rgba(16, 8, 13, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 60px 120px -50px rgba(0, 0, 0, 0.95), 0 0 120px -40px rgba(255, 46, 136, 0.5); scroll-margin-top: 100px; }
.wk-vf { position: absolute; width: 30px; height: 30px; border: 2px solid rgba(255, 255, 255, 0.8); pointer-events: none; }
.wk-vf-tl { left: -14px; top: -14px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.wk-vf-tr { right: -14px; top: -14px; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.wk-vf-bl { left: -14px; bottom: -14px; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.wk-vf-br { right: -14px; bottom: -14px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.wk-form.is-armed .wk-vf { border-color: var(--hot); filter: drop-shadow(0 0 8px rgba(255, 46, 136, 0.8)); transition: border-color 0.4s, filter 0.4s; }
.wk-form h3 { margin: 0; font: 400 clamp(38px, 3.6vw, 60px) / 0.98 var(--display); text-wrap: balance; outline: none; }
.wk-form h3 em { display: block; margin-top: 0.06em; font: italic 400 0.86em/1.05 var(--serif); color: var(--hot); }
.wk-form-lede { margin: -2px 0 6px; color: var(--muted); font-size: 15.5px; text-wrap: balance; }
.wk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wk-f { position: relative; display: block; }
.wk-f input, .wk-f select, .wk-f textarea { width: 100%; margin: 0; padding: 26px 18px 10px; border: 0; border-radius: 16px; font: 400 16px/1.4 var(--sans); color: var(--ink); background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); outline: none; transition: box-shadow 0.4s var(--ease), background 0.4s; appearance: none; -webkit-appearance: none; }
.wk-f input::placeholder { color: transparent; }
.wk-f textarea { resize: vertical; min-height: 136px; padding-top: 30px; }
.wk-f textarea::placeholder { color: var(--faint); opacity: 1; }
.wk-f select { cursor: pointer; padding-right: 44px; }
.wk-f select option { color: #1c0911; background: #fff; }
.wk-sel::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid var(--rose); border-bottom: 1.5px solid var(--rose); transform: rotate(45deg); pointer-events: none; }
.wk-f > span { position: absolute; left: 18px; top: 18px; font: 400 15.5px/1.2 var(--sans); color: var(--faint); pointer-events: none; transform-origin: 0 0; transition: transform 0.35s var(--ease), color 0.35s; }
.wk-f input:focus + span, .wk-f input:not(:placeholder-shown) + span, .wk-msg > span, .wk-f select:focus + span, .wk-f select:valid + span { transform: translateY(-9px) scale(0.72); color: var(--rose); letter-spacing: 0.06em; }
.wk-f input:focus, .wk-f select:focus, .wk-f textarea:focus { background: rgba(255, 46, 136, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 46, 136, 0.85), 0 0 0 4px rgba(255, 46, 136, 0.15), 0 0 40px -10px rgba(255, 46, 136, 0.6); }
.wk-f input:user-invalid, .wk-f select:user-invalid, .wk-f textarea:user-invalid { box-shadow: inset 0 0 0 1px rgba(255, 120, 140, 0.95), 0 0 0 4px rgba(255, 90, 120, 0.14); }
.wk-send { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.wk-send .btn { padding: 18px 34px; }
.wk-status { margin: 0; font: italic 400 17px/1.3 var(--serif); color: var(--rose); }

@media (max-width: 1100px) {
  .wk-cards { grid-template-columns: 1fr 1fr; }
  .wk-cards .wk-card:last-child { grid-column: 1 / -1; }
  .wk-contact { grid-template-columns: 1fr; }
  .wk-collage { height: clamp(500px, 64vw, 620px); max-width: 640px; width: 100%; margin: 0 auto; }
}
@media (max-width: 820px) {
  .work { padding-top: 90px; }
  .wk-head .h-display { font-size: clamp(50px, 14vw, 72px); max-width: 7ch; }
  .wk-head .lede { max-width: 30ch; }
  .wk-head .kicker { letter-spacing: 0.24em; }
  .wk-cta { margin-top: 26px; }
  .wk-cards { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
  .wk-cards .wk-card:last-child { grid-column: auto; }
  .wk-card { display: grid; grid-template-columns: 44% 1fr; gap: 0; padding: 12px; border-radius: 24px; }
  .wk-fan { height: 100%; min-height: 236px; border-radius: 16px; }
  .wk-ph { height: 140px; top: 50%; bottom: auto; }
  .wk-ph:nth-child(1) { transform: translate(calc(-50% - var(--s) * 18px), calc(-50% - var(--s) * 76px)) rotate(calc(var(--s) * -7deg)); }
  .wk-ph:nth-child(3) { transform: translate(calc(-50% + var(--s) * 18px), calc(-50% + var(--s) * 76px)) rotate(calc(var(--s) * 6deg)); }
  .wk-ph:nth-child(2) { transform: translate(calc(-50% + var(--s) * 4px), -50%) scale(calc(1.06 + var(--hv) * 0.04)); }
  .wk-body { padding: 10px 6px 4px 16px; gap: 10px; }
  .wk-num { font-size: min(40px, 10.4vw); right: 0; top: 4px; }
  .wk-body h3 { font-size: min(30px, 7.6vw); padding-right: 40px; }
  .wk-body h3 em { margin-right: -40px; }
  .wk-more p { margin-top: 2px; font-size: 14.5px; line-height: 1.5; }
  .wk-tags { gap: 5px; }
  .wk-tags li { padding: 6px 9px; font-size: 9.5px; letter-spacing: 0.1em; }
  .wk-ask { margin: 12px 0 4px; font-size: min(10px, 2.6vw); letter-spacing: 0.1em; white-space: nowrap; }
  .wk-ask i { display: none; }
  .wk-pm { gap: 10px; }
  .wk-pm i { width: 32px; height: 32px; }
  .wk-pm::before { left: 42px; }
  .wk-tapes { height: 150px; margin: 36px 0 10px; }
  .wk-tape-track { font-size: 30px; }
  .wk-collage { height: 500px; }
  .wk-pola { width: 46%; padding: 7px 7px 34px; }
  .wk-pola figcaption { font-size: 16px; bottom: 9px; }
  .wk-pola-1 { left: 0; top: 4%; }
  .wk-pola-2 { left: 52%; top: 0; }
  .wk-pola-3 { left: 26%; top: 31%; }
  .wk-tape1 { left: 8%; top: 2%; width: 66px; } .wk-tape2 { left: 64%; top: -2%; width: 66px; } .wk-tape3 { left: 40%; top: 29.5%; width: 66px; }
  .wk-mail { gap: 10px; }
  .wk-mail a { font-size: 24px; }
  .wk-form { padding: 26px 18px 24px; border-radius: 24px; gap: 14px; }
  .wk-form h3 { font-size: clamp(36px, 10vw, 44px); }
  .wk-vf { width: 22px; height: 22px; }
  .wk-vf-tl, .wk-vf-bl { left: -8px; } .wk-vf-tr, .wk-vf-br { right: -8px; } .wk-vf-tl, .wk-vf-tr { top: -8px; } .wk-vf-bl, .wk-vf-br { bottom: -8px; }
  .wk-row { grid-template-columns: 1fr; }
  .wk-box { width: 120px; }
  .wk-box-r { top: -26px; }
  .wk-box-l, .wk-cone-l { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-card { --sp: 1; }
  .js .wk-more, .js .wk-more-in, .wk-pm i, .wk-pm::before { transition: none !important; }
}