/* Launch corrections: mobile containment and readable responsive layouts. */
html,body{max-width:100%;overflow-x:clip}
:where(p,li,.text-link){text-wrap:pretty}
.site-header .brand{
  position:relative;
  z-index:1;
  color:#f8f1fb;
  text-shadow:none!important;
}
.workshop .site-header .brand{
  color:#fff5dd;
  text-shadow:0 2px 7px #090b05,0 0 10px #fff4cfb5,0 0 24px #e7b95ba8,0 0 42px #b77de273!important;
}
.site-header .brand small{text-shadow:none!important}
.workshop .site-header .brand small{text-shadow:0 1px 5px #080a04,0 0 12px #eac777c4,0 0 25px #a879d184!important}
.site-header .site-nav{justify-self:end!important;justify-content:flex-end!important}
@media(min-width:721px){
  .site-header{grid-template-columns:auto minmax(0,1fr)!important}
  .site-header .site-nav{grid-column:2!important;grid-row:2!important;justify-self:end!important;width:max-content!important;max-width:none!important;margin-left:auto!important;text-align:right!important}
}
.workshop .site-nav .nav-destination:is([aria-current=page],.nav-entering):not(.nav-leaving) .nav-label{
  color:#fff4d5!important;
  text-shadow:0 2px 7px #090b05,0 0 10px #fff4cfb5,0 0 24px #e7b95ba8,0 0 42px #b77de273!important;
}
.workshop .site-nav .nav-destination:is([aria-current=page],.nav-entering):not(.nav-leaving) .nav-overline{
  color:#fff8e8!important;
  text-shadow:0 1px 5px #080a04,0 0 12px #eac777c4,0 0 25px #a879d184!important;
}
@media(max-width:720px){
  .site-header .site-nav:not(.open){grid-column:1!important;grid-row:2!important;justify-self:end!important;width:auto!important;min-width:0;max-width:100%}
  .site-header .menu-toggle{grid-column:2;grid-row:2;min-height:44px;margin-left:12px}
  .site-header .site-nav:not(.open) .nav-label{font-size:clamp(30px,6vw,41px)!important}
  .site-header .site-nav:not(.open) .nav-destination{align-items:flex-end!important;text-align:right!important}
}
.cosmic .aurora{
  height:580px;
  background:
    radial-gradient(ellipse 34% 58% at 7% -3%,#b84bd180,transparent 84%),
    radial-gradient(ellipse 38% 52% at 34% -8%,#7d4fca70,transparent 86%),
    radial-gradient(ellipse 27% 52% at 53% -4%,#299b8870,transparent 87%),
    radial-gradient(ellipse 30% 48% at 68% -7%,#397bd478,transparent 88%),
    radial-gradient(ellipse 27% 50% at 83% -5%,#7660d66d,transparent 88%),
    radial-gradient(ellipse 24% 47% at 100% 0%,#c04caf70,transparent 90%);
}
.cosmic .aurora:before{border-bottom-color:#58c7b75c;filter:blur(25px)}
.cosmic .aurora:after{border-color:#786ae45c;filter:blur(31px)}
.workshop.cosmic .aurora{
  background:
    radial-gradient(ellipse 42% 65% at 18% -8%,#864cc46b,transparent 83%),
    radial-gradient(ellipse 34% 58% at 48% -10%,#328f8060,transparent 86%),
    radial-gradient(ellipse 34% 56% at 70% -10%,#3f73c466,transparent 87%),
    radial-gradient(ellipse 38% 60% at 96% -5%,#9553bd62,transparent 88%),
    radial-gradient(ellipse at 50% 0%,#98723c4a,transparent 78%);
}
body[data-motion="immersive"] .aurora{filter:saturate(1.22) brightness(1.08)}
.trail{animation-duration:1350ms;filter:drop-shadow(0 0 7px currentColor)}
.trail:before{background:currentColor;clip-path:polygon(50% 0,58% 41%,100% 50%,58% 59%,50% 100%,42% 59%,0 50%,42% 41%)}
.trail.sparkle-four:before{clip-path:polygon(50% 0,58% 41%,100% 50%,58% 59%,50% 100%,42% 59%,0 50%,42% 41%)}
.trail.sparkle-eight:before{clip-path:polygon(50% 0,59% 35%,82% 18%,65% 41%,100% 50%,65% 59%,82% 82%,59% 65%,50% 100%,41% 65%,18% 82%,35% 59%,0 50%,35% 41%,18% 18%,41% 35%)}
.trail.sparkle-burst:before{clip-path:polygon(50% 0,57% 33%,72% 9%,68% 38%,94% 22%,73% 44%,100% 50%,73% 56%,94% 78%,68% 62%,72% 91%,57% 67%,50% 100%,43% 67%,28% 91%,32% 62%,6% 78%,27% 56%,0 50%,27% 44%,6% 22%,32% 38%,28% 9%,43% 33%)}
.trail.sparkle-cluster:before{clip-path:polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,41% 60%,0 50%,41% 40%)}
.trail.sparkle-cluster:after{content:'';position:absolute;width:38%;height:38%;left:82%;top:-18%;background:currentColor;clip-path:polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,41% 60%,0 50%,41% 40%);box-shadow:-1.15em 1.65em 0 -.08em currentColor;filter:drop-shadow(0 0 4px currentColor)}
@keyframes trail{0%{opacity:0;transform:translate(-50%,-50%) scale(.22)}14%{opacity:1}48%{opacity:.86;transform:translate(-50%,calc(-50% + var(--lift))) scale(1) rotate(calc(var(--spin)*.42))}100%{opacity:0;transform:translate(-50%,calc(-50% + var(--lift))) scale(.35) rotate(var(--spin))}}
@media(max-width:720px){
  body,main,.container,.page-hero,.site-header,.intake-intro,.service-intake,.intake-layout,.workbench{min-width:0;max-width:100%;box-sizing:border-box}
  :where(h1,h2,h3,p,.eyebrow,.section-heading,.page-hero){max-width:100%;overflow-wrap:break-word}
  .page-hero h1,.intake-intro h1{font-size:clamp(42px,14vw,64px);line-height:1.05}
  [role="tablist"],.gallery-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:100%}
  [role="tablist"]+a,.gallery-tabs+a{max-width:100%;white-space:normal;text-align:center}
  .portfolio-grid{grid-template-columns:1fr!important;gap:24px!important;width:100%!important;max-width:100%!important}
  .portfolio-grid .photo-button{width:100%!important;max-width:100%!important;margin:0!important}
  .portfolio-grid img{display:block;width:100%;height:auto;max-width:100%}
  .workshop :where(.cabinet-shell,.compact-cabinet,.cabinet-body,.cabinet-grid,.drawer-grid,.workbench-cabinet){width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box}
  .workshop :where(.cabinet-grid,.drawer-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .workshop .cabinet-drawer{min-width:0!important;width:auto!important}
  .contact-intake-page :where(.intake-intro,.service-intake,.intake-layout,.intake-step,.intake-card){width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box}
  .contact-intake-page :where(input,select,textarea,button){max-width:100%}
  .atmosphere{left:auto!important;right:8px!important;max-width:calc(100vw - 16px)!important}
  .atmosphere>summary{max-width:calc(100vw - 16px)!important;white-space:normal!important;text-align:center}
}
@media(max-width:410px){
  .workshop :where(.cabinet-grid,.drawer-grid){gap:8px!important}
  .workshop .cabinet-drawer{padding-left:6px!important;padding-right:6px!important}
}

/* Component-level phone corrections for the finished launch layout. */
@media(max-width:720px){
  body>main,main>section,main>article,main>.container{min-width:0!important;max-width:100vw!important;box-sizing:border-box!important}
  main :where(h1,h2,.eyebrow,.section-heading){white-space:normal!important;overflow-wrap:anywhere!important}
  main h1{font-size:clamp(38px,12vw,58px)!important;line-height:1.04!important}

  .portfolio-page :where(.home-gallery,.ed-gallery,.portfolio-grid){
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:20px!important;
    width:100%!important;
    max-width:100%!important;
    margin-inline:0!important;
    padding-inline:20px!important;
    box-sizing:border-box!important;
  }
  .portfolio-page :where(.home-gallery,.ed-gallery,.portfolio-grid)>*{min-width:0!important;width:100%!important;max-width:100%!important}
  .portfolio-page :where(.home-gallery,.ed-gallery,.portfolio-grid) img{display:block!important;width:100%!important;height:auto!important;max-width:100%!important}
  .portfolio-page a[href="observatory.html"]{display:table!important;width:auto!important;max-width:calc(100vw - 40px)!important;margin:12px auto 24px!important;white-space:normal!important}

  .workshop .cabinet-shell,.workshop .compact-cabinet{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    min-width:0!important;
    margin-inline:auto!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
  .workshop .compact-cabinet{background-size:100% 100%!important}
  .workshop .cabinet-drawer{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
  .workshop .drawer-label{max-width:100%!important;box-sizing:border-box!important}

  .contact-intake-page main{width:100%!important;max-width:100vw!important;padding-inline:20px!important;box-sizing:border-box!important}
  .contact-intake-page .contact-layout{display:grid!important;grid-template-columns:1fr!important;width:100%!important;max-width:100%!important;margin:0!important;gap:24px!important;box-sizing:border-box!important}
  .contact-intake-page .service-intake{width:100%!important;max-width:100%!important;margin:0!important;padding:20px!important;box-sizing:border-box!important}
  .contact-intake-page :where(.intake-layout,.intake-step,.intake-card,form,fieldset){width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}

  .atmosphere{left:auto!important;right:8px!important;bottom:8px!important;width:auto!important;max-width:calc(100vw - 16px)!important;transform:none!important}
  .atmosphere>summary{width:auto!important;max-width:calc(100vw - 16px)!important;box-sizing:border-box!important}
}

@media(max-width:720px){
  .container{width:calc(100vw - 80px)!important;max-width:calc(100vw - 80px)!important}
  main :where(p,.lede,.eyebrow){max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}

  .portfolio-view-switch{flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;max-width:100%!important}
  .portfolio-view-switch .gallery-tabs{margin:0!important;flex:0 1 auto!important}
  .portfolio-view-switch a[data-portfolio-view-switch]{flex:0 1 auto!important;margin:0!important;max-width:100%!important}
  .portfolio-page .portfolio-grid{
    columns:auto!important;
    column-count:1!important;
    display:block!important;
    width:calc(100vw - 80px)!important;
    max-width:calc(100vw - 80px)!important;
    margin:0!important;
    padding:0!important;
  }
  .portfolio-page .portfolio-grid .artwork-frame{display:block!important;width:100%!important;max-width:100%!important;margin:0 0 20px!important}
  .portfolio-page .portfolio-grid .artwork-frame img{display:block!important;width:100%!important;max-width:100%!important;height:auto!important}

  .workshop .cabinet-shell{width:calc(100vw - 32px)!important;max-width:calc(100vw - 32px)!important;aspect-ratio:auto!important}
  .workshop .compact-cabinet{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    overflow:hidden!important;
  }
  .workshop .compact-cabinet .cabinet-drawer{width:auto!important;min-width:0!important;max-width:100%!important}
  .workshop .compact-cabinet .cabinet-drawer>summary{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important}

  .contact-intake-page{width:calc(100vw - 80px)!important;max-width:calc(100vw - 80px)!important;margin:8px auto 30px!important;padding:0!important;box-sizing:border-box!important}
  .contact-intake-page .service-intake{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;gap:25px!important}
  .contact-intake-page :where(.intake-package-column,.intake-workspace,.intake-step){width:100%!important;max-width:100%!important;min-width:0!important;margin-inline:0!important;box-sizing:border-box!important}
}

/* Text-only gallery choices, with the alternate view on its own row. */
.portfolio-page .portfolio-view-switch{flex-direction:column!important;align-items:flex-end!important;gap:2px!important}
.portfolio-page .portfolio-view-switch .gallery-tabs{display:flex;gap:24px;margin:0!important}
.portfolio-page .portfolio-view-switch .gallery-tabs button,
.portfolio-page .portfolio-view-switch a[data-portfolio-view-switch]{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;min-height:44px;padding:8px 4px;color:var(--muted);text-decoration:none}
.portfolio-page .portfolio-view-switch .gallery-tabs button[aria-selected="true"]{color:#fff5ff;text-shadow:0 0 6px #f2d5ff,0 0 16px #d397f5,0 0 28px #ab7ce3}
.portfolio-page .portfolio-view-switch a[data-portfolio-view-switch]{align-self:flex-end;font-size:14px;letter-spacing:.06em}
.portfolio-page .portfolio-view-switch :is(button,a):hover{color:#fff5ff;text-shadow:0 0 10px #d397f5}
.portfolio-page .portfolio-view-switch :is(button,a):focus-visible{outline:2px solid #e6c7fa;outline-offset:4px}
@media(max-width:720px){.portfolio-page .portfolio-view-switch{align-items:center!important}.portfolio-page .portfolio-view-switch a[data-portfolio-view-switch]{align-self:center}}
