/* Koi N' Kubo public-facing sign-in page. Stand-alone: it does not use style.css. */
:root{
  --kk-cream:#fbf5ea; --kk-paper:#fffdf8; --kk-broth:#f2dfbb; --kk-ink:#2b2218; --kk-muted:#7a6a55;
  --kk-green:#5f7f5c; --kk-green-d:#3d5a3b; --kk-ember:#d9772b; --kk-line:#e6d8bf;
  --kk-serif:'Fraunces',Georgia,'Times New Roman',serif; --kk-sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{overflow-x:hidden;overflow-x:clip}
body.kk-site{overflow-x:hidden;overflow-x:clip;margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--kk-cream);color:var(--kk-ink);font:16px/1.55 var(--kk-sans)}
a{color:inherit;text-decoration:none}

/* ---- top bar */
.kk-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(18px,5vw,56px)}
.kk-brand{display:flex;align-items:center;gap:12px}
.kk-logo{flex:none;width:50px;height:50px;padding:4px;border-radius:50%;border:1px solid var(--kk-line);background:#fff url('../images/koi-n-kubo-logo.png') center/contain no-repeat;background-origin:content-box}
.kk-brand span{font:700 22px/1.1 var(--kk-serif);letter-spacing:-.3px}
.kk-brand small{display:block;margin-top:3px;font:500 11px var(--kk-sans);letter-spacing:1.6px;text-transform:uppercase;color:var(--kk-muted)}
.kk-pill{font-size:13px;font-weight:700;color:var(--kk-green-d);background:#e8efe3;border:1px solid #cfdcc8;border-radius:999px;padding:8px 14px;white-space:nowrap}

/* ---- hero */
.kk-hero{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(28px,6vw,90px);padding:clamp(18px,4vw,48px) clamp(18px,5vw,56px) 56px;max-width:1240px;width:100%;margin:0 auto}
.kk-hero:before{content:"";position:absolute;z-index:0;width:min(640px,80vw);aspect-ratio:1;right:-6%;top:2%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--kk-broth) 0 38%,transparent 39%),radial-gradient(circle at 50% 50%,transparent 0 52%,#f0dcb7 53% 54%,transparent 55%);opacity:.7}
.kk-copy,.kk-card{position:relative;z-index:1}
.kk-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--kk-ember)}
.kk-copy h1{font:700 clamp(40px,5.6vw,68px)/1.04 var(--kk-serif);letter-spacing:-1.5px;margin:14px 0 18px}
.kk-copy h1 em{display:block;font-style:italic;color:var(--kk-green-d)}
.kk-copy>p{max-width:480px;color:var(--kk-muted);font-size:17px;margin:0 0 24px}
.kk-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.kk-chips li{display:flex;align-items:center;gap:8px;background:var(--kk-paper);border:1px solid var(--kk-line);border-radius:999px;padding:9px 15px;font-weight:700;font-size:14px}
.kk-chips span{font-size:20px;line-height:1}

/* ---- sign-in card */
.kk-card{background:var(--kk-paper);border:1px solid var(--kk-line);border-radius:22px;padding:clamp(24px,4vw,38px);box-shadow:0 30px 70px -28px rgba(80,52,16,.35)}
.kk-card h2{font:700 28px/1.15 var(--kk-serif);letter-spacing:-.4px;margin:0 0 8px}
.kk-sub{margin:0 0 22px;color:var(--kk-muted);font-size:14.5px}
.kk-card label{display:block;margin:16px 0 7px;font-size:13px;font-weight:700;color:#53432f}
.kk-card input{width:100%;height:50px;padding:0 15px;border:1px solid #dccdb0;border-radius:12px;background:#fff;color:var(--kk-ink);font:inherit;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
.kk-card input::placeholder{color:#b3a48c}
.kk-card input:focus{border-color:var(--kk-green);box-shadow:0 0 0 4px rgba(95,127,92,.18)}
.kk-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;margin-top:24px;border:0;border-radius:12px;background:var(--kk-green-d);color:#fff;font:700 16px var(--kk-sans);cursor:pointer;transition:background .15s,transform .15s}
.kk-btn:hover{background:#2f4a2d;transform:translateY(-1px)}
.kk-btn:focus-visible{outline:3px solid var(--kk-ember);outline-offset:3px}
.kk-note{margin:18px 0 0;font-size:13px;color:var(--kk-muted);text-align:center}
.alert{border-radius:12px;padding:12px 14px;font-size:14px;margin:0 0 6px}
.alert-danger{background:#fdeceb;border:1px solid #f2c4c0;color:#a63a34}
.alert-success{background:#e9f4ea;border:1px solid #bfdcc3;color:#1f6a35}

/* ---- best sellers */
.kk-fav{max-width:1240px;width:100%;margin:0 auto;padding:0 clamp(18px,5vw,56px) 60px}
.kk-fav h3{font:700 24px var(--kk-serif);margin:0 0 4px}
.kk-fav>p{margin:0 0 18px;color:var(--kk-muted);font-size:14px}
.kk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.kk-dish{display:flex;align-items:center;gap:14px;background:var(--kk-paper);border:1px solid var(--kk-line);border-radius:16px;padding:14px 16px}
.kk-dish .ico{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--kk-broth);font-size:26px}
.kk-dish b{display:block;font-size:15px;line-height:1.25}
.kk-dish small{color:var(--kk-muted);font-size:13px}

/* ---- footer */
.kk-foot{padding:22px clamp(18px,5vw,56px);border-top:1px solid var(--kk-line);color:var(--kk-muted);font-size:13px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}

@media(max-width:860px){
  .kk-hero{grid-template-columns:1fr;padding-bottom:36px}
  .kk-hero:before{right:-30%;top:0}
  .kk-copy{order:2}.kk-card{order:1}
  .kk-copy>p{font-size:16px}
  .kk-pill{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}