*{box-sizing:border-box}
:root{--bg:#e8e4dc;--paper:#f4f0e8;--ink:#181816;--muted:#77736b;--line:rgba(24,24,22,.17);--dark:#171715;--serif:'Playfair Display',Georgia,serif;--sans:'Manrope',Arial,sans-serif;--mono:'DM Mono',monospace}
html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
a,button{color:inherit}a{text-decoration:none}button{font:inherit;background:none;border:0;cursor:pointer}
.grain{position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.nav{height:76px;position:fixed;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4vw;border-bottom:1px solid var(--line);background:rgba(232,228,220,.88);backdrop-filter:blur(15px)}
.jk{font-size:37px;font-weight:700;letter-spacing:-.12em}.jk span{font-family:var(--serif);font-style:italic}
.nav-center,.nav-contact{font:9px var(--mono);letter-spacing:.13em}.nav-contact{justify-self:end;border-bottom:1px solid}
.hero{min-height:100vh;padding:120px 4vw 42px;position:relative;display:flex;align-items:flex-end}
.hero-grid{position:absolute;inset:76px 4vw 0;background:linear-gradient(90deg,transparent 0 24.9%,var(--line) 25%,transparent 25.1% 49.9%,var(--line) 50%,transparent 50.1% 74.9%,var(--line) 75%,transparent 75.1%);opacity:.5}
.hero-grid:after{content:"";position:absolute;top:36%;left:0;right:0;border-top:1px solid var(--line)}
.hero-top{position:absolute;top:103px;left:4vw;right:4vw;display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.13em}
.hero-name{position:relative;z-index:1}.hero-name p{font:10px var(--mono);letter-spacing:.15em;margin:0 0 24px}
.hero-name h1{font-size:clamp(100px,14vw,220px);line-height:.76;letter-spacing:-.095em;font-weight:600;margin:0}.hero-name h1 em{font-family:var(--serif);font-weight:500}
.hero-rule{width:min(34vw,520px);border-top:1px solid;margin:43px 0 15px}.hero-name small{font:9px var(--mono);letter-spacing:.08em}
.hero-bottom{position:absolute;bottom:42px;right:4vw;left:4vw;display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.12em}
.statement{padding:145px 8vw 140px;display:grid;grid-template-columns:20% 1fr;gap:7vw;border-top:1px solid var(--line)}
.section-kicker{font:9px var(--mono);letter-spacing:.14em;color:var(--muted)}
.statement h2{font-size:clamp(58px,8vw,125px);line-height:.82;letter-spacing:-.075em;font-weight:500;margin:0 0 42px}.statement h2 em,.book-head h2 em,.contact h2 em{font-family:var(--serif)}
.statement p{max-width:600px;font-size:14px;line-height:1.8;color:var(--muted);margin:0}
.book-section{padding:90px 4vw 130px;border-top:1px solid var(--line);background:var(--paper)}
.book-head{display:flex;justify-content:space-between;align-items:flex-end;margin:0 4vw 55px}.book-head h2{font-size:clamp(68px,9vw,140px);line-height:.78;letter-spacing:-.08em;font-weight:500;margin:18px 0 0}.book-note{font:10px var(--mono);line-height:1.7;color:var(--muted);text-align:right}
.book-shell{display:flex;align-items:center;justify-content:center;gap:22px;min-height:72vh;perspective:1800px}
.book{width:min(82vw,1050px);height:min(72vh,790px);position:relative;transform-style:preserve-3d}
.paper{position:absolute;inset:0;background:#fff;box-shadow:0 26px 65px rgba(0,0,0,.16);overflow:hidden;transform-style:preserve-3d}
.paper img{display:block;width:100%;height:100%;object-fit:contain;background:#f7f5f0}
.current-paper{z-index:3;transform-origin:left center;backface-visibility:hidden}
.current-paper:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 45px rgba(0,0,0,.06)}
.next-paper{z-index:1;left:4px}.back-paper{z-index:0;left:-4px}
.paper-edge{position:absolute;top:0;bottom:0;right:0;width:18px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.1));opacity:.5}
.turn-forward{animation:pageForward .56s cubic-bezier(.35,.05,.2,1) forwards}.turn-back{animation:pageBack .56s cubic-bezier(.35,.05,.2,1) forwards}
@keyframes pageForward{0%{transform:rotateY(0);box-shadow:0 26px 65px rgba(0,0,0,.16)}45%{box-shadow:-22px 30px 55px rgba(0,0,0,.22)}100%{transform:rotateY(-178deg);box-shadow:-8px 20px 40px rgba(0,0,0,.08)}}
@keyframes pageBack{0%{transform:rotateY(0)}45%{box-shadow:22px 30px 55px rgba(0,0,0,.22)}100%{transform:rotateY(178deg);box-shadow:8px 20px 40px rgba(0,0,0,.08)}}
.book-arrow{width:50px;height:50px;border:1px solid var(--line);border-radius:50%;font-size:18px;flex:0 0 auto;transition:background .2s,transform .2s}.book-arrow:hover{background:var(--ink);color:var(--paper);transform:scale(1.06)}
.book-controls{display:flex;align-items:center;justify-content:center;gap:50px;margin:34px 0 40px;font:9px var(--mono);letter-spacing:.12em}.book-controls button{border-bottom:1px solid var(--line);padding-bottom:4px}
.page-counter{display:flex;gap:12px;align-items:center}.page-counter i{width:55px;border-top:1px solid var(--line)}
.thumbs{display:flex;gap:7px;overflow-x:auto;padding:8px 0 14px;scrollbar-width:thin}.thumb{flex:0 0 65px;height:82px;padding:2px;background:#ddd8cf;border:1px solid transparent;opacity:.55;transition:opacity .2s,border .2s,transform .2s}.thumb img{width:100%;height:100%;object-fit:contain;background:white}.thumb:hover,.thumb.active{opacity:1;border-color:var(--ink);transform:translateY(-3px)}
.process-note{padding:120px 8vw;display:grid;grid-template-columns:20% 1fr;gap:7vw;border-top:1px solid var(--line)}.process-note p{font-size:18px;line-height:1.6;max-width:650px;margin:0}
.contact{background:var(--dark);color:var(--paper);padding:135px 8vw 70px}.contact-top{display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.13em;color:#a6a29a}.contact h2{font-size:clamp(80px,12vw,180px);line-height:.76;letter-spacing:-.08em;font-weight:500;margin:85px 0 125px}
.contact-row{border-top:1px solid #5a5953;padding-top:24px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}.contact-links{display:flex;flex-direction:column;gap:13px}.contact-links a{width:max-content;font-size:18px;border-bottom:1px solid #77746c;padding-bottom:3px}.contact-links a+ a{font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase}.download{border:1px solid #aaa79e;padding:13px 16px;font:10px var(--mono);letter-spacing:.09em;text-transform:uppercase;display:flex;gap:28px}.download:hover{background:var(--paper);color:var(--ink)}
footer{background:var(--dark);color:#85827a;border-top:1px solid #44433e;padding:23px 8vw;display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.1em}
@media(max-width:850px){.nav{height:68px;padding:0 20px;grid-template-columns:1fr auto}.nav-center{display:none}.jk{font-size:32px}.hero{padding:105px 20px 35px}.hero-top{top:91px;left:20px;right:20px}.hero-grid{inset:68px 20px 0}.hero-name h1{font-size:clamp(76px,19vw,135px)}.hero-bottom{left:20px;right:20px;bottom:30px}.statement{padding:100px 20px;grid-template-columns:1fr;gap:35px}.book-section{padding:80px 20px 100px}.book-head{margin:0 0 40px;display:block}.book-note{text-align:left;margin-top:25px}.book-shell{min-height:60vh;gap:8px}.book{width:calc(100vw - 70px);height:58vh}.book-arrow{width:38px;height:38px;font-size:15px}.book-controls{gap:25px}.thumb{flex-basis:55px;height:70px}.process-note{padding:90px 20px;grid-template-columns:1fr;gap:30px}.contact{padding:100px 20px 50px}.contact h2{margin:70px 0 90px;font-size:clamp(68px,17vw,115px)}.contact-row{grid-template-columns:1fr}.download{width:max-content}footer{padding:20px;display:grid;gap:10px}}
@media(max-width:520px){.book{height:53vh}.book-arrow{display:none}.book-shell{min-height:53vh}.book-controls{margin-top:25px}.book-head h2{font-size:68px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.turn-forward,.turn-back{animation:none}}

/* FINAL ARCHITECTURAL ART DIRECTION */
.hero-name h1{font-family:'Manrope',Arial,sans-serif!important;font-weight:700;font-style:normal;text-transform:uppercase;letter-spacing:-.095em;line-height:.78}
.hero-name h1 em{font-family:'Manrope',Arial,sans-serif;font-style:normal;font-weight:700}
/* refined physical-book illusion */
.book-stage{position:relative;width:min(84vw,1080px);height:min(74vh,820px);display:flex;align-items:center;justify-content:center;perspective:2600px}
.book-shadow{position:absolute;width:84%;height:9%;bottom:3%;left:8%;border-radius:50%;background:rgba(0,0,0,.20);filter:blur(28px);transform:rotateX(72deg)}
.book{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(1deg)}
.current-paper{transform-origin:left center;backface-visibility:hidden;z-index:5}
.paper{overflow:hidden;transform-style:preserve-3d}
.paper img{object-fit:contain}
.current-paper:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.04),transparent 8%,transparent 91%,rgba(0,0,0,.06))}
.page-gloss{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.paper-edge{position:absolute;top:0;bottom:0;right:0;width:22px;z-index:4;background:linear-gradient(90deg,transparent,rgba(0,0,0,.14));pointer-events:none}
.next-paper{z-index:2;left:5px}.back-paper{z-index:1;left:-5px}
.page-stack{position:absolute;top:1%;bottom:1%;width:9px;background:repeating-linear-gradient(to bottom,#d9d5cd 0 2px,#eeeae3 2px 4px);z-index:0}
.stack-left{left:-9px}.stack-right{right:-9px}
.flip-forward{animation:realFlipForward .98s cubic-bezier(.22,.61,.36,1) forwards}
.flip-back{animation:realFlipBack .98s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes realFlipForward{0%{transform:rotateY(0);box-shadow:0 28px 65px rgba(0,0,0,.15)}22%{box-shadow:-12px 32px 50px rgba(0,0,0,.20)}50%{transform:rotateY(-88deg);box-shadow:-28px 28px 42px rgba(0,0,0,.25)}78%{box-shadow:-14px 22px 34px rgba(0,0,0,.13)}100%{transform:rotateY(-180deg);box-shadow:-3px 20px 30px rgba(0,0,0,.06)}}
@keyframes realFlipBack{0%{transform:rotateY(0)}22%{box-shadow:12px 32px 50px rgba(0,0,0,.20)}50%{transform:rotateY(88deg);box-shadow:28px 28px 42px rgba(0,0,0,.25)}78%{box-shadow:14px 22px 34px rgba(0,0,0,.13)}100%{transform:rotateY(180deg);box-shadow:3px 20px 30px rgba(0,0,0,.06)}}
.book-arrow,.control-round{width:54px;height:54px;min-width:54px;border:1px solid rgba(24,24,22,.25);border-radius:50%;display:grid;place-items:center;font-size:26px;line-height:1;transition:.25s ease}
.book-arrow:hover,.control-round:hover{transform:scale(1.08);background:var(--ink);color:var(--paper);border-color:var(--ink)}
.reader-status{display:flex;align-items:center;gap:35px}
.autoplay{height:38px;padding:0 18px;border:1px solid rgba(24,24,22,.25);border-radius:999px;display:flex;align-items:center;gap:9px;font:9px var(--mono);letter-spacing:.12em}
.play-dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:block}
.autoplay[aria-pressed="true"] .play-dot{animation:pulse 1.4s ease-in-out infinite}.autoplay.paused .play-dot{opacity:.4;animation:none}
@keyframes pulse{0%,100%{transform:scale(.7);opacity:.45}50%{transform:scale(1);opacity:1}}
@media(max-width:850px){.book-stage{width:calc(100vw - 78px);height:58vh;min-height:430px}.reader-status{gap:18px}.control-round,.book-arrow{width:44px;height:44px;min-width:44px;font-size:20px}}
@media(max-width:520px){.book-arrow{display:none}.book-stage{width:100%;height:56vh;min-height:370px}.reader-status{gap:12px}.autoplay{padding:0 13px}}

/* FINAL READER POLISH — native folio ratio, no artificial side borders */
.book-stage{
  width:min(86vw,1180px);
  aspect-ratio:1250 / 884;
  height:auto;
  max-height:calc(100vh - 245px);
}
.book{aspect-ratio:1250 / 884;height:100%}
.paper{border-radius:2px}
.paper img{width:100%;height:100%;object-fit:fill;background:transparent}
.current-paper:before{background:linear-gradient(90deg,rgba(0,0,0,.028),transparent 5%,transparent 95%,rgba(0,0,0,.035))}
.page-gloss{mix-blend-mode:screen}
.book-shadow{width:88%;left:6%;bottom:0}
.flip-forward,.flip-back{animation-duration:1.18s}
@media(max-width:850px){
  .book-stage{width:calc(100vw - 74px);height:auto;min-height:0;max-height:none;aspect-ratio:1250 / 884}
}
@media(max-width:520px){
  .book-stage{width:100%;height:auto;min-height:0;aspect-ratio:1250 / 884}
}

/* SUPERFINAL REFERENCE-MATCHED ART DIRECTION */
:root{--bg:#d9d5cc;--paper:#f4f1ea;--ink:#181816;--muted:#6e6a62;--line:rgba(24,24,22,.16);--dark:#171715}
body{background:#e3dfd7}
.nav{height:70px;padding:0 3.2vw;background:rgba(231,227,219,.88)}
.jk{font-size:36px;letter-spacing:-.14em}
.nav-center{letter-spacing:.16em}
.nav-contact{letter-spacing:.11em}
.hero{min-height:88vh;padding:105px 3.2vw 34px;background:linear-gradient(180deg,#e4e0d8 0%,#ebe7df 100%);align-items:flex-end}
.hero-grid{inset:70px 3.2vw 0;opacity:.26}
.hero-top{top:91px;left:3.2vw;right:3.2vw}
.hero-contact{position:absolute;right:7.5vw;top:108px;display:flex;flex-direction:column;gap:10px;z-index:2;font-size:13px}
.hero-contact a{display:flex;align-items:center;gap:10px}
.hero-contact-icon{display:grid;place-items:center;width:15px;height:15px;font:11px var(--mono)}
.hero-name p{margin-bottom:20px}
.hero-name h1{font-size:clamp(96px,10.5vw,176px);letter-spacing:.035em;line-height:.82;font-weight:600}
.hero-rule{width:105px;margin:30px 0 14px}
.hero-name small{font-size:9px}
.hero-bottom{left:3.2vw;right:3.2vw}
.statement{padding:100px 8vw 105px;background:#e9e5dd}
.statement h2{font-size:clamp(52px,7vw,104px)}
.book-section{padding:80px 3.2vw 80px;background:#e9e5dd}
.book-head{margin:0 0 35px 0}
.book-head h2{font-size:clamp(60px,7.5vw,112px)}
.book-note{max-width:420px}
.book-shell{min-height:0;gap:22px}
.book-stage{position:relative;width:min(86vw,1180px);aspect-ratio:1250/884;height:auto;max-height:none}
.book{aspect-ratio:1250/884;height:100%;width:100%}
.paper img{object-fit:fill}
.current-paper{cursor:zoom-in}
.read-page{position:absolute;right:18px;top:18px;z-index:12;height:38px;padding:0 14px;border:1px solid rgba(24,24,22,.28);border-radius:999px;background:rgba(245,242,235,.84);backdrop-filter:blur(12px);display:flex;align-items:center;gap:8px;font:9px var(--mono);letter-spacing:.12em;opacity:.86;transition:.25s}
.read-page span{font-size:18px;line-height:0}.read-page:hover{opacity:1;transform:translateY(-1px);background:#181816;color:#f4f1ea}
.book-shadow{bottom:-2%;width:90%;left:5%;opacity:.7}
.book-controls{margin:24px 0 18px;gap:36px}
.book-controls .control-round{background:rgba(245,242,235,.55)}
.folio-strip{display:grid;grid-template-columns:92px 44px minmax(0,1fr) 44px;align-items:center;gap:12px;margin:0 auto;padding:18px 20px;background:#1a1917;color:#f0ede5;border-radius:20px;max-width:1390px;box-shadow:0 20px 40px rgba(0,0,0,.13)}
.folio-meta{display:flex;flex-direction:column;gap:4px;padding-left:4px}.folio-meta span{font:8px var(--mono);letter-spacing:.15em;opacity:.65}.folio-meta strong{font:13px var(--mono);font-weight:400}.folio-meta small{font:8px var(--mono);opacity:.55}
.thumbs{min-width:0;padding:2px 5px 7px;gap:10px;scrollbar-width:none}.thumb{flex-basis:82px;height:58px;padding:2px;background:#3b3935;border:1px solid transparent;border-radius:3px;opacity:.5}.thumb img{object-fit:cover}.thumb:hover,.thumb.active{opacity:1;border-color:#f0ede5;transform:translateY(-2px)}
.strip-arrow{width:40px;height:40px;border:1px solid rgba(240,237,229,.25);border-radius:50%;color:#f0ede5;font-size:23px;display:grid;place-items:center;transition:.2s}.strip-arrow:hover{background:#f0ede5;color:#1a1917}
.folio-download-wrap{display:flex;justify-content:center;margin:16px 0 0}.folio-download{display:inline-flex;align-items:center;justify-content:center;min-width:370px;padding:15px 24px;border-radius:999px;background:#b8a88e;color:#171715;font:10px var(--mono);letter-spacing:.1em;box-shadow:0 10px 24px rgba(0,0,0,.09);transition:.25s}.folio-download:hover{transform:translateY(-2px);background:#c8baa4}
.process-note{padding:85px 8vw;background:#e3dfd7}
.contact{padding-top:110px}
footer{padding:20px 6vw}

body.modal-open{overflow:hidden}
.folio-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:5vh 4vw;visibility:hidden;opacity:0;transition:opacity .32s ease,visibility .32s ease}
.folio-modal.open{visibility:visible;opacity:1}
.modal-backdrop{position:absolute;inset:0;background:rgba(21,20,18,.58);backdrop-filter:blur(13px)}
.modal-card{position:relative;z-index:1;width:min(92vw,1180px);height:min(88vh,820px);padding:18px 18px 14px;background:#f5f2eb;border-radius:18px;box-shadow:0 35px 100px rgba(0,0,0,.36);display:grid;grid-template-rows:auto 1fr auto;transform:translateY(16px) scale(.985);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.folio-modal.open .modal-card{transform:translateY(0) scale(1)}
.modal-topline{display:flex;justify-content:space-between;gap:20px;padding:0 4px 12px;font:8px var(--mono);letter-spacing:.13em;color:#69655e}
.modal-image-wrap{position:relative;min-height:0;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:#eae6de}
.modal-image-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;object-fit:contain;transform-origin:center;transition:transform .18s ease;user-select:none;touch-action:none;cursor:grab}
.modal-image-wrap img.is-zoomed{cursor:grab}
.modal-loading{position:absolute;inset:0;display:grid;place-items:center;font:9px var(--mono);letter-spacing:.16em;background:rgba(245,242,235,.72);opacity:0;pointer-events:none;transition:.2s}.modal-loading.show{opacity:1}
.modal-close{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:50%;background:#181816;color:#f4f1ea;font-size:27px;line-height:1;display:grid;place-items:center;box-shadow:0 7px 18px rgba(0,0,0,.18);transition:.2s}.modal-close:hover{transform:rotate(90deg) scale(1.06)}
.modal-controls{display:flex;align-items:center;justify-content:center;gap:10px;padding-top:12px;font:9px var(--mono);letter-spacing:.1em}.modal-tool{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.modal-tool:hover{background:#181816;color:#f4f1ea}.modal-tool.reset{width:auto;padding:0 12px;border-radius:999px;font:8px var(--mono);letter-spacing:.1em}
@media(max-width:850px){
  .hero-contact{right:20px;top:95px;font-size:11px}.hero-name h1{font-size:clamp(70px,13vw,120px)}
  .folio-strip{grid-template-columns:70px 38px minmax(0,1fr) 38px;padding:13px 12px;border-radius:15px}.thumb{flex-basis:72px;height:52px}
  .folio-download{min-width:300px}
  .modal-card{width:96vw;height:86vh;padding:12px}
}
@media(max-width:520px){
  .hero-contact{position:relative;right:auto;top:auto;margin:0 0 28px;order:0}.hero{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}
  .hero-name h1{font-size:clamp(58px,16vw,90px);letter-spacing:.02em}.hero-name{margin-top:auto}
  .hero-name small{line-height:1.6}.read-page{right:9px;top:9px;height:34px;padding:0 10px}.read-page b{display:none}
  .folio-strip{grid-template-columns:1fr 38px;grid-template-areas:"meta prev" "thumbs thumbs" "next next"}.folio-meta{grid-area:meta}.folio-strip>.strip-arrow:first-of-type{grid-area:prev}.folio-strip>.thumbs{grid-area:thumbs}.folio-strip>.strip-arrow:last-of-type{grid-area:next;justify-self:end}
  .folio-download{min-width:0;width:100%;font-size:8px}.modal-card{height:82vh;border-radius:13px}.modal-topline span:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){.folio-modal,.modal-card{transition:none}.flip-forward,.flip-back{animation:none}}