/* ============================================================
All Access KC — shared design system (kc.css)
Cream-editorial brand, Fraunces display + Georgia body,
team-color accents, reusable components. Link once per page:
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,900;1,9..144,500&display=swap');
:root{
--bg:#f7f1e3; --bg-soft:#fbf6e8; --bg-card:#ffffff;
--ink:#1a1d2a; --ink-mid:#3d4053; --ink-soft:#646774; --ink-faint:#9a9b9f;
--rule:#d4cdb8; --accent-soft:#e8dfc4;
--gold:#8b6914; --gold-bright:#b8881c; --gold-deep:#6b4f0f;
--chiefs:#e31837; --royals:#004687; --sporting:#93b1d4; --current:#6f263d;
--river:#2f8a8a; --green:#3e8a52; --green-soft:#dbeede; --red:#c44848; --red-soft:#fae8e8;
--display:'Fraunces', Georgia, 'Times New Roman', serif;
--serif:Georgia, 'Times New Roman', serif;
--maxw:1080px;
--shadow:0 14px 40px rgba(26,29,42,0.14);
--shadow-lg:0 22px 60px rgba(26,29,42,0.24);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);line-height:1.62;font-size:17px;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-deep)}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;line-height:1.05;color:var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.narrow{max-width:740px;margin-left:auto;margin-right:auto}
/* ---------- top nav (injected by kc-nav.js) ---------- */
.kc-nav{position:sticky;top:0;z-index:120;background:rgba(247,241,227,0.86);backdrop-filter:blur(10px);
border-bottom:1px solid var(--rule)}
.kc-nav .bar{max-width:var(--maxw);margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:18px}
.kc-brand{font-family:var(--display);font-weight:900;font-size:1.15rem;letter-spacing:-0.01em;color:var(--ink);white-space:nowrap}
.kc-brand b{color:var(--gold)}
.kc-links{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.kc-links a,.kc-drop>span{font-family:var(--serif);font-size:0.8rem;letter-spacing:0.5px;color:var(--ink-mid);
padding:8px 11px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:all .15s}
.kc-links a:hover,.kc-drop:hover>span{background:var(--ink);color:var(--bg)}
.kc-links a.active{color:var(--gold);font-weight:600}
.kc-drop{position:relative}
.kc-drop .menu{position:absolute;top:100%;right:0;min-width:180px;background:var(--bg-card);border:1px solid var(--rule);
border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;flex-direction:column;gap:2px}
.kc-drop:hover .menu{display:flex}
.kc-drop .menu a{font-size:0.85rem}
.kc-burger{display:none;margin-left:auto;font-size:1.5rem;background:none;border:none;color:var(--ink);cursor:pointer}
@media(max-width:860px){
.kc-burger{display:block}
.kc-links{position:fixed;inset:56px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--rule);
flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 18px;display:none;max-height:80vh;overflow:auto}
.kc-links.open{display:flex}
.kc-links a,.kc-drop>span{padding:13px 8px;border-radius:8px;font-size:0.95rem}
.kc-drop .menu{position:static;display:flex;box-shadow:none;border:none;padding:0 0 0 14px;background:transparent}
}
/* ---------- hero ---------- */
.kc-hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;
background:linear-gradient(180deg,rgba(26,29,42,0) 35%,rgba(26,29,42,0.82) 100%),
var(--hero-img,linear-gradient(135deg,#2b2f42,#1a1d2a));background-size:cover;background-position:center}
.kc-hero .inner{max-width:var(--maxw);margin:0 auto;width:100%;padding:0 20px 46px;color:#f7f1e3}
.kc-hero .eyebrow{color:#f9d080}
.kc-hero h1{font-size:clamp(2.6rem,8vw,5.2rem);color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.kc-hero p{max-width:620px;margin-top:14px;font-size:1.1rem;color:#efe9da;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.kc-hero .accent{color:var(--accent,var(--gold-bright))}
/* ---------- section scaffolding ---------- */
.section{padding:54px 0}
.section.tight{padding:34px 0}
.eyebrow{font-family:var(--serif);font-size:0.64rem;letter-spacing:4px;text-transform:uppercase;
color:var(--gold);font-weight:600;margin-bottom:10px}
.section h2{font-size:clamp(1.9rem,5vw,3rem);margin-bottom:10px}
.section .lede{max-width:640px;color:var(--ink-mid);font-style:italic;font-size:1.05rem;margin-bottom:26px}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
/* ---------- cards / grid ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.card{background:var(--bg-soft);border:1px solid var(--rule);border-radius:12px;padding:22px;
transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card.accent{border-top:4px solid var(--accent,var(--gold))}
.card h3{font-size:1.35rem;margin-bottom:8px}
.card p{color:var(--ink-soft);font-size:0.95rem}
.card .k-sport{font-size:0.6rem;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;color:var(--accent,var(--gold))}
/* dark feature band */
.band-dark{background:linear-gradient(135deg,#1a1d2a,#2b2f42);color:#f7f1e3;border-radius:16px;padding:30px 32px;box-shadow:var(--shadow-lg)}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark p{color:#e8e2d2}
.band-dark .eyebrow{color:#f9d080}
/* ---------- tags / pills ---------- */
.tag{display:inline-block;font-family:var(--serif);font-size:0.58rem;letter-spacing:1.5px;text-transform:uppercase;
font-weight:700;padding:3px 9px;border-radius:999px;vertical-align:1px;margin-right:6px}
.tag.new{background:var(--green-soft);color:#2f6b41}
.tag.gone{background:var(--red-soft);color:#b23b3b}
.tag.hot{background:#fff0d6;color:var(--gold-deep)}
.tag.free{background:#e6f0ff;color:var(--royals)}
/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--serif);font-size:0.82rem;letter-spacing:2px;text-transform:uppercase;
font-weight:600;padding:13px 30px;border-radius:999px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);
cursor:pointer;transition:all .2s}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink-mid);border:1px solid var(--rule)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:transparent}
/* ---------- lists ---------- */
.k-list{list-style:none}
.k-list li{padding:11px 0;border-top:1px solid var(--rule);color:var(--ink-mid);font-size:0.95rem;line-height:1.5}
.k-list li:first-child{border-top:none}
.k-note{color:var(--ink-faint);font-style:italic;font-size:0.84rem}
/* ============================================================
CHAT ROOM widget (kc-chat.js)
============================================================ */
.kc-room{border:1px solid var(--rule);background:var(--bg-soft);border-radius:14px;overflow:hidden;max-width:720px;margin:0 auto}
.kc-room .you{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:11px 14px;
background:var(--bg-card);border-bottom:1px solid var(--rule);font-size:0.84rem;color:var(--ink-soft)}
.kc-room .badge{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink);background:var(--bg-soft);
border:1px solid var(--rule);border-radius:999px;padding:5px 12px}
.kc-room .badge .dot{width:9px;height:9px;border-radius:50%}
.kc-room .reroll{font-size:0.7rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-mid);background:none;
border:1px solid var(--rule);border-radius:999px;padding:5px 12px;cursor:pointer}
.kc-room .reroll:hover{border-color:var(--gold);color:var(--gold)}
.kc-room .feed{height:360px;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:14px;background:var(--bg)}
.kc-room .empty{margin:auto;color:var(--ink-faint);font-style:italic;text-align:center;line-height:1.5}
.kc-msg{display:flex;gap:10px;align-items:flex-start}
.kc-msg.mine{flex-direction:row-reverse}
.kc-av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
font-family:var(--display);font-weight:700;font-size:0.78rem;color:#fff}
.kc-bub{max-width:78%}
.kc-who{font-size:0.7rem;letter-spacing:0.5px;color:var(--gold);margin-bottom:3px;font-weight:600}
.kc-msg.mine .kc-who{text-align:right}
.kc-txt{font-size:0.95rem;line-height:1.45;background:var(--bg-card);border:1px solid var(--rule);padding:9px 13px;
border-radius:13px;border-top-left-radius:4px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.kc-msg.mine .kc-txt{background:var(--ink);color:var(--bg);border-color:var(--ink);border-top-left-radius:13px;border-top-right-radius:4px}
.kc-when{font-size:0.66rem;color:var(--ink-faint);margin-top:3px}
.kc-msg.mine .kc-when{text-align:right}
.kc-room form{display:flex;gap:8px;padding:11px;border-top:1px solid var(--rule);background:var(--bg-soft)}
.kc-room input[type=text]{flex:1;font-family:var(--serif);font-size:0.95rem;padding:12px 14px;border:1px solid var(--rule);
border-radius:999px;background:var(--bg-card);color:var(--ink)}
.kc-room input:focus{outline:none;border-color:var(--gold)}
.kc-room form button{font-family:var(--serif);font-weight:600;padding:0 20px;background:var(--ink);color:var(--bg);
border:none;border-radius:999px;cursor:pointer}
.kc-room form button:hover:not(:disabled){background:var(--gold)}
.kc-room form button:disabled{opacity:.4;cursor:not-allowed}
/* ============================================================
BOARD widget (kc-board.js)
============================================================ */
.kc-board .tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px}
.kc-board .tabs button{font-family:var(--serif);font-size:0.76rem;letter-spacing:1px;text-transform:uppercase;
padding:8px 16px;border:1px solid var(--rule);background:var(--bg-soft);color:var(--ink-mid);border-radius:999px;cursor:pointer;transition:all .15s}
.kc-board .tabs button:hover{border-color:var(--gold)}
.kc-board .tabs button.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.kc-board .listing{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.kc-post{background:var(--bg-card);border:1px solid var(--rule);border-radius:12px;padding:16px 18px;transition:box-shadow .18s}
.kc-post:hover{box-shadow:var(--shadow)}
.kc-post .price{font-family:var(--display);font-size:1.2rem;color:var(--gold-deep);font-weight:700}
.kc-post h4{font-family:var(--display);font-size:1.1rem;margin:2px 0 6px}
.kc-post .meta{font-size:0.72rem;letter-spacing:0.5px;color:var(--ink-faint);text-transform:uppercase;margin-bottom:8px}
.kc-post .body{font-size:0.92rem;color:var(--ink-mid);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.kc-post-img{width:100%;max-height:210px;object-fit:cover;border-radius:8px;margin-bottom:10px;border:1px solid var(--rule);background:var(--bg)}
/* live games widget (kc-games.js) */
.kc-games{max-width:620px;margin:0 auto}
.kcg-card{display:flex;gap:14px;align-items:center;background:var(--bg-soft);border:1px solid var(--rule);
border-left:4px solid var(--kga,var(--gold));border-radius:12px;padding:16px 18px}
.kcg-logo{width:48px;height:48px;object-fit:contain;flex:0 0 auto}
.kcg-body{min-width:0}
.kcg-name{font-family:var(--display);font-size:1.25rem;color:var(--ink)}
.kcg-rec{font-family:var(--serif);font-size:0.8rem;color:var(--ink-soft);font-weight:400;margin-left:6px}
.kcg-standing{font-size:0.76rem;color:var(--ink-faint);margin:2px 0 6px}
.kcg-line{font-size:0.92rem;color:var(--ink-mid);line-height:1.4}
.kcg-tag{display:inline-block;font-size:0.58rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
background:var(--kga,var(--gold));color:#fff;border-radius:999px;padding:2px 9px;margin-right:7px;vertical-align:1px}
.kcg-tag.live{background:#c0392b;animation:kcgpulse 1.4s infinite}
@keyframes kcgpulse{0%,100%{opacity:1}50%{opacity:.5}}
.kcg-note,.kcg-load{font-size:0.88rem;color:var(--ink-faint);font-style:italic}
/* World Cup live match line (.kc-match) */
.kc-match{margin:4px 0 8px}
.kcm{display:inline-block;font-size:0.92rem;color:var(--ink);line-height:1.4;font-weight:600}
.kcm-load,.kcm-pre{font-size:0.84rem;color:var(--ink-faint);font-style:italic}
.kcm-tag{display:inline-block;font-size:0.56rem;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;
background:var(--ink);color:#fff;border-radius:999px;padding:2px 9px;margin-right:7px;vertical-align:1px}
.kcm-tag.live{background:#c0392b;animation:kcgpulse 1.4s infinite}
/* Upcoming schedule (.kc-sched) */
.kcs{background:var(--bg-soft);border:1px solid var(--rule);border-left:4px solid var(--kga,var(--gold));border-radius:12px;padding:16px 18px}
.kcs-title{font-size:0.62rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--kga,var(--gold));margin-bottom:8px}
.kcs-list{list-style:none;margin:0;padding:0}
.kcs-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--rule);font-size:0.92rem;color:var(--ink-mid)}
.kcs-list li:first-child{border-top:none}
.kcs-logo{width:24px;height:24px;object-fit:contain;flex:0 0 auto}
.kcs-vs{font-weight:700;color:var(--ink);flex:1 1 auto;min-width:0}
.kcs-when{color:var(--ink-soft);font-size:0.84rem;text-align:right;flex:0 0 auto}
.kcs-live{color:#c0392b;font-weight:700;animation:kcgpulse 1.4s infinite}
.kcs-note,.kcs-load{font-size:0.88rem;color:var(--ink-faint);font-style:italic}
/* per-venue action links (directions / reserve) */
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.act{font-family:var(--serif);font-size:0.78rem;display:inline-flex;align-items:center;gap:5px;
padding:6px 12px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-mid);text-decoration:none;
background:var(--bg-card);transition:all .15s;white-space:nowrap}
.act:hover{border-color:var(--gold);color:var(--gold);background:var(--bg-soft)}
.price-tier{font-family:var(--display);color:var(--gold-deep);font-weight:700;margin-left:6px}
.kc-post .contact{margin-top:10px;font-size:0.82rem;color:var(--ink-soft);border-top:1px dashed var(--rule);padding-top:8px}
.kc-board .empty{text-align:center;color:var(--ink-faint);font-style:italic;padding:30px 0}
.kc-form{background:var(--bg-soft);border:1px solid var(--rule);border-radius:14px;padding:20px 22px;margin-bottom:26px}
.kc-form h3{font-size:1.2rem;margin-bottom:12px}
.kc-form .row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:10px}
.kc-form input,.kc-form select,.kc-form textarea{width:100%;font-family:var(--serif);font-size:0.95rem;padding:11px 13px;
border:1px solid var(--rule);border-radius:8px;background:var(--bg-card);color:var(--ink)}
.kc-form input:focus,.kc-form textarea:focus,.kc-form select:focus{outline:none;border-color:var(--gold)}
.kc-form textarea{min-height:80px;resize:vertical}
.kc-form .msg{margin-top:10px;font-size:0.85rem;min-height:18px}
.kc-safe{font-size:0.78rem;color:var(--ink-faint);font-style:italic;text-align:center;margin-top:12px;line-height:1.5}
/* ---------- footer ---------- */
.kc-foot{background:var(--ink);color:#cdd0da;margin-top:60px;padding:42px 0 30px}
.kc-foot .wrap{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
.kc-foot a{color:#e8c97a}
.kc-foot .cols{display:flex;flex-wrap:wrap;gap:26px}
.kc-foot h5{font-family:var(--display);color:#fff;font-size:0.95rem;margin-bottom:8px}
.kc-foot ul{list-style:none;font-size:0.85rem;line-height:1.9}
.kc-foot .fine{width:100%;border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:18px;
font-size:0.74rem;color:#9a9db0;line-height:1.6}
/* ============================================================
TOURNAMENT BRACKET (.kc-bracket) — the World Cup path at Arrowhead
KC-hosted rounds highlighted in Chiefs red. Scrolls horizontally.
============================================================ */
.kc-bracket{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 18px;
scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.kc-bracket::-webkit-scrollbar{height:8px}
.kc-bracket::-webkit-scrollbar-thumb{background:var(--rule);border-radius:999px}
.kc-round{flex:0 0 196px;display:flex;flex-direction:column;scroll-snap-align:start}
.kc-round-head{font-family:var(--serif);font-size:0.6rem;letter-spacing:2px;text-transform:uppercase;
font-weight:700;color:var(--ink-soft);text-align:center;padding-bottom:9px;
border-bottom:2px solid var(--rule);margin-bottom:12px}
.kc-round.kc-here .kc-round-head{color:var(--chiefs);border-color:var(--chiefs)}
.kc-round .nodes{display:flex;flex-direction:column;gap:10px;justify-content:center;flex:1}
.kc-node{background:var(--bg-card);border:1px solid var(--rule);border-radius:10px;padding:10px 12px}
.kc-node .teams{font-family:var(--display);font-weight:700;color:var(--ink);font-size:0.92rem;line-height:1.2}
.kc-node .meta{font-size:0.64rem;letter-spacing:1px;text-transform:uppercase;color:var(--ink-faint);margin-top:4px}
.kc-node.kc-here-node{border:2px solid var(--chiefs);box-shadow:0 6px 18px rgba(227,24,55,.16)}
.kc-node .here-badge{display:inline-block;font-size:0.52rem;letter-spacing:1.3px;text-transform:uppercase;font-weight:700;
background:var(--chiefs);color:#fff;border-radius:999px;padding:2px 8px;margin-top:7px}
.kc-node.tbd{border-style:dashed;background:transparent}
.kc-node.tbd .teams{color:var(--ink-faint);font-weight:600}
.kc-champ{flex:0 0 150px}
.kc-champ .nodes{align-items:center}
.kc-champ .kc-node{text-align:center;border-color:var(--gold-bright)}
.kc-champ .trophy{font-size:1.7rem;line-height:1}
.kc-champ .teams{color:var(--gold-deep)}
@media(max-width:680px){.kc-round{flex-basis:168px}}
/* ============================================================
LIVE WORLD CUP BRACKET (.kc-wcb / kc-wc-bracket.js)
One big knockout bracket that fills in as games are played.
Arrowhead/KC matches highlighted in Chiefs red. Scrolls horizontally.
============================================================ */
.kc-wcb{margin:0}
.wcb-scroll{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 16px;
scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.wcb-scroll::-webkit-scrollbar{height:8px}
.wcb-scroll::-webkit-scrollbar-thumb{background:var(--rule);border-radius:999px}
.wcb-round{flex:0 0 208px;display:flex;flex-direction:column;scroll-snap-align:start}
.wcb-rhead{font-family:var(--serif);font-size:.6rem;letter-spacing:2px;text-transform:uppercase;font-weight:700;
color:var(--ink-soft);text-align:center;padding-bottom:9px;border-bottom:2px solid var(--rule);margin-bottom:12px}
.wcb-cards{display:flex;flex-direction:column;gap:10px;justify-content:space-around;flex:1}
.wcb-match{background:var(--bg-card);border:1px solid var(--rule);border-radius:10px;padding:5px 9px;transition:box-shadow .18s}
.wcb-match.kc{border:2px solid var(--chiefs);box-shadow:0 6px 18px rgba(227,24,55,.16)}
.wcb-team{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 2px}
.wcb-team+.wcb-team{border-top:1px solid var(--rule)}
.wcb-nm{font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcb-team.win{font-weight:800}
.wcb-team.win .wcb-nm{color:var(--chiefs)}
.wcb-team.tbd .wcb-nm{color:var(--ink-faint);font-weight:500;font-style:italic;font-size:.82rem}
.wcb-sc{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink);min-width:1.1em;text-align:right;flex:0 0 auto}
.wcb-meta{display:flex;gap:7px;align-items:center;margin-top:5px;min-height:13px}
.wcb-tag{font-size:.5rem;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;
background:var(--ink);color:#fff;border-radius:999px;padding:1px 7px}
.wcb-tag.live{background:#c0392b;animation:kcgpulse 1.4s infinite}
.wcb-kc{font-size:.52rem;letter-spacing:1.1px;text-transform:uppercase;font-weight:700;color:var(--chiefs)}
.wcb-empty,.wcb-load{font-size:.85rem;color:var(--ink-faint);font-style:italic;text-align:center;padding:14px}
.wcb-foot{margin-top:8px;font-size:.82rem;color:var(--ink-faint);font-style:italic}
@media(max-width:680px){.wcb-round{flex-basis:176px}}
/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}