/* s06 ways: ivory morning light, three doors that swing open onto warm light */
#s-ways.z7{
  --dw:236px; --dh:500px; --dep:34px; --nameH:70px; --L:330px;
  --ink6:#14231a; --gold6:#9a7526; --paint:#163522; --paint2:#0f2618;
  position:relative;overflow:hidden;padding:clamp(80px,9vw,128px) 0 clamp(72px,8vw,112px);color:var(--ink6);
  background:
    radial-gradient(ellipse 60% 50% at 18% 12%,rgba(255,248,230,.95) 0,rgba(255,248,230,0) 70%),
    linear-gradient(to bottom,#f2eadb 0,#e9dfc9 55%,#e0d3b9 100%);
}
#s-ways .w6-wrap{position:relative;z-index:1;width:min(1240px,calc(100% - 48px));margin:0 auto}

/* morning sun through a tall window, falling across the wall */
#s-ways .w6-sun{position:absolute;inset:0;pointer-events:none;z-index:0}
#s-ways .w6-sun i{position:absolute;top:-6%;height:92%;width:15%;background:linear-gradient(to bottom,rgba(255,244,214,.0),rgba(255,240,200,.75) 30%,rgba(255,236,190,.5) 80%,rgba(255,236,190,0));
  filter:blur(14px);mix-blend-mode:soft-light;transform:translateX(calc(var(--w6-p,.5) * 12vw)) skewX(-24deg);transition:transform .2s linear}
#s-ways .w6-sun i:first-child{left:6%}
#s-ways .w6-sun i:last-child{left:24%;width:10%;opacity:.8}
#s-ways .w6-sun::after{content:"";position:absolute;inset:0;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .48  0 0 0 0 .38  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* header */
#s-ways .w6-head{display:flex;align-items:flex-end;gap:22px;margin-bottom:clamp(40px,5vw,72px)}
#s-ways .w6-odo{font-family:var(--serif);font-size:clamp(64px,8vw,120px);line-height:.82;color:var(--gold6);letter-spacing:-.02em}
#s-ways .w6-eye{font:800 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#8a7a5c;margin-bottom:12px}
#s-ways .w6-h{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6.4vw,92px);line-height:.95;color:var(--ink6);letter-spacing:-.02em}

