/* LeoScorpioLeo home page 2026 (lsl-home-2026.php). From the approved mockup "LeoScorpioLeo Home Mockup".
   Layout: full-page sideways carousel of three "sign" pages; a split neon wordmark acts as the page switcher.
   Under Look Good: the shirt mosaic, in the Inochi colors (sop.leoscorpioleo.com/theme/) on the black page. */
:root{
  --night:#000000;
  --ink:#f4f2fb;
  --muted:#b9b6c9;
  --pink:#ff5aa8;
  --pink-glow:rgba(255,40,150,.7);
  --lav:#b3baff;
  --lav-glow:rgba(105,120,255,.9);
  --glyph:#5b6dff;
  --gold:#E3C57A; /* Inochi gold-bright: the only warm color allowed (Theme SOP 1.3, 20 step 3) */
  /* Inochi brand tokens, for the mosaic tiles */
  --in-abyss:#0B2A3C;
  --in-deep:#135E75;
  --in-lake:#27798C;
  --in-frost:#EAF4F6;
  --in-gold:#C9A24A;
  --in-gold-bright:#E3C57A;
  --f-logo:"Bebas Neue","Oswald","Arial Narrow",Impact,sans-serif;
  --f-hand:"Gochi Hand","Comic Neue","Segoe Print",cursive;
  --f-body:"Jost","Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  --f-copy:"Anaheim","Jost","Futura","Century Gothic",system-ui,sans-serif; /* the three page paragraphs (James, 2026-10-25) */
  --slide-ms:900ms;
  color-scheme:dark;
}
html,body.lsl-home26{background:var(--night)!important;color:var(--ink);margin:0;padding:0}
body.lsl-home26{font:16px/1.4 var(--f-body);overflow-x:hidden;-webkit-text-size-adjust:100%}
.lsl-home26 *,.lsl-home26 *::before,.lsl-home26 *::after{box-sizing:border-box}
.lsl-home26 img{max-width:100%}
.lsl-home26 button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;box-shadow:none;text-transform:none;min-height:0;border-radius:0}
.lsl-home26 button:focus-visible,.lsl-home26 a:focus-visible{outline:2px solid var(--lav);outline-offset:4px;border-radius:4px}
.lsl-home26 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.stage{position:relative}

