/* Work: the eight original Canva panels, with a separately composed phone layout. */
#work { background: var(--crimson); }
#work .work-hero, #work .work-case, #work .work-testimonials { position: relative; isolation: isolate; overflow: clip; }
#work .work-hero { background: var(--forest); }
#work .work-hero > .frame, #work .work-case > .frame, #work .work-testimonials > .frame { height: calc(576 * var(--u)); }
#work .work-title { position: absolute; top: calc(var(--title-y) * var(--u)); left: calc(var(--title-x) * var(--u)); width: calc(1024 * var(--u)); transform: translateX(-50%); font-family: var(--font-display); font-size: calc(var(--title-size) * var(--u)); font-weight: 400; line-height: calc(var(--title-leading) * var(--u)); text-align: center; text-transform: uppercase; --step: 90ms; }
#work .work-title-line { display: block; white-space: nowrap; }
#work .work-title-ink { display: inline-block; transform: scaleX(var(--work-fit, 1)); }
#work .work-vinyl { position: absolute; inset: 0; z-index: -1; background: var(--forest); }
#work .work-vinyl-settle { position: absolute; inset: 0; }
#work .work-vinyl-host { position: absolute; left: 50%; top: 50%; width: max(calc(576 * var(--u)), 56.02vw); height: max(calc(1028.25 * var(--u)), 100vw); max-width: none; transform: translate(-50%, -50%) rotate(-90deg); }
/* Concentric least-squares edge fit: center (184.881,905.531), radius 806.008.
   Disc canvas is native 1617px square, with a one-pixel feather. */
#work .work-vinyl-host { overflow: hidden; }
#work .work-vinyl-photo { width: 100%; height: 100%; max-width: none; }
#work .work-disc-position { position: absolute; left: -64.158333%; top: 5.615220%; width: 166.358025%; height: 93.576389%; }
#work .work-disc-spin, #work .work-disc-spin img { width: 100%; height: 100%; max-width: none; }
#work .work-disc-spin { transform-origin: 50% 50%; }
#work .work-tonearm { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; filter: drop-shadow(-12px 18px 10px rgb(0 0 0 / .38)); }
#work .work-hero { touch-action: pan-y; }
#work .work-hero.is-record-ready { cursor: grab; }
#work .work-hero.is-scratching, #work .work-note.is-pulling { cursor: grabbing; user-select: none; }
#work .work-hero > .frame { pointer-events: none; }
#work .work-note.is-pulling { z-index: 2; }
#work .work-note-pivot { position: absolute; left: calc(var(--pivot-x) * var(--u)); top: calc(var(--pivot-y) * var(--u)); width: 0; height: 0; }
#work .work-photo-tilt { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
#work .work-photo-glare, #work .work-photo-holo { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#work .work-photo-glare { background: radial-gradient(ellipse at var(--glare-x, 50%) var(--glare-y, 50%), rgb(255 255 255 / .27), transparent 65%); mix-blend-mode: screen; }
#work .work-photo-holo { display: none; }
#work .work-photo:has(img[src*="kimchi"]) .work-photo-holo { display: block; background: linear-gradient(var(--holo-angle, 120deg), transparent 12%, rgb(255 117 231 / .23) 27%, rgb(255 244 147 / .26) 38%, rgb(120 255 224 / .22) 48%, rgb(135 171 255 / .27) 58%, transparent 78%); mix-blend-mode: color-dodge; }
@media (hover: hover) and (pointer: fine) { #work .work-note { cursor: grab; } }
#work .work-note-breeze { position: relative; width: 100%; height: 100%; transform-origin: calc(var(--pivot-x) * var(--u)) calc(var(--pivot-y) * var(--u)); }
#work .work-marker { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#work .work-marker path { vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .js #work .work-marker:not(.is-drawn) path { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
}
#work .work-hero-title { --step: 110ms; }
#work .work-intro { position: absolute; top: calc(381.85 * var(--u)); left: calc(758 * var(--u)); width: calc(214 * var(--u)); text-align: center; font-size: calc(34.3939 * var(--u)); font-weight: 700; line-height: calc(26.10834 * var(--u)); letter-spacing: -.045em; }
#work .work-intro > span { display: block; }
#work .work-case { background: var(--crimson); }
#work .work-green { background: var(--forest); }
#work .work-pattern { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
#work .work-pattern-drift { position: absolute; inset: -12px 0; }
#work .work-cow { position: absolute; left: calc(var(--pattern-x) * var(--u)); top: calc(var(--pattern-y) * var(--u) + 12px); width: max(calc(1077 * var(--u)), 105.1758%); height: max(calc(716.25 * var(--u)), 69.95vw); max-width: none; opacity: .1; }
#work .work-motif { position: absolute; left: 0; top: 12px; width: 100%; height: calc(576 * var(--u)); opacity: .22; }
#work .work-photo { position: absolute; top: calc(var(--photo-y) * var(--u)); left: calc(var(--photo-x) * var(--u)); width: calc(var(--photo-w) * var(--u)); height: calc(var(--photo-h) * var(--u)); border-radius: calc(16 * var(--u)); overflow: hidden; }
/* A shape endpoint is required: inset() to none is a discrete clip-path change.
   Keep specificity below the shared hidden-state rule. */