/* the hall: shared perspective so the floor and doors meet at one vanishing point */
#s-ways .w6-hall{position:relative;perspective:1300px;perspective-origin:50% calc(var(--nameH) + var(--dh) * .42);transform-style:preserve-3d}
#s-ways .w6-row{display:flex;justify-content:space-between;transform-style:preserve-3d;position:relative}
#s-ways .w6-floor{position:absolute;left:-40%;right:-40%;top:calc(var(--nameH) + var(--dh));height:var(--L);transform-origin:50% 0;transform:rotateX(90deg);
  background:
    repeating-linear-gradient(90deg,rgba(96,72,40,.2) 0 1px,transparent 1px 64px),
    linear-gradient(to bottom,#c9b48d,#d6c5a3 60%,#e2d6bd);
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
#s-ways .w6-hall::after{content:"";position:absolute;left:-40%;right:-40%;top:calc(var(--nameH) + var(--dh) - 12px);height:12px;background:linear-gradient(#efe6d4,#e2d6be);box-shadow:0 1px 0 rgba(90,70,40,.18),0 -1px 0 rgba(255,255,255,.6);pointer-events:none}
#s-ways .w6-hall{padding-bottom:calc(var(--L) * .62)}

#s-ways .w6-bay{flex:1;display:flex;flex-direction:column;align-items:center;transform-style:preserve-3d;position:relative}
#s-ways .w6-name{height:var(--nameH);display:flex;align-items:flex-start;gap:12px;font-family:var(--serif);font-size:clamp(26px,2.5vw,36px);line-height:1;color:var(--ink6);max-width:none;white-space:nowrap}
#s-ways .w6-name span{font:800 11px/1 var(--sans);letter-spacing:.2em;color:var(--gold6);padding-top:.5em}

/* the opening */
#s-ways .w6-door{position:relative;width:var(--dw);height:var(--dh);transform-style:preserve-3d;
  box-shadow:0 0 0 12px #f6f0e4,0 0 0 13px rgba(120,96,60,.28),0 0 0 22px #efe7d7,0 0 0 23px rgba(120,96,60,.18),-18px 26px 40px 14px rgba(110,84,40,.14)}
#s-ways .w6-glow{position:absolute;left:-60%;right:-60%;top:-20%;bottom:-6%;background:radial-gradient(ellipse 50% 55% at 50% 62%,rgba(255,222,150,.7),rgba(255,222,150,0) 70%);opacity:0;transition:opacity .9s ease .15s;pointer-events:none;transform:translateZ(calc(var(--dep) * -1 - 2px))}
#s-ways .w6-room{position:absolute;inset:0;transform:translateZ(calc(var(--dep) * -1));display:flex;align-items:flex-end;
  background:radial-gradient(ellipse 90% 60% at 50% 18%,#fffdf6 0,#fff5dc 42%,#f8e3b0 78%,#efcf8a 100%);
  box-shadow:inset 0 -30px 60px -20px rgba(214,160,70,.35)}
#s-ways .w6-in{padding:28px 22px 30px;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s ease}
#s-ways .w6-one{font-family:var(--serif);font-size:30px;line-height:1.02;color:var(--ink6);margin-bottom:14px;letter-spacing:-.01em}
#s-ways .w6-defs{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;margin:0 0 10px;font-size:12.5px;line-height:1.35;color:#4a4232}
#s-ways .w6-defs dt{font:800 9.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8a7a5c;white-space:nowrap}
#s-ways .w6-defs dd{margin:0}
#s-ways .w6-small{font-size:12px;line-height:1.4;color:#7d6c4c;margin-bottom:10px}
#s-ways .w6-go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:12px 18px;border-radius:999px;background:var(--ink6);color:#f4ecd8;font:700 14px/1 var(--sans);transition:transform .25s,background .25s}
#s-ways .w6-go:hover{transform:translateY(-2px);background:#0a1a0a}
#s-ways .w6-go svg{width:16px;height:16px}
#s-ways .w6-go:focus-visible,#s-ways .w6-leaf:focus-visible,#s-ways .w6-cta:focus-visible{outline:2px solid var(--gold6);outline-offset:4px}

/* reveal jambs */
#s-ways .w6-j{position:absolute;display:block;background:linear-gradient(90deg,#e9dfcb,#d8c9aa)}
#s-ways .w6-jl,#s-ways .w6-jr{top:0;height:100%;width:var(--dep);transform-origin:0 50%;transform:rotateY(90deg)}
#s-ways .w6-jl{left:0}
#s-ways .w6-jr{left:100%;background:linear-gradient(90deg,#dccfb4,#cdbd9c)}
#s-ways .w6-jt{left:0;top:0;width:100%;height:var(--dep);transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(#d3c4a4,#e6dcc8)}
#s-ways .open .w6-j{background:linear-gradient(90deg,#fff3d4,#f6dfa6)}

/* floor under each bay (mobile) */
#s-ways .w6-bfloor{display:none}

/* light on the floor and in the air */
#s-ways .w6-spill{position:absolute;left:-55%;width:210%;top:100%;height:var(--L);transform-origin:50% 0;transform:rotateX(90deg) translateZ(1px);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
  background:linear-gradient(to bottom,rgba(255,250,232,1) 0,rgba(255,238,196,.95) 30%,rgba(255,226,160,.45) 70%,rgba(255,226,160,0) 100%);
  filter:blur(2px);opacity:0;transition:opacity .9s ease .2s;pointer-events:none}
#s-ways .w6-shaft{position:absolute;left:-30%;width:160%;top:0;height:calc(var(--dh) * 1.35);transform-origin:50% 0;transform:rotateX(41deg);
  clip-path:polygon(31% 0,69% 0,100% 100%,0 100%);opacity:0;transition:opacity 1.1s ease .3s;pointer-events:none}
#s-ways .w6-shaft b{position:absolute;inset:0;filter:blur(6px);
  background:
    repeating-linear-gradient(96deg,rgba(255,244,214,0) 0 18px,rgba(255,244,214,.38) 18px 30px,rgba(255,244,214,0) 30px 52px),
    linear-gradient(to bottom,rgba(255,232,178,0) 0,rgba(255,232,178,0) 48%,rgba(255,228,170,.7) 62%,rgba(255,224,160,.4) 78%,rgba(255,224,160,0));
  background-size:140% 100%,100% 100%;animation:w6rays 14s linear infinite}
@keyframes w6rays{to{background-position:140% 0,0 0}}
#s-ways .w6-shaft i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#fffaf0;box-shadow:0 0 6px 1px rgba(255,236,190,.9);animation:w6mote var(--d) ease-in-out var(--o) infinite alternate}
@keyframes w6mote{0%{transform:translate(0,0);opacity:.2}50%{opacity:1}100%{transform:translate(14px,-26px);opacity:.35}}

/* the door leaf */
#s-ways .w6-leaf{position:absolute;inset:0;padding:0;transform-style:preserve-3d;transform-origin:0 50%;transform:translateZ(1px) rotateY(0);
  transition:transform 1.25s cubic-bezier(.22,.9,.25,1);cursor:pointer;border-radius:0;background:none}
#s-ways [data-h="r"] .w6-leaf{transform-origin:100% 50%}
#s-ways .w6-face,#s-ways .w6-back{position:absolute;inset:3px 3px 5px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#s-ways .w6-face{background:
    linear-gradient(115deg,rgba(255,240,205,.16) 0,rgba(255,240,205,0) 40%),
    linear-gradient(to bottom,var(--paint),var(--paint2));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.12),inset -1px -1px 0 rgba(0,0,0,.35)}