/* ---------- Wordmark / switcher ---------- */
.logo{
  position:absolute;z-index:5;top:clamp(14px,3vh,36px);
  left:max(16px,env(safe-area-inset-left,0px),4vw);
  display:inline-grid;grid-template-columns:auto auto auto;row-gap:2px;
  user-select:none;-webkit-user-select:none;
}
.logo .w{font-family:var(--f-logo);font-weight:400;font-size:clamp(46px,6.4vw,104px);line-height:.86;letter-spacing:.005em}
.logo .tags{grid-column:1/-1;display:flex;width:max-content}
.logo .ghost{position:absolute;z-index:-1;left:-4%;right:-4%;top:-30%;bottom:-45%;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.logo .ghost img{height:100%;width:auto;max-width:none;opacity:.16}
.logo .t{font-family:var(--f-body);font-weight:400;font-size:clamp(12px,1.38vw,22px);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;padding-right:.35em;justify-self:start;line-height:1.2}
.logo .w,.logo .t{
  color:var(--pink);opacity:.72;text-shadow:0 0 6px var(--pink-glow),0 0 18px var(--pink-glow);
  transition:color .35s,opacity .35s,text-shadow .35s,filter .35s}
.logo .seg.on{color:var(--lav);opacity:1;
  text-shadow:0 0 4px #fff,0 0 10px var(--lav-glow),0 0 26px var(--lav-glow),0 0 48px var(--lav-glow)}
.logo .seg.hot:not(.on){opacity:1;filter:brightness(1.35);
  text-shadow:0 0 4px #fff,0 0 12px var(--pink-glow),0 0 30px var(--pink-glow),0 0 54px var(--pink-glow)}
.logo .seg.hot.on{filter:brightness(1.2)}

/* ---------- Arrows ---------- */
.arrow{position:absolute;z-index:6;top:calc(var(--hero-h,80vh) / 2);transform:translateY(-50%);
  width:44px;height:64px;display:grid;place-items:center;opacity:.55;transition:opacity .25s,transform .25s}
.arrow::before{content:"";width:18px;height:30px;background:var(--lav);
  filter:drop-shadow(0 0 8px var(--lav-glow))}
.arrow.prev{left:max(4px,env(safe-area-inset-left,0px))}
.arrow.next{right:max(4px,env(safe-area-inset-right,0px))}
.arrow.prev::before{clip-path:polygon(100% 0,0 50%,100% 100%)}
.arrow.next::before{clip-path:polygon(0 0,100% 50%,0 100%)}
.arrow:hover{opacity:1}

/* ---------- Carousel ---------- */
.viewport{overflow:hidden;transition:height .5s ease}
.track{display:flex;align-items:flex-start;width:500%;transition:transform var(--slide-ms) cubic-bezier(.65,.02,.25,1)}
.slide{width:calc(100% / 5);min-width:0}
.track.instant{transition:none}
/* before home.js runs: only the first page shows */
.track:not(.ready){width:100%}
.track:not(.ready) .slide{width:100%}
.track:not(.ready) .slide+.slide{display:none}

/* desktop: sign | paragraph | photo (James, 2026-10-24: the paragraph fills the open middle) */
.hero{position:relative;height:var(--hero-h,82vh);display:grid;grid-template-columns:minmax(0,34fr) minmax(0,26fr) minmax(0,40fr);overflow:hidden}
.label{position:relative;z-index:2;display:flex;flex-direction:column;
  padding-top:calc(clamp(14px,3vh,36px) + clamp(70px,8.4vw,132px));
  padding-left:max(16px,env(safe-area-inset-left,0px),4vw);padding-right:12px;min-width:0}
.sign{display:flex;gap:clamp(10px,1.2vw,18px);align-items:flex-start;margin-top:clamp(10px,2.5vh,30px)}
.sign img{width:clamp(56px,6vw,110px);height:auto;flex:none}
.sign h2{margin:0;font-family:var(--f-logo);font-weight:400;font-size:clamp(24px,2.5vw,40px);line-height:1;color:var(--lav);
  text-shadow:0 0 8px var(--lav-glow),0 0 22px var(--lav-glow);letter-spacing:.01em;text-transform:none}
.sign ul{list-style:none;margin:.35em 0 0;padding:0;font-family:var(--f-hand);font-size:clamp(14px,1.3vw,25px);line-height:1.3;color:var(--ink)}
.sign li{margin:0;padding:0}
/* the constellation sits just under the sign lines, not pinned to the bottom (James, 2026-10-24) */
.const{width:min(100%,520px);height:auto;margin-top:clamp(18px,3.5vh,44px);margin-bottom:0;opacity:.92;
  -webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.photo{position:relative;z-index:1;min-width:0}
.photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.photo.contain img{object-fit:contain;object-position:right top}

.copy{position:relative;z-index:2;min-width:0;
  padding-top:calc(clamp(14px,3vh,36px) + clamp(70px,8.4vw,132px) + clamp(10px,2.5vh,30px));padding-inline:clamp(8px,1.6vw,30px)}
.copy p{margin:0;max-width:30em;text-align:left;font-family:var(--f-copy);font-weight:400;font-size:clamp(16px,min(1.45vw,2.6vh),26px);line-height:1.5;text-wrap:pretty;color:var(--ink)}
.copy strong{font-weight:700;color:var(--lav)} /* Anaheim's real bold (variable 400-800), no faux bold */
.copy strong.pink{color:var(--pink)} /* "feel good" / "do good" in the Look Good paragraph: the tagline's FEEL GOOD / DO GOOD magenta */

.below{padding-block:12px clamp(40px,8vh,90px); /* 12px = BELOW_GAP in home.js */
  padding-inline:0} /* the gallery and the construction image run edge to edge (James, 2026-10-24) */
.construction{max-width:980px;margin:0 auto;aspect-ratio:16/7;max-height:60vh;width:100%;border-radius:6px;
  display:grid;place-items:center;text-align:center;
  background:repeating-linear-gradient(-45deg,#15131c 0 26px,#0b0a10 26px 52px);
  border:1px dashed #3a3650}
.construction b{display:block;font-family:var(--f-logo);font-weight:400;font-size:clamp(30px,4vw,54px);color:var(--gold);letter-spacing:.04em}
.construction span{color:var(--muted);font-size:15px}
.construction.has-img{aspect-ratio:auto;max-width:none;max-height:none;background:none;border:0;border-radius:0;display:block}
.construction.has-img img{display:block;width:100%;height:auto;border-radius:0} /* full width, scales with the page */

.hint{display:none}

/* ---------- Shirt mosaic (under Look Good) ---------- */
.lsl-mosaic{--gap:6px;max-width:none;margin:0;display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.lsl-mosaic .tile{position:relative;overflow:hidden;border-radius:4px;background:var(--in-abyss);aspect-ratio:1/1;min-width:0;min-height:0}
.lsl-mosaic.packed .tile{aspect-ratio:auto}
.tile-shirt{display:block;color:inherit;text-decoration:none}
.tile-shirt img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .4s}
.tile-shirt .name{position:absolute;left:0;right:0;bottom:0;padding:1.6em .75em .55em;
  font-family:var(--f-body);font-weight:500;font-size:clamp(12px,1.05vw,15px);letter-spacing:.08em;text-transform:uppercase;line-height:1.2;
  color:var(--in-frost);background:linear-gradient(rgba(11,42,60,0),rgba(11,42,60,.9) 55%);
  transition:color .3s}
.tile-shirt::after{content:"";position:absolute;inset:0;border-radius:4px;box-shadow:inset 0 0 0 0 var(--in-gold);transition:box-shadow .3s;pointer-events:none}
.tile-shirt:hover img,.tile-shirt:focus-visible img{transform:scale(1.045)}
.tile-shirt:hover .name,.tile-shirt:focus-visible .name{color:var(--in-gold-bright)}
.tile-shirt:hover::after,.tile-shirt:focus-visible::after{box-shadow:inset 0 0 0 2px var(--in-gold)}
.lsl-mosaic .tile.big .name{font-size:clamp(14px,1.35vw,19px)}

.tile-cats{grid-column:span 2;grid-row:span 2;aspect-ratio:auto!important;display:flex;flex-direction:column;
  padding:clamp(14px,1.6vw,26px);background:linear-gradient(155deg,var(--in-deep),var(--in-abyss) 70%)!important;
  box-shadow:inset 0 0 0 1px rgba(201,162,74,.35)}
.tile-cats h3{margin:0 0 .5em;font-family:var(--f-logo);font-weight:400;font-size:clamp(24px,2.4vw,38px);line-height:1;letter-spacing:.03em;color:var(--in-gold);text-transform:none}
.tile-cats ul{list-style:none;margin:0;padding:0;columns:var(--cat-cols,1);column-gap:1.2em;
  font-size:clamp(14px,1.15vw,17px);line-height:1.25}
.tile-cats li{margin:0 0 .5em;padding:0;break-inside:avoid}
.tile-cats a{color:var(--in-frost);text-decoration:none;border-bottom:1px solid rgba(234,244,246,.25);transition:color .25s,border-color .25s}
.tile-cats a:hover,.tile-cats a:focus-visible{color:var(--in-gold-bright);border-color:var(--in-gold)}
.tile-cats li:first-child a{color:var(--in-gold-bright);font-weight:500}

/* "Become an LSL Member": one per screen at most (home.js spaces them); gold marks the commitment (Theme SOP 17) */
.tile-member{display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:.4em;text-align:center;
  padding:12px;text-decoration:none;background:linear-gradient(155deg,var(--in-abyss),var(--in-deep))!important;
  box-shadow:inset 0 0 0 2px var(--in-gold);transition:box-shadow .3s,filter .3s}
.tile-member b{font-family:var(--f-logo);font-weight:400;font-size:clamp(22px,2.1vw,32px);line-height:1;letter-spacing:.03em;color:var(--in-gold-bright)}
.tile-member span{font-size:clamp(12px,1vw,14px);line-height:1.3;color:var(--in-frost)}
.tile-member:hover,.tile-member:focus-visible{box-shadow:inset 0 0 0 3px var(--in-gold-bright);filter:brightness(1.15)}

/* ---------- Footer ---------- */
.lsl-foot{padding:28px 16px calc(28px + env(safe-area-inset-bottom,0px));text-align:center;color:var(--muted);font-size:14px;border-top:1px solid #1d1b26}
.lsl-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-bottom:10px}
.lsl-foot a{color:var(--lav);text-decoration:none;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.lsl-foot a:hover{text-shadow:0 0 10px var(--lav-glow)}
.lsl-foot p{margin:0}

/* ---------- Phones and upright tablets: fade-and-flip ---------- */
@media (max-width:760px),(orientation:portrait) and (max-width:1100px){
  .logo{left:50%;transform:translateX(-50%);top:clamp(12px,2vh,24px)}
  .logo .w{font-size:min(15.5vw,96px)}
  .logo .t{font-size:min(3.5vw,21px)}
  .arrow{width:34px;height:52px;opacity:.5}
  .arrow::before{width:13px;height:22px}
  .hero{display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .photo,.label,.copy{position:absolute;inset:0;transition:opacity 1.1s ease}
  .photo img{-webkit-mask-image:linear-gradient(transparent 0,#000 30%);mask-image:linear-gradient(transparent 0,#000 30%);object-position:center 35%}
  .photo.contain img{object-fit:contain;object-position:center bottom}
  .label{padding-top:calc(clamp(12px,2vh,24px) + min(15.5vw,96px) + min(3.5vw,21px) + 18px);
    padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px));align-items:center}
  .sign{margin-top:clamp(16px,4vh,40px)}
  .sign img{width:clamp(64px,18vw,110px)}
  .sign h2{font-size:clamp(26px,7.5vw,44px)}
  .sign ul{font-size:clamp(16px,4.4vw,28px)}
  .const{width:min(100%,560px);margin-top:clamp(20px,4vh,44px);margin-bottom:0}
  /* states */
  .hero .photo{opacity:1}.hero .label,.hero .copy{opacity:0;pointer-events:none}
  .hero.black .photo{opacity:0;transition:none}
  .hero.is-label .photo{opacity:0}.hero.is-label .label{opacity:1}
  .hero.is-copy .photo{opacity:0}.hero.is-copy .copy{opacity:1}
  .hint{display:flex;position:absolute;z-index:4;left:50%;bottom:14px;transform:translateX(-50%);
    align-items:center;gap:8px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
    transition:opacity .6s}
  .hint i{width:12px;height:12px;border-radius:50%;background:var(--lav);box-shadow:0 0 10px var(--lav-glow);animation:lslpulse 1.6s ease-in-out infinite}
  .tapped .hint{opacity:0;pointer-events:none}
  /* phones: the paragraph is the third side of the flip (photo, sign, paragraph) */
  .copy{padding-top:calc(clamp(12px,2vh,24px) + min(15.5vw,96px) + min(3.5vw,21px) + clamp(28px,6vh,60px));
    padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px));padding-bottom:48px}
  .copy p{margin:0 auto;max-width:32em;text-align:center;font-size:clamp(18px,min(5vw,2.9vh),30px);line-height:1.45}
  .construction{aspect-ratio:4/3}
  .lsl-mosaic{--gap:4px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .tile-shirt .name{font-size:12px;letter-spacing:.06em;padding:1.4em .55em .45em}
}
@keyframes lslpulse{0%,100%{transform:scale(.7);opacity:.55}50%{transform:scale(1.15);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .track,.viewport,.photo,.label{transition:none!important}
  .hint i{animation:none}
  .tile-shirt img{transition:none}
}