/* The dossier is one object: the cover turns on its spine while the contents unfold. */
@media (min-width: 761px) {
  .studio-person-row { position: relative; min-height: 805px; grid-template-columns: 46% 54%; padding: 58px 2vw 58px 0; }
  .studio-person-intro { position: relative; z-index: 1; grid-column: 1; grid-row: 1; transition: opacity .32s ease, transform .55s ease; }
.studio-person-row.is-reversed .studio-person-intro { grid-column: 2; grid-row: 1; }
.studio-person-intro .person-role { display: block; margin: 18px 0 16px; color: #174989; font: 10px/1.25 Mono,monospace; letter-spacing: .08em; text-transform: uppercase; }
.studio-person-row.is-open .studio-person-intro { opacity: 0; transform: translateY(16px); pointer-events: none; }
  .studio-person-art, .studio-person-row.is-reversed .studio-person-art { grid-column: 1 / -1; grid-row: 1; width: 100%; min-height: 690px; pointer-events: none; }
  .studio-person-folder { pointer-events: auto; }
  .studio-person-folder, .studio-person-row.is-reversed .studio-person-folder { width: min(41vw, 510px); height: 620px; transform: translateX(27vw) rotate(-3deg); }
  .studio-person-row.is-reversed .studio-person-folder { transform: translateX(-27vw) rotate(3deg); }
  .studio-person-folder:hover, .studio-person-folder:focus-visible { transform: translateX(27vw) rotate(-1deg) translateY(-7px); }
  .studio-person-row.is-reversed .studio-person-folder:hover, .studio-person-row.is-reversed .studio-person-folder:focus-visible { transform: translateX(-27vw) rotate(1deg) translateY(-7px); }
  .studio-person-folder[aria-expanded=true], .studio-person-row.is-reversed .studio-person-folder[aria-expanded=true] { transform: translateX(50%) rotate(0); }
}

.studio-person-folder { z-index: 3; padding: 0; border: 0; background: transparent; cursor: pointer; transform-style: preserve-3d; perspective: 1500px; transition: transform .92s cubic-bezier(.2,.72,.2,1); filter: drop-shadow(0 22px 23px #122c6030); }
.folder-underlay { z-index: -2; border-radius: 5px 20px 18px 5px; }
.folder-underlay-paper { background: #e9dfca; }
.folder-underlay-grid { background-color: #d4e1f3; }
.studio-person-folder[aria-expanded=true] .folder-underlay { opacity: 0; }

.folder-back { position: absolute; z-index: 0; top: -7px; bottom: -7px; left: -100%; width: 200%; inset-inline-end: auto; overflow: hidden; transform: none; border-radius: 16px; background: #0a4ac5; box-shadow: 0 25px 50px #10234a30; clip-path: inset(0 0 0 50% round 15px); transition: clip-path 1s cubic-bezier(.2,.75,.2,1), box-shadow .8s ease; }
.folder-back::before { content: ""; position: absolute; inset: 12px; border: 1px solid #ffffff2a; border-radius: 8px; pointer-events: none; }
.folder-back::after { content: ""; position: absolute; left: calc(50% - 4px); top: 0; bottom: 0; width: 8px; background: linear-gradient(90deg,#001f6b8a,#ffffff21 42%,#001f6b80); opacity: 0; transition: opacity .25s ease .3s; }
.studio-person-folder[aria-expanded=true] .folder-back { inset-inline-end: auto; transform: none; clip-path: inset(0 0 0 0 round 15px); }
.studio-person-folder[aria-expanded=true] .folder-back::after { opacity: 1; }
.folder-pocket { position: absolute; right: 0; bottom: 0; width: 50%; height: 16%; background: #073ea9; clip-path: polygon(0 55%, 100% 0, 100% 100%, 0 100%); opacity: 0; transition: opacity .3s ease .55s; }
.studio-person-folder[aria-expanded=true] .folder-pocket { opacity: 1; }

.folder-paper { position: absolute; z-index: 1; top: 4%; bottom: 5%; left: -94%; right: auto; width: 88%; inset-inline-end: auto; overflow: visible; padding: 0; border-radius: 5px 12px 6px 4px; background: #f4eddd; background-image: linear-gradient(110deg,#fff8,transparent 35%,#b9a98c13); box-shadow: 2px 10px 22px #182d5530; opacity: 0; transform-origin: right center; transform: rotateY(-88deg); transition: transform .85s cubic-bezier(.2,.75,.2,1), opacity .12s ease; }
.studio-person-folder[aria-expanded=true] .folder-paper { transform: rotateY(0); opacity: 1; box-shadow: 2px 10px 22px #182d5530; transition: transform .95s cubic-bezier(.2,.75,.2,1) .08s, opacity .28s ease .14s; }
.folder-paper .folder-polaroid { top: 4%; left: 8%; width: 45%; padding: 7px 7px 43px; transform: rotate(-2.5deg); }
.folder-paper .folder-polaroid img { height: 175px; }
.folder-paper .folder-polaroid-placeholder { height: 220px; }
.folder-paper .folder-paperclip { top: 2%; left: 8%; }
.folder-paper .folder-inner-seal { position: absolute; top: 7%; right: 8%; width: 21%; height: auto; max-width: 85px; }
.folder-paper > small { position: absolute; left: 9%; top: 46%; color: #154585; font: 9px Mono,monospace; letter-spacing: .04em; }
.folder-paper > strong { position: absolute; left: 9%; top: 52%; right: 8%; color: #0b377d; font: 400 clamp(42px,4.3vw,62px)/.88 Georgia,serif; letter-spacing: -.06em; }
.folder-paper > em { position: absolute; left: 9%; top: 72%; right: 8%; bottom: auto; color: #0b377d; font: 9px Mono,monospace; font-style: normal; }
.folder-paper > p { position: absolute; left: 9%; right: 10%; top: 78%; bottom: 5%; overflow: auto; margin: 0; padding-top: 13px; border-top: 1px solid #194b8780; font: 11px/1.42 Mono,monospace; color: #263b5a; }

.folder-front { position: absolute; z-index: 4; inset: 0; overflow: visible; display: block; padding: 0; transform-origin: left center; transform-style: preserve-3d; backface-visibility: hidden; border: 1px solid #1149ae; border-radius: 8px 22px 20px 8px; background: radial-gradient(#ffffff10 .6px,transparent .8px) 0 0 / 4px 4px, linear-gradient(115deg,#0950d4,#0847c2 72%,#0b3daa); color: #fff; box-shadow: 0 18px 44px #14234a36; transition: transform 1s cubic-bezier(.2,.74,.18,1), opacity .01s linear, box-shadow .6s ease; }
.folder-front::before { content: ""; position: absolute; z-index: -1; right: 10%; top: -23px; width: 31%; height: 25px; background: #0b4ac8; border: 1px solid #1149ae; border-bottom: 0; border-radius: 13px 13px 0 0; }
.studio-person-folder:hover .folder-front, .studio-person-folder:focus-visible .folder-front { transform: rotateY(-18deg); box-shadow: 15px 20px 42px #14234a46; }
.studio-person-folder[aria-expanded=true] .folder-front, .studio-person-folder[aria-expanded=true]:hover .folder-front { transform: rotateY(-178deg); opacity: 0; transition: transform 1s cubic-bezier(.2,.74,.18,1), opacity .01s linear .98s, box-shadow .6s ease; }
.folder-spine { left: 14px; width: 8px; border-inline: 1px solid #002b7d66; }
.folder-notch { right: -1px; top: 43%; width: 17px; height: 82px; border-radius: 17px 0 0 17px; background: #e9dfca; box-shadow: -2px 0 3px #092d7d40; }
.folder-front .folder-polaroid-cover { top: 5%; left: 7%; width: 43%; padding: 7px 7px 43px; transform: rotate(-5deg); }
.folder-front .folder-polaroid-cover img { height: 140px; }
.folder-front .folder-polaroid-placeholder { height: 185px; }
.folder-polaroid { box-sizing: border-box; background: #faf8f2; box-shadow: 0 7px 13px #0a1b3c40; }
.folder-polaroid img { object-position: 50% 27%; filter: grayscale(1) contrast(1.18); }
.folder-polaroid i { left: 3%; right: 3%; bottom: 8px; color: #103b7b; font: 400 clamp(20px,2.3vw,29px)/.9 "Snell Roundhand","SignPainter","Brush Script MT",cursive; white-space: nowrap; transform: rotate(-4deg); }
.folder-polaroid-jerry { overflow: hidden; }
.folder-polaroid-jerry img { transform: scale(1.34); transform-origin: 50% 58%; }
.folder-polaroid-jerry i { z-index: 1; font-size: clamp(16px,1.7vw,22px); }
.folder-polaroid-ready { overflow: visible; padding: 0 !important; background: transparent; box-shadow: none; }
.folder-polaroid-ready img { display: block; width: 100%; height: auto !important; transform: none !important; filter: none !important; }
.folder-polaroid-ready i { display: none; }
.folder-paper .folder-polaroid-ready { width: 34%; }
.folder-front .folder-polaroid-cover.folder-polaroid-ready { width: 33%; }
.studio-network { display: flex; flex-direction: column; }
.studio-network > header { order: 0; }
.studio-person-row[data-person-order="1"] { order: 1; }
.studio-person-row[data-person-order="2"] { order: 2; }
.studio-person-row[data-person-order="3"] { order: 3; }
.folder-polaroid-placeholder b { font-size: 57px; }
.folder-paperclip, .folder-front .folder-paperclip-cover { position: absolute; z-index: 8; display: block; top: -2%; left: 9%; width: 34px; height: 84px; border: 0; border-radius: 0; box-shadow: none; transform: rotate(7deg); filter: drop-shadow(2px 3px 2px #1020445e); }
.folder-front .folder-cover-seal { position: absolute; top: 40%; left: 8%; width: 15%; max-width: 76px; filter: brightness(0) invert(1); }
.folder-front > small { position: absolute; top: 57%; left: 8%; margin: 0; font: 9px Mono,monospace; letter-spacing: .05em; }
.folder-front > strong { position: absolute; top: 62%; left: 8%; right: 8%; margin: 0; font: 400 clamp(42px,4.5vw,64px)/.83 Georgia,serif; letter-spacing: -.065em; white-space: nowrap; }
.folder-front > em { position: absolute; left: 8%; bottom: 5%; margin: 0; font: 9px Mono,monospace; font-style: normal; letter-spacing: .08em; }
.folder-front:has(.folder-polaroid-cover) .folder-cover-seal { top: 46%; }
.folder-front:has(.folder-polaroid-cover) > small { top: 59%; }
.folder-front:has(.folder-polaroid-cover) > strong { top: 65%; }

.studio-person-sheet, .studio-person-row.is-reversed .studio-person-sheet { position: absolute; z-index: 1; box-sizing: border-box; top: 9%; left: calc(50% + 22px); right: auto; width: min(37vw,445px); min-height: 0; height: 83%; margin: 0; padding: 46px 37px 28px; border: 1px solid #d9c9ad; border-radius: 2px; background: #f4eddd; background-image: linear-gradient(100deg,#fff8,transparent 42%,#b9a98c11); box-shadow: 5px 10px 22px #14295430; color: #173b78; opacity: 0; pointer-events: none; transform: translateX(26px) rotateY(-12deg) scale(.98); transform-origin: left center; transition: opacity .18s ease, transform .28s ease; }
.studio-person-sheet[hidden] { display: none; }
.studio-person-sheet.is-visible, .studio-person-row.is-reversed .studio-person-sheet.is-visible { z-index: 5; opacity: 1; transform: translateX(0) rotateY(0) scale(1); transition: opacity .32s ease .32s, transform .72s cubic-bezier(.2,.75,.2,1) .12s; }
.studio-person-sheet::before { inset: -13px -13px 9px 13px; border: 1px solid #d4c8b0; background: #e8dfcb; transform: rotate(1deg); }
.studio-person-sheet::after { inset: -7px -24px 5px 20px; border: 1px solid #aec3dc; background-color: #d7e4f5; background-image: linear-gradient(#9fb9de35 1px,transparent 1px),linear-gradient(90deg,#9fb9de35 1px,transparent 1px); background-size: 11px 11px; clip-path: inset(0 0 0 93%); transform: rotate(-.8deg); }
.studio-person-sheet .sheet-meta { position: absolute; top: 22px; right: 28px; font: 8px/1.45 Mono,monospace; text-align: right; letter-spacing: .07em; }
.studio-person-sheet h4 { margin: 20px 0 26px; max-width: none; color: #0b377d; font: 400 clamp(30px,3vw,43px)/.95 Georgia,serif; letter-spacing: -.045em; white-space: nowrap; }
.studio-person-sheet p { position: relative; z-index: 2; max-width: 43ch; font: 11px/1.5 Mono,monospace; color: #283a57; }
.studio-person-sheet hr { width: 75%; border-top-color: #17498988; margin: 25px 0 20px; }
.studio-person-sheet .sheet-label { font: 10px Mono,monospace; letter-spacing: .12em; }
.studio-person-sheet .sheet-notes { max-width: 37ch; margin-top: 14px; font-size: 10px; }
.studio-person-sheet .profile-copy { position: relative; z-index: 2; max-width: 43ch; }
.studio-person-sheet .profile-copy h5 { margin: 20px 0 7px; color: #16427e; font: 700 10px/1.2 Mono,monospace; letter-spacing: .1em; text-transform: uppercase; }
.studio-person-sheet .profile-copy p { margin: 0; }
.studio-person-sheet .profile-copy p + p { margin-top: 10px; }
.studio-person-sheet .profile-copy ul { margin: 7px 0 0; padding: 0; list-style: none; font: 10px/1.5 Mono,monospace; color: #283a57; }
.studio-person-sheet .profile-copy li + li { margin-top: 4px; }
.studio-person-sheet .profile-copy li::before { content: '↗'; margin-right: 8px; color: #16427e; }
.studio-person-row.is-long-profile { min-height: 1040px; }
.studio-person-row.is-long-profile .studio-person-sheet { top: 6%; height: 88%; }
.studio-person-sheet a { position: absolute; z-index: 4; left: 36px; bottom: 27px; margin: 0; font: 9px Mono,monospace; pointer-events: auto; }
.studio-person-sheet .sheet-photo { position: absolute; z-index: 3; top: 18%; right: -25%; width: 46%; height: 52%; padding: 8px 8px 28px; background: #fbfaf5; box-shadow: 0 9px 17px #12254a35; transform: rotate(5deg); }
.studio-person-sheet .sheet-photo img { width: 100%; height: 100%; object-fit: cover; }
.studio-person-sheet .sheet-photo-mark img { object-fit: contain; }
.studio-person-sheet .sheet-blue-note { position: absolute; z-index: 4; right: -25%; bottom: 5%; width: 43%; height: 34%; box-sizing: border-box; padding: 34px 17px; background: #bcd3f5; color: #16427e; box-shadow: 0 6px 12px #13294d31; transform: rotate(-5deg); font: 8px/1.8 Mono,monospace; letter-spacing: .1em; }
.studio-person-sheet .sheet-blue-note::before { content: ""; position: absolute; width: 25px; height: 65px; top: -30px; right: 12px; background: url('assets/people/paperclip.svg') center / contain no-repeat; filter: drop-shadow(2px 2px 2px #1020445e); transform: rotate(14deg); }
.studio-person-art::after { content: ""; position: absolute; z-index: 7; left: 50%; bottom: calc(50% - 317px); width: min(41vw,510px); height: 93px; background: #0a4ac5; clip-path: polygon(0 62%,100% 10%,100% 100%,0 100%); pointer-events: none; opacity: 0; transition: opacity .15s ease; }
.studio-person-row.is-open .studio-person-art::after { opacity: 1; transition: opacity .25s ease .5s; }

@media (max-width: 760px) {
  .studio-person-row { overflow: visible; }
  .studio-person-intro .person-role { margin: 13px 0 12px; font-size: 9px; }
  .studio-person-art { overflow: visible; min-height: 0; }
  .studio-person-folder, .studio-person-row.is-reversed .studio-person-folder { width: min(78vw,350px); height: 430px; transform: rotate(-3deg); }
  .studio-person-folder:hover, .studio-person-row.is-reversed .studio-person-folder:hover { transform: rotate(-1deg) translateY(-5px); }
  .studio-person-folder[aria-expanded=true], .studio-person-row.is-reversed .studio-person-folder[aria-expanded=true] { transform: rotate(0); }
  .folder-back { top: -5px; bottom: -5px; left: 0; width: 100%; clip-path: none; }
  .studio-person-folder[aria-expanded=true] .folder-back { inset: -5px auto -5px 0; clip-path: none; }
  .folder-back::after, .folder-pocket { display: none; }
  .folder-paper { top: 4%; left: 4%; bottom: 5%; width: 92%; transform: rotateX(-80deg); transform-origin: top center; }
  .studio-person-folder[aria-expanded=true] .folder-paper { transform: rotateX(0); }
  .folder-front { transform-origin: top center; }
  .studio-person-folder[aria-expanded=true] .folder-front, .studio-person-folder[aria-expanded=true]:hover .folder-front { transform: rotateX(85deg); opacity: 0; transition: transform .86s cubic-bezier(.2,.74,.18,1), opacity .01s linear .85s; }
  .folder-front .folder-polaroid-cover { top: 5%; left: 7%; width: 38%; }
  .folder-front .folder-polaroid-cover img { height: 100px; }
  .folder-front .folder-polaroid-placeholder { height: 136px; }
  .folder-paper .folder-polaroid { width: 40%; }
  .folder-paper .folder-polaroid img { height: 105px; }
  .folder-paper .folder-polaroid-placeholder { height: 140px; }
  .folder-polaroid i { font-size: 18px; }
  .folder-paperclip, .folder-front .folder-paperclip-cover { width: 25px; height: 65px; }
  .folder-front .folder-cover-seal { top: 40%; width: 16%; }
  .folder-front > small { top: 56%; font-size: 8px; }
  .folder-front > strong { top: 62%; font-size: clamp(39px,10vw,49px); }
  .folder-front:has(.folder-polaroid-cover) .folder-cover-seal { top: 46%; }
  .folder-front:has(.folder-polaroid-cover) > small { top: 59%; }
  .folder-front:has(.folder-polaroid-cover) > strong { top: 65%; }
  .folder-paper .folder-inner-seal { width: 20%; }
  .folder-paper > small { top: 47%; font-size: 8px; }
  .folder-paper > strong { top: 54%; font-size: clamp(38px,10vw,49px); }
  .folder-paper > em { top: 77%; font-size: 8px; }
  .folder-paper > p { top: 83%; font-size: 8px; }
  .studio-person-sheet, .studio-person-row.is-reversed .studio-person-sheet { position: relative; top: auto; left: auto; right: auto; width: calc(100% - 28px); height: auto; min-height: 390px; margin: 36px auto 25px; padding: 35px 28px 70px; transform: translateY(16px); }
  .studio-person-sheet.is-visible, .studio-person-row.is-reversed .studio-person-sheet.is-visible { transform: translateY(0); }
  .studio-person-sheet h4 { font-size: 36px; max-width: 85%; }
  .studio-person-sheet p { font-size: 11px; max-width: 28ch; }
  .studio-person-sheet .sheet-photo { width: 26%; height: 100px; right: -8%; top: 41%; padding: 4px 4px 15px; }
  .studio-person-sheet .sheet-blue-note { width: 29%; height: 90px; right: -10%; bottom: 15%; padding: 9px; font-size: 6px; }
  .studio-person-row.is-long-profile { min-height: 0; }
  .studio-person-row.is-long-profile .studio-person-sheet { top: auto; height: auto; }
  .studio-person-sheet a { left: 28px; bottom: 27px; }
  .studio-person-art::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-person-folder, .folder-back, .folder-paper, .folder-front, .studio-person-sheet, .studio-person-intro { transition-duration: .01ms !important; transition-delay: 0ms !important; }
}
