/* v14 Kellari, kierros 12–13: sushibaari, jossa referenssit kulkevat hihnalla (js/kellari.js luo kaikki elementit).
   Maitolasinapit kuten kerrosnäkymässä, tiedot vaalealla maitolasikortilla tummalla tekstillä (ei tummia laatikoita).
   Kierros 13: videot lautasilla, ruudukkonäkymä (paperi #f3f0ea) isompine näkymineen ja pieni latausnäkymä siirtymiin.
   Kierros 14: latausnäkymä pääloaderin tyyliin, avautuu aina baarina, isomman näkymän video toistuu myös baarista avattuna. */
@font-face{font-family:"GT Super Display";src:url(../fonts/gt-super-display-light.woff2?v=14) format("woff2");font-weight:300;font-style:normal;font-display:swap}

/* aulan oven hover-nimiö */
.kb_label{position:fixed;left:0;top:0;z-index:35;pointer-events:none;color:#fff;white-space:nowrap;text-shadow:0 1px 10px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.35);opacity:0;transform:translate(var(--kx,0),var(--ky,0)) scale(.94);transition:opacity .4s,transform .08s linear}
html.kellari-hover .kb_label{opacity:1}
html.kellari-hover{cursor:pointer}

/* siirtymän häivytys ja pieni latausnäkymä (sama tornipiirros kuin pääloaderissa, vaalein viivoin) */
.kb_fade{position:fixed;inset:0;z-index:40;background:#0c0a08;opacity:0;pointer-events:none;display:grid;place-items:center}
.kb_ld{display:flex;flex-direction:column;align-items:center;gap:1.25rem;opacity:0;transform:translateY(6px);transition:opacity .5s var(--out),transform .6s var(--out)}
.kb_fade.is-ld .kb_ld{opacity:1;transform:none}
.kb_ld_t{position:relative;height:clamp(6.5rem,17vh,9.5rem);aspect-ratio:64/210}
.kb_ld_svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kb_ld_svg *{vector-effect:non-scaling-stroke}
.kb_ld .lt_base .ol,.kb_ld .lt_base .rl{fill:none;stroke:rgba(247,247,245,.2);stroke-width:1}
.kb_ld .lt_base .fl{stroke:rgba(247,247,245,.06);stroke-width:1}
.kb_ld .lt_base .ml{stroke:rgba(247,247,245,.035);stroke-width:1}
.kb_ld .lt_base .lt_flag{fill:none;stroke:rgba(247,247,245,.2)}
/* kierros 14: samat sävyt kuin pääloaderissa (css/loader.css): valkoinen täyttö ja sininen kerrosviiva */
.kb_ld .lt_fill .ol{fill:none;stroke:#f7f7f5;stroke-width:1.15}
.kb_ld .lt_fill polygon.ol{fill:rgba(247,247,245,.085)}
.kb_ld .lt_fill .fl{stroke:rgba(247,247,245,.34);stroke-width:1}
.kb_ld .lt_fill .ml{stroke:rgba(247,247,245,.12);stroke-width:1}
.kb_ld .lt_fill .rl{fill:none;stroke:rgba(247,247,245,.6);stroke-width:1}
.kb_ld .lt_fill .lt_flag{fill:#f7f7f5;stroke:none}
.kb_ld .gl{stroke:rgba(247,247,245,.3);stroke-width:1}
.kb_ld .lt_band{stroke:#4f7cf0;stroke-width:1.5;filter:drop-shadow(0 0 4px rgba(79,124,240,.75))}
.kb_ld_line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(247,247,245,.16)}
.kb_ld_line i{position:absolute;inset:0;background:rgba(247,247,245,.9);transform-origin:50% 100%;transform:scaleY(0)}
.kb_wait{margin:0;color:rgba(247,247,245,.62);white-space:nowrap;letter-spacing:.16em}

/* kellarissa tornin käyttöliittymä pois, sivu ei vierity */
html.in-kellari{overflow:hidden}
html.in-kellari body>*:not(.scene):not(.kb):not(.kb_fade):not(.kb_label){opacity:0!important;pointer-events:none!important;transition:opacity .4s var(--out)!important}

/* baarin käyttöliittymä */
.kb{--g-bg:rgba(248,245,240,.72);--g-br:rgba(255,255,255,.75);position:fixed;inset:0;z-index:41;color:#fff;opacity:0;transition:opacity .7s var(--out);touch-action:none;-webkit-user-select:none;user-select:none}
.kb.is-on{opacity:1}
.kb.is-out{transition-duration:.42s}
.kb[hidden]{display:none}
.kb.is-point{cursor:pointer}
.kb .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kb_glass{-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);background:var(--g-bg);border:1px solid var(--g-br)}
.kb svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.kb_top{position:absolute;z-index:3;inset:clamp(1rem,3vh,1.75rem) var(--pad) auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;pointer-events:none}
.kb_back{pointer-events:auto;display:inline-flex;align-items:center;gap:.7rem;height:3.25rem;padding:0 1.35rem 0 1.05rem;border-radius:100px;color:#14120f;font-size:1rem;font-weight:500;letter-spacing:-.01em;box-shadow:0 10px 30px -16px rgba(0,0,0,.45);transition:background-color .35s var(--out),color .35s var(--out),border-color .35s var(--out)}
.kb_back svg{width:1.3rem;height:1.3rem;transition:transform .45s var(--out)}
.kb_back:hover,.kb_back:focus-visible{background:#fff;border-color:#fff}
.kb_back:hover svg,.kb_back:focus-visible svg{transform:translateX(-3px)}

/* näkymän valinta: Baari / Ruudukko */
.kb_view{pointer-events:auto;display:flex;align-items:center;gap:.2rem;height:3.25rem;padding:.3rem;border-radius:100px;box-shadow:0 10px 30px -16px rgba(0,0,0,.45)}
.kb_vb{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:0 1.05rem 0 .85rem;border-radius:100px;color:rgba(20,18,15,.72);font-size:.9375rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background-color .35s var(--out),color .35s var(--out),box-shadow .35s var(--out)}
.kb_vb svg{width:1.2rem;height:1.2rem;flex:none}
.kb_vb:hover{color:#14120f}
.kb_vb[aria-pressed=true]{background:#fff;color:#14120f;box-shadow:0 2px 10px -4px rgba(0,0,0,.25)}
.kb_vb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.kb_hint{position:absolute;left:50%;top:clamp(5.4rem,13vh,7.5rem);transform:translate(-50%,6px);margin:0;padding:.6rem 1.1rem;border-radius:100px;font-size:.875rem;color:#14120f;white-space:nowrap;opacity:0;transition:opacity .8s var(--out),transform .8s var(--out);pointer-events:none}
.kb_hint.is-on{opacity:1;transform:translate(-50%,0)}

.kb_low{position:absolute;inset:auto var(--pad) clamp(1rem,3.4vh,2rem);display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;pointer-events:none;transition:opacity .45s var(--out),visibility 0s}
.kb_info{--g-bg:rgba(248,245,240,.8);pointer-events:auto;width:min(26rem,42vw);padding:1.35rem 1.5rem 1.4rem;border-radius:1.25rem;color:#14120f;box-shadow:0 18px 50px -24px rgba(0,0,0,.45);transition:opacity .26s ease,transform .26s ease}
.kb_info.is-swap{opacity:0;transform:translateY(4px)}
.kb_n{display:flex;gap:.9rem;margin:0;color:rgba(20,18,15,.66)}
.kb_t{margin:.65rem 0 0;font-family:"GT Super Display",Georgia,"Times New Roman",serif;font-weight:300;font-size:clamp(2rem,3vw,2.9rem);line-height:.98;letter-spacing:-.02em}
.kb_d{margin:.75rem 0 0;font-size:.9688rem;line-height:1.5;color:rgba(20,18,15,.8);max-width:26em}
.kb_act{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.4rem;margin-top:1.4rem}
.kb_open{pointer-events:auto}
.kb_more{display:inline-flex;align-items:center;gap:.5rem;height:2.75rem;padding:0 .1rem;color:#14120f;font-size:.9375rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.kb_more span{padding-bottom:2px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.kb_more svg{width:1.05rem;height:1.05rem;transition:transform .45s var(--out)}
.kb_more:hover,.kb_more:focus-visible{color:var(--accent)}
.kb_more:hover svg,.kb_more:focus-visible svg{transform:scale(1.12)}
.kb_more:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.kb_ctrl{pointer-events:auto;display:flex;align-items:center;gap:.6rem}
.kb_round,.kb_pill{color:#14120f;box-shadow:0 10px 30px -16px rgba(0,0,0,.45);transition:background-color .35s var(--out),color .35s var(--out),border-color .35s var(--out),transform .35s var(--out)}
.kb_round{width:3.5rem;height:3.5rem;border-radius:50%;display:grid;place-items:center}
.kb_round svg{width:1.35rem;height:1.35rem}
.kb_pill{display:inline-flex;align-items:center;gap:.6rem;height:3.5rem;padding:0 1.35rem 0 1.1rem;border-radius:100px;font-size:.9688rem;font-weight:500;white-space:nowrap}
.kb_ic{display:grid;place-items:center;width:1.25rem;height:1.25rem}
.kb_ic svg{width:1.25rem;height:1.25rem}
.kb_pill[aria-pressed=true] .kb_ic svg{fill:currentColor;stroke-width:1.2}
.kb_round:hover,.kb_round:focus-visible,.kb_pill:hover,.kb_pill:focus-visible{background:#fff;border-color:#fff}
.kb_round:active,.kb_pill:active{transform:scale(.97)}
.kb_v{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}

/* ruudukkonäkymässä baarin ohjaimet pois */
.kb.is-grid{touch-action:auto}
.kb.is-grid .kb_low,.kb.is-grid .kb_hint{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s}

/* ---------- ruudukko: rauhallinen paperi kuten kerrosnäkymissä ---------- */
.kg{position:absolute;inset:0;z-index:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;background:#f3f0ea;color:#111;opacity:0;transform:translateY(14px);transition:opacity .6s var(--out),transform .75s var(--out);-webkit-user-select:text;user-select:text;scrollbar-width:thin;scrollbar-color:rgba(17,17,17,.25) transparent}
.kg.is-on{opacity:1;transform:none}
.kg[hidden]{display:none}
.kg::before{content:"";position:sticky;top:0;z-index:2;display:block;height:clamp(5.5rem,13vh,7.25rem);margin-bottom:calc(-1 * clamp(5.5rem,13vh,7.25rem));background:linear-gradient(#f3f0ea 58%,rgba(243,240,234,0));pointer-events:none}
.kg_in{max-width:94rem;margin:0 auto;padding:clamp(6.75rem,15vh,9.5rem) var(--pad) clamp(3rem,8vh,5rem)}
.kg_head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);align-items:end;gap:.75rem 3rem;margin-bottom:clamp(2.25rem,5.5vh,3.75rem)}
.kg_eye{grid-column:1/-1;margin:0;color:rgba(17,17,17,.64)}
.kg_h{margin:0;font-family:"GT Super Display",Georgia,"Times New Roman",serif;font-weight:300;font-size:clamp(3.25rem,6.6vw,6.75rem);line-height:.9;letter-spacing:-.02em}
.kg_lead{margin:0 0 .35rem;font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.45;color:rgba(17,17,17,.74);max-width:24em}
.kg_grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2.25rem,5vh,3.25rem) clamp(1.25rem,2vw,2rem)}
.kg_card{position:relative;cursor:pointer}
.kg_media{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;border-radius:.9rem;overflow:hidden;background:#e5dfd5;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.04),0 22px 44px -30px rgba(40,30,18,.5);isolation:isolate}
.kg_media img,.kg_media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--out)}
.kg_media video{opacity:0;transition:opacity .45s ease,transform 1s var(--out)}
.kg_card.is-play .kg_media video{opacity:1}
.kg_card:hover .kg_media img,.kg_card:hover .kg_media video{transform:scale(1.025)}
.kg_media:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.kg_zoom{position:absolute;right:.75rem;top:.75rem;z-index:1;width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;background:rgba(248,245,240,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#14120f;opacity:0;transform:scale(.9);transition:opacity .35s ease,transform .45s var(--out)}
.kg_zoom svg{width:1.05rem;height:1.05rem}
.kg_card:hover .kg_zoom,.kg_media:focus-visible .kg_zoom{opacity:1;transform:none}
.kg_txt{padding:1.15rem .1rem 0}
.kg_meta{display:flex;gap:.9rem;margin:0;color:rgba(17,17,17,.64)}
.kg_name{margin:.75rem 0 0;font-family:"GT Super Display",Georgia,"Times New Roman",serif;font-weight:300;font-size:clamp(1.75rem,2.2vw,2.3rem);line-height:1;letter-spacing:-.015em}
.kg_desc{margin:.7rem 0 0;font-size:.9375rem;line-height:1.5;color:rgba(17,17,17,.76);max-width:34em}
.kg_link{position:relative;z-index:1;display:inline-flex;margin-top:1rem;font-size:.9375rem;font-weight:500;color:#111;padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:color .3s ease}
.kg_link:hover,.kg_link:focus-visible{color:var(--accent)}
.kg_arr{margin-left:.3em;transition:transform .4s var(--out)}
.kg_link:hover .kg_arr,.kg_link:focus-visible .kg_arr{transform:translate(2px,-2px)}

/* isompi näkymä */
.kgm{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:clamp(1rem,4vh,3rem) var(--pad);opacity:0;transition:opacity .4s var(--out);-webkit-user-select:text;user-select:text;touch-action:auto}
.kgm[hidden]{display:none}
.kgm.is-on{opacity:1}
.kgm_bg{position:absolute;inset:0;background:rgba(236,232,224,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.kgm_box{position:relative;width:min(80rem,100%);max-height:100%;overflow:auto;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:center;padding:clamp(.9rem,1.4vw,1.35rem);border-radius:1.4rem;background:#f7f5f0;color:#111;box-shadow:0 40px 90px -40px rgba(40,30,18,.55);transform:translateY(16px) scale(.985);transition:transform .6s var(--out)}
.kgm.is-on .kgm_box{transform:none}
.kgm_media{position:relative;aspect-ratio:16/10;border-radius:.9rem;overflow:hidden;background:#e5dfd5;transition:opacity .22s ease}
.kgm_media img,.kgm_media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kgm_media video{opacity:0;transition:opacity .45s ease}
.kgm.is-play .kgm_media video{opacity:1}
.kgm_txt{padding:3.25rem clamp(.25rem,1.4vw,1.25rem) .75rem 0;transition:opacity .22s ease,transform .22s ease}
.kgm.is-swap .kgm_txt,.kgm.is-swap .kgm_media{opacity:0}
.kgm.is-swap .kgm_txt{transform:translateY(4px)}
.kgm_meta{display:flex;gap:.9rem;margin:0;color:rgba(17,17,17,.64)}
.kgm_t{margin:.8rem 0 0;font-family:"GT Super Display",Georgia,"Times New Roman",serif;font-weight:300;font-size:clamp(2.25rem,3.6vw,3.75rem);line-height:.95;letter-spacing:-.02em}
.kgm_d{margin:1.15rem 0 0;font-size:1rem;line-height:1.55;color:rgba(17,17,17,.76);max-width:28em}
.kgm_act{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.75rem}
.kgm_nav{display:flex;gap:.5rem}
.kgm .kb_round{width:3rem;height:3rem;background:#fff;border:1px solid rgba(17,17,17,.14);box-shadow:none}
.kgm .kb_round svg{width:1.2rem;height:1.2rem}
.kgm .kb_round:hover,.kgm .kb_round:focus-visible{background:#fff;border-color:#14120f}
.kgm .kb_round:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kgm_x{position:absolute;right:clamp(.9rem,1.4vw,1.35rem);top:clamp(.9rem,1.4vw,1.35rem);z-index:2}

@media (max-width:1099px){
  .kg_grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .kb_low{flex-direction:column-reverse;align-items:stretch;gap:.7rem;inset:auto .75rem max(.75rem,env(safe-area-inset-bottom))}
  .kb_info{width:auto;padding:1rem 1.1rem 1.1rem;border-radius:1.1rem}
  .kb_t{font-size:1.75rem;margin-top:.45rem}
  .kb_d{font-size:.875rem;margin-top:.5rem;line-height:1.45}
  .kb_act{margin-top:.9rem;gap:.5rem 1.1rem}
  .kb_open{height:2.85rem}
  .kb_more{height:2.85rem;font-size:.875rem}
  .kb_ctrl{justify-content:center}
  .kb_round{width:3rem;height:3rem}
  .kb_pill{height:3rem;padding:0 1.1rem 0 .9rem;font-size:.9375rem}
  .kb_top{inset:max(.75rem,env(safe-area-inset-top)) .75rem auto}
  .kb_back{height:3rem;padding:0 1.1rem 0 .9rem;font-size:.9375rem}
  .kb_view{height:3rem;padding:.25rem}
  .kb_hint{top:4.6rem;font-size:.8125rem}
  .kg_head{grid-template-columns:minmax(0,1fr)}
  .kg_lead{margin:.5rem 0 0}
  .kgm{padding:.75rem}
  .kgm_box{grid-template-columns:minmax(0,1fr);align-content:start;gap:1.1rem;padding:.75rem;border-radius:1.1rem}
  .kgm_txt{padding:.25rem .4rem .6rem}
  .kgm_x{right:1.3rem;top:1.3rem;background:rgba(248,245,240,.86)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .kgm_t{font-size:2.25rem}
  .kgm_d{font-size:.9375rem;margin-top:.9rem}
  .kgm_act{margin-top:1.4rem}
}
@media (max-width:599px){
  .kg_grid{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  .kb_vb{width:2.5rem;padding:0;justify-content:center}
  .kb_vb span{display:none}
  .kg_in{padding-top:5.5rem}
  .kg_h{font-size:clamp(3rem,15vw,4.25rem)}
  .kg_zoom{opacity:1;transform:none}
}
@media (max-height:620px) and (min-width:900px){
  .kb_d{display:none}
  .kb_info{padding:1rem 1.2rem}
  .kgm_box{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .kb,.kb_info,.kb_hint,.kb_ld,.kg,.kgm,.kgm_box,.kgm_txt,.kgm_media{transition-duration:.01s!important}
  .kg,.kgm_box{transform:none}
  .kg_media img,.kg_media video{transition:none}
  .kg_card:hover .kg_media img{transform:none}
}