:root { --ink:#0b0b0b; --paper:#f7f6f2; --line:#c9c8c2; }
* { box-sizing:border-box; }
html,body { margin:0; overflow:hidden; background:#111; color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
main { width:100vw; height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
.banner { position:relative; z-index:5; flex:0 0 66px; padding:8px 2.4vw; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); background:var(--paper); }
.wordmark { font-size:clamp(20px,2.2vw,31px); letter-spacing:-1.7px; white-space:nowrap; }
.wordmark strong { font-size:1.28em; font-weight:800; letter-spacing:-2.5px; }
.portfolio-nav { display:flex; align-items:center; gap:.65em; margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.15em; }
.portfolio-link { padding:5px 0; border:0; border-bottom:1px solid transparent; color:inherit; background:transparent; font:inherit; text-transform:inherit; letter-spacing:inherit; text-decoration:none; cursor:pointer; opacity:.56; transition:opacity .2s ease,border-color .2s ease; }
.portfolio-link:hover,.portfolio-link:focus-visible,.portfolio-link.is-active { border-bottom-color:currentColor; opacity:1; outline:none; }
.reader { position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; background:#111; }
.page-stage { position:relative; width:100%; height:100%; overflow:hidden; }
.pages-track { display:flex; width:100%; height:100%; transition:transform .55s cubic-bezier(.65,0,.35,1); will-change:transform; }
.pages-track img { display:block; flex:0 0 100%; width:100%; height:100%; object-fit:contain; }
.page-count { position:absolute; z-index:3; right:22px; bottom:22px; margin:0; padding:8px 11px; border-radius:9px; background:rgb(255 255 255 / 90%); font-size:9px; letter-spacing:.14em; color:#777; transition:opacity .45s ease; }
.page-count span { color:var(--ink); }
.arrow { position:absolute; top:50%; z-index:4; width:58px; height:120px; margin-top:-60px; padding:0; border:0; background:transparent; opacity:.9; cursor:pointer; filter:drop-shadow(0 2px 5px rgb(0 0 0 / 28%)); transition:transform .2s ease,opacity .45s ease; }
.arrow img { display:block; width:100%; height:100%; object-fit:contain; }
.arrow-right img { transform:scaleX(-1); }
.arrow:hover:not(:disabled) { transform:scale(1.1); }
.arrow:disabled { opacity:.22; cursor:default; }
.arrow-left { left:22px; }
.arrow-right { right:22px; }
.reader.controls-idle .arrow:not(:disabled),.reader.controls-idle .page-count { opacity:.1; }
.actions-bar { position:relative; z-index:5; flex:0 0 68px; padding:0 20px; display:flex; align-items:center; justify-content:center; gap:clamp(18px,3vw,48px); background:#111; border-top:1px solid rgb(255 255 255 / 12%); }
.action-link { padding:5px 0; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; border-bottom:1px solid transparent; color:#fff; background:transparent; text-align:center; text-decoration:none; font:inherit; font-size:10px; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; opacity:.9; transition:opacity .2s ease,border-color .2s ease; }
.action-link:hover,.action-link:focus-visible { opacity:1; border-bottom-color:#fff; outline:none; }
.social-icon { width:15px; height:15px; flex:0 0 15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.whatsapp-icon { fill:currentColor; stroke:none; }
.icon-dot { fill:currentColor; stroke:none; }
.copy-toast { position:fixed; z-index:20; left:50%; bottom:82px; padding:9px 13px; border-radius:4px; color:#111; background:#fff; font-size:10px; text-transform:uppercase; letter-spacing:.1em; opacity:0; pointer-events:none; transform:translate(-50%,8px); transition:opacity .2s ease,transform .2s ease; }
.copy-toast.is-visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:640px) {
  .banner { flex-basis:72px; padding:9px 20px; display:block; }
  .portfolio-nav { margin-top:6px; gap:.5em; font-size:9px; }
  .arrow { width:42px; height:88px; margin-top:-44px; }
  .arrow-left { left:10px; }
  .arrow-right { right:10px; }
  .actions-bar { flex-basis:auto; min-height:76px; padding:10px 16px; flex-wrap:wrap; align-content:center; gap:5px 18px; }
  .action-link { font-size:8px; }
  .copy-toast { bottom:88px; }
}
@media (max-width:390px) {
  .actions-bar { gap:4px 12px; }
  .action-link { font-size:7px; }
}
@media (prefers-reduced-motion:reduce) { .pages-track,.action-link,.copy-toast { transition:none; } }