/* First-paint guard.
   Keeps the un-initialised (Cargo-era) markup from showing while scripts build the real UI.
   Every rule here is scoped to a class that only JavaScript adds, so with JS disabled the page stays fully visible. */

/* 1. Project pages that always forward to menu/?project=…: nothing is shown while the redirect runs.
      (is-embedded = the page is loaded inside the Project page; rs-show = 3s failsafe) */
html.rs-redirect:not(.is-embedded):not(.rs-show){visibility:hidden}

/* 2. Embedded project page (inside the iframe on the Project page).
      Same result case.js used to apply at the end of the page; applied from the first paint instead. */
html.is-embedded{font-size:16px!important}
html.is-embedded,html.is-embedded body{min-height:0!important;height:auto!important;overflow:hidden!important}
html.is-embedded .pin,html.is-embedded .cm-back,html.is-embedded .cm-nav,html.is-embedded .cm-sheet,html.is-embedded .cm-next,html.is-embedded .cm-progress,html.is-embedded .bk-bar{display:none!important}
html.is-embedded body .main:not(#e){padding:0!important;margin:0!important;min-height:0!important}
html.is-embedded body .main>.page:not(#e){padding:0!important;width:100%!important;min-height:0!important;justify-content:center!important}
html.is-embedded body .main .page-layout:not(#e){width:100%!important;max-width:1054px!important;padding:16px!important;margin:0 auto!important;min-height:0!important}
html.is-embedded body .main .page-content:not(#e){width:100%!important;padding:0!important}
html.is-embedded body .main :is(.dz,.cm-r){opacity:1!important;filter:none!important;transform:none!important}

/* 3. Regions that scripts rebuild: side bar, mobile bars, and the grids on Home / Project / Work.
      rs-boot is added in <head> and removed once the scripts have run (or after 1.5s at the latest). */
.pin-left .page-content,.pin-mtop bodycopy,.pin-mbottom bodycopy{transition:opacity .28s ease}
html.rs-boot .pin-left .page-content,html.rs-boot .pin-mtop bodycopy,html.rs-boot .pin-mbottom bodycopy{opacity:0}
body.page-homepage-desktop-1 .main .page-content,body.page-menu .main .page-content,body.page-work .main .page-content{transition:opacity .28s ease}
html.rs-boot body.page-homepage-desktop-1 .main .page-content,html.rs-boot body.page-menu .main .page-content,html.rs-boot body.page-work .main .page-content{opacity:0}

@media (prefers-reduced-motion:reduce){
  .pin-left .page-content,.pin-mtop bodycopy,.pin-mbottom bodycopy,body .main .page-content{transition:none!important}
}

/* Videos behave like GIFs: never show the native play button or player controls (iOS shows a big round play button when autoplay is blocked). */
video::-webkit-media-controls,video::-webkit-media-controls-enclosure,video::-webkit-media-controls-panel,video::-webkit-media-controls-start-playback-button,video::-webkit-media-controls-overlay-play-button{display:none!important;opacity:0!important;pointer-events:none!important;-webkit-appearance:none}
video{-webkit-touch-callout:none}

/* Home: one-glance introduction above the work grid (who I am, what I do, for whom) */
body .home-hero{margin:0 0 clamp(2rem,5vw,3.5rem);max-width:48rem;animation:hhIn .9s cubic-bezier(.22,.8,.2,1) .1s backwards}
body .home-hero h1{font:500 clamp(1.7rem,3.4vw,2.7rem)/1.14 Inter,'Diatype',-apple-system,sans-serif!important;letter-spacing:-.025em;margin:0 0 .9rem;color:inherit}
body .home-hero p{margin:0 0 .45rem;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.5;opacity:.75}
body .home-hero p.hh-sub{font-size:clamp(.9rem,1.2vw,1rem);opacity:.5}
body.mobile .home-hero h1{font-size:28px!important;line-height:1.15}
@keyframes hhIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body .home-hero{animation:none}}
body .home-hero a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Home intro: one voice — same font, size, colour for every line */
body .home-hero h1,body .home-hero p,body .home-hero p.hh-sub,body.mobile .home-hero h1{font:400 clamp(1.05rem,1.6vw,1.3rem)/1.55 Inter,'Diatype',-apple-system,sans-serif!important;letter-spacing:-.01em;color:inherit!important;opacity:1!important;margin:0 0 1rem}
body.mobile .home-hero h1,body.mobile .home-hero p{font-size:17px!important}
body .home-hero p:last-child{margin-bottom:0}