/* Dots fade from the page top to the end of What I do; other pages use their hero. */
html{scrollbar-color:var(--vermilion-500) var(--neutral-50);scrollbar-width:thin;scroll-padding-top:126px}
body{position:relative;isolation:isolate;--intro-end:850px}
body::before{content:'';position:absolute;inset:0 0 auto;height:var(--intro-end);z-index:-1;pointer-events:none;background-image:url('brand/04-backgrounds/paper-dots-tile.svg');background-size:var(--paper-dot-spacing) var(--paper-dot-spacing);mask-image:linear-gradient(to bottom,black 0%,black 28%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 0%,black 28%,transparent 100%);opacity:1;transition:opacity .28s ease}
/* Mirror the opening fade across Learning in Public and the footer. */
body.has-content-dots::after{content:'';position:absolute;inset:var(--content-dots-top) 0 0;z-index:-1;pointer-events:none;background-image:url('brand/04-backgrounds/paper-dots-tile.svg');background-size:var(--paper-dot-spacing) var(--paper-dot-spacing);mask-image:linear-gradient(to bottom,transparent 0%,black 72%,black 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 72%,black 100%)}
.hero-shell::before{display:none}
.review-bar{background:transparent;color:var(--neutral-600);border-bottom:1px solid var(--neutral-200)}
.directions button{color:var(--neutral-600)}
.directions button[aria-pressed=true]{background:var(--neutral-0);color:var(--neutral-950);border-color:var(--neutral-200)}
.site-header.wrap{position:sticky;top:0;z-index:30;width:100%;height:80px;padding-inline:max(52px,calc((100% - 1200px)/2));background:transparent;border-bottom:0;transition:background .28s ease}
.is-scrolled .site-header{background:var(--neutral-50)}
.site-header::after{content:'';position:absolute;inset:auto 0 0;height:1px;background:var(--neutral-200);opacity:0;pointer-events:none;transition:opacity .28s ease}
.is-scrolled .site-header::after{opacity:1}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:var(--neutral-50)}
*::-webkit-scrollbar-thumb{background:var(--vermilion-500);border:2px solid var(--neutral-50);border-radius:10px}
*::-webkit-scrollbar-thumb:hover{background:var(--vermilion-700)}
*::-webkit-scrollbar-corner{background:var(--neutral-50)}
@media(max-width:1050px){.site-header.wrap{padding-inline:32px}}
.hero{min-height:600px;padding-top:34px;padding-bottom:36px}
.hero-visual,.studio .hero-visual{min-height:490px}
.portrait-image{height:285px}
.hero h1{margin-block:20px}
.hero-foot{margin-top:28px}
.studio .hero{min-height:640px;padding-block:40px}
.studio .hero-visual{top:40px}
@media(max-width:760px){.site-header.wrap{height:auto;min-height:90px;padding:12px 20px;gap:8px}.site-header nav{padding-top:0}.hero,.studio .hero{min-height:0;padding-top:24px;padding-bottom:28px;gap:26px}.hero-visual,.studio .hero-visual{min-height:470px;top:auto}.portrait-image{height:260px}html{scroll-padding-top:112px}}
@media(prefers-reduced-motion:reduce){body::before,.site-header.wrap,.site-header::after{transition:none}}