:root{--ink:#eef5f3;--muted:#aab9b7;--night:#061014;--deep:#091b20;--teal:#46d7d1;--teal2:#0a7d80;--gold:#c69a62;--violet:#8d5aa8;--line:rgba(166,218,215,.22);--serif:'EB Garamond',Georgia,serif;--display:'Cinzel',Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--serif);font-size:1.15rem;line-height:1.65;background-image:radial-gradient(circle at 80% 8%,rgba(26,108,112,.18),transparent 28rem),radial-gradient(circle at 10% 70%,rgba(84,37,103,.15),transparent 30rem)}
a{color:inherit}
.skip{position:fixed;left:1rem;top:-5rem;z-index:99;background:var(--ink);color:var(--night);padding:.7rem 1rem}
.skip:focus{top:1rem}
.site-header{height:5.25rem;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.25rem,5vw,5rem);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:rgba(6,16,20,.9);backdrop-filter:blur(16px)}
.wordmark{font-family:var(--display);font-size:1.05rem;text-decoration:none;letter-spacing:.18em}
.wordmark span{color:var(--teal)}
nav{display:flex;gap:2rem;font-family:var(--display);font-size:.72rem;letter-spacing:.08em}
nav a,footer>a{text-decoration:none;color:var(--muted);transition:color .2s}
nav a:hover,nav a:focus-visible,footer>a:hover{color:var(--teal)}
.menu-button{display:none;background:none;border:1px solid var(--line);color:var(--ink);padding:.55rem .75rem;font:600 .7rem var(--display);letter-spacing:.08em}
.hero{min-height:calc(100svh - 5.25rem);max-width:90rem;margin:auto;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;padding:clamp(4rem,8vw,8rem) clamp(1.25rem,7vw,7rem);overflow:hidden}
.eyebrow,.series{font:600 .7rem var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin:0 0 1rem}
.hero h1{font:500 clamp(2.8rem,6.3vw,6.8rem)/1.04 var(--display);letter-spacing:-.035em;margin:0;max-width:11ch}
.hero h1 em{font-family:var(--serif);font-weight:400;color:#c6e8e5}
.intro{max-width:34rem;font-size:clamp(1.25rem,2vw,1.6rem);color:var(--muted);margin:2rem 0}
.text-link{font-family:var(--display);font-size:.78rem;letter-spacing:.1em;text-decoration:none;border-bottom:1px solid var(--teal);padding-bottom:.4rem}
.hero-art{position:relative;aspect-ratio:1;display:grid;place-items:center;isolation:isolate}
.hero-art:before{content:'';position:absolute;width:72%;height:72%;border:1px solid rgba(128,220,214,.18);transform:rotate(45deg);z-index:-2}
.hero-art:after{content:'KC FLATT';position:absolute;top:10%;right:4%;font:500 clamp(.75rem,1vw,1rem) var(--display);letter-spacing:.32em;color:rgba(198,154,98,.72);z-index:2}
.hero-art img{width:min(100%,38rem);height:auto;display:block;filter:drop-shadow(0 2rem 4rem rgba(0,0,0,.6)) drop-shadow(0 0 2rem rgba(54,218,211,.16));z-index:1}
.crystal-halo{position:absolute;width:68%;height:68%;border-radius:50%;background:radial-gradient(circle,rgba(27,152,153,.19),rgba(65,21,78,.1) 42%,transparent 70%);filter:blur(12px);z-index:-1}
.books{max-width:78rem;margin:auto;padding:7rem clamp(1.25rem,4vw,4rem)}
.section-heading{text-align:center;margin-bottom:6rem}
.section-heading h2,.coming h2,.about h2{font:500 clamp(2.4rem,5vw,4.5rem)/1.08 var(--display);margin:.3rem 0}
.book{display:grid;grid-template-columns:minmax(16rem,25rem) 1fr;gap:clamp(3rem,8vw,8rem);align-items:center;margin:0 0 10rem}
.book:nth-of-type(3){grid-template-columns:1fr minmax(16rem,25rem)}
.book:nth-of-type(3) .cover-wrap{grid-column:2}
.book:nth-of-type(3) .book-copy{grid-row:1;grid-column:1}
.cover-wrap{position:relative}
.cover-wrap:before{content:'';position:absolute;inset:-1rem;border:1px solid var(--line);transform:translate(.8rem,.8rem);z-index:-1}
.cover-wrap img{width:100%;height:auto;display:block;box-shadow:0 2rem 5rem rgba(0,0,0,.55)}
.book-copy h3{font:500 clamp(2.2rem,5vw,4rem)/1.08 var(--display);margin:.2rem 0 1.5rem}
.book-copy .lead{font-size:1.55rem;font-style:italic;color:#d8e8e5}
.book-copy>p:not(.series):not(.ku){max-width:42rem}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.button{font:600 .72rem var(--display);letter-spacing:.08em;text-decoration:none;padding:.85rem 1.15rem;border:1px solid var(--teal);transition:.2s}
.button.primary{background:var(--teal);color:#031113}
.button:hover{transform:translateY(-2px);box-shadow:0 .6rem 1.5rem rgba(0,0,0,.25)}
.button.secondary{color:var(--ink)}
.ku{font-size:.92rem;color:var(--muted);margin-top:.8rem}
.book-fate .series{color:#d2a6e3}
.book-fate .button.primary{background:var(--gold);border-color:var(--gold)}
.book-fate .button.secondary{border-color:var(--gold)}
.coming{margin:0 auto 8rem;max-width:78rem;padding:clamp(3rem,7vw,6rem);border:1px solid var(--line);background:linear-gradient(115deg,rgba(12,52,58,.7),rgba(55,24,67,.45));display:flex;align-items:center;justify-content:space-between;overflow:hidden}
.coming p:not(.eyebrow){font-size:1.3rem;color:var(--muted)}
.roman{font:500 clamp(6rem,18vw,15rem)/.7 var(--display);color:transparent;-webkit-text-stroke:1px rgba(125,222,216,.2)}
.about{max-width:68rem;margin:auto;padding:5rem clamp(1.25rem,4vw,4rem) 9rem;display:grid;grid-template-columns:12rem 1fr;gap:4rem}
.about-crystals{align-self:start;position:relative;width:12rem;height:12rem;display:grid;place-items:center}
.about-crystals:before{content:'';position:absolute;inset:16%;border:1px solid rgba(70,215,209,.16);transform:rotate(45deg);z-index:-1}
.about-crystals img{width:100%;height:auto;display:block;filter:drop-shadow(0 1.25rem 2rem rgba(0,0,0,.55)) drop-shadow(0 0 1.25rem rgba(70,215,209,.12))}
.about h2{margin-bottom:2rem}
.about p{color:#c7d1cf}
footer{border-top:1px solid var(--line);max-width:100%;padding:3rem clamp(1.25rem,5vw,5rem);display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:2rem;color:var(--muted)}
footer p{margin:0}
footer small{grid-column:1/-1;font-size:.8rem;color:#6f8380}
@media(max-width:760px){.site-header{height:4.5rem}
.menu-button{display:block}
nav{display:none;position:absolute;top:4.5rem;left:0;right:0;background:#08171b;border-bottom:1px solid var(--line);padding:1.5rem;flex-direction:column;gap:1.2rem}
nav.open{display:flex}
.hero{min-height:auto;grid-template-columns:1fr;padding-top:5rem}
.hero-art{width:min(80vw,24rem);margin:2rem auto 0}
.book,.book:nth-of-type(3){grid-template-columns:1fr;gap:3rem;margin-bottom:7rem}
.book:nth-of-type(3) .cover-wrap,.book:nth-of-type(3) .book-copy{grid-column:1;grid-row:auto}
.book:nth-of-type(3) .cover-wrap{grid-row:1}
.cover-wrap{max-width:20rem;margin:auto}
.coming{margin-inline:1.25rem}
.roman{font-size:7rem}
.about{grid-template-columns:1fr}
.about-crystals{width:9rem;height:9rem}
.about{gap:2rem}
footer{grid-template-columns:1fr;align-items:start}
footer small{grid-column:1}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.button{transition:none}
}