/* Brand skin: hero, ticker, footer wave, and the display type treatment. Tokens live in soi-tokens.css. */

/* isolation gives the hero its own stacking context, so the z-index:-2 photo layer sits above this gradient but below the copy */
.hero{background:linear-gradient(180deg,var(--soi-surface) 0%,var(--soi-canvas) 100%);isolation:isolate}
/* A real session photograph sits under the hero copy; a linen scrim keeps the umber type legible
   and lets the water show through more towards the bottom edge. The wave SVG stays as a fallback. */
.hero-photo{background:url('assets/soi-waves.svg') center 75%/cover no-repeat;opacity:1}
.hero-photo:has(img){background:none}
.hero-photo img{opacity:.62;object-position:center 62%}
.hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#FFFDF8 0%,#FFFDF8F0 30%,#FCFAF6CC 58%,#F2ECDB80 100%)}   /* starts on --soi-surface, not pure white; the page grain softens the scrim edge */
/* wave-crest stamp: z-index -1 puts it above the photo layer (-2) and below the in-flow copy */
.hero-stamp{position:absolute;right:-70px;bottom:-50px;width:420px;height:420px;z-index:-1;color:var(--soi-ochre);opacity:.08;pointer-events:none;--stamp-tilt:-3deg}   /* .soi-stamp treatment comes from soi-tokens.css; opacity stays a watermark */
@media(max-width:650px){.hero-photo img{object-position:center 70%}.hero-photo::after{background:linear-gradient(180deg,#FFFDF8 0%,#FFFDF8F5 40%,#FCFAF6D9 68%,#F2ECDBA6 100%)}.hero-stamp{display:none}}
.hero-hand{color:var(--soi-slate-deep)}
.soi-title{font:800 clamp(44px,5.2vw,80px)/.98 var(--sans);letter-spacing:-.02em;margin:0;color:var(--soi-umber)}
.soi-title span{color:var(--soi-terracotta)}
.soi-tagline{font:italic 500 clamp(20px,2.2vw,28px)/1.2 var(--sans);margin:18px 0 0;color:var(--soi-coral-deep)}
.hero-bottom{color:var(--soi-umber-soft);border-color:var(--soi-sand)}
.hero-bottom a{color:var(--soi-slate-deep);border-color:var(--soi-sand)}

.ticker{background:var(--soi-linen)}
.ticker-group{color:var(--soi-umber)}
.ticker-group span{color:var(--soi-coral-deep)}

footer{isolation:isolate}
footer::before{content:'';position:absolute;inset:-19px 0 auto;height:20px;background:var(--soi-slate-deep);clip-path:polygon(0 45%,12% 10%,25% 42%,40% 95%,55% 55%,70% 0,85% 20%,100% 70%,100% 100%,0 100%)}

/* admin login screen */
.login-story h1{font:800 clamp(30px,3.4vw,44px)/1.05 var(--sans);letter-spacing:-.02em;margin:16px 0}
.login-story .eyebrow{color:var(--soi-ochre)}
.login-card .eyebrow{color:var(--soi-terracotta)}

@media(max-width:650px){
  .login-story h1{font-size:28px}
}