{} *{} {} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } /* ============================================ KC BOOK BEAT — Author Directory Brand palette pulled from kcbookbeat.com: Crimson #BB1E2D · Gold #F5BA00 · Black #1A1113 ============================================ */ :root{ --black:#1A1113; --black-soft:#241618; --crimson:#BB1E2D; --crimson-dark:#8F1620; --crimson-light:#D9414F; --gold:#F5BA00; --gold-dark:#C79400; --royal:#134A8C; --royal-light:#3E71B3; --teal:#00A9A0; --teal-light:#2FC4BB; --white:#FFFFFF; --cream:#F5EEE7; --muted:#B9AAA6; --muted-2:#7C6E6B; --line:rgba(245,186,0,.22); --display:'Archivo Black','Outfit',sans-serif; --body:'Outfit',sans-serif; --radius:10px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--black);color:var(--cream);font-family:var(--body);-webkit-font-smoothing:antialiased;} img{max-width:100%;display:block;} a{color:inherit;} button{font-family:inherit;cursor:pointer;} .skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--black);padding:12px 20px;z-index:200;font-weight:700;} .skip:focus{left:12px;top:12px;} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px;} .utility-bar{background:#0F0A0B;color:var(--muted);font-size:.72rem;letter-spacing:.04em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:8px 32px;border-bottom:1px solid rgba(255,255,255,.06);} .site-header{background:var(--black);border-bottom:2px solid var(--gold);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 32px;flex-wrap:wrap;position:sticky;top:4px;z-index:100;} .kc-stripe{height:4px;width:100%;position:sticky;top:0;z-index:101;background:linear-gradient(90deg,var(--crimson) 0 25%,var(--gold) 25% 50%,var(--royal) 50% 75%,var(--teal) 75% 100%);} .brand{display:flex;align-items:center;gap:14px;text-decoration:none;} .brand-lockup{display:flex;align-items:baseline;gap:6px;font-family:var(--display);} .brand-kc{color:var(--crimson);font-size:1.3rem;letter-spacing:.02em;} .brand-words{display:flex;gap:6px;color:var(--white);font-size:1.1rem;letter-spacing:.02em;} .brand-words b:last-child{color:var(--gold);} .brand-pulse{width:96px;height:auto;display:none;} .brand-pulse path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .brand-tagline{display:none;color:var(--muted);font-size:.75rem;} @media(min-width:860px){.brand-pulse{display:block;}.brand-tagline{display:block;}} .site-header nav{display:flex;gap:22px;flex-wrap:wrap;} .site-header nav a{color:var(--muted);text-decoration:none;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:color .2s var(--ease);} .site-header nav a:hover{color:var(--gold);} .join-button{background:var(--crimson);color:var(--white);text-decoration:none;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:10px 18px;border-radius:4px;transition:background .2s var(--ease);} .join-button:hover{background:var(--crimson-light);} .hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 20%,rgba(187,30,45,.18),transparent 60%),var(--black);padding:64px 32px 40px;} .hero-inner{position:relative;max-width:1080px;margin:0 auto;} .eyebrow{display:inline-block;background:var(--gold);color:var(--black);font-size:.72rem;font-weight:800;letter-spacing:.08em;padding:6px 12px;border-radius:3px;margin-bottom:18px;} .hero h1{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.02;color:var(--white);margin:0 0 20px;text-transform:uppercase;} .hero h1 span{color:var(--crimson);} .hero-copy p{max-width:560px;color:var(--muted);font-size:1.05rem;line-height:1.6;margin:0 0 24px;} .hero-button{display:inline-block;background:var(--crimson);color:var(--white);text-decoration:none;font-weight:700;letter-spacing:.03em;padding:14px 26px;border-radius:4px;transition:transform .2s var(--ease),background .2s var(--ease);} .hero-button:hover{background:var(--crimson-light);transform:translateY(-1px);} .hero-stats{display:flex;gap:40px;margin-top:44px;flex-wrap:wrap;} .stat{display:flex;flex-direction:column;gap:2px;} .stat strong{font-family:var(--display);font-size:2rem;color:var(--gold);} .stat span{font-size:.7rem;letter-spacing:.1em;color:var(--muted);} .ticker{background:var(--gold);color:var(--black);overflow:hidden;white-space:nowrap;border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15);} .ticker div{display:inline-flex;gap:10px;padding:12px 0;font-weight:800;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;animation:ticker-scroll 32s linear infinite;} .ticker span{color:var(--crimson);} .ticker span:nth-of-type(4n+2){color:var(--royal);} .ticker span:nth-of-type(4n+3){color:var(--teal);} .pulse-mini{color:var(--crimson) !important;letter-spacing:2px;} @keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media(prefers-reduced-motion:reduce){.ticker div{animation:none;}} .intro{max-width:800px;margin:0 auto;padding:64px 32px 32px;text-align:center;position:relative;} .section-kicker{display:block;color:var(--gold);font-size:.75rem;font-weight:800;letter-spacing:.14em;margin-bottom:12px;} .intro h2{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.4rem);color:var(--white);margin:0 0 16px;line-height:1.15;} .intro p{color:var(--muted);font-size:1rem;line-height:1.65;margin:0 auto;max-width:640px;} .genre-band{max-width:1120px;margin:0 auto;padding:24px 32px 48px;display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;} .genre-copy{flex:1;min-width:240px;} .genre-copy h2{font-family:var(--display);color:var(--white);font-size:1.6rem;margin:0 0 10px;} .genre-copy p{color:var(--muted);margin:0;line-height:1.6;} .genre-chips{flex:2;min-width:280px;display:flex;flex-wrap:wrap;gap:10px;} .genre-chips .chip{background:transparent;border:1.5px solid var(--gold);color:var(--cream);border-radius:999px;padding:8px 16px;font-size:.82rem;font-weight:600;transition:all .2s var(--ease);} .genre-chips .chip:hover{border-color:var(--crimson-light);color:var(--white);} .genre-chips .chip[aria-pressed="true"]{background:var(--gold);color:var(--black);border-color:var(--gold);} .age-band{max-width:1120px;margin:0 auto;padding:8px 32px 48px;display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;border-top:1px solid var(--line);} .age-band .section-kicker{color:var(--teal-light);} .age-chips{flex:2;min-width:280px;display:flex;flex-wrap:wrap;gap:10px;} .age-chips .chip{background:transparent;border:1.5px solid var(--teal);color:var(--cream);border-radius:999px;padding:8px 16px;font-size:.82rem;font-weight:600;transition:all .2s var(--ease);} .age-chips .chip:hover{border-color:var(--teal-light);color:var(--white);} .age-chips .chip[aria-pressed="true"]{background:var(--teal);color:var(--black);border-color:var(--teal);} .controls-wrap{background:var(--black-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 32px;position:sticky;top:78px;z-index:40;} .filter-label{max-width:1120px;margin:0 auto 14px;color:var(--gold);font-size:.7rem;letter-spacing:.1em;font-weight:700;} .controls{max-width:1120px;margin:0 auto;display:flex;gap:14px;flex-wrap:wrap;align-items:center;} .field{display:flex;align-items:center;gap:8px;background:var(--black);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:10px 14px;flex:1;min-width:180px;} .field:focus-within{border-color:var(--gold);} .search-icon{color:var(--muted);} .field input,.field select{background:transparent;border:none;color:var(--cream);font-family:var(--body);font-size:.92rem;width:100%;} .field input::placeholder{color:var(--muted-2);} .field input:focus,.field select:focus{outline:none;} .field select{cursor:pointer;} .field select option{background:var(--black-soft);color:var(--cream);} .clear{background:transparent;border:1px solid var(--crimson);color:var(--crimson-light);border-radius:6px;padding:10px 18px;font-size:.85rem;font-weight:700;transition:all .2s var(--ease);} .clear:hover{background:var(--crimson);color:var(--white);} main#directory{max-width:1200px;margin:0 auto;padding:36px 32px 64px;} .resultbar{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:24px;} .resultbar h2{font-family:var(--display);color:var(--white);font-size:1.5rem;margin:6px 0 0;} #resultCount{color:var(--muted);font-size:.85rem;} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;} .author-card{background:var(--black-soft);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease),border-color .2s var(--ease);} .author-card:hover{transform:translateY(-3px);border-color:var(--gold);} .author-card .thumb{width:100%;aspect-ratio:4/4.2;object-fit:contain;object-position:center;background:var(--black-soft);border-bottom:3px solid var(--crimson);} .author-card .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;} .author-card h3{font-family:var(--display);font-size:1.02rem;color:var(--white);margin:0;line-height:1.25;} .author-card .genre-tag{align-self:flex-start;background:var(--gold);color:var(--black);font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;} .author-card .genre-tag.c-crimson{background:var(--crimson);color:var(--white);} .author-card .genre-tag.c-royal{background:var(--royal);color:var(--white);} .author-card .genre-tag.c-teal{background:var(--teal);color:var(--black);} .author-card p.bio{color:var(--muted);font-size:.86rem;line-height:1.5;margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .author-card .view-btn{margin-top:6px;align-self:flex-start;background:none;border:none;color:var(--crimson-light);font-weight:700;font-size:.85rem;padding:0;} .author-card .view-btn:hover{color:var(--gold);} .empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted);} .modal{border:none;border-radius:14px;padding:0;max-width:640px;width:92vw;background:var(--black-soft);color:var(--cream);} .modal::backdrop{background:rgba(0,0,0,.72);} .modal-inner{padding:28px;position:relative;} .modal-close{position:absolute;top:16px;right:16px;background:var(--crimson);color:var(--white);border:none;border-radius:50%;width:32px;height:32px;font-size:1rem;line-height:1;} .modal-head{display:flex;gap:18px;align-items:center;margin-bottom:18px;} .modal-head img{width:88px;height:88px;border-radius:50%;object-fit:contain;background:var(--black);border:3px solid var(--gold);} .modal-head h3{font-family:var(--display);color:var(--white);font-size:1.3rem;margin:0 0 4px;} .modal-head .pronouns{color:var(--muted);font-size:.8rem;} .modal-genres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;} .modal-genres span{background:var(--gold);color:var(--black);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;} .modal-genres span.c-crimson{background:var(--crimson);color:var(--white);} .modal-genres span.c-royal{background:var(--royal);color:var(--white);} .modal-genres span.c-teal{background:var(--teal);color:var(--black);} .modal-bio{color:var(--cream);line-height:1.6;font-size:.94rem;margin-bottom:18px;} .modal-books{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:8px;} .modal-books li a{display:flex;justify-content:space-between;gap:10px;background:var(--black);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:10px 14px;text-decoration:none;font-size:.86rem;transition:border-color .2s var(--ease);} .modal-books li a:hover{border-color:var(--gold);} .modal-books li .b-genre{color:var(--muted);font-size:.78rem;} .modal-socials{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;} .modal-socials a{border:1px solid var(--crimson);color:var(--crimson-light);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:700;text-decoration:none;} .modal-socials a:hover{background:var(--crimson);color:var(--white);} .modal-note{color:var(--muted-2);font-size:.74rem;font-style:italic;} .modal-buy{display:inline-block;background:var(--gold);color:var(--black);text-decoration:none;font-weight:800;font-size:.85rem;padding:10px 20px;border-radius:6px;margin-bottom:12px;transition:background .2s var(--ease);} .modal-buy:hover{background:var(--white);} .cta{background:var(--crimson);color:var(--white);text-align:center;padding:64px 32px;border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);} .cta .section-kicker{color:var(--gold);} .cta h2{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.3rem);margin:0 0 14px;} .cta p{max-width:560px;margin:0 auto 26px;line-height:1.6;color:rgba(255,255,255,.85);} .cta div{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .cta a{text-decoration:none;font-weight:700;padding:14px 26px;border-radius:4px;letter-spacing:.02em;transition:all .2s var(--ease);} .cta a:not(.secondary){background:var(--gold);color:var(--black);} .cta a:not(.secondary):hover{background:var(--white);} .cta a.secondary{border:2px solid var(--white);color:var(--white);background:transparent;} .cta a.secondary:hover{background:var(--white);color:var(--crimson);} .footer{background:var(--black);padding:48px 32px 32px;} .footer-logo{display:flex;align-items:center;gap:8px;font-family:var(--display);margin-bottom:8px;justify-content:center;} .footer-kc{color:var(--crimson);font-size:1.1rem;} .footer-logo span b{color:var(--white);margin-right:4px;} .footer-logo span b:last-child{color:var(--gold);} .footer-pulse{display:block;margin:0 auto 16px;max-width:220px;width:100%;height:auto;aspect-ratio:260/34;} .footer-pulse path{fill:none;stroke:var(--gold);stroke-width:2;} .footer-positioning{text-align:center;color:var(--muted);font-size:.85rem;margin:0 0 24px;} .footer-links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);} .footer-links a{color:var(--muted);text-decoration:none;font-size:.8rem;letter-spacing:.03em;} .footer-links a:hover{color:var(--gold);} @media(max-width:720px){ .site-header{padding:12px 18px;} .controls-wrap{position:static;} .hero{padding:44px 18px 32px;} .genre-band,.intro,main#directory,.cta,.footer{padding-left:18px;padding-right:18px;} } :root{ --black:#1A1113; --black-soft:#241618; --crimson:#BB1E2D; --crimson-dark:#8F1620; --crimson-light:#D9414F; --gold:#F5BA00; --gold-dark:#C79400; --royal:#134A8C; --royal-light:#3E71B3; --teal:#00A9A0; --teal-light:#2FC4BB; --white:#FFFFFF; --cream:#F5EEE7; --muted:#B9AAA6; --muted-2:#7C6E6B; --line:rgba(245,186,0,.22); --display:'Archivo Black','Outfit',sans-serif; --body:'Outfit',sans-serif; --radius:10px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--black);color:var(--cream);font-family:var(--body);-webkit-font-smoothing:antialiased;} img{max-width:100%;display:block;} a{color:inherit;} button{font-family:inherit;cursor:pointer;} .skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--black);padding:12px 20px;z-index:200;font-weight:700;} .skip:focus{left:12px;top:12px;} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px;} .utility-bar{background:#0F0A0B;color:var(--muted);font-size:.72rem;letter-spacing:.04em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:8px 32px;border-bottom:1px solid rgba(255,255,255,.06);} .site-header{background:var(--black);border-bottom:2px solid var(--gold);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 32px;flex-wrap:wrap;position:sticky;top:4px;z-index:100;} .kc-stripe{height:4px;width:100%;position:sticky;top:0;z-index:101;background:linear-gradient(90deg,var(--crimson) 0 25%,var(--gold) 25% 50%,var(--royal) 50% 75%,var(--teal) 75% 100%);} .brand{display:flex;align-items:center;gap:14px;text-decoration:none;} .brand-lockup{display:flex;align-items:baseline;gap:6px;font-family:var(--display);} .brand-kc{color:var(--crimson);font-size:1.3rem;letter-spacing:.02em;} .brand-words{display:flex;gap:6px;color:var(--white);font-size:1.1rem;letter-spacing:.02em;} .brand-words b:last-child{color:var(--gold);} .brand-tagline{display:none;color:var(--muted);font-size:.75rem;} @media(min-width:860px){.brand-tagline{display:block;}} .site-header nav{display:flex;gap:22px;flex-wrap:wrap;} .site-header nav a{color:var(--muted);text-decoration:none;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:color .2s var(--ease);} .site-header nav a:hover{color:var(--gold);} .join-button{background:var(--crimson);color:var(--white);text-decoration:none;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:10px 18px;border-radius:4px;transition:background .2s var(--ease);} .join-button:hover{background:var(--crimson-light);} .hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 20%,rgba(187,30,45,.18),transparent 60%),var(--black);padding:64px 32px 40px;} .hero-inner{position:relative;max-width:1080px;margin:0 auto;} .eyebrow{display:inline-block;background:var(--gold);color:var(--black);font-size:.72rem;font-weight:800;letter-spacing:.08em;padding:6px 12px;border-radius:3px;margin-bottom:18px;} .hero h1{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.02;color:var(--white);margin:0 0 20px;text-transform:uppercase;} .hero h1 span{color:var(--crimson);} .hero-copy p{max-width:560px;color:var(--muted);font-size:1.05rem;line-height:1.6;margin:0 0 24px;} .hero-button{display:inline-block;background:var(--crimson);color:var(--white);text-decoration:none;font-weight:700;letter-spacing:.03em;padding:14px 26px;border-radius:4px;transition:transform .2s var(--ease),background .2s var(--ease);} .hero-button:hover{background:var(--crimson-light);transform:translateY(-1px);} .hero-stats{display:flex;gap:40px;margin-top:44px;flex-wrap:wrap;} .stat{display:flex;flex-direction:column;gap:2px;} .stat strong{font-family:var(--display);font-size:2rem;color:var(--gold);} .stat span{font-size:.7rem;letter-spacing:.1em;color:var(--muted);} .ticker{background:var(--gold);color:var(--black);overflow:hidden;white-space:nowrap;border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15);} .ticker div{display:inline-flex;gap:10px;padding:12px 0;font-weight:800;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;animation:ticker-scroll 32s linear infinite;} .ticker span{color:var(--crimson);} .ticker span:nth-of-type(4n+2){color:var(--royal);} .ticker span:nth-of-type(4n+3){color:var(--teal);} @keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media(prefers-reduced-motion:reduce){.ticker div{animation:none;}} .intro{max-width:800px;margin:0 auto;padding:64px 32px 32px;text-align:center;position:relative;} .intro-logo{width:64px;height:64px;border:2px solid var(--gold);color:var(--gold);border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;font-family:var(--display);} .section-kicker{display:block;color:var(--gold);font-size:.75rem;font-weight:800;letter-spacing:.14em;margin-bottom:12px;} .intro h2{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.4rem);color:var(--white);margin:0 0 16px;line-height:1.15;} .intro p{color:var(--muted);font-size:1rem;line-height:1.65;margin:0 auto;max-width:640px;} .genre-band{max-width:1120px;margin:0 auto;padding:24px 32px 48px;display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;} .genre-copy{flex:1;min-width:240px;} .genre-copy h2{font-family:var(--display);color:var(--white);font-size:1.6rem;margin:0 0 10px;} .genre-copy p{color:var(--muted);margin:0;line-height:1.6;} .genre-chips{flex:2;min-width:280px;display:flex;flex-wrap:wrap;gap:10px;} .genre-chips .chip{background:transparent;border:1.5px solid var(--gold);color:var(--cream);border-radius:999px;padding:8px 16px;font-size:.82rem;font-weight:600;transition:all .2s var(--ease);} .genre-chips .chip:hover{border-color:var(--crimson-light);color:var(--white);} .genre-chips .chip[aria-pressed="true"]{background:var(--gold);color:var(--black);border-color:var(--gold);} .age-band{max-width:1120px;margin:0 auto;padding:8px 32px 48px;display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;border-top:1px solid var(--line);} .age-band .section-kicker{color:var(--teal-light);} .age-chips{flex:2;min-width:280px;display:flex;flex-wrap:wrap;gap:10px;} .age-chips .chip{background:transparent;border:1.5px solid var(--teal);color:var(--cream);border-radius:999px;padding:8px 16px;font-size:.82rem;font-weight:600;transition:all .2s var(--ease);} .age-chips .chip:hover{border-color:var(--teal-light);color:var(--white);} .age-chips .chip[aria-pressed="true"]{background:var(--teal);color:var(--black);border-color:var(--teal);} .controls-wrap{background:var(--black-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 32px;position:sticky;top:78px;z-index:40;} .filter-label{max-width:1120px;margin:0 auto 14px;color:var(--gold);font-size:.7rem;letter-spacing:.1em;font-weight:700;} .controls{max-width:1120px;margin:0 auto;display:flex;gap:14px;flex-wrap:wrap;align-items:center;} .field{display:flex;align-items:center;gap:8px;background:var(--black);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:10px 14px;flex:1;min-width:180px;} .field:focus-within{border-color:var(--gold);} .search-icon{color:var(--muted);} .field input,.field select{background:transparent;border:none;color:var(--cream);font-family:var(--body);font-size:.92rem;width:100%;} .field input::placeholder{color:var(--muted-2);} .field input:focus,.field select:focus{outline:none;} .field select{cursor:pointer;} .field select option{background:var(--black-soft);color:var(--cream);} .clear{background:transparent;border:1px solid var(--crimson);color:var(--crimson-light);border-radius:6px;padding:10px 18px;font-size:.85rem;font-weight:700;transition:all .2s var(--ease);} .clear:hover{background:var(--crimson);color:var(--white);} main#directory{max-width:1200px;margin:0 auto;padding:36px 32px 64px;} .resultbar{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:24px;} .resultbar h2{font-family:var(--display);color:var(--white);font-size:1.5rem;margin:6px 0 0;} #resultCount{color:var(--muted);font-size:.85rem;} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;} .author-card{background:var(--black-soft);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease),border-color .2s var(--ease);} .author-card:hover{transform:translateY(-3px);border-color:var(--gold);} .thumb-wrap{width:100%;background:var(--black-soft);border-bottom:3px solid var(--crimson);overflow:hidden;} .author-card .thumb{width:100%;aspect-ratio:4/4.2;object-fit:contain;object-position:center;background:var(--black-soft);} .thumb-wrap.image-error{min-height:220px;display:grid;place-items:center;border-bottom:3px solid var(--crimson);} .thumb-wrap.image-error::after{content:"Image unavailable";color:var(--muted);font-weight:700;font-size:.8rem;} .thumb-wrap.image-error .thumb{display:none !important;} .author-card .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;} .author-card h3{font-family:var(--display);font-size:1.02rem;color:var(--white);margin:0;line-height:1.25;} .author-card .genre-tag{align-self:flex-start;background:var(--gold);color:var(--black);font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;} .author-card .genre-tag.c-crimson{background:var(--crimson);color:var(--white);} .author-card .genre-tag.c-royal{background:var(--royal);color:var(--white);} .author-card .genre-tag.c-teal{background:var(--teal);color:var(--black);} .author-card p.bio{color:var(--muted);font-size:.86rem;line-height:1.5;margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .author-card .view-btn{margin-top:6px;align-self:flex-start;background:none;border:none;color:var(--crimson-light);font-weight:700;font-size:.85rem;padding:0;} .author-card .view-btn:hover{color:var(--gold);} .empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted);} .modal{border:none;border-radius:14px;padding:0;max-width:640px;width:92vw;background:var(--black-soft);color:var(--cream);} .modal::backdrop{background:rgba(0,0,0,.72);} .modal-inner{padding:28px;position:relative;} .modal-close{position:absolute;top:16px;right:16px;background:var(--crimson);color:var(--white);border:none;border-radius:50%;width:32px;height:32px;font-size:1rem;line-height:1;} .modal-head{display:flex;gap:18px;align-items:center;margin-bottom:18px;} .modal-head img{width:88px;height:88px;border-radius:50%;object-fit:contain;background:var(--black);border:3px solid var(--gold);} .modal-head h3{font-family:var(--display);color:var(--white);font-size:1.3rem;margin:0 0 4px;} .modal-head .pronouns{color:var(--muted);font-size:.8rem;} .modal-genres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;} .modal-genres span{background:var(--gold);color:var(--black);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;} .modal-genres span.c-crimson{background:var(--crimson);color:var(--white);} .modal-genres span.c-royal{background:var(--royal);color:var(--white);} .modal-genres span.c-teal{background:var(--teal);color:var(--black);} .modal-bio{color:var(--cream);line-height:1.6;font-size:.94rem;margin-bottom:18px;white-space:pre-line;} .modal-books{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:8px;} .modal-books li a{display:flex;justify-content:space-between;gap:10px;background:var(--black);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:10px 14px;text-decoration:none;font-size:.86rem;transition:border-color .2s var(--ease);} .modal-books li a:hover{border-color:var(--gold);} .modal-books li .b-genre{color:var(--muted);font-size:.78rem;} .modal-socials{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;} .modal-socials a{border:1px solid var(--crimson);color:var(--crimson-light);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:700;text-decoration:none;} .modal-socials a:hover{background:var(--crimson);color:var(--white);} .modal-note{color:var(--muted-2);font-size:.74rem;font-style:italic;white-space:pre-line;} .modal-buy{display:inline-block;background:var(--gold);color:var(--black);text-decoration:none;font-weight:800;font-size:.85rem;padding:10px 20px;border-radius:6px;margin-bottom:12px;transition:background .2s var(--ease);} .modal-buy:hover{background:var(--white);} .cta{background:var(--crimson);color:var(--white);text-align:center;padding:64px 32px;border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);} .cta .section-kicker{color:var(--gold);} .cta h2{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.3rem);margin:0 0 14px;} .cta p{max-width:560px;margin:0 auto 26px;line-height:1.6;color:rgba(255,255,255,.85);} .cta div{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .cta a{text-decoration:none;font-weight:700;padding:14px 26px;border-radius:4px;letter-spacing:.02em;transition:all .2s var(--ease);} .cta a:not(.secondary){background:var(--gold);color:var(--black);} .cta a:not(.secondary):hover{background:var(--white);} .cta a.secondary{border:2px solid var(--white);color:var(--white);background:transparent;} .cta a.secondary:hover{background:var(--white);color:var(--crimson);} .footer{background:var(--black);padding:48px 32px 32px;} .footer-logo{display:flex;align-items:center;gap:8px;font-family:var(--display);margin-bottom:8px;justify-content:center;} .footer-kc{color:var(--crimson);font-size:1.1rem;} .footer-logo span b{color:var(--white);margin-right:4px;} .footer-logo span b:last-child{color:var(--gold);} .footer p{text-align:center;color:var(--muted);font-size:.85rem;margin:0 0 8px;} .footer-links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding-top:20px;margin-top:16px;border-top:1px solid rgba(255,255,255,.08);} .footer-links a{color:var(--muted);text-decoration:none;font-size:.8rem;letter-spacing:.03em;} .footer-links a:hover{color:var(--gold);} .footer small{display:block;text-align:center;color:var(--muted-2);font-size:.72rem;margin-top:16px;} @media(max-width:720px){ .site-header{padding:12px 18px;} .controls-wrap{position:static;} .hero{padding:44px 18px 32px;} .genre-band,.intro,main#directory,.cta,.footer{padding-left:18px;padding-right:18px;} } /* ============================================ KC BOOK BEAT — Author Directory Brand palette pulled from kcbookbeat.com: Crimson #BB1E2D · Gold #F5BA00 · Black #1A1113 ============================================ */ :root{ --black:#1A1113; --black-soft:#241618; --crimson:#BB1E2D; --crimson-dark:#8F1620; --crimson-light:#D9414F; --gold:#F5BA00; --gold-dark:#C79400; --royal:#134A8C; --royal-light:#3E71B3; --teal:#00A9A0; --teal-light:#2FC4BB; --white:#FFFFFF; --cream:#F5EEE7; --muted:#B9AAA6; --muted-2:#7C6E6B; --line:rgba(245,186,0,.22); --display:'Archivo Black','Outfit',sans-serif; --body:'Outfit',sans-serif; --radius:10px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--black);color:var(--cream);font-family:var(--body);-webkit-font-smoothing:antialiased;} img{max-width:100%;display:block;} a{color:inherit;} button{font-family:inherit;cursor:pointer;} .skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--black);padding:12px 20px;z-index:200;font-weight:700;} .skip:focus{left:12px;top:12px;} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px;} .utility-bar{background:#0F0A0B;color:var(--muted);font-size:.72rem;letter-spacing:.04em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:8px 32px;border-bottom:1px solid rgba(255,255,255,.06);} .site-header{background:var(--black);border-bottom:2px solid var(--gold);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 32px;flex-wrap:wrap;position:sticky;top:4px;z-index:100;} .kc-stripe{height:4px;width:100%;position:sticky;top:0;z-index:101;background:linear-gradient(90deg,var(--crimson) 0 25%,var(--gold) 25% 50%,var(--royal) 50% 75%,var(--teal) 75% 100%);} .brand{display:flex;align-items:center;gap:14px;text-decoration:none;} .brand-lockup{display:flex;align-items:baseline;gap:6px;font-family:var(--display);} .brand-kc{color:var(--crimson);font-size:1.3rem;letter-spacing:.02em;} .brand-words{display:flex;gap:6px;color:var(--white);font-size:1.1rem;letter-spacing:.02em;} .brand-words b:last-child{color:var(--gold);} .brand-pulse{width:96px;height:auto;display:none;} .brand-pulse path{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .brand-tagline{display:none;color:var(--muted);font-size:.75rem;} @media(min-width:860px){.brand-pulse{display:block;}.brand-tagline{display:block;}} .site-header nav{display:flex;gap:22px;flex-wrap:wrap;} .site-header nav a{color:var(--muted);text-decoration:none;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:color .2s var(--ease);} .site-header nav a:hover{color:var(--gold);} .join-button{background:var(--crimson);color:var(--white);text-decoration:none;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:10px 18px;border-radius:4px;transition:background .2s var(--ease);} .join-button:hover{background:var(--crimson-light);} .hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 20%,rgba(187,30,45,.18),transparent 60%),var(--black);padding:64px 32px 40px;} .hero-inner{position:relative;max-width:1080px;margin:0 auto;} .eyebrow{display:inline-block;background:var(--gold);color:var(--black);font-size:.72rem;font-weight:800;letter-spacing:.08em;padding:6px 12px;border-radius:3px;margin-bottom:18px;} .hero h1{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.02;color:var(--white);margin:0 0 20px;text-transform:uppercase;} .hero h1 span{color:var(--crimson);} .hero-copy p{max-width:560px;color:var(--muted);font-size:1.05rem;line-height:1.6;margin:0 0 24px;} .hero-button{display:inline-block;background:var(--crimson);color:var(--white);text-decoration:none;font-weight:700;letter-spacing:.03em;padding:14px 26px;border-radius:4px;transition:transform .2s var(--ease),background .2s var(--ease);} .hero-button:hover{background:var(--crimson-light);transform:translateY(-1px);} .hero-stats{display:flex;gap:40px;margin-top:44px;flex-wrap:wrap;} .stat{display:flex;flex-direction:column;gap:2px;} .stat strong{font-family:var(--display);font-size:2rem;color:var(--gold);} .stat span{font-size:.7rem;letter-spacing:.1em;color:var(--muted);} .ticker{background:var(--gold);color:var(--black);overflow:hidden;white-space:nowrap;border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15);} .ticker div{display:inline-flex;gap:10px;padding:12px 0;font-weight:800;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;animation:ticker-scroll 32s linear infinite;} .ticker span{color:var(--crimson);} .ticker span:nth-of-type(4n+2){color:var(--royal);} .ticker span:nth-of-type(4n+3){color:var(--teal);} .pulse-mini{color:var(--crimson) !important;letter-spacing:2px;} @keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media(prefers-reduced-motion:reduce){.ticker div{animation:none;}} .intro{max-width:800px;margin:0 auto;padding:64px 32px 32px;text-align:center;position:relative;} .section-kicker{display:block;color:var(--gold);font-size:.75rem;font-weight:800;letter-spacing:.14em;margin-bottom:12px;} .intro h2{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.4rem);color:var(--white);margin:0 0 16px;line-height:1.15;} .intro p{color:var(--muted);font-size:1rem;line-height:1.65;margin:0 auto;max-width:640px;} .genre-band{max-width:1120px;margin:0 auto;padding:24px 32px 48px;display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;} .genre-copy{flex:1;min-width:240px;} .genre-copy h2{font-family:var(--display);color:var(--white);font-size:1.6rem;margin:0 0 10px;} .genre-copy p{color:var(--muted);margin:0;line-height:1.6;} .genre-chips{flex:2;min-width:280px;display:flex;flex-wrap:wrap;gap:10px;} .genre-chips .chip{background:transparent;border:1.5px solid var(--gold);color:var(--cream);border-radius:999px;padding:8px 16px;font-size:.82rem;font-weight:600;transition:all .2s var(--ease);} .genre-chips .chip:hover{border-color:var(--crimson-light);color:var(--white);} .genre-chips .chip[aria-pressed="true"]{background:var(--gold);color:var(--black);border-color:var(--gold);} .age-band{max-width:1120px;margin:0 auto;padding:8px 32px 48px;display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;border-top:1px solid var(--line);} .age-band .section-kicker{color:var(--teal-light);} .age-chips{flex:2;min-width:280px;display:flex;flex-wrap:wrap;gap:10px;} .age-chips .chip{background:transparent;border:1.5px solid var(--teal);color:var(--cream);border-radius:999px;padding:8px 16px;font-size:.82rem;font-weight:600;transition:all .2s var(--ease);} .age-chips .chip:hover{border-color:var(--teal-light);color:var(--white);} .age-chips .chip[aria-pressed="true"]{background:var(--teal);color:var(--black);border-color:var(--teal);} .controls-wrap{background:var(--black-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 32px;position:sticky;top:78px;z-index:40;} .filter-label{max-width:1120px;margin:0 auto 14px;color:var(--gold);font-size:.7rem;letter-spacing:.1em;font-weight:700;} .controls{max-width:1120px;margin:0 auto;display:flex;gap:14px;flex-wrap:wrap;align-items:center;} .field{display:flex;align-items:center;gap:8px;background:var(--black);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:10px 14px;flex:1;min-width:180px;} .field:focus-within{border-color:var(--gold);} .search-icon{color:var(--muted);} .field input,.field select{background:transparent;border:none;color:var(--cream);font-family:var(--body);font-size:.92rem;width:100%;} .field input::placeholder{color:var(--muted-2);} .field input:focus,.field select:focus{outline:none;} .field select{cursor:pointer;} .field select option{background:var(--black-soft);color:var(--cream);} .clear{background:transparent;border:1px solid var(--crimson);color:var(--crimson-light);border-radius:6px;padding:10px 18px;font-size:.85rem;font-weight:700;transition:all .2s var(--ease);} .clear:hover{background:var(--crimson);color:var(--white);} main#directory{max-width:1200px;margin:0 auto;padding:36px 32px 64px;} .resultbar{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:24px;} .resultbar h2{font-family:var(--display);color:var(--white);font-size:1.5rem;margin:6px 0 0;} #resultCount{color:var(--muted);font-size:.85rem;} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;} .author-card{background:var(--black-soft);border:1px solid rgba(255,255,255,.08);border-top:3px solid var(--crimson);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease),border-color .2s var(--ease);} .author-card:hover{transform:translateY(-3px);border-color:var(--gold);} .author-card .thumb{width:100%;aspect-ratio:4/4.2;object-fit:contain;object-position:center;background:var(--black-soft);border-bottom:3px solid var(--crimson);} .author-card .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;} .author-card h3{font-family:var(--display);font-size:1.02rem;color:var(--white);margin:0;line-height:1.25;} .author-card .genre-tag{align-self:flex-start;background:var(--gold);color:var(--black);font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;} .author-card .genre-tag.c-crimson{background:var(--crimson);color:var(--white);} .author-card .genre-tag.c-royal{background:var(--royal);color:var(--white);} .author-card .genre-tag.c-teal{background:var(--teal);color:var(--black);} .author-card p.bio{color:var(--muted);font-size:.86rem;line-height:1.5;margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .author-card .view-btn{margin-top:6px;align-self:flex-start;background:none;border:none;color:var(--crimson-light);font-weight:700;font-size:.85rem;padding:0;} .author-card .view-btn:hover{color:var(--gold);} .empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted);} .modal{border:none;border-radius:14px;padding:0;max-width:640px;width:92vw;background:var(--black-soft);color:var(--cream);} .modal::backdrop{background:rgba(0,0,0,.72);} .modal-inner{padding:28px;position:relative;} .modal-close{position:absolute;top:16px;right:16px;background:var(--crimson);color:var(--white);border:none;border-radius:50%;width:32px;height:32px;font-size:1rem;line-height:1;} .modal-head{display:flex;gap:18px;align-items:center;margin-bottom:18px;} .modal-head img{width:88px;height:88px;border-radius:50%;object-fit:contain;background:var(--black);border:3px solid var(--gold);} .modal-head h3{font-family:var(--display);color:var(--white);font-size:1.3rem;margin:0 0 4px;} .modal-head .pronouns{color:var(--muted);font-size:.8rem;} .modal-genres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;} .modal-genres span{background:var(--gold);color:var(--black);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;} .modal-genres span.c-crimson{background:var(--crimson);color:var(--white);} .modal-genres span.c-royal{background:var(--royal);color:var(--white);} .modal-genres span.c-teal{background:var(--teal);color:var(--black);} .modal-bio{color:var(--cream);line-height:1.6;font-size:.94rem;margin-bottom:18px;} .modal-books{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:8px;} .modal-books li a{display:flex;justify-content:space-between;gap:10px;background:var(--black);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:10px 14px;text-decoration:none;font-size:.86rem;transition:border-color .2s var(--ease);} .modal-books li a:hover{border-color:var(--gold);} .modal-books li .b-genre{color:var(--muted);font-size:.78rem;} .modal-socials{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;} .modal-socials a{border:1px solid var(--crimson);color:var(--crimson-light);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:700;text-decoration:none;} .modal-socials a:hover{background:var(--crimson);color:var(--white);} .modal-note{color:var(--muted-2);font-size:.74rem;font-style:italic;} .modal-buy{display:inline-block;background:var(--gold);color:var(--black);text-decoration:none;font-weight:800;font-size:.85rem;padding:10px 20px;border-radius:6px;margin-bottom:12px;transition:background .2s var(--ease);} .modal-buy:hover{background:var(--white);} .cta{background:var(--crimson);color:var(--white);text-align:center;padding:64px 32px;border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);} .cta .section-kicker{color:var(--gold);} .cta h2{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.3rem);margin:0 0 14px;} .cta p{max-width:560px;margin:0 auto 26px;line-height:1.6;color:rgba(255,255,255,.85);} .cta div{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .cta a{text-decoration:none;font-weight:700;padding:14px 26px;border-radius:4px;letter-spacing:.02em;transition:all .2s var(--ease);} .cta a:not(.secondary){background:var(--gold);color:var(--black);} .cta a:not(.secondary):hover{background:var(--white);} .cta a.secondary{border:2px solid var(--white);color:var(--white);background:transparent;} .cta a.secondary:hover{background:var(--white);color:var(--crimson);} .footer{background:var(--black);padding:48px 32px 32px;} .footer-logo{display:flex;align-items:center;gap:8px;font-family:var(--display);margin-bottom:8px;justify-content:center;} .footer-kc{color:var(--crimson);font-size:1.1rem;} .footer-logo span b{color:var(--white);margin-right:4px;} .footer-logo span b:last-child{color:var(--gold);} .footer-pulse{display:block;margin:0 auto 16px;max-width:220px;width:100%;height:auto;aspect-ratio:260/34;} .footer-pulse path{fill:none;stroke:var(--gold);stroke-width:2;} .footer-positioning{text-align:center;color:var(--muted);font-size:.85rem;margin:0 0 24px;} .footer-links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);} .footer-links a{color:var(--muted);text-decoration:none;font-size:.8rem;letter-spacing:.03em;} .footer-links a:hover{color:var(--gold);} @media(max-width:720px){ .site-header{padding:12px 18px;} .controls-wrap{position:static;} .hero{padding:44px 18px 32px;} .genre-band,.intro,main#directory,.cta,.footer{padding-left:18px;padding-right:18px;} } /* ============================================ KC BOOK BEAT — Author Directory Brand palette pulled from kcbookbeat.com: Crimson #BB1E2D · Gold #F5BA00 · Black #1A1113 ============================================ */ :root{ --black:#1A1113; --black-soft:#241618; --crimson:#BB1E2D; --crimson-dark:#8F1620; --crimson-light:#D9414F; --gold:#F5BA00; --gold-dark:#C79400; --royal:#134A8C; --royal-light:#3E71B3; --teal:#00A9A0; --teal-light:#2FC4BB; --white:#FFFFFF; --cream:#F5EEE7; --muted:#B9AAA6; --muted-2:#7C6E6B; --line:rgba(245,186,0,.22); --display:'Archivo Black','Outfit',sans-serif; --body:'Outfit',sans-serif; --radius:10px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--black);color:var(--cream);font-family:var(--body);-webkit-font-smoothing:antialiased;} img{max-width:100%;display:block;} a{color:inherit;} button{font-family:inherit;cursor:pointer;} .skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--black);padding:12px 20px;z-index:200;font-weight:700;} .skip:focus{left:12px;top:12px;} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px;} .utility-bar{background:#0F0A0B;color:var(--muted);font-size:.72rem;letter-spacing:.04em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:8px 32px;border-bottom:1px solid rgba(255,255,255,.06);} .site-header{background:var(--black);border-bottom:2px solid var(--gold);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 32px;flex-wrap:wrap;position:sticky;top:4px;z-index:100;} .kc-stripe{height:4px;width:100%;position:sticky;top:0;z-index:101;background:linear-gradient(90deg,var(--crimson) 0 25%,var(--gold) 25% 50%,var(--royal) 50% 75%,var(--teal) 75% 100%);} .brand{display:flex;align-items:center;gap:14px;text-decoration:none;} .brand-lockup{display:flex;align-items:baseline;gap:6px;font-family:var(--display);} .brand-kc{color:var(--crimson);font-size:1.3rem;letter-spacing:.02em;} .brand-words{display:flex;gap:6px;color:var(--white);font-size:1.1rem;letter-spacing:.02em;} .brand-words b:last-child{color:var(--gold);} .brand-tagline{display:none;color:var(--muted);font-size:.75rem;} @media(min-width:860px){.brand-tagline{display:block;}} .site-header nav{display:flex;gap:22px;flex-wrap:wrap;} .site-header nav a{color:var(--muted);text-decoration:none;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:color .2s var(--ease);} .site-header nav a:hover{color:var(--gold);} .join-button{background:var(--crimson);color:var(--white);text-decoration:none;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:10px 18px;border-radius:4px;transition:background .2s var(--ease);} .join-button:hover{background:var(--crimson-light);} .hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 25% 20%,rgba(187,30,45,.18),transparent 60%),var(--black);padding:64px 32px 40px;} .hero-inner{position:relative;max-width:1080px;margin:0 auto;} .eyebrow{display:inline-block;background:var(--gold);color:var(--black);font-size:.72rem;font-weight:800;letter-spacing:.08em;padding:6px 12px;border-radius:3px;margin-bottom:18px;} .hero h1{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.02;color:var(--white);margin:0 0 20px;text-transform:uppercase;} .hero h1 span{color:var(--crimson);} .hero-copy p{max-width:560px;color:var(--muted);font-size:1.05rem;line-height:1.6;margin:0 0 24px;} .hero-button{display:inline-block;background:var(--crimson);color:var(--white);text-decoration:none;font-weight:700;letter-spacing:.03em;padding:14px 26px;border-radius:4px;transition:transform .2s var(--ease),background .2s var(--ease);} .hero-button:hover{background:var(--crimson-light);transform:translateY(-1px);} .hero-stats{display:flex;gap:40px;margin-top:44px;flex-wrap:wrap;} .stat{display:flex;flex-direction:column;gap:2px;} .stat strong{font-family:var(--display);font-size:2rem;color:var(--gold);} .stat span{font-size:.7rem;letter-spacing:.1em;color:var(--muted);} .ticker{background:var(--gold);color:var(--black);overflow:hidden;white-space:nowrap;border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15);} .ticker div{display:inline-flex;gap:10px;padding:12px 0;font-weight:800;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;animation:ticker-scroll 32s linear infinite;} .ticker span{color:var(--crimson);} .ticker span:nth-of-type(4n+2){color:var(--royal);} .ticker span:nth-of-type(4n+3){color:var(--teal);} @keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media(prefers-reduced-motion:reduce){.ticker div{animation:none;}} .intro{max-width:800px;margin:0 auto;padding:64px 32px 32px;text-align:center;position:relative;} .intro-logo{width:64px;height:64px;border:2px solid var(--gold);color:var(--gold);border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;font-family:var(--display);} .section-kicker{display:block;color:var(--gold);font-size:.75rem;font-weight:800;letter-spacing:.14em;margin-bottom:12px;} .intro h2{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.4rem);color:var(--white);margin:0 0 16px;line-height:1.15;} .intro p{color:var(--muted);font-size:1rem;line-height:1.65;margin:0 auto;max-width:640px;} .genre-band{max-width:1120px;margin:0 auto;padding:24px 32px 48px;display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;} .genre-copy{flex:1;min-width:240px;} .genre-copy h2{font-family:var(--display);color:var(--white);font-size:1.6rem;margin:0 0 10px;} .genre-copy p{color:var(--muted);margin:0;line-height:1.6;} .genre-chips{flex:2;min-width:280px;display:flex;flex-wrap:wrap;gap:10px;} .genre-chips .chip{background:transparent;border:1.5px solid var(--gold);color:var(--cream);border-radius:999px;padding:8px 16px;font-size:.82rem;font-weight:600;transition:all .2s var(--ease);} .genre-chips .chip:hover{border-color:var(--crimson-light);color:var(--white);} .genre-chips .chip[aria-pressed="true"]{background:var(--gold);color:var(--black);border-color:var(--gold);} .age-band{max-width:1120px;margin:0 auto;padding:8px 32px 48px;display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;border-top:1px solid var(--line);} .age-band .section-kicker{color:var(--teal-light);} .age-chips{flex:2;min-width:280px;display:flex;flex-wrap:wrap;gap:10px;} .age-chips .chip{background:transparent;border:1.5px solid var(--teal);color:var(--cream);border-radius:999px;padding:8px 16px;font-size:.82rem;font-weight:600;transition:all .2s var(--ease);} .age-chips .chip:hover{border-color:var(--teal-light);color:var(--white);} .age-chips .chip[aria-pressed="true"]{background:var(--teal);color:var(--black);border-color:var(--teal);} .controls-wrap{background:var(--black-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 32px;position:sticky;top:78px;z-index:40;} .filter-label{max-width:1120px;margin:0 auto 14px;color:var(--gold);font-size:.7rem;letter-spacing:.1em;font-weight:700;} .controls{max-width:1120px;margin:0 auto;display:flex;gap:14px;flex-wrap:wrap;align-items:center;} .field{display:flex;align-items:center;gap:8px;background:var(--black);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:10px 14px;flex:1;min-width:180px;} .field:focus-within{border-color:var(--gold);} .search-icon{color:var(--muted);} .field input,.field select{background:transparent;border:none;color:var(--cream);font-family:var(--body);font-size:.92rem;width:100%;} .field input::placeholder{color:var(--muted-2);} .field input:focus,.field select:focus{outline:none;} .field select{cursor:pointer;} .field select option{background:var(--black-soft);color:var(--cream);} .clear{background:transparent;border:1px solid var(--crimson);color:var(--crimson-light);border-radius:6px;padding:10px 18px;font-size:.85rem;font-weight:700;transition:all .2s var(--ease);} .clear:hover{background:var(--crimson);color:var(--white);} main#directory{max-width:1200px;margin:0 auto;padding:36px 32px 64px;} .resultbar{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:24px;} .resultbar h2{font-family:var(--display);color:var(--white);font-size:1.5rem;margin:6px 0 0;} #resultCount{color:var(--muted);font-size:.85rem;} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px;} .author-card{background:var(--black-soft);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease),border-color .2s var(--ease);} .author-card:hover{transform:translateY(-3px);border-color:var(--gold);} .author-card .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;} .author-card h3{font-family:var(--display);font-size:1.02rem;color:var(--white);margin:0;line-height:1.25;} .author-card .genre-tag{align-self:flex-start;background:var(--gold);color:var(--black);font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:999px;} .author-card .genre-tag.c-crimson{background:var(--crimson);color:var(--white);} .author-card .genre-tag.c-royal{background:var(--royal);color:var(--white);} .author-card .genre-tag.c-teal{background:var(--teal);color:var(--black);} .author-card p.bio{color:var(--muted);font-size:.86rem;line-height:1.5;margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .author-card .view-btn{margin-top:6px;align-self:flex-start;background:none;border:none;color:var(--crimson-light);font-weight:700;font-size:.85rem;padding:0;} .author-card .view-btn:hover{color:var(--gold);} .empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted);} .modal{border:none;border-radius:14px;padding:0;max-width:640px;width:92vw;background:var(--black-soft);color:var(--cream);} .modal::backdrop{background:rgba(0,0,0,.72);} .modal-inner{padding:28px;position:relative;} .modal-close{position:absolute;top:16px;right:16px;background:var(--crimson);color:var(--white);border:none;border-radius:50%;width:32px;height:32px;font-size:1rem;line-height:1;} .modal-head{display:flex;gap:18px;align-items:center;margin-bottom:18px;} .modal-head h3{font-family:var(--display);color:var(--white);font-size:1.3rem;margin:0 0 4px;} .modal-head .pronouns{color:var(--muted);font-size:.8rem;} .modal-genres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;} .modal-genres span{background:var(--gold);color:var(--black);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;} .modal-genres span.c-crimson{background:var(--crimson);color:var(--white);} .modal-genres span.c-royal{background:var(--royal);color:var(--white);} .modal-genres span.c-teal{background:var(--teal);color:var(--black);} .modal-bio{color:var(--cream);line-height:1.6;font-size:.94rem;margin-bottom:18px;white-space:pre-line;} .modal-books{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:8px;} .modal-books li a{display:flex;justify-content:space-between;gap:10px;background:var(--black);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:10px 14px;text-decoration:none;font-size:.86rem;transition:border-color .2s var(--ease);} .modal-books li a:hover{border-color:var(--gold);} .modal-books li .b-genre{color:var(--muted);font-size:.78rem;} .modal-socials{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;} .modal-socials a{border:1px solid var(--crimson);color:var(--crimson-light);border-radius:999px;padding:6px 14px;font-size:.78rem;font-weight:700;text-decoration:none;} .modal-socials a:hover{background:var(--crimson);color:var(--white);} .modal-note{color:var(--muted-2);font-size:.74rem;font-style:italic;white-space:pre-line;} .modal-buy{display:inline-block;background:var(--gold);color:var(--black);text-decoration:none;font-weight:800;font-size:.85rem;padding:10px 20px;border-radius:6px;margin-bottom:12px;transition:background .2s var(--ease);} .modal-buy:hover{background:var(--white);} .cta{background:var(--crimson);color:var(--white);text-align:center;padding:64px 32px;border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);} .cta .section-kicker{color:var(--gold);} .cta h2{font-family:var(--display);font-size:clamp(1.6rem,3.6vw,2.3rem);margin:0 0 14px;} .cta p{max-width:560px;margin:0 auto 26px;line-height:1.6;color:rgba(255,255,255,.85);} .cta div{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} .cta a{text-decoration:none;font-weight:700;padding:14px 26px;border-radius:4px;letter-spacing:.02em;transition:all .2s var(--ease);} .cta a:not(.secondary){background:var(--gold);color:var(--black);} .cta a:not(.secondary):hover{background:var(--white);} .cta a.secondary{border:2px solid var(--white);color:var(--white);background:transparent;} .cta a.secondary:hover{background:var(--white);color:var(--crimson);} .footer{background:var(--black);padding:48px 32px 32px;} .footer-logo{display:flex;align-items:center;gap:8px;font-family:var(--display);margin-bottom:8px;justify-content:center;} .footer-kc{color:var(--crimson);font-size:1.1rem;} .footer-logo span b{color:var(--white);margin-right:4px;} .footer-logo span b:last-child{color:var(--gold);} .footer p{text-align:center;color:var(--muted);font-size:.85rem;margin:0 0 8px;} .footer-links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding-top:20px;margin-top:16px;border-top:1px solid rgba(255,255,255,.08);} .footer-links a{color:var(--muted);text-decoration:none;font-size:.8rem;letter-spacing:.03em;} .footer-links a:hover{color:var(--gold);} .footer small{display:block;text-align:center;color:var(--muted-2);font-size:.72rem;margin-top:16px;} @media(max-width:720px){ .site-header{padding:12px 18px;} .controls-wrap{position:static;} .hero{padding:44px 18px 32px;} .genre-band,.intro,main#directory,.cta,.footer{padding-left:18px;padding-right:18px;} }