*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0c1524;color:#e5e8ed;font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}img,video{max-width:100%}h1,h2,p{margin-top:0}h1,h2,.foot-brand{font-family:'Playfair Display',Georgia,serif;font-weight:400}em{font-weight:400;color:#c3b0db}p{line-height:1.8}.site-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:3rem;padding:23px clamp(24px,5vw,90px);border-bottom:1px solid #ffffff1b;background:#0a1423}.brand{font-family:'Playfair Display',serif;font-size:25px;letter-spacing:.09em;white-space:nowrap}.brand span{color:#c3b0db}.brand small{display:block;font:600 9px 'DM Sans',sans-serif;letter-spacing:.48em;color:#aab5ca;text-align:center}.site-header nav{display:flex;gap:clamp(16px,3vw,50px);font-size:12px;text-transform:uppercase;letter-spacing:.12em}.site-header nav a:hover,.footer a:hover{color:#c3b0db}.social{display:flex;gap:9px}.social a{border:1px solid #ffffff38;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-size:9px;letter-spacing:.05em}.hero{min-height:700px;display:grid;grid-template-columns:1.05fr .95fr;position:relative;overflow:hidden;padding:clamp(60px,8vw,130px) clamp(25px,9vw,165px);align-items:center;background:radial-gradient(circle at 75% 40%,#25334d 0%,transparent 38%),linear-gradient(130deg,#0b1729,#131d32 65%,#0c1425)}.hero:before{content:'';position:absolute;inset:0;opacity:.22;background-image:radial-gradient(#fff 0.65px,transparent 1px);background-size:29px 29px;mask-image:linear-gradient(to right,transparent,#000)}.hero-copy,.hero-book{position:relative;z-index:1}.eyebrow,.small-title{font-size:11px;letter-spacing:.28em;color:#c9b6dd;font-weight:700}.line{display:inline-block;width:30px;height:1px;background:#c9b6dd;vertical-align:middle;margin-right:13px}.hero h1{font-size:clamp(70px,9vw,150px);line-height:1.08;margin:25px 0}.hero h1 em{display:block}.hero-lead{max-width:530px;color:#bfc9d7;font-size:clamp(16px,1.5vw,21px)}.hero-actions,.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;justify-content:center;align-items:center;text-align:center;min-height:48px;padding:15px 27px;font:600 11px 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:transform .2s;border-radius:2px}.btn:hover{transform:translateY(-2px)}.btn-primary{background:#d6dce7;color:#12223a;border:1px solid #d6dce7}.btn-outline{background:transparent;color:#dce4ec;border:1px solid #74849d}.hero-detail{margin-top:75px;font-size:11px;letter-spacing:.12em;color:#8e9eb5;text-transform:uppercase}.hero-detail span{margin:0 13px;color:#bda4ce}.hero-book{text-align:center;display:grid;place-items:center;isolation:isolate}.hero-book .orb{position:absolute;width:min(85%,510px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#8795a741 0%,#5e739e14 55%,transparent 72%);filter:blur(18px);z-index:-1}.hero-book img{width:min(100%,420px);height:min(60vw,570px);object-fit:contain;filter:drop-shadow(15px 25px 27px #0008)}.book-caption{display:block;font-size:10px;letter-spacing:.25em;color:#99a7b9}.statement{padding:100px 24px;text-align:center;background:#eee9e3;color:#18283e}.statement .small-title{color:#68597b}.statement p{font-family:'Playfair Display',serif;font-size:clamp(24px,3vw,44px);line-height:1.4;max-width:950px;margin:30px auto}.ornament{font-size:25px;color:#8c7da1}.book-feature{display:grid;grid-template-columns:1fr 1fr;min-height:620px;background:#142139}.book-feature-aside{padding:clamp(60px,8vw,120px) clamp(25px,9vw,160px);align-self:center}.book-feature h2,.journey h2,.mews-banner h2,.society h2{font-size:clamp(42px,5vw,77px);line-height:1.15;margin:25px 0}.book-feature p,.mews-banner p{color:#b9c4d2;max-width:540px}.book-feature-art{display:grid;place-items:center;background:linear-gradient(130deg,#25314b,#15213a 60%,#152339);padding:50px}.book-feature-art img{max-height:540px;width:100%;object-fit:contain;filter:drop-shadow(14px 30px 30px #0008)}.release{color:#c0add5;font-size:11px;font-weight:700;letter-spacing:.2em;margin-top:25px}.fine{font-size:11px!important;margin-top:20px}.journey{display:grid;grid-template-columns: .8fr 1.2fr;gap:clamp(45px,9vw,170px);padding:clamp(70px,9vw,140px) clamp(25px,9vw,165px);background:#f2eee8;color:#1d2b40}.journey-intro{position:sticky;top:25px;align-self:start}.journey .small-title{color:#7c658f}.journey-intro p{color:#576170}.journey-prose p{font-size:15px;color:#465363;line-height:2;margin-bottom:25px}.rule{width:65px;height:1px;background:#a38fb6;margin:30px 0}.text-link{display:inline-block;color:#67547e;font-size:13px;font-weight:700;border-bottom:1px solid #67547e;padding:10px 0}.mews-banner{padding:100px clamp(25px,9vw,165px);display:grid;gap:80px;grid-template-columns:1fr 1fr;align-items:center;background:#101c30}.mews-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.mews-mini img{width:100%;height:225px;object-fit:cover;border-radius:2px;filter:saturate(.75)}.society{text-align:center;padding:115px 25px;background:radial-gradient(ellipse at 50% 0,#354161 0%,#111b2e 60%)}.society p{color:#bdc9d8;max-width:600px;margin:0 auto 25px}.footer{background:#080f1b;text-align:center;padding:60px 24px 40px;color:#98a7bb}.foot-brand{font-size:34px;color:#e7e6ec}.footer p{font-size:13px}.footer div{display:flex;flex-wrap:wrap;justify-content:center;gap:25px;margin:26px 0;font-size:12px}.footer small{font-size:11px}.mews-hero{text-align:center;padding:115px 30px 100px;background:radial-gradient(circle at center top,#27354f,#0c1524 70%)}.mews-hero h1{font-size:clamp(70px,10vw,130px);margin:15px 0}.mews-hero p{color:#bfc9d7;font-size:18px}.mews-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;background:#2b3443}.mew-card{display:grid;background:#142137}.mew-media{background:#070e18}.mew-media video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain}.mew-copy{padding:45px clamp(24px,4vw,80px) 60px}.mew-copy h2{font-size:55px;margin:14px 0}.mew-copy p{color:#bdc8d5;max-width:720px}.mews-ending{text-align:center;padding:100px 25px;background:#eee9e3;color:#1c2c42}.mews-ending h2{font-size:clamp(36px,5vw,60px)}.mews-ending p{max-width:650px;margin:0 auto 30px}.mews-ending .btn-primary{background:#1d2a43;color:#fff}
@media(max-width:900px){.site-header{flex-wrap:wrap;justify-content:center;gap:18px;padding:23px}.site-header nav{order:3;width:100%;justify-content:center;flex-wrap:wrap}.hero{padding:75px 35px;min-height:640px}.hero h1{font-size:clamp(58px,8vw,95px)}.hero-book img{height:420px}.journey{gap:45px}.book-feature-aside{padding:50px 30px}.mews-banner{padding:65px 30px;gap:40px}.mews-mini img{height:160px}}
@media(max-width:650px){.site-header nav{gap:12px 19px;font-size:10px}.hero{grid-template-columns:1fr;min-height:0;padding:65px 24px 50px;text-align:center}.hero h1{font-size:74px;margin:18px 0}.hero h1 em{display:inline}.hero-lead{font-size:16px}.hero-actions{justify-content:center}.hero-detail{margin-top:30px}.hero-book{margin-top:22px}.hero-book img{width:min(88%,330px);height:370px}.book-caption{font-size:9px}.statement{padding:65px 20px}.book-feature,.journey,.mews-banner,.mews-grid{grid-template-columns:1fr}.book-feature-art{min-height:390px;padding:25px}.book-feature-art img{max-height:380px}.journey{padding:65px 24px}.journey-intro{position:static}.mews-banner{padding:65px 25px}.mews-mini img{height:140px}.society{padding:75px 24px}.mews-hero{padding:75px 20px}.mews-hero h1{font-size:70px}.mew-copy{padding:30px 23px 50px}.mew-copy h2{font-size:44px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
/* Writer's desk — first design draft. Text and buttons remain accessible HTML. */
.hero{min-height:min(830px,90svh);grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);padding:clamp(65px,7vw,120px) clamp(30px,8.5vw,145px);background:#211b1a url('writers-desk-atmosphere.webp') center center/cover no-repeat;isolation:isolate}
.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,18,29,.98) 0%,rgba(13,20,31,.95) 33%,rgba(12,18,28,.81) 48%,rgba(12,18,28,.20) 78%,rgba(12,18,28,.12) 100%);opacity:1;mask-image:none;z-index:-1}
.hero .desk-wash{position:absolute;inset:auto 0 0;height:24%;background:linear-gradient(to top,rgba(6,10,17,.55),transparent);z-index:-1;pointer-events:none}
.hero-copy{max-width:650px}
.hero h1{font-size:clamp(76px,8.5vw,143px);line-height:1.05;text-shadow:0 3px 22px rgba(0,0,0,.35)}
.hero h1 em{color:#e8d9bd}
.hero .eyebrow,.hero .hero-detail{color:#e4d5b9}
.hero .line{background:#d7b88f}
.hero-lead{color:#e6e4df;max-width:540px}
.hero-book img{width:min(100%,510px);height:min(66vw,655px);object-fit:contain;filter:drop-shadow(15px 20px 17px rgba(0,0,0,.7))}
.hero-book{transform:translateX(-1.5%)}
.book-caption{color:#eadac6;text-shadow:0 1px 5px #000}
.hero-actions .btn-primary{background:#e5d8c6;border-color:#e5d8c6}
@media(max-width:900px){.hero{min-height:640px;padding:65px 34px;background-position:60% center}.hero h1{font-size:clamp(60px,9vw,100px)}.hero-book img{height:500px}}
@media(max-width:650px){.hero{grid-template-columns:1fr;min-height:0;text-align:center;padding:65px 22px 35px;background-position:65% center}.hero:before{background:linear-gradient(180deg,rgba(10,16,27,.95) 0%,rgba(10,16,27,.90) 47%,rgba(9,15,25,.62) 76%,rgba(9,15,25,.76) 100%)}.hero h1{font-size:clamp(64px,16vw,86px)}.hero-book{margin-top:24px;transform:none}.hero-book img{width:min(82vw,350px);height:auto;max-height:490px}.hero-detail{margin-top:25px}.hero .eyebrow{letter-spacing:.18em}}

/* Review refinement: reveal the walnut writing surface and quieten the ornament. */
.hero{background-position:center center;}
.hero:before{background:linear-gradient(90deg,rgba(9,15,25,.88) 0%,rgba(11,17,26,.77) 29%,rgba(11,17,26,.53) 47%,rgba(12,18,28,.10) 78%,rgba(12,18,28,.08) 100%);}
.hero .desk-wash{height:15%;background:linear-gradient(to top,rgba(6,10,17,.12),transparent);}
.hero-book img{filter:drop-shadow(11px 19px 15px rgba(0,0,0,.53));}
@media(max-width:650px){.hero:before{background:linear-gradient(180deg,rgba(10,16,27,.87) 0%,rgba(10,16,27,.82) 45%,rgba(9,15,25,.48) 77%,rgba(9,15,25,.30) 100%);}}

/* Final desk composition: warm writing surface visible, readable typography, single genuine book render. */
.hero:before{background:linear-gradient(90deg,rgba(9,15,25,.78) 0%,rgba(9,15,25,.69) 26%,rgba(9,15,25,.36) 48%,rgba(9,15,25,.04) 78%,rgba(9,15,25,.02) 100%)}
.hero .desk-wash{height:0;background:none}
.hero-book img{filter:drop-shadow(11px 22px 11px rgba(0,0,0,.65))}
@media(max-width:650px){.hero:before{background:linear-gradient(180deg,rgba(9,15,25,.76),rgba(9,15,25,.57) 40%,rgba(9,15,25,.07) 100%)}}

/* Clean wood desk background: no ghosted cover, single real 3D book */
.hero{background:#101b28 url('writers-desk-atmosphere.webp') center bottom/cover no-repeat!important;min-height:755px!important}
.hero:before{background:linear-gradient(90deg,rgba(9,15,25,.38),rgba(9,15,25,.10) 43%,transparent 78%)!important}
.hero .desk-wash{display:none!important}
.hero-book{transform:translateY(52px)!important}
.hero-book img{max-height:565px!important;filter:drop-shadow(11px 20px 14px rgba(0,0,0,.63))!important}
@media(max-width:900px){.hero{min-height:630px!important}.hero-book{transform:none!important}}
@media(max-width:650px){.hero{min-height:0!important}.hero:before{background:linear-gradient(180deg,rgba(9,15,25,.68),rgba(9,15,25,.30) 60%,transparent)!important}}


/* Clean, single-image desktop hero; mobile keeps semantic live text/book */
@media(min-width:901px){
 .hero{display:block!important;min-height:0!important;padding:0!important;background:#101b28!important;aspect-ratio:1774/716;isolation:isolate}
 .hero::before,.hero .desk-wash{display:none!important}
 .hero>.hero-copy,.hero>.hero-book{display:none!important}
 .desk-scene-desktop{display:block;position:relative;width:100%;height:100%}
 .desk-scene-desktop>img{display:block;width:100%;height:100%;object-fit:fill}
 .desk-hotspot{position:absolute;z-index:4;display:block;top:66.5%;height:8%;outline-offset:2px;border-radius:3px}
 .desk-hotspot:focus-visible{outline:3px solid #f3dcad;background:#ffffff19}
 .desk-hotspot-sky{left:2.8%;width:13.2%;top:68.9%;height:8.2%}
 .desk-hotspot-mews{left:16.9%;width:17.3%;top:68.9%;height:8.2%}
}
@media(max-width:900px){
 .desk-scene-desktop{display:none}
 .hero{background:#111c2a linear-gradient(125deg,#101d2b,#202a33)!important}
 .hero::before{display:none!important}
 .hero>.hero-copy,.hero>.hero-book{display:block!important}
 .hero-book img{max-height:410px!important;object-fit:contain}
}

/* Sky Pelin review: improve story reading size and keep cat pictures intact */
.journey-prose p{font-size:clamp(17px,1.25vw,20px)!important;line-height:1.85!important}
.mews-mini img{width:100%;height:225px;object-fit:contain!important;background:#0b1423;border-radius:4px}
.about-sky{background:#17243a;color:#e8e9ed;padding:clamp(65px,7vw,115px) clamp(24px,8vw,140px)}
.author-inner{max-width:1450px;margin:auto;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,.6fr);gap:clamp(32px,6vw,95px);align-items:center}
.about-sky h2{font:400 clamp(38px,4.5vw,68px)/1.15 'Playfair Display',Georgia,serif;margin:20px 0 30px}
.about-sky p{font-size:clamp(16px,1.18vw,19px);line-height:1.85;color:#d5dce8}
.portrait-placeholder{min-height:350px;border:1px dashed #8c99aa55;border-radius:18px;display:grid;place-items:center;padding:20px;text-align:center;color:#a6b3c5;font-size:13px;background:#ffffff04}
@media(max-width:900px){.author-inner{grid-template-columns:1fr}.portrait-placeholder{min-height:180px}}
@media(max-width:650px){.mews-mini img{height:170px}}

/* Final editorial clean-up */
.about-sky .author-inner{display:block;max-width:1040px;margin:0 auto}
.about-sky .author-copy{max-width:100%}
.mews-banner{align-items:center}
.mews-mini{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px!important;max-width:630px}
.mews-portrait{display:flex;flex-direction:column;padding:12px;background:rgba(255,255,255,.045);border:1px solid rgba(209,185,139,.30);border-radius:13px;text-align:center;transition:transform .2s,border-color .2s;min-width:0}
.mews-portrait:hover{transform:translateY(-3px);border-color:#dfc59f}
.mews-portrait img{width:100%;height:clamp(130px,12vw,202px)!important;object-fit:contain!important;background:#0b1423;border-radius:9px}
.mews-portrait strong{font-family:'Playfair Display',Georgia,serif;font-size:20px;color:#f1e4d2;margin-top:11px}
.mews-portrait span{font-size:12px;color:#bcc5d4;margin-top:4px}
.social a svg{display:block}
@media(max-width:650px){.mews-mini{gap:9px!important}.mews-portrait{padding:7px}.mews-portrait img{height:138px!important}.mews-portrait strong{font-size:16px}.mews-portrait span{font-size:10px}}

/* 2026-11-01 polish: full proportions, fixed header and consistently aligned video frames */
.site-header{position:sticky!important;top:0;z-index:1000;background:rgba(8,18,33,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(min-width:901px){
 .hero{aspect-ratio:1774/770!important;min-height:0!important;overflow:hidden;background:#211a18!important}
 .desk-scene-desktop{height:100%!important;overflow:hidden;background:#2c201b}
 .desk-scene-desktop>img{height:auto!important;width:100%!important;object-fit:contain!important;object-position:center top!important}
 .desk-hotspot{top:65%!important}
 .desk-hotspot-sky{left:18.4%!important;width:10%!important}
 .desk-hotspot-mews{left:29.2%!important;width:13.7%!important}
}
.mews-grid{align-items:stretch}
.mew-card{grid-template-rows:auto 1fr}
.mew-media{height:clamp(330px,33vw,550px);display:flex;align-items:center;justify-content:center;background:#090f19}
.mew-media video{display:block!important;width:100%!important;height:100%!important;max-height:100%;aspect-ratio:auto!important;object-fit:contain!important}
.mew-copy{height:100%;border-top:1px solid rgba(212,188,145,.2)}
@media(max-width:650px){.mew-media{height:min(112vw,470px)}.site-header{top:0}}


/* Final readable typography refinements throughout both pages */
.small-title,.eyebrow{font-size:clamp(14px,1.05vw,17px)!important;letter-spacing:.18em!important;line-height:1.55}
.brand small{font-size:12px!important;letter-spacing:.29em!important}
.site-header nav{font-size:clamp(13px,.95vw,16px)!important}
.btn{font-size:clamp(13px,.9vw,16px)!important;letter-spacing:.065em!important;line-height:1.35}
.hero-detail,.release{font-size:clamp(14px,1.03vw,17px)!important;line-height:1.6;letter-spacing:.12em}
.book-caption,.fine,.book-feature .fine{font-size:clamp(14px,.94vw,16px)!important;line-height:1.6!important}
.book-feature p{font-size:clamp(18px,1.28vw,22px)!important;line-height:1.7}
.mews-banner p,.mews-hero p,.mews-ending p{font-size:clamp(17px,1.2vw,21px)!important}
.mews-portrait span{font-size:clamp(13px,.94vw,16px)!important}
.footer p,.footer small,.footer div{font-size:clamp(13px,.93vw,16px)!important}
.book-feature-art{background:#111c30 url('book-on-walnut-desk.webp') center center/cover no-repeat!important;min-height:620px;padding:0!important;position:relative;overflow:hidden}
.book-feature-art img{display:none!important}
@media(max-width:900px){.book-feature-art{min-height:550px}}
@media(max-width:650px){.book-feature-art{min-height:470px;background-size:contain!important;background-color:#111b2c!important}.site-header nav{font-size:13px!important}.mews-portrait span{font-size:13px!important}}

/* Final three visual corrections */
/* The full photographic book must fit inside its panel, never be cropped by cover. */
.book-feature-art{background-size:auto 92%!important;background-position:center center!important;background-repeat:no-repeat!important;background-color:#111b2e!important;min-height:640px!important}
.book-feature-art img{display:none!important}
/* The small invitation link should match the other readable controls. */
.journey .text-link{font-size:clamp(17px,1.1vw,20px)!important;line-height:1.55!important;font-weight:700!important}
@media(max-width:900px){.book-feature-art{background-size:auto 90%!important;min-height:520px!important}}
@media(max-width:650px){.book-feature-art{background-size:auto 94%!important;min-height:490px!important}}

/* Sky Pelin: Galaxy Z Fold unfolded hero only (651–900 CSS px).
   Keep the folded-phone rules and approved desktop layout unchanged. */
@media screen and (min-width:651px) and (max-width:900px) {
  .hero {
    display:block!important;
    padding:0!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1774 / 716!important;
    background:#101b28!important;
    overflow:hidden!important;
  }
  .hero::before,
  .hero .desk-wash { display:none!important; }
  .hero .desk-scene-desktop {
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }
  .hero .desk-scene-desktop > img {
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:fill!important;
  }
  .hero > .hero-copy,
  .hero > .hero-book {display:none!important;}
  .hero .desk-hotspot {position:absolute!important;display:block!important;z-index:4!important;top:68.9%!important;height:8.2%!important;outline-offset:2px;border-radius:3px;}
  .hero .desk-hotspot-sky {left:18.4%!important;width:10%!important;}
  .hero .desk-hotspot-mews {left:29.2%!important;width:13.7%!important;}
  .hero .desk-hotspot:focus-visible {outline:3px solid #f3dcad;background:#ffffff19;}
}