.way-in {
  --way-ink: #eee5d1;
  --way-black: #0c0d0b;
  --way-header: 70px;
  background: var(--way-black);
  color: var(--way-ink);
}
.way-in [hidden], .field-reveal[hidden] { display: none; }
.way-in-heading {
  padding: 60px clamp(20px, 5vw, 72px) 40px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  border-bottom: 1px solid #e8ddc332;
}
.way-in-heading h2 { font: 400 clamp(28px, 4vw, 54px)/1 Georgia, serif; margin: 0; letter-spacing: -.035em; }
.way-in-heading p { font-size: 13px; line-height: 1.6; margin: 0; }
.way-in-runway { position: relative; }
.way-in.is-active[data-mode="scroll"] .way-in-runway { height: calc(100svh + 230svh); }
.way-in-stage {
  height: calc(100svh - var(--way-header));
  min-height: 510px;
  position: sticky;
  top: var(--way-header);
  overflow: hidden;
  isolation: isolate;
  background: var(--way-black);
  outline-offset: -3px;
}
.way-in-scenes, .way-scene, .way-scene-image, .way-trace-wall, .way-trace-shadow { position: absolute; inset: 0; width: 100%; height: 100%; }
.way-scene { opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; pointer-events: none; background: var(--way-black); }
.way-scene.is-current { opacity: 1; visibility: visible; pointer-events: auto; }
.way-scene-image, .way-trace-shadow { object-fit: cover; }
.way-scene-image { filter: brightness(.73) saturate(.68); }
.way-scene[data-way-scene="taste"] .way-scene-image { filter: brightness(.6) saturate(.75); }
.way-scene[data-way-scene="threshold"] .way-scene-image { filter: brightness(.7) saturate(.7); }
.way-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0007 0%, transparent 35%, #0002 55%, #000b 100%); pointer-events: none; }
.way-ascent::after, .way-signal::after { display: none; }
.way-scene-copy { position: absolute; z-index: 2; left: clamp(24px, 5vw, 72px); bottom: 100px; max-width: calc(100% - 48px); }
.way-scene-copy > span { display: block; font-size: 11px; letter-spacing: .18em; margin-bottom: 18px; }
.way-scene-copy h3 { margin: 0; font: 400 clamp(22px, 2.5vw, 38px)/1.2 Georgia, serif; letter-spacing: -.02em; }
.way-scene-copy small { display: block; font-size: 12px; letter-spacing: .22em; margin-top: 16px; }
.way-in-topline, .way-in-bottomline { position: absolute; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 24px; padding: 14px clamp(24px, 5vw, 72px); }
.way-in-topline { top: 0; justify-content: space-between; }
.way-in-bottomline { bottom: 12px; }
.way-in-topline > span, .way-in-scroll { font-size: 10px; letter-spacing: .15em; }
.way-in-topline a, .way-in-bottomline button, .way-in-return button { color: inherit; background: transparent; border: 0; font-size: 12px; letter-spacing: .12em; min-height: 44px; cursor: pointer; padding: 12px 0; }
.way-in-topline a { text-decoration: none; display: inline-flex; align-items: center; }
.way-in-progress { display: flex; gap: 8px; flex: 1; max-width: 300px; }
.way-in-progress button { flex: 1; position: relative; padding: 0; opacity: .5; }
.way-in-progress button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; }
.way-in-progress button[aria-current="step"] { opacity: 1; }
.way-in-progress button[aria-current="step"]::after { height: 2px; }
.way-in-progress button span { font-size: 10px; }
#way-in-play { display: none; }
.way-in[data-mode="auto"] #way-in-play { display: block; }
.way-in-return { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 24px clamp(20px, 5vw, 72px) 32px; }
.way-in-return p { font-size: 11px; letter-spacing: .15em; }
.way-in-return nav { display: flex; flex-wrap: wrap; gap: 24px; }
.way-in-return nav a { font-size: 12px; letter-spacing: .1em; padding: 14px 0; }
.way-in-return button { text-decoration: underline; text-underline-offset: 5px; }
.way-ascent-mark { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 20px; font: 400 clamp(56px, 8vw, 100px)/1 Georgia, serif; letter-spacing: -.04em; }
.way-ascent.is-current .way-ascent-mark { animation: way-rise 4s ease-out both; }
.way-trace-wall { opacity: .68; }
.way-trace-shadow { opacity: 0; filter: brightness(.4) saturate(.5); object-position: 80% center; }
.way-trace.is-current .way-trace-shadow { animation: way-shadow 6s ease-in-out infinite alternate; }
.way-signal-mark { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 50px; }
.way-signal-mark img { width: clamp(170px, 22vw, 290px); height: auto; filter: invert(1) contrast(3) sepia(.7); mix-blend-mode: screen; }
.way-signal.is-current .way-signal-mark { animation: way-light 1.3s ease-out both; }
.way-signal-mark p { margin: 12px 0; font-size: 12px; letter-spacing: .2em; }
.way-signal-mark small { font-size: 9px; letter-spacing: .14em; opacity: .55; }
.way-threshold .way-scene-copy h3 { font-size: clamp(38px, 5vw, 68px); }
.way-threshold .way-scene-copy { z-index: 4; pointer-events: none; transition: opacity .28s ease; }
.threshold-beyond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(.28) saturate(.7); transform: scale(1.06); transition: filter 1.1s ease, transform 1.1s cubic-bezier(.2,.75,.15,1); }
.threshold-door { position: absolute; inset: 0; z-index: 2; display: block; overflow: hidden; perspective: 1400px; cursor: pointer; text-decoration: none; }
.threshold-door-panel { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; transition: transform .95s cubic-bezier(.2,.82,.18,1); }
.threshold-door-panel img { position: absolute; top: 0; width: 200%; max-width: none; height: 100%; object-fit: cover; }
.threshold-door-panel--left { left: 0; transform-origin: left center; }
.threshold-door-panel--right { right: 0; transform-origin: right center; }
.threshold-door-panel--left img { left: 0; }
.threshold-door-panel--right img { right: 0; }
.way-in:is([data-door-state="opening"], [data-door-state="open"]) .threshold-door-panel--left { transform: translateX(-102%) rotateY(7deg); }
.way-in:is([data-door-state="opening"], [data-door-state="open"]) .threshold-door-panel--right { transform: translateX(102%) rotateY(-7deg); }
.way-in:is([data-door-state="opening"], [data-door-state="open"]) .threshold-beyond { filter: none; transform: scale(1); }
.way-in:is([data-door-state="opening"], [data-door-state="open"]) .way-threshold .way-scene-copy,
.way-in:is([data-door-state="opening"], [data-door-state="open"]) .way-in-topline,
.way-in:is([data-door-state="opening"], [data-door-state="open"]) .way-in-bottomline { opacity: 0; visibility: hidden; pointer-events: none; }
.way-in[data-door-state="open"] .threshold-door { visibility: hidden; pointer-events: none; }
.threshold-arrival { position: absolute; z-index: 4; left: clamp(22px, 4vw, 64px); right: clamp(22px, 4vw, 64px); bottom: max(28px, env(safe-area-inset-bottom)); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease; color: #fffaf0; text-shadow: 0 1px 14px #0008; }
.way-in[data-door-state="open"] .threshold-arrival { opacity: 1; visibility: visible; pointer-events: auto; }
.threshold-arrival h3 { margin: 0 0 28px; font: 400 clamp(48px, 7vw, 104px)/1 Georgia, serif; letter-spacing: -.045em; outline: none; }
.threshold-arrival-actions { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.threshold-arrival-actions a { display: inline-flex; align-items: center; gap: 26px; min-height: 44px; font-size: 14px; text-decoration: none; }
.threshold-arrival-actions button { width: 44px; height: 44px; border: 0; padding: 0; background: transparent; color: inherit; font-size: 26px; cursor: pointer; }
.field-reveal { position: relative; display: grid; min-height: calc(100svh - 70px); color: #fff5df; background: #0c0d0b; overflow: hidden; isolation: isolate; scroll-margin-top: 70px; }
.field-reveal > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: -2; }
.field-reveal::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0001 30%, #0009 100%); z-index: -1; }
.field-reveal-copy { align-self: end; padding: clamp(36px, 6vw, 90px) clamp(24px, 5vw, 72px) 140px; }
.field-reveal-copy > span { font-size: 11px; letter-spacing: .18em; }
.field-reveal-copy h2 { font: 400 clamp(68px, 11vw, 170px)/.85 Georgia, serif; letter-spacing: -.065em; margin: 28px 0; }
.field-reveal-copy p { font-size: 12px; letter-spacing: .12em; line-height: 1.8; }
.field-reveal-explore { position: absolute; bottom: 44px; right: clamp(24px, 5vw, 72px); font-size: 12px; padding: 14px 0; letter-spacing: .12em; text-underline-offset: 6px; }
.field-reveal.is-opening > img { animation: way-reveal 1.2s cubic-bezier(.2,.7,.2,1) both; }
.field-reveal.is-opening .field-reveal-copy { animation: way-light 1.8s ease both; }
.way-in a:focus-visible, .way-in button:focus-visible, .field-reveal a:focus-visible { outline: 2px solid #eadbc0; outline-offset: 5px; }
.way-sr-only { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px!important; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes way-rise { from { transform: translateY(48px); opacity: 0; } to { transform: translateY(-12px); opacity: 1; } }
@keyframes way-light { from { opacity: 0; } to { opacity: 1; } }
@keyframes way-shadow { 0%, 25% { opacity: 0; } 80%, 100% { opacity: .85; } }
@keyframes way-reveal { from { clip-path: inset(0 49.8%); transform: scale(1.045); } to { clip-path: inset(0); transform: scale(1); } }
@media(max-width: 700px) {
  .way-in-heading { display: block; padding: 36px 24px; }
  .way-in-heading p { margin-top: 14px; font-size: 12px; }
  .way-in-stage { min-height: 490px; }
  .way-in-topline, .way-in-bottomline { gap: 16px; }
  .way-in-bottomline { bottom: 4px; }
  .way-in-progress { gap: 6px; }
  .way-in-scroll { display: none; }
  .way-in-return nav { width: 100%; justify-content: space-between; gap: 14px; }
  .way-scene-copy { bottom: 92px; }
  .way-scene[data-way-scene="street"] .way-scene-image { object-position: 52% center; }
  .way-signal-mark { padding-bottom: 100px; }
  .field-reveal > img { object-position: 42% center; }
}
@media(prefers-reduced-motion:reduce) {
  .way-scene { transition: none; }
  .way-in *, .field-reveal * { animation: none!important; }
  .way-in-scroll { display: none; }
}