:where(#work) .work-photo[data-reveal="wipe"] { clip-path: inset(0 0 0 0); }
#work .work-photo-settle { position: absolute; inset: 0; }
#work .work-photo img { position: absolute; top: calc(var(--image-top) * var(--u)); width: 100%; height: calc(var(--image-h) * var(--u)); max-width: none; }
#work .work-case-copy p { position: absolute; left: calc(var(--copy-x) * var(--u)); top: calc(var(--copy-y) * var(--u)); font-size: max(15px, calc(18 * var(--u))); line-height: calc(21 * var(--u)); font-weight: 400; letter-spacing: 0; }
#work .work-copy-line { display: block; white-space: nowrap; }
#work .work-case-copy strong { font-weight: 700; }
#work .work-testimonials { background: var(--oxblood); }
#work .work-note { position: absolute; left: calc(var(--note-x) * var(--u)); top: calc(var(--note-y) * var(--u)); width: calc(var(--note-w) * var(--u)); height: calc(var(--note-h) * var(--u)); color: var(--black); transform-origin: calc(var(--pivot-x) * var(--u)) calc(var(--pivot-y) * var(--u)); }
#work .work-note-sway { position: relative; width: 100%; height: 100%; transform-origin: calc(var(--pivot-x) * var(--u)) calc(var(--pivot-y) * var(--u)); }
#work .work-note-paper, #work .work-note-heart, #work .work-note-heart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#work .work-note-heart { transform-origin: calc(var(--pivot-x) * var(--u)) calc(var(--pivot-y) * var(--u)); --tilt: 0deg; }
#work .work-note-quote, #work .work-note-credit { position: absolute; left: calc(var(--note-tx) * var(--u)); top: calc(var(--note-ty) * var(--u)); font-weight: 400; letter-spacing: -.005em; }
#work .work-note-quote { font-size: calc(31.6125 * var(--u)); line-height: calc(24 * var(--u)); }
#work .work-note-credit { font-size: max(13px, calc(17.40273 * var(--u))); line-height: calc(13.21191 * var(--u)); }
#work .work-note-quote span, #work .work-note-credit span { display: block; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  #work .work-vinyl-settle { transition: scale 1800ms var(--ease-out); }
  .js #work .work-vinyl:not(.is-in) .work-vinyl-settle { scale: 1.06; }
  #work .work-photo-settle { transition: scale 1400ms var(--ease-out); }
  .js #work .work-photo:not(.is-in) .work-photo-settle { scale: 1.12; }
  @media (hover: hover) and (pointer: fine) {
    #work .work-photo { perspective: 900px; }
    #work .work-photo-glare, #work .work-photo-holo { transition: opacity 220ms ease-out; }
    #work .work-photo.is-tilting .work-photo-glare, #work .work-photo.is-tilting .work-photo-holo { opacity: 1; }
  }
}
/* The 15px reading floor needs more vertical space on small tablets. */
@media (min-width: 700px) and (max-width: 999px) {
  #work .work-case > .frame { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; height: auto; min-height: calc(576 * var(--u)); padding: 10px 12px 20px; }
  #work .work-case .work-photo { position: relative; inset: auto; width: 100%; height: auto; min-height: 450px; grid-column: 1; grid-row: 1; }
  #work .work-case .work-photo img { top: 0; height: 100%; object-fit: cover; }
  #work .work-case .work-case-copy { grid-column: 2; grid-row: 1; min-width: 0; }
  #work .work-green .work-photo { grid-column: 2; }
  #work .work-green .work-case-copy { grid-column: 1; }
  #work .work-case .work-title { position: relative; inset: auto; width: 100%; transform: none; margin: 10px 0 16px; font-size: calc(var(--title-size) * var(--u)); }
  #work .work-case .work-title-ink { transform: scaleX(var(--work-tablet-fit, var(--work-fit, 1))); }
  #work .work-case-copy p { position: relative; inset: auto; font-size: 15px; line-height: 1.35; margin-top: 16px; }
  #work .work-copy-line { display: inline; white-space: normal; }
  #work .work-metric-break { display: none; }
  #work .work-motif { height: 100%; }
  #work .work-cow { height: 100%; object-fit: cover; }
}
@media (max-width: 699px) {
  #work .work-hero > .frame { height: calc(620 * var(--m)); }
  #work .work-vinyl-host { width: calc(620 * var(--m)); height: calc(1106.8 * var(--m)); left: 44%; }
  #work .work-hero-title { top: calc(152 * var(--m)); left: 0; width: 100%; transform: none; font-size: calc(61 * var(--m)); line-height: .79; }
  #work .work-hero-title .work-title-line:last-child { margin-top: calc(8 * var(--m)); font-size: calc(45 * var(--m)); }
  #work .work-title-ink { transform: none; }
  #work .work-intro { top: auto; bottom: calc(45 * var(--m)); left: auto; right: max(22px, env(safe-area-inset-right, 0px)); width: calc(220 * var(--m)); font-size: calc(26 * var(--m)); line-height: .95; text-align: right; letter-spacing: -.045em; }
  #work .work-intro > span { display: inline; }
  #work .work-case > .frame { height: auto; padding: calc(12 * var(--m)) 0 calc(42 * var(--m)); }
  #work .work-photo { position: relative; inset: auto; width: calc(100% - 24 * var(--m)); height: calc(425 * var(--m)); margin-inline: auto; border-radius: calc(13 * var(--m)); }
  #work .work-photo img { top: 0; height: 100%; object-fit: cover; }
  #work .work-namshi .work-photo { height: calc(450 * var(--m)); }
  #work .work-namshi .work-photo img { object-position: center 57%; }
  #work .work-flaunt .work-photo { height: auto; aspect-ratio: 522 / 683; } /* the whole cover, so "BEBE REXHA" isn't sliced */
  #work .work-flaunt .work-photo img { object-position: top; }
  #work .work-case-copy { padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
  #work .work-case .work-title { position: relative; inset: auto; width: 100%; transform: none; margin: calc(29 * var(--m)) 0 calc(25 * var(--m)); font-size: calc(48 * var(--m)); line-height: .82; letter-spacing: -.045em; }
  #work .work-namshi .work-title { font-size: calc(62 * var(--m)); }
  #work .work-ucla .work-title, #work .work-fab .work-title { font-size: calc(35 * var(--m)); }
  #work .work-loreal .work-title { font-size: calc(42 * var(--m)); }
  #work .work-case-copy p { position: relative; inset: auto; font-size: max(15px, calc(16 * var(--m))); line-height: 1.48; letter-spacing: 0; }
  #work .work-case-copy p + p { margin-top: calc(21 * var(--m)); }
  #work .work-copy-line { display: inline; white-space: normal; }
  #work .work-metric-break { display: none; }
  #work .work-pattern-drift { inset: -12px 0; }
  #work .work-cow { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
  #work .work-motif { top: 0; width: 180%; height: 100%; }
  #work .work-testimonials > .frame { height: auto; padding: calc(40 * var(--m)) 0 calc(45 * var(--m)); }
  #work .work-testimonials-title { position: relative; inset: auto; width: 100%; transform: none; font-size: calc(46 * var(--m)); line-height: .9; letter-spacing: -.055em; }
  #work .work-notes { display: flex; flex-direction: column; gap: calc(22 * var(--m)); padding-top: calc(44 * var(--m)); }
  #work .work-note { --u: calc(var(--m) * .98); position: relative; inset: auto; flex: none; width: calc(var(--note-w) * var(--u)); height: calc(var(--note-h) * var(--u)); margin-left: calc(15 * var(--m)); transform: rotate(-2deg); }
  #work .work-note-mehak { align-self: flex-end; margin-right: calc(11 * var(--m)); transform: rotate(2deg); }
  #work .work-note-alex { margin-left: calc(18 * var(--m)); transform: rotate(-1deg); }
  #work .work-note-quote { font-size: calc(31.6125 * var(--u)); line-height: calc(24 * var(--u)); }
  #work .work-note-credit { font-size: calc(17.40273 * var(--u)); }
}