/* Framing changes only. All studies share the original KV and site configuration. */
[data-direction] .hero {
  display: block;
  min-height: min(600px, calc(100svh - 188px));
  overflow: clip;
  isolation: isolate;
  background: var(--canvas);
}
[data-direction] .identity {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 48%;
  width: 480px;
  padding: 0;
  transform: translateY(-50%);
}
[data-direction] .artwork {
  position: absolute;
  z-index: 0;
  inset: 0;
  height: 100%;
  padding: 0;
}
[data-direction] .artwork:has(.is-white-backed) { mix-blend-mode: multiply; }
[data-direction] .key-visual {
  inset: auto;
  top: var(--study-kv-top);
  right: var(--study-kv-right, auto);
  left: var(--study-kv-left, auto);
  width: var(--study-kv-width);
  max-width: none;
  height: auto;
  object-fit: initial;
  transform: translateX(var(--study-kv-translate, 0));
}
[data-direction] .scroll-cue { z-index: 3; }

/* A: clear identity at left, generous three-quarter portrait at right. */
[data-direction="a"] {
  --study-kv-width: 880px;
  --study-kv-top: -40px;
  --study-kv-right: -32px;
}
[data-direction="a"] h1 { font-size: 110px; }

/* B: the expression owns the canvas; the name remains in clear space. */
[data-direction="b"] {
  --study-kv-width: 1550px;
  --study-kv-top: -125px;
  --study-kv-left: 130px;
}
[data-direction="b"] .identity { top: auto; bottom: 90px; width: 440px; transform: none; }
[data-direction="b"] h1 { font-size: 100px; }
[data-direction="b"] .site-label { margin-bottom: 18px; }
[data-direction="b"] .artist-role { font-size: 16px; }
[data-direction="b"] .identity-links { width: 220px; margin-top: 30px; }

/* C: centered portrait, with the name and social links kept at its sides. */
[data-direction="c"] {
  --study-kv-width: 920px;
  --study-kv-top: -52px;
  --study-kv-left: 50%;
  --study-kv-translate: -50%;
}
[data-direction="c"] .identity { position: static; width: auto; transform: none; }
[data-direction="c"] .identity > * { z-index: 2; }
[data-direction="c"] .site-label { position: absolute; top: 95px; left: 0; margin: 0; }
[data-direction="c"] h1 { position: absolute; top: 132px; left: 0; font-size: 78px; margin: 0 0 0 -3px; }
[data-direction="c"] .artist-role { position: absolute; top: 225px; left: 0; font-size: 14px; }
[data-direction="c"] .identity-links { position: absolute; right: 0; top: 38%; margin: 0; padding-top: 18px; width: 96px; align-items: center; flex-direction: column; gap: 20px; }
[data-direction="c"] .social-links { flex-direction: column; gap: 12px; }

@media (min-width: 1700px) {
  [data-direction="a"] { --study-kv-width: 1130px; --study-kv-top: -65px; --study-kv-right: -100px; }
  [data-direction="a"] h1 { font-size: 132px; }
  [data-direction="b"] { --study-kv-width: 1860px; --study-kv-top: -160px; --study-kv-left: 95px; }
  [data-direction="b"] .identity { bottom: 100px; }
  [data-direction="b"] h1 { font-size: 116px; }
  [data-direction="c"] { --study-kv-width: 1150px; --study-kv-top: -75px; }
  [data-direction="c"] h1 { font-size: 84px; }
}
@media (max-width: 1200px) and (min-width: 701px) {
  [data-direction="a"] { --study-kv-width: 810px; --study-kv-top: -20px; --study-kv-right: -150px; }
  [data-direction="a"] h1 { font-size: 88px; }
  [data-direction="b"] { --study-kv-width: 1320px; --study-kv-top: -80px; --study-kv-left: 5px; }
  [data-direction="b"] .identity { bottom: 80px; }
  [data-direction="b"] h1 { font-size: 86px; }
  [data-direction="c"] { --study-kv-width: 830px; --study-kv-top: -24px; --study-kv-left: 54%; }
  [data-direction="c"] .site-label { top: 55px; }
  [data-direction="c"] h1 { top: 86px; font-size: 68px; }
  [data-direction="c"] .artist-role { top: 171px; }
  [data-direction="c"] .identity-links { width: 66px; top: 25%; }
}
@media (max-width: 960px) and (min-width: 701px) {
  [data-direction] .hero { min-height: min(700px, calc(100svh - 188px)); }
  [data-direction="a"] { --study-kv-width: 770px; --study-kv-top: 70px; --study-kv-right: -196px; }
  [data-direction="a"] .identity { top: 32%; width: 320px; }
  [data-direction="a"] h1 { font-size: 72px; }
  [data-direction="a"] .identity-links { width: 230px; }
  [data-direction="b"] { --study-kv-width: 1200px; --study-kv-top: 0px; --study-kv-left: -158px; }
  [data-direction="b"] .identity { top: 28px; bottom: auto; }
  [data-direction="b"] h1 { font-size: 72px; }
  [data-direction="b"] .identity-links { position: absolute; top: 3px; right: -174px; width: auto; margin: 0; padding: 0; border: 0; }
  [data-direction="b"] .links-label { display: none; }
  [data-direction="c"] { --study-kv-width: 760px; --study-kv-top: 70px; --study-kv-left: 50%; }
  [data-direction="c"] .site-label { top: 20px; }
  [data-direction="c"] h1 { top: 48px; font-size: 66px; }
  [data-direction="c"] .artist-role { top: 122px; }
  [data-direction="c"] .identity-links { top: 15%; }
}
@media (max-width: 700px) {
  [data-direction] .hero { width: 100%; height: calc(100svh - 160px); min-height: 500px; max-height: 850px; padding-top: 0; }
  [data-direction] .identity { position: absolute; top: 16px; bottom: auto; left: var(--gutter); width: calc(100% - var(--gutter) * 2); padding: 0; display: block; transform: none; }
  [data-direction] .site-label { position: static; margin: 0 0 12px; font-size: 9px; }
  [data-direction] h1 { position: static; margin: 0 0 16px -2px; font-size: 64px; }
  [data-direction] .artist-role { position: static; font-size: 12px; }
  [data-direction] .identity-links { position: absolute; top: 91px; right: 0; left: auto; width: auto; margin: 0; padding: 0; border: 0; display: flex; }
  [data-direction] .social-links { flex-direction: row; gap: 8px; }
  [data-direction] .links-label { display: none; }
  [data-direction] .artwork { min-height: 0; }
  [data-direction] .key-visual { right: auto; left: 50%; transform: translateX(-50%); }
  [data-direction="a"] { --study-kv-width: 570px; --study-kv-top: 142px; }
  [data-direction="b"] { --study-kv-width: 850px; --study-kv-top: 100px; }
  [data-direction="c"] { --study-kv-width: 650px; --study-kv-top: 134px; }
  [data-direction="c"] .identity { text-align: center; }
  [data-direction="c"] .identity-links { top: 194px; right: 0; }
  [data-direction="c"] .social-links { flex-direction: column; }
  [data-direction="c"] .social-link { background: var(--canvas); }
  [data-direction] .news { padding-top: 25px; }
}
@media (max-width: 360px) {
  [data-direction] h1 { font-size: 54px; }
  [data-direction] .identity-links { top: 82px; }
  [data-direction="c"] .identity-links { top: 175px; }
  [data-direction="b"] { --study-kv-width: 760px; --study-kv-top: 105px; }
}