/* Web Design: "See your business as a website" (play.js). Choices on the left; on the right a small website that
   rebuilds itself for each choice and scrolls inside its frame. */
.kx-play{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.kx-play>.kx-play-copy{grid-column:1;grid-row:1}.kx-play>.kx-play-side{grid-column:2;grid-row:1;align-self:stretch}
.kx-play h2{margin:0}
.kx-play-copy>p{margin:18px 0 0;max-width:40ch;font-size:clamp(1.02rem,1.3vw,1.15rem);color:var(--p-muted)}
.kx-play-controls{display:grid;gap:18px;margin-top:28px}
.kx-play fieldset{margin:0;padding:0;border:0;min-width:0}
.kx-play legend{padding:0;margin-bottom:9px;font-size:13.5px;font-weight:600;color:var(--p-ink)}
.kx-play-pair{display:flex;flex-wrap:wrap;gap:18px 32px}
.kx-chips{display:flex;flex-wrap:wrap;gap:7px}
.kx-chips button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 14px;border-radius:999px;border:1px solid #ffffff26;background:#ffffff0a;color:#d3d9e6;font:inherit;font-size:14px;font-weight:550;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .15s}
.kx-chips--many button{min-height:34px;padding:5px 12px;font-size:13.5px}
.kx-chips button:hover{background:#ffffff17;border-color:#ffffff40;color:#fff}
.kx-chips button:active{transform:scale(.96)}
.kx-chips button[aria-pressed="true"]{background:#fff;border-color:#fff;color:#0b1a33}
.kx-chips button[data-feat][aria-pressed="true"]{background:var(--gold-soft,#e8c57c);border-color:var(--gold-soft,#e8c57c)}
.kx-chips button[data-feat][aria-pressed="true"]::before{content:"";width:9px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
.kx-f-classic span{font-family:DMSerifDisplay,Georgia,serif;font-weight:400;font-size:15.5px}
.kx-f-caps span{text-transform:uppercase;letter-spacing:.06em;font-weight:750;font-size:12.5px}
.kx-sw{width:14px;height:14px;border-radius:50%;border:1px solid #ffffff55}
.kx-sw.night{background:#14161b}.kx-sw.paper{background:#f6f3ec}.kx-sw.sand{background:#e9dcc3}.kx-sw.bold{background:linear-gradient(135deg,#111 50%,#ff4d2e 50%)}
.kx-sw.colour{background:conic-gradient(#c0392b,#d6ae5b,#2f6b4f,#24477a,#c0392b)}
.kx-name{display:grid;gap:6px;margin-top:12px;font-size:13px;color:var(--p-muted)}
.kx-name input{height:40px;max-width:320px;padding:0 12px;border-radius:10px;border:1px solid #ffffff2e;background:#ffffff0a;color:#fff;font:inherit;font-size:14.5px}
.kx-name input:focus{outline:2px solid var(--gold-soft,#e8c57c);outline-offset:1px;border-color:transparent}
.kx-play-price{margin:24px 0 0;font-size:15px;font-weight:600;color:var(--gold-soft,#e8c57c);font-variant-numeric:tabular-nums}
.kx-play-actions{margin-top:14px}

/* The frame stays in view while the choices scroll past */
.kx-play-side{position:relative}
.kx-play-frame{position:sticky;top:96px;margin:0;border-radius:18px;overflow:hidden;border:1px solid #ffffff24;background:#0c1220;box-shadow:0 50px 100px -40px #000,0 0 0 1px #ffffff08}
.kx-play-frame::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 30%,#ffffff2e 50%,transparent 70%)}
.kx-play-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#161b26;border-bottom:1px solid #ffffff12}
.kx-play-bar i{width:10px;height:10px;border-radius:50%;background:#ffffff26}
.kx-play-bar span{margin-left:12px;padding:3px 14px;border-radius:999px;background:#ffffff0f;font-size:12.5px;color:#a9b3c7}
.kx-play-bar small{margin-left:auto;font-size:12px;color:#a9b3c7;font-variant-numeric:tabular-nums}

/* The example website: colour, accent, lettering, corners and layout come from the choices */
.kx-site{--bg:#111317;--ink:#f3efe7;--soft:#f3efe7a6;--acc:var(--a);--acc-ink:#111317;--line:#ffffff17;--card:#ffffff08;--r:12px;--head:DMSerifDisplay,Georgia,serif;--hw:400;--ht:-.01em;--tt:none;--ts:1;
  height:clamp(460px,62vh,640px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;background:var(--bg);color:var(--ink);transition:background-color .5s,color .5s}
.kx-site[data-font="modern"]{--head:InterTight,Inter,system-ui,sans-serif;--hw:720;--ht:-.055em}
.kx-site[data-font="caps"]{--head:InterTight,Inter,system-ui,sans-serif;--hw:800;--ht:.01em;--tt:uppercase;--ts:.78}
.kx-site[data-corner="square"]{--r:0px}
.kx-site[data-look="paper"]{--bg:#f6f3ec;--ink:#1c1d20;--soft:#1c1d20a6;--line:#1c1d201a;--card:#1c1d2008;--acc:var(--c);--acc-ink:#fff}
.kx-site[data-look="sand"]{--bg:#ece2cf;--ink:#2b2117;--soft:#2b2117a6;--line:#2b211720;--card:#ffffff55;--acc:var(--c);--acc-ink:#fff}
.kx-site[data-look="colour"]{--bg:var(--c);--ink:#fff;--soft:#ffffffb8;--line:#ffffff26;--card:#ffffff12;--acc:#fff;--acc-ink:var(--c)}
.kx-site[data-look="bold"]{--bg:#f4f4f2;--ink:#0e0e0e;--soft:#0e0e0eb0;--line:#0e0e0e;--card:#fff;--acc:#ff4d2e;--acc-ink:#0e0e0e}
.kx-site[data-look="bold"] .ks-btn{border:2px solid #0e0e0e}
.kx-site[data-look="bold"] .ks-card,.kx-site[data-look="bold"] .ks-book{border-width:2px}
.ks-hero{position:relative;height:clamp(260px,32vw,380px);overflow:hidden}
.ks-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kx-site[data-biz="inn"] .ks-hero-img{object-position:30% 60%}.kx-site[data-biz="arch"] .ks-hero-img{object-position:75% 50%}
.ks-over{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,2.4vw,28px);background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent),color-mix(in srgb,var(--bg) 55%,transparent) 48%,transparent 75%)}
.kx-site[data-layout="centre"] .ks-over{background:color-mix(in srgb,var(--bg) 62%,transparent)}
.kx-site[data-layout="centre"] .ks-copy{align-self:center;text-align:center;display:grid;justify-items:center}
.kx-site[data-layout="split"] .ks-hero-img{left:50%;width:50%}
.kx-site[data-layout="split"] .ks-over{right:50%;background:var(--bg)}
.kx-site[data-layout="split"] .ks-nav{width:200%;position:relative;z-index:1}
.kx-site[data-layout="split"] .ks-nav>span{color:#fff;text-shadow:0 1px 8px #0008}
.kx-site[data-layout="split"] .ks-title{max-width:none}
.ks-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12.5px}
.ks-logo{font-family:var(--head);font-weight:var(--hw);letter-spacing:var(--ht);text-transform:var(--tt);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.ks-nav>span{display:flex;gap:16px;color:var(--soft)}
.ks-kind{margin:0;font-size:12.5px;font-weight:600;color:var(--acc)!important}
.kx-site[data-look="paper"] .ks-kind,.kx-site[data-look="sand"] .ks-kind{color:var(--c)!important}
.ks-title{margin:10px 0 18px;max-width:12ch;font-family:var(--head);font-weight:var(--hw);letter-spacing:var(--ht);text-transform:var(--tt);font-size:calc(clamp(1.7rem,3.4vw,3rem)*var(--ts));line-height:.98;color:var(--ink)!important}
.ks-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:calc(var(--r)*2);background:var(--acc);color:var(--acc-ink);font-size:13px;font-weight:650;font-style:normal;white-space:nowrap}
.ks-btn--sm{padding:6px 12px;font-size:12px}
.ks-body{display:grid}
.ks-body>section{padding:22px clamp(16px,2.4vw,28px);border-top:1px solid var(--line)}
.ks-body h4{margin:0 0 12px;font-family:var(--head);font-weight:var(--hw);letter-spacing:var(--ht);text-transform:var(--tt);font-size:calc(22px*var(--ts));color:var(--ink)}
.ks-list{display:grid;margin:0;padding:0;list-style:none}
.ks-list li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ks-list span,.ks-card span{color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.ks-book{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:10px;align-items:center;margin:16px clamp(16px,2.4vw,28px) 0;padding:12px!important;border:1px solid var(--line)!important;border-radius:var(--r);background:var(--card)}
.ks-book>span{display:grid;font-size:13.5px;font-weight:600}
.ks-book small{font-size:11px;font-weight:500;color:var(--soft)}
.ks-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ks-card{display:grid;gap:4px;align-content:start;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-size:13px}
.ks-card .ks-btn{justify-self:start;margin-top:6px}
.ks-thumb{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:calc(var(--r)*.7);background:var(--line)}
.ks-thumb img{width:100%;height:100%;object-fit:cover}
.ks-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}
.ks-gallery .ks-thumb{aspect-ratio:auto;height:140px}
.ks-visit{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
.ks-visit p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink)!important}
.ks-visit p span{color:var(--soft)}
.ks-map{display:block;width:100%;height:110px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.ks-road{fill:none;stroke:var(--soft);stroke-width:5;opacity:.35}.ks-road--s{stroke-width:3}
.ks-lake{fill:var(--acc);opacity:.25}
.ks-pin circle:first-child{fill:var(--acc);opacity:.35}.ks-pin circle+circle{fill:var(--acc)}
.ks-place{margin:8px 0 0!important;border:0!important;font-weight:600}
.ks-form{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ks-form>span{padding:10px 12px;border:1px solid var(--line);border-radius:calc(var(--r)*.7);font-size:12.5px;color:var(--soft)}
.ks-form .ks-wide{grid-column:1/-1;height:64px}
.ks-form .ks-btn{justify-self:start}
.ks-foot{display:flex;flex-wrap:wrap;gap:6px 18px;padding:18px clamp(16px,2.4vw,28px);border-top:1px solid var(--line);font-size:12px;color:var(--soft)}
.ks-foot b{color:var(--ink)}

@media(max-width:900px){.kx-play{grid-template-columns:1fr}.kx-play>.kx-play-copy{grid-column:1;grid-row:auto}
  /* on smaller screens the preview rides along at the bottom of the screen while the choices scroll past */
  .kx-play-side{display:contents}.kx-play>.kx-play-side>.kx-play-frame{grid-column:1;grid-row:auto;position:sticky;top:auto;bottom:10px;z-index:5;box-shadow:0 -10px 40px -8px #000a,0 30px 60px -30px #000}
  .kx-site{height:min(300px,40vh)}.ks-hero{height:200px}}
@media(max-width:620px){
  .ks-nav>span{display:none}
  .ks-cards{grid-template-columns:1fr 1fr}.ks-cards>.ks-card:nth-child(3){display:none}
  .ks-book{grid-template-columns:1fr 1fr 1fr}.ks-book .ks-btn{grid-column:1/-1}
  .ks-over{background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 92%,transparent),color-mix(in srgb,var(--bg) 40%,transparent) 70%,transparent)}
  .kx-site[data-layout="split"] .ks-hero{height:auto;display:grid}
  .kx-site[data-layout="split"] .ks-hero-img{position:relative;left:0;width:100%;height:170px;order:2}
  .kx-site[data-layout="split"] .ks-over{position:relative;right:0;gap:18px}
  .kx-site[data-layout="split"] .ks-nav{width:auto}.kx-site[data-layout="split"] .ks-nav>span{text-shadow:none}
  .kx-play-bar small{display:none}
  .kx-play-actions .btn{width:100%;justify-content:center}
  .kx-name input{max-width:none}
}
.ks-login{margin-left:4px;padding:4px 10px;border:1px solid var(--line);border-radius:calc(var(--r)*2);font-style:normal;color:var(--ink)}
.ks-pay{display:block;font-size:11px;color:var(--soft)}
.ks-pay::before{content:"";display:inline-block;width:14px;height:9px;margin-right:6px;border-radius:2px;background:var(--acc);vertical-align:-1px}
.ks-book .ks-pay{grid-column:1/-1}