/* ============================================================
   KitaBina — shared page chrome for the split storefront.
   Pair with tokens.css. Every public page links both, then
   only carries its own content. Source: kitabina-design-system.html.
   ============================================================ */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* nav */
nav.top{position:sticky;top:0;z-index:50;background:rgba(244,246,247,.9);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--border)}
nav.top .wrap{display:flex;align-items:center;gap:14px;height:58px;padding:0 24px}  /* pin padding so a page's local .wrap override can't distort the shared nav */
nav.top .brand{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;letter-spacing:.08em;color:var(--ink);font-size:15px;text-decoration:none}
nav.top .brand{font-size:0;gap:0}
nav.top .brand svg,nav.top .brand img{display:none}  /* pages carry an inline icon (svg or img); the ::before lockup is the ONE logo — hide both so it never doubles */
nav.top .brand::before{content:"";display:block;width:146px;height:51px;background:url('logo-full.png') no-repeat left center;background-size:contain;transform:scale(1.15);transform-origin:left center}  /* +15% logo, scaled not sized, so the 58px bar height never grows */
nav.top .navmenu{display:contents}
nav.top .lk{display:none;gap:4px;align-items:center}
nav.top .navcta{display:none;gap:8px;align-items:center}
nav.top .lk a{color:var(--muted);font-size:13.5px;font-weight:600;padding:8px 11px;border-radius:var(--r-sm);white-space:nowrap;transition:background var(--t-fast) var(--ease-snap),color var(--t-fast) var(--ease-snap)}
nav.top .lk a:hover{background:var(--brand-50);color:var(--brand-800)}
@media(min-width:920px){
  nav.top .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:14px}
  nav.top .lk{display:flex;justify-content:center}      /* links centered */
  nav.top .navcta{display:flex;justify-content:flex-end} /* buttons right-aligned */
}
/* mobile hamburger */
.navburger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0;flex:none}
.navburger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.navburger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navburger.on span:nth-child(2){opacity:0}
.navburger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* slim mobile bar cluster (Apple-style): search + cart + burger, always visible */
.navmobile{display:none;align-items:center;gap:0;margin-left:auto}
.navmobile .navicon{width:42px;height:44px;display:grid;place-items:center;color:var(--ink);border-radius:8px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.navmobile .navicon svg{width:22px;height:22px}
.navmobile .navicon:active{background:var(--brand-50)}
@media(max-width:919px){
  nav.top .wrap{position:relative;height:46px;gap:8px}
  nav.top .brand::before{width:100px;height:31px}
  nav.top .brand img{display:none}   /* slim bar: show only the logo-full wordmark, not the extra icon */
  .navmobile{display:flex}
  .navburger{display:flex;border:0;background:none;margin:0;width:42px;height:44px;gap:4px}
  nav.top .navmenu{position:absolute;top:46px;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--e3);padding:8px;display:none}
  nav.top .navmenu.open{display:flex}
  nav.top .navmenu.open::before{content:"";position:fixed;left:0;right:0;top:46px;bottom:0;background:rgba(20,28,26,.42);z-index:-1;pointer-events:none}  /* dim page behind the open menu */
  nav.top .lk,nav.top .navcta{display:flex;flex-direction:column;align-items:stretch;gap:2px}
  nav.top .lk a{padding:12px 14px;font-size:15px}
  nav.top .navcta .btn{width:100%;justify-content:center;margin-top:4px}
  /* scroll: hide the whole header, keep only a floating burger (saves space) */
  nav.top{transition:transform .28s var(--ease-snap,ease)}
  body.nav-hidden nav.top{transform:translateY(-100%)}
  body.nav-hidden .navburger{position:fixed;top:11px;right:14px;margin:0;z-index:60;box-shadow:var(--e2);background:var(--surface)}
}

/* heroes */
.hero{position:relative;overflow:hidden;min-height:560px;display:flex;align-items:flex-end;background:url('hero-workshop.jpg') center 30%/cover no-repeat}
.phero{position:relative;overflow:hidden;min-height:360px;display:flex;align-items:flex-end;background:url('teaching.jpg') center 28%/cover no-repeat}
/* STRICT RULE: hero background photos must NEVER tile — cover + no-repeat, always */
.hero,.phero,.abhero,.jhero{background-size:cover;background-repeat:no-repeat}
/* ken-burns: zoom a cover-sized bg LAYER via transform, so it can never gap or tile.
   (Animating background-size% sizes WIDTH only — height falls to auto — so tall or
   narrow heroes stopped covering and showed grey bands top/bottom.) */
@keyframes kbKen{from{transform:scale(1.04)}to{transform:scale(1.12)}}
.hero::before,.phero::before{content:"";position:absolute;inset:0;z-index:0;background:inherit;background-size:cover;background-repeat:no-repeat;animation:kbKen 26s ease-in-out infinite alternate;will-change:transform}
@media(prefers-reduced-motion:reduce){.hero::before,.phero::before{animation:none}}
.hero .scrim,.phero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,28,26,.18),rgba(20,28,26,.72))}
.hero .wrap,.phero .wrap{position:relative;z-index:2;padding:56px 24px}
.hero h1{font-size:clamp(40px,8vw,84px);line-height:.98}
.phero h1{font-size:clamp(30px,5vw,52px);line-height:1.02}
.hero h1,.phero h1{color:#fff;letter-spacing:-.02em;max-width:14ch;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.hero p,.phero p{color:rgba(255,255,255,.92);font-size:17px;max-width:48ch;margin:16px 0 24px}
.frost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(4px)}

/* plain text page header (no photo) — canonical for interior utility pages. Pages needing a
   shorter variant (e.g. schedule.html) override .pagehead locally after this file loads. */
.pagehead{background:var(--surface);border-bottom:1px solid var(--border);padding:42px 0 30px}
.pagehead h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em}
.pagehead p{color:var(--muted);margin-top:8px;max-width:60ch}

/* sections */
section{padding:60px 0}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--brand-700);font-weight:700;margin-bottom:8px}
h2.sec{font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;margin-bottom:10px}
.lead{color:var(--muted);font-size:16px;max-width:60ch;margin-bottom:30px}
.note{font-size:13px;color:var(--muted);background:var(--brand-50);border:1px solid var(--brand-100);border-left:3px solid var(--brand-400);border-radius:var(--r-sm);padding:11px 14px}

/* grids */
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g2{grid-template-columns:1fr}}
@media(max-width:560px){.g4{grid-template-columns:1fr}}

/* archetype router */
.arch{padding:26px 22px;display:block;cursor:pointer;text-decoration:none;transition:transform var(--t) var(--ease-snap),box-shadow var(--t) var(--ease-snap),border-color var(--t) var(--ease-snap)}
.arch:hover{transform:translateY(-4px);box-shadow:var(--e3);border-color:var(--brand-400)}
.arch .ic,.vcard .ic{width:46px;height:46px;border-radius:13px;background:var(--brand-50);color:var(--brand-700);display:grid;place-items:center;font-size:22px;margin-bottom:14px}
.arch h3{font-size:18px;margin-bottom:6px}.arch p{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.arch .go{font-size:13px;font-weight:700;color:var(--brand-700)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat .n{font-family:var(--disp);font-weight:800;font-size:38px;color:var(--ink);line-height:1}
.stat .l{font-size:12.5px;color:var(--muted);margin-top:6px}

/* feature cards */
.fcard{overflow:hidden;text-decoration:none}.fcard .img{aspect-ratio:4/3;background:center/cover}
.fcard .b{padding:16px}.fcard h3{font-size:16px}.fcard .pr{font-family:var(--disp);font-weight:700;color:var(--brand-700);margin-top:4px}

/* pricing card */
.pkg{padding:24px;position:relative}.pkg.feat{border-color:var(--brand-400);box-shadow:0 0 0 1px var(--brand-400)}
.pkg .pop{position:absolute;top:-10px;left:24px;background:var(--brand-700);color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px}
.pkg h3{font-size:17px}.pkg .amt{font-family:var(--disp);font-weight:700;font-size:30px;color:var(--ink);margin:6px 0}.pkg .amt small{font-size:13px;color:var(--faint);font-weight:400}
.pkg .sub{font-size:12.5px;color:var(--muted)}
.pkg ul{list-style:none;padding:0;margin:14px 0}.pkg li{padding:6px 0;display:flex;gap:8px;font-size:13.5px}.pkg li::before{content:"✓";color:var(--brand-700);font-weight:700}

/* steps */
.step .n{width:34px;height:34px;border-radius:50%;background:var(--brand-50);color:var(--brand-700);font-family:var(--disp);font-weight:700;display:grid;place-items:center;margin-bottom:10px}
.step b{font-size:14.5px;display:block;margin-bottom:4px}.step p{font-size:13px;color:var(--muted)}

/* value cards */
.vcard{padding:22px}.vcard h3{font-size:16px;margin-bottom:6px}.vcard p{font-size:13.5px;color:var(--muted)}

/* faq */
.faqitem{border-bottom:1px solid var(--border);padding:15px 0}.faqitem b{font-size:14.5px}.faqitem p{font-size:13.5px;color:var(--muted);margin-top:7px}

/* cta band */
.cta{background:linear-gradient(150deg,var(--brand-700),var(--brand-900))}
.cta h2.sec{color:#fff}

/* footer */
footer{background:var(--ink);color:#fff;padding:44px 0;margin-top:20px}
footer a{color:var(--brand-300)}
footer .wrap{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}

/* ============================================================
   Global mobile / web-app rules (declutter audit 2026-06-30).
   Breakpoint system: 920 nav, 860 grid-2up, 560 phone.
   ============================================================ */
html{scroll-behavior:smooth}
:target{scroll-margin-top:74px}                /* sticky nav (58px) + breathing room */

/* ── motion (design system #motion: nothing appears out of nowhere) ── */
@keyframes kbrise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.anim-rise{animation:kbrise .6s var(--ease-snap) both}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-snap),transform .5s var(--ease-snap)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.anim-rise{animation:none}.reveal,.reveal.in{opacity:1;transform:none;transition:none}}
input,select,textarea{font-size:16px}           /* stop iOS auto-zoom jolt on focus */
/* .pop ribbon: when pricing cards stack, inline the ribbon so it never overlaps the card above */
@media(max-width:860px){
  .pkg .pop{position:static;top:auto;left:auto;display:inline-block;margin-bottom:8px}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  section{padding:40px 0}
  .hero{min-height:60vh}
  .phero{min-height:auto}
  .hero .wrap,.phero .wrap{padding:40px 16px}
  .pkg{padding:16px}
  .btn.lg{width:100%;justify-content:center}     /* primary CTAs full-width, web-app feel */
  .stat .n{font-size:30px}                        /* keep '1,000+' on one line in 2-col */
  /* inline-flex (not block) so "About · Legal" stays on one line; the columns' inline
     line-height:2 can't be overridden from here, so the anchor carries its own 44px. */
  footer a{display:inline-flex;align-items:center;vertical-align:middle;min-height:44px;min-width:44px;padding:0 2px}
  footer .wrap{gap:20px}
}