/* Chołodeccy Family Book · 2026 · same 16:9 geometry on all three pages */
:root{--olive:#999966;--ink:#302817;--gold:#91713c;--paper:#f0dab0;--book-width:1600;--book-height:900}
*{box-sizing:border-box}
html{min-height:100%;background:#999966}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 20%,#b2b17f 0%,#999966 58%,#808354 100%);font-family:Georgia,'Times New Roman',serif;color:#302817}
.site-wrap{max-width:1690px;margin:0 auto;padding:clamp(10px,2.4vw,34px) clamp(8px,1.6vw,24px) 34px}
.book{width:min(100%,1600px);aspect-ratio:16 / 9;position:relative;margin:0 auto;isolation:isolate;filter:drop-shadow(0 21px 15px rgba(30,31,13,.32));overflow:hidden;border-radius:6px}
.book img,.book-image{display:block;width:100%;height:100%;object-fit:fill}
.cover{display:block;text-decoration:none;color:inherit;transition:transform .3s ease,filter .3s ease;outline-offset:4px}
.cover-quote{position:absolute;bottom:11.6%;left:17%;right:7.6%;margin:0;text-align:center;color:#ead5a0;text-shadow:0 2px 3px rgba(0,0,0,.75);font:italic clamp(10px,1.28vw,20px)/1.3 Georgia,serif;pointer-events:none}
.cover-quote small{display:block;margin-top:.28em;font:normal .76em/1.2 Georgia,serif;color:#ddc385;transform:translateX(70px)}
.cover:hover{transform:translateY(-3px);filter:brightness(1.05)}
.cover:focus-visible,.turn:focus-visible,.chapter-link:focus-visible,.folio-control:focus-visible{outline:3px solid #e7c579;outline-offset:3px}
.cover-caption,.after-book{text-align:center;font:700 clamp(10px,.85vw,13px)/1.5 Arial,Helvetica,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#424529;margin:16px 0 0}
.after-book a{color:inherit}
.book-page{position:absolute;inset:0;background-image:url('/family-book/interior-16x9.webp');background-position:center;background-size:100% 100%;overflow:hidden}
.page-stage{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;color:#302918;}
.page-pane[hidden]{display:none !important}
.page-pane{position:absolute;inset:0}
.frame-title{text-align:center;position:absolute;left:310px;right:190px;top:112px;font-size:16px;letter-spacing:4px;text-transform:uppercase;font-weight:bold}
.name-title{font-size:91px;letter-spacing:-3px;line-height:1.04;margin:10px 0 0;font-weight:400;text-transform:none}
.name-subtitle{font-size:31px;font-style:italic;line-height:1.2;margin:8px 0 0;text-transform:none;letter-spacing:0}
.title-flourish{font-size:22px;color:#806637;line-height:1;margin:16px 0 0}
.title-grid{position:absolute;left:306px;top:402px;width:1110px;height:275px;display:grid;grid-template-columns:1fr 275px 1fr;align-items:center;gap:38px;text-align:left}
.title-grid p{font-size:25px;line-height:1.45;margin:0;max-width:330px}
.title-grid .title-en{justify-self:end}
.engraved-crest{width:275px;height:275px;object-fit:contain;filter:sepia(.2) saturate(.73) contrast(.95);mix-blend-mode:multiply}
.title-quote{position:absolute;bottom:145px;left:275px;right:220px;margin:0;text-align:center;font:italic 24px/1.24 Georgia,serif;color:#503f26;opacity:.98}
.title-quote cite{display:block;margin-top:8px;font:normal 17px/1.3 Georgia,serif;color:#69522e;transform:translateX(70px)}
.turn{appearance:none;display:grid;place-items:center;border:1px solid rgba(105,78,32,.33);background:#e8c991;color:#503916;border-radius:50%;font:36px/1 Georgia,serif;cursor:pointer;position:absolute;bottom:135px;width:54px;height:54px;box-shadow:0 2px 7px #644b2540;transition:transform .14s,background .14s}
.turn:hover{background:#efd7ad;transform:translateX(3px)}
.next{right:172px}
.previous{left:140px;bottom:370px}
.previous:hover{transform:translateX(-3px)}
.page-dots{position:absolute;bottom:68px;left:280px;right:165px;display:flex;justify-content:center;gap:11px}
.page-dots button{appearance:none;border:1px solid #6c5730;background:#f4e2bb;border-radius:50%;width:11px;height:11px;cursor:pointer;padding:0}
.page-dots button[aria-current="page"]{background:#493a1d}
/* The contents are real HTML links with stable layout and no rasterized text. */
.contents-head{position:absolute;top:108px;left:305px;right:178px;text-align:center}
.contents-head .eyebrow{font:bold 14px/1.3 Georgia,serif;letter-spacing:3px;text-transform:uppercase}
.contents-head h1{font:400 52px/1.08 Georgia,serif;margin:13px 0 2px}
.contents-head .en{font:italic 22px/1.3 Georgia,serif;margin:0}
.contents-head .rule{width:145px;border-top:1px solid #917746;margin:15px auto 0}
.contents-columns{position:absolute;left:255px;right:155px;top:294px;display:grid;grid-template-columns:1.16fr .96fr;gap:56px}
.contents-columns section{min-width:0}
.category{font:bold 13px/1.3 Georgia,serif;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid rgba(117,91,46,.52);padding:0 0 8px;margin:13px 0 9px}
.chapter-link{display:grid;grid-template-columns:34px minmax(0,1fr) 20px;align-items:start;gap:11px;padding:7px 2px 7px 3px;color:#2f2718;text-decoration:none;border-radius:3px}
.chapter-link:hover{background:rgba(131,102,49,.095)}
.chapter-n{font:italic 21px/1.2 Georgia,serif;color:#8c7041}
.chapter-title{font:400 21px/1.17 Georgia,serif;display:block}
.chapter-description{font:italic 14px/1.3 Georgia,serif;color:#655844;display:block;margin-top:2px}
.chapter-arrow{font:21px/1.2 Georgia,serif;color:#8c7041;text-align:right}
.contents-ornament{text-align:center;font-size:31px;margin:45px 0 0;color:#917641}
.contents-foot{position:absolute;bottom:143px;left:280px;right:177px;display:flex;align-items:center;justify-content:space-between;gap:20px;font:italic 15px Georgia,serif}
.contents-foot a{color:#4b3d22;text-underline-offset:3px}
/* Controls outside the painted book are deliberately subtle. */
.tools{display:flex;justify-content:space-between;gap:10px;align-items:center;max-width:1600px;margin:13px auto 0;font:700 12px Arial,Helvetica,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.tools a,.tools button{background:none;border:0;padding:6px;color:#3a402a;font:inherit;cursor:pointer;text-underline-offset:3px}
.tools a:hover,.tools button:hover{text-decoration:underline}
.tools .hint{font-weight:400;text-transform:none;letter-spacing:0;opacity:.85;text-align:center}
@media(max-width:700px){.site-wrap{padding:12px 8px 30px}.tools{font-size:11px;flex-wrap:wrap}.tools .hint{order:3;flex-basis:100%;text-align:center}.cover-caption{margin-top:10px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.cover,.turn{transition:none}}
@media print{body{background:#fff}.book{filter:none}.tools{display:none}}

/* Mobile edition. Desktop book above is deliberately unchanged. */
.mobile-book{display:none}
@media(max-width:700px){
 .book.cover,.site-wrap>.book:not(.mobile-book){display:none}
 .cover-caption{display:none}
 .mobile-book{display:block;position:relative;aspect-ratio:3 / 5;max-width:460px;width:100%;margin:4px auto 0;background-repeat:no-repeat;background-position:center;background-size:100% 100%;filter:drop-shadow(0 10px 11px rgba(26,27,11,.3));color:#32291a;overflow:hidden;border-radius:4px}
 .mobile-cover{background-image:url('/family-book/mobile-cover-3x5.webp');text-decoration:none;color:#e8d5a1;outline-offset:3px}
 .mobile-cover-inner{position:absolute;inset:7% 6% 6% 21%;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:space-around;gap:0}
 .mobile-eyebrow{font:bold clamp(10px,2.6vw,12px)/1.45 Georgia,serif;letter-spacing:.13em;text-transform:uppercase;margin:0;text-align:center}
 .mobile-cover h1{font:400 clamp(36px,10vw,57px)/1.07 Georgia,serif;letter-spacing:-.04em;margin:0;overflow-wrap:anywhere}
 .mobile-subtitle{font:italic clamp(14px,3.7vw,19px)/1.3 Georgia,serif;text-align:center;margin:0}
 .mobile-divider{display:block;font-size:22px;color:#ab8d58;text-align:center;margin:0}
 .mobile-cover-crest{display:block;object-fit:contain;width:min(47%,160px);height:auto;max-height:25%;filter:sepia(.2) saturate(.8) contrast(1.05);mix-blend-mode:normal}
 .mobile-welcome{font:400 clamp(14px,3.7vw,18px)/1.32 Georgia,serif;margin:0;text-align:center}
 .mobile-welcome.en{font-size:clamp(13px,3.4vw,16px);font-style:italic}
 .mobile-cover-quote{font:italic clamp(12px,3.2vw,15px)/1.23 Georgia,serif;letter-spacing:0;text-transform:none;margin:0;color:#ebdaa9;text-align:center;transform:translateY(-7px)}
 .mobile-cover-quote small{display:block;margin-top:5px;font:normal .81em/1.2 Georgia,serif;color:#d3bd86;transform:translateX(10px)}
 .mobile-open-prompt{font:700 clamp(11px,2.8vw,13px)/1.3 Georgia,serif;letter-spacing:.035em;color:#e9ce8f}
 .mobile-open-prompt span{font-size:22px;vertical-align:middle}
 .mobile-pages{background-image:url('/family-book/mobile-interior-3x5.webp')}
 .mobile-leaf{position:absolute;inset:0}
 .mobile-leaf[hidden]{display:none !important}
 .mobile-leaf-inner{position:absolute;inset:6% 6% 13% 19%;display:flex;flex-direction:column;align-items:center;gap:.75%;overflow:hidden}
 .mobile-leaf-title h1{font:400 clamp(36px,10vw,57px)/1.1 Georgia,serif;letter-spacing:-.045em;margin:2% 0 0;overflow-wrap:anywhere;text-align:center}
 .mobile-leaf-title .mobile-subtitle{margin-top:0;font-size:clamp(13px,3.4vw,18px)}
 .mobile-title-crest{display:block;object-fit:contain;width:auto;max-width:67%;height:25%;flex-shrink:1;filter:sepia(.23) saturate(.76);mix-blend-mode:multiply}
 .mobile-intro{font:400 clamp(15px,3.8vw,19px)/1.4 Georgia,serif;text-align:center;margin:0}
 .mobile-intro.en{font-size:clamp(13px,3.3vw,17px);font-style:italic}
 .mobile-quote{margin:auto 0 0;text-align:center;font:italic clamp(15px,3.9vw,18px)/1.26 Georgia,serif;color:#594428;transform:translateY(-8px)}
 .mobile-quote small{display:block;margin-top:6px;font-size:.81em;line-height:1.24;transform:translateX(10px)}
 .mobile-leaf-contents{align-items:stretch;gap:0;inset:6% 5% 13% 19%}
 .mobile-leaf-contents h2{font:400 clamp(30px,8vw,43px)/1.08 Georgia,serif;margin:7px 0 0;text-align:center}
 .mobile-translation{text-align:center;font:italic clamp(13px,3.3vw,17px)/1.25 Georgia,serif;margin:0}
 .mobile-leaf-contents .mobile-divider{font-size:18px;line-height:1.4;margin:5px 0 4px}
 .mobile-leaf-contents h3{font:700 clamp(10px,2.5vw,12px)/1.28 Georgia,serif;letter-spacing:.04em;text-transform:uppercase;margin:7px 0 4px;border-bottom:1px solid #a48d64;padding:0 0 5px;color:#6a4c24}
 .mobile-chapter{display:grid;grid-template-columns:22px minmax(0,1fr) 12px;gap:5px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(131,103,59,.20);text-decoration:none;color:#332916;min-height:54px}
 .mobile-chapter:active{background:rgba(98,78,39,.1)}
 .mobile-chapter:focus-visible,.mobile-cover:focus-visible,.mobile-turn:focus-visible{outline:2px solid #8c652d;outline-offset:2px}
 .mobile-chapter-no{font:italic 16px Georgia,serif;color:#9e793d}
 .mobile-chapter-info{display:block;min-width:0}
 .mobile-chapter-info strong{font:400 clamp(14px,3.5vw,17px)/1.18 Georgia,serif;display:block;overflow-wrap:break-word}
 .mobile-chapter-info small{display:block;font:italic clamp(11px,2.9vw,13px)/1.2 Georgia,serif;color:#6f6048;margin-top:3px}
 .mobile-chapter-arrow{font:17px Georgia,serif;color:#9e793d}
 .mobile-page-nav{position:absolute;bottom:5.7%;left:20%;right:8%;display:flex;justify-content:space-between;align-items:center;height:6%;color:#503d22}
 .mobile-turn{appearance:none;background:rgba(236,214,170,.84);color:#5b4628;border:1px solid rgba(105,84,40,.45);box-shadow:0 1px 5px #49351930;border-radius:50%;width:36px;height:36px;font:26px/1 Georgia,serif;cursor:pointer}
 .mobile-turn[disabled]{opacity:.35;cursor:default}
 .mobile-counter{font:700 13px Georgia,serif;letter-spacing:.15em}
 .tools{margin-top:12px}
 .tools .hint{display:none}
}
@media(max-width:345px){
 .mobile-leaf-contents h3{margin:4px 0 1px;padding-bottom:3px}
 .mobile-chapter{min-height:46px;padding:4px 0}
 .mobile-chapter-info strong{font-size:13px}
 .mobile-chapter-info small{font-size:11px}
 .mobile-leaf-title .mobile-title-crest{height:27%}
 .mobile-leaf-title h1{font-size:33px}
 .mobile-intro{font-size:13px}
}