#s-ways .w6-p1,#s-ways .w6-p2{position:absolute;left:16%;right:16%;border-radius:2px;
  box-shadow:inset 2px 2px 0 rgba(255,250,230,.14),inset -2px -2px 0 rgba(0,0,0,.35),0 0 0 6px rgba(0,0,0,.08),2px 2px 0 6px rgba(255,250,230,.06);
  background:linear-gradient(115deg,rgba(255,240,205,.08),rgba(0,0,0,.08))}
#s-ways .w6-p1{top:9%;height:46%}
#s-ways .w6-p2{top:62%;height:28%}
#s-ways .w6-knob{position:absolute;right:9%;top:52%;width:16px;height:16px;margin-top:-8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff3c4 0,#dfc474 30%,#9a7526 70%,#5f4512 100%);box-shadow:2px 3px 5px rgba(0,0,0,.4)}
#s-ways [data-h="r"] .w6-knob{right:auto;left:9%}
#s-ways .w6-back{transform:rotateY(180deg);background:linear-gradient(90deg,#2b4a30,#1a3a24);
  box-shadow:inset 0 0 0 10px rgba(0,0,0,.08)}
#s-ways .w6-edge{position:absolute;top:3px;bottom:5px;left:calc(100% - 3px);width:16px;transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(90deg,#efe3c8,#d7c49c)}
#s-ways [data-h="r"] .w6-edge{left:3px}
/* thin seam of light around a closed door */
#s-ways .w6-door::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -4px 6px -2px rgba(255,214,130,.9);transform:translateZ(-2px)}

/* open state */
#s-ways .open .w6-leaf{transform:translateZ(1px) rotateY(-100deg)}
#s-ways [data-h="r"].open .w6-leaf{transform:translateZ(1px) rotateY(100deg)}
#s-ways .open .w6-glow,#s-ways .open .w6-spill{opacity:1}
#s-ways .open .w6-shaft{opacity:.9}
#s-ways .open .w6-in{opacity:1;transform:none;transition-delay:.35s}

/* foot */
#s-ways .w6-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;margin-top:8px;text-align:center}
#s-ways .w6-note{font-family:var(--serif);font-size:clamp(22px,2vw,28px);color:var(--ink6);max-width:none}
#s-ways .w6-cta{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;background:var(--ink6);color:#f4ecd8;font:700 15px/1 var(--sans);transition:transform .25s,background .25s}
#s-ways .w6-cta:hover{transform:translateY(-2px);background:#0a1a0a}
#s-ways .w6-cta svg{width:18px;height:18px}
#s-ways .w6-pl{width:100%;font-size:13px;color:#7d6c4c;max-width:none}

/* reduced motion: no swing, doors simply stand open or closed */
#s-ways.w6-rm *{transition-duration:.01s!important;transition-delay:0s!important;animation:none!important}

@media (max-width:1100px){ #s-ways.z7{--dw:200px;--dh:440px} #s-ways .w6-one{font-size:26px} }
@media (max-width:760px){
  #s-ways.z7{--dw:min(62vw,250px);--dh:min(108vw,420px);--nameH:54px;--L:150px}
  #s-ways .w6-wrap{width:calc(100% - 32px)}
  #s-ways .w6-hall{perspective:none;padding-bottom:0}
  #s-ways .w6-floor,#s-ways .w6-hall::after{display:none}
  #s-ways .w6-row{flex-direction:column;align-items:center;gap:0}
  #s-ways .w6-bay{width:100%;perspective:900px;perspective-origin:50% calc(var(--nameH) + var(--dh) * .4);padding-bottom:150px}
  #s-ways .w6-shaft{height:calc(var(--dh) * 1.08);transform:rotateX(22deg)}
  #s-ways .open .w6-shaft{opacity:.75}
  #s-ways .w6-shaft{-webkit-mask-image:linear-gradient(to bottom,transparent 60%,#000 82%);mask-image:linear-gradient(to bottom,transparent 60%,#000 82%)}
  #s-ways .w6-bfloor{display:block;position:absolute;left:-40%;right:-40%;top:100%;height:var(--L);transform-origin:50% 0;transform:rotateX(90deg);
    background:repeating-linear-gradient(90deg,rgba(96,72,40,.2) 0 1px,transparent 1px 52px),linear-gradient(to bottom,#c9b48d,#e2d6bd);
    -webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent);mask-image:linear-gradient(to bottom,#000 40%,transparent)}
  #s-ways .w6-one{font-size:26px}
  #s-ways .w6-defs{font-size:12px;gap:4px 8px}
  #s-ways .w6-in{padding:20px 16px 22px}
  #s-ways .w6-name{font-size:28px}
  #s-ways .w6-sun i{width:30%}
  #s-ways .w6-foot{margin-top:24px}
}