/* The opening scene with her own photo behind the frost (Oct 11: she did not like the blue of the night-city picture).
   index.html sets <html data-hero="photo">; content.js photos.hero is the photo. app.js tints the frost warm cocoa and darkens it
   so the ivory words stay readable. ?hero=night still shows the old night window; noir and the other palettes never match these rules. */
html[data-palette="atelier"][data-hero="photo"]{
  --hero-top:#2A1B1A;                 /* the address-bar colour while the opening scene is on screen */
  --night:#2A1B1A;                    /* the hero's ground, and the text on its solid button */
  --frost:#F6E3DA;                    /* small caps over the frost: eyebrow, gate title, status, hint */
  --ivory:#FBF1EC;                    /* signature, tagline, nav over the hero */
  background:#2A1B1A;                 /* what shows behind the page when a phone over-scrolls at the top */
}
html[data-palette="atelier"][data-hero="photo"] .hero__fallback{background:#2A1B1A center/cover no-repeat}
/* edge darkening, warm: heavier at the top (nav and signature) and the bottom (status, hint) */
html[data-palette="atelier"][data-hero="photo"] .hero::after{
  background:
    linear-gradient(to bottom,rgba(26,16,15,.45) 0%,rgba(26,16,15,.1) 18%,rgba(26,16,15,0) 34%,rgba(26,16,15,0) 70%,rgba(26,16,15,.38) 100%),
    radial-gradient(120% 90% at 50% 55%,transparent 55%,rgba(26,16,15,.3) 100%)}
html[data-palette="atelier"][data-hero="photo"] .sig--hero{filter:drop-shadow(0 0 24px rgba(26,16,15,.45))}
html[data-palette="atelier"][data-hero="photo"] .hero__eyebrow,
html[data-palette="atelier"][data-hero="photo"] .hero__tagline,
html[data-palette="atelier"][data-hero="photo"] .hero__sub,
html[data-palette="atelier"][data-hero="photo"] .status,
html[data-palette="atelier"][data-hero="photo"] .hero__hint,
html[data-palette="atelier"][data-hero="photo"] .gate__title,
html[data-palette="atelier"][data-hero="photo"] .gate__text{text-shadow:0 1px 16px rgba(26,16,15,.55),0 0 2px rgba(26,16,15,.35)}
html[data-palette="atelier"][data-hero="photo"] .hero__sub,
html[data-palette="atelier"][data-hero="photo"] .gate__text{color:rgba(251,241,236,.95)}
html[data-palette="atelier"][data-hero="photo"] .status i::after{background:#F3C9CD}
@media (prefers-reduced-motion:reduce){html:not(.motion)[data-palette="atelier"][data-hero="photo"] .status i::after{box-shadow:0 0 0 4px rgba(243,201,205,.18)}}   /* reduced motion: the ring does not pulse, so the dot keeps a still halo */

/* Oct 19: on wide screens the words move into a left column (over the darker tree side), so she stays clear on the right of
   the wide photo instead of sitting under the signature. Phones and narrow windows keep the centred layout. */
@media (min-width:980px) and (min-aspect-ratio:13/10){
  html[data-palette="atelier"][data-hero="photo"] .hero{place-items:center start}
  html[data-palette="atelier"][data-hero="photo"] .hero__inner{max-width:min(560px,44vw);margin-left:clamp(48px,7vw,150px);text-align:left}
  html[data-palette="atelier"][data-hero="photo"] .sig--hero{width:min(100%,560px,52svh);margin:0}
  html[data-palette="atelier"][data-hero="photo"] .gate{margin:0}
  html[data-palette="atelier"][data-hero="photo"] .gate__actions{justify-content:flex-start}
  html[data-palette="atelier"][data-hero="photo"] .status{margin-left:0}
  html[data-palette="atelier"][data-hero="photo"] .hero__sub{max-width:30rem}
  /* a soft shade behind the words, so they stay readable after a wipe uncovers the bright sofa */
  html[data-palette="atelier"][data-hero="photo"] .hero::after{
    background:
      radial-gradient(60% 75% at 22% 52%,rgba(26,16,15,.42) 0%,rgba(26,16,15,0) 70%),
      linear-gradient(to bottom,rgba(26,16,15,.45) 0%,rgba(26,16,15,.1) 18%,rgba(26,16,15,0) 34%,rgba(26,16,15,0) 70%,rgba(26,16,15,.38) 100%),
      radial-gradient(120% 90% at 50% 55%,transparent 55%,rgba(26,16,15,.3) 100%)}
}

/* Oct 20: over the opening scene the top bar is transparent at the very top, but once the page has scrolled the hero's words slide
   under it and overprint the signature and the Menu label. A near-solid warm bar cuts them off cleanly (not while the phone menu is open). */
html[data-palette="atelier"][data-hero="photo"] body:not(.menu-open)[data-theme="night"] .nav.scrolled::before{opacity:1;background:rgba(34,22,21,.88);border-bottom-color:rgba(255,255,255,.08)}

/* Oct 20: a phone on its side with room (about 760-1099px wide, under 521px tall). The words keep their two columns but move to the
   outer edges, and the middle is left clear for her: app.js zooms the wide photo and slides it so she sits there (landCrop). Narrower
   phones on their side keep the plain two columns. */
@media (orientation:landscape) and (min-width:760px) and (max-width:1099px) and (max-height:520px){
  html[data-palette="atelier"][data-hero="photo"] .hero__inner{max-width:none;column-gap:0;grid-template-columns:minmax(0,1fr) clamp(150px,22vw,240px) minmax(0,1fr)}
  html[data-palette="atelier"][data-hero="photo"] .gate,html[data-palette="atelier"][data-hero="photo"] .hero__after{grid-column:3}
  /* a soft shade behind each column, so the words stay readable once a wipe uncovers the bright sofa and the pale branches */
  html[data-palette="atelier"][data-hero="photo"] .hero::after{
    background:
      radial-gradient(28% 85% at 19% 54%,rgba(26,16,15,.46) 0%,rgba(26,16,15,0) 72%),
      radial-gradient(28% 85% at 81% 54%,rgba(26,16,15,.46) 0%,rgba(26,16,15,0) 72%),
      linear-gradient(to bottom,rgba(26,16,15,.45) 0%,rgba(26,16,15,.1) 18%,rgba(26,16,15,0) 34%,rgba(26,16,15,0) 70%,rgba(26,16,15,.38) 100%),
      radial-gradient(120% 90% at 50% 55%,transparent 55%,rgba(26,16,15,.3) 100%)}
}

/* Oct 20: print. The WebGL frost does not print, so the page shows her still photo (the stage, a little darker so the words stay readable). */
@media print{
  .hero__frost{display:none !important}
  .hero__stage{opacity:1 !important}
  .hero__stage img{filter:brightness(.62)}
}