/* ── Samawyat, the kiosk site. Colours read off Sama's kiosk render
   (refs/ig-DQ4BN3PDeEk/img/08.jpg): the wall #cbd4d3, the arch's stripes in js/path.js. */
:root { --wall: #cbd4d3; --navy: #22384d; }
html, body { margin: 0; background: var(--wall); }
img { display: block; }

.k-hero { position: relative; height: 100svh; overflow: hidden; background: var(--wall); }
.k-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; }
.k-v.is-on { opacity: 1; }
.k-v.is-top { z-index: 2; }
.k-v.is-fading { transition: opacity .45s cubic-bezier(.33, 0, .2, 1); }

/* the day / night switch: a small pill, bottom right, its knob slides to the side that's on;
   it goes dark with the night */
.k-switch { position: absolute; right: clamp(16px, 2.6vw, 40px); bottom: clamp(16px, 3.2vh, 40px); z-index: 5;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 148px; height: 40px; padding: 0;
  border: 1px solid rgba(34, 56, 77, .18); border-radius: 999px; cursor: pointer; overflow: hidden;
  background: rgba(247, 243, 238, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--navy); font: 500 13px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .9s, color .9s, border-color .9s; -webkit-tap-highlight-color: transparent; }
.k-switch span { position: relative; z-index: 1; text-align: center; transition: color .45s; }
.k-knob { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 999px;
  background: var(--navy); transition: transform .55s cubic-bezier(.65, 0, .35, 1), background-color .9s; }
.k-switch .k-switch-l { color: #f7f3ee; }
.k-switch[aria-pressed="true"] { background: rgba(23, 33, 46, .62); color: #f7f3ee; border-color: rgba(247, 243, 238, .22); }
.k-switch[aria-pressed="true"] .k-knob { transform: translateX(100%); background: #f7f3ee; }
.k-switch[aria-pressed="true"] .k-switch-l { color: #f7f3ee; }
.k-switch[aria-pressed="true"] .k-switch-r { color: var(--navy); }
.k-switch:focus-visible { outline: 2px solid #f7f3ee; outline-offset: 3px; }
.k-switch[aria-busy="true"] { cursor: progress; }

/* the splash: above everything, the wall colour, the ribbon on a canvas the size of the
   screen, the cloud and the name placed by js/splash.js where they stand on the kiosk */
.k-splash { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: #d1d3d4; pointer-events: none; }   /* the empty site's wall, so the plate fades in from it */
.k-pc { position: absolute; opacity: 0; transform-origin: 50% 100%; will-change: transform, opacity; max-width: none; }
.k-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .k-splash { display: none; } }
html { scrollbar-gutter: stable; }   /* the scrollbar never comes or goes, so the hero never changes width */
html.k-nosplash .k-splash { display: none; }