/* StoryFawn hero — Helen visual grammar on the EXISTING hero markup.
   v2 (2026-08-17) after looking at it properly:
     - the old scrim ran to rgba(...,.94) on the left and drowned the scene;
       all the generated art reduced to a dark smudge
     - everything was top-aligned; Helen's signature is type sitting at the
       BOTTOM with the scene breathing above it
     - the hero ran 236px past the fold
   Scoped to .sf-scened, added only after a scene image decodes. */

.sf-scened.hero{
  position:relative;
  /* break out of the page wrapper: the scene must be edge-to-edge or the
     hard container edges read as letterboxing */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  min-height:100svh;
  height:100svh;
  display:flex;
  align-items:flex-end;              /* Helen: content sits at the bottom */
  overflow:hidden;
  padding:0 0 clamp(40px,7vh,88px);
  margin-bottom:0;
}
.sf-scene-layer{
  position:absolute;inset:0;width:100%;height:100%;
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  z-index:0;pointer-events:none;transition:opacity .6s ease;
}
/* Much lighter, and shaped: dark where the type is, clear where the room is.
   Previously .94 flat across the left, which erased the scene entirely. */
.sf-scened.hero .sf-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(105deg, rgba(16,11,22,.86) 0%, rgba(16,11,22,.68) 28%,
                    rgba(16,11,22,.30) 52%, rgba(16,11,22,.04) 78%, rgba(16,11,22,0) 100%),
    linear-gradient(0deg, rgba(16,11,22,.80) 0%, rgba(16,11,22,.20) 30%, rgba(16,11,22,0) 60%);
}
.sf-scened.hero .hero-grid{
  position:relative;z-index:2;
  grid-template-columns:1fr!important;
  max-width:1280px;margin:0 auto;width:100%;padding:0 clamp(20px,4vw,56px);
  align-items:end;
}
.sf-scened.hero .hero-text{max-width:min(46rem,54%);text-align:left}

.sf-scened.hero .hero-eyebrow{
  background:none!important;border:0!important;padding:0!important;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:#f0d49a;font-weight:600;margin-bottom:14px;display:inline-block;
}
.sf-scened.hero h1{
  font-family:"Fraunces",Georgia,serif;font-weight:450!important;
  font-size:clamp(2.9rem,6.4vw,5.4rem);line-height:1.0;letter-spacing:-.015em;
  color:#f7efe4;margin:0 0 18px;
  text-shadow:0 2px 40px rgba(8,5,14,.75);
}
.sf-scened.hero h1 em{font-style:normal;color:#f0d49a}
.sf-scened.hero h1 .hero-h1-line:last-child::after{content:"."}
.sf-scened.hero .hero-sub{
  max-width:44ch;color:#eae1ef;font-size:clamp(15px,1.1vw,17.5px);line-height:1.6;
  text-shadow:0 1px 20px rgba(8,5,14,.7);margin:0 0 26px;
}
.sf-scened.hero .hero-actions{margin:0 0 22px}
.sf-scened.hero .hero-actions .btn-primary,
.sf-scened.hero .hero-actions a[class*="primary"]{
  border-radius:0!important;background:#dab26b!important;color:#1a1420!important;
  border:0!important;font-weight:700;
}
/* the trust strip is useful but must not shout over the scene */
.sf-scened.hero .trust-strip{
  position:relative;z-index:2;opacity:.82;font-size:12.5px;max-width:min(46rem,54%);
}

/* The photo collage and mascot are replaced BY the scene. The site stylesheet
   sets these with !important, so an inline display:none from JS loses -- hence
   the !important here. This was why the bright thumbs kept showing. */
.sf-scened.hero .hero-photos,
.sf-scened.hero .hero-mascot,
.sf-scened.hero [data-sfturn]{display:none!important}  /* hero-scoped: must NOT hide the gallery turntable */

/* ---- world picker: lower right, the panel language ---- */
.sf-worlds{
  position:absolute;right:clamp(18px,4.5vw,72px);bottom:clamp(40px,8vh,96px);z-index:3;
  width:min(300px,32vw);
  background:rgba(18,12,26,.62);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(218,178,107,.24);border-radius:14px;padding:15px 13px;
  box-shadow:0 24px 60px rgba(4,2,10,.45);
}
.sf-worlds h3{margin:0 0 2px;font:600 10.5px/1.2 inherit;letter-spacing:.2em;
  text-transform:uppercase;color:#f0d49a}
.sf-worlds p{margin:0 0 9px;font-size:12px;color:#bfb4ca}
.sf-worlds button{display:block;width:100%;text-align:left;background:none;border:0;
  color:#f5ecdf;padding:8px 10px;border-radius:9px;cursor:pointer;font:inherit}
.sf-worlds button:hover{background:rgba(255,255,255,.07)}
.sf-worlds button.on{background:rgba(218,178,107,.16);
  box-shadow:inset 0 0 0 1px rgba(218,178,107,.42)}
.sf-worlds button.on b{color:#f0d49a}
.sf-worlds b{display:block;font-weight:700;font-size:13.5px}
.sf-worlds span{display:block;font-size:11.5px;color:#bfb4ca;margin-top:1px}
.sf-worlds button:focus-visible{outline:2px solid #f0d49a;outline-offset:2px}

@media(max-width:1024px){
  .sf-worlds{width:min(260px,34vw)}
  .sf-scened.hero .hero-sub{max-width:38ch}
}
@media(max-width:820px){
  .sf-scened.hero{height:auto;min-height:100svh;padding-bottom:34px}
  /* picker is in normal flow here, so the desktop clamp is not needed and was
     squeezing the copy column to ~210px and overflowing the CTA */
  .sf-scened.hero .hero-text,
  .sf-scened.hero .trust-strip{max-width:100%!important}
  .sf-scened.hero .hero-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
  .sf-scened.hero .hero-actions > *{width:100%;text-align:center;justify-content:center}
  .sf-worlds{position:static;width:auto;margin:20px 0 0;display:flex;gap:8px;
    overflow-x:auto;scroll-snap-type:x mandatory;padding:11px;
    background:rgba(18,12,26,.55);box-shadow:none}
  .sf-worlds h3,.sf-worlds p,.sf-worlds span{display:none}
  .sf-worlds button{width:auto;flex:0 0 auto;scroll-snap-align:start;
    white-space:nowrap;padding:8px 13px}
  .sf-scened.hero .sf-scrim{background:
    linear-gradient(0deg, rgba(16,11,22,.93) 0%, rgba(16,11,22,.62) 48%, rgba(16,11,22,.22) 100%)}
}
@media(prefers-reduced-motion:reduce){.sf-scene-layer{transition:none}}

/* world bar for the baked gallery turntable */
.sf-turn-worlds{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:16px auto 0;max-width:620px}
.sf-turn-world{font:500 13px/1 inherit;color:var(--sf-cream,#f5ecdf);
  background:var(--sf-chip-bg,rgba(218,178,107,.14));border:1px solid var(--sf-chip-border,rgba(218,178,107,.28));
  padding:9px 14px;border-radius:999px;cursor:pointer}
.sf-turn-world.on{background:var(--sf-gold,#dab26b);color:var(--sf-ground,#1a1420);border-color:var(--sf-gold,#dab26b)}
.sf-turn-world:focus-visible{outline:2px solid var(--sf-gold-text,#f0d49a);outline-offset:2px}