*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#fff;color:#171717}
body{min-height:100dvh;overflow:hidden;font-family:Arial,Helvetica,sans-serif}
a,button{-webkit-tap-highlight-color:transparent}

.site-header{
  position:fixed;z-index:10;inset:0 0 auto 0;height:110px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 22px 10px;background:#fff
}
.brand{display:flex;align-items:center;min-width:0;max-width:min(76vw,900px);text-decoration:none;color:inherit}
.brand img{display:block;width:auto;max-width:100%;height:72px;object-fit:contain;object-position:left center}
.instagram{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;text-decoration:none}
.instagram img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

.separator{
  position:fixed;z-index:10;top:98px;left:15px;right:15px;height:10px;
  display:flex;align-items:center;pointer-events:none
}
.separator img{display:block;width:100%;height:6px;object-fit:fill}

.viewer{
  width:100vw;height:100dvh;
  display:grid;grid-template-columns:minmax(42px,7vw) minmax(0,1fr) minmax(42px,7vw);
  align-items:center;padding:126px 6px 12px;background:#fff
}
.frame{
  min-width:0;min-height:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
.comic{
  display:block;width:100%;height:100%;max-width:100%;max-height:100%;
  object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none
}
.nav{
  height:100%;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:#111;text-decoration:none;
  font-family:Arial,Helvetica,sans-serif;font-size:clamp(40px,6vw,74px);
  line-height:1;cursor:pointer;opacity:.76
}
.nav:hover{opacity:1}
.nav.hidden{visibility:hidden;pointer-events:none}
.nav:focus-visible,.instagram:focus-visible,.brand:focus-visible{outline:3px solid #111;outline-offset:4px}

@media(max-width:700px){
  .site-header{height:82px;gap:10px;padding:9px 12px 7px}
  .brand{max-width:78vw}
  .brand img{height:54px}
  .instagram{width:43px;height:43px}
  .separator{top:72px;left:8px;right:8px;height:8px}
  .separator img{height:4px}
  .viewer{grid-template-columns:36px minmax(0,1fr) 36px;padding:92px 1px 7px}
  .nav{font-size:42px;padding:0}
}