/* Media-first gallery direction. Reuses only the static demo placeholders. */
.studies-work-grid .study-stage { isolation:isolate; overflow:hidden; }
/* Live work is isolated at its original desktop canvas size. */
.studies-work-grid.studies-row-reverse { grid-template-columns: minmax(0,1fr) minmax(0,2.4fr); margin-top: 64px; }
.study-cinema { grid-column: 2; }
.studies-work-grid.studies-row-reverse .cinema-stage { aspect-ratio: 3 / 2; }
.studies-work-grid .cinema-stage { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 20px; background: #edeae4; box-shadow: 0 0 0 1px #b5aa9429,0 30px 64px -34px #78634266; }
.cinema-stage iframe { position: absolute; left: 0; top: 0; width: 1440px; height: 960px; max-width: none; border: 0; transform-origin: top left; }
/* Keep the scaled iframe behind a full-size antialiased clipping surface.
   The outer surface only owns the backlight, so its shadow is not masked. */
.cinema-viewport { position:absolute; inset:0; border-radius:inherit; overflow:hidden; transform:translateZ(0); -webkit-mask-image:linear-gradient(#fff,#fff); mask-image:linear-gradient(#fff,#fff); }
@media (max-width:900px) { .studies-work-grid.studies-row-reverse { grid-template-columns: minmax(0,1fr); margin-top:36px; } .study-cinema { grid-column:1; } }
.live-demo { position: relative; }
.study-demo-frame { position: absolute; left: 50%; top: 50%; border: 0; max-width: none; pointer-events: none; opacity: 0; transform-origin: center; }
.live-demo[data-demo-slot="orbit"] .study-demo-frame { pointer-events: auto; }
.live-demo.is-loaded .study-demo-frame { opacity: 1; }
.live-demo.is-loaded .demo-loading { display: none; }
.demo-loading { color: #78818c; font-size: 12px; }
.demo-playback { position: absolute; z-index: 2; bottom: 16px; left: 16px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #dce0e5; border-radius: 50%; color: #454b54; background: #fffffff2; cursor: pointer; font-size: 15px; line-height: 1; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 180ms ease, transform 220ms cubic-bezier(.22,.72,.28,1); }
.live-demo:hover .demo-playback,
.live-demo:focus-within .demo-playback { opacity: 1; pointer-events: auto; transform: translateY(0); }
.demo-playback:disabled { opacity: 0; pointer-events: none; }
.demo-playback:focus-visible { outline: 2px solid #356fd6; outline-offset: 3px; }
.visual-studies { width: calc(100% - clamp(64px, 6vw, 128px)); max-width: none; padding: 46px 0 28px; }
.studies-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 2px 32px; }
.studies-intro h1 { display: flex; align-items: start; gap: 13px; font-size: clamp(32px, 2.35vw, 48px); font-weight: 500; letter-spacing: -.04em; line-height: 1.3; }
.studies-intro h1 span { font-size: 11px; font-weight: 400; letter-spacing: 0; padding-top: 5px; color: #96999d; }
.studies-intro p { max-width: 520px; color: #686c73; font-size: clamp(12px, .8vw, 16px); line-height: 1.7; text-align: right; }
.study-editorial, .study-product { display: block; margin: 0; padding: 0; border: 0; }
.studies-work-grid { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: clamp(24px, 1.65vw, 40px); align-items: start; }
.study-product { margin-top: 0; }
.study-stage { display: grid; place-items: center; width: 100%; aspect-ratio: 1.85; border-radius: 12px; padding: 0; }
.editorial-stage {
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(104, 116, 94, .14),
    0 26px 54px -30px rgba(92, 108, 80, .42),
    0 8px 22px -14px rgba(78, 91, 70, .2);
}
.product-stage {
  background: #dce2ed;
  box-shadow:
    0 0 0 1px rgba(96, 113, 148, .14),
    0 30px 64px -34px rgba(76, 97, 137, .5),
    0 10px 26px -16px rgba(68, 85, 118, .24);
}
.stage-corner { right: 22px; bottom: 20px; font-size: 10px; color: #747b77; }
.product-stage .stage-corner { color: #747d90; }
.study-caption { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 22px 0 0; }
.study-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid #e7e8ea; }
.study-title-row > span { color: #858990; font-size: clamp(10px, .65vw, 13px); letter-spacing: .02em; }
.study-caption h2 { margin: 0; font-size: clamp(17px, 1.2vw, 24px); font-weight: 500; line-height: 1.4; letter-spacing: -.025em; color: #27292d; }
.study-caption .study-description { max-width: 920px; margin: 15px 0 0; color: #5f646c; font-size: clamp(11px, .72vw, 14px); line-height: 1.75; letter-spacing: 0; }
.study-caption-index { color: #9a9da3; font-size: 10px; font-variant-numeric: tabular-nums; }
.studies-footer { margin-top: 66px; padding-top: 18px; border-color: #ededed; }
.editorial-placeholder { width: 49%; padding: 3%; background: #fafbf8; border-color: #d4d9d0; box-shadow: 0 14px 32px -18px #72836955; }
.placeholder-masthead > :first-child { color: #66745e; }
.placeholder-title-lines i { background: #c7d2be; }
.placeholder-copy-lines i { background: #e0e5da; }
.placeholder-rule-row { border-color: #daded5; }
.placeholder-rule-row i { background: #d6dece; }
.placeholder-rule-row span { color: #94a187; }
.placeholder-paper-note { color: #9aa48e; }
.orbit-placeholder { width: 86%; height: 86%; }
.orbit-placeholder-title { color: #707e9c; }
.orbit-placeholder-title span { color: #8a95aa; }
.orbit-placeholder-window { border-color: #c9d1df; box-shadow: 0 14px 32px -18px #6e7f9d44; }
.placeholder-side-left { background: #8f9bb1; border-color: #8592aa; }
.placeholder-side-left i { background: #b8c4d8; }
.studies-work-grid .study-stage { aspect-ratio: 16 / 9; border-radius: 20px; }
.studies-work-grid .editorial-stage { aspect-ratio: 1216 / 1060; border-radius: 20px; container-type: inline-size; }
.editorial-stage .editorial-placeholder { width: 61%; padding: 4%; }
.editorial-stage .placeholder-masthead { padding-bottom: 10%; }
.editorial-stage .placeholder-masthead > :first-child { font-size: 6cqw; }
.editorial-stage .placeholder-masthead > :last-child { font-size: 1.6cqw; }
.editorial-stage .placeholder-title-lines, .editorial-stage .placeholder-copy-lines { gap: 1cqw; }
.editorial-stage .placeholder-title-lines i { height: 1.7cqw; }
.editorial-stage .placeholder-copy-lines i { height: .55cqw; }
.editorial-stage .placeholder-rule-row { grid-template-columns: 2cqw 1fr 1.2fr; }
.editorial-stage .placeholder-rule-row span { font-size: 1.8cqw; }
.editorial-stage .placeholder-rule-row i { height: 1.2cqw; margin-top: .7cqw; }
.editorial-stage .placeholder-rule-row i:last-child { height: .5cqw; }
.editorial-stage .placeholder-paper-note { font-size: 1.5cqw; }
.editorial-stage .stage-corner { font-size: 8px; right: 14px; bottom: 10px; }
@media (max-width: 900px) {
  .studies-work-grid { grid-template-columns: 1fr; gap: 36px; }
  .studies-work-grid .editorial-stage { aspect-ratio: 1216 / 1060; }
  .editorial-stage .editorial-placeholder { width: 54%; }
}
@media (max-width: 800px) {
  .visual-studies { width: calc(100% - 40px); padding-top: 32px; }
  .studies-intro h1 { font-size: 28px; }
  .study-stage { aspect-ratio: 1.45; }
  .editorial-placeholder { width: 65%; padding: 4%; }
  .study-caption > div { gap: 10px; }
  .study-caption h2 { font-size: 20px; }
  .study-caption div > span { font-size: 10px; }
}
@media (max-width: 500px) {
  .visual-studies { width: calc(100% - 28px); padding-top: 28px; }
  .studies-intro { padding-bottom: 22px; }
  .studies-intro h1 { font-size: 25px; gap: 8px; }
  .studies-intro p { max-width: 104px; font-size: 10px; line-height: 1.7; text-align: right; }
  .study-stage { aspect-ratio: 1.18; border-radius: 8px; }
  .studies-work-grid .editorial-stage { border-radius: 8px; }
  .editorial-placeholder { width: 74%; padding: 5%; }
  .placeholder-title-lines, .placeholder-copy-lines { gap: 5px; }
  .placeholder-title-lines i { height: 7px; }
  .placeholder-copy-lines i { height: 2px; }
  .placeholder-masthead > :last-child { font-size: 7px; }
  .placeholder-rule-row span { font-size: 8px; }
  .placeholder-rule-row i { height: 6px; }
  .placeholder-paper-note { font-size: 7px; }
  .stage-corner { right: 12px; bottom: 9px; font-size: 8px; }
  .study-caption { padding-top: 14px; align-items: start; }
  .study-caption { align-items: stretch; }
  .study-title-row { flex-direction: row; gap: 12px; padding-bottom: 10px; }
  .study-caption .study-description { margin-top: 12px; font-size: 12px; line-height: 1.7; }
  .study-caption-index { padding-top: 7px; font-size: 9px; }
  .study-product { margin-top: 0; }
  .orbit-placeholder { width: 92%; height: 80%; }
  .studies-footer { margin-top: 40px; font-size: 9px; }
}
@media (hover: none) {
  .live-demo .demo-playback:not(:disabled) { display:grid; opacity:1; pointer-events:auto; transform:none; }
}
/* One outer clipping edge for embedded canvases; cool backlight for the dark poster. */
.studies-work-grid .cinema-stage{background:#101e32;box-shadow:0 0 0 1px #53677e26,0 18px 42px -20px #365d8e66,0 0 48px -14px #7898c24d;}
.studies-work-grid .study-stage{border-radius:28px;}
@media(max-width:600px){
 .studies-work-grid .study-stage,.studies-work-grid .editorial-stage{border-radius:22px;}
 .study-caption .study-description{font-size:13px;line-height:1.8;}
 .study-title-row{flex-wrap:wrap;row-gap:4px;}
 .studies-intro{align-items:flex-start;}
 .studies-intro p{max-width:140px;font-size:11px;}
 .studies-footer{gap:16px;flex-wrap:wrap;}
}