/* Match Brands and Selected Work to the existing hero copy inset. */
body[data-route="home"]{--home-content-inset:max(5vw,calc((100vw - 1680px)/2))}
body[data-route="home"] :is(.brand-ticker,section.home-stories){box-sizing:border-box;width:100vw;margin-left:calc((100% - 100vw)/2);padding-left:var(--home-content-inset);padding-right:var(--home-content-inset)}
body[data-route="home"] .home-stories-label h2{position:relative}
body[data-route="home"] .home-stories-label h2::before{position:absolute;left:-18px;top:.44em;margin:0}
body[data-route="home"] .type-hero-bottom>p{max-width:760px;width:100%}
body[data-route="home"] .home-intro-line{display:block}
@media(min-width:761px){body[data-route="home"] .home-intro-line{white-space:nowrap}}
@media(max-width:760px){body[data-route="home"]{--home-content-inset:27px}body[data-route="home"] .type-hero-bottom>p{max-width:100%}}
/* Hero and brand ticker share the first screen. The ticker is one thin row, and the hero scales with window height so the logos stay visible on short windows. */
body[data-route="home"]{--home-ticker-h:64px}
body[data-route="home"] .home.type-home{min-height:calc(100svh - var(--home-ticker-h));padding-top:clamp(84px,13svh,165px);padding-bottom:clamp(20px,4svh,40px);gap:clamp(12px,3svh,35px)}
body[data-route="home"] .type-hero-top .hero-portrait{width:clamp(72px,min(9vw,15svh),150px)}
body[data-route="home"] .type-hero-bottom>p{max-width:none;font-size:24px;line-height:1.35}
/* The painter line sits right under the name; the spare height goes above the name instead. */
body[data-route="home"] .hero-name-row{margin-top:auto!important}
body[data-route="home"] .home-intro-line{white-space:normal;max-width:34em}

/* Name with handwritten role notes: one up beside "Hello,", one off the end of "Mallika.", chalk-drawn looping arrows. On phones both sit under the name. */
body[data-route="home"] .hero-name-row{position:relative;width:max-content;max-width:100%;margin:clamp(0px,1.5svh,15px) 0 0}
body[data-route="home"] .hero-name-row .flow-headline{align-self:auto;margin:0}
@media(min-width:761px){body[data-route="home"] .home .flow-headline{font-size:min(11.5vw,19svh)}}
body[data-route="home"] .hero-roles{list-style:none;margin:0;padding:0;font-family:var(--font-hand);font-weight:600;font-size:42px;line-height:1;color:var(--paper)}
@media(min-width:1340px){body[data-route="home"] .hero-roles{font-size:54px}}
body[data-route="home"] .hero-role{position:absolute;display:flex;white-space:nowrap}
body[data-route="home"] .hero-role span{filter:url(#chalk)}
body[data-route="home"] .hero-role-arrow{flex:none;height:auto;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14 1.5 22 1;filter:url(#chalk);opacity:.92}
body[data-route="home"] .hero-role-1{left:58%;top:-2%;flex-direction:column;align-items:flex-start;transform:rotate(-5deg)}
body[data-route="home"] .hero-role-1 .hero-role-arrow{width:2.2em;margin:0 0 0 -.4em}
body[data-route="home"] .hero-role-2{left:calc(100% + 8px);bottom:14%;align-items:flex-end;gap:4px;transform:rotate(3deg)}
body[data-route="home"] .hero-role-2 .hero-role-arrow{width:2.5em;margin-bottom:.05em}
@media(max-width:1100px){body[data-route="home"] .hero-roles{font-size:32px}}
@media(max-width:900px){body[data-route="home"] .hero-roles{font-size:26px}}
@media(max-width:760px){
body[data-route="home"]{--home-ticker-h:96px}
body[data-route="home"] .hero-name-row{width:auto}
body[data-route="home"] .hero-roles{display:grid;justify-items:start;margin-top:6px;font-size:30px}
body[data-route="home"] .hero-role{position:static}
body[data-route="home"] .hero-role-1{flex-direction:column-reverse;transform:rotate(-4deg)}
body[data-route="home"] .hero-role-1 .hero-role-arrow{width:1.5em;margin:0 0 2px .4em;transform:scaleY(-1)}
body[data-route="home"] .hero-role-2{margin:.15em 0 0 .6em;transform:rotate(2deg)}
body[data-route="home"] .hero-role-2 .hero-role-arrow{display:none}
body[data-route="home"] .type-hero-bottom>p{font-size:20px;line-height:1.4}
}

/* While the cursor warps the name, the canvas also paints the notes, so the page copies step aside like the headline does. */
body[data-route="home"] .home.type-home.fluid-type-ready .hero-role{opacity:0}

/* Thin brand ticker: label, logos and pause on one row. */
body[data-route="home"] .brand-ticker{display:flex;align-items:center;gap:var(--gutter);padding-top:12px!important;padding-bottom:12px!important}
body[data-route="home"] .ticker-heading{display:contents}
body[data-route="home"] .ticker-heading p{flex:none;order:1;margin:0;white-space:nowrap}
body[data-route="home"] .ticker-window{order:2;flex:1;min-width:0;padding:0}
body[data-route="home"] #ticker-toggle{order:3;flex:none;white-space:nowrap;font-size:12px}
body[data-route="home"] .logo-set{min-height:40px;gap:44px;padding-right:44px}
body[data-route="home"] .logo-set img{width:calc(var(--logo-width,85px)*.72);max-height:36px}
@media(max-width:760px){
body[data-route="home"] .brand-ticker{flex-wrap:wrap;row-gap:8px}
body[data-route="home"] .ticker-heading p{flex:1}
body[data-route="home"] .ticker-window{order:4;flex-basis:100%}
body[data-route="home"] .logo-set{min-height:36px;gap:32px;padding-right:32px}
body[data-route="home"] .logo-set img{width:calc(var(--logo-width,85px)*.62)}
}