/* v2culture.css — Haeyo Korean v2, phase 3 slice 3b (2026-10-23, branch v2-apply). Load AFTER v2site.css + v2spec.css.
   Restyles the live K-Culture hub (#/culture, culture.js .kch-*) to the poster-tile look of site3/mock/v2/culture.html
   (mint tints, one big Hangeul sign per tile, small-caps caption, 2 columns on phones / 4 on desktop, dashed Coming-soon tiles,
   filter chips) and gives the sub-page heads (?tab=play · school · nuance · how) the v2 head: station-plate eyebrow, big title,
   underline tabs. Overrides only: no markup changes. culture.js / nuance.js / how.js inject their own <style> AFTER this file,
   so every rule here carries one extra type selector or attribute (section.kcpage, .kcpage[data-kc-page=…], section.nupage)
   to win on specificity. The tile signs (놀 말 어 팬 학교 듣 톡) are the mock's site signs, drawn with CSS content and hidden
   from screen readers ( / "" alt text). Phone first: base = 375px; 720px and 1024px add on. */

/* ================= 0 · scope tokens (mint = the K-Culture accent) ================= */
section.kcpage,section.nupage{--ac:var(--mint);--ac-d:var(--mint-d);--ac-l:var(--mint-l);--cu-sh:3px 4px 0 var(--ink);--cu-r:14px}

/* ================= 1 · shared sub-page chrome (play · school · honest · how · nuance) ================= */
/* back link: ink, 44px */
section.kcpage .kc-backrow a,section.kcpage .kh-back a,section.nupage .nu-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;font:600 14px/1.2 var(--ui);color:var(--ink);text-decoration:none}
section.kcpage .kc-backrow a:hover,section.kcpage .kh-back a:hover,section.nupage .nu-back:hover{text-decoration:underline}
section.kcpage .kc-backrow{margin:0 0 8px}
section.nupage{background:#fff}
/* eyebrow = station plate: ink outline pill with a mint dot */
section.kcpage .kc-eye,section.kcpage .kh-eye,section.nupage .nu-eye{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:36px;margin:4px 0 14px;padding:6px 14px 6px 10px;border:2px solid var(--ink);border-radius:9999px;background:#fff;font:700 12px/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);max-width:100%}
section.kcpage .kc-eye:before,section.kcpage .kh-eye:before,section.nupage .nu-eye:before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--mint);border:2px solid var(--ink)}
section.kcpage .kh-eye .kh-pill{font-size:12px;letter-spacing:.04em}
/* titles: v2 big type, Korean sub-title in Gaegu */
section.kcpage .kc-h1,section.kcpage .kh-h1,section.nupage h1.nu-h1{font:900 clamp(30px,8vw,52px)/1.06 var(--ui);letter-spacing:-.035em;color:var(--ink);margin:0 0 12px}
section.kcpage .kh-h1ko{display:block;margin-top:6px;font:700 clamp(24px,5.6vw,34px)/1.2 var(--hand);letter-spacing:0;color:var(--mint-d)}
section.kcpage .kc-h1 .kr{font-family:var(--hand);font-weight:700;color:var(--mint-d);letter-spacing:0}
section.kcpage .kc-lead,section.kcpage .kh-lead,section.nupage .nu-lead{font:400 16px/1.55 var(--ui);color:var(--ink2);max-width:660px}
section.kcpage .kc-muted,section.kcpage .kc-note{color:var(--mute)}
section.kcpage .kc-h2,section.kcpage .kc-sech h2{font-family:var(--ui);color:var(--ink);letter-spacing:-.025em}
/* a hairline under the head, like the mock's meta row */
section.kcpage[data-kc-page=play] .kc-h1,section.kcpage[data-kc-page=school] .kc-h1,section.kcpage[data-kc-page=honest] .kc-h1{padding-bottom:12px;border-bottom:1.5px solid var(--ink)}

/* tabs → underline tabs (.utabs look) */
section.kcpage .kc-tabs{display:flex;gap:24px;margin:4px 0 16px;padding:0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;overflow-x:auto;scrollbar-width:none}
section.kcpage .kc-tabs::-webkit-scrollbar{display:none}
section.kcpage .kc-tabs button{flex:none;position:relative;min-height:52px;padding:6px 2px 12px;border:0;border-radius:0;background:none;color:var(--mute);text-align:left;cursor:pointer}
section.kcpage .kc-tabs b{font:700 17px/1.3 var(--kr);color:inherit}
section.kcpage .kc-tabs small{font:500 12px/1.3 var(--ui);color:var(--mute)}
section.kcpage .kc-tabs button.on,section.kcpage .kc-tabs button[aria-selected=true]{background:none;color:var(--ink)}
section.kcpage .kc-tabs button.on small{color:var(--ink2)}
section.kcpage .kc-tabs button.on:after,section.kcpage .kc-tabs button[aria-selected=true]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--ink)}
section.nupage .nu-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:20px;margin:4px 0 18px;border-bottom:1px solid var(--line);scrollbar-width:none}
section.nupage .nu-tabs::-webkit-scrollbar{display:none}
section.nupage .nu-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;margin-bottom:-1px;font:600 16px/1.2 var(--ui);color:var(--mute);border-bottom:3px solid transparent}
section.nupage .nu-tabs a.on{color:var(--ink);border-bottom-color:var(--ink)}
/* option chips (levels, languages, timer, goals, topics): v2 chip, 44px tap target, black when on */
section.kcpage .kc-opt,section.kcpage .kc-opt.sm{min-height:44px;padding:0 14px;border:1px solid var(--line2);background:#fff;font:600 14px/1.2 var(--ui);color:var(--ink)}
section.kcpage .kc-opt:hover{border-color:var(--ink)}
section.kcpage .kc-opt.on,section.kcpage .kc-opt[aria-pressed="true"],section.kcpage .kc-why .kc-opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
section.kcpage .kc-row>em{font:700 12px/1.2 var(--ui);letter-spacing:.12em;color:var(--mute)}
section.nupage .nu-tp{min-height:44px;border-color:var(--line2);font-family:var(--ui)}
section.nupage .nu-tp:hover{border-color:var(--ink)}
section.nupage .nu-tp.on{background:var(--ink);border-color:var(--ink)}
/* nothing a learner reads under 12px */
section.kcpage .kc-pill,section.kcpage .kc-lv,section.kcpage .kc-lvb,section.kcpage .kc-ls,section.nupage .nu-pill,section.nupage .nu-free,section.nupage .nu-mem,section.nupage .nu-tag,section.nupage .nu-fc b,section.nupage .nu-cmp th,section.nupage .nu-r .k,section.nupage .nu-meta{font-size:12px}
section.kcpage .kc-day small,section.kcpage .kc-al,section.kcpage .kc-tt th.t,section.kcpage .kc-mk,section.kcpage .kh-lgh,section.kcpage .kh-sh,section.kcpage .kh-lab,section.kcpage .kh-gl small,section.kcpage .kh-tryh{font-size:12px}
section.kcpage .kc-pill.free{color:#2f6b12}
/* tap targets the sub-pages drew under 44px */
section.kcpage .kc-hp,section.kcpage .kh-tb,section.kcpage .kh-lesson{min-height:44px}
/* cards on the sub-pages: same hairline + radius as v2 cards (layouts untouched) */
section.kcpage .kc-card,section.nupage .nu-card{border-color:var(--line);border-radius:var(--r)}

/* ================= 2 · hub head ================= */
.kcpage[data-kc-page=hub] .kch-head{position:relative;max-width:none;margin:0 0 20px;padding:0 0 14px}
.kcpage[data-kc-page=hub] .kch-head:before{content:"즐기기" / "";display:block;margin:0 0 6px -.04em;font:900 clamp(72px,24vw,168px)/.95 var(--kr);letter-spacing:-.06em;color:var(--ink);background:linear-gradient(transparent 60%,var(--mint) 60%,var(--mint) 88%,transparent 88%);width:max-content;max-width:100%}
.kcpage[data-kc-page=hub] .kch-head .kch-eye{display:flex;justify-content:space-between;gap:10px;margin:0 0 14px;padding:8px 0 10px;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--ink);font:700 12px/1.3 var(--ui);letter-spacing:.12em;color:var(--ink)}
.kcpage[data-kc-page=hub] .kch-head .kch-eye:after{content:"Play · Read & live · Fan";color:var(--mute);letter-spacing:.12em;text-align:right}
.kcpage[data-kc-page=hub] .kch-h1{font:900 clamp(30px,8vw,52px)/1.06 var(--ui);letter-spacing:-.035em;color:var(--ink);max-width:16ch}
.kcpage[data-kc-page=hub] .kch-lead{max-width:640px;font:400 16px/1.55 var(--ui);color:var(--ink2)}
.kcpage[data-kc-page=hub] .kch-lead b{color:var(--ink);background:linear-gradient(transparent 55%,var(--mint) 55%,var(--mint) 92%,transparent 92%)}
.kcpage[data-kc-page=hub] .kch-eye{font-family:var(--ui);letter-spacing:.12em;color:var(--mint-d)}

/* ================= 3 · magazine + novels (top band) as poster frames ================= */
.kcpage[data-kc-page=hub] .kch-mag{background:var(--ink);border:1.5px solid var(--ink);border-radius:var(--cu-r);box-shadow:var(--cu-sh)}
.kcpage[data-kc-page=hub] .kch-mag .kch-eye{color:var(--mint)}
.kcpage[data-kc-page=hub] .kch-cover{border-radius:8px}
.kcpage[data-kc-page=hub] .kch-iss{font-size:12px}
.kcpage[data-kc-page=hub] .kch-dh{font-family:var(--ui);font-weight:900}
.kcpage[data-kc-page=hub] .kch-dl{opacity:1}
.kcpage[data-kc-page=hub] .kch-mag .kch-dl{color:#e5e7eb}
.kcpage[data-kc-page=hub] .kch-issues a{color:#fff;opacity:1;font-size:12px}
.kcpage[data-kc-page=hub] .kch-books{background:var(--butter-l);border:1.5px solid var(--ink);border-radius:var(--cu-r);box-shadow:var(--cu-sh);color:var(--ink)}
.kcpage[data-kc-page=hub] .kch-books .kch-eye{color:var(--butter-d)}
.kcpage[data-kc-page=hub] .kch-books .kch-dl{color:var(--ink2)}
.kcpage[data-kc-page=hub] .kch-shelf a{border-radius:4px;box-shadow:2px 3px 0 var(--ink)}
.kcpage[data-kc-page=hub] .kch-btn{min-height:48px;border:1.5px solid var(--ink);background:var(--mint);color:var(--ink);font:700 15px/1 var(--ui)}
.kcpage[data-kc-page=hub] .kch-btn:hover{background:#fff}
.kcpage[data-kc-page=hub] .kch-btn.o{background:var(--ink);color:#fff}
.kcpage[data-kc-page=hub] .kch-btn.o:hover{background:var(--ink2)}
.kcpage[data-kc-page=hub] .kch-mag .kch-btn{border-color:var(--mint)}

/* ================= 4 · goal filter = chips ================= */
.kcpage[data-kc-page=hub] .kch-why{margin:22px 0 4px;padding:0;border:0;flex-direction:column;align-items:stretch;gap:8px}
.kcpage[data-kc-page=hub] .kch-gl{font:700 12px/1.2 var(--ui);letter-spacing:.12em;color:var(--mute)}
.kcpage[data-kc-page=hub] .kch-why .kcx-chips{display:flex;flex-wrap:nowrap;gap:6px;margin:0 calc(-1*var(--gut));padding:2px var(--gut) 6px;overflow-x:auto;scrollbar-width:none}
.kcpage[data-kc-page=hub] .kch-why .kcx-chips::-webkit-scrollbar{display:none}
.kcpage[data-kc-page=hub] .kch-why .kc-opt{flex:none;gap:6px;min-height:44px;padding:0 13px;border:1px solid var(--line2);border-radius:9999px;background:#fff;font:600 14px/1 var(--ui);color:var(--ink);white-space:nowrap}
.kcpage[data-kc-page=hub] .kch-why .kc-opt:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint-d)}
.kcpage[data-kc-page=hub] .kch-why .kc-opt[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.kcpage[data-kc-page=hub] .kch-why .kc-opt[aria-pressed="true"]:before{background:var(--mint)}

/* ================= 5 · bands ================= */
.kcpage[data-kc-page=hub] .kch-band{margin-top:32px}
.kcpage[data-kc-page=hub] .kch-bhd{display:block;margin:0 0 14px;padding-top:10px;border-top:1.5px solid var(--ink)}
.kcpage[data-kc-page=hub] .kch-bhd h2{font:800 clamp(24px,6vw,34px)/1.12 var(--ui);letter-spacing:-.03em;color:var(--ink)}
.kcpage[data-kc-page=hub] .kch-b-play .kch-bhd h2{font-size:clamp(24px,6vw,34px)}
.kcpage[data-kc-page=hub] .kch-bhd p{margin-top:4px;font:400 14px/1.5 var(--ui);color:var(--mute)}
.kcpage[data-kc-page=hub] .kch-b-courses{background:none;border-radius:0;padding:0;margin-left:0;margin-right:0}
/* the wall: 2 columns on phones */
.kcpage[data-kc-page=hub] .kch-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:12px}
.kcpage[data-kc-page=hub] .kch-grid>.kch-c{grid-column:auto;grid-row:auto}
.kcpage[data-kc-page=hub] .kch-grid>.kch-big,.kcpage[data-kc-page=hub] .kch-grid>.kch-wide,.kcpage[data-kc-page=hub] .kch-grid>.kch-half:only-child,.kcpage[data-kc-page=hub] .kch-grid>.kch-c:only-child{grid-column:1/-1}

/* ================= 6 · the poster tile ================= */
.kcpage[data-kc-page=hub] .kch-c{position:relative;display:flex;flex-direction:column;min-height:228px;padding:12px 12px 14px;border:1.5px solid var(--ink);border-radius:var(--cu-r);background:var(--mint-l);color:var(--ink);box-shadow:var(--cu-sh);overflow:hidden;opacity:1;flex-direction:column;align-items:stretch;transition:transform .15s,box-shadow .15s}
.kcpage[data-kc-page=hub] a.kch-c:hover{transform:translate(-1px,-2px);box-shadow:4px 6px 0 var(--ink)}
.kcpage[data-kc-page=hub] a.kch-c:active{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--ink)}
.kcpage[data-kc-page=hub] a.kch-c:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* caption (small caps) — from the band */
.kcpage[data-kc-page=hub] .kch-c:before{order:0;position:relative;z-index:2;display:flex;align-items:center;gap:6px;font:700 12px/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);content:"Read & live" / ""}
.kcpage[data-kc-page=hub] .kch-b-courses .kch-c:before{content:"Course" / ""}
.kcpage[data-kc-page=hub] .kch-b-play .kch-c:before{content:"Play" / ""}
.kcpage[data-kc-page=hub] .kch-c[href="#/fan"]:before{content:"Fan" / ""}
/* the big sign — drawn on the tile; the picture hides where a sign takes its place */
.kcpage[data-kc-page=hub] .kch-c:after{order:1;position:relative;z-index:1;display:block;margin:10px 0 0;padding:4px 0;font:700 clamp(26px,7vw,36px)/1.2 var(--hand);letter-spacing:0;color:var(--ink);content:none;background:none;inset:auto;pointer-events:none}   /* 2026-10-28 (owner): a real line in handwriting, not one big character */
.kcpage[data-kc-page=hub] .kch-c .kch-img{order:1}
.kcpage[data-kc-page=hub] .kch-c .kch-bd{order:2;position:relative;z-index:2;flex:1 0 auto;justify-content:flex-end;gap:4px;margin-top:auto;padding:10px 22px 0 0;background:none}
.kcpage[data-kc-page=hub] .kch-t{font:800 16px/1.18 var(--ui);letter-spacing:-.02em;color:var(--ink)}
.kcpage[data-kc-page=hub] .kch-t .kr{font:700 13px/1.3 var(--kr);color:var(--ink2)}
.kcpage[data-kc-page=hub] .kch-p{font:400 13px/1.4 var(--ui);color:var(--ink2);-webkit-line-clamp:3}
.kcpage[data-kc-page=hub] .kch-bd:after{content:"→" / "";position:absolute;right:0;bottom:2px;font:700 16px/1 var(--ui);color:var(--ink)}
.kcpage[data-kc-page=hub] div.kch-c .kch-bd:after{content:none}
.kcpage[data-kc-page=hub] .kch-chips{gap:4px;padding-top:6px}
.kcpage[data-kc-page=hub] .kch-c .kch-chips>span,.kcpage[data-kc-page=hub] .kch-top .kch-chips>span{font:700 12px/1.2 var(--ui);padding:4px 8px;border-radius:6px;letter-spacing:.02em;white-space:normal}
.kcpage[data-kc-page=hub] .kch-lv{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.kcpage[data-kc-page=hub] .kch-free{background:var(--green-l);color:#17693a}
.kcpage[data-kc-page=hub] .kch-part{background:var(--sky-l);color:#075288}
.kcpage[data-kc-page=hub] .kch-soonp{background:var(--cream2);color:#5b616e}

/* signs per tile (the mock's set) */
.kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=nuance"]:after{content:none;color:var(--mint)}
.kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=nuance"]:after{color:var(--mint-d)}
.kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=how"]:after{content:none}
.kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=lists"]:after{content:"6×10" / "";font:800 56px/.95 var(--ui);letter-spacing:-.06em;margin-top:10px}
.kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=play"]:after{content:none}
.kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=sets"]:after{content:none}
.kcpage[data-kc-page=hub] a.kch-c[href="#/fan"]:after{content:none}
.kcpage[data-kc-page=hub] div.kch-c:has(img[src$="/listen.svg"]):after{content:none}
.kcpage[data-kc-page=hub] div.kch-c:has(img[src$="/talk.svg"]):after{content:none}
.kcpage[data-kc-page=hub] a.kch-c:is([href="#/culture?tab=nuance"],[href="#/culture?tab=how"],[href="#/culture?tab=lists"],[href="#/culture?tab=play"],[href="#/culture?tab=sets"],[href="#/fan"]) .kch-img,
.kcpage[data-kc-page=hub] div.kch-c.is-soon .kch-img{display:none}

/* photo tiles (life packs, roots, school, the courses): photo framed inside the poster */
.kcpage[data-kc-page=hub] .kch-c .kch-img{margin:8px 0 0;aspect-ratio:16/10;border:1.5px solid var(--ink);border-radius:9px;background:var(--mint);overflow:hidden}
.kcpage[data-kc-page=hub] .kch-c .kch-img img{width:100%;height:100%;object-fit:cover}
/* School Korean: wide photo poster with a 학교 badge */
.kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=school"]{grid-column:1/-1;background:#fff}
.kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=school"]:after{content:none;position:absolute;left:20px;top:auto;bottom:auto;margin:0;padding:4px 10px 6px;border:1.5px solid var(--ink);border-radius:8px;background:#fff;font-size:22px;line-height:1.2;letter-spacing:0;transform:translateY(calc(-100% - 8px))}
.kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=school"] .kch-img{order:1}
.kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=school"]:after{order:1;position:relative;left:auto;align-self:flex-start;margin:-52px 0 0 8px;transform:none}
/* Life packs (big): the photo is the poster, words on a white plate */
.kcpage[data-kc-page=hub] .kch-big{min-height:300px;padding:0;background:var(--ink);color:#fff}
.kcpage[data-kc-page=hub] .kch-big:before{position:absolute;left:12px;top:12px;padding:5px 9px;border:1.5px solid var(--ink);border-radius:9999px;background:#fff;color:var(--ink)}
.kcpage[data-kc-page=hub] .kch-big .kch-img{position:absolute;inset:0;margin:0;height:100%;aspect-ratio:auto;border:0;border-radius:0}
.kcpage[data-kc-page=hub] .kch-big .kch-bd{position:relative;margin:auto 10px 10px;padding:12px 34px 12px 12px;min-height:0;border:1.5px solid var(--ink);border-radius:10px;background:#fff;flex:0 0 auto}
.kcpage[data-kc-page=hub] .kch-big .kch-bd:after{right:12px;bottom:14px}
.kcpage[data-kc-page=hub] .kch-big .kch-t{font-size:24px;color:var(--ink)}
.kcpage[data-kc-page=hub] .kch-big .kch-p{font-size:14px;color:var(--ink2)}
.kcpage[data-kc-page=hub] .kch-big .kch-lv{background:#fff;color:var(--ink);border-color:var(--ink)}
/* course tiles: butter tint so the band reads as a set */
.kcpage[data-kc-page=hub] .kch-b-courses .kch-c{background:var(--butter-l);border-color:var(--ink)}
.kcpage[data-kc-page=hub] .kch-b-courses .kch-t{font-size:15px}
/* coming soon */
.kcpage[data-kc-page=hub] .kch-c.is-soon{min-height:170px;background:#fff;border-style:dashed;border-color:var(--mute2);box-shadow:none}
.kcpage[data-kc-page=hub] .kch-c.is-soon:before{color:var(--mute)}
.kcpage[data-kc-page=hub] .kch-c.is-soon:after{color:var(--line2);font-size:64px}
.kcpage[data-kc-page=hub] .kch-c.is-soon .kch-t{color:var(--ink2)}
.kcpage[data-kc-page=hub] .kch-c.is-soon .kch-p{display:none}
.kcpage[data-kc-page=hub] .kch-c.is-soon .kch-lv{display:none}
/* phone: keep the 2-column wall full — the wide School poster goes after the small read tiles */
@media (max-width:719px){
  .kcpage[data-kc-page=hub] .kch-b-read .kch-grid>a[href="#/culture?tab=school"]{order:2}
  .kcpage[data-kc-page=hub] .kch-b-read .kch-grid>.kch-wide{order:3}
  .kcpage[data-kc-page=hub] .kch-tile{min-height:200px}
  .kcpage[data-kc-page=hub] .kch-b-read .kch-grid>a[href="#/culture?tab=lists"]{grid-column:1/-1;min-height:0}
}
/* phone: two narrow columns — trim body lines on the small tiles */
.kcpage[data-kc-page=hub] .kch-tile .kch-p,.kcpage[data-kc-page=hub] .kch-b-courses .kch-p{-webkit-line-clamp:2}

/* free line + credit */
.kcpage[data-kc-page=hub] .kcx-freeln{margin-top:28px;padding:14px;border-left:3px solid var(--mint-d);background:var(--mint-l);border-radius:0 12px 12px 0}
.kcpage[data-kc-page=hub] .kcx-freeln a{color:var(--ink);font-weight:700}
.kcpage[data-kc-page=hub] .kcx-freeln summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font:600 14px/1.2 var(--ui);color:var(--ink)}
.kcpage[data-kc-page=hub] .kch-credit{color:var(--mute)}

/* ================= 7 · tablet ================= */
@media (min-width:720px){
  section.kcpage .kc-tabs{gap:32px}
  section.kcpage .kc-tabs button{min-height:56px}
  .kcpage[data-kc-page=hub] .kch-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .kcpage[data-kc-page=hub] .kch-grid>.kch-big{grid-column:span 2;grid-row:span 2}
  .kcpage[data-kc-page=hub] .kch-grid>.kch-wide,.kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=school"]{grid-column:span 2}
  .kcpage[data-kc-page=hub] .kch-why{flex-direction:row;align-items:center;gap:14px}
  .kcpage[data-kc-page=hub] .kch-b-read .kch-grid>.kch-wide{grid-column:1/-1}
  .kcpage[data-kc-page=hub] .kch-wide .kch-img{max-height:220px}
  .kcpage[data-kc-page=hub] .kch-why .kcx-chips{margin:0;padding:2px 0 6px;flex-wrap:wrap;overflow:visible}
}
/* ================= 8 · desktop: 4 columns ================= */
@media (min-width:1024px){
  .kcpage[data-kc-page=hub] .kch-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"eye eye" "big h1" "big lead";column-gap:48px;align-items:end;margin-bottom:28px}
  .kcpage[data-kc-page=hub] .kch-head:before{grid-area:big;align-self:center;margin:0}
  .kcpage[data-kc-page=hub] .kch-head .kch-eye{grid-area:eye}
  .kcpage[data-kc-page=hub] .kch-h1{grid-area:h1}
  .kcpage[data-kc-page=hub] .kch-lead{grid-area:lead;align-self:start;font-size:18px}
  .kcpage[data-kc-page=hub] .kch-why{margin-top:40px}
  .kcpage[data-kc-page=hub] .kch-band{margin-top:44px}
  .kcpage[data-kc-page=hub] .kch-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  /* Read band = 12 cells: Life packs 2×2 · Lists 2 · School 2 · Nuance · How · Roots 2 */
  .kcpage[data-kc-page=hub] .kch-b-read .kch-grid>a[href="#/culture?tab=lists"],.kcpage[data-kc-page=hub] .kch-b-read .kch-grid>.kch-wide{grid-column:span 2}
  .kcpage[data-kc-page=hub] .kch-c{min-height:272px;padding:16px 16px 18px}
  .kcpage[data-kc-page=hub] .kch-c:after{font-size:120px}
  .kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=lists"]:after{font-size:80px}
  .kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=sets"]:after{font-size:96px}
  .kcpage[data-kc-page=hub] .kch-t{font-size:18px}
  .kcpage[data-kc-page=hub] .kch-p{font-size:13px}
  .kcpage[data-kc-page=hub] .kch-big .kch-bd{margin:auto 16px 16px;padding:16px 40px 16px 16px}
  .kcpage[data-kc-page=hub] .kch-big .kch-t{font-size:30px}
  .kcpage[data-kc-page=hub] .kch-big:before{left:16px;top:16px}
  .kcpage[data-kc-page=hub] .kch-c.is-soon{min-height:220px}
  .kcpage[data-kc-page=hub] .kch-c.is-soon:after{font-size:88px}
  /* School: photo beside the words */
  .kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=school"]{display:grid;grid-template-columns:50% minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;padding:0}
  .kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=school"] .kch-img{grid-column:1;grid-row:1/3;margin:0;aspect-ratio:auto;height:100%;border:0;border-right:1.5px solid var(--ink);border-radius:0}
  .kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=school"]:before{grid-column:2;grid-row:1;padding:16px 16px 0 0}
  .kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=school"] .kch-bd{grid-column:2;grid-row:2;padding:10px 40px 18px 0}
  .kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=school"] .kch-bd:after{right:16px;bottom:18px}
  .kcpage[data-kc-page=hub] a.kch-c[href="#/culture?tab=school"]:after{grid-column:1;grid-row:2;align-self:end;justify-self:start;margin:0 0 12px 12px;font-size:44px}
  .kcpage[data-kc-page=hub] .kcx-freeln{padding:18px 22px}
}
@media (prefers-reduced-motion:reduce){.kcpage[data-kc-page=hub] a.kch-c{transition:none}}

/* 2026-10-28: the chat bubbles (v2theme.css .kbub) — on the sign tiles they stand where the sign was; on photo tiles they sit on the photo; tiles take turns in tint */
.kcpage[data-kc-page=hub] .kch-c .kbub{order:1;position:relative;z-index:2;margin:10px 0 4px}
.kcpage[data-kc-page=hub] .kch-c .kbub.on-ph{position:absolute;left:22px;top:46px;margin:0;z-index:3}
.kcpage[data-kc-page=hub] .kch-c .kbub.on-ph em{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.kcpage[data-kc-page=hub] .kch-grid>.kch-c:nth-child(4n+2){background:var(--butter-l)}
.kcpage[data-kc-page=hub] .kch-grid>.kch-c:nth-child(4n+3){background:var(--sky-l)}
.kcpage[data-kc-page=hub] .kch-grid>.kch-c:nth-child(4n+4){background:#f3effd}
.kcpage[data-kc-page=hub] .kch-c .kbub b{font-size:clamp(18px,4.6vw,24px)}