/* KHAYAL KATAN — AVITAL | simple, static and responsive */
:root{
  --cream:#f5f0e6; --ink:#332a23; --brown:#806047;
  --line:#d6c8b3; --gold:#e8c58d; --night:#101522;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Candara,Calibri,"Segoe UI",Arial,sans-serif}
a{color:inherit}
a:focus-visible{outline:2px solid #9f6935;outline-offset:5px}
/* Cover-screen, with supplied landscape/square artwork left uncropped. */
body.landing{background:#101523;min-height:100vh;min-height:100dvh}
.landing-stage{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.4vh,24px);padding:clamp(14px,2.6vh,30px) 0;overflow:hidden}
.landing-stage picture{display:block;width:100%;flex:0 1 auto}
/* Allow space BELOW the illustration for the language buttons, so the title stays uncovered. */
.landing-art{display:block;width:100%;height:auto;max-height:calc(100vh - 145px);max-height:calc(100dvh - 145px);object-fit:contain;object-position:center}
.language-choice{position:static;transform:none;flex-shrink:0;display:flex;gap:clamp(12px,2.5vw,24px);justify-content:center;z-index:1;width:max-content;max-width:96vw}
.language-choice a{min-width:clamp(144px,16vw,220px);min-height:48px;padding:13px 25px;border:1.5px solid rgba(249,210,151,.85);background:rgba(12,15,23,.78);color:#fae2b3;font-family:Georgia,"Times New Roman",serif;font-weight:normal;font-size:clamp(1rem,1.5vw,1.35rem);line-height:1.15;letter-spacing:.13em;text-align:center;text-decoration:none;box-shadow:0 0 18px rgba(218,146,51,.12), inset 0 0 0 1px rgba(248,215,167,.08);text-shadow:0 1px 7px #080b10;transition:background .2s,border-color .2s,transform .2s}
.language-choice a:hover{background:rgba(46,29,21,.94);border-color:#f8dba6;transform:translateY(-2px)}
/* Narrow reading-page navigation strip, ABOVE artwork, not between art and text. */
.topbar{min-height:47px;background:var(--cream);display:flex;align-items:center;justify-content:flex-end;padding:8px clamp(18px,4vw,66px);gap:clamp(19px,3vw,34px);font-size:clamp(.93rem,1vw,1.04rem);line-height:1.2}
.topbar a{text-decoration:none;color:#785b43}
.topbar a:hover{text-decoration:underline;text-underline-offset:5px}
.hero-art{display:block;width:100%;height:auto;border:0;margin:0 auto clamp(28px,4.5vw,45px)}
.chapter-without-art .reading-main{padding-top:clamp(45px,8vh,90px)}
.reading-main{max-width:780px;margin:0 auto;padding:clamp(32px,5vw,58px) clamp(22px,5vw,46px) 80px}
h1{font-size:clamp(1.55rem,3vw,2.15rem);font-weight:500;text-align:center;line-height:1.25;letter-spacing:.07em;margin:0 0 38px}
h1 .chapter-number{display:block;font-size:.67em;letter-spacing:.13em;margin-bottom:12px;font-weight:400}
.prose{font-size:clamp(1.13rem,1.06rem + .35vw,1.3rem);line-height:1.65;letter-spacing:.005em;overflow-wrap:break-word}
.prose p{margin:0 0 1.1em;text-align:left}
.scene-break{text-align:center;margin:1.3em 0;color:#9b866e;font-size:.92em}
.next-wrap{margin-top:48px;border-top:1px solid var(--line);padding-top:23px;display:flex;justify-content:flex-end}
.next-wrap a{font-size:1.1rem;color:#705038;text-decoration:none;padding:9px 0}
.next-wrap a:hover{text-decoration:underline;text-underline-offset:5px}
/* The portrait is a part of the short preface's book-like composition. */
.preface-main{max-width:1040px;min-height:calc(100dvh - 47px);margin:auto;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,5vw,70px) clamp(20px,5vw,65px)}
.preface-main h1{margin-bottom:22px;font-size:clamp(2rem,3.8vw,2.8rem)}
.preface-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(18px,4vw,54px);align-items:center}
.preface-portrait{width:100%;display:block;mix-blend-mode:multiply}
.preface-quote{font-style:italic;font-size:clamp(1.15rem,1.35vw,1.45rem);line-height:1.65;max-width:460px}
.preface-author{font-style:normal;text-align:right;font-size:1.07rem;margin-top:24px}
.preface-main .next-wrap{width:100%;margin-top:24px;border-top:0;padding-top:0}
.buy-area{text-align:center;border-top:1px solid var(--line);margin:2.5rem auto 0;padding:2rem 0 1rem}
.buy-button{display:inline-block;border:1.5px solid #9f774e;padding:14px 30px;min-width:220px;color:#69462d;text-decoration:none;letter-spacing:.07em;font-size:1.12rem;background:#f9f3e8;transition:background .15s}
.buy-button:hover{background:#efe3d0}
.coming-soon{display:inline-block;border:1px solid #ccbca5;padding:14px 36px;color:#846a53;letter-spacing:.1em;font-size:1.15rem}
@media(max-width:640px){
 .landing-stage{justify-content:center;padding:18px 0 22px;gap:18px;min-height:100dvh}
 .landing-art{height:auto;width:100%;max-height:min(70dvh,640px);object-fit:contain}
 .language-choice{display:flex;width:100%;gap:12px;justify-content:center;padding:0 14px}
 .language-choice a{min-width:0;flex:1;max-width:190px;padding:13px 10px;font-size:1.04rem}
 .topbar{padding-left:16px;padding-right:17px;gap:22px;min-height:44px}
 .reading-main{padding-top:34px;padding-left:22px;padding-right:22px}
 .preface-layout{grid-template-columns:1fr;gap:5px}
 .preface-main{min-height:calc(100dvh - 44px);padding:30px 22px 45px}
 .preface-portrait{width:min(76%,340px);margin:0 auto;max-height:42vh;object-fit:contain}
 .preface-quote{margin:0 auto}
 h1{margin-bottom:25px}
}
@media(max-width:390px){.topbar{gap:15px;font-size:.9rem}.reading-main{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.language-choice a{transition:none}}