/* One composition: text on the left and the entire cat on the right.
   The artwork has asymmetric transparent margins, so position its visible
   centre rather than the centre of its wrapper. Both viewport axes cap size. */
.studio:not(.view-immersive).landscape-mode.blog-home .universe{height:100svh;min-height:640px}
.studio:not(.view-immersive).blog-home .hero-copy{top:24%;max-width:420px}
.studio.blog-home .hero-copy .hello-note{margin-bottom:26px}
.studio.blog-home .hero-copy h1{font-size:clamp(48px,4.7vw,72px);line-height:1.4;letter-spacing:3px;margin-bottom:26px}
.studio.blog-home .hero-intro{max-width:360px;font-size:14px;line-height:2.15;margin-bottom:30px}
.studio.blog-home .hero-links{gap:28px}
.studio.blog-home .hero-replay{margin-top:22px;padding-left:0;padding-right:0;border-color:transparent;background:transparent;color:#aabbd1;font-size:11px}
.studio.blog-home .hero-replay:hover{background:transparent;color:#ecd1a5;border-color:transparent}
.studio:not(.view-immersive).bunny-mode.landscape-mode.blog-home .scene{
 --home-cat-width:min(58vw,calc((100svh - 190px)*1.5),840px);
 width:var(--home-cat-width);
 left:calc(74% - var(--home-cat-width)*.2);
 top:54%;
}
.studio.blog-home .studio-hero-bottom{bottom:30px}
.studio .brand-copy{color:inherit;text-decoration:none}
@media(min-width:701px) and (max-width:1100px){
 .studio:not(.view-immersive).blog-home .hero-copy{top:23%;max-width:36vw}
 .studio.blog-home .hero-copy h1{font-size:clamp(39px,4.6vw,51px);letter-spacing:1px}
 .studio.blog-home .hero-intro{font-size:12px;margin-bottom:24px}
 .studio.blog-home .hero-links{gap:18px}
 .studio.blog-home .hero-secondary{font-size:11px}
 .studio:not(.view-immersive).bunny-mode.landscape-mode.blog-home .scene{top:56%}
}
@media(max-width:700px){
 .studio:not(.view-immersive).landscape-mode.blog-home .universe{height:100svh;min-height:820px}
 .studio:not(.view-immersive).blog-home .hero-copy{top:166px;left:28px;width:calc(100% - 56px);max-width:390px}
 .studio.blog-home .hero-copy .hello-note{margin-bottom:16px;font-size:11px}
 .studio.blog-home .hero-copy h1{font-size:clamp(38px,10.4vw,48px);line-height:1.35;letter-spacing:2px;margin-bottom:16px}
 .studio.blog-home .hero-intro{font-size:12px;line-height:2;margin-bottom:20px}
 .studio.blog-home .hero-links{gap:24px}
 .studio.blog-home .hero-replay{margin-top:4px;font-size:10px;padding:4px 10px;background:#040c16a6;color:#d8e7f5;border-radius:22px;min-height:44px}
 .studio:not(.view-immersive).bunny-mode.landscape-mode.blog-home .scene{
  --home-cat-width:min(112vw,calc((100svh - 420px)*1.6),520px);
  width:var(--home-cat-width);
  left:calc(50% - var(--home-cat-width)*.18);
  top:calc(100% - 88px - var(--home-cat-width)*.31);
 }
 .studio.blog-home .studio-hero-bottom{bottom:24px}
}
@media(max-width:360px){
 .studio.blog-home .hero-copy h1{font-size:36px}
 .studio.blog-home .hero-links{gap:16px}
 .studio.blog-home .hero-secondary{font-size:11px}
}
@media(max-height:700px) and (min-width:701px){
 .studio:not(.view-immersive).blog-home .hero-copy{top:155px}
 .studio.blog-home .hero-copy h1{font-size:44px;margin-bottom:18px}
 .studio.blog-home .hero-copy .hello-note{margin-bottom:18px}
 .studio.blog-home .hero-intro{line-height:1.9;margin-bottom:20px}
 .studio.blog-home .hero-replay{margin-top:12px}
}

/* Immersion owns the viewport. This outranks the responsive header grid; its
   ordinary geometry is restored by simply removing view-immersive. */
body.studio.view-immersive>.site-header{
 display:none;visibility:hidden;pointer-events:none;
}
body.view-immersive :is(#siteTools,#moreMenu){visibility:hidden;pointer-events:none}
body.view-immersive>#exitImmersive:not([hidden]){
 position:fixed;
 top:max(18px,calc(env(safe-area-inset-top,0px) + 12px));
 right:max(18px,calc(env(safe-area-inset-right,0px) + 12px));
 left:auto;bottom:auto;
 z-index:200;
 display:flex;align-items:center;justify-content:center;
 min-height:44px;max-width:calc(100vw - 36px);
 pointer-events:auto;touch-action:manipulation;
 color:#edf4fc;background:#0b1729ed;border-color:#a8c8e565;
 box-shadow:0 4px 22px #0005;
}
body>#exitImmersive[hidden]{display:none}
body.view-immersive>#exitImmersive:focus-visible{outline:2px solid #edc78f;outline-offset:4